/* ===== PCG — Giao diện điện thoại chuyên biệt cho nhân sự (v3.9) ==============
   Điện thoại ≤600px: KHÔNG dùng lại bố cục để-bàn. Thay bằng một ứng dụng riêng
   #mbApp (thanh trên · màn cuộn · thanh dưới 5 mục) do js/ui-mobile.js dựng, đọc
   thẳng dữ liệu S và gọi ĐÚNG các hàm nghiệp vụ của bản web (không tách luồng lưu).
   Máy tính bảng 601–1024px và để-bàn >1024px: giữ nguyên bản web.
   Hai theme: Đỏ (sáng) · Professional (tối). Biến màu khai theo từng theme bên dưới. */

/* ---------- Ẩn khung để-bàn khi bật ứng dụng điện thoại ---------- */
body.mb-app > header,
body.mb-app > nav,
body.mb-app > main,
body.mb-app > footer { display: none !important; }
body.mb-app { overflow: hidden; }
/* Nút ☰ để-bàn (drawer cũ) không dùng ở bản điện thoại mới — ẩn hẳn để không lộ trên để-bàn */
#mbToggle { display: none !important; }
/* Con trỏ khi bấm (rõ trên trackpad/CDP; trên cảm ứng vô hại) */
#mbApp .mb-bnav a, #mbApp .mb-chip, #mbApp .mb-card, #mbApp .mb-acc-btn,
#mbApp .mb-person, #mbApp .mb-datechips .d, #mbApp .mb-tabs .t,
#mbApp .mb-co-actions .a, #mbApp .mb-row-link, #mbApp .mb-theme-opt,
#mbApp .mb-bigbtn, #mbApp .mb-cta, #mbApp .mb-prog .p, #mbApp .mb-chg,
#mbApp .mb-ctxrow .chg, #mbApp .mb-bell, #mbApp .mb-back { cursor: pointer; }

/* ---------- Bảng màu theo theme (mặc định = Đỏ / sáng) ---------- */
#mbApp {
  --mbg: #eef1f6; --mbg-grad: #eef1f6;
  --msurf: #ffffff; --msurf2: #f5f8fc; --mbd: #e6e8eb;
  --mink: #1f2937; --msub: #6b7280;
  --mbrand: #EC1F27; --mbrand2: #b3141b; --mon: #ffffff;
  --mok: #16a34a; --mwarn: #d98a00; --mred: #dc2626;
  --mtrack: #e6e9ef; --mglow: rgba(236,31,39,.28);
  --mline: rgba(0,0,0,.06);
  --mtag-red: rgba(220,38,38,.12); --mtag-red-t: #b91c1c;
  --mtag-amber: rgba(217,138,0,.14); --mtag-amber-t: #9a6a00;
  --mtag-green: rgba(22,163,74,.13); --mtag-green-t: #157a3a;
  --mtag-grey: rgba(100,116,139,.12); --mtag-grey-t: #475569;
  --mtag-blue: rgba(37,99,235,.12); --mtag-blue-t: #1d4ed8;
}
/* ---------- Professional (navy) → tối ---------- */
html[data-theme="navy"] #mbApp {
  --mbg: #0b1322;
  --mbg-grad: radial-gradient(120% 55% at 50% -8%, #1a2b4e 0%, #0b1322 46%);
  --msurf: #141f38; --msurf2: #1b2846; --mbd: #2a3b5c;
  --mink: #eaf1fb; --msub: #93a6c6;
  --mbrand: #4f9cff; --mbrand2: #1e40af; --mon: #ffffff;
  --mok: #22c55e; --mwarn: #f59e0b; --mred: #ef4444;
  --mtrack: #24324e; --mglow: rgba(59,130,246,.5);
  --mline: rgba(255,255,255,.05);
  --mtag-red: rgba(239,68,68,.16); --mtag-red-t: #fca5a5;
  --mtag-amber: rgba(245,158,11,.16); --mtag-amber-t: #fcd34d;
  --mtag-green: rgba(34,197,94,.16); --mtag-green-t: #6ee7b7;
  --mtag-grey: rgba(148,163,184,.14); --mtag-grey-t: #c7d2e2;
  --mtag-blue: rgba(79,156,255,.18); --mtag-blue-t: #bcd8ff;
}

/* ---------- Khung ứng dụng ---------- */
#mbApp {
  display: none; position: fixed; inset: 0; z-index: 900;
  flex-direction: column; background: var(--mbg-grad); color: var(--mink);
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
body.mb-app #mbApp { display: flex; }
#mbApp * { box-sizing: border-box; }
#mbApp button { font-family: inherit; cursor: pointer; }

/* Thanh trên */
.mb-appbar {
  display: flex; align-items: center; gap: 10px; padding: 12px 14px 11px;
  background: color-mix(in srgb, var(--mbg) 82%, transparent);
  backdrop-filter: blur(8px); border-bottom: 1px solid var(--mbd); flex: 0 0 auto;
}
.mb-appbar .mb-ham, .mb-appbar .mb-back {
  width: 44px; height: 44px; flex: 0 0 auto; border: 1px solid var(--mbd); /* v3.46 (B7) 38→44px: đủ vùng chạm */
  border-radius: 10px; display: flex; align-items: center; justify-content: center;
  font-size: 18px; color: var(--mbrand); background: var(--msurf);
}
.mb-appbar .mb-tt { font-size: 18px; font-weight: 800; line-height: 1.15; letter-spacing: .2px; }
.mb-appbar .mb-sub { font-size: 12px; color: var(--msub); font-weight: 500; margin-top: 2px; }
.mb-appbar .mb-bell {
  margin-left: auto; width: 44px; height: 44px; flex: 0 0 auto; border-radius: 10px; /* v3.46 (B7) 38→44px */
  display: flex; align-items: center; justify-content: center; font-size: 18px;
  position: relative; background: var(--msurf); border: 1px solid var(--mbd);
}
.mb-dot {
  position: absolute; top: -5px; right: -5px; background: var(--mred); color: #fff;
  font-size: 12px; font-weight: 800; min-width: 18px; height: 18px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center; padding: 0 4px;
  border: 2px solid var(--mbg);
}

/* Màn cuộn */
.mb-screen { flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 12px 14px 88px; }

/* Thanh dưới 5 mục */
.mb-bnav {
  position: absolute; left: 0; right: 0; bottom: 0; height: 64px; flex: 0 0 auto;
  background: color-mix(in srgb, var(--mbg) 92%, transparent);
  backdrop-filter: blur(10px); border-top: 1px solid var(--mbd);
  display: flex; padding-bottom: max(4px, env(safe-area-inset-bottom));
}
.mb-bnav a {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; font-size: 12px; font-weight: 700; color: var(--msub); text-decoration: none;
}
.mb-bnav a .ic { font-size: 21px; line-height: 1; }
.mb-bnav a.on { color: var(--mbrand); }
.mb-bnav a.plus { color: var(--mbrand); }
.mb-bnav a.plus .ic {
  background: linear-gradient(135deg, var(--mbrand), var(--mbrand2)); color: var(--mon);
  width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center;
  justify-content: center; margin-top: -14px; box-shadow: 0 4px 16px var(--mglow); font-size: 25px;
}

/* Nhãn mục / tiêu đề nhỏ */
.mb-sec-t { font-size: 12.5px; font-weight: 800; color: var(--msub); margin: 16px 2px 10px; }
.mb-sec-t .formula { display: block; font-weight: 600; color: var(--msub); font-size: 12px; margin-top: 3px; }
.mb-note { text-align: center; font-size: 12px; color: var(--msub); margin-top: 14px; }
.mb-empty { text-align: center; color: var(--msub); font-size: 14px; padding: 40px 16px; }

/* ---------- Thẻ việc ---------- */
.mb-chips { display: flex; gap: 8px; overflow-x: auto; padding: 2px 0 12px; -webkit-overflow-scrolling: touch; }
.mb-chip {
  flex: 0 0 auto; padding: 8px 14px; border-radius: 20px; background: var(--msurf);
  border: 1px solid var(--mbd); font-size: 13px; font-weight: 700; color: var(--msub);
}
.mb-chip.on { background: linear-gradient(135deg, var(--mbrand), var(--mbrand2)); color: var(--mon); border-color: transparent; box-shadow: 0 4px 14px var(--mglow); }
.mb-card {
  background: var(--msurf); border: 1px solid var(--mbd); border-radius: 16px; padding: 14px;
  margin-bottom: 12px; box-shadow: 0 2px 10px rgba(0,0,0,.06); position: relative;
}
html[data-theme="navy"] .mb-card { box-shadow: 0 2px 10px rgba(0,0,0,.35); }
.mb-card.lft-red { border-left: 5px solid var(--mred); }
.mb-card.lft-amber { border-left: 5px solid var(--mwarn); }
.mb-card.lft-green { border-left: 5px solid var(--mok); }
.mb-tk-title { font-size: 15.5px; font-weight: 800; line-height: 1.3; color: var(--mink); }
.mb-tk-meta { font-size: 12px; color: var(--msub); margin-top: 4px; }
.mb-tk-bot { display: flex; align-items: center; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.mb-pill { font-size: 12px; font-weight: 800; padding: 5px 10px; border-radius: 12px; display: inline-flex; align-items: center; gap: 5px; }
.mb-pill.red { background: var(--mtag-red); color: var(--mtag-red-t); }
.mb-pill.amber { background: var(--mtag-amber); color: var(--mtag-amber-t); }
.mb-pill.green { background: var(--mtag-green); color: var(--mtag-green-t); }
.mb-pill.grey { background: var(--mtag-grey); color: var(--mtag-grey-t); }
.mb-ring { margin-left: auto; position: relative; width: 46px; height: 46px; flex: 0 0 auto; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; }
.mb-ring::before { content: ''; position: absolute; inset: 5px; border-radius: 50%; background: var(--msurf); }
.mb-ring.full::before { display: none; }
.mb-ring span { position: relative; z-index: 1; }

/* ---------- Chi tiết việc ---------- */
.mb-prog { display: flex; gap: 8px; }
.mb-prog .p { flex: 1; text-align: center; padding: 12px 0; border-radius: 12px; border: 2px solid var(--mbd); font-weight: 800; font-size: 14px; color: var(--msub); background: var(--msurf); }
.mb-prog .p.on { border-color: var(--mok); background: linear-gradient(135deg, #16a34a, #0f7a38); color: #fff; box-shadow: 0 4px 12px rgba(22,163,74,.35); }
.mb-sug { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 10px; }
.mb-sug .s { padding: 9px 13px; border-radius: 20px; background: var(--msurf2); border: 1px solid var(--mbd); font-size: 13px; font-weight: 700; color: var(--mink); }
.mb-sug .s.pick { background: var(--mtag-blue); border-color: var(--mbrand); color: var(--mtag-blue-t); }
.mb-ta { width: 100%; border: 1px solid var(--mbd); border-radius: 12px; padding: 12px; font-size: 16px; min-height: 74px; background: var(--msurf2); color: var(--mink); line-height: 1.4; font-family: inherit; }
.mb-bigbtn { display: flex; align-items: center; gap: 12px; width: 100%; padding: 15px 16px; border-radius: 14px; border: 1px solid var(--mbd); background: var(--msurf2); font-size: 15.5px; font-weight: 800; margin-bottom: 11px; color: var(--mink); text-align: left; }
.mb-bigbtn .ic { font-size: 20px; }
.mb-bigbtn.done { background: linear-gradient(135deg, #16a34a, #0f7a38); color: #fff; border-color: transparent; box-shadow: 0 5px 16px rgba(22,163,74,.3); }
.mb-bigbtn.yk { background: var(--mtag-amber); border-color: color-mix(in srgb, var(--mwarn) 45%, transparent); color: var(--mtag-amber-t); }
.mb-bigbtn.ph { background: var(--mtag-blue); border-color: color-mix(in srgb, var(--mbrand) 45%, transparent); color: var(--mtag-blue-t); }

/* ---------- Thêm việc / biểu mẫu ---------- */
.mb-field { margin-bottom: 18px; }
.mb-field .lb { font-size: 14px; font-weight: 800; margin-bottom: 4px; color: var(--mink); }
.mb-field .hint { font-size: 12px; color: var(--msub); margin-bottom: 9px; }
/* C6 — lỗi CHỮ ĐỎ / cảnh báo vàng / viền đỏ ô trên điện thoại (dùng chung kiemForm) */
.mb-field .fv-err { color: #d92d20; font-size: 13px; font-weight: 700; margin-top: 6px; line-height: 1.35; }
.mb-field .fv-err:empty { display: none; }
.mb-field .fv-warn { color: #8a5a00; background: #fffbe6; border: 1px solid #f4e2b8; border-radius: 8px; padding: 6px 10px; font-size: 12.5px; font-weight: 600; margin-top: 6px; }
.mb-inp.fv-bad, .mb-ta.fv-bad { border-color: #d92d20 !important; }
.mb-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mb-inp { width: 100%; border: 1.5px solid var(--mbd); border-radius: 12px; padding: 14px; font-size: 16px; background: var(--msurf2); color: var(--mink); font-family: inherit; }
.mb-inp.big { font-size: 17px; font-weight: 600; }
.mb-people { display: flex; flex-wrap: wrap; gap: 9px; }
.mb-person { display: flex; align-items: center; gap: 8px; padding: 9px 13px 9px 9px; border-radius: 24px; border: 1.5px solid var(--mbd); background: var(--msurf); font-size: 14px; font-weight: 700; color: var(--mink); }
.mb-person .av { width: 28px; height: 28px; border-radius: 50%; background: color-mix(in srgb, var(--mbrand) 22%, var(--msurf2)); color: var(--mbrand); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; }
.mb-person.on { border-color: var(--mbrand); background: var(--mtag-blue); color: var(--mtag-blue-t); }
.mb-person.on .av { background: linear-gradient(135deg, var(--mbrand), var(--mbrand2)); color: var(--mon); }
.mb-datechips { display: flex; gap: 9px; flex-wrap: wrap; }
.mb-datechips .d { flex: 1; min-width: 68px; text-align: center; padding: 13px 6px; border-radius: 12px; border: 1.5px solid var(--mbd); font-weight: 800; font-size: 13px; background: var(--msurf); color: var(--msub); }
.mb-datechips .d.on { border-color: var(--mbrand); background: var(--mtag-blue); color: var(--mtag-blue-t); }
.mb-ctxrow { display: flex; align-items: center; gap: 8px; background: var(--msurf2); border: 1px solid var(--mbd); border-radius: 12px; padding: 12px; font-size: 13px; color: var(--msub); font-weight: 600; margin-top: 10px; }
.mb-ctxrow b { color: var(--mink); }
.mb-ctxrow .chg { margin-left: auto; color: var(--mbrand); font-weight: 800; }
.mb-cta { width: 100%; padding: 16px; border-radius: 14px; background: linear-gradient(135deg, var(--mbrand), var(--mbrand2)); color: var(--mon); font-size: 17px; font-weight: 800; border: none; box-shadow: 0 8px 22px var(--mglow); }
.mb-cta[disabled] { opacity: .5; box-shadow: none; }
.mb-cta.ghost { background: var(--msurf2); color: var(--mink); border: 1.5px solid var(--mbd); box-shadow: none; font-weight: 700; }
/* Quản lý (Ban TGĐ): hàng bộ lọc Dự án × Khối + tiêu đề nhóm khối */
.mb-qlbar { display: flex; gap: 8px; margin-bottom: 12px; }
.mb-qlbar .mb-inp { flex: 1; min-width: 0; padding: 12px 10px; font-size: 14.5px; border-radius: 11px; }
.mb-ql-khoi { font-weight: 800; font-size: 12.5px; letter-spacing: .03em; text-transform: uppercase; color: var(--msub); margin: 16px 2px 9px; padding-bottom: 6px; border-bottom: 1px solid var(--mbd); }

/* ---------- 🔔 Trung tâm thông báo (điện thoại) ---------- */
.mb-tbhead { display: flex; align-items: center; justify-content: space-between; margin: 2px 2px 12px; font-size: 12.5px; font-weight: 700; color: var(--msub); }
.mb-tbread { background: var(--msurf2); color: var(--mbrand); border: 1px solid var(--mbd); border-radius: 999px; padding: 6px 12px; font-size: 12.5px; font-weight: 700; cursor: pointer; }
.mb-tbempty { text-align: center; color: var(--msub); padding: 40px 12px; font-size: 14px; }
.mb-tbitem { display: flex; gap: 11px; align-items: flex-start; background: var(--msurf); border: 1px solid var(--mbd); border-radius: 13px; padding: 12px 13px; margin-bottom: 9px; cursor: pointer; }
.mb-tbitem.moi { background: color-mix(in srgb, var(--mbrand) 9%, var(--msurf)); border-color: color-mix(in srgb, var(--mbrand) 34%, var(--mbd)); }
.mb-tbic { font-size: 18px; line-height: 1.25; flex: 0 0 auto; }
.mb-tbtx { flex: 1; min-width: 0; }
.mb-tbmsg { font-size: 13.5px; line-height: 1.42; color: var(--mink); font-weight: 600; }
.mb-tbts { font-size: 12px; color: var(--msub); margin-top: 3px; }
.mb-tbnew { flex: 0 0 auto; align-self: center; background: var(--mbrand); color: var(--mon); font-size: 12px; font-weight: 800; border-radius: 999px; padding: 2px 8px; }

/* ---------- Phối hợp ---------- */
.mb-tabs { display: flex; background: var(--msurf2); border-radius: 12px; padding: 4px; margin-bottom: 14px; border: 1px solid var(--mbd); }
.mb-tabs .t { flex: 1; text-align: center; padding: 10px; border-radius: 9px; font-size: 13.5px; font-weight: 800; color: var(--msub); }
.mb-tabs .t.on { background: linear-gradient(135deg, var(--mbrand), var(--mbrand2)); color: var(--mon); box-shadow: 0 3px 10px var(--mglow); }
.mb-co-actions { display: flex; gap: 9px; margin-top: 12px; }
.mb-co-actions .a { flex: 1; text-align: center; padding: 11px; border-radius: 11px; font-size: 13.5px; font-weight: 800; border: 1px solid transparent; }
.mb-co-actions .acc { background: linear-gradient(135deg, #16a34a, #0f7a38); color: #fff; }
.mb-co-actions .no { background: var(--msurf2); border-color: var(--mbd); color: var(--msub); }
.mb-fab { position: absolute; right: 16px; bottom: 80px; background: linear-gradient(135deg, var(--mbrand), var(--mbrand2)); color: var(--mon); padding: 14px 20px; border-radius: 30px; font-size: 15px; font-weight: 800; box-shadow: 0 8px 22px var(--mglow); display: flex; align-items: center; gap: 8px; border: none; }

/* ---------- Cá nhân ---------- */
.mb-prof { display: flex; align-items: center; gap: 14px; }
.av-lg { width: 54px; height: 54px; border-radius: 50%; background: linear-gradient(135deg, var(--mbrand), var(--mbrand2)); color: var(--mon); display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 800; flex: 0 0 auto; box-shadow: 0 4px 14px var(--mglow); }
.mb-prof .nm { font-size: 17px; font-weight: 800; color: var(--mink); }
.mb-prof .rl { font-size: 13px; color: var(--msub); margin-top: 3px; }
.mb-prof .em { font-size: 12px; color: var(--msub); margin-top: 2px; word-break: break-all; }
.mb-theme-row { display: flex; gap: 12px; }
.mb-theme-opt { flex: 1; display: flex; align-items: center; gap: 9px; padding: 14px; border: 2px solid var(--mbd); border-radius: 14px; background: var(--msurf); font-size: 14px; font-weight: 700; color: var(--mink); }
.mb-theme-opt.on { border-color: var(--mbrand); background: var(--mtag-blue); box-shadow: 0 4px 14px var(--mglow); }
.mb-theme-opt .sw { width: 22px; height: 22px; border-radius: 50%; flex: 0 0 auto; }
.mb-theme-opt .sw.red { background: #EC1F27; }
.mb-theme-opt .sw.navy { background: #1F4E79; box-shadow: 0 0 0 2px #4f9cff inset; }
.mb-theme-opt .tick { margin-left: auto; color: var(--mbrand); font-weight: 900; }
.mb-row-link, .mb-row-toggle { display: flex; align-items: center; gap: 11px; background: var(--msurf); border: 1px solid var(--mbd); border-radius: 12px; padding: 15px 14px; margin-bottom: 9px; font-size: 14.5px; font-weight: 600; color: var(--mink); width: 100%; text-align: left; }
.mb-row-link .chev { margin-left: auto; color: var(--msub); font-size: 22px; font-weight: 700; }
.mb-row-toggle .toggle { margin-left: auto; width: 46px; height: 27px; border-radius: 14px; background: color-mix(in srgb, var(--msub) 45%, var(--msurf2)); position: relative; flex: 0 0 auto; }
.mb-row-toggle .toggle.on { background: var(--mok); }
.mb-row-toggle .toggle::after { content: ''; position: absolute; top: 3px; left: 3px; width: 21px; height: 21px; border-radius: 50%; background: #fff; transition: left .16s; }
.mb-row-toggle .toggle.on::after { left: 22px; }
.mb-logout { width: 100%; margin-top: 8px; padding: 15px; border-radius: 14px; border: 1.5px solid color-mix(in srgb, var(--mred) 50%, transparent); background: color-mix(in srgb, var(--mred) 8%, transparent); color: var(--mred); font-size: 15.5px; font-weight: 800; }

/* ---------- Tổng quan: donut + accordion + bảng xếp hạng ---------- */
.mb-donut-wrap { display: flex; flex-direction: column; align-items: center; padding: 6px 0 4px; }
.mb-donut { position: relative; width: 220px; height: 220px; border-radius: 50%; }
.mb-donut::before { content: ''; position: absolute; inset: 34px; border-radius: 50%; background: var(--mbg); }
html[data-theme="navy"] .mb-donut::before { background: #0e1830; }
.mb-donut .mb-donut-c { position: absolute; inset: 34px; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.mb-donut .mb-donut-c .tot { font-size: 46px; font-weight: 800; color: var(--mink); line-height: 1; }
.mb-donut .mb-donut-c .lb { font-size: 12px; color: var(--msub); margin-top: 4px; }
.mb-donut-pct { font-size: 15px; font-weight: 800; margin: 12px 0 2px; color: var(--mink); }
.mb-legend { width: 100%; margin: 8px 0 2px; }
.mb-legend .lg { display: flex; align-items: center; gap: 9px; padding: 7px 4px; font-size: 13.5px; color: var(--mink); border-bottom: 1px solid var(--mline); }
.mb-legend .lg:last-child { border-bottom: none; }
.mb-legend .lg .dot { width: 12px; height: 12px; border-radius: 3px; flex: 0 0 auto; }
.mb-legend .lg .vn { margin-left: auto; font-weight: 800; }
.mb-acc { margin-top: 12px; }
.mb-acc-btn { display: flex; align-items: center; gap: 10px; width: 100%; padding: 15px 15px; border-radius: 14px; border: 1px solid var(--mbd); background: var(--msurf); font-size: 15.5px; font-weight: 800; color: var(--mink); margin-bottom: 10px; }
.mb-acc-btn .ic { font-size: 18px; }
.mb-acc-btn .caret { margin-left: auto; color: var(--msub); font-size: 13px; transition: transform .2s; }
.mb-acc-btn.open { border-color: var(--mbrand); }
.mb-acc-btn.open .caret { transform: rotate(180deg); color: var(--mbrand); }
.mb-acc-body { margin: -2px 0 12px; }
.lb { background: var(--msurf); border: 1px solid var(--mbd); border-radius: 16px; overflow: hidden; box-shadow: 0 2px 10px rgba(0,0,0,.06); }
html[data-theme="navy"] .lb { box-shadow: 0 2px 10px rgba(0,0,0,.35); }
.lb-row { display: flex; align-items: center; gap: 12px; padding: 12px 13px; border-bottom: 1px solid var(--mline); }
.lb-row:last-child { border-bottom: none; }
.lb-row.you { background: var(--mtag-blue); box-shadow: inset 3px 0 0 var(--mbrand); }
.lb-rank { width: 30px; height: 30px; flex: 0 0 auto; border-radius: 50%; background: var(--msurf2); color: var(--msub); font-weight: 800; font-size: 13px; display: flex; align-items: center; justify-content: center; }
.lb-rank.medal { background: transparent; font-size: 22px; }
.lb-main { flex: 1; min-width: 0; }
.lb-name { font-size: 14.5px; font-weight: 700; color: var(--mink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lb-name .you-tag { font-size: 12px; font-weight: 800; color: var(--mtag-blue-t); background: var(--mtag-blue); border: 1px solid var(--mbrand); padding: 1px 6px; border-radius: 8px; margin-left: 6px; vertical-align: middle; }
.lb-sub { font-size: 12px; color: var(--msub); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lb-sub b.red { color: var(--mtag-red-t); }
.lb-score { flex: 0 0 auto; min-width: 44px; text-align: center; font-size: 17px; font-weight: 800; padding: 6px 9px; border-radius: 11px; }
.lb-score.sc-green { background: var(--mtag-green); color: var(--mtag-green-t); }
.lb-score.sc-amber { background: var(--mtag-amber); color: var(--mtag-amber-t); }
.lb-score.sc-red { background: var(--mtag-red); color: var(--mtag-red-t); }

/* ---------- Tấm phủ (khi buộc dùng lại dialog để-bàn trên điện thoại) ---------- */
@media (max-width: 600px) {
  dialog, dialog.wide { width: 100%; max-width: 100%; height: 100%; max-height: 100%; border-radius: 0; }
  .dlg-b { grid-template-columns: 1fr; max-height: none; padding: 16px; }
  .dlg-b .full, .dlg-sec, .dlg-sec.coop { grid-column: 1 / 1; }
  .dlg-b input, .dlg-b select, .dlg-b textarea { font-size: 16px; }
  .dlg-f { position: sticky; bottom: 0; }
  .dlg-f button { flex: 1 1 auto; min-height: 44px; }

  /* ---- Báo cáo tuần: gọn cho điện thoại (chỉ đổi UI — dùng chung hàm moBaoCao với web) ---- */
  .dlg-h { font-size: 14px; padding: 12px 14px; line-height: 1.34; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .bc-dlg { padding: 12px 12px 16px !important; }
  .bc-dlg .bc-box { padding: 11px !important; }
  .bc-dlg .bc-prev { max-height: 40vh !important; }
  .bc-dlg label { line-height: 1.34; }
  /* Xếp CHỒNG mọi ô nhập theo chiều dọc, phủ kín bề ngang, cỡ chạm ≥44px (bỏ margin-left inline chen ngang) */
  .bc-dlg select,
  .bc-dlg input[type="number"],
  .bc-dlg input[type="date"],
  .bc-dlg input[type="text"] { display: block !important; width: 100% !important; margin: 6px 0 0 !important; min-height: 44px; font-size: 16px; box-sizing: border-box; }
  .bc-dlg textarea { width: 100% !important; font-size: 16px; box-sizing: border-box; }
  .bc-dlg input[type="file"] { width: 100%; box-sizing: border-box; }
  .bc-dlg input[type="checkbox"] { width: auto !important; display: inline-block !important; min-height: 0; margin-right: 6px; transform: scale(1.15); }
}

/* ---------- C3: khối "Cần tôi xử lý" trên màn Tổng quan điện thoại ---------- */
#mbApp .mb-hn-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 8px; margin-bottom: 4px; }
#mbApp .mb-hn-tile { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; background: var(--msurf); border: 1px solid var(--mbd); border-left: 4px solid var(--mbrand); border-radius: 12px; padding: 10px 12px; text-align: left; }
#mbApp .mb-hn-tile .n { font-size: 20px; font-weight: 800; color: var(--mink); }
#mbApp .mb-hn-tile .l { font-size: 12px; font-weight: 600; color: var(--msub); }
#mbApp .mb-hn-more { text-align: center; color: var(--mbrand); font-size: 13px; font-weight: 700; padding: 8px; cursor: pointer; }

/* ======================= MÁY TÍNH BẢNG 601–1024px ======================= */
@media (min-width: 601px) and (max-width: 1024px) {
  main { padding: 14px 16px; }
  .nav-nhom button { padding: 8px 12px; }
  .nav-la button { padding: 5px 10px; } /* C2: nav 2 tầng — luật cũ 'nav button' đã bị selector class đè */
  .dlg-b input, .dlg-b select, .dlg-b textarea { font-size: 16px; }
}

/* ============================================================
   C5 — Màn "Chờ tôi xử lý" (mbScreenCho) + điểm vào (Tổng quan/Cá nhân). Dùng biến --m*.
   ============================================================ */
.mb-cho-chips { display: flex; gap: 8px; overflow-x: auto; -webkit-overflow-scrolling: touch; padding: 2px 2px 8px; margin: 0 -2px 4px; scrollbar-width: none; }
.mb-cho-chips::-webkit-scrollbar { display: none; }
.mb-cho-chip { flex: 0 0 auto; padding: 7px 14px; border-radius: 20px; background: var(--msurf); border: 1px solid var(--mbd); font-size: 12.5px; font-weight: 700; color: var(--msub); font-family: inherit; }
.mb-cho-chip.on { background: linear-gradient(135deg, var(--mbrand), var(--mbrand2)); color: var(--mon); border-color: transparent; }
.mb-cho-card { border-left: 4px solid color-mix(in srgb, var(--mbrand) 55%, var(--mbd)); }
.mb-cho-kenh { font-size: 12px; font-weight: 800; letter-spacing: .3px; text-transform: uppercase; color: var(--msub); margin-bottom: 4px; }
.mb-cho-card .mb-tk-title { cursor: pointer; }
.mb-cho-entry { display: flex; align-items: center; gap: 12px; width: 100%; padding: 15px 16px; border-radius: 14px; border: 1px solid var(--mbd); background: var(--msurf2); text-align: left; color: var(--mink); font-family: inherit; }
.mb-cho-entry .n { flex: 0 0 auto; min-width: 34px; height: 34px; padding: 0 8px; border-radius: 10px; background: linear-gradient(135deg, var(--mbrand), var(--mbrand2)); color: var(--mon); font-size: 16px; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.mb-cho-entry .l { flex: 1; font-size: 14px; font-weight: 700; line-height: 1.3; }
.mb-cho-entry .chev { flex: 0 0 auto; color: var(--msub); font-size: 20px; }

/* ============================================================
   C9 — SHEET ĐÁY dùng chung (mbSheet). Gắn thẳng <body> (nổi trên #mbApp, KHÔNG bị re-render xoá).
   Tự khai lại bộ biến --m* (bản đỏ/sáng + navy/tối) để các class .mb-field/.mb-inp/.mb-ta/.mb-cta
   dùng lại đúng màu dù nằm NGOÀI #mbApp. Ô nhập 16px → iOS không tự phóng to.
   ============================================================ */
.mb-sheet-wrap {
  --mbg: #eef1f6; --msurf: #ffffff; --msurf2: #f5f8fc; --mbd: #e6e8eb;
  --mink: #1f2937; --msub: #6b7280;
  --mbrand: #EC1F27; --mbrand2: #b3141b; --mon: #ffffff;
  --mok: #16a34a; --mwarn: #d98a00; --mred: #dc2626;
  --mtrack: #e6e9ef; --mglow: rgba(236,31,39,.28); --mline: rgba(0,0,0,.06);
  --mtag-red: rgba(220,38,38,.12); --mtag-red-t: #b91c1c;
  --mtag-amber: rgba(217,138,0,.14); --mtag-amber-t: #9a6a00;
  --mtag-green: rgba(22,163,74,.13); --mtag-green-t: #157a3a;
  --mtag-grey: rgba(100,116,139,.12); --mtag-grey-t: #475569;
  --mtag-blue: rgba(37,99,235,.12); --mtag-blue-t: #1d4ed8;
  position: fixed; inset: 0; z-index: 1200; display: flex; align-items: flex-end;
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}
html[data-theme="navy"] .mb-sheet-wrap {
  --mbg: #0b1322; --msurf: #141f38; --msurf2: #1b2846; --mbd: #2a3b5c;
  --mink: #eaf1fb; --msub: #93a6c6;
  --mbrand: #4f9cff; --mbrand2: #1e40af; --mon: #ffffff;
  --mok: #22c55e; --mwarn: #f59e0b; --mred: #ef4444;
  --mtrack: #24324e; --mglow: rgba(59,130,246,.5); --mline: rgba(255,255,255,.05);
  --mtag-red: rgba(239,68,68,.16); --mtag-red-t: #fca5a5;
  --mtag-amber: rgba(245,158,11,.16); --mtag-amber-t: #fcd34d;
  --mtag-green: rgba(34,197,94,.16); --mtag-green-t: #6ee7b7;
  --mtag-grey: rgba(148,163,184,.14); --mtag-grey-t: #c7d2e2;
  --mtag-blue: rgba(79,156,255,.18); --mtag-blue-t: #bcd8ff;
}
.mb-sheet-wrap * { box-sizing: border-box; }
.mb-sheet-bg { position: absolute; inset: 0; background: rgba(0,0,0,.45); opacity: 0; transition: opacity .22s ease; }
.mb-sheet-wrap.open .mb-sheet-bg { opacity: 1; }
.mb-sheet {
  position: relative; width: 100%; max-height: 92vh; display: flex; flex-direction: column;
  background: var(--msurf); color: var(--mink); border-top-left-radius: 20px; border-top-right-radius: 20px;
  box-shadow: 0 -8px 30px rgba(0,0,0,.28); transform: translateY(100%); transition: transform .24s cubic-bezier(.32,.72,0,1);
  padding-bottom: max(10px, env(safe-area-inset-bottom));
}
.mb-sheet-wrap.open .mb-sheet { transform: translateY(0); }
.mb-sheet-grip { flex: 0 0 auto; width: 44px; height: 5px; border-radius: 3px; background: var(--mbd); margin: 9px auto 4px; }
.mb-sheet-h { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; padding: 6px 16px 12px; font-size: 16px; font-weight: 800; color: var(--mink); border-bottom: 1px solid var(--mbd); }
.mb-sheet-h span { flex: 1; min-width: 0; }
.mb-sheet-x { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 9px; border: 1px solid var(--mbd); background: var(--msurf2); color: var(--msub); font-size: 15px; font-weight: 800; cursor: pointer; }
.mb-sheet-b { flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 14px 16px 16px; }
.mb-sheet-b .mb-field { margin-bottom: 14px; }
.mb-sheet-b input, .mb-sheet-b select, .mb-sheet-b textarea { font-size: 16px; }   /* iOS không tự phóng to */
/* Công tắc (checkbox) trong sheet */
.mb-sheet-b .mb-swrow { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 700; color: var(--mink); cursor: pointer; }
.mb-sheet-b .mb-swrow input[type="checkbox"] { width: 22px; height: 22px; flex: 0 0 auto; accent-color: var(--mbrand); }
/* Thanh trượt %HT */
.mb-range { -webkit-appearance: none; appearance: none; width: 100%; height: 10px; border-radius: 6px; background: var(--mtrack); outline: none; margin: 6px 0 2px; }
.mb-range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 30px; height: 30px; border-radius: 50%; background: var(--mbrand); border: 3px solid var(--msurf); box-shadow: 0 2px 6px var(--mglow); cursor: pointer; }
.mb-range::-moz-range-thumb { width: 30px; height: 30px; border-radius: 50%; background: var(--mbrand); border: 3px solid var(--msurf); box-shadow: 0 2px 6px var(--mglow); cursor: pointer; }