/* ── Giao diện điện thoại (≤700px): sidebar thành ngăn kéo trượt, nội dung tràn full, bảng cuộn ngang ── */

/* nút ☰ mở menu — js/components/mobile.js chèn vào đầu header; chỉ hiện trên điện thoại */
.navtog {
  display: none;
  align-items: center; justify-content: center;
  width: 42px; height: 42px; flex: none;
  margin-right: 4px;
  border: 1px solid var(--border);
  border-radius: 11px;
  background: rgba(255,255,255,.04);
  color: #e8ebf2; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.navtog svg { width: 22px; height: 22px; stroke: currentColor; stroke-width: 2.2; fill: none; stroke-linecap: round; }
.navtog:active { transform: scale(.94); }

/* nền mờ sau ngăn kéo */
.nav-ov {
  position: fixed; inset: 0;
  background: rgba(3,5,9,.55);
  backdrop-filter: blur(2px);
  opacity: 0; visibility: hidden;
  transition: opacity .25s ease, visibility .25s ease;
  z-index: 39;
}
body.nav-open .nav-ov { opacity: 1; visibility: visible; }

/* dòng trạng thái "đang dùng app trên máy tính" (js/components/remote.js, chỉ hiện ở web ngoài app) */
.rmt { margin: 0 0 12px; padding: 8px 12px; border-radius: 10px; font-size: 13px; font-weight: 600; border: 1px solid var(--border); background: rgba(255,255,255,.03); }
.rmt.is-on { color: #4ade80; border-color: rgba(74,222,128,.35); }
.rmt.is-off { color: #f87171; border-color: rgba(248,113,113,.35); }

@media (max-width: 700px) {
  :root { --sidebar-w: 0px; --header-h: 56px; }

  .navtog { display: inline-flex; }

  /* nội dung chiếm hết chiều ngang */
  .main { margin-left: 0; padding: calc(var(--header-h) + 14px) 12px 24px; }
  .page { padding: 0; }

  /* header gọn, thương hiệu nhỏ lại, giấu bớt chip trạng thái dài */
  .header { gap: 8px; padding-left: 10px; padding-right: 10px; }
  .hstat { display: none !important; }
  .user-menu { gap: 6px; }
  .user-menu__online, .hide-name-btn { display: none; }
  .user-menu__who { max-width: 92px; }
  .auth-btn { padding: 8px 12px; font-size: 13px; }

  /* ── sidebar = ngăn kéo trượt từ trái ── */
  .sidebar {
    top: 0; bottom: 0;
    width: min(82vw, 290px);
    padding: calc(var(--header-h) + 12px) 14px 18px;
    transform: translateX(-100%);
    transition: transform .28s cubic-bezier(.22,1,.36,1);
    box-shadow: 0 0 40px rgba(0,0,0,.6);
    background: rgba(9,11,16,.98);
    z-index: 40;
  }
  body.nav-open .sidebar { transform: translateX(0); }

  /* trong ngăn kéo luôn hiện chữ + nhãn, canh trái như bản PC */
  .sidebar .side-nav__label, .sidebar .side-nav__text { display: flex; }
  .sidebar .side-nav__text { display: inline; }
  .sidebar .side-nav__item { justify-content: flex-start; padding: 0 14px; min-height: 48px; }
  .sidebar .side-foot { justify-content: flex-start; padding: 0 14px; }


  /* ── bảng rộng: cho cuộn ngang thay vì vỡ layout ── */
  .acc-table, .ck-table, .rj-table, .mon-list, .perf-wrap,
  table, .tbl, .scroll-x { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* Monitor: ô thống kê 2 cột */
  .mon-tiles { grid-template-columns: repeat(2, 1fr); }

  /* ── Review: 1 cột, không tràn ── */
  .rv, #page-review { max-width: 100%; }
  .rv-grid { display: block; }
  .rv-grid > * + * { margin-top: 14px; }
  .rv-listw { min-width: 0; }
  .rv-list, .rv-item, .rv-text { max-width: 100%; }
  .rv-item img, .rv-thumbs img { max-width: 100%; height: auto; }

  /* Performance: bỏ lề âm nếu có, cho co lại */
  .perf-wrap { margin-left: 0; margin-right: 0; }

  /* ── chat: gần như toàn màn hình, ẩn tay cầm kéo (dùng cỡ cố định) ── */
  .chat-box {
    left: 8px !important; right: 8px !important; bottom: 8px !important;
    width: auto !important; height: auto !important;
    top: calc(var(--header-h) + 8px) !important;
    max-width: none !important; max-height: none !important;
  }
  .chat-rz { display: none !important; }
  .chat-dots { opacity: 1 !important; }   /* điện thoại không có hover → luôn hiện nút ⋯ */
}

/* màn rất hẹp: ô Monitor 1 cột */
@media (max-width: 420px) {
  .mon-tiles { grid-template-columns: 1fr 1fr; }
}