/* ==========================================================================
   Tối ưu điện thoại (2026-11-02). Nạp SAU app.css, chỉ có quy tắc theo bề rộng màn hình.
   Mục tiêu: mọi thành phần co giãn theo tỉ lệ màn hình, biểu đồ thu nhỏ vừa khung,
   không có thanh cuộn ngang ngoài ý muốn.
   ========================================================================== */

/* Không bao giờ để cả trang trượt ngang vì một phần tử quá rộng */
html,body{max-width:100%;overflow-x:clip}
img,video,canvas,svg{max-width:100%}

/* ---------- Biểu đồ báo cáo (Chart.js) ---------- */
.rcchart{overflow:hidden}
.rcchart canvas{max-width:100%}

@media (max-width:900px){
  /* thẻ biểu đồ không được rộng hơn cột lưới */
  .rcgrid>*{min-width:0}
  /* nút thao tác trên thanh tiêu đề cuộn ngang: mờ dần ở mép phải để biết còn nút */
  #vActions{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 22px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 22px),transparent);padding-right:18px}
  #vActions .btn{flex:none}
}

@media (max-width:600px){
  /* chiều cao biểu đồ tính theo chiều ngang màn hình (vw) nên co giãn tỉ lệ thuận với điện thoại */
  .rcchart{height:clamp(180px,64vw,280px)}
  .rcchart.rc-pie,.rcchart.rc-doughnut{height:clamp(210px,66vw,260px)}
  .rcchart.rc-radar,.rcchart.rc-bubble,.rcchart.rc-scatter{height:clamp(230px,80vw,320px)}
  .rcchart.tall{height:clamp(250px,88vw,340px)}
  .rcchart.empty-c{height:auto}
  /* ô tiêu đề thẻ biểu đồ: phụ đề xuống dòng gọn */
  .panel h2 small,.panel h2 .muted{font-size:12px;font-weight:500}
  /* biểu đồ SVG cũ (Trang chủ) */
  svg.chart{max-height:300px}
  /* bản đồ, lịch, bảng: luôn nằm trong khung màn hình */
  .tablewrap{max-width:100vw}
  .cal{font-size:12px}
  .cal .ev{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}

@media (max-width:380px){
  .kpi .v{font-size:18px}
  .panel{padding:12px}
  .panel h2{margin:-12px -12px 10px;padding:10px 12px}
}