/* ============================================================================
   MyPaw Admin — MÀN HÌNH HẸP (điện thoại ≤ 860px, máy tính bảng dọc ≤ 980px).

   Mọi quy tắc riêng cho màn hẹp nằm ở tệp này, nạp SAU styles.css. styles.css
   mô tả giao diện máy tính; ở đây chỉ có phần khác đi khi màn hẹp lại, để không
   phải lần qua 900 dòng mới biết điện thoại trông ra sao.

   Nguyên tắc cho điện thoại (đo trên khung 375px, 27 mục):
   1. Ngón tay, không phải con trỏ: nút chính ≥ 44px, nút nhỏ ≥ 40px, chip lọc
      ≥ 38px. Trước đây nút "Xem / Ẩn / Xoá" chỉ cao ~28px — bấm trượt sang nút
      bên cạnh, mà nút bên cạnh thường là "Xoá".
   2. Ô nhập chữ 16px: dưới 16px Safari iPhone tự PHÓNG TO cả trang mỗi lần
      chạm vào ô tìm kiếm, rồi người dùng phải tự véo nhỏ lại.
   3. Một vùng cuộn duy nhất là trang: danh sách không còn khung cuộn riêng lồng
      trong trang (khó cuộn, dễ kẹt ngón).
   4. Tôn trọng vùng an toàn (tai thỏ, thanh Home) và chiều cao thật của màn
      hình (`dvh`): `100vh` của Safari tính cả phần bị thanh địa chỉ che, nên
      hàng nút cuối ngăn chi tiết từng nằm khuất sau thanh công cụ.
   5. Điều hướng bằng một tay: thanh dưới đáy giữ bốn mục hay dùng nhất, phần
      còn lại ở ngăn kéo "Menu".
   ========================================================================== */

/* Phần tử chỉ dành cho màn hẹp — ẩn trên máy tính. */
.tabbar, .sb-close, .cmdk-cancel { display: none; }

/* ── Máy tính bảng dọc ─────────────────────────────────────────────────── */
@media (max-width: 980px) {
  /* Dưới ngưỡng này cột bản đồ bị bóp lại: tiêu đề vỡ dòng, bảng xếp hạng chen
     chúc. Xuống một cột thì bản đồ nằm giữa đúng 320px. */
  .mapwrap { grid-template-columns: minmax(0, 1fr); }
  /* Ô lưới mặc định nở theo nội dung rộng nhất bên trong (min-width: auto) —
     bảng xếp hạng từng đẩy cả trang tràn ngang. */
  .mapwrap > * { min-width: 0; }
  .pcfrow { grid-template-columns: 110px 1fr 96px; }
}

/* Khi bản đồ đã xuống một cột mà thẻ vẫn còn rộng: đưa chú giải sang BÊN PHẢI
   bản đồ. Việt Nam cao gấp đôi bề ngang nên một mình nó giữa thẻ rộng 600px để
   lại hai dải trắng trống hoác ở hai bên — chỗ đó vừa đủ cho chú giải. */
@media (min-width: 620px) and (max-width: 980px) {
  .mapcard {
    display: grid; column-gap: 22px; align-items: start;
    grid-template-columns: 320px 1fr;
    grid-template-areas: 'head head' 'map legend' 'map note';
  }
  .mapcard .maphead { grid-area: head; }
  .mapcard .mapsvg { grid-area: map; margin: 0; }
  .mapcard .maplegend { grid-area: legend; border-top: none; margin-top: 0; padding-top: 4px; }
  .mapcard .mapnote { grid-area: note; align-self: start; }
}

/* ── Điện thoại / màn hẹp ──────────────────────────────────────────────── */
@media (max-width: 860px) {
  :root { --tabbar-h: 58px; --drawer-w: min(300px, 86vw); }
  html { -webkit-text-size-adjust: 100%; }
  body { -webkit-tap-highlight-color: transparent; }
  /* Khi ngăn kéo / hộp thoại / bảng lệnh đang mở, trang phía sau đứng yên —
     trước đây vuốt trong menu là cả danh sách bên dưới trôi theo. */
  body:has(.sidebar.open), body:has(#overlay.on), body:has(#cmdk.on) { overflow: hidden; }

  #app.on, #app.on.collapsed { grid-template-columns: 1fr; }
  #content {
    padding: 20px 20px calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 28px) !important;
  }

  /* ── Thanh trên cùng: tiêu đề + Tìm nhanh + Làm mới, nút chỉ còn biểu tượng. */
  .topbar {
    gap: 8px;
    padding: max(10px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right))
             10px max(16px, env(safe-area-inset-left));
  }
  .topbar > div:not(.spacer) { min-width: 0; }
  .topbar h1 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .topbar .iconbtn {
    display: inline-grid; place-items: center; flex: 0 0 auto;
    width: 40px; height: 40px; min-height: 40px; padding: 0;
    border-radius: 12px;
  }
  .topbar .iconbtn .i { width: 19px; height: 19px; }
  .topbar .iconbtn .lbl, .topbar .iconbtn kbd { display: none; }

  /* ── Ngăn kéo menu ── */
  .sidebar, .collapsed .sidebar {
    position: fixed; left: 0; top: 0; z-index: 70;
    width: var(--drawer-w); height: 100vh; height: 100dvh; min-height: 0;
    padding: max(14px, env(safe-area-inset-top)) 10px
             max(14px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left));
    transform: translateX(-105%); visibility: hidden;
    transition: transform .22s cubic-bezier(.22, .61, .36, 1), visibility 0s .22s;
    box-shadow: var(--shadow-lg);
  }
  /* `visibility` để mục menu khuất màn không lọt vào vòng Tab / trình đọc màn hình. */
  .sidebar.open { transform: none; visibility: visible; transition: transform .22s cubic-bezier(.22, .61, .36, 1); }
  /* Nền mờ: vừa cho biết phần dưới đang bị che, vừa là vùng chạm để đóng. */
  .sidebar.open::after {
    content: ''; position: fixed; inset: 0 0 0 var(--drawer-w);
    background: rgba(20, 25, 34, .4); animation: fadeIn .2s;
  }
  .sb-collapse, .collapsed .sb-collapse { display: none; }
  .sb-close {
    display: inline-grid; place-items: center; flex: 0 0 auto;
    width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--border);
    background: var(--surface); color: var(--text-2);
  }
  .sb-close .i { width: 18px; height: 18px; }
  .nav a { min-height: 44px; padding: 10px 12px; font-size: 15px; }
  .nav a .ic { font-size: 16px; flex-basis: 22px; width: 22px; }
  .nav-group { font-size: 11px; padding: 18px 12px 6px; }
  #logoutBtn { min-height: 44px; }

  /* Chế độ "thu gọn thanh bên" là của máy tính (nhớ trong trình duyệt). Trong
     ngăn kéo nó chỉ làm mất chữ của mọi mục — trả về dạng đầy đủ. */
  .collapsed .sb-brand { flex-direction: row; justify-content: flex-start; gap: 10px; padding: 6px 8px 14px; }
  .collapsed .sb-brand .sb-name, .collapsed .nav-group, .collapsed .sb-user > div:not(.av) { display: block; }
  .collapsed .nav a .lb { display: inline; }
  .collapsed .nav a { justify-content: flex-start; padding: 10px 12px; }
  .collapsed .nav a .ic { flex: 0 0 22px; }
  .collapsed .nav a .badge { position: static; margin-left: auto; min-width: 0; padding: 1px 7px; font-size: 11px; line-height: normal; }
  .collapsed .sb-user { justify-content: flex-start; }
  .collapsed #logoutBtn { font-size: 13.5px; padding: 9px 14px; }
  .collapsed #logoutBtn::after { content: none; }

  /* ── Thanh điều hướng dưới đáy (app.js: buildTabbar) ── */
  .tabbar {
    display: grid; grid-template-columns: repeat(5, 1fr);
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
    padding: 0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
    background: rgba(255, 255, 255, .94); backdrop-filter: saturate(180%) blur(12px);
    border-top: 1px solid var(--border);
  }
  .tabbar a, .tabbar button {
    position: relative; height: var(--tabbar-h); min-width: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    border: 0; background: none; color: var(--gray-500); text-decoration: none;
    font: inherit; font-size: 11px; font-weight: 650; cursor: pointer;
  }
  /* Mục đang mở: icon + chữ xanh và chữ đậm hơn — người mù màu vẫn phân biệt
     được bằng độ đậm. */
  .tabbar .ic { display: grid; place-items: center; }
  .tabbar .ic .i { width: 23px; height: 23px; }
  .tabbar .lb { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 2px; }
  .tabbar .on { color: var(--blue-600); font-weight: 750; }
  .tabbar .on .ic .i { stroke-width: 2.1; }
  .tabbar a:active, .tabbar button:active { background: var(--gray-100); }
  .tabbar .badge {
    position: absolute; top: 5px; left: calc(50% + 7px);
    min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
    display: grid; place-items: center;
    background: var(--red); color: #fff; font-size: 10.5px; font-weight: 800;
    box-shadow: 0 0 0 2px var(--surface); font-variant-numeric: tabular-nums;
  }

  /* ── Ô nhập: 16px để Safari iPhone không tự phóng to khi chạm ── */
  input:not([type="checkbox"]):not([type="radio"]), select, textarea { font-size: 16px; }
  .daterow input { font-size: 16px; padding: 8px 10px; min-height: 40px; }
  select.filter { font-size: 16px; min-height: 40px; padding: 8px 30px 8px 12px; }
  .cmdk-input input { font-size: 16px; }

  /* ── Vùng chạm ── */
  /* Bo góc theo PCLayout.controlRadius (16 ở nút 52px → 14 ở nút 44px). */
  .btn { min-height: 44px; border-radius: 14px; }
  .btn.sm { min-height: 40px; padding: 8px 13px; font-size: 13.5px; border-radius: 12px; }
  .btn .i { width: 18px; height: 18px; }
  .btn.sm .i { width: 16px; height: 16px; }
  input:not([type="checkbox"]):not([type="radio"]), select, textarea { border-radius: 14px; }
  .tabs button { min-height: 38px; padding: 8px 13px; font-size: 13.5px; }
  .subtabs button { padding: 10px 0 12px; font-size: 14.5px; }
  .modal-head .x { width: 40px; height: 40px; font-size: 18px; }
  .pager .btn { min-height: 44px; padding: 10px 16px; }
  /* Ô chọn hàng loạt: ô vuông 20px nhưng vùng chạm 40px. */
  .bulkpick { padding: 10px; margin: -10px -2px -10px -10px; }
  .bulkpick input { width: 20px; height: 20px; }
  /* Liên kết chữ trong thẻ số liệu ("kiểm duyệt", "xem chi phí"): chữ chỉ cao
     14px — nới vùng chạm bằng padding mà không đẩy dòng chữ đi đâu. */
  .kpi .sub a { display: inline-block; padding: 10px 4px; margin: -10px -4px; }
  /* Công tắc trên Bản đồ: cả nhãn là vùng chạm, ô vuông to bằng ô chọn hàng loạt. */
  .mtoggle { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; }
  .mtoggle input { width: 20px; height: 20px; }
  /* Màn cảm ứng không có "rê chuột": phản hồi ngay lúc ngón tay chạm xuống. */
  .tablewrap tbody tr.rowlink:active { background: var(--gray-50); }

  /* ── Thanh công cụ ── */
  .toolbar { gap: 8px; }
  .search, .toolbar .search { flex: 1 1 100%; max-width: none; min-width: 0; }
  .search input { padding-left: 36px; }
  .search .mag { left: 12px; font-size: 14px; }

  /* ── Danh sách: bảng thành THẺ ──────────────────────────────────────────
     Vấn đề gốc: mọi mục đều là bảng 5–7 cột. Trên màn 375px chúng rộng hơn khung
     125–313px, mà thứ bị đẩy khuất lại chính là cột ĐẦU — tên người / tên bài —
     nên nhìn vào chỉ thấy con số và nút, không biết dòng đó là ai. Ở đây bảng bỏ
     hẳn dạng lưới, mỗi dòng thành một THẺ có nhãn riêng (nhãn lấy từ
     `data-label` mà JS gắn vào từng ô). */
  .tablewrap { border: 0; background: none; box-shadow: none; overflow: visible; }
  /* Danh sách chính cuộn THEO TRANG: khung cuộn riêng (max-height của máy tính)
     lồng trong trang làm ngón tay kẹt ở vùng cuộn trong. */
  #content > .tablewrap { max-height: none; overflow: visible; }
  /* Bỏ `min-width` của bảng: ở dạng thẻ, giữ 680px làm mỗi thẻ rộng hơn màn
     hình và toàn bộ cột giá trị bị đẩy ra ngoài rìa phải. */
  .tablewrap table { min-width: 0; }
  .tablewrap table, .tablewrap tbody { display: block; width: auto; }
  .tablewrap thead { display: none; }
  /* Thẻ = lưới 2 cột: tiêu đề và dải nút trọn bề ngang, các trường còn lại xếp
     đôi (nhãn nhỏ phía trên giá trị). Mỗi trường một dòng như trước thì thẻ cao
     ~220px — một màn chỉ thấy ba người. */
  .tablewrap tr {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 14px;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius-lg);   /* PCLayout.cardRadius */
    box-shadow: var(--shadow-sm); padding: 0 14px 4px; margin-bottom: 10px;
  }
  .tablewrap tbody tr:hover { background: var(--surface); }
  .tablewrap td {
    display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 3px;
    min-width: 0; width: auto; border-bottom: 0; padding: 8px 0; font-size: 14px;
    text-align: left !important;   /* ghi đè style="text-align:right" gắn thẳng vào ô */
    overflow-wrap: anywhere;
  }
  .tablewrap td::before {
    content: attr(data-label); font-size: 10.5px; font-weight: 700;
    letter-spacing: .4px; text-transform: uppercase; color: var(--muted);
  }
  /* Ô đầu là danh tính (ai / bài nào) → làm TIÊU ĐỀ của thẻ: trọn bề ngang,
     bỏ nhãn, chữ to hơn, kẻ một vạch ngăn với phần thông tin. Ô không có tiêu đề
     cột (dải nút thao tác) cũng trọn bề ngang. Ô chứa đoạn chữ dài (nội dung bài,
     lý do báo cáo — bản máy tính cắt bằng max-width) cũng cần trọn hàng. */
  .tablewrap td:first-child,
  .tablewrap td[data-label=""],
  .tablewrap td:has(> div[style*="max-width"]),
  /* Thẻ mở đầu bằng ẢNH (Khoảnh khắc, sản phẩm…): ô đầu chỉ là hình, nên ô kế
     tiếp — người đăng + nội dung — mới là phần cần đọc, cho nó trọn hàng. */
  .tablewrap tr:has(> td:first-child .thumb) > td:nth-child(2) { grid-column: 1 / -1; }
  .tablewrap td:first-child, .tablewrap td[data-label=""] { display: block; }
  .tablewrap td:first-child::before,
  .tablewrap td[data-label=""]::before { content: none; }
  .tablewrap td:first-child { padding: 12px 0 10px; margin-bottom: 2px; border-bottom: 1px solid var(--gray-100); }
  .tablewrap td[data-label=""] { padding: 8px 0 10px; }
  .tablewrap td[data-label=""] .actions { justify-content: flex-start; flex-wrap: wrap; gap: 8px; }
  .tablewrap td:first-child .tt { font-size: 16px; }
  .tablewrap td:first-child .st { white-space: normal; word-break: break-word; }
  .tablewrap td > div[style*="max-width"] { max-width: none !important; }
  .tablewrap .thumb { width: 52px; height: 52px; }
  .empty, .loading { background: var(--surface); border-radius: var(--radius); }
  /* `.keeptable`: bảng THẬT, giữ nguyên dạng lưới thay vì bẻ thành thẻ — lưới
     giữ chân (các ô phải nằm cạnh nhau mới đọc được) và bảng xếp hạng ít cột như
     34 tỉnh/thành ở Bản đồ (mỗi tỉnh một thẻ ~200px là hơn 7.000px cuộn). Rộng
     hơn màn thì cuộn ngang trong khung của nó. */
  .keeptable { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
  .keeptable table, .keeptable thead, .keeptable tbody, .keeptable tr, .keeptable td, .keeptable th { display: revert; }
  .keeptable tr { border: 0; border-radius: 0; box-shadow: none; padding: 0; margin: 0; }
  .keeptable td::before { content: none; }
  .keeptable td, .keeptable td:first-child {
    display: revert; padding: 8px 10px; margin: 0; font-size: 13.5px; overflow-wrap: normal;
    border-bottom: 1px solid var(--gray-100);
  }
  .keeptable tr:last-child td { border-bottom: 0; }
  /* Tiêu đề cột được xuống dòng: để nguyên một dòng thì "SO KỲ TRƯỚC" chiếm
     chỗ của cột tên — cột duy nhất cần rộng. */
  .keeptable th { white-space: normal; padding: 8px 10px; vertical-align: bottom; }
  .keeptable td:first-child .tt { font-size: inherit; }
  .pccohort td, .pccohort td:first-child { padding: 6px; text-align: center !important; }

  /* Phân trang dính ngay TRÊN thanh dưới đáy, không bị nó che. */
  .pager { bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom)); }

  /* ── Tổng quan: "Cần xử lý" thành danh sách trọn bề ngang ──
     Dạng viên thuốc nối đuôi nhau thì mỗi viên một bề rộng, mắt phải nhảy
     ngang dọc để đọc; xếp hàng thì đọc một mạch từ trên xuống. */
  /* Khối này không có nền thẻ — bỏ padding để mép thẳng hàng với các thẻ số liệu
     bên dưới, tiêu đề dùng đúng kiểu nhãn nhóm (THƯƠNG MẠI, CỘNG ĐỒNG…). */
  .panel.todo { padding: 0; margin-bottom: 18px; }
  .panel.todo h3 { font-size: 11px; letter-spacing: 1.1px; color: var(--gray-400); margin: 0 2px 8px; }
  .panel.todo.ok { padding: 0 2px; }
  .panel.todo.ok h3 { font-size: 14px; letter-spacing: 0; color: var(--green); margin: 0; }
  .todorow { flex-direction: column; gap: 6px; }
  .todoitem { width: 100%; min-height: 48px; }
  .todoitem .tl { flex: 1; font-size: 14px; }
  .bandlabel { font-size: 11px; }

  /* ── Ngăn chi tiết: đúng chiều cao thật + chừa vùng an toàn ── */
  .overlay.panel .modal { height: 100vh; height: 100dvh; max-height: 100dvh; }
  .overlay.panel .modal-head { padding-top: max(14px, env(safe-area-inset-top)); }
  .overlay.panel .modal-body { padding-bottom: calc(24px + env(safe-area-inset-bottom)); }
  .overlay.panel .modal-foot {
    display: flex; flex-wrap: wrap; gap: 8px;
    padding-bottom: calc(12px + env(safe-area-inset-bottom));
  }
  .overlay.panel .modal-foot .btn { flex: 1 1 auto; }

  /* ── Thông báo nổi: trọn bề ngang, nằm trên thanh dưới đáy ── */
  #toasts { left: 12px; right: 12px; bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 12px); align-items: center; }
  .toast { max-width: 480px; width: 100%; }
}

/* Máy tính bảng dọc / điện thoại xoay ngang: thẻ rộng ~700px, xếp đôi thì mỗi
   cột trống một nửa — cho ba cột. */
@media (min-width: 600px) and (max-width: 860px) {
  .tablewrap tr { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Điện thoại xoay ngang (màn thấp): thanh trên + phân trang dính + thanh đáy
   từng ăn gần 200 trong 375px chiều cao. Chỉ giữ thanh đáy (điều hướng). */
@media (max-width: 860px) and (max-height: 480px) {
  :root { --tabbar-h: 50px; }
  .topbar, .pager { position: static; }
}

@media (max-width: 760px) {
  .uhero { flex-wrap: wrap; }
  .tabs { overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; }
  .tabs button { white-space: nowrap; }
  .pet-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
}

@media (max-width: 700px) {
  /* Thanh công cụ: ô tìm kiếm nguyên hàng, chip lọc trượt ngang được. */
  .toolbar .tabs { overflow-x: auto; flex-wrap: nowrap; max-width: 100%; -webkit-overflow-scrolling: touch; }
  .toolbar .tabs::-webkit-scrollbar { display: none; }
  .toolbar .tabs button { white-space: nowrap; }
  .toolbar .spacer { display: none; }

  .topbar h1 { font-size: 17px; }
  .topbar .crumb { display: none; }
  #content {
    padding: 16px 16px calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 24px) !important;
  }
  .kpis { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
  .grid[style*="1fr 1fr"], .grid[style*="repeat(3,1fr)"] { grid-template-columns: 1fr !important; }
  .pager { justify-content: space-between; }
  .statrow { grid-template-columns: repeat(auto-fit, minmax(78px, 1fr)); gap: 8px; }
  /* Dải KPI ở màn chi tiết là kiểu biểu-tượng-cạnh-chữ, 3 cột trên 375px thì
     nhãn vỡ đôi ("Thú / cưng") — cho 2 cột để chữ nằm trọn một dòng. */
  .uhub-bar .statrow { grid-template-columns: repeat(2, 1fr); }
  .uhub-bar .statrow .s span { white-space: nowrap; }
  .subtabs { gap: 18px; overflow-x: auto; scrollbar-width: none; }
  .subtabs::-webkit-scrollbar { display: none; }
  .subtabs button { white-space: nowrap; }

  /* Hộp thoại xác nhận thành tấm trượt từ đáy lên, nút thao tác dễ với. */
  #overlay { padding: 0; align-items: flex-end; }
  .modal, .modal.wide {
    max-width: 100%; border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    max-height: 94vh; max-height: 94dvh;
  }
  .modal-head { padding: 16px 18px 10px; }
  .modal-body { padding: 0 18px 16px; }
  .modal-foot { padding: 12px 18px 18px; flex-wrap: wrap; }
  /* Vùng an toàn đặt ở chính tấm trượt, không ở hàng nút: hộp chỉ có danh sách
     lựa chọn (vd. Đổi trạng thái) thì lựa chọn cuối từng nằm dưới thanh Home. */
  #overlay:not(.panel) .modal { padding-bottom: env(safe-area-inset-bottom); }
  .modal-foot .btn { flex: 1 1 auto; }
  .modal-foot .spacer { display: none; }
  .kv { grid-template-columns: 1fr; gap: 2px 0; }
  .kv dt { color: var(--muted); font-size: 11.5px; }
  .kv dd { margin: 0 0 10px; }
  .kycgrid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
  .dmb { max-width: 88%; }
  .hbar { grid-template-columns: 68px 1fr; row-gap: 2px; }
  .hbar .bv { grid-column: 2; font-size: 11.5px; }

  /* Màn chi tiết người dùng */
  .uhero { padding: 16px; gap: 12px; }
  .uhero .av { width: 54px; height: 54px; flex-basis: 54px; font-size: 19px; }
  .uhero h3 { font-size: 18px; }
  .udbody { padding: 6px 14px 18px; }
  .udbar { gap: 8px; }
  .umgrid.two { grid-template-columns: 1fr; }

  /* Bảng lệnh ⌘K: gần trọn màn, không gợi ý phím tắt (điện thoại không có phím). */
  #cmdk { padding: max(12px, env(safe-area-inset-top)) 12px 12px; }
  .cmdk-list { max-height: 62vh; max-height: 62dvh; }
  .cmdk-foot, .cmdk-input kbd { display: none; }
  .cmdk-cancel {
    display: inline-flex; align-items: center; min-height: 40px; padding: 0 4px;
    border: 0; background: none; color: var(--blue-600); font-size: 15px; font-weight: 600;
  }
  .cmdk-row { min-height: 48px; }
}

@media (max-width: 640px) {
  /* Hàng chip chỉ số của Bản đồ/Tăng trưởng dài hơn bề ngang màn hình — cho nó
     chiếm trọn chiều ngang để trượt ngang gọn trong một hàng. */
  #mMetric, #mRange, #gRange { width: 100%; }
  .maphead .maptotal { margin-left: 0; text-align: left; }
  .pcfrow { grid-template-columns: 1fr auto; row-gap: 2px; }
  .pcfrow .pcftrack { grid-column: 1 / -1; }
}

/* Máy rất nhỏ (≤ 380px): bớt khoảng thừa của thẻ. */
@media (max-width: 380px) {
  .tablewrap tr { padding: 0 12px 4px; column-gap: 12px; }
  .tabbar .lb { font-size: 10.5px; }
}

@keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } }