/* W12 (05/10/2026) — CSS BIỂU ĐỒ DÙNG CHUNG của thư viện BestGame.Web.Ui (admin + web khách). Nạp SAU nc-components.css / nc-site.css
   (NcAssets.ChartsCss). Các component: Sparkline, BarChart, LineChart, ComboChart, ChartTipHost; script js/chart-tip.js (NcAssets.ChartTipJs).
   [data-ui="chart"] (BarChart/LineChart) đã có ở nc-components.css (bản chép thiết kế) — ở đây chỉ phần riêng dự án. Chỉ token, không mã màu cứng.

   --- chuyển nguyên văn từ admin-layout.css của bg-dashboard (A3/A4/A5) --- */
.dg-spark { display:block; width:100%; height:40px; }
/* A4 (v7, quyết định 150): tooltip biểu đồ dùng chung (ChartTipHost + js/chart-tip.js) — hộp nổi tại con trỏ, theo token; vùng chạm focus được bằng bàn phím. Chỉ token (K-T17c). */
.dg-charttip { position:fixed; left:0; top:0; z-index:1000; display:grid; gap:2px; max-width:260px; padding:8px 10px; pointer-events:none;
  background:var(--color-surface); color:var(--color-text); border:1px solid var(--color-border); border-radius:var(--radius); box-shadow:var(--shadow-card); font-size:12px; line-height:1.35; }
.dg-charttip[hidden] { display:none; }
/* A5 (v8): tiêu đề ở trên (ngày dd/MM/yyyy, giờ…), rồi giá trị một dòng HOẶC các dòng ● màu · nhãn · giá trị */
.dg-charttip { min-width:150px; }
.dg-charttip > [data-tip-t] { color:var(--color-text-muted); font-size:11px; font-weight:600; letter-spacing:.02em; }
.dg-charttip > b { font-family:var(--font-mono); font-size:13px; }
.dg-charttip [hidden] { display:none; }
.dg-charttip > [data-tip-rows] { display:grid; gap:3px; }
.dg-tip-row { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:8px; }
.dg-tip-row > b { font-family:var(--font-mono); font-size:12px; text-align:right; white-space:nowrap; }
.dg-tip-dot { --c:var(--color-accent); width:8px; height:8px; border-radius:50%; background:var(--c); box-shadow:0 0 0 2px color-mix(in srgb, var(--c) 25%, transparent); }
svg [data-tip] { outline:none; cursor:crosshair; }
svg rect[data-tip]:not([fill="transparent"]):hover, svg rect[data-tip]:not([fill="transparent"]):focus-visible { stroke:var(--color-text); stroke-width:1.5; }
svg rect[data-tip][fill="transparent"]:hover, svg rect[data-tip][fill="transparent"]:focus-visible { fill:var(--color-accent); fill-opacity:.1; }
svg[data-tip]:focus-visible { outline:2px solid var(--color-accent); outline-offset:2px; border-radius:4px; }

/* --- ComboChart (W12): biểu đồ MẢNH cột + đường hai trục. Vùng vẽ SVG co theo bề ngang (preserveAspectRatio="none"), cao --cc-h;
   chữ trục trái/phải + nhãn ngày là HTML đặt theo % nên không co méo; điện thoại 390 px không tràn (cột trục co theo chữ, vùng vẽ minmax(0, 1fr)). --- */
[data-cc="root"] { margin: 0; display: grid; gap: 8px; min-width: 0; }
[data-cc="plot"] { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: var(--cc-h, 120px) auto; column-gap: 8px; row-gap: 6px; min-width: 0; }
[data-cc="svg"] { grid-column: 2; grid-row: 1; display: block; width: 100%; height: 100%; overflow: visible; }
/* trục trái/phải: ba nhãn (trần · ½ · 0) xếp dọc space-between theo chiều cao vùng vẽ — cột trục tự rộng theo chữ dài nhất */
[data-cc="ya"] { grid-row: 1; display: flex; flex-direction: column; justify-content: space-between; min-width: 0;
  font-family: var(--font-mono); font-size: 10.5px; line-height: 1; color: var(--color-text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
[data-cc="ya"][data-side="l"] { grid-column: 1; text-align: right; }
[data-cc="ya"][data-side="r"] { grid-column: 3; text-align: left; }
[data-cc="xa"] { grid-column: 2; grid-row: 2; position: relative; height: 14px; font-family: var(--font-mono); font-size: 10.5px; line-height: 14px; color: var(--color-text-muted); }
/* nhãn ngày canh GIỮA cột của nó; nhãn đầu/cuối tràn nửa chữ sang ô trống dưới cột trục (không ra ngoài khung) */
[data-cc="xa"] > span { position: absolute; top: 0; transform: translateX(-50%); white-space: nowrap; }
[data-cc="legend"] { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; font-size: 12px; color: var(--color-text-muted); }
[data-cc="legend"] > span { display: inline-flex; align-items: center; gap: 6px; }
[data-cc="key"] { --c: var(--color-accent); display: inline-block; flex: none; background: var(--c); }
[data-cc="key"][data-k="bar"] { width: 8px; height: 10px; border-radius: 2px; }
[data-cc="key"][data-k="line"] { width: 14px; height: 2px; border-radius: 2px; }
[data-cc="svg"] rect[data-bar] { transition: opacity .2s; }
@media (max-width: 480px) {
  [data-cc="plot"] { column-gap: 6px; }
  [data-cc="ya"], [data-cc="xa"] { font-size: 10px; }
  [data-cc="xa"] > span[data-alt] { display: none; }
}