/* Gantt: bản lưới HTML (lịch dự án, đội) và bản SVG (công việc). Thanh neon đặc; chữ trên thanh neon là chữ tối, trên nền tối là chữ trắng, trên thanh đỏ là chữ trắng. */
.gantt{position:relative;border-top:1px solid var(--line2)}
.g-head{display:grid;background:var(--head-bg);border-bottom:1px solid var(--line);font-size:12px;color:var(--ink3)}
.g-head span{padding:6px 0;text-align:center;border-left:1px solid var(--line2)}
.g-row{display:grid;align-items:center;border-bottom:1px solid var(--line2);height:44px;position:relative}
.g-row .cell{height:100%;border-left:1px solid var(--line2)}
.g-bar{position:absolute;top:13px;height:18px;border-radius:4px}
.g-today{position:absolute;top:0;bottom:0;width:2px;background:var(--primary);z-index:2}
.g-today::before{content:"Hôm nay";position:absolute;top:-22px;left:-22px;background:var(--primary);color:var(--on-neon);font-size:12px;padding:1px 6px;border-radius:4px;white-space:nowrap}
.hol{background:rgba(224,161,0,.12)}

.gantt-wrap{overflow:auto;border-top:1px solid var(--line2)}
.gantt{display:block;font-family:var(--sans)}
.gantt .g-row{fill:var(--surface)}.gantt .g-row.alt{fill:var(--head-bg)}
.gantt .g-off{fill:rgba(128,128,128,.10)}
.gantt .g-headline,.gantt .g-monthline{stroke:var(--line);stroke-width:1}
.gantt .g-month{font-size:12px;font-weight:600;fill:var(--ink2)}
.gantt .g-day{font-size:10.5px;fill:var(--ink3)}
.gantt .g-day.today{fill:var(--late);font-weight:700}
.gantt .g-today{stroke:var(--late);stroke-width:1.5;stroke-dasharray:4 3}
.gantt .g-label{font-size:12.5px;font-weight:600;fill:var(--ink)}
.gantt .g-label.other{fill:var(--ink3);font-weight:500}
.gantt .g-sub{font-size:12px;fill:var(--ink3)}
.gantt .g-bar{fill:var(--primary-l);stroke:var(--neon);stroke-width:1.5}
.gantt .g-fill{fill:var(--neon);opacity:1;stroke:none}
.gantt .g-bar.late{fill:rgba(208,16,63,.14);stroke:var(--red)}
.gantt .g-fill.late{fill:var(--red)}
.gantt .g-bar.done{fill:rgba(30,142,78,.14);stroke:var(--green)}
.gantt .g-fill.done{fill:var(--green)}
.gantt .g-bar.other{stroke-dasharray:4 3;opacity:.75}.gantt .g-fill.other{opacity:.5}
.gantt .g-pct{font-size:10.5px;font-weight:700;fill:var(--ink);pointer-events:none}
.gantt .g-pct.on-fill{fill:var(--on-neon)}
.gantt .g-pct.on-fill.late{fill:#fff}
.gantt .g-link{fill:none;stroke:#8E97AA;stroke-width:1.4}
.gantt .g-arrowhead{fill:#8E97AA}

.gantt-legend{display:flex;flex-wrap:wrap;gap:6px 18px;padding:8px 16px;font-size:12.5px;color:var(--ink3);align-items:center}
.gantt-legend .lg{display:inline-block;width:18px;height:10px;border-radius:3px;margin-right:6px;vertical-align:middle}
.gantt-legend .lg.bar{background:var(--prog-bg);border:1px solid var(--prog)}
.gantt-legend .lg.late{background:var(--late-bg);border:1px solid var(--late)}
.gantt-legend .lg.done{background:var(--fin-bg);border:1px solid var(--fin)}
.gantt-legend .lg.other{background:var(--prog-bg);border:1px dashed var(--prog)}
.gantt-legend .lg.arrow{width:auto;height:auto;font-style:normal;background:none}
.gantt .g-bar.g-overrun{fill:rgba(208,16,63,.45);stroke:var(--red)}