/* Bố cục bản web: 2 cột trên màn hình rộng, 1 cột trên điện thoại */
.app { max-width: 1320px; margin: 0 auto; }
.col-main, .col-side { min-width: 0; }
body { padding-bottom: 40px; }

@media (min-width: 1000px) {
  body { padding: 16px 20px 40px; }
  .app { display: grid; grid-template-columns: minmax(0, 2fr) minmax(360px, 1fr); gap: 18px; align-items: start; }
  .chart-box { height: clamp(620px, calc(100vh - 170px), 900px); }
  .px { font-size: 28px; }
}
@media (max-width: 640px) {
  body { padding: 8px 8px 32px; }
  .chart-box { height: 460px; }
  .layers { gap: 4px 10px; }
  .stat-grid { grid-template-columns: 1fr 1fr; }
  .zrow { gap: 10px; }
  .zrow b.conf { max-width: 50%; }
}

/* Thông báo trong trang */
#toasts { position: fixed; right: 14px; bottom: 14px; display: flex; flex-direction: column; gap: 8px; z-index: 50; max-width: min(380px, calc(100vw - 28px)); }
.toast { background: #172233; border: 1px solid #2c4060; border-left: 3px solid var(--warn); border-radius: 10px; padding: 10px 12px; cursor: pointer; box-shadow: 0 8px 24px rgba(0,0,0,.45); }
.toast b { display: block; font-size: 12.5px; }
.toast span { display: block; color: var(--muted); font-size: 12px; margin-top: 2px; }