/* Thông báo nổi và bố cục màn hình nhỏ */
#toast { position:fixed; right:16px; bottom:16px; z-index:60; background:var(--text); color:#fff; padding:11px 16px; border-radius:var(--radius-sm); max-width:min(380px, calc(100vw - 32px)); box-shadow:var(--shadow-lg); }
#toast.err { background:var(--danger-600); }

@media (max-width:640px) {
  .rail { flex-direction:row; width:100%; height:64px; top:auto; bottom:0; border-right:0; border-top:1px solid var(--border); padding:0 6px; overflow-x:auto; }
  .rail__logo { width:40px; height:44px; margin:0; flex:none; }
  .rail__logo svg { width:24px; height:24px; }
  .launcher { left:8px; top:auto; bottom:72px; }
  .rail nav { flex-direction:row; gap:0; padding:0; flex:1; min-width:0; margin:0; }
  .rail__item { flex:1 1 0; min-width:0; padding:8px 1px 6px; gap:4px; }
  .rail__item span.t { font-size:10px; line-height:1.15; text-align:center; }
  .rail__item .n.hot { left:calc(50% + 2px); }
  .main { margin-left:0; padding-bottom:64px; }
  .topbar { height:60px; padding:0 12px; }
  .topbar h1 { font-size:17px; }
  .icons { gap:2px; }
  .icon-btn { width:38px; height:38px; }
  button.avatar { width:38px; height:38px; font-size:16px; }
  .page { padding:14px 12px 24px; }
  .cols { grid-template-columns:minmax(0,1fr); }
  #toast { bottom:76px; }
}
@media (prefers-reduced-motion: no-preference) { .bar i { transition:width .4s ease; } }

/* ----- điện thoại: bảng thành danh sách thẻ, không phải kéo ngang ----- */
@media (max-width:640px) {
  .table-wrap table, .table-wrap tbody, .table-wrap tfoot, .table-wrap tr, .table-wrap table td { display:block; width:100%; }
  .table-wrap thead { display:none; }
  .table-wrap tr { padding:12px 14px; border-bottom:1px solid var(--border); }
  .table-wrap tbody tr:last-child { border-bottom:0; }
  .table-wrap table td { position:relative; padding:4px 0 4px 112px; border:0; min-height:24px; text-align:left !important; white-space:normal !important; }
  /* tên cột trôi sang trái ô, tên dài 2 dòng thì ô tự cao theo */
  .table-wrap table td::before { content:attr(data-label); float:left; width:104px; margin-left:-112px; padding-top:1px; font-size:12px; color:var(--text-3); line-height:1.3; }
  .table-wrap table td::after { content:""; display:block; clear:both; }
  .table-wrap table td:not([data-label])::before, .table-wrap table td[data-label=""]::before { display:none; }
  .table-wrap table td:not([data-label]), .table-wrap table td[data-label=""] { padding-left:0; }
  .table-wrap table td:empty { display:none; }
  .table-wrap table td.act { padding-left:0; padding-top:10px; display:flex; flex-wrap:wrap; gap:8px; justify-content:flex-start; }
  .table-wrap tfoot tr { background:var(--surface-2); }
  .table-wrap tfoot td { padding-left:0; }
  .item { min-width:0; }
  table.log td.what { min-width:0; }
  /* bảng phân tích ở Tổng quan / báo cáo: tên nhóm được xuống dòng thay vì bị cắt */
  .fd-row .nm { white-space:normal; overflow:visible; }
  .c-row { font-size:13px; padding:9px 4px; }
  .c-row.c4 { grid-template-columns:minmax(0,1fr) 46px 52px 100px; gap:6px; }
  .c-row.c4 .pct { width:50px; font-size:12px; padding:2px 4px; }
  #dp-ov .c-row.c4 { grid-template-columns:minmax(0,1fr) 82px 52px 96px; }
  #dp-ov .c-row.c4 b { font-size:12.5px; }
}