/* ════════════════════════════════════════════════════════════════════════════════════════════
   cong-noi-bo/cnb-tc.css — «TỔ CHỨC & JD» (cnb-tc.js)                                              29/10/2026
   HỢP ĐỒNG: artifact «Sơ đồ tổ chức & vận hành NSCA» (claude.ai/artifact/8fQhMkBc83kBSnPPqi4swM, Alex duyệt 29/10).
   Số đo chép từ <style> của artifact. Chỉ đổi TÊN BIẾN sang bộ biến của cnb.css (mục 0b cho phép):
     --bg→--nen · --mat→--the · --xanh→--ok · --xanh-nhat→--ok-nen · --do→--chan · --do-nhat→--chan-nen · --f-tieu→--dau · --f-chu→--font ·
     chữ trắng trên nền than → --tren-chu / --tren-chu2 · chữ trên nền cam → --chu-tren-cam.
   Tên lớp trùng cnb.css đã đổi: .nhanh→.tc-nhanh · .nhan→.tcx-nhan · .cot (làn)→.lan-cot · .mg.phu→.mg-phu · .trong→.tc-trong · .chip→.tcx-chip.
   Mọi luật nằm dưới .tcx — không chạm màn khác. Không mã màu (chỉ var(--…) khai ở cnb.css).
   ════════════════════════════════════════════════════════════════════════════════════════════ */
.tcx-than{display:flex;flex-direction:column;gap:16px;margin-top:12px}
.tcx h4{margin:0;font-family:var(--dau);letter-spacing:.01em}
.tcx .ghi-nho{margin:0}
.tcx-nhan{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--chu3);margin-bottom:4px}

/* ① sơ đồ tổ chức */
.tcx-khung{overflow-x:auto;background:var(--the);border:1px solid var(--vien);border-radius:10px;padding:20px 16px 24px}
/* 31/10: .cuon = nội dung rộng nằm TRONG khung cuộn ngang riêng (như bảng, ĐT5 cho phép) — bộ soi điện thoại hiểu lớp này */
.tcx .tc.cuon{min-width:1250px;display:flex;flex-direction:column;align-items:center}
.tcx .tc-hang{display:flex;justify-content:center;gap:28px;position:relative}
.tcx .hai-cay{display:grid;grid-template-columns:6fr 1.2fr;gap:24px;width:100%;position:relative;padding-top:18px}
.tcx .cay{display:flex;flex-direction:column;align-items:center;position:relative;min-width:0}
.tcx .cay::before{content:"";position:absolute;top:-18px;left:50%;width:2px;height:18px;background:var(--chu3)}
.tcx .cay:first-child::after{content:"";position:absolute;top:-18px;left:50%;right:-12px;height:2px;background:var(--chu3)}
.tcx .cay:last-child::after{content:"";position:absolute;top:-18px;left:-12px;right:50%;height:2px;background:var(--chu3)}
.tcx .hai-cay>.cay:first-child{padding-top:18px}
.tcx .nut{background:var(--the);border:1px solid var(--vien);border-radius:8px;padding:8px 12px;text-align:center;min-width:170px}
.tcx .nut b{display:block;font-family:var(--dau);font-size:16px;line-height:1.15}
.tcx .nut span{font-size:12.5px;color:var(--chu2)}
.tcx .nut.toi{background:var(--than);border-color:var(--than);color:var(--tren-chu)}
.tcx .nut.toi span{color:var(--tren-chu2)}
.tcx .nut.quan-tri{background:var(--nen);border:2px solid var(--than);min-width:280px;max-width:640px}
.tcx .nut.quan-tri span{color:var(--chu3)}
.tcx .nut.gd3{background:var(--than2);border-color:var(--than2);color:var(--tren-chu)}
.tcx .nut.gd3 span{color:var(--tren-chu2)}
.tcx .doc{width:2px;height:18px;background:var(--chu3);margin:0 auto}
.tcx .tc-nhanh{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;width:100%;position:relative;padding-top:18px}
.tcx .tc-nhanh::before{content:"";position:absolute;top:0;left:calc(100% / 12);right:calc(100% / 12);height:2px;background:var(--chu3)}
.tcx .tc-nhanh.n6{grid-template-columns:repeat(6,1fr)}.tcx .tc-nhanh.n6::before{left:calc(100% / 12);right:calc(100% / 12)}
.tcx .tc-nhanh.n5{grid-template-columns:repeat(5,1fr)}.tcx .tc-nhanh.n5::before{left:10%;right:10%}
.tcx .tc-nhanh.n1{grid-template-columns:1fr}.tcx .tc-nhanh.n1::before{display:none}
.tcx .tc-nhanh.khong-dau{padding-top:0}.tcx .tc-nhanh.khong-dau .cot-tc::before{top:-18px}
/* 29/10 Alex «các nét nối bị mất»: hàng không đầu đặt nét ngang ở đỉnh nét đứng (-18px), không nằm dưới thẻ phòng */
.tcx .tc-nhanh.khong-dau::before{top:-18px}
.tcx .cot-tc{position:relative;display:flex;flex-direction:column;gap:8px;min-width:0}
.tcx .cot-tc::before{content:"";position:absolute;top:-18px;left:50%;width:2px;height:18px;background:var(--chu3)}
.tcx .dau-tc{background:var(--cam-nhat);border:1px solid var(--cam);border-radius:8px;padding:8px 10px;width:100%;cursor:pointer}
.tcx .dau-tc:hover{border-color:var(--cam-dam)}
.tcx .dau-tc b{display:block;font-family:var(--dau);font-size:15.5px;line-height:1.15}
.tcx .dau-tc span{font-size:12.5px;color:var(--chu2)}
.tcx .dau-tc i{display:block;font-style:normal;font-size:11px;font-weight:600;color:var(--cam-chu);text-transform:uppercase;letter-spacing:.05em;margin-bottom:2px}
.tcx .con{list-style:none;margin:0 0 0 10px;padding:0 0 0 12px;border-left:2px solid var(--vien);display:flex;flex-direction:column;gap:6px}
.tcx .con li{font-size:12.5px;line-height:1.35;position:relative;background:var(--nen);border-radius:6px;padding:5px 8px}
.tcx .con li::before{content:"";position:absolute;left:-14px;top:13px;width:12px;height:2px;background:var(--vien)}
.tcx .con li b{display:block;font-size:13px;color:var(--chu)}
.tcx .con li span{color:var(--chu2)}
.tcx .con li.tc-trong{background:transparent;border:1px dashed var(--vien);color:var(--chu3)}
.tcx .con li.tc-trong b{color:var(--chu3);font-weight:500}
.tcx .con li.khoi{background:var(--cam-nhat);border:1px solid var(--cam-vien);cursor:pointer}
.tcx .con .con{margin-top:6px}
.tcx .phu-tc{font-size:12px;color:var(--chu3);font-style:italic;margin:8px 0;text-align:center;max-width:260px}
.tcx .tc-chu{display:flex;flex-wrap:wrap;gap:8px 18px;font-size:12.5px;color:var(--chu2)}
.tcx .tc-chu span::before{content:"";display:inline-block;width:12px;height:12px;border-radius:3px;margin-right:6px;vertical-align:-1px;background:var(--c);border:1px solid var(--v,transparent)}

/* ② chức năng & kết quả */
.tcx .xs{background:var(--than);color:var(--tren-chu);border-radius:10px;padding:14px 18px;display:flex;flex-direction:column;gap:10px}
.tcx .xs h4{font-size:21px;font-weight:700;text-transform:uppercase;letter-spacing:.04em}
.tcx .xs-chuoi{display:flex;flex-wrap:wrap;align-items:stretch;gap:6px}
.tcx .xs-chuoi div{background:var(--than2);border-radius:6px;padding:7px 10px;font-size:13px;color:var(--tren-chu2);flex:1 1 140px;min-width:0}
.tcx .xs-chuoi div b{display:block;color:var(--tren-chu);font-family:var(--dau);font-size:15px}
.tcx .xs-chuoi div.cam{background:var(--cam);color:var(--chu-tren-cam2)}.tcx .xs-chuoi div.cam b{color:var(--chu-tren-cam)}
.tcx .xs-chuoi span{align-self:center;color:var(--cam);font-weight:700}
.tcx .xs p{margin:0;font-size:13.5px;color:var(--tren-chu2);max-width:110ch}
.tcx .loc{display:flex;flex-wrap:wrap;gap:6px}
.tcx .loc button{font:600 13px var(--font);border:1px solid var(--vien);background:var(--the);color:var(--chu2);border-radius:999px;padding:5px 12px;cursor:pointer;min-height:32px}
.tcx .loc button[aria-pressed="true"]{background:var(--than);color:var(--tren-chu);border-color:var(--than)}
.tcx-ds{display:flex;flex-direction:column;gap:14px}
.tcx .pb{background:var(--the);border:1px solid var(--vien);border-radius:10px;overflow:hidden;scroll-margin-top:12px}
.tcx .pb.thuoc{margin-left:24px;border-left:3px solid var(--cam-vien)}
.tcx .pb-dau{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1.4fr) minmax(0,1fr);border-bottom:1px solid var(--vien)}
.tcx .pb-dau>div{padding:12px 14px;min-width:0}
.tcx .pb-dau>div+div{border-left:1px solid var(--vien)}
.tcx .pb-ten b{display:block;font-family:var(--dau);font-size:20px;line-height:1.1}
.tcx .pb-ten span{font-size:12.5px;color:var(--chu2)}
.tcx .pb-ten p{margin:6px 0 0;font-size:13px;color:var(--chu2)}
.tcx .pb-thuoc{display:block;font-style:normal;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--cam-chu);margin-bottom:2px}
.tcx .kqcc{background:var(--cam-nhat)}
.tcx .kqcc .tcx-nhan{color:var(--cam-chu)}
.tcx .kqcc p{margin:0;font-size:15px;font-weight:600;line-height:1.35}
.tcx .dong{display:flex;flex-wrap:wrap;gap:4px 12px;margin-top:8px;font-size:12.5px;color:var(--chu2)}
.tcx .dong b{color:var(--chu)}
.tcx-chip{display:inline-block;font-size:12px;border-radius:999px;padding:2px 8px;margin:2px 4px 2px 0;border:1px solid var(--vien);color:var(--chu2);background:var(--nen)}
.tcx-chip.co{border-color:var(--ok);color:var(--ok);background:var(--ok-nen)}
.tcx .bang-wrap{overflow-x:auto}
.tcx table.ns{width:100%;border-collapse:collapse;font-size:13px;min-width:860px}
.tcx table.ns th{text-align:left;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--chu3);padding:8px 12px;background:var(--nen);border-bottom:1px solid var(--vien)}
.tcx table.ns td{padding:8px 12px;border-bottom:1px solid var(--vien);vertical-align:top;line-height:1.4}
.tcx table.ns tr:last-child td{border-bottom:0}
.tcx table.ns td:first-child{font-weight:600;width:19%}
.tcx table.ns td:nth-child(2){width:15%;color:var(--chu2)}
.tcx table.ns td:nth-child(4){font-weight:600;width:24%}
.tcx table.ns tr.tc-trong td{color:var(--chu3)}
.tcx .qh{padding:12px;border-bottom:1px solid var(--vien)}
.tcx .qh-tieu{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap;margin-bottom:10px}
.tcx .qh-tieu b{font-family:var(--dau);font-size:17px;text-transform:uppercase;letter-spacing:.03em}
.tcx .qh-tieu span{font-size:12.5px;color:var(--chu2)}
.tcx .qh-than{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.4fr);gap:14px;align-items:start}
.tcx .qh-cay ul{list-style:none;margin:0;padding:0}
.tcx .qh-cay ul ul{margin-left:14px;padding-left:14px;border-left:2px solid var(--chu3)}
.tcx .qh-cay li{position:relative;padding:4px 0}
.tcx .qh-cay ul ul>li::before{content:"";position:absolute;left:-14px;top:20px;width:12px;border-top:2px solid var(--chu3)}
.tcx .qh-cay ul ul>li:last-child::after{content:"";position:absolute;left:-16px;top:22px;bottom:0;border-left:2px solid var(--the)}
.tcx .qh-o{display:inline-flex;flex-direction:column;align-items:flex-start;text-align:left;background:var(--nen);border:1px solid var(--vien);border-radius:8px;padding:5px 10px;max-width:100%}
.tcx .qh-o.dau{background:var(--cam-nhat);border-color:var(--cam)}
.tcx .qh-o.tc-trong{border-style:dashed;background:transparent;color:var(--chu3)}
.tcx .qh-o b{font-size:13px;line-height:1.25}.tcx .qh-o i{font-style:normal;font-size:12px;color:var(--chu2)}
.tcx table.qh-b{width:100%;border-collapse:collapse;font-size:12.5px;min-width:560px}
.tcx table.qh-b th{text-align:left;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--chu3);padding:6px 8px;border-bottom:1px solid var(--vien)}
.tcx table.qh-b td{padding:6px 8px;border-bottom:1px solid var(--vien);vertical-align:top;line-height:1.35}
.tcx table.qh-b td:nth-child(1),.tcx table.qh-b td:nth-child(3){font-weight:600;width:22%}
.tcx table.qh-b td.mui{color:var(--chu3);width:14px;padding-inline:0}
.tcx .qh-l{font-size:11.5px;font-weight:600;padding:1px 7px;border-radius:9px;white-space:nowrap}
.tcx .qh-l.lam{background:var(--ok-nen);color:var(--ok)}.tcx .qh-l.cam{background:var(--cam-nhat);color:var(--chu)}
.tcx .qh-l.xanh{background:var(--nen);color:var(--chu);border:1px solid var(--chu3)}.tcx .qh-l.xam{background:var(--nen);color:var(--chu2);border:1px dashed var(--chu3)}
.tcx .mang{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:10px;padding:12px;border-bottom:1px solid var(--vien)}
.tcx .mg{border:1px solid var(--vien);border-top:3px solid var(--than);border-radius:8px;padding:10px 12px;display:flex;flex-direction:column;gap:6px;min-width:0}
.tcx .mg.mg-phu{border-top-color:var(--vien);border-style:dashed;color:var(--chu2)}
.tcx .mg h4{font-size:17px;text-transform:uppercase;letter-spacing:.03em}
.tcx .mg .ai{font-size:12.5px;color:var(--chu2);margin-top:-4px}
.tcx .mg ul{margin:0;padding-left:18px;font-size:13px;line-height:1.4;display:flex;flex-direction:column;gap:2px}
.tcx .mg .kq{background:var(--cam-nhat);border-radius:6px;padding:7px 9px;font-size:13.5px;font-weight:600;line-height:1.35}
.tcx .mg .kq .tcx-nhan{color:var(--cam-chu)}
.tcx .mg .tcx-nhan{margin:2px 0}
.tcx .nsd summary{cursor:pointer;padding:10px 14px;font-weight:600;font-size:13.5px;color:var(--chu2)}
.tcx .nsd[open] summary{border-bottom:1px solid var(--vien)}

/* ③ chuỗi đơn hàng */
.tcx .dh{background:var(--than);color:var(--tren-chu);border-radius:10px;padding:16px 18px;display:grid;grid-template-columns:220px 1fr;gap:14px 20px;align-items:start}
.tcx .dh .ten{font-family:var(--dau);font-size:20px;font-weight:700;text-transform:uppercase}
.tcx .dh .ten small{display:block;font-family:var(--font);font-size:13px;font-weight:400;text-transform:none;color:var(--tren-chu2)}
.tcx .dh ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));gap:8px}
.tcx .dh li{background:var(--than2);border-radius:6px;padding:8px 10px;font-size:13px;color:var(--tren-chu2)}
.tcx .dh li b{display:block;color:var(--tren-chu);font-size:14px}
.tcx .mui{text-align:center;color:var(--chu3);font-size:13px;margin:-10px 0;white-space:pre}
.tcx .khung{overflow-x:auto;background:var(--the);border:1px solid var(--vien);border-radius:10px;-webkit-overflow-scrolling:touch}
.tcx .lan.cuon{display:grid;grid-template-columns:176px repeat(var(--so-chang,9),minmax(118px,1fr));min-width:1240px}
.tcx .lan>div{border-bottom:1px solid var(--vien);border-right:1px solid var(--vien);padding:8px;min-height:64px}
.tcx .lan-cot{background:var(--nen);font-family:var(--dau);font-weight:600;font-size:14px;text-transform:uppercase;letter-spacing:.03em;position:relative;min-height:0!important;padding-right:18px!important}
.tcx .lan-cot i{display:block;font-style:normal;font-family:var(--font);font-size:11px;text-transform:none;letter-spacing:0;color:var(--cam-chu);font-weight:600}
.tcx .lan-cot:not(.goc)::after{content:"›";position:absolute;right:-6px;top:50%;transform:translateY(-50%);color:var(--cam);font-size:22px;font-family:var(--font);z-index:1;background:var(--nen);line-height:1}
.tcx .lan-cot:nth-child(10)::after{display:none}
.tcx .phong{position:sticky;left:0;background:var(--the);z-index:2;box-shadow:1px 0 0 var(--vien)}
.tcx .phong b{display:block;font-family:var(--dau);font-size:16px;line-height:1.15}
.tcx .phong span{font-size:12px;color:var(--chu3)}
.tcx .lan p{margin:0}
.tcx .lan .o{font-size:12.5px;line-height:1.35;background:var(--cam-nhat);border-radius:6px;padding:6px 7px}
.tcx .lan .o+.o{margin-top:6px}
.tcx .lan .o em{display:block;font-style:normal;font-size:11px;color:var(--cam-chu);font-weight:600;margin-top:3px}
.tcx .lan .ngoai{color:var(--chu2);font-size:12.5px;font-style:italic}
.tcx .lan .goi{font-size:12.5px;color:var(--chu2)}

@media (max-width:860px){
  .tcx .pb-dau{grid-template-columns:1fr}.tcx .pb-dau>div+div{border-left:0;border-top:1px solid var(--vien)}
  .tcx .qh-than{grid-template-columns:1fr}
  .tcx .dh{grid-template-columns:1fr}
}
@media (max-width:768px){
  .tcx .ky.ky-tc{display:flex;width:100%;overflow-x:auto}.tcx .ky.ky-tc button{white-space:nowrap;flex:none;height:44px;font-weight:600}   /* 31/10 ĐT4: vùng chạm 44 */
}
@media (max-width:760px){
  .tcx .tc.cuon{min-width:0}.tcx-khung{padding:16px 12px}
  .tcx .tc-nhanh,.tcx .tc-nhanh.n5,.tcx .tc-nhanh.n6{grid-template-columns:1fr;gap:14px;padding-top:0}.tcx .tc-nhanh::before,.tcx .cot-tc::before{display:none}
  .tcx .hai-cay{grid-template-columns:1fr;padding-top:0;gap:14px}.tcx .cay::before,.tcx .cay::after{display:none}.tcx .cay .nut,.tcx .nut.quan-tri{width:100%;min-width:0}
  .tcx .pb.thuoc{margin-left:0}
  .tcx .loc{flex-wrap:nowrap;overflow-x:auto}.tcx .loc button{min-height:44px;white-space:nowrap}
}