/* ============================================================
   VNGG TECHNOLOGY — Hero Dashboard Mockup (data-section="HERO-DASH-01")
   Mockup dashboard tổng đài dùng cho cột phải hero (san-pham, tong-dai-ao).
   Pure CSS — không Tailwind, không thư viện chart (SVG viết tay).

   NGUYÊN TẮC (sửa 29/07 sau QA):
   1) Dựng ở "kích thước thật" bằng em, rồi THU NHỎ cả khối bằng font-size
      lấy từ chiều rộng THẬT của khung (container query + đơn vị cqw)
      → giống ảnh chụp màn hình thu nhỏ, không bao giờ cắt cột/cắt chữ.
   2) Khung tự chừa lề phải để KHÔNG nằm dưới nút nổi hotline/Zalo
      (nút nổi là position:fixed góc phải màn hình, không được sửa/ẩn).
   3) Mọi panel dùng flex → nội dung lấp đầy chiều cao, không trống loãng.
   ============================================================ */

#hero-dashboard { display: block; min-height: 320px; }

/* ------------------------------------------------------------
   KHUNG NGOÀI — canh phải + chừa vùng nút nổi
   Nút nổi: right 24px, pill hotline rộng ~158px  → cần chừa ~200px
   tính từ mép phải màn hình. Lề phải cần thêm = 200 - (khoảng cách từ
   mép phải cột hero tới mép phải màn hình).
     • màn ≥1280: khoảng cách đó = 50vw - 616  → lề = 825 - 50vw (đã bù scrollbar)
     • màn <1280: khoảng cách đó = 24          → lề = 176
   ------------------------------------------------------------ */
.hdb-outer {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  container-type: inline-size;
  padding-right: clamp(0px, calc(825px - 50vw), 176px);
}
/* Hero 2 cột (lg) — mượn 28px của gap 48px giữa 2 cột cho khung rộng thêm
   (còn chừa ~38px giữa dòng H1 dài nhất và mép khung) */
@media (min-width: 1024px) {
  .hdb-outer { width: calc(100% + 28px); margin-left: -28px; }
}
/* ≤640px nút nổi thu còn icon (46px) → chỉ cần chừa ít */
@media (max-width: 640px) {
  .hdb-outer { padding-right: 48px; }
}

.hdb-window {
  --hdb-bg: #0F2547;
  --hdb-surface: #16294F;
  --hdb-card: #1C3A66;
  --hdb-border: rgba(255,255,255,0.09);
  --hdb-dim: rgba(255,255,255,0.58);
  --hdb-dim2: rgba(255,255,255,0.36);
  --hdb-gold: #F5B91F;
  --hdb-green: #10B981;
  --hdb-red: #EF4444;

  width: 100%;
  max-width: 900px;
  font-size: 11px;                            /* fallback nếu không có cqw */
  font-size: min(calc(100cqw / 30), 12px);    /* bố cục GỌN */
  font-family: 'Be Vietnam Pro', Inter, system-ui, sans-serif;
  background: var(--hdb-bg);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 1.1em;
  box-shadow: 0 1.4em 3em rgba(0,0,0,0.38);
  overflow: hidden;
}
/* Khung đủ rộng → bố cục ĐẦY ĐỦ 3 cột như ảnh mẫu */
@container (min-width: 520px) {
  .hdb-window { font-size: min(calc(100cqw / 52), 16px); }
}

/* --- Titlebar --- */
.hdb-titlebar { display: flex; align-items: center; gap: .6em; padding: .65em 1em; background: rgba(255,255,255,0.04); border-bottom: 1px solid var(--hdb-border); }
.hdb-dot { width: .7em; height: .7em; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.hdb-dot-red { background: #FF5F57; }
.hdb-dot-yellow { background: #FEBC2E; }
.hdb-dot-green { background: #28C840; }
.hdb-address { margin-left: .4em; font-size: .8em; color: var(--hdb-dim2); background: rgba(255,255,255,0.06); padding: .25em .8em; border-radius: .5em; white-space: nowrap; }

/* --- Body: sidebar + main --- */
.hdb-body { display: flex; background: var(--hdb-surface); }
.hdb-side { display: none; width: 4.6em; flex-shrink: 0; flex-direction: column; align-items: center; gap: .3em; padding: .9em .4em; border-right: 1px solid var(--hdb-border); }
.hdb-side-item { display: flex; flex-direction: column; align-items: center; gap: .25em; width: 100%; padding: .45em .2em; border-radius: .6em; color: var(--hdb-dim2); }
.hdb-side-item span { font-size: .58em; line-height: 1.1; text-align: center; white-space: nowrap; }
.hdb-side-item.is-active { background: rgba(245,185,31,0.14); color: var(--hdb-gold); }
.hdb-side .hdb-icon { width: 1.25em; height: 1.25em; }
@container (min-width: 520px) { .hdb-side { display: flex; } }

.hdb-main { flex: 1 1 auto; min-width: 0; padding: .9em 1.1em 1.1em; display: flex; flex-direction: column; }

/* --- Topbar --- */
.hdb-topbar { display: flex; align-items: flex-start; justify-content: space-between; gap: .8em; margin-bottom: .8em; }
.hdb-title { font-size: 1.15em; font-weight: 700; color: #fff; margin: 0; line-height: 1.2; }
.hdb-subtitle { font-size: .68em; color: var(--hdb-dim); margin: .2em 0 0; }
.hdb-filter { flex-shrink: 0; font-size: .66em; font-weight: 600; color: #fff; background: rgba(255,255,255,0.08); border: 1px solid var(--hdb-border); padding: .45em .8em; border-radius: .5em; white-space: nowrap; }

/* --- KPI row --- */
.hdb-kpi-row { display: grid; grid-template-columns: repeat(3,1fr); gap: .55em; margin-bottom: .55em; }
.hdb-kpi { background: var(--hdb-card); border: 1px solid var(--hdb-border); border-radius: .7em; padding: .6em .7em; min-width: 0; }
.hdb-kpi-top { display: flex; align-items: center; justify-content: space-between; gap: .4em; margin-bottom: .45em; }
.hdb-kpi-icon { width: 1.15em; height: 1.15em; color: var(--hdb-gold); flex-shrink: 0; }
.hdb-kpi-trend { font-size: .56em; font-weight: 700; white-space: nowrap; display: flex; align-items: center; gap: .35em; }
.hdb-trend-up { color: var(--hdb-green); }
.hdb-trend-down { color: var(--hdb-red); }
.hdb-trend-plain { color: var(--hdb-dim); font-weight: 600; }
.hdb-kpi-value { font-size: 1.25em; font-weight: 700; color: #fff; line-height: 1.1; white-space: nowrap; }
.hdb-kpi-label { font-size: .6em; color: var(--hdb-dim); margin-top: .25em; white-space: nowrap; }
.hdb-dot-ok-inline { width: .45em; height: .45em; border-radius: 50%; background: var(--hdb-green); display: inline-block; flex-shrink: 0; }

/* --- Grid 2 hàng panel --- */
.hdb-row2, .hdb-row3 { display: grid; grid-template-columns: repeat(2,1fr); gap: .55em; margin-bottom: .55em; }
.hdb-row2 > .hdb-panel-status,
.hdb-row3 > .hdb-panel-team { grid-column: 1 / -1; }

.hdb-panel { background: var(--hdb-card); border: 1px solid var(--hdb-border); border-radius: .7em; padding: .65em .75em; min-width: 0; display: flex; flex-direction: column; }
.hdb-panel-title { font-size: .65em; font-weight: 700; color: #fff; margin: 0 0 .5em; line-height: 1.25; text-wrap: pretty; }

/* --- Biểu đồ đường (lấp đầy khung) --- */
.hdb-legend { display: flex; gap: .8em; flex-wrap: wrap; margin-bottom: .45em; }
.hdb-legend-item { display: flex; align-items: center; gap: .35em; font-size: .55em; color: var(--hdb-dim); white-space: nowrap; }
.hdb-legend-dot { width: .6em; height: .6em; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.hdb-chart-box { flex: 1 1 auto; display: flex; gap: .4em; min-height: 5.2em; }
.hdb-chart-y { display: flex; flex-direction: column; justify-content: space-between; text-align: right; font-size: .5em; line-height: 1; color: var(--hdb-dim2); flex-shrink: 0; }
.hdb-chart { flex: 1 1 auto; width: 100%; height: 100%; min-width: 0; display: block; }
.hdb-chart-x { display: flex; justify-content: space-between; font-size: .5em; line-height: 1; color: var(--hdb-dim2); margin-top: .4em; }

/* --- Donut phân bố --- */
.hdb-donut { width: 7em; max-width: 100%; height: auto; display: block; margin: auto auto .45em; }
.hdb-legend-col { flex-direction: column; gap: .3em; margin: 0; }

/* --- Trạng thái hệ thống --- */
.hdb-status-wrap { flex: 1 1 auto; display: flex; align-items: center; gap: .7em; }
.hdb-status-list { flex: 1 1 auto; min-width: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(9em,100%), 1fr)); align-content: space-between; gap: .3em .9em; }
.hdb-status-row { display: flex; align-items: center; justify-content: space-between; gap: .5em; font-size: .57em; color: var(--hdb-dim); white-space: nowrap; }
.hdb-status-ok { color: var(--hdb-green); font-weight: 600; display: flex; align-items: center; gap: .35em; white-space: nowrap; }
.hdb-uptime { flex-shrink: 0; width: 4.4em; display: flex; flex-direction: column; align-items: center; gap: .2em; }
.hdb-uptime-arc { width: 4.1em; height: 4.1em; display: block; }
.hdb-uptime-cap { font-size: .52em; line-height: 1.3; color: var(--hdb-dim); text-align: center; margin: 0; max-width: 100%; }

/* --- Bảng theo team --- */
.hdb-table-wrap { flex: 1 1 auto; overflow-x: auto; }
.hdb-table { width: 100%; height: 100%; border-collapse: collapse; font-size: .64em; }
/* th cho xuống dòng khi bí chỗ → KHÔNG bao giờ cắt cột (td vẫn nowrap) */
.hdb-table th { text-align: left; color: var(--hdb-dim2); font-weight: 600; font-size: .86em; line-height: 1.25; padding: .3em .5em .3em 0; border-bottom: 1px solid var(--hdb-border); }
.hdb-table td { color: #fff; padding: .35em .5em; padding-left: 0; border-bottom: 1px solid var(--hdb-border); white-space: nowrap; }
.hdb-table th:last-child, .hdb-table td:last-child { padding-right: 0; }
.hdb-table tr:last-child td { border-bottom: none; }
.hdb-rate { display: flex; align-items: center; gap: .4em; }
.hdb-rate-track { width: 2.2em; height: .32em; border-radius: .2em; background: rgba(255,255,255,0.12); overflow: hidden; flex-shrink: 0; }
.hdb-rate-fill { height: 100%; background: var(--hdb-gold); }

/* --- Kênh liên lạc --- */
.hdb-chan-row { flex: 1 1 auto; display: flex; align-items: center; gap: .5em; padding: .25em 0; }
.hdb-chan-icon { width: 1.6em; height: 1.6em; border-radius: .5em; background: rgba(245,185,31,0.14); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.hdb-chan-icon .hdb-icon { width: .95em; height: .95em; color: var(--hdb-gold); }
.hdb-chan-info { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.hdb-chan-label { font-size: .62em; font-weight: 600; color: #fff; white-space: nowrap; }
.hdb-chan-count { font-size: .55em; color: var(--hdb-dim2); white-space: nowrap; }
.hdb-spark { flex: 0 1 3.2em; width: 3.2em; min-width: 1.6em; height: 1.3em; display: block; }

/* --- Cuộc gọi gần đây --- */
.hdb-call-row { flex: 1 1 auto; display: flex; align-items: center; gap: .5em; padding: .25em 0; border-bottom: 1px solid var(--hdb-border); }
.hdb-call-row:last-child { border-bottom: none; }
.hdb-call-dot { width: .5em; height: .5em; border-radius: 50%; flex-shrink: 0; }
.hdb-dot-ok { background: var(--hdb-green); }
.hdb-dot-miss { background: var(--hdb-red); }
.hdb-call-info { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.hdb-call-name { font-size: .62em; font-weight: 600; color: #fff; white-space: nowrap; }
.hdb-call-ext { font-size: .54em; color: var(--hdb-dim2); white-space: nowrap; }
.hdb-call-time { text-align: right; flex-shrink: 0; display: flex; flex-direction: column; }
.hdb-call-time > span:first-child { font-size: .58em; color: var(--hdb-dim); white-space: nowrap; }
.hdb-call-dur { font-size: .55em; color: var(--hdb-green); white-space: nowrap; }
.hdb-call-miss { font-size: .55em; color: var(--hdb-red); font-weight: 600; white-space: nowrap; }

/* --- Footer --- */
.hdb-footer { padding: .55em 0 0; margin: 0; font-size: .56em; color: var(--hdb-dim2); }

/* --- Icon base --- */
.hdb-icon { width: 1em; height: 1em; }

/* ============================================================
   KHUNG RỘNG (≥520px): bố cục 3 cột như ảnh mẫu khách gửi
   Tỉ lệ cột giữ giống nhau ở hàng 2 và hàng 3 để thẳng lưới.
   ============================================================ */
@container (min-width: 520px) {
  .hdb-row2, .hdb-row3 { grid-template-columns: 20fr 13.8fr 16.4fr; }
  .hdb-row2 > .hdb-panel-status,
  .hdb-row3 > .hdb-panel-team { grid-column: auto; }
}

/* ============================================================
   ĐIỆN THOẠI (<768px): rút gọn đúng như bản đã duyệt
   ẩn sidebar · 4 thẻ KPI · 1 biểu đồ · các panel xếp dọc
   Khối này để CUỐI FILE để luôn thắng các luật ở trên.
   ============================================================ */
@media (max-width: 767px) {
  .hdb-window { font-size: min(calc(100cqw / 30), 12px); }
  .hdb-side { display: none; }
  .hdb-kpi-row { grid-template-columns: repeat(2,1fr); }
  .hdb-kpi-extra { display: none; }
  .hdb-row2, .hdb-row3 { grid-template-columns: 1fr; }
  .hdb-row2-extra { display: none; }
}