/* ============================================================================
 * Báo cáo ngày · Nhóm của tôi · Tổng quan · Cấu hình form — VBIM-PM (31/10/2026).
 *
 * Phần lớn file này CHÉP từ `D:\V365-PM\docs\styles.css` (khối "báo cáo hằng ngày" + vài lớp chung mà
 * khối đó cần: chip, callout, khoi-trong, f-row, menu tài khoản). Các lớp đó viết bằng tên biến của
 * design system V365 (`--surface`, `--ink-muted`, `--brand-red`…). Thay vì sửa ~400 dòng, khối `:root`
 * ngay dưới ÁNH XẠ các tên đó sang bảng màu VBIM — "brand-red" của V365 ở đây là xanh dương VBIM.
 * Sửa màu thì sửa ở khối cầu nối này, đừng rải màu viết tay xuống dưới.
 *
 * Không có theme tối: VBIM chưa có, cầu nối chỉ khai một bộ màu sáng.
 * ========================================================================== */

:root {
  --surface: #fff;
  --surface-raised: #fff;
  --surface-sunken: #f6f8fb;
  --surface-inverse: #16202f;
  --ink-secondary: #4a5668;
  --ink-muted: var(--muted);
  --ink-accent: var(--blue);
  --ink-inverse: #fff;
  --border: var(--line);
  --border-strong: #c9d4e2;
  --brand-red: var(--blue);           /* điểm nhấn chính của V365 → xanh dương VBIM */
  --brand-red-hover: var(--blue-d);
  --brand-surface: var(--blue-l);
  --brand-black: #0e1621;
  --on-brand-red: #fff;
  --success: var(--green);
  --success-surface: #e6f5ec;
  --warning: var(--amber);
  --warning-surface: #fdf3e0;
  --danger: var(--red);
  --danger-surface: #fcecea;
  --info: var(--blue);
  --info-surface: var(--blue-l);
  --focus: var(--blue);
  --font-sans: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px;
  --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(14, 22, 33, .08);
  --shadow-md: 0 4px 12px rgba(14, 22, 33, .10);
  --shadow-lg: 0 12px 32px rgba(14, 22, 33, .16);
  --v-r-nho: var(--radius-sm);
  --v-r: var(--radius-md);
  --v-r-lon: var(--radius-lg);
  --v-nhanh: 120ms;
}

/* ------------------------------------------------ nút mặc định trong khối báo cáo -- */
/* 🔴 Nút mặc định của VBIM là nền XANH chữ TRẮNG; của V365 là nút TRUNG TÍNH (nền trắng, chữ đậm).
 * Khối báo cáo dựng rất nhiều thứ bằng <button> trần (dòng người ở Nhóm của tôi, ô ngày ở lịch, dòng
 * vướng mắc…) — để nguyên thì tên người thành chữ trắng trên nền nhạt, không đọc được (gặp lúc thử
 * 31/10/2026). Đặt lại nút trần về kiểu V365 CHỈ trong các pane báo cáo + menu tài khoản + hai lớp phủ.
 * `:where()` để độ đặc hiệu = một thẻ: lớp riêng của từng thành phần (`.nh-nguoi`, `.chip`, `.lt-o`…)
 * và `button.primary` / `button.ghost` của VBIM vẫn thắng. */
:where(#tab-baocao, #tab-nhom, #tab-tongquan, #tab-cauhinh, .tk-menu, .bc-ho-so-nen, .vm-anh-lon, .q-modal) button {
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border-strong);
  border-radius: var(--v-r);
  background: var(--surface);
  color: var(--ink);
  font-weight: 600;
}
:where(#tab-baocao, #tab-nhom, #tab-tongquan, #tab-cauhinh, .tk-menu, .bc-ho-so-nen, .vm-anh-lon, .q-modal) button:hover:where(:not(:disabled)) {
  background: var(--surface-sunken); border-color: var(--border-strong); color: var(--ink);
}
/* `button.primary` của VBIM chỉ đặt nền — chữ trắng nằm ở nút gốc, mà nút gốc vừa bị đặt lại ở trên. */
:where(#tab-baocao, #tab-nhom, #tab-tongquan, #tab-cauhinh, .tk-menu, .bc-ho-so-nen, .vm-anh-lon, .q-modal) button.primary,
:where(#tab-baocao, #tab-nhom, #tab-tongquan, #tab-cauhinh, .tk-menu, .bc-ho-so-nen, .vm-anh-lon, .q-modal) button.primary:hover { color: #fff; }
:where(#tab-baocao, #tab-nhom, #tab-tongquan, #tab-cauhinh, .bc-ho-so-nen) a.btn {
  background: var(--surface); color: var(--ink); border-color: var(--border-strong);
}

/* ------------------------------------------------ lớp chung khối báo cáo cần -- */

/* Chưa biết vai trò (đang hỏi role + team + Entra, ~1 giây): KHÔNG bày tab, pane, ô chọn plan nào —
 * không thì nhân viên thấy đủ 8 tab rồi mới biến mất (V365 gặp thật 23/10/2026). */
.app.cho-vai-tro .tabs .tab,
.app.cho-vai-tro .pane,
.app.cho-vai-tro .side-du-an { display: none; }
.cho-vai-tro-note { display: none; }
.app.cho-vai-tro .cho-vai-tro-note { display: block; padding: var(--space-5); color: var(--ink-muted); }

.che-do-bao-cao .tabs .tab { cursor: default; }
.sao { color: var(--danger); font-weight: 700; }
.num { font-variant-numeric: tabular-nums; }
.note.ok { color: var(--success); }
button.mini-btn { font: 600 12px/18px var(--font-sans); padding: var(--space-1) var(--space-3); }
label.btn { display: inline-flex; align-items: center; }
textarea { resize: vertical; }

/* Badge của khối báo cáo: tên lớp theo V365 (ok/warn/bad/info/muted). Badge cũ của VBIM (a/b/c) giữ nguyên. */
.badge.ok { background: var(--success-surface); color: var(--success); }
.badge.warn { background: var(--warning-surface); color: var(--warning); }
.badge.bad { background: var(--danger-surface); color: var(--danger); }
.badge.info { background: var(--info-surface); color: var(--info); }
.badge.muted { background: var(--surface-sunken); color: var(--ink-secondary); }

.chip {
  border-radius: var(--radius-pill); border: 1px solid var(--border); background: var(--surface);
  color: var(--ink-secondary); padding: var(--space-1) var(--space-4);
}
.chip:hover:not(.on) { background: var(--brand-surface); border-color: var(--border-strong); color: var(--ink-secondary); }
.chip.on { background: var(--brand-surface); color: var(--ink-accent); border-color: var(--ink-accent); font-weight: 600; }

.callout {
  border: 1px solid var(--border); border-left: 3px solid var(--border-strong);
  border-radius: var(--v-r); background: var(--surface-sunken);
  padding: var(--space-3) var(--space-4); color: var(--ink-secondary);
}
.callout.warn { border-left-color: var(--warning); }
.callout.bad { border-left-color: var(--danger); }

.f-row { display: flex; flex-direction: column; gap: var(--space-1); }
.f-row > label { font: 600 13px/20px var(--font-sans); }
.f-row .goi-y { color: var(--ink-muted); font: 400 12px/18px var(--font-sans); }

.khoi-trong {
  background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--info);
  border-radius: var(--v-r-lon); padding: var(--space-6);
  display: flex; flex-direction: column; gap: var(--space-3);
  align-items: flex-start; max-width: 70ch; box-shadow: var(--shadow-sm);
}
.khoi-trong strong { font: 600 15px/22px var(--font-sans); }
.khoi-trong p { margin: 0; color: var(--ink-secondary); }

/* Modal của V365 xếp dọc có khe; VBIM chỉ đặt kích thước — thêm khe cho form trong modal báo cáo. */
.modal.bc-modal, .modal:has(.f-row) { display: flex; flex-direction: column; gap: var(--space-3); max-width: 520px; width: 100%; }

/* ------------------------------------------------ nút tài khoản (ảnh đại diện) -- */
/* Máy tính: góc phải thanh tab. Điện thoại: góc phải khối logo — ẩn / hiện ở khối @media cuối file. */
.brand { position: relative; }
.brand .tk-nut { display: none; }
.tk-cho { display: inline-flex; align-items: center; padding-left: var(--space-3); }
/* 8 tab + dòng ngữ cảnh + nút tài khoản không vừa cửa sổ ~1100px (sidebar 262px chiếm mất) ⇒ thanh tab
 * CUỘN NGANG thay vì đẩy tràn; nút tài khoản ghim mép phải, dòng ngữ cảnh co lại "…". */
.tabs { overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tabs .tab { flex: none; white-space: nowrap; }
.tabs .ctx { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tabs .tk-cho { position: sticky; right: 0; flex: none; background: #fff; padding-top: 6px; padding-bottom: 6px; }
.tk-nut {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: 2px var(--space-3) 2px 2px; border-radius: var(--radius-pill);
  border: 1px solid var(--border); background: var(--surface); color: var(--ink); cursor: pointer;
}
.tk-nut:hover { border-color: var(--border-strong); background: var(--surface); }
.tk-ten { font: 600 13px/20px var(--font-sans); color: var(--ink); max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tk-nut .bc-ava { width: 30px; height: 30px; font-size: 12px; }
.tk-menu {
  position: fixed; z-index: 96; min-width: 240px; max-width: calc(100vw - 16px);
  background: var(--surface-raised); border: 1px solid var(--border);
  border-radius: var(--v-r-lon); box-shadow: var(--shadow-lg);
  padding: var(--space-3); display: flex; flex-direction: column; gap: var(--space-1);
}
.tk-menu-dau { display: flex; gap: var(--space-3); align-items: center; padding: var(--space-1) var(--space-1) var(--space-3); border-bottom: 1px solid var(--border); margin-bottom: var(--space-1); }
.tk-menu-dau .fill { min-width: 0; }
.tk-menu-dau b { display: block; overflow-wrap: anywhere; }
.tk-menu-dau .note { overflow-wrap: anywhere; }
.tk-menu > button { text-align: left; border-color: transparent; color: var(--ink); }
.tk-menu > button:hover { background: var(--surface-sunken); border-color: transparent; }
.tk-menu .tk-thoat { color: var(--danger); }

/* ------------------------------------------------ "Quyền của tôi" (31/10/2026) -- */
.modal.q-modal { max-width: 620px; width: 100%; max-height: calc(100vh - 48px); overflow-y: auto;
  display: flex; flex-direction: column; gap: var(--space-4); }
.q-modal .bc-dau strong { display: block; margin: 0; font-size: 16px; }
.q-nhom { display: flex; flex-direction: column; gap: var(--space-2); }
.q-dong { display: flex; gap: var(--space-3); align-items: flex-start;
  padding: var(--space-2) var(--space-3); border: 1px solid var(--border); border-radius: var(--v-r); }
.q-dong > .badge { flex: none; min-width: 74px; text-align: center; margin-top: 1px; }
.q-dong .fill { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.q-dong.tat { background: var(--surface-sunken); }
.q-dong.tat b { color: var(--ink-secondary); }

/* ================================================== báo cáo hằng ngày (chép nguyên từ V365) === */
/* Màn cá nhân theo "Prototype Báo cáo ngày.html" (22/10/2026): đầu màn + ba cột —
   danh sách việc · form việc đang chọn · phần chung/đánh giá/gửi. Màn hẹp (điện thoại)
   xếp dọc một cột. Màu chỉ từ token, đúng luật đầu file. */

.bc-cuon { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: var(--space-3); }

.bc-the {
  display: flex; flex-direction: column; gap: var(--space-3);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--v-r-lon); box-shadow: var(--shadow-sm);
  padding: var(--space-4) var(--space-4);
  min-width: 0;
}
.bc-dau { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.bc-dau h3, .bc-dau-man h3 { margin: 0; font: 600 16px/24px var(--font-sans); }
.bc-hang { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.bc-tieu-muc {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-2);
  font: 600 11px/18px var(--font-sans); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-muted);
}
.bc-tieu-muc .note { text-transform: none; letter-spacing: normal; }
.bc-chu { white-space: pre-wrap; font: 400 14px/22px var(--font-sans); overflow-wrap: anywhere; }

/* Đầu màn: tiêu đề ngày + trạng thái + thanh tiến độ + ô ngày + nút hồ sơ. */
.bc-dau-man {
  display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--v-r-lon); box-shadow: var(--shadow-sm);
  padding: var(--space-3) var(--space-4);
}
.bc-tien-do { height: 6px; max-width: 360px; margin-top: var(--space-2); border-radius: var(--radius-pill); background: var(--surface-sunken); overflow: hidden; }
.bc-tien-do > i { display: block; height: 100%; background: var(--success); transition: width var(--v-nhanh); }
/* Thanh chạy qua lại khi đang mở báo cáo một ngày (chưa có số việc). */
.bc-tien-do.dang-doc > i { width: 35%; background: var(--ink-accent); animation: bc-dang-doc 1.1s ease-in-out infinite alternate; }
@keyframes bc-dang-doc { from { transform: translateX(-100%); } to { transform: translateX(290%); } }
@media (prefers-reduced-motion: reduce) { .bc-tien-do.dang-doc > i { animation: none; width: 100%; opacity: .4; } }
.bc-ava {
  display: inline-grid; place-items: center; flex: none;
  width: 28px; height: 28px; border-radius: var(--radius-pill);
  background: var(--brand-surface); color: var(--ink-accent);
  font: 700 11px/1 var(--font-sans);
}
.bc-ava.lon { width: 44px; height: 44px; font-size: 15px; }
/* Ảnh đại diện Microsoft 365 (30/10/2026) — thay chữ viết tắt khi có ảnh. */
.bc-ava { overflow: hidden; }
.bc-ava > img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Ba cột — cột giữa rộng nhất. Hẹp thì xếp dọc: danh sách → form → phần chung. */
.bc-luoi3 {
  display: grid; grid-template-columns: minmax(240px, 300px) minmax(0, 1fr) minmax(260px, 320px);
  gap: var(--space-4); align-items: start;
}
@media (max-width: 1000px) { .bc-luoi3 { grid-template-columns: minmax(0, 1fr); } }

/* Cột trái: danh sách việc. div[role=button] chứ không <button> vì bên trong có nút ✕ —
   nút lồng nút là HTML hỏng (bài học 18/09/2026). */
.bc-ds-viec { display: flex; flex-direction: column; gap: var(--space-1); }
.bc-viec {
  display: flex; flex-direction: column; gap: var(--space-1);
  padding: var(--space-2) var(--space-3); border-radius: var(--v-r);
  border: 1px solid transparent; cursor: pointer; transition: background var(--v-nhanh);
}
.bc-viec:hover, .bc-viec:focus-visible { background: var(--surface-sunken); outline: none; }
.bc-viec.on { background: var(--brand-surface); border-color: color-mix(in srgb, var(--ink-accent) 30%, transparent); }
.bc-viec.thieu { border-color: var(--danger); }
.bc-viec-ten { display: flex; gap: var(--space-2); align-items: flex-start; font: 600 14px/20px var(--font-sans); }
.bc-viec-ten .bc-bo { margin-left: auto; flex: none; }
.bc-cham { font: 400 12px/18px var(--font-sans); color: var(--ink-muted); display: inline-flex; align-items: center; gap: 4px; }
.bc-cham::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--border-strong); }
.bc-cham.xong { color: var(--success); }
.bc-cham.xong::before { background: var(--success); }
.bc-nut-them { width: 100%; border-style: dashed; }
.bc-them { display: flex; flex-direction: column; gap: var(--space-2); }
.bc-trong { padding: var(--space-2) 0; }

/* Cột giữa: form của việc đang chọn. */
.bc-form textarea { width: 100%; }
.bc-thanh { display: flex; align-items: center; gap: var(--space-3); }
.bc-thanh input[type=range] { flex: 1; accent-color: var(--brand-red); }
.bc-pct { min-width: 44px; text-align: right; font: 700 14px/20px var(--font-sans); font-variant-numeric: tabular-nums; }
.bc-tom { border-top: 1px solid var(--border); padding-top: var(--space-3); display: flex; flex-direction: column; gap: var(--space-1); }
.bc-dong-tom { display: flex; justify-content: space-between; gap: var(--space-3); font: 400 13px/20px var(--font-sans); }
.bc-dong-tom span { color: var(--ink-muted); }
.bc-dong-tom b { text-align: right; overflow-wrap: anywhere; white-space: pre-wrap; font-weight: 600; }

/* Cột phải. */
.bc-ben { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }
.bc-ben textarea, .bc-ben select { width: 100%; }
.bc-danh-gia { border-style: dashed; }
.bc-sao { display: flex; gap: var(--space-1); }
.bc-sao-nut {
  border: 0; background: none; padding: 0 2px; cursor: pointer;
  font-size: 26px; line-height: 1; color: var(--border-strong);
}
.bc-sao-nut.on { color: var(--warning); }
.bc-sao-nut:hover:not(:disabled) { background: none; color: var(--warning); }
.callout.ok { border-left-color: var(--success); }
.bc-ds-thieu { margin: .4rem 0 0 1.1rem; text-align: left; }

/* Ngăn hồ sơ — trượt từ phải như prototype. */
.bc-ho-so-nen { justify-content: flex-end; align-items: stretch; padding: 0; }
.bc-ho-so {
  width: min(420px, 100vw); height: 100%; overflow-y: auto;
  background: var(--surface); box-shadow: var(--shadow-lg);
  padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-3);
}
.bc-ho-so input { width: 100%; }
.bc-kv { display: grid; grid-template-columns: auto 1fr; gap: var(--space-1) var(--space-3); margin: 0; font: 400 14px/22px var(--font-sans); }
.bc-kv dt { color: var(--ink-muted); }
.bc-kv dd { margin: 0; font-weight: 600; }

/* Thanh Gửi báo cáo GHIM ĐÁY màn chi tiết (duyệt mẫu 29/10/2026): máy tính dính đáy vùng cuộn
 * `.bc-cuon`, điện thoại dính đáy màn hình. Cuộn tới đâu cũng thấy nút gửi. */
.bc-thanh-gui {
  /* margin-top: auto: nội dung ngắn thì thanh vẫn nằm SÁT ĐÁY màn (`.bc-cuon` là flex dọc cao bằng khung),
   * không lơ lửng ngay dưới cột cuối (người dùng báo 30/10/2026). Nội dung dài thì sticky giữ nó ở đáy. */
  position: sticky; bottom: 0; z-index: 5; margin-top: auto;
  display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap;
  background: color-mix(in srgb, var(--surface) 94%, transparent); backdrop-filter: blur(6px);
  border: 1px solid var(--border); border-radius: var(--v-r-lon); box-shadow: var(--shadow-lg);
  padding: var(--space-3) var(--space-4);
}
.bc-thanh-gui.sua { border-color: var(--warning); }
.bc-thanh-gui.loi { border-color: var(--danger); }
.bc-thanh-gui .tien { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 220px; }
.bc-thanh-gui .tien b { font-size: 14px; }
.bc-thanh-loi { font-size: 13px; font-weight: 600; color: var(--danger); }
.bc-thanh-gui .nut { display: flex; gap: var(--space-2); }
.bc-thanh-gui .primary { min-width: 160px; }

/* Điện thoại: bỏ bớt đệm, thanh gửi bám đáy màn hình cho dễ bấm bằng ngón cái. */
@media (max-width: 640px) {
  .bc-dau-man { padding: var(--space-3); }
  .bc-the { padding: var(--space-3); }
  .bc-thanh-gui {
    position: fixed; left: 0; right: 0; bottom: 0; margin: 0; gap: var(--space-2);
    border-radius: 16px 16px 0 0; padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  }
  .bc-thanh-gui .tien { flex-basis: 100%; min-width: 0; }
  .bc-thanh-gui .tien .note { display: none; }
  .bc-thanh-gui .tien b { font-size: 13px; }
  .bc-thanh-gui .nut { flex: 1; }
  .bc-thanh-gui .nut button { flex: 1; }
  .bc-thanh-gui .primary { flex: 2; min-width: 0; }
  #tab-baocao .bc-cuon:has(> .bc-thanh-gui) { padding-bottom: 110px; }
}

/* ---------------------------------- Luồng trao đổi trên vướng mắc (duyệt mẫu 29/10/2026) --- */
.vm-av {
  width: 32px; height: 32px; border-radius: 50%; flex: none; display: grid; place-items: center;
  background: var(--surface-sunken); border: 1px solid var(--border);
  font: 600 12px/1 var(--font-sans); color: var(--ink-secondary);
}
.vm-luoi { display: grid; grid-template-columns: minmax(280px, 380px) minmax(0, 1fr); gap: var(--space-4); align-items: start; }
@media (max-width: 1000px) { .vm-luoi { grid-template-columns: minmax(0, 1fr); } }
.vm-ds { padding: 0; overflow: hidden; }
.vm-ds-dau { display: flex; gap: var(--space-2); flex-wrap: wrap; padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border); }
.vm-ds-cuon { max-height: 560px; overflow-y: auto; }
.vm-ds-trong { padding: var(--space-4); }
/* Mỗi vướng mắc là <button> ⇒ gỡ white-space: nowrap chung của nút (bài học 23/10/2026). */
.vm-muc {
  all: unset; box-sizing: border-box; width: 100%; cursor: pointer; white-space: normal;
  display: flex; gap: var(--space-3); align-items: flex-start;
  padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border);
}
.vm-muc:last-child { border-bottom: 0; }
.vm-muc:hover { background: var(--surface-sunken); }
.vm-muc:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.vm-muc.on { background: var(--brand-surface); box-shadow: inset 3px 0 0 var(--brand-red); }
.vm-muc .fill { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.vm-muc .ten { display: flex; gap: 6px; align-items: center; font-weight: 600; font-size: 14px; }
.vm-muc .trich { font-size: 13px; color: var(--ink-secondary); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.vm-muc .badge { align-self: flex-start; flex: none; }
.vm-cham { width: 8px; height: 8px; border-radius: 50%; background: var(--brand-red); flex: none; }
/* Vướng mắc theo từng việc (30/10/2026) */
.vm-viec { display: flex; gap: 6px; align-items: baseline; font: 600 12px/16px var(--font-sans); color: var(--ink-accent); overflow-wrap: anywhere; }
.vm-viec::before { content: "▸"; color: var(--ink-muted); flex: none; }
.vm-tag { display: inline-flex; gap: 4px; align-items: center; font: 600 11px/16px var(--font-sans); color: var(--brand-red); }
.vm-tag[hidden] { display: none; }
.bc-vm-viec { display: flex; flex-direction: column; gap: var(--space-2); border-top: 1px solid var(--border); padding-top: var(--space-3); }
.bc-vm-viec .goi-y { margin: 0; }
.bc-form .vm-viec-luong { margin-top: var(--space-2); }

.vm-luong { padding: 0; display: flex; flex-direction: column; overflow: hidden; gap: 0; }
.vm-luong-trong { padding: var(--space-5); }
.vm-luong-dau { display: flex; gap: var(--space-3); align-items: center; flex-wrap: wrap; padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border); }
.vm-luong-dau .fill { flex: 1; min-width: 0; }
.vm-tin-ds {
  display: flex; flex-direction: column; gap: var(--space-3);
  padding: var(--space-4); background: var(--surface-sunken); max-height: 420px; overflow-y: auto;
}
.vm-ben-luong .vm-tin-ds { max-height: 360px; }
.vm-goc { border: 1px solid var(--warning); background: var(--warning-surface); border-radius: var(--v-r-lon); padding: var(--space-3) var(--space-4); }
.vm-goc .nhan { font: 600 11px/16px var(--font-sans); text-transform: uppercase; letter-spacing: .04em; color: var(--ink-secondary); margin-bottom: 4px; }
.vm-tin { display: flex; gap: var(--space-2); max-width: 82%; }
.vm-tin.toi { align-self: flex-end; flex-direction: row-reverse; }
.vm-bong { background: var(--surface); border: 1px solid var(--border); border-radius: 14px 14px 14px 4px; padding: 8px 12px; min-width: 0; }
.vm-tin.toi .vm-bong { background: var(--brand-surface); border-color: color-mix(in srgb, var(--brand-red) 25%, transparent); border-radius: 14px 14px 4px 14px; }
.vm-bong .ai { font: 600 12px/18px var(--font-sans); color: var(--ink-secondary); }
.vm-bong .chu { font: 400 14px/21px var(--font-sans); white-space: pre-wrap; overflow-wrap: anywhere; }
.vm-bong .gio { font: 400 11px/16px var(--font-sans); color: var(--ink-muted); margin-top: 2px; }
.vm-he {
  align-self: center; max-width: 92%; display: flex; flex-direction: column; align-items: center; text-align: center;
  font: 400 12px/18px var(--font-sans); color: var(--ink-muted);
  background: var(--surface); border: 1px dashed var(--border); border-radius: var(--v-r-lon); padding: 2px 12px;
}
.vm-he.ok { color: var(--success); border-color: var(--success); }
.vm-he-chu { color: var(--ink-secondary); white-space: pre-wrap; overflow-wrap: anywhere; }
.vm-trong { align-self: center; font-size: 13px; color: var(--ink-muted); }
.vm-moi { display: flex; align-items: center; gap: 8px; font: 600 11px/1 var(--font-sans); color: var(--brand-red); text-transform: uppercase; letter-spacing: .04em; }
.vm-moi::before, .vm-moi::after { content: ''; flex: 1; border-top: 1px solid color-mix(in srgb, var(--brand-red) 40%, transparent); }
.vm-soan { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3) var(--space-4); border-top: 1px solid var(--border); }
.vm-soan textarea { width: 100%; resize: vertical; }
.vm-chk { display: inline-flex; gap: 6px; align-items: center; font-size: 13px; color: var(--ink-secondary); }
/* Tệp đính kèm trong trao đổi (30/10/2026) */
.vm-soan.keo { outline: 2px dashed var(--brand-red); outline-offset: -4px; background: var(--brand-surface); }
.vm-tep-cho { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.vm-tep-cho[hidden] { display: none; }
.vm-tep-chip { display: inline-flex; align-items: center; gap: 6px; max-width: 240px; padding: 3px 4px 3px 6px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface-sunken); font-size: 12px; }
.vm-tep-chip img { width: 28px; height: 28px; object-fit: cover; border-radius: 4px; }
.vm-tep-chip .ten { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.vm-tep-chip button.icon { padding: 0 6px; min-height: 0; line-height: 20px; }
.vm-tep-ds { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.vm-tep-anh { all: unset; cursor: zoom-in; display: block; border-radius: var(--radius-md); overflow: hidden; border: 1px solid var(--border); background: var(--surface-sunken); }
.vm-tep-anh:focus-visible { outline: 2px solid var(--brand-red); outline-offset: 2px; }
.vm-tep-anh img { display: block; max-width: 220px; max-height: 160px; min-width: 48px; min-height: 48px; object-fit: contain; }
.vm-tep-file { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; white-space: normal; text-align: left; font-size: 13px; padding: 4px 10px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); color: var(--ink); cursor: pointer; }
.vm-tep-file .ten { overflow-wrap: anywhere; font-weight: 600; }
.vm-anh-lon figure { margin: 0; max-width: min(1100px, 94vw); display: flex; flex-direction: column; gap: var(--space-2); }
.vm-anh-lon img { max-width: 100%; max-height: 80vh; object-fit: contain; border-radius: var(--radius-md); background: var(--surface); }
.vm-anh-lon figcaption { display: flex; gap: var(--space-2); align-items: center; color: var(--on-brand-red); font-size: 13px; }
.vm-anh-lon figcaption button { background: var(--surface); color: var(--ink); }
.tq-vm { gap: var(--space-3); }
@media (max-width: 640px) {
  .vm-tin { max-width: 94%; }
  .vm-tin-ds, .vm-ben-luong .vm-tin-ds { max-height: none; }
}

/* ------------------------------------------ Báo cáo ngày · lịch tháng (27/10/2026) --- */
/* Mở tab là vào lịch; bấm ngày mới vào chi tiết. Ô ngày bấm được là <button> nên phải gỡ
 * white-space: nowrap chung của nút (bài học Nhóm của tôi 23/10/2026). */
.bc-ve-lich { align-self: flex-start; }
.lt-wrap { display: flex; flex-direction: column; gap: var(--space-4); padding-bottom: var(--space-5); }
.lt-dau {
  display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--v-r-lon); box-shadow: var(--shadow-sm); padding: var(--space-3) var(--space-4);
}
.lt-dau h3 { margin: 0; font: 600 16px/24px var(--font-sans); }
.lt-thang { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.lt-thang .ten { font-weight: 700; min-width: 116px; text-align: center; white-space: nowrap; }
.lt-the { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-3); }
.lt-so { background: var(--surface); border: 1px solid var(--border); border-radius: var(--v-r-lon); padding: var(--space-3) var(--space-4); }
.lt-so b { display: block; font: 700 24px/1.2 var(--font-sans); }
.lt-so span { color: var(--ink-muted); font-size: 13px; }
.lt-so.ok b { color: var(--success); }
.lt-so.warn b { color: var(--warning); }
.lt-so.bad b { color: var(--danger); }
.lt-lich { background: var(--surface); border: 1px solid var(--border); border-radius: var(--v-r-lon); overflow: hidden; box-shadow: var(--shadow-sm); transition: opacity var(--v-nhanh); }
.lt-lich.dang-tai { opacity: .55; }
.lt-thu, .lt-luoi { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.lt-thu div {
  padding: var(--space-2) var(--space-3); background: var(--surface-sunken); border-bottom: 1px solid var(--border);
  font: 600 11px/18px var(--font-sans); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-muted);
}
.lt-thu .ngan { display: none; }
.lt-o {
  all: unset; box-sizing: border-box; min-height: 104px; padding: var(--space-2) var(--space-3);
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
  border-right: 1px solid var(--border); border-bottom: 1px solid var(--border);
  white-space: normal; text-align: left; color: var(--ink); font: 400 14px/20px var(--font-sans);
}
.lt-luoi > .lt-o:nth-child(7n) { border-right: 0; }
button.lt-o { cursor: pointer; transition: background var(--v-nhanh); }
button.lt-o:hover { background: var(--surface-sunken); }
button.lt-o:focus-visible { outline: 2px solid var(--brand-red); outline-offset: -2px; }
.lt-o .n { display: flex; align-items: center; gap: 6px; font-weight: 700; }
.lt-o.ngoai { background: var(--surface-sunken); }
.lt-o.ngoai .n, .lt-o.tuonglai .n, .lt-o.nghi .n { color: var(--ink-muted); }
.lt-o.ngoai .n { font-weight: 400; }
.lt-o.homnay { box-shadow: inset 0 0 0 2px var(--brand-red); background: color-mix(in srgb, var(--brand-surface) 45%, var(--surface)); }
.lt-homnay { font-size: 11px; font-weight: 600; color: var(--ink-accent); }
.lt-tt {
  font: 600 12px/18px var(--font-sans); padding: 1px 10px; border-radius: var(--radius-pill);
  border: 1px solid var(--border); color: var(--ink-muted); white-space: nowrap;
}
.lt-tt.ok { color: var(--success); background: var(--success-surface); border-color: color-mix(in srgb, var(--success) 30%, transparent); }
.lt-tt.tre { color: var(--warning); background: var(--warning-surface); border-color: color-mix(in srgb, var(--warning) 30%, transparent); }
.lt-tt.chua { color: var(--danger); background: var(--danger-surface); border-color: color-mix(in srgb, var(--danger) 30%, transparent); }
.lt-tt.nhap { color: var(--info); background: var(--info-surface); border-color: color-mix(in srgb, var(--info) 30%, transparent); }
.lt-tt.cho { color: var(--ink-secondary); border-color: var(--border-strong); }
.lt-phu { font-size: 12px; line-height: 1.35; color: var(--ink-muted); }
.lt-vm { font-size: 12px; font-weight: 600; color: var(--warning); }
.lt-tin { font-size: 12px; font-weight: 600; color: var(--brand-red); }
.lt-tin-bao { display: flex; gap: var(--space-3); align-items: center; flex-wrap: wrap; }
.lt-tin-bao .fill { flex: 1; min-width: 220px; }
.lt-cham { display: none; width: 9px; height: 9px; border-radius: 50%; flex: none; }
.lt-cham.ok { background: var(--success); }
.lt-cham.tre { background: var(--warning); }
.lt-cham.chua { background: var(--danger); }
.lt-cham.nhap { background: var(--info); }
.lt-cham.cho { background: transparent; box-shadow: inset 0 0 0 1.5px var(--border-strong); }
.lt-chu { display: flex; align-items: center; gap: var(--space-2) var(--space-4); flex-wrap: wrap; font-size: 13px; color: var(--ink-secondary); }
.lt-lai { display: inline-flex; align-items: center; gap: 6px; }
.lt-chu .goi { margin-left: auto; color: var(--ink-muted); }

/* Điện thoại: ô ngày chỉ còn số + chấm màu, chú thích đổi sang chấm cho khớp. */
@media (max-width: 700px) {
  .lt-the { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lt-thang { width: 100%; }
  .lt-thang .ten { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .lt-thang .primary { flex: 1 0 100%; }
  .lt-thang .dai, .lt-thu .dai { display: none; }
  .lt-thu .ngan { display: inline; }
  .lt-thu div { padding: var(--space-2) 2px; text-align: center; }
  .lt-o { min-height: 56px; padding: 6px 2px; align-items: center; gap: 4px; }
  .lt-o .lt-tt, .lt-phu, .lt-vm, .lt-homnay { display: none; }
  .lt-tin .dai { display: none; }               /* điện thoại: ô ngày chỉ còn biểu tượng 💬 */
  .lt-cham { display: block; }
  .lt-chu .goi { margin-left: 0; width: 100%; }
}

/* ----------------------------------------- Báo cáo ngày · giai đoạn 2–4 (23/10/2026) --- */

.bc-the.phang { box-shadow: none; background: var(--surface-sunken); }
.bc-dong-tom.doc { flex-direction: column; gap: 2px; }

/* Ảnh hiện trường: lưới ảnh thu nhỏ, dấu giờ + toạ độ ngay dưới ảnh. */
.bc-anh-luoi { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: var(--space-2); }
.bc-anh { position: relative; margin: 0; display: flex; flex-direction: column; gap: 2px; }
.bc-anh img {
  width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: var(--v-r);
  background: var(--surface-sunken); border: 1px solid var(--border);
}
.bc-anh figcaption { font: 400 11px/15px var(--font-sans); color: var(--ink-muted); overflow-wrap: anywhere; }
.bc-anh-xoa { position: absolute; top: 4px; right: 4px; }
.bc-chup { align-self: flex-start; }

/* Khung chụp: phủ kín màn hình điện thoại. brand-black / on-brand-red không đổi theo theme. */
.bc-cam {
  position: fixed; inset: 0; z-index: 120; display: flex; flex-direction: column;
  background: var(--brand-black); color: var(--on-brand-red);
}
.bc-cam video { flex: 1; min-height: 0; width: 100%; object-fit: cover; }
.bc-cam-tren, .bc-cam-duoi { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); }
.bc-cam-tren { font: 600 13px/18px var(--font-sans); }
.bc-cam-duoi { justify-content: space-between; }
.bc-cam-duoi .note { color: inherit; opacity: .75; }
.bc-cam-chup {
  width: 68px; height: 68px; border-radius: 50%; padding: 0;
  border: 4px solid var(--on-brand-red); background: color-mix(in srgb, var(--on-brand-red) 25%, transparent);
}
.bc-cam-chup:active { background: var(--on-brand-red); }

/* Nhóm của tôi: danh sách người (trái) + chi tiết (phải). */
.nh-than { display: flex; flex-direction: column; gap: var(--space-3); }
.nh-luoi { display: grid; grid-template-columns: minmax(260px, 340px) minmax(0, 1fr); gap: var(--space-4); align-items: start; }
@media (max-width: 1000px) { .nh-luoi { grid-template-columns: minmax(0, 1fr); } }
.nh-dem { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
.nh-dem > div { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); padding: var(--space-2); border-radius: var(--v-r); background: var(--surface-sunken); }
.nh-dem b { font: 700 18px/24px var(--font-sans); font-variant-numeric: tabular-nums; }
.nh-ds { display: flex; flex-direction: column; gap: var(--space-1); }
.nh-nguoi {
  display: flex; align-items: center; gap: var(--space-2); width: 100%; text-align: left;
  background: none; border: 1px solid transparent; border-radius: var(--v-r); padding: var(--space-2);
}
.nh-nguoi:hover { background: var(--surface-sunken); }
.nh-nguoi.on { background: var(--brand-surface); border-color: color-mix(in srgb, var(--ink-accent) 30%, transparent); }
/* 🔴 `button` toàn app đặt `white-space: nowrap` ⇒ tên dài tràn đè lên huy hiệu bên phải (gặp thật
   23/10/2026, 14/22 dòng). Cột chữ co được (`min-width: 0`), mỗi dòng tự cắt "…", tên đầy đủ ở
   `title`; huy hiệu không bao giờ co. */
.nh-nguoi .fill { flex: 1; min-width: 0; display: flex; flex-direction: column; overflow: hidden; }
.nh-nguoi .fill > * { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nh-nguoi > .badge, .nh-nguoi > .bc-ava { flex: none; }
/* Tên thì XUỐNG DÒNG chứ không cắt: hậu tố "(V365-AI Engineer)" là thông tin, cắt mất thì mất
   chức danh (đo ở cột 340px: 14/22 tên bị cắt). Email vẫn cắt "…". */
.nh-nguoi .fill > .nh-ten, .nh-nguoi .fill > b { white-space: normal; overflow-wrap: anywhere; }
.nh-ten { font-weight: 600; }
/* Nhóm của quản lý cấp trung nào (cả cây, 27/10/2026) — chữ nhỏ, khác màu email. */
.nh-nguoi .fill > .nh-nhanh { color: var(--ink-accent); font-size: 12px; }
a.btn { display: inline-flex; align-items: center; gap: var(--space-1); text-decoration: none; align-self: flex-start; }
.nh-ct { display: flex; flex-direction: column; gap: var(--space-3); }
.nh-hai-cot { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
@media (max-width: 640px) { .nh-hai-cot { grid-template-columns: minmax(0, 1fr); } }
.nh-bang { max-height: none; }
/* Báo cáo của nhóm: danh sách người CUỘN RIÊNG — cuộn chung với chi tiết thì xem người cuối danh sách là mất
   luôn chi tiết (người dùng báo 26/10/2026). Màn rộng: hai cột cao bằng khung, mỗi cột tự cuộn, phần đếm + nút
   nhắc đứng yên. Màn hẹp (xếp một cột): danh sách giới hạn chiều cao để chi tiết vẫn ở ngay bên dưới. */
@media (min-width: 1001px) {
  .bc-cuon:has(> .nh-than > .nh-bc) { overflow: hidden; }
  .bc-cuon:has(> .nh-than > .nh-bc) > .nh-than { flex: 1; min-height: 0; }
  .nh-bc { flex: 1; min-height: 0; align-items: stretch; }
  .nh-bc > .bc-the { min-height: 0; overflow: hidden; }
  .nh-bc > .nh-chi-tiet { overflow-y: auto; }
  .nh-bc .nh-ds { flex: 1; min-height: 0; overflow-y: auto; margin: 0 calc(-1 * var(--space-2)); padding: 0 var(--space-2); }
}
@media (max-width: 1000px) {
  .nh-bc .nh-ds { max-height: 45vh; overflow-y: auto; }
}
/* Vướng mắc của nhóm: hai khung (danh sách · luồng trao đổi) KÉO HẾT chiều cao màn, mỗi khung tự cuộn — trước đây
   bị trần 560 / 420px, phía dưới để trống (người dùng báo 30/10/2026). Cùng cách "Báo cáo của nhóm" ở trên. Màn hẹp
   giữ như cũ (xếp một cột, trần chiều cao). Chỉ áp cho Nhóm của tôi (`.nh-than > .vm-luoi`), Tổng quan không đổi. */
@media (min-width: 1001px) {
  .bc-cuon:has(> .nh-than > .vm-luoi) { overflow: hidden; }
  .bc-cuon:has(> .nh-than > .vm-luoi) > .nh-than { flex: 1; min-height: 0; }
  .nh-than > .vm-luoi { flex: 1; min-height: 0; align-items: stretch; grid-template-rows: minmax(0, 1fr); }
  .nh-than > .vm-luoi > .vm-ds { display: flex; flex-direction: column; min-height: 0; }
  .nh-than > .vm-luoi .vm-ds-cuon { flex: 1; min-height: 0; max-height: none; }
  .nh-than > .vm-luoi > .vm-luong { min-height: 0; }
  .nh-than > .vm-luoi > .vm-luong .vm-tin-ds { flex: 1; min-height: 0; max-height: none; }
}

/* Tổng quan: thẻ số + hai cột biểu đồ. Một chuỗi số ⇒ một màu (--info), không chú giải. */
.tq-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-3); }
.tq-kpi {
  display: flex; flex-direction: column; gap: 2px; padding: var(--space-3) var(--space-4);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--v-r-lon); box-shadow: var(--shadow-sm);
}
.tq-kpi b { font: 700 28px/34px var(--font-sans); font-variant-numeric: tabular-nums; color: var(--ink); }
.tq-hai { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); align-items: start; }
@media (max-width: 1000px) { .tq-hai { grid-template-columns: minmax(0, 1fr); } }
.tq-thanh-ds { display: flex; flex-direction: column; gap: var(--space-2); }
.tq-thanh { display: grid; grid-template-columns: minmax(90px, 160px) minmax(0, 1fr) 48px; align-items: center; gap: var(--space-2); }
.tq-thanh-ten { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 400 13px/18px var(--font-sans); }
.tq-thanh b { text-align: right; font-variant-numeric: tabular-nums; }
.tq-ray { height: 10px; border-radius: var(--radius-pill); background: var(--surface-sunken); overflow: hidden; }
.tq-ray > i { display: block; height: 100%; background: var(--info); border-radius: 0 4px 4px 0; }
.tq-thanh.chon .tq-thanh-ten { font-weight: 700; }
.tq-bieu-do { position: relative; }
.tq-svg { width: 100%; height: auto; display: block; }
.tq-luoi { stroke: var(--border); stroke-width: 1; }
.tq-truc { fill: var(--ink-muted); font: 400 11px var(--font-sans); }
.tq-duong { fill: none; stroke: var(--info); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.tq-vung { fill: color-mix(in srgb, var(--info) 12%, transparent); stroke: none; }
.tq-cham { fill: var(--info); stroke: var(--surface); stroke-width: 2; }
.tq-dong { stroke: var(--border-strong); stroke-width: 1; stroke-dasharray: 3 3; }
.tq-tip {
  position: absolute; pointer-events: none; padding: 4px 8px; border-radius: var(--v-r);
  background: var(--surface-inverse); color: var(--ink-inverse); font: 400 12px/18px var(--font-sans); white-space: nowrap;
}
th.num, td.num { text-align: right; font-variant-numeric: tabular-nums; }

/* Cấu hình form: danh sách form · sửa form · quy tắc. */
.ch-luoi { display: grid; grid-template-columns: minmax(220px, 280px) minmax(0, 1fr) minmax(260px, 340px); gap: var(--space-4); align-items: start; }
@media (max-width: 1100px) { .ch-luoi { grid-template-columns: minmax(0, 1fr); } }
.ch-truong {
  display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap;
  padding: var(--space-2) var(--space-3); border: 1px solid var(--border); border-radius: var(--v-r);
}
.ch-truong .fill { flex: 1 1 180px; min-width: 0; }
.ch-truong.co-dinh { background: var(--surface-sunken); border-style: dashed; }


/* ================================================= bề rộng VÙNG NỘI DUNG (VBIM) ==
 * Mốc 1000px của khối V365 tính theo CỬA SỔ, mà VBIM có sidebar 262px (kéo rộng được) ⇒ cửa sổ 1100px
 * thì ba cột chỉ còn ~800px, cột giữa bị bóp còn một chữ mỗi dòng. Xếp lại theo bề rộng thật của pane. */
#tab-baocao, #tab-nhom, #tab-tongquan, #tab-cauhinh { container-type: inline-size; }
@container (max-width: 940px) {
  .bc-luoi3, .nh-luoi, .vm-luoi, .tq-hai, .ch-luoi { grid-template-columns: minmax(0, 1fr); }
}

/* Chế độ chỉ Báo cáo ngày (người không có role adminQS): sidebar không còn khối plan / dự án nào,
 * chỉ giữ dải logo hẹp cho khỏi chiếm chỗ. */
@media (min-width: 981px) {
  body.che-do-bao-cao .app { grid-template-columns: 190px 1fr; }
  body.che-do-bao-cao .sidebar-keo { display: none; }
}

/* ============================================================ ĐIỆN THOẠI (VBIM) ==
 * Giống pm.v365.vn (người dùng chốt 31/10/2026 "responsive luôn giao diện mobile như vậy"):
 *  · ≤ 980px: bỏ 4 tab giao việc / KPI và khối chọn plan + dự án — điện thoại chỉ từ Báo cáo ngày trở đi
 *    (app.js → anTabPm đẩy về Báo cáo ngày nếu có đường nào gọi tới các tab đó);
 *  · sidebar thành dải logo trên cùng, ảnh đại diện góc phải bấm sổ menu tài khoản;
 *  · thanh tab cuộn ngang, không xuống dòng.
 * Khối báo cáo bên trên đã tự xếp một cột ở ≤ 1000px và ghim thanh Gửi đáy màn ở ≤ 640px. */
@media (max-width: 980px) {
  .app { grid-template-columns: 1fr; height: auto; min-height: 100vh; }
  .sidebar { height: auto; padding: 10px 12px; gap: 8px; }
  .sidebar-keo { display: none; }
  .main { overflow: visible; }
  .pane { overflow: visible; padding: var(--space-3); }

  .tabs .tab[data-tab="assign"], .tabs .tab[data-tab="manage"],
  .tabs .tab[data-tab="summary"], .tabs .tab[data-tab="kpi"],
  .side-du-an, .ctx { display: none !important; }
  .tabs { padding: 0 var(--space-1); overflow-x: auto; scrollbar-width: none; }
  .tabs::-webkit-scrollbar { display: none; }
  .tab { flex: none; white-space: nowrap; padding-left: 10px; padding-right: 10px; font-size: 14px; }

  .brand { flex-direction: row; align-items: center; gap: 10px; padding: 0 52px 0 0; min-height: 40px; }
  .brand .logo { height: 28px; }
  .tk-cho { display: none; }
  .brand .tk-nut { display: inline-flex; position: absolute; top: 50%; right: 0; transform: translateY(-50%); padding: 2px; }
  .brand .tk-nut .bc-ava { width: 36px; height: 36px; font-size: 13px; }
  .brand .tk-ten { display: none; }

  .toast { left: 12px; right: 12px; bottom: 12px; max-width: none; }
  input, select, textarea { font-size: 16px; }   /* iOS không tự phóng to khi chạm ô nhập */
}