/* Biểu đồ cho tài liệu roadmap.flyer.vn — một sắc (màu thương hiệu), thanh mảnh,
   nhãn trực tiếp, có bảng song song, hoạt ảnh lộ dần khi cuộn tới.
   Phụ thuộc biến của /assets/cloud-doc.css (--brand, --ink, --sub, --muted, --line,
   --line2, --panel, --card, --shadow) nên tự đổi theo dropdown chủ đề.            */

.viz{margin:22px 0 26px;padding:18px 20px 14px;background:var(--card);border:1px solid var(--line);border-radius:10px}
.viz figcaption{display:flex;flex-direction:column;gap:2px;margin:0 0 14px}
.viz figcaption b{font-size:15px;font-weight:700;color:var(--ink)}
.viz figcaption span{font-size:13px;color:var(--sub)}
.viz .src{font-size:12px;color:var(--muted);margin:12px 0 0}
.viz .src a{color:var(--muted);text-decoration:underline;text-underline-offset:2px}

/* ---- hàng chỉ số (stat tiles) ---- */
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:18px 0 8px}
.kpi{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:14px 16px;min-width:0}
.kpi .k-label{font-size:12px;color:var(--sub);margin:0 0 6px;line-height:1.35}
.kpi .k-value{font-size:28px;font-weight:650;letter-spacing:-.015em;line-height:1.1;color:var(--ink)}
.kpi .k-value small{font-size:14px;font-weight:600;color:var(--muted);margin-left:2px}
.kpi .k-delta{font-size:12px;color:var(--sub);margin-top:6px}
.kpi .k-delta.up{color:var(--pass-fg)}
.kpi .k-delta.down{color:var(--fail-fg)}

/* ---- thanh ngang ---- */
.bars{display:flex;flex-direction:column;gap:9px}
.bar{display:grid;grid-template-columns:var(--lblw,150px) 1fr auto;align-items:center;gap:12px;
  border-radius:6px;outline:none;cursor:default}
.bar:focus-visible{box-shadow:0 0 0 2px var(--brand-soft),0 0 0 3px var(--brand)}
.bar .lbl{font-size:13px;color:var(--ink);line-height:1.3;min-width:0}
.bar .lbl small{display:block;font-size:11.5px;color:var(--muted);font-weight:400}
.bar .track{position:relative;height:18px;background:transparent;border-radius:0 4px 4px 0}
.bar.tracked .track{background:var(--panel)}
.bar .fill{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--brand);
  border-radius:0 4px 4px 0;transition:width .9s cubic-bezier(.22,.61,.36,1) var(--d,0ms)}
.viz.in .bar .fill{width:var(--w)}
.bar:hover .fill,.bar:focus-visible .fill{filter:brightness(1.12)}
.bar .val{font-size:13px;font-weight:650;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap;min-width:64px;text-align:right}
.bar .val small{font-weight:500;color:var(--muted)}
/* vạch mốc (mục tiêu 90 ngày / 12 tháng) trên thanh có track */
.bar .tick{position:absolute;top:-4px;bottom:-4px;width:2px;background:var(--ink);opacity:.55;transform:translateX(-1px)}
.bar .tick.t90{opacity:.3}
.bar.na .track{background:repeating-linear-gradient(45deg,var(--panel) 0 6px,transparent 6px 10px)}
.bar.na .val{color:var(--muted);font-weight:500}

/* ---- cột đứng ---- */
.cols{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;align-items:end;gap:10px;margin-top:16px;
  height:170px;padding:0 4px;border-bottom:1px solid var(--line);position:relative}
.cols .grid{position:absolute;left:0;right:0;border-top:1px solid var(--line2);font-size:10.5px;color:var(--muted);
  padding-left:2px;line-height:1;pointer-events:none}
.cols .grid span{position:relative;top:-7px;background:var(--card);padding-right:4px}
.col{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;
  position:relative;outline:none;border-radius:6px}
.col:focus-visible{box-shadow:0 0 0 2px var(--brand-soft),0 0 0 3px var(--brand)}
.col .cap{font-size:12px;font-weight:650;color:var(--ink);font-variant-numeric:tabular-nums;margin-bottom:5px;
  opacity:0;transform:translateY(4px);transition:opacity .4s ease var(--dcap,.5s),transform .4s ease var(--dcap,.5s)}
.viz.in .col .cap{opacity:1;transform:none}
.col .colfill{width:24px;height:var(--h);background:var(--brand);border-radius:4px 4px 0 0;
  transform:scaleY(0);transform-origin:bottom;transition:transform .9s cubic-bezier(.22,.61,.36,1) var(--d,0ms)}
.viz.in .col .colfill{transform:scaleY(1)}
.col.target .colfill{background:var(--brand-soft);box-shadow:inset 0 0 0 1.5px var(--brand)}
.col.partial .colfill{background:var(--brand);opacity:.55}
.col:hover .colfill,.col:focus-visible .colfill{filter:brightness(1.12)}
.colx{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:10px;padding:8px 4px 0}
.colx span{font-size:12px;color:var(--sub);text-align:center;line-height:1.3}
.colx span small{display:block;font-size:11px;color:var(--muted)}

/* ---- nhiều biểu đồ nhỏ cạnh nhau ---- */
.multi{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.multi .mini{border:1px solid var(--line2);border-radius:8px;padding:12px 14px 10px;background:var(--card)}
.multi .mini h4{margin:0 0 10px;font-size:13px;font-weight:650;color:var(--ink);text-transform:none;letter-spacing:0}
.multi .mini .cols{height:130px}
.multi .mini .col .colfill{width:22px}

/* ---- chú giải một dòng ---- */
.viz .legend{display:flex;flex-wrap:wrap;gap:14px;margin:10px 0 0;font-size:12px;color:var(--sub)}
.viz .legend i{display:inline-block;width:12px;height:12px;border-radius:3px;background:var(--brand);vertical-align:-2px;margin-right:6px}
.viz .legend i.soft{background:var(--brand-soft);box-shadow:inset 0 0 0 1.5px var(--brand)}
.viz .legend i.partial{background:var(--brand);opacity:.55}
.viz .legend i.tick{width:2px;height:14px;border-radius:0;background:var(--ink);opacity:.55}

/* ---- bảng song song ---- */
.viz-table{margin:12px 0 0}
.viz-table summary{cursor:pointer;font-size:12.5px;color:var(--brand);font-weight:600;list-style:none;display:inline-flex;align-items:center;gap:6px}
.viz-table summary::-webkit-details-marker{display:none}
.viz-table summary::before{content:"";width:0;height:0;border-left:5px solid currentColor;border-top:4px solid transparent;border-bottom:4px solid transparent;transition:transform .2s}
.viz-table[open] summary::before{transform:rotate(90deg)}
.viz-table .tblwrap{margin:10px 0 0}
.viz-table table{font-size:12.5px}

/* ---- tooltip ---- */
#viztip{position:fixed;z-index:70;pointer-events:none;opacity:0;transform:translateY(4px);
  transition:opacity .12s ease,transform .12s ease;background:var(--card);color:var(--ink);
  border:1px solid var(--line);border-radius:8px;box-shadow:0 6px 20px var(--shadow);
  padding:8px 11px;font-size:12.5px;line-height:1.35;max-width:260px}
#viztip.show{opacity:1;transform:none}
#viztip b{display:block;font-size:14px;font-weight:700;font-variant-numeric:tabular-nums}
#viztip span{color:var(--sub)}

@media (max-width:760px){
  .kpis{grid-template-columns:1fr 1fr}
  .multi{grid-template-columns:1fr}
  .bar{grid-template-columns:var(--lblw-m,110px) 1fr auto;gap:8px}
  .bar .lbl{font-size:12px}
  .cols{height:140px}
  .cols .grid span{display:none}
}
@media (prefers-reduced-motion:reduce){
  .bar .fill,.col .colfill,.col .cap,#viztip{transition:none}
  .bar .fill{width:var(--w)}
  .col .colfill{transform:scaleY(1)}
  .col .cap{opacity:1;transform:none}
}