/* css/tongquan.css — gói tong-quan L2 (14/10/2026): trang "Tổng quan" (rTGQ, khoá tab hn) và thẻ "Theo trách nhiệm" (rTGQTrachNhiem, khoá trn).
   Nạp sau app.css. Mọi lớp mang tiền tố tgq- (đã grep css/ và js/). Màu lấy từ biến giao diện (--ink, --line, --primary...) nên ba
   giao diện máy tính (Xanh đậm, Đỏ rượu vang, Lục Bảo) đều là nền SÁNG; bộ biến --tgq-* đổi sang bảng TỐI khi khối nằm trong
   #mbApp ở giao diện Xanh đậm (điện thoại nền tối, L3 dùng chung lớp). Ngưỡng màu theo SPEC §6: tốt / cần chú ý / kém. */

.tgq {
  --tgq-nen: #fff; --tgq-nen2: var(--primary-soft, #eef3f8); --tgq-vien: var(--line, #dfe3e8);
  --tgq-chu: var(--ink, #17232f); --tgq-chu2: var(--ink-2, #3b4a58); --tgq-mo: var(--ink-3, #6b7a88);
  --tgq-lk: var(--link, #1F4E79);
  --tgq-tot: #1d7a43; --tgq-vua: #8a5a00; --tgq-kem: #b3261e;
  --tgq-tot-n: #e3f3e9; --tgq-vua-n: #fdf0d5; --tgq-kem-n: #fde4e2; --tgq-khong-n: #eef1f4;
  --tgq-tot-f: #2e9e5b; --tgq-vua-f: #e8a33d; --tgq-kem-f: #e5484d; --tgq-khong-f: #b8c2cc;
  --tgq-s-nt: #c62828; --tgq-s-qh: #ef8a3c; --tgq-s-cd: #7e6bc4;
  color: var(--tgq-chu);
}
html[data-theme="navy"] #mbApp .tgq {
  --tgq-nen: #1b2b3d; --tgq-nen2: #233750; --tgq-vien: #34506e;
  --tgq-chu: #e8eef5; --tgq-chu2: #c7d2e2; --tgq-mo: #a3b4c8; --tgq-lk: #8cc8ff;
  --tgq-tot: #6ee7a8; --tgq-vua: #fcd34d; --tgq-kem: #fca5a5;
  --tgq-tot-n: rgba(46, 158, 91, .22); --tgq-vua-n: rgba(232, 163, 61, .22); --tgq-kem-n: rgba(229, 72, 77, .24); --tgq-khong-n: rgba(148, 163, 184, .16);
  --tgq-khong-f: #5b6f86;
}

/* Dòng báo một lần [Q13] */
.tgq-bao { display: flex; align-items: center; gap: 12px; justify-content: space-between; margin: 0 0 12px; padding: 10px 14px;
  border: 1px solid var(--tgq-vien); border-left: 4px solid var(--tgq-lk); border-radius: 8px; background: var(--tgq-nen2); color: var(--tgq-chu); font-size: 13.5px; }
.tgq-bao button { flex: none; }

/* Khung chung */
.tgq-card { background: var(--tgq-nen); border: 1px solid var(--tgq-vien); border-radius: 10px; padding: 12px 14px; margin: 0 0 12px; min-width: 0; }
.tgq-card.tgq-p0 { padding: 0; }
.tgq-card-h { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 0 0 8px; }
.tgq-card-h h3, .tgq-sec h3 { font-size: 15px; margin: 0; color: var(--tgq-chu); }
.tgq-sub { font-size: 12px; color: var(--tgq-mo); }
.tgq-sec { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 18px 0 10px; padding-top: 12px; border-top: 1px solid var(--tgq-vien); }
.tgq-sec.tgq-sec2 { border-top: 0; padding-top: 0; margin-top: 6px; }
.tgq-cols2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: start; }
.tgq-cols3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; align-items: start; }
.tgq-cols2 > .tgq-card, .tgq-cols3 > .tgq-card { margin: 0; }
.tgq-cols2 + *, .tgq-cols3 + * { margin-top: 12px; }
.tgq-mo { color: var(--tgq-mo); font-size: 12.5px; }
.tgq-rong { color: var(--tgq-mo); }
.tgq-chua { color: var(--tgq-mo); font-size: 13px; font-style: italic; padding: 6px 0; }
.tgq-r { text-align: right; }

/* Số bấm được / ngoài phạm vi */
.tgq-lnk { background: none; border: 0; padding: 0; font: inherit; font-weight: 700; color: var(--tgq-lk); cursor: pointer;
  text-decoration: underline; text-underline-offset: 2px; }
.tgq-lnk:hover { opacity: .8; }
.tgq-ngoai { text-decoration: none; cursor: help; }
.tgq-lk, .tgq-lk2 { background: none; border: 0; padding: 0; font: inherit; color: var(--tgq-lk); cursor: pointer; text-align: left; }
.tgq-lk { margin-top: 8px; font-size: 13px; font-weight: 600; }
.tgq-lk:hover, .tgq-lk2:hover { text-decoration: underline; }

/* Dải ô số */
.tgq-kpis { display: grid; gap: 10px; margin: 0 0 12px; }
.tgq-kpis.tgq-k3 { grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; }
.tgq-kpis.tgq-k4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tgq-kpis.tgq-k5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.tgq-kpi { display: flex; flex-direction: column; gap: 2px; text-align: left; background: var(--tgq-nen); border: 1px solid var(--tgq-vien);
  border-left: 4px solid var(--tgq-khong-f); border-radius: 8px; padding: 9px 11px; font: inherit; color: var(--tgq-chu); min-width: 0; }
button.tgq-kpi { cursor: pointer; }
button.tgq-kpi:hover { background: var(--tgq-nen2); }
.tgq-kpi.tgq-od { border-left-color: var(--tgq-s-qh); }
.tgq-kpi.tgq-crit { border-left-color: var(--tgq-s-nt); }
.tgq-kpi.tgq-wait { border-left-color: var(--tgq-s-cd); }
.tgq-kpi.tgq-doing { border-left-color: var(--tgq-lk); }
.tgq-l { font-size: 12px; color: var(--tgq-chu2); }
.tgq-v { font-size: 22px; font-weight: 700; line-height: 1.2; }
.tgq-d { font-size: 11.5px; color: var(--tgq-mo); }

/* Màu theo mức: chữ (m) · nền đặc (n) · ô bảng (c) */
.tgq-m-tot { color: var(--tgq-tot); } .tgq-m-vua { color: var(--tgq-vua); } .tgq-m-kem, .tgq-kem { color: var(--tgq-kem); } .tgq-m-khong { color: var(--tgq-mo); }
.tgq-n-tot { background: var(--tgq-tot-f); } .tgq-n-vua { background: var(--tgq-vua-f); } .tgq-n-kem { background: var(--tgq-kem-f); } .tgq-n-khong { background: var(--tgq-khong-f); }
.tgq-c-tot { background: var(--tgq-tot-n); color: var(--tgq-tot); } .tgq-c-vua { background: var(--tgq-vua-n); color: var(--tgq-vua); }
.tgq-c-kem { background: var(--tgq-kem-n); color: var(--tgq-kem); } .tgq-c-khong { background: var(--tgq-khong-n); color: var(--tgq-mo); }
.tgq-len { color: var(--tgq-tot); font-weight: 600; } .tgq-xuong { color: var(--tgq-kem); font-weight: 600; } .tgq-ngang { color: var(--tgq-mo); }

/* Khối "của tôi" */
.tgq-toi { display: flex; flex-wrap: wrap; gap: 8px 22px; align-items: baseline; font-size: 13.5px; margin: 0 0 6px; }
.tgq-to { font-size: 18px; }

/* Đồng hồ + điều cần chú ý */
.tgq-top { display: grid; grid-template-columns: minmax(220px, 280px) minmax(0, 1fr); gap: 12px; align-items: start; }
.tgq-top > .tgq-card { margin: 0; }
.tgq-gauge { text-align: center; }
.tgq-dongho { display: block; margin: 0 auto; }
.tgq-dh-nen { fill: none; stroke: var(--tgq-khong-n); stroke-width: 12; stroke-linecap: round; }
.tgq-dh-so { fill: none; stroke-width: 12; stroke-linecap: round; stroke: currentColor; }
.tgq-big { font-size: 34px; font-weight: 800; line-height: 1.1; margin-top: -6px; }
.tgq-big small { font-size: 14px; color: var(--tgq-mo); font-weight: 600; }
.tgq-lb { font-size: 12.5px; color: var(--tgq-chu2); margin-top: 4px; }
.tgq-att { list-style: none; margin: 0; padding: 0; }
.tgq-att li { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-top: 1px solid var(--tgq-vien); font-size: 13.5px; }
.tgq-att li:first-child { border-top: 0; }
.tgq-att li > span:nth-child(2) { flex: 1; min-width: 0; }
.tgq-att li button { flex: none; }
.tgq-i { flex: none; width: 20px; height: 20px; border-radius: 50%; color: #fff; font-weight: 800; font-size: 12px; display: inline-flex; align-items: center; justify-content: center; }

/* Thẻ Phó TGĐ */
.tgq-sc3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0 0 12px; }
.tgq-sc3 > .tgq-card { margin: 0; }
.tgq-hd { display: flex; gap: 12px; align-items: center; margin: 0 0 8px; }
.tgq-nm { min-width: 0; }
.tgq-nm b { display: block; }
.tgq-nm small { display: block; color: var(--tgq-mo); font-size: 12px; }
.tgq-nhan { font-size: 11px; padding: 1px 6px; border-radius: 9px; background: var(--tgq-nen2); color: var(--tgq-chu2); border: 1px solid var(--tgq-vien); }
.tgq-vong text { font-size: 15px; font-weight: 800; fill: currentColor; }
.tgq-vong-nen { fill: none; stroke: var(--tgq-khong-n); stroke-width: 6; }
.tgq-vong-so { fill: none; stroke: currentColor; stroke-width: 6; stroke-linecap: round; }
.tgq-mtr { display: grid; grid-template-columns: 150px minmax(0, 1fr) 40px; gap: 8px; align-items: center; font-size: 12.5px; margin: 4px 0; color: var(--tgq-chu2); }
.tgq-mtr b { text-align: right; }
.tgq-tr { display: block; height: 8px; border-radius: 4px; background: var(--tgq-khong-n); overflow: hidden; }
.tgq-tr i { display: block; height: 100%; border-radius: 4px; }
.tgq-scard-f { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 8px; font-size: 12.5px; color: var(--tgq-chu2); }
.tgq-spark line { stroke: currentColor; stroke-width: 1.6; }
.tgq-spark circle { fill: currentColor; }

/* Xếp hạng khối — khung là container (C08-a): bố cục theo bề rộng THẺ, xem @container tgqrk cuối tệp */
.tgq-rk { container: tgqrk / inline-size; }
@supports not (container-type: inline-size) { .tgq-rk { overflow-x: auto; } }
.tgq-rk-r { display: grid; grid-template-columns: 28px minmax(120px, 1.3fr) minmax(110px, 1.4fr) 58px 64px 76px; gap: 8px; align-items: center;
  padding: 6px 0; border-top: 1px solid var(--tgq-vien); font-size: 13px; }
.tgq-rk-r.tgq-rk-h { border-top: 0; font-size: 11.5px; color: var(--tgq-mo); font-weight: 600; }
.tgq-rk-r .tgq-nm small { font-size: 11.5px; }
.tgq-n { color: var(--tgq-mo); text-align: center; }
.tgq-bar { display: grid; grid-template-columns: minmax(0, 1fr) 30px; gap: 6px; align-items: center; }
.tgq-bar b { text-align: right; }

/* Trễ ở đâu */
.tgq-stk-r { display: grid; grid-template-columns: minmax(90px, 160px) minmax(0, 1fr) 36px; gap: 8px; align-items: center; margin: 6px 0; font-size: 13px; }
.tgq-nm1 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tgq-stk-r .tgq-tr { display: flex; height: 14px; border-radius: 4px; }
.tgq-stk-r .tgq-tr > button, .tgq-stk-r .tgq-tr > span { display: block; height: 100%; border: 0; padding: 0; margin: 0; }
.tgq-stk-r .tgq-tr > button { cursor: pointer; }
.tgq-stk-r .tgq-tr > button:hover { opacity: .8; }
.tgq-s-nt { background: var(--tgq-s-nt); } .tgq-s-qh { background: var(--tgq-s-qh); } .tgq-s-cd { background: var(--tgq-s-cd); }
.tgq-lg { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12px; color: var(--tgq-chu2); margin: 8px 0; }
.tgq-lg i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 5px; vertical-align: -1px; }

/* Nhân sự */
.tgq-ns-r { display: grid; grid-template-columns: 26px minmax(0, 1fr) 40px 70px; gap: 8px; align-items: center; padding: 5px 0; border-top: 1px solid var(--tgq-vien); font-size: 13px; }
.tgq-ns-r:first-child { border-top: 0; }
.tgq-ns-r .tgq-nm { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tgq-ns-r .tgq-nm small { display: inline; }

/* Ma trận Theo trách nhiệm */
.tgq-mx { width: 100%; border-collapse: collapse; font-size: 13px; }
.tgq-mx th { text-align: left; font-size: 12px; color: var(--tgq-chu2); background: var(--tgq-nen2); padding: 8px; border-bottom: 1px solid var(--tgq-vien); white-space: nowrap; }
.tgq-mx td { padding: 5px 8px; border-bottom: 1px solid var(--tgq-vien); vertical-align: middle; }
.tgq-mx-g td { background: var(--tgq-nen2); }
.tgq-mx-k { padding-left: 26px !important; }
.tgq-mx-p td:first-child { padding-left: 52px; }
.tgq-tg { background: none; border: 0; cursor: pointer; width: 20px; font-size: 13px; color: var(--tgq-chu2); padding: 0; margin-right: 4px; }
.tgq-cell { display: inline-block; min-width: 46px; padding: 2px 8px; border-radius: 6px; text-align: center; font-weight: 600; }
.tgq-cell .tgq-lnk { color: inherit; }

/* Bản đồ nhân sự */
.tgq-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.tgq-tile-g h4 { font-size: 12.5px; margin: 0 0 6px; color: var(--tgq-chu2); }
.tgq-tile-l { display: flex; flex-wrap: wrap; gap: 6px; }
.tgq-tile { position: relative; width: 34px; height: 34px; border-radius: 6px; border: 1px solid currentColor; font: inherit; font-size: 11.5px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center; }
button.tgq-tile { cursor: pointer; }
.tgq-dot { position: absolute; top: -6px; right: -6px; min-width: 16px; height: 16px; padding: 0 3px; border-radius: 8px; background: var(--tgq-kem-f); color: #fff; font-size: 10px; line-height: 16px; }

/* Hộp danh sách (mở trong #dlg — ngoài khung .tgq nên dùng giá trị dự phòng) */
.tgq-dlg { padding: 12px 16px; max-height: 64vh; overflow: auto; }
.tgq-dong-mo { cursor: pointer; }
.tgq-dong-mo:hover td { background: var(--primary-soft, #eef3f8); }

@media (max-width: 1100px) {
  .tgq-kpis.tgq-k5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tgq-sc3, .tgq-cols3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .tgq-cols2, .tgq-cols3, .tgq-sc3, .tgq-top { grid-template-columns: minmax(0, 1fr); }
  .tgq-kpis.tgq-k4, .tgq-kpis.tgq-k5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tgq-rk-r { grid-template-columns: 24px minmax(0, 1fr) 90px 60px; }
  .tgq-rk-r > :nth-child(4), .tgq-rk-r > :nth-child(5) { display: none; }
}
/* C08-a (sửa v1) — Xếp hạng khối theo BỀ RỘNG THẺ, không theo viewport. Lưới 6 cột cần khoảng 496 px; ở 1366/1280 có rail và ngăn
   phải thì mỗi cột .tgq-cols2 chỉ còn khoảng 400 px nên bảng tràn sang thẻ "Trễ ở đâu". Thẻ hẹp hơn 500 px: mỗi khối hai dòng,
   dòng 1 hạng + tên khối (Phó TGĐ đứng cạnh tên), dòng 2 điểm · 4 tuần · đúng hạn · quá hạn, mọi ô nằm trong thẻ. Khối này đặt
   SAU @media 760px nên thắng khi cả hai cùng khớp; cột đã ẩn ở khổ hẹp (4 tuần, Đúng hạn) vẫn ẩn. */
@container tgqrk (max-width: 500px) {
  .tgq-rk-r { grid-template-columns: 24px minmax(0, 1fr) 50px 58px 76px; grid-template-areas: "n nm nm nm nm" ". d t dh qh"; row-gap: 2px; }
  .tgq-rk-r > :nth-child(1) { grid-area: n; }
  .tgq-rk-r > :nth-child(2) { grid-area: nm; }
  .tgq-rk-r > :nth-child(3) { grid-area: d; }
  .tgq-rk-r > :nth-child(4) { grid-area: t; }
  .tgq-rk-r > :nth-child(5) { grid-area: dh; }
  .tgq-rk-r > :nth-child(6) { grid-area: qh; }
  .tgq-rk-r .tgq-nm b { display: inline; }
  .tgq-rk-r .tgq-nm small { display: inline; margin-left: 6px; }
}