/* Cổng trao đổi — bố cục THẬT (co giãn) đặt trên bộ màu + thành phần của mockup (khung.css sinh từ docs/mockup/khung.py).
   Luật chung Hà 02/11: header ngang TOÀN khung (logo + tên bên trái; khu tài khoản ngoài cùng bên phải), menu trái dưới header,
   thu gọn chỉ còn biểu tượng; bảng: STT · xen màu · phân trang + tìm. Hà 03/11: nút ☰ ở hàng trên cùng của MENU, không ở header. */
html,body{height:100%}
body{background:var(--nen);overflow:hidden}
body.cho #khung-chinh{visibility:hidden}
#man-cho{position:fixed;inset:0;z-index:99;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
background:#fff;transition:opacity .25s ease,visibility 0s linear .25s}#man-cho p{margin:0;color:var(--mo)}
#man-cho button{font:inherit;padding:7px 16px;border-radius:8px;border:1px solid var(--chinh);background:var(--chinh);color:#fff;cursor:pointer}
body.xong #man-cho{opacity:0;visibility:hidden;pointer-events:none}
#khung-chinh{display:flex;flex-direction:column;height:100%}
header.dau{height:54px;flex:none;display:flex;align-items:center;gap:10px;padding:0 14px 0 18px;background:#fff;border-bottom:1px solid var(--vien);
position:relative;z-index:20}
header.dau .goc{display:flex;align-items:center;gap:8px;flex:none;text-decoration:none;color:inherit;min-width:0}
header.dau .td{font-weight:650;font-size:15.5px;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-left:12px;
border-left:1px solid var(--vien);line-height:26px;margin-left:8px}
button.nut-menu{border:0;border-bottom:1px solid #2c3a59;background:none;cursor:pointer;font:inherit;font-size:13px;text-align:left}
button.nut-menu:hover{background:#24324f;color:#fff}
.tk .nut-tk{border:0;background:none;cursor:pointer;font:inherit;font-size:12.5px;text-decoration:none}
.tk .nut-tk:hover{background:#eef1f6}
.than{flex:1;display:flex;min-height:0;position:relative}
aside#menu{width:226px;background:var(--toi);color:#c9d2e3;padding:8px 0;flex:none;font-size:13.5px;overflow-y:auto;transition:width .15s}
aside#menu a{display:flex;align-items:center;gap:10px;padding:8px 18px;color:#c9d2e3;text-decoration:none;white-space:nowrap}
aside#menu a .ic{width:17px;height:17px;opacity:.9} aside#menu a:hover{background:#24324f;color:#fff}
aside#menu a.on{background:#2b3a5c;color:#fff;border-left:3px solid #6ea8fe;padding-left:15px}
aside#menu .nhom{padding:14px 18px 4px;font-size:11.5px;text-transform:uppercase;letter-spacing:.04em;color:#7f8ba6;white-space:nowrap}
body.thu aside#menu{width:60px} body.thu aside#menu a span,body.thu aside#menu .nut-menu span{display:none}
body.thu aside#menu a,body.thu aside#menu .nut-menu{justify-content:center;padding:10px 0}
body.thu aside#menu a.on{padding-left:0} body.thu aside#menu .nhom{font-size:0;padding:0;height:1px;background:#2c3a59;margin:8px 12px}
main#nd{flex:1;min-width:0;overflow:auto;padding:18px 22px 40px}
/* khung phải = ngăn trượt ĐÈ lên phần phải của danh sách (không ép bảng): cột STT · mã · tiêu đề · người vẫn thấy + bấm được */
#khung-phai{position:absolute;top:0;right:0;bottom:0;width:min(880px,calc(100% - 226px - 460px));min-width:560px;z-index:10;background:#fff;
border-left:1px solid var(--vien);overflow:auto;padding:0 0 30px;box-shadow:-10px 0 28px rgba(20,30,50,.14)}
body.thu #khung-phai{width:min(880px,calc(100% - 60px - 460px))}
body.chua-dn aside#menu,body.chua-dn #nut-menu{display:none}
.so-6 .the span{white-space:nowrap}
/* thành phần thật (mockup chỉ có span) */
input.o,select.o,textarea.o{font:inherit;font-size:13.5px;display:inline-block;color:var(--chu)} textarea.o{width:100%;resize:vertical;min-height:70px}
.tr input.o,.tr select.o,.tr textarea.o{width:100%} input.o:focus,select.o:focus,textarea.o:focus{outline:2px solid #9ec0ff;border-color:var(--chinh)}
input.o.tim{min-width:280px;color:var(--chu)}
button.nut,a.nut,label.nut{cursor:pointer;font:inherit;font-size:13px;text-decoration:none} button.nut:disabled{opacity:.5;cursor:default}
.nut.rong{display:flex;justify-content:center;width:100%;min-height:40px;font-size:14px}
button.lk{border:0;background:none;color:#1f3a6f;cursor:pointer;font:inherit;padding:0;text-decoration:underline} button.lk.do{color:var(--do)}
a{color:#1f4fae}
.an,.an-tep{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.nho{display:block;color:var(--mo);font-size:12px} .nhat{color:var(--nhat)} .mo{color:var(--mo)} .gian{flex:1}
.so-6{grid-template-columns:repeat(var(--cot,6),minmax(0,1fr))}
.khoa-chan{margin-right:5px;cursor:help} .lk-chan{display:inline-flex;align-items:center;gap:4px;margin:0 10px 4px 0;white-space:nowrap}
#bang-danh-muc tbody tr{cursor:default} #bang-danh-muc code{font-size:12px;color:var(--mo)} #dm-xem{margin-left:6px}
button.the-so{text-align:left;cursor:pointer;font:inherit} button.the-so:hover{border-color:#9fb3d9} button.the-so.on{border-color:var(--chinh);box-shadow:inset 0 0 0 1px var(--chinh)}
.chip{border:1px solid var(--vien);background:#fff;border-radius:16px;padding:5px 12px;font:inherit;font-size:13px;cursor:pointer;color:#3d4a66}
.chip em{font-style:normal;margin-left:6px;color:var(--mo);font-size:12px} .chip.on{background:var(--chinh);border-color:var(--chinh);color:#fff}
.chip.on em{color:#dbe6ff}
table.b tbody tr{cursor:pointer} table.b tbody tr:focus{outline:2px solid #9ec0ff;outline-offset:-2px}
table.b td.qua-han,.qua-han{color:var(--do);font-weight:600}
table.b tr.bo td{color:var(--nhat)}
.td-tieu-de{font-weight:600} .ma-o a{font-family:ui-monospace,Menlo,monospace;font-size:12.5px;white-space:nowrap}
select.o-tt{min-height:28px;padding:2px 6px;font-size:12.5px}
button.o-trang{cursor:pointer;font:inherit;font-size:12.5px} button.o-trang:disabled{cursor:default}
/* khung phải */
.pn-dau{position:sticky;top:0;background:#fff;z-index:2;display:flex;align-items:center;gap:8px;padding:12px 18px;border-bottom:1px solid var(--vien)}
.pn-td{flex:1;font-size:16px;min-width:0}
.pn-than{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:0}
.pn-trai{padding:4px 18px;min-width:0} .pn-phai{border-left:1px solid var(--vien);background:#fafbfd;padding:4px 14px;min-width:0}
.pn-muc{padding:12px 0;border-bottom:1px solid #eef1f5} .pn-muc:last-child{border-bottom:0} .pn-muc h4{margin:0 0 8px;font-size:13.5px;color:#33405c}
.pn-nd{white-space:pre-wrap;background:#f7f9fc;border-radius:8px;padding:10px 12px;margin-top:10px;font-size:13.5px;overflow-wrap:anywhere}
.pn-lk{margin-top:12px} .pn-lk ul{margin:0;padding-left:18px} .pn-lk li{margin:3px 0}
.pn-nut{margin-top:12px} .pn-form{padding-bottom:20px} .pn-form>.form,.pn-form>.bao,.pn-form>.pn-nut{margin:14px 18px}
.ds-chon{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:13px}
.ds-chon.doc{flex-direction:column;flex-wrap:nowrap;gap:4px;max-height:190px;overflow:auto;border:1px solid var(--vien);border-radius:8px;padding:8px 10px}
.ds-chon.doc label{display:flex;gap:6px;align-items:baseline} .ds-chon.doc .nho{display:inline}
/* B2 (BA v3 §1.2) thanh tiến độ: rãnh + chữ «60 %» (khung chi tiết). gon = CHỈ rãnh, dưới huy hiệu trạng thái của bảng (điện thoại: cạnh trái huy hiệu,
   cùng hàng ①) — số ở title; kết thúc ⇒ xanh lá */
.thanh-td{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:#3d4a66;white-space:nowrap}
.thanh-td .td-ray{flex:0 0 auto;width:72px;height:6px;border-radius:3px;background:#e3e8f0;overflow:hidden} .thanh-td .td-ray>span{display:block;height:100%;background:var(--chinh)}
.thanh-td[data-kt] .td-ray>span{background:var(--xanh)}
.thanh-td.gon{display:flex;margin-top:5px} .thanh-td.gon .td-ray{width:56px;height:4px;border-radius:2px}
#pn-tien-do{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px} .td-sua{display:inline-flex;align-items:center;gap:6px}
.td-sua input.o{width:76px;min-width:0} .td-sua input.o:invalid{border-color:var(--do);box-shadow:0 0 0 2px var(--do-nhat)}
#pn-cho-nguoi .cho-ban{color:var(--do)}
.luong{list-style:none;margin:0;padding:0;display:grid;gap:10px} .bl{border:1px solid var(--vien);border-radius:9px;padding:9px 11px}
.bl.da-xoa{background:#fafafa;color:var(--nhat)} .bl-dau{display:flex;align-items:center;gap:8px} .bl-dau .nho{display:inline}
.bl-nd{white-space:pre-wrap;margin-top:6px;overflow-wrap:anywhere} .bl .av{width:24px;height:24px;font-size:11px}
.soan{margin-top:10px;display:grid;gap:8px}
.ds-tep{list-style:none;margin:6px 0 0;padding:0} .ds-tep li{display:flex;gap:8px;align-items:baseline;padding:2px 0} .ds-tep li .nho{display:inline}
.loi-tep{color:var(--do);font-size:12.5px} .nhom-tep{margin-bottom:8px}
.ls-ds{list-style:none;margin:0;padding:0} .ls{padding:8px 0;border-bottom:1px dashed #e3e7ee;font-size:12.5px}
.ls.bo{opacity:.6} .ls-dau{display:flex;gap:6px;align-items:baseline} .ls-dau .nho{display:inline}
.ls-viec{font-weight:600} .ls-ct{margin:3px 0 0;padding-left:16px} .ls-ct li{margin:1px 0;overflow-wrap:anywhere}
.ls-ct del{color:#8c1b24;background:#fff0f0;text-decoration:line-through} .ls-ct ins{color:#145c2a;background:#ecf8ef;text-decoration:none}
.bo-ly-do{color:var(--vang)} .canh{color:var(--vang);font-size:12px;margin-top:3px}
/* đăng nhập */
.dn{display:flex;justify-content:center;padding:30px 10px} .dn-the{width:420px;max-width:100%;padding:24px 26px;display:grid;gap:12px;
grid-template-columns:minmax(0,1fr)} .dn-the>*{min-width:0} .o-google{overflow:hidden}
@media (max-width:480px){.dn{padding:14px 0} .dn-the{padding:18px 16px}}
.dn-the h2{margin:0;font-size:20px} .dn-the p{margin:0}
.hoac{display:flex;align-items:center;gap:10px;color:var(--nhat);font-size:12.5px} .hoac:before,.hoac:after{content:"";flex:1;height:1px;background:var(--vien)}
.dn-email summary{cursor:pointer;color:#1f4fae;font-size:13px} .dn-email form{margin-top:8px} .dn-email input{flex:1}
/* hộp + thông báo: cố định theo cửa sổ (mockup dùng absolute trong khung giả) */
.phu{position:fixed;z-index:50} .hop.rong-hop{width:720px;max-height:90vh;overflow:auto}
#toasts{position:fixed;right:18px;bottom:18px;z-index:60;display:grid;gap:8px;max-width:min(520px,90vw)}
#toasts .toast{position:static} #toasts .toast.x{background:#145c2a}
/* hẹp */
@media (max-width:1180px){.pn-than{grid-template-columns:1fr} .pn-phai{border-left:0;border-top:1px solid var(--vien)}}
@media (max-width:900px){
  /* ☰ nằm TRONG menu ⇒ menu không được ẩn hẳn: thanh biểu tượng 60 px luôn hiện, ☰ (body.mo-menu) mở rộng 226 px đè lên nội dung */
  .than{padding-left:60px} body.chua-dn .than{padding-left:0}
  aside#menu,body.thu aside#menu{position:absolute;inset:0 auto 0 0;z-index:15;width:60px}
  aside#menu a span,aside#menu .nut-menu span{display:none} aside#menu a,aside#menu .nut-menu{justify-content:center;padding:10px 0}
  aside#menu a.on{padding-left:0} aside#menu .nhom{font-size:0;padding:0;height:1px;background:#2c3a59;margin:8px 12px}
  body.mo-menu aside#menu{width:226px;box-shadow:10px 0 28px rgba(20,30,50,.3)}
  body.mo-menu aside#menu a span,body.mo-menu aside#menu .nut-menu span{display:inline}
  body.mo-menu aside#menu a,body.mo-menu aside#menu .nut-menu{justify-content:flex-start;padding:8px 18px} body.mo-menu aside#menu a.on{padding-left:15px}
  body.mo-menu aside#menu .nhom{font-size:11.5px;padding:14px 18px 4px;height:auto;background:none;margin:0}
  #khung-phai,body.thu #khung-phai{inset:0 0 0 60px;width:auto;min-width:0;z-index:12} .so-6{grid-template-columns:repeat(3,minmax(0,1fr))}
  header.dau .ten-app small,.tk .chu-nho,.tk .nguoi small{display:none} input.o.tim{min-width:0;width:100%} main#nd{padding:12px}
  .form{grid-template-columns:1fr}
  .tk .nguoi>span:last-child{max-width:130px;overflow:hidden;text-overflow:ellipsis}
  header.dau .td{line-height:1.2;white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  overflow-wrap:anywhere}
}
/* điện thoại (qvt 03/11 «sửa luôn tiêu đề header bị cắt trên điện thoại»). Đo 03/11 ở 360/390/414 px: tiêu đề chỉ còn 12 px («B.»), tên
   người dài đẩy «Cài đặt» / «Đăng xuất» ra NGOÀI màn, trang cuộn ngang (.tmp/cong-trao-doi/do-header-hep.mjs). Bỏ chữ tên app (logo vẫn là
   nút về Bảng việc) + chữ tên người (còn ảnh chữ tắt; tên đầy đủ ở title); tiêu đề được xuống 2 dòng (mọi khổ ≤ 900). Ngưỡng 680: ở 601 px còn tên ⇒ «Hoạt động gần đây» thiếu 28 px. */
@media (max-width:680px){
  header.dau{padding:0 6px 0 14px;gap:8px}
  header.dau .ten-app,.tk .nguoi>span:last-child{display:none}
  header.dau .td{margin-left:0;padding-left:10px;font-size:14.5px}
  .tk{gap:0} .tk .nut-tk{padding:6px 7px} .tk .nguoi{margin:0 2px;padding:3px}
  /* NB-007 (ido 04/11): vùng bấm header ≥ 32 × 32 — đo trước: logo 28×28 · chuông / Đăng xuất 32×30 */
  header.dau .goc{min-height:32px;min-width:32px;justify-content:center}
  .tk .nut-tk{min-height:32px;min-width:32px;display:inline-flex;align-items:center;justify-content:center}
}
.o-google{min-height:44px;display:flex;justify-content:center;align-items:center}
.dn-email p{margin:8px 0 4px}
/* bước 4 BA v2 §5 (04/11): ● «Cần xử lý» trên dòng · nút «Lọc» gom 4 ô lọc trên điện thoại · bảng việc thành THẺ ≤ 680 px · ô trả lời ghim đáy.
   Đo trước (04/11 06:19, ux-vai.json): ở 390 px bảng rộng 613 px trong ô 306 ⇒ chỉ thấy STT · Mã · Tiêu đề; 6 thẻ số + 6 chip + 3 ô lọc chiếm hơn nửa
   màn đầu; ô trả lời nằm dưới mép (886 / 844). */
.dau-xl{color:var(--do);margin-right:6px;font-size:12px;vertical-align:1px}
table.b th.s{text-align:right}
/* bước 5: nhãn «Nội bộ» (sổ riêng, khách không đọc được) */
.nhan.nb{background:#3d4a66;color:#fff;margin-right:6px;font-size:11.5px;vertical-align:1px}
#nut-loc{display:none} .loc-ct{display:contents}
/* D14: mẩu chỉ dùng trên thẻ điện thoại — máy tính giữ bảng như cũ (khoá 🔒 + title · ngày giờ đầy đủ) */
.khoa-chan .chan-ma,.o-cn .cn-gon{display:none}
@media (max-width:680px){
  #the-so{display:flex;overflow-x:auto;gap:8px;margin-bottom:10px;padding-bottom:2px} #the-so .the{flex:0 0 auto;min-width:92px;padding:8px 10px}
  #the-so .the b{font-size:18px}
  #loc-nhanh{flex-wrap:nowrap;overflow-x:auto;padding-bottom:2px} #loc-nhanh .chip{flex:0 0 auto}
  #nut-loc{display:inline-flex} .loc-ct{display:none} .loc-ct.mo{display:grid;grid-template-columns:1fr 1fr;gap:8px;width:100%}
  .loc-ct .chon-o,.loc-ct .chon-o select{width:100%;min-width:0}
  /* «Làm mới» + «Lọc» chung một hàng, ô tìm xuống hàng riêng (soát ảnh 04/11 08:5x: mỗi nút một hàng ⇒ thẻ đầu tụt 317 px) */
  #thanh-loc>.nut{order:0} #thanh-loc>#nut-loc{order:1} #thanh-loc>input.o.tim{order:2} #thanh-loc>.loc-ct{order:3}
  #bang-viec thead{display:none}
  #bang-viec,#bang-viec tbody{display:block;width:100%}
  /* D14 (04/11, Quang 16:1x «Checklist hiện danh sách trên mobile khó theo dõi, bố trí lại các dòng thông tin đi» — quyết định phiên chính .tmp/dieu-phoi/thiet-ke-the-dt.md).
     Đo trước (155725): MÃ 0 px (ô chọn trạng thái ép cột mã của lưới cũ) · ô chọn to đầu thẻ · người được giao vỡ 3 dòng · «Hạn —» khi trống · thẻ 131–205 px.
     Thẻ = 4 dòng, xếp bằng flex-wrap + order: ① STT · MÃ · Nội bộ · huy hiệu trạng thái (phải) ② tiêu đề ≤ 2 dòng (● = tới lượt tôi) ③ người được giao 1 dòng · Hạn
     (ẩn khi không có) · 🔒 chờ <mã> ④ nhỏ xám: giai đoạn · nhóm · loại · ưu tiên … cập nhật cuối. Ô «o-td» = display:contents ⇒ nhãn Nội bộ / khoá / tiêu đề / dòng phụ
     bên trong nó thành phần tử của thẻ, xếp từng mẩu. tr::after = ngắt dòng ③ | ④. Đo: TC-CT-45 (≤ 120 px ở 390, mã đúng data-ma trên mọi thẻ). */
  #bang-viec tbody tr{display:flex;flex-wrap:wrap;align-items:center;column-gap:6px;row-gap:2px;padding:7px 12px;border-bottom:1px solid #eef1f5}
  #bang-viec tbody tr::after{content:"";order:10;flex-basis:100%;height:0}
  #bang-viec tbody tr td{display:block;padding:0;border:0;min-width:0}
  #bang-viec tbody tr td,#bang-viec tbody tr:nth-child(even) td,#bang-viec tbody tr:hover td,#bang-viec tbody tr.dchon td{background:transparent;box-shadow:none}
  #bang-viec tbody tr td.o-td{display:contents}
  .pn-dau{flex-wrap:wrap} .pn-dau .ma{margin-right:auto} .pn-dau .pn-td{order:9;flex-basis:100%;font-size:15px}
  #bang-viec tbody tr:nth-child(even){background:#f5f7fb} #bang-viec tbody tr.dchon{background:#d6e4ff;box-shadow:inset 3px 0 0 var(--chinh)}
  #bang-viec td.stt{order:1;color:var(--mo);font-size:12px;min-width:16px;text-align:right}
  #bang-viec td.ma-o{order:2} #bang-viec td.ma-o a{font-weight:700;font-size:13px}
  #bang-viec .nhan.nb{order:3;margin:0;font-size:11px;padding:1px 6px}
  /* huy hiệu: ô chọn của máy, vẽ thành viên thuốc cùng màu nhãn trạng thái (data-mau); viền TRONG SUỐT 6 px + lề âm ⇒ chỗ chạm 36 px mà hàng vẫn chỉ cao 24 */
  /* ô trạng thái = PHẦN CÒN LẠI của hàng ① (cơ sở 0 ⇒ không bao giờ đẩy hàng xuống dòng), huy hiệu căn phải, hẹp thì «…». Xem trước 16:4x: cơ sở «auto» = bề ngang
     tuỳ chọn DÀI NHẤT của ô chọn (không phải chữ đang chọn) ⇒ ở 360 «Xong ▾» vẫn rơi xuống dòng riêng, thẻ 137 px (ảnh d14-goi-360-1-dau.png).
     Bề ngang huy hiệu cũng vậy ⇒ width:var(--w) = chữ ĐANG CHỌN do app.js datRongTT đo (TC-CT-45, ido 04/11) */
  #bang-viec td.o-tt{order:4;flex:1 1 0;min-width:64px;display:flex;justify-content:flex-end}
  #bang-viec select.o-tt{-webkit-appearance:none;appearance:none;box-sizing:border-box;height:36px;min-height:0;margin:-6px -6px -6px 0;padding:0 20px 0 9px;width:var(--w,auto);max-width:calc(100% + 6px);
    border:6px solid transparent;border-radius:18px;background:#eef1f6 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%235c667a' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 7px center/9px 6px;
    background-clip:padding-box;color:#3d4a66;font-size:12px;font-weight:600;cursor:pointer;text-overflow:ellipsis}
  #bang-viec select.o-tt[data-mau=c]{background-color:var(--chinh-nhat);color:#174ea6} #bang-viec select.o-tt[data-mau=v]{background-color:var(--vang-nhat);color:var(--vang)}
  #bang-viec select.o-tt[data-mau=x]{background-color:var(--xanh-nhat);color:var(--xanh)} #bang-viec select.o-tt[data-mau=d]{background-color:var(--do-nhat);color:var(--do)}
  #bang-viec td.o-tt .nhan{font-size:12px}
  /* B2: thanh tiến độ gọn ĐỨNG TRƯỚC huy hiệu, cùng hàng ① (không thêm hàng — thẻ vẫn ≤ 120 px, TC-CT-45); co được, huy hiệu không bị đẩy */
  #bang-viec td.o-tt{align-items:center;gap:6px} #bang-viec td.o-tt .thanh-td.gon{order:-1;margin:0;flex:0 1 auto;min-width:0;overflow:hidden}
  #bang-viec td.o-tt .thanh-td.gon .td-ray{width:36px}
  #bang-viec .dau-xl{display:none} #bang-viec tr.can-xl .td-tieu-de::before{content:"● ";color:var(--do);font-size:11px}
  #bang-viec .td-tieu-de{order:5;flex:0 0 100%;font-size:14px;line-height:18px;max-height:36px;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;overflow-wrap:anywhere}
  #bang-viec td.o-nguoi{order:6;flex:1 1 0;font-size:13px;line-height:17px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  #bang-viec td.o-nguoi::before{content:"👤 ";font-size:11px} #bang-viec td.o-nguoi .nho{display:inline;margin-left:4px}
  #bang-viec td.o-han{order:7;flex:0 0 auto;font-size:13px;line-height:17px;white-space:nowrap} #bang-viec td.o-han::before{content:"Hạn ";color:var(--mo);font-weight:400}
  #bang-viec td.o-han.trong{display:none}
  #bang-viec .khoa-chan{order:8;flex:0 1 auto;min-width:0;max-width:55%;font-size:12.5px;line-height:17px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--vang)}
  #bang-viec .khoa-chan .chan-ma{display:inline}
  #bang-viec td.o-td>.nho{order:11;flex:1 1 0;min-width:0;font-size:11.5px;line-height:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  #bang-viec td.o-cn{order:12;flex:0 0 auto;font-size:11.5px;line-height:15px;color:var(--mo);white-space:nowrap} #bang-viec td.o-cn::before{content:"· "}
  #bang-viec td.o-cn .cn-day{display:none} #bang-viec td.o-cn .cn-gon{display:inline} #bang-viec td.o-cn .nho{display:inline;margin-left:4px;font-size:11.5px}
  /* D22-E (05/11): ô trả lời KHÔNG còn position:fixed + chừa 170 px — khung xem mục là ba tầng không cuộn, ô gửi nằm đáy cột chat (khối D22 cuối tệp) */
}
/* hộp sửa (mọi khổ): hàng nút đáy XUỐNG DÒNG được — khung.css để flex dồn phải không xuống dòng ⇒ nút «Xoá (đang dùng ở N mục)» tràn ra MÉP TRÁI hộp,
   bị cắt (đo 04/11 kế nhiệm 9: #dm-xoa -68…124 trong hộp 14…346 ở 360 px). Hộp rộng cuộn trong mình ⇒ đầu + hàng nút GHIM (Lưu / Thôi luôn trong màn). */
.hop .chan{flex-wrap:wrap}
.hop.rong-hop>.dau{position:sticky;top:0;z-index:2;background:#fff}
.hop.rong-hop>.chan{position:sticky;bottom:0;z-index:2;background:#fff}
/* điện thoại: trang «Giai đoạn» + bảng «Cấu hình» thành THẺ (cùng cách bảng việc bước 4) — đo 04/11 kế nhiệm 9 (.tmp/v2/qa-k9): 360 px chỉ thấy
   STT · tên · thời gian của Giai đoạn (6 cột số ngoài khung 276/735) · Cấu hình che 3–9 cột kể cả «Sửa», cột «Quyền» bị che vẫn kéo dòng cao 539 px. */
@media (max-width:680px){
  #bang-giai-doan thead,#bang-danh-muc thead{display:none}
  #bang-giai-doan,#bang-giai-doan tbody,#bang-danh-muc,#bang-danh-muc tbody{display:block;width:100%}
  #bang-giai-doan tbody tr td,#bang-danh-muc tbody tr td{display:block;padding:0;border:0;min-width:0;text-align:left}
  #bang-giai-doan tbody tr td,#bang-giai-doan tbody tr:nth-child(even) td,#bang-giai-doan tbody tr:hover td,
  #bang-danh-muc tbody tr td,#bang-danh-muc tbody tr:nth-child(even) td,#bang-danh-muc tbody tr:hover td{background:transparent;box-shadow:none}
  #bang-giai-doan tbody tr:nth-child(even),#bang-danh-muc tbody tr:nth-child(even){background:#f5f7fb}
  #bang-giai-doan td[data-nhan]::before,#bang-danh-muc td[data-nhan]::before{content:attr(data-nhan);color:var(--mo);font-weight:400}
  /* Giai đoạn: hàng 1 STT + tên · hàng 2 «Thời gian: …» · ba hàng 2 ô số (nhãn một dòng trên, số dưới). Soát ảnh bản xem trước: 3 ô / hàng ⇒ «Đang bị chặn»,
     «Cần tôi xử lý» xuống 2 dòng ⇒ số lệch hàng nhau; 2 ô / hàng ⇒ nhãn dài nhất vẫn một dòng ở 360 px */
  #bang-giai-doan tbody tr{display:grid;grid-template-columns:28px repeat(2,minmax(0,1fr));grid-template-areas:"stt ten ten" ". tg tg" ". a b" ". c d" ". e f";
    gap:4px 10px;padding:10px 12px;border-bottom:1px solid #eef1f5}
  #bang-giai-doan td.stt{grid-area:stt;color:var(--mo);font-size:12px;align-self:center} #bang-giai-doan td.o-ten{grid-area:ten}
  #bang-giai-doan td.o-tg{grid-area:tg;font-size:12.5px;color:var(--mo)}
  #bang-giai-doan td.o-tong{grid-area:a} #bang-giai-doan td.o-mo{grid-area:b} #bang-giai-doan td.o-xong{grid-area:c}
  #bang-giai-doan td.o-qh{grid-area:d} #bang-giai-doan td.o-chan{grid-area:e} #bang-giai-doan td.o-xl{grid-area:f}
  #bang-giai-doan td[data-nhan]{font-size:14px;white-space:normal} #bang-giai-doan td[data-nhan]::before{display:block;font-size:11.5px;white-space:nowrap}
  #bang-giai-doan td.o-tg[data-nhan]::before{display:inline;content:attr(data-nhan) ": ";font-size:12.5px}
  #bang-giai-doan td.o-xong .nho{display:inline;margin-left:4px}
  /* Cấu hình: hàng 1 STT · tên · «Sửa» (ngắt hàng bằng ::before của dòng — phần tử flex độ rộng 100 %, cao 0), sau đó các cặp «nhãn: giá trị» xếp tự nhiên;
     cột chữ dài trọn hàng. Soát ảnh bản xem trước: không ngắt ⇒ «Mã: …» chen lên hàng 1, ô tên co về 0 và nút «Sửa» ĐÈ lên tên vai */
  #bang-danh-muc tbody tr{display:flex;flex-wrap:wrap;align-items:center;gap:4px 14px;padding:10px 12px;border-bottom:1px solid #eef1f5}
  #bang-danh-muc tbody tr::before{content:"";order:3;flex-basis:100%;height:0}
  #bang-danh-muc td.stt{order:0;color:var(--mo);font-size:12px} #bang-danh-muc td.o-ten{order:1;flex:1 1 0} #bang-danh-muc td.o-sua{order:2}
  #bang-danh-muc td[data-nhan]{order:4;font-size:12.5px} #bang-danh-muc td[data-nhan]::before{content:attr(data-nhan) ": "}
  #bang-danh-muc td.o-rong{flex-basis:100%}
  #bang-danh-muc td.o-ten .nho,#bang-danh-muc td.o-ten .loi-tep{display:block}
  /* tên là DỮ LIỆU (Lead đặt, dài ngắn tuỳ ý) ⇒ chip tên xuống dòng trong ô thay vì tràn dưới nút «Sửa» (đo bản xem trước lượt 2: chip 126 px trong ô 110) */
  #bang-danh-muc td.o-ten>.nhan{white-space:normal;overflow-wrap:anywhere;max-width:100%}
  /* vùng bấm ≥ 32 px (đo: «Sửa» 26 · chip kiểu 31 · nhãn ô chọn trong hộp 21) */
  #bang-danh-muc .nut.n{min-height:34px;padding:4px 14px} #dm-kieu .chip{min-height:34px}
  .hop .ds-chon label{min-height:32px;display:inline-flex;align-items:center;gap:4px}
}
/* B1 BA v3 (04/11): loại ghi chú — ô chọn cạnh «Gửi» (form bình luận + sửa bình luận), chip lọc luồng, nhãn trên bình luận */
.o-loai-bl{width:auto;min-width:112px;max-width:180px;flex:0 1 auto} .loc-bl{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 8px}
.loc-bl .chip{padding:3px 10px;font-size:12px} .bl-dau .nhan{flex:0 0 auto}
/* ô chọn lọc chỉ hiện ở khung hẹp (@container ≤ 699px bên dưới); khung rộng dùng chip. Bộ chọn phải thắng select.o{display:inline-block} (:38) —
   bản đầu `.loc-bl-chon` (0,1,0) thua (0,1,1) ⇒ 1440 hiện CẢ chip LẪN ô chọn (soát ảnh xem trước 05/11 23:1x, gói d22c-cay-230043) */
.pn-chat select.loc-bl-chon{display:none}
@media (max-width:600px){ .soan .hang{flex-wrap:wrap} .o-loai-bl{min-height:36px} .loc-bl .chip{min-height:32px} }
/* D13 (04/11, Quang «hiện tên ra … bấm được để xem»): khu tài khoản = NÚT (ảnh chữ tắt + tên + vai) mở menu; tên LUÔN hiện, kể cả điện thoại (rút gọn …).
   Kiểu gốc .tk .nguoi (flex · gap · cỡ chữ) ở khung.py — ở đây chỉ bỏ nền / viền của nút + menu thả xuống. */
.tk .tk-toi{position:relative;display:inline-flex}
.tk button.nguoi{border:0;background:none;font-family:inherit;color:inherit;cursor:pointer;text-align:left}
.tk button.nguoi:hover,.tk button.nguoi[aria-expanded=true]{background:#eef1f6}
.tk .ten-tk{display:flex;flex-direction:column;max-width:170px;overflow:hidden;text-overflow:ellipsis}
.menu-tk{position:absolute;right:0;top:calc(100% + 6px);min-width:230px;max-width:min(300px,calc(100vw - 16px));background:#fff;border:1px solid var(--vien);border-radius:10px;
  box-shadow:0 8px 24px rgba(20,30,60,.14);padding:6px;z-index:60;display:flex;flex-direction:column}
.menu-tk[hidden]{display:none}
.menu-tk .mtk-dau{display:flex;flex-direction:column;gap:2px;padding:8px 10px 10px;border-bottom:1px solid var(--vien);margin-bottom:4px;overflow-wrap:anywhere;white-space:normal}
.menu-tk a,.menu-tk button{display:flex;align-items:center;gap:8px;min-height:38px;padding:6px 10px;border:0;background:none;font:inherit;font-size:14px;color:inherit;text-decoration:none;border-radius:6px;cursor:pointer;text-align:left}
.menu-tk a:hover,.menu-tk button:hover{background:#eef1f6}
#man-cho-them{display:flex;justify-content:center;gap:8px;margin-top:10px} #chua-moi .kv{margin:12px auto;text-align:left;max-width:520px}
/* email / mã tài khoản dài phải XUỐNG DÒNG trong thẻ (phiên chính soát ảnh xem trước 17:1x: ở 360 email tài khoản thử «…-thu-co-ten@example.com» tràn viền phải, mép màn cắt) */
#chua-moi .kv>*{min-width:0;overflow-wrap:anywhere}
#chua-moi .hang{gap:8px;justify-content:center;flex-wrap:wrap;margin-top:6px}
@media (max-width:680px){
  .tk .nguoi>span.ten-tk{display:block;max-width:64px;white-space:nowrap} .tk .ten-tk small{display:none}
  .tk #nut-cai-dat{display:none}   /* «Cài đặt» nằm trong menu tài khoản — nhường chỗ cho tên */
}
/* NB-007 (ido 04/11) ĐIỆN THOẠI: Thành viên + Hoạt động thành THẺ (như Giai đoạn / Cấu hình TC-42) — đo trước ở 360: bảng 7 cột ra ngoài màn 42/56 ô,
   Hoạt động 63/153 ô; khung chi tiết: lưới .kv 150px + 1fr (khung.css) ép ô chọn trạng thái 241…366 ra ngoài khung 300 px ⇒ cột nhãn hẹp + cột giá trị co được */
@media (max-width:680px){
  #khung-phai .kv{grid-template-columns:minmax(0,96px) minmax(0,1fr)} #khung-phai .kv>*{min-width:0;overflow-wrap:anywhere}
  /* ô chọn trạng thái #pn-tt: select.o{width:100%} KHÔNG áp ở đây (đo 05/11 trên 231623: width tính = 125 px, cấy lựa chọn dài ⇒ 337 px vượt ô lưới 155 px)
     ⇒ ép theo ô lưới; tên dài bị cắt trong ô chọn (hộp chọn của máy vẫn hiện đủ) */
  #khung-phai .kv select{width:100%!important;max-width:100%;min-width:0}
  #khung-phai .bl-dau{flex-wrap:wrap;row-gap:2px}   /* «Sửa» / «Xoá» bình luận từng ra mép phải 338…362 trong khung 300 px */
  #bang-thanh-vien thead,#bang-hoat-dong thead{display:none}
  #bang-thanh-vien,#bang-thanh-vien tbody,#bang-hoat-dong,#bang-hoat-dong tbody{display:block;width:100%}
  #bang-thanh-vien tbody tr,#bang-hoat-dong tbody tr{display:grid;grid-template-columns:24px minmax(0,1fr) auto;column-gap:8px;row-gap:3px;padding:10px 8px;
    border-bottom:1px solid var(--vien)}
  #bang-thanh-vien tbody tr:nth-child(even),#bang-hoat-dong tbody tr:nth-child(even){background:#f5f7fb}
  #bang-thanh-vien tbody tr td,#bang-thanh-vien tbody tr:nth-child(even) td,#bang-thanh-vien tbody tr:hover td,
  #bang-hoat-dong tbody tr td,#bang-hoat-dong tbody tr:nth-child(even) td,#bang-hoat-dong tbody tr:hover td{display:block;padding:0;border:0;min-width:0;
    text-align:left;white-space:normal;overflow-wrap:anywhere;background:transparent}
  #bang-thanh-vien td[data-nhan]::before{content:attr(data-nhan) ": ";color:var(--mo)}
  #bang-thanh-vien td.stt,#bang-hoat-dong td.stt{grid-area:stt;color:var(--mo);font-size:12px}
  #bang-thanh-vien tbody tr{grid-template-areas:"stt ten sua" ". vai vai" ". tt tt" ". tg tg" ". gc gc"}
  #bang-thanh-vien td.tv-ten{grid-area:ten} #bang-thanh-vien td.tv-sua{grid-area:sua;align-self:start} #bang-thanh-vien td.tv-vai{grid-area:vai}
  #bang-thanh-vien td.tv-tt{grid-area:tt} #bang-thanh-vien td.tv-tg{grid-area:tg;font-size:12.5px} #bang-thanh-vien td.tv-gc{grid-area:gc;font-size:12.5px}
  #bang-hoat-dong tbody tr{grid-template-areas:"stt muc luc" ". nguoi nguoi" ". viec viec" ". ct ct"}
  #bang-hoat-dong td.hd-muc{grid-area:muc} #bang-hoat-dong td.hd-luc{grid-area:luc;font-size:12px;color:var(--mo);white-space:nowrap}
  #bang-hoat-dong td.hd-nguoi{grid-area:nguoi;font-size:12.5px} #bang-hoat-dong td.hd-viec{grid-area:viec;font-weight:600;font-size:12.5px}
  #bang-hoat-dong td.hd-ct{grid-area:ct}
}
/* B3 (BA v3 §1.4, ido 05/11): màn «Đội phát triển» — ô số là NÚT (mở Bảng việc lọc sẵn), mã mục là liên kết; thẻ ngưỡng ở «Cấu hình».
   Biểu tượng menu «hai người» (bộ .ic-* của khung.css không có hình «đội»; cong-trinh = ngôi nhà, đọc nhầm thành «Trang chủ») — cùng khuôn: khung 24, nét 1,8, đầu tròn */
.ic-doi{--ic:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%229%22%20cy%3D%228%22%20r%3D%223.5%22%2F%3E%3Cpath%20d%3D%22M2.5%2020c0-3.6%202.9-6%206.5-6s6.5%202.4%206.5%206%22%2F%3E%3Ccircle%20cx%3D%2217%22%20cy%3D%228.5%22%20r%3D%222.7%22%2F%3E%3Cpath%20d%3D%22M16.4%2014.1c2.9-.3%205.1%202%205.1%205.4%22%2F%3E%3C%2Fsvg%3E")}
.lk-nut{border:0;background:none;padding:0;font:inherit;color:var(--chinh);cursor:pointer;text-align:left} .lk-nut:hover{text-decoration:underline}
.so-doi{min-width:30px;min-height:26px;padding:1px 8px;border:1px solid var(--vien);border-radius:6px;background:#fff;font:inherit;font-weight:650;cursor:pointer}
.so-doi:hover{border-color:var(--chinh);color:var(--chinh)}
#bang-doi .doi-ds{list-style:none;margin:4px 0 0;padding:0;font-size:12.5px;line-height:1.45} #bang-doi .doi-ds li{margin:1px 0}
#bang-doi .doi-td .nho,#bang-doi .doi-ten .nho{display:block} #bang-doi .doi-lau{display:inline-block;margin-left:6px}
#bang-doi .doi-gc{display:block;max-width:300px;margin-top:3px;white-space:normal;overflow-wrap:anywhere}
#doi-nguong{margin-left:4px}
#the-nguong-doi{margin:0 0 14px} #the-nguong-doi .hang{display:flex;flex-wrap:wrap;align-items:center;gap:8px} #nguong-doi{width:110px}
/* §7.3 thẻ «Tên dự án»: hai ô co giãn (soát ảnh xem trước 06/11: ô dòng phụ bề ngang mặc định cắt «… · Cổng trao đ» ở 1440 lẫn 360) — hẹp thì mỗi ô một hàng */
#the-du-an{margin:0 0 14px} #the-du-an .hang{display:flex;flex-wrap:wrap;align-items:center;gap:8px} #du-an-ten{flex:1 1 200px;min-width:0;max-width:320px}
#du-an-mo-ta{flex:2 1 260px;min-width:0}
/* điện thoại: THẺ / người (BA §1.4 «Đang làm · Chờ · Chặn · Cập nhật cuối»), cùng cách Thành viên / Hoạt động (NB-007) */
@media (max-width:680px){
  #bang-doi thead{display:none}
  #bang-doi,#bang-doi tbody{display:block;width:100%}
  #bang-doi tbody tr{display:grid;grid-template-columns:24px minmax(0,1fr) minmax(0,1fr);column-gap:8px;row-gap:6px;padding:10px 8px;border-bottom:1px solid var(--vien);
    grid-template-areas:"stt ten ten" ". lam lam" ". cho cho" ". chan chan" ". td cbd" ". cn cn"}
  #bang-doi tbody tr:nth-child(even){background:#f5f7fb}
  #bang-doi tbody tr td,#bang-doi tbody tr:nth-child(even) td,#bang-doi tbody tr:hover td{display:block;padding:0;border:0;min-width:0;text-align:left;
    white-space:normal;overflow-wrap:anywhere;background:transparent}
  #bang-doi td[data-nhan]::before{content:attr(data-nhan) ": ";color:var(--mo);font-size:12.5px}
  #bang-doi td.stt{grid-area:stt;color:var(--mo);font-size:12px} #bang-doi td.doi-ten{grid-area:ten}
  #bang-doi td.doi-lam{grid-area:lam} #bang-doi td.doi-cho{grid-area:cho} #bang-doi td.doi-chan{grid-area:chan}
  #bang-doi td.doi-td{grid-area:td} #bang-doi td.doi-cbd{grid-area:cbd} #bang-doi td.doi-cn{grid-area:cn}
  #bang-doi .so-doi{min-height:32px;min-width:36px} #bang-doi .doi-gc{max-width:none}
  /* Tiến độ + Chưa bắt đầu cùng hàng: nhãn MỘT dòng trên, số dưới (như ô số thẻ Giai đoạn) — soát ảnh xem trước 05/11: nhãn «Chưa bắt đầu:» chiếm hết nửa hàng,
     nút số rơi xuống dòng dưới, lệch hàng với «Tiến độ: 2 / 4» */
  #bang-doi td.doi-td::before,#bang-doi td.doi-cbd::before{display:block;content:attr(data-nhan);white-space:nowrap}
}
/* D22 (Quang 05/11 17:3x–17:4x, đặc tả phiên chính thiet-ke-chi-tiet-gon.md): khung XEM mục = BA TẦNG, cả khung KHÔNG cuộn — đầu khung + dải trạng thái đứng yên ·
   thân (cột chi tiết cuộn riêng + cột TRAO ĐỔI dạng chat, danh sách cuộn riêng) · ô gửi dính đáy cột chat. Rộng / hẹp theo BỀ NGANG KHUNG (container query, ngưỡng
   700 px: 1440 ⇒ khung 754 = hai cột; ≤ 1180 ⇒ khung 560 · điện thoại ⇒ một cột), không theo bề ngang màn. Form thêm / sửa mục (không .pn-xem) giữ khung cuộn cũ. */
#khung-phai.pn-xem:not([hidden]){display:flex;flex-direction:column;overflow:hidden;padding:0;container-type:inline-size}
#khung-phai.pn-xem .pn-dau{position:static;flex:none}
#khung-phai.pn-xem .pn-dai{flex:none;padding:8px 18px;border-bottom:1px solid var(--vien);background:#fff}
#khung-phai.pn-xem .pn-dai .kv{margin:0} #khung-phai.pn-xem .pn-dai .bao{margin:6px 0 0;padding:5px 10px}
.bao.mot-dong{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#khung-phai.pn-xem .pn-than{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) 340px;grid-template-rows:minmax(0,1fr)}
#khung-phai.pn-xem .pn-trai{overflow:auto;min-height:0;padding:0 18px 16px}
/* vùng cuộn = KHỐI CHỨA (position:relative): ô chọn tệp ẩn (.an / .an-tep, position:absolute) bên trong mà khối chứa là #khung-phai thì thoát khỏi vùng cuộn, đẩy
   phần tràn của CẢ KHUNG ⇒ khung «cuộn được» (đo 05/11 18:5x xem trước 390: dải + thân = 790 = khung, mà scrollHeight > clientHeight) — bấm «Đính kèm tệp» (nhãn for=)
   sẽ cuộn cả khung tới ô ẩn, đẩy đầu khung + dải trạng thái ra ngoài màn */
#khung-phai.pn-xem .pn-trai,#khung-phai.pn-xem .pn-chat,#khung-phai.pn-xem .luong-cuon{position:relative}
.pn-chat{display:flex;flex-direction:column;min-height:0;min-width:0;border-left:1px solid var(--vien);background:#fafbfd}
.pn-chat .chat-dau{flex:none;padding:10px 14px 2px} .pn-chat .chat-dau h4{margin:0 0 6px;font-size:13.5px;color:#33405c}
.pn-chat .luong-cuon{flex:1 1 0;min-height:0;overflow:auto;padding:0 14px 8px}
.pn-chat #form-binh-luan{flex:none;margin:0;padding:8px 12px;border-top:1px solid var(--vien);background:#fff}
.pn-chat #form-binh-luan textarea.o{min-height:44px;max-height:28vh}
/* cột chat 340 px: dòng đầu bình luận = ảnh chữ tắt · tên · nhãn loại · Sửa / Xoá; «bên · lúc» xuống dòng 2 thẳng hàng tên (soát ảnh xem trước 05/11 19:1x: tên
   «Điều phối (Claude)» bị bóp xuống 3 dòng khi chung hàng với nhãn «Yêu cầu» + giờ + «Xoá») */
.pn-chat .bl-dau{flex-wrap:wrap;row-gap:0} .pn-chat .bl-dau .nho{order:9;flex-basis:100%;padding-left:32px}
.nut-bl-moi{position:sticky;bottom:6px;display:block;margin:6px auto 0;box-shadow:0 4px 14px rgba(20,30,50,.18);background:#fff} .nut-bl-moi[hidden]{display:none}
/* «Thêm thông tin ▸» · «Lịch sử (N) ▸» = details/summary đóng mặc định; Nội dung quá 6 dòng cắt + «Xem đủ» */
.pn-mo>summary{cursor:pointer;list-style:none;font-weight:600;font-size:13.5px;color:#33405c;padding:8px 0;user-select:none}
.pn-mo>summary::-webkit-details-marker{display:none} .pn-mo>summary::after{content:" ▸";color:var(--mo)} .pn-mo[open]>summary::after{content:" ▾"}
#pn-them{margin-top:8px} #pn-them>.kv{margin:4px 0 8px}
.pn-nd.gon{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:6;overflow:hidden} #nut-xem-du{margin-top:4px}
@container (min-width:700px){
  #khung-phai.pn-xem .pn-dai .kv{grid-template-columns:max-content minmax(0,1fr) max-content minmax(0,1fr);column-gap:12px}
}
@container (max-width:699px){
  #khung-phai.pn-xem .pn-than{display:flex;flex-direction:column}
  #khung-phai.pn-xem .pn-trai{flex:0 1 auto;max-height:28%;border-bottom:1px solid var(--vien)}
  #khung-phai.pn-xem .pn-chat{flex:1 1 0;border-left:0}
  #khung-phai.pn-xem .pn-dau{padding:8px 12px} #khung-phai.pn-xem .pn-dai{padding:6px 12px} #khung-phai.pn-xem .pn-trai{padding:0 12px 10px}
  /* tự soát ảnh 05/11 19:4x (360 · NB-006): luồng trao đổi chỉ còn ~24 px nhìn thấy — đầu khung (tiêu đề 4 dòng) + dải + vùng chi tiết 40 % + HAI hàng chip lọc + ô soạn
     3 dòng ăn hết. Gọn: vùng chi tiết ≤ 28 % (đặc tả: «tối đa 40 %») · chip lọc chung hàng với «Trao đổi (N)», cuộn ngang · ô soạn 2 dòng · tiêu đề ≤ 3 dòng (đủ chữ ở title) */
  #khung-phai.pn-xem .pn-dau .pn-td{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
  /* lọc Trao đổi ở khung hẹp = MỘT ô chọn cùng hàng «Trao đổi (N)», chip ẩn. Đo 05/11 (kiem-goi gói 214829 · xem trước gói d22b-cay-224250):
     chip MỘT hàng cuộn ngang ⇒ «Tiế…» cắt mép phải + 2 chip ngoài màn (NB-007 360: 3/32 ra ngoài @323…581); chip XUỐNG DÒNG ⇒ đầu cột chat 46 → 104 px,
     luồng nhìn thấy 360 NB-006 185 → 109 px (< 140 của TC-55). Số loại = dữ liệu Lead đặt ⇒ chỉ ô chọn giữ được cả hai. ô chọn rộng = phần còn lại của
     hàng (width:0 + flex 1), KHÔNG theo lựa chọn dài nhất (bài học #pn-tt 50b65fd) */
  .pn-chat .chat-dau{display:flex;align-items:center;gap:8px;padding:6px 12px 6px}
  .pn-chat .chat-dau h4{margin:0;flex:none}
  .pn-chat .chat-dau .loc-bl{display:none}
  .pn-chat .chat-dau .loc-bl-chon{display:block;flex:1 1 0;width:0;min-width:0;max-width:240px;margin-left:auto;min-height:32px;font-size:13px;padding:4px 8px}
  .pn-chat #form-binh-luan textarea.o{height:52px;min-height:40px}
}
/* D23 «Tổng quan» (thiet-ke-tong-quan.md của phiên điều phối (chỗ để: docs/khach-hang.md) §4): máy tính ≥ 1200 = bộ lọc · 8 thẻ một hàng · lưới hai cột [burn-up | giai đoạn] · [cảnh báo];
   điện thoại 360 / 390 = lọc gập «Lọc ▸» · thẻ 2 cột · biểu đồ một cột cao ≤ 260 px · không cuộn ngang. Biểu tượng menu «biểu đồ đường» cùng khuôn .ic-doi (khung 24, nét 1,8) */
.ic-bieu-do{--ic:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3.5%203.5v17h17%22%2F%3E%3Cpath%20d%3D%22M7%2015.5l3.8-4.6%203%202.8L20%206.5%22%2F%3E%3Ccircle%20cx%3D%2220%22%20cy%3D%226.5%22%20r%3D%221.2%22%2F%3E%3C%2Fsvg%3E")}
#tq-nut-loc{display:none} #tq-loc .loc-ct{display:contents} .tq-nb{display:inline-flex;align-items:center;gap:6px;font-size:13px;white-space:nowrap}
.tq-khoang{display:inline-flex;gap:4px} .tq-khoang .chip{padding:4px 10px}
.tq-the-hang{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:10px;margin:4px 0 14px}
button.tq-the{display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-width:0;text-align:left;font:inherit;cursor:pointer;color:var(--chu)}
button.tq-the:hover{border-color:#9fb3d9} button.tq-the:focus-visible{outline:2px solid #9ec0ff;outline-offset:1px}
.tq-ten{font-size:12.5px;color:var(--mo);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.tq-so{font-size:24px;line-height:1.15;font-weight:700} .tq-the.do .tq-so{color:var(--do)} .tq-the.vang .tq-so{color:var(--vang)}
.tq-the.xam{background:#f5f7fb} .tq-the.xam .tq-so{font-size:15px;font-weight:650;color:var(--nhat);padding:4px 0}
.tq-phu,.tq-chenh{font-size:11.5px;line-height:1.35} .tq-duong{display:block;width:100%;height:26px;margin-top:4px}
.tq-duong path{fill:none;stroke:var(--chinh);stroke-width:1.6;vector-effect:non-scaling-stroke} .tq-duong circle{fill:var(--chinh)}
.tq-the.do .tq-duong path{stroke:var(--do)} .tq-the.do .tq-duong circle{fill:var(--do)}
.tq-luoi{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;align-items:start} .tq-o{min-width:0;padding:14px 16px}
#tq-canh-bao{grid-column:1 / -1}
.tq-o-dau{display:flex;align-items:baseline;gap:10px} .tq-o-dau h3{margin:0;font-size:15px;flex:1} .tq-cach{margin:4px 0 10px}
.tq-dong{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:baseline;margin-bottom:6px} #tq-xong-trong{font-weight:650}
.tq-bd{width:100%;height:260px} .tq-bd-thap{height:200px} .tq-tg{display:grid;grid-template-columns:auto 1fr;gap:3px 10px;margin:8px 0 0;font-size:13px} .tq-tg dt{font-weight:600} .tq-tg dd{margin:0} #tq-khong-qua-lam{grid-column:1/-1} .tq-du-bao{margin:6px 0 0;font-size:13px} .tq-du-bao.chua_du,.tq-du-bao.dung{color:var(--vang)} .tq-du-bao.co{color:var(--xanh)}
.tq-gd-ds{list-style:none;margin:10px 0 0;padding:0} .tq-gd-ds li{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;padding:8px 0;border-top:1px solid var(--vien)}
.tq-gd-ten{flex:1 1 220px;min-width:0} .tq-gd-ten .nho{white-space:normal}
.tq-den{flex:none;width:14px;height:14px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(0,0,0,.12)} .tq-den.do{background:var(--do)} .tq-den.vang{background:#d4a72c}
.tq-den.xanh{background:var(--xanh)} .tq-den.xam{background:#b6bfcc}
.tq-khuc{display:flex;flex-wrap:wrap;gap:4px} .tq-khuc .so-doi{font-weight:500;font-size:12px} .tq-k-qua_han{color:var(--do)} .tq-k-xong{color:var(--xanh)}
.tq-cb{margin:0;padding:0 0 0 22px} .tq-cb li{padding:6px 0;border-top:1px solid var(--vien);display:flex;flex-wrap:wrap;gap:4px 8px;align-items:baseline}
.tq-cb li .lk-muc{font-family:ui-monospace,Menlo,monospace;font-size:12.5px} .tq-cb-td{flex:1 1 240px;min-width:0;overflow-wrap:anywhere;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden} /* bản vẽ cuối §8 ④: cắt bằng CSS, đủ chữ ở title */
.tq-ly{display:flex;flex-wrap:wrap;gap:4px} .tq-ly .nhan{font-size:11.5px} .tq-cb-chan{font-weight:600;color:var(--do)}
@media (max-width:1180px){ .tq-the-hang{grid-template-columns:repeat(4,minmax(0,1fr))} .tq-luoi{grid-template-columns:1fr} }
@media (max-width:680px){
  #tq-nut-loc{display:inline-flex} #tq-loc .loc-ct{display:none} #tq-loc .loc-ct.mo{display:grid;grid-template-columns:1fr 1fr;gap:8px;width:100%}
  #tq-loc .loc-ct .chon-o,#tq-loc .loc-ct .chon-o select{width:100%;min-width:0} #tq-loc .tq-nb{grid-column:1 / -1}
  .tq-the-hang{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px} .tq-so{font-size:20px} .tq-o{padding:12px}
  .tq-bd{height:240px} .tq-gd-ds li{align-items:flex-start}
}