/* Vibary UI — bd_khung.css (chủ: khung biểu đồ). Chặn Chart.js tự phình chiều cao. */

/* 1. Cơ bản */
img, svg, video, canvas, table { max-width: 100%; }
.khoi-bd .khoi-than { position: relative; overflow: hidden; }
.bd-khung { position: relative; width: 100%; height: 100%; min-height: 160px; }
.bd-khung canvas { display: block; }

/* 2. Khung biểu đồ trong .tq: cao cố định, cắt tràn */
.tq .khoi-bd { overflow: hidden; }
.tq .khoi-bd .khoi-than { position: relative; overflow: hidden; min-height: 0; }

.tq .khoi-bd .bd-khung,
.tq .khoi-bd > div:has(> canvas) {
  position: relative;
  height: 300px;
  min-height: 0;
  max-height: 100%;
}

/* Chart.js ghi width/height inline lên canvas -> buộc khớp khung.
   Chỉ áp dụng trong .tq .khoi-bd, không đụng sparkline .kpi. */
.tq .khoi-bd .bd-khung > canvas,
.tq .khoi-bd > div:has(> canvas) > canvas {
  position: absolute;
  inset: 0;
  width: 100% !important; /* vì Chart.js đặt style inline width */
  height: 100% !important; /* vì Chart.js đặt style inline height */
  max-height: 100%;
}

/* 3. Viewport thấp ≤820px */
@media (max-height: 820px) {
  .tq .khoi-bd .bd-khung,
  .tq .khoi-bd > div:has(> canvas) { height: 260px; }
}

/* 4. Mobile ≤640px */
@media (max-width: 640px) {
  .tq .khoi-bd .bd-khung,
  .tq .khoi-bd > div:has(> canvas) { height: 240px; }
}

/* 5. Dashboard .tq6-giua: giữ khung cố định, canvas tuyệt đối để không phình */
.tq6-giua .khoi-bd { height: 330px; overflow: hidden; }
.tq6-giua .khoi-bd .khoi-than { position: relative; overflow: hidden; min-height: 0; }
.tq6-giua .bd-khung { min-height: 220px; }
.tq6-giua .khoi-bd,
.tq6-giua .khoi { height: 320px; min-height: 320px; max-height: 320px; }

.tq6-giua .khoi-bd .bd-khung > canvas,
.tq6-giua .khoi-bd > div:has(> canvas) > canvas {
  position: absolute;
  inset: 0;
  width: 100% !important; /* vì Chart.js đặt style inline width */
  height: 100% !important; /* vì Chart.js đặt style inline height */
  max-height: 100%;
}

@media (min-width: 1024px) {
  .tq6-giua .khoi-bd { height: 360px; overflow: hidden; }
  .tq6-giua .khoi-bd .khoi-than { position: relative; min-height: 0; overflow: hidden; }
  .tq6-giua .bd-khung { height: 100%; max-height: 100%; min-height: 0; }
  .tq6-giua .khoi-bd canvas { max-height: 100%; }
}

@media (min-width: 1024px) and (min-height: 1000px) {
  .tq6-chan { display: grid; }
  .tq6-trai { grid-template-rows: 100px 150px 360px minmax(0, 1fr) auto; }
  .tq6-giua, .tq6-giua .khoi-bd { height: 360px; }
}