/* ============================================================================
 *  toancanh.css — GIAO DIỆN 2 "TOÀN CẢNH DỌC TUYẾN" và công tắc chọn giao diện
 *  [2026-10-03, chủ trì chốt] Dùng chung bộ màu, cỡ chữ, bo góc của calcsheet.css (--accent, --card, --line,
 *  thẻ trắng bo 16 px, nút viên thuốc); không khai màu chủ đạo mới. Màu trạng thái lấy từ --ok/--warn/--no.
 * ========================================================================== */

/* ---------- công tắc ở đầu trang ---------- */
.gd-chon{display:inline-flex;align-items:center;gap:3px;padding:4px;border-radius:999px;background:rgba(120,120,128,.13);
  margin-left:auto;flex:none}
.gd-chon-nhan{font-size:12px;font-weight:600;color:var(--muted);padding:0 6px 0 9px}
.gd-chon button{border:0;background:none;border-radius:999px;padding:7px 14px;font-size:13px;font-weight:600;color:var(--muted);
  cursor:pointer;white-space:nowrap;transition:color .18s,background .18s,box-shadow .18s}
.gd-chon button:hover{color:var(--ink)}
.gd-chon button.on{background:#fff;color:var(--accent);box-shadow:0 1px 2px rgba(0,0,0,.08),0 4px 12px rgba(0,0,0,.10)}
.brand-header .gd-chon + .brand-standards{margin-left:18px}

/* ---------- bật giao diện 2: ẩn dải thẻ và năm thẻ ---------- */
body.gd2-bat .app-nav, body.gd2-bat .tabpane{display:none !important}
.gd2{max-width:1600px;margin:0 auto;padding:12px clamp(8px,3vw,32px) 32px;display:flex;flex-direction:column;gap:14px}
.gd2[hidden]{display:none}
.gd2 h2{margin:0;font-size:14.5px;font-weight:700;letter-spacing:-.01em}
.gd2 h3{margin:14px 0 6px;font-size:12.5px;font-weight:700;color:var(--ink)}
.gd2 .icard:hover{transform:none}
.tc-ic{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.tc-nho{padding:5px 8px}
.tc-nho-chu{padding:4px 12px;font-size:12.5px}
.tc-nho-cho{width:30px}

/* thanh dự án */
.tc-thanh{display:flex;align-items:center;gap:10px 16px;flex-wrap:wrap}
.tc-duan{display:flex;align-items:center;gap:8px 12px;flex-wrap:wrap;min-width:0}
.tc-duan-ten{font-size:15px;font-weight:800;color:var(--ink)}
.tc-chips{display:flex;gap:6px;flex-wrap:wrap}
.tc-chip{display:inline-flex;align-items:center;padding:3px 10px;border-radius:999px;background:var(--accent-bg);color:var(--accent);
  font-size:12px;font-weight:600;white-space:nowrap}
.tc-thanh-nut{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}

/* ô số tổng */
.tc-kpi{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}
.tc-kpi-o{display:flex;flex-direction:column;align-items:flex-start;gap:1px;text-align:left;padding:10px 14px;border-radius:14px;
  background:var(--card);border:.5px solid var(--line);box-shadow:var(--sh-1);font:inherit;color:var(--ink);cursor:pointer;min-width:0}
button.tc-kpi-o:hover{border-color:var(--accent)}
.tc-kpi-o.on{border:1.5px solid var(--accent);background:var(--accent-bg)}
.tc-kpi-tinh{cursor:default}
.tc-kpi-nhan{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--muted)}
.tc-cham{width:9px;height:9px;border-radius:50%;flex:none}
.tc-kpi-so{font-size:24px;font-weight:800;letter-spacing:-.01em;font-variant-numeric:tabular-nums;white-space:nowrap}
.tc-kpi-phu{font-size:11.5px;color:var(--hint);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}

/* ---------- dọc tuyến ---------- */
.tc-tuyen{padding:14px 18px 12px}
.tc-tuyen-dau{display:flex;align-items:center;gap:10px 16px;flex-wrap:wrap;margin-bottom:10px}
.tc-chu-giai{display:flex;gap:14px;flex-wrap:wrap;font-size:12px;color:var(--muted)}
.tc-chu-giai span{display:inline-flex;align-items:center;gap:6px}
.tc-chu-giai i{width:12px;height:12px;border-radius:3px;display:inline-block}
.tc-chu-giai i.rong{border:1.5px dashed var(--line2);box-sizing:border-box}
.tc-tuyen-nut{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}
.tc-cuon{overflow-x:auto;-webkit-overflow-scrolling:touch}
.tc-luoi{min-width:calc(132px + var(--tc-n,1) * 72px);display:flex;flex-direction:column}
.tc-hang{display:flex;position:relative}
.tc-nhan{position:sticky;left:0;z-index:4;flex:0 0 132px;display:flex;flex-direction:column;justify-content:center;gap:3px;
  padding-right:10px;background:var(--card);font-size:12.5px;font-weight:700;color:var(--ink)}
.tc-nhan small{font-size:11px;font-weight:500;color:var(--muted);line-height:1.35}
.tc-o{flex:1 1 0;min-width:72px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  transition:opacity .15s,background .15s}
.tc-o.chon{background:var(--accent-bg)}
.tc-o.mo{opacity:.3}
.tc-mt{height:26px;font-size:11px;font-weight:600;color:var(--ink);border-right:1px solid rgba(255,255,255,.75);text-align:center;line-height:1.1;padding:0 3px}
.tc-hang:first-child .tc-o.chon{background:inherit;box-shadow:inset 0 -3px 0 var(--accent)}
.tc-vt{height:66px;gap:1px;border:0;background:transparent;font:inherit;color:var(--muted);cursor:pointer;padding:4px 2px;border-radius:10px 10px 0 0}
.tc-vt.chon{color:var(--accent)}
.tc-vt-ten{font-size:12.5px;font-weight:700;color:var(--ink);white-space:nowrap}
.tc-vt.chon .tc-vt-ten{color:var(--accent);font-weight:800}
.tc-vt-cot{font-size:10.5px;color:var(--hint);white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.tc-hang-r{height:188px;border-bottom:1px solid var(--grid-line)}
.tc-r{height:100%;justify-content:flex-end;gap:3px;border:0;padding:0;background:transparent;cursor:pointer;font:inherit}
.tc-r.chon{background:var(--accent-bg)}
.tc-r-nhan{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;background:#fff;padding:0 4px;border-radius:4px;line-height:1.2}
.tc-r-nhan b{font-size:12px;font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums}
.tc-r-nhan span{font-size:10.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.tc-r-nhan.khong b{color:var(--no)}
.tc-r-nhan.chua b{font-size:10.5px;font-weight:600;color:var(--hint)}
.tc-cot-r{display:block;width:44%;max-width:40px;border-radius:4px 4px 0 0}
.tc-cot-r.rong{border:1.5px dashed var(--line2);border-bottom:0;box-sizing:border-box;background:transparent}
.tc-nguong{position:absolute;left:132px;right:0;height:0;border-top:2px dashed var(--ink);z-index:1;pointer-events:none}
.tc-nguong-nhan{position:absolute;left:136px;z-index:3;font-size:11px;font-weight:700;background:#fff;padding:0 4px;border-radius:3px;pointer-events:none}
.tc-rho{height:46px}
.tc-dat{display:flex;width:44%;max-width:40px;height:12px;border-radius:2px;overflow:hidden;box-shadow:inset 0 0 0 .5px rgba(0,0,0,.3)}
.tc-dat span{flex:1}
.tc-rho-so{font-size:11px;color:var(--ink);white-space:nowrap;font-variant-numeric:tabular-nums}
.tc-rho-so.thieu{color:var(--warn);font-weight:600}
.tc-bo{height:40px;border-radius:0 0 10px 10px}
.tc-bo-the{font-size:10.5px;font-weight:700;padding:3px 6px;border-radius:6px;background:#eceef2;color:var(--ink);
  max-width:94%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tc-bo-the.chua{background:var(--warn-bg);color:var(--warn)}
.tc-trong{padding:28px 12px;text-align:center;color:var(--muted)}
.tc-trong-nut{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}

/* ---------- vị trí đang chọn + việc cần xử lý ---------- */
.tc-duoi{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:14px;align-items:start}
.tc-sua{padding:14px 18px 16px}
.tc-sua-dau{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:6px}
.tc-sua-dau h2{font-size:20px;font-weight:800}
.tc-sua-dich{margin-left:auto;display:flex;gap:6px}
.tc-sua-than{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px;align-items:start}
.tc-sua-luoi{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.tc-o-nhap{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--muted);min-width:0}
.tc-rong2{grid-column:1 / -1}
.tc-o-tich{grid-column:1 / -1;display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ink);cursor:pointer}
.tc-o-tich input{width:auto;margin:0}
.tc-lop{display:grid;grid-template-columns:48px minmax(0,1fr) minmax(0,1fr) 30px;gap:8px;align-items:end;margin-bottom:6px}
.tc-lop-so{font-size:12px;font-weight:700;color:var(--ink);padding-bottom:9px}
.tc-den-het{justify-content:flex-end;padding-bottom:9px;font-size:12px;color:var(--hint)}
.tc-bo-chon{display:flex;gap:8px;align-items:center}
.tc-bo-chon select{flex:1;min-width:0}
.tc-bo-hinh{display:flex;flex-direction:column;gap:8px;margin-top:10px}
.tc-hinh{width:100%;height:180px;background:#f4f5f8;border-radius:10px;overflow:hidden;display:flex;align-items:center;justify-content:center}
.tc-hinh svg{width:100%;height:100%}
.tc-bo-hinh p{margin:0;font-size:12px;line-height:1.5;color:var(--ink)}
.tc-so3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.tc-so3 span{display:flex;flex-direction:column;background:#f4f5f8;border-radius:10px;padding:8px 11px}
.tc-so3 small{font-size:11.5px;color:var(--muted)}
.tc-so3 b{font-size:18px;font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap}
.tc-so3 b.khong{color:var(--no)} .tc-so3 b.dat{color:var(--ok)}
.tc-ghi{font-size:12.5px;color:var(--muted);line-height:1.5;margin:10px 0}
.tc-ghi.canh{color:var(--warn);background:var(--warn-bg);padding:8px 11px;border-radius:10px}
.tc-goiy{display:grid;grid-template-columns:minmax(0,1fr) auto auto auto;gap:10px;align-items:center;padding:6px 8px 6px 11px;
  border:.5px solid var(--line);border-radius:10px;margin-bottom:6px;font-size:12.5px;font-variant-numeric:tabular-nums}
.tc-goiy.dang{background:var(--accent-bg)}
.tc-goiy-ten{font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tc-goiy .dat{color:var(--ok)}
.tc-goiy-dang{font-size:12px;font-weight:600;color:var(--accent);padding:0 6px}
.tc-sua-chan{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.tc-viec-the{padding:14px 18px 14px}
.tc-viec-dau{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.tc-viec-dau .btn{margin-left:auto}
.tc-dem{font-size:12.5px;color:var(--muted)}
.tc-viec-ds{display:flex;flex-direction:column;gap:6px;max-height:560px;overflow-y:auto}
.tc-viec{display:flex;align-items:center;gap:10px;padding:7px 8px 7px 12px;border-radius:10px;font-size:12.5px;line-height:1.45;
  background:#f4f5f8;color:var(--ink)}
.tc-viec.khong{background:var(--no-bg);color:var(--no)}
.tc-viec.rho,.tc-viec.day,.tc-viec.bo,.tc-viec.rht,.tc-viec.roi,.tc-viec.hinh{background:var(--warn-bg);color:var(--warn)}
.tc-viec.dk{background:var(--info-bg);color:var(--info)}
.tc-viec.chua{background:#eceef2;color:var(--ink)}
.tc-viec .btn{flex:none;margin-left:auto}
.tc-viec-ten{border:0;background:none;font:inherit;font-weight:800;color:inherit;text-decoration:underline;cursor:pointer;padding:0;white-space:nowrap}
.tc-viec-noi{flex:1;min-width:0}

/* chân: lưu, xuất */
.tc-chan{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end;padding:12px 16px;background:var(--card);
  border:.5px solid var(--line);border-radius:16px;box-shadow:var(--sh-1)}
.tc-chan-tt{margin-right:auto;font-size:12.5px;color:var(--muted)}
.tc-chan-tt.xong{color:var(--ok)}

/* ---------- màn hẹp ---------- */
@media (max-width:1180px){
  .tc-kpi{grid-template-columns:repeat(3,minmax(0,1fr))}
  .tc-duoi{grid-template-columns:1fr}
}
@media (max-width:760px){
  .tc-sua-than{grid-template-columns:1fr}
  .tc-tuyen-nut,.tc-thanh-nut{margin-left:0}
}
@media (max-width:560px){
  .brand-header{flex-wrap:wrap}
  .gd-chon{order:3;margin:0 auto}
  .gd-chon button{padding:9px 12px}
  .gd2{gap:10px;padding-top:8px}
  .tc-kpi{gap:8px}
  .tc-kpi-o{padding:8px 10px;border-radius:12px}
  .tc-kpi-so{font-size:18px}
  .tc-kpi-phu{display:none}
  .tc-tuyen,.tc-sua,.tc-viec-the{padding:12px}
  .tc-luoi{min-width:calc(92px + var(--tc-n,1) * 58px)}
  .tc-nhan{flex-basis:92px;font-size:11.5px}
  .tc-nhan small{display:none}
  .tc-nguong{left:92px} .tc-nguong-nhan{left:95px}
  .tc-o{min-width:58px}
  .tc-hang-r{height:168px}
  .tc-viec{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:start;column-gap:8px;row-gap:6px}
  .tc-viec .btn{grid-column:1 / -1;justify-self:start;margin-left:0;min-height:40px}
  .tc-bo-the{font-size:10px;padding:3px 4px}
  .tc-thanh-nut .btn{padding:6px 12px;font-size:12.5px}
  .tc-hinh{height:150px}
  .tc-goiy{grid-template-columns:minmax(0,1fr) auto;row-gap:2px}
  .tc-chan .btn,.tc-tuyen-nut .btn{min-height:40px}
}
@media (pointer:coarse){ .gd2 input,.gd2 select{font-size:16px} }
@media print{ .gd2,.gd-chon{display:none !important} }