/* Nền tảng lấy đúng từ nguyên mẫu "App quản lý học viên.dc.html" */
* { box-sizing: border-box; }
/* ===== Bảng màu sáng / tối (anh Hùng 16/09/2026) — mọi màu nền / chữ / viền trong app lấy từ đây.
   Máy để chế độ tối thì tự tối; nút Sáng / Tối / Tự động ở cuối menu (lưu trong trình duyệt). ===== */
:root {
  color-scheme: light;
  --surface: #FFFFFF; --surface-2: #F8F9FB; --fill: #F2F4F7; --tint-bg: #EEF4FA; --hover: rgba(118,118,128,.10);
  --label: #1D1D1F; --label-2: #48525E; --label-3: #6E6E73; --label-4: #8E8E93; --label-5: #AEAEB2;
  --line: #DCE1E8; --line-2: #ECEFF3; --sep: rgba(60,60,67,.12);
  --tint: #0071E3; --tint-hover: #0058B0; --ink: #072644;
  --red: #FF3B30; --orange: #FF9500; --yellow: #FFCC00; --green: #34C759; --blue: #007AFF; --purple: #AF52DE;
  --red-fg: #D70015; --orange-fg: #C25400; --yellow-fg: #A05A00; --green-fg: #248A3D; --blue-fg: #0071E3; --purple-fg: #8944AB;
  --red-bg: rgba(255,59,48,.12); --orange-bg: rgba(255,149,0,.15); --yellow-bg: rgba(255,204,0,.20); --green-bg: rgba(52,199,89,.15);
  --blue-bg: rgba(0,122,255,.11); --purple-bg: rgba(175,82,222,.13); --gray-bg: rgba(118,118,128,.12);
  --red-bd: rgba(255,59,48,.36); --orange-bd: rgba(255,149,0,.42); --yellow-bd: rgba(204,153,0,.40); --green-bd: rgba(52,199,89,.40);
  --blue-bd: rgba(0,122,255,.30); --purple-bd: rgba(175,82,222,.34); --gray-bd: rgba(118,118,128,.28);
  --pill-hi: rgba(255,255,255,.55);
  --wall: radial-gradient(1000px 520px at 6% -10%, rgba(0,113,227,.20), transparent 62%),
          radial-gradient(900px 560px at 100% 0%, rgba(90,200,250,.24), transparent 60%),
          radial-gradient(900px 620px at 58% 118%, rgba(255,159,10,.13), transparent 62%), #EDF0F5;
  --glass: linear-gradient(145deg, rgba(255,255,255,.66), rgba(255,255,255,.32));
  --glass-strong: linear-gradient(145deg, rgba(255,255,255,.90), rgba(255,255,255,.60));
  --glass-edge: rgba(255,255,255,.72); --glass-hi: rgba(255,255,255,.95); --glass-lo: rgba(255,255,255,.30);
  --glass-sheen: rgba(255,255,255,.55); --glass-rim: rgba(255,255,255,.95);
  --glass-shadow: 0 14px 34px -16px rgba(12,40,90,.38), 0 1px 2px rgba(12,40,90,.08);
  --bar: linear-gradient(180deg, rgba(255,255,255,.74), rgba(255,255,255,.52));
  --pane: rgba(252,252,253,.90); --pane-solid: rgba(252,252,253,.97); --sheet: rgba(238,239,244,.92);
  --ncard: rgba(255,255,255,.78); --ncard-hover: rgba(255,255,255,.95);
  --card-shadow: 0 1px 2px rgba(15,23,42,.04), 0 10px 28px -16px rgba(15,23,42,.18);
  --scrim: rgba(15,23,42,.16); --scrim-soft: rgba(15,23,42,.06);
  /* nền xanh "đang chọn" = đúng màu nút chính (xanh phẳng + vệt sáng mảnh phía trên) — mọi nút xanh một kiểu (anh Hùng 16/09/2026) */
  --thumb: linear-gradient(180deg, rgba(255,255,255,.24), rgba(255,255,255,0) 58%), linear-gradient(#0071E3, #0071E3); --thumb-glow: rgba(0,113,227,.55);
  --scroll-thumb: #C8D4DF; --scroll-track: #EEF2F6; --scroll-edge: #F2F4F7;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
  color-scheme: dark;
  --surface: #1C1C1E; --surface-2: #232326; --fill: #2C2C2E; --tint-bg: rgba(10,132,255,.18); --hover: rgba(118,118,128,.22);
  --label: #F5F5F7; --label-2: #D1D1D6; --label-3: #A1A1A6; --label-4: #8E8E93; --label-5: #636366;
  --line: #3A3A3C; --line-2: #2C2C2E; --sep: rgba(84,84,88,.55);
  --tint: #0A84FF; --tint-hover: #409CFF; --ink: #3E4A62;
  --red: #FF453A; --orange: #FF9F0A; --yellow: #FFD60A; --green: #30D158; --blue: #0A84FF; --purple: #BF5AF2;
  --red-fg: #FF6961; --orange-fg: #FFB340; --yellow-fg: #FFD60A; --green-fg: #30D158; --blue-fg: #409CFF; --purple-fg: #DA8FFF;
  --red-bg: rgba(255,69,58,.20); --orange-bg: rgba(255,159,10,.20); --yellow-bg: rgba(255,214,10,.18); --green-bg: rgba(48,209,88,.18);
  --blue-bg: rgba(10,132,255,.20); --purple-bg: rgba(191,90,242,.20); --gray-bg: rgba(118,118,128,.24);
  --red-bd: rgba(255,69,58,.45); --orange-bd: rgba(255,159,10,.45); --yellow-bd: rgba(255,214,10,.40); --green-bd: rgba(48,209,88,.42);
  --blue-bd: rgba(10,132,255,.45); --purple-bd: rgba(191,90,242,.42); --gray-bd: rgba(118,118,128,.40);
  --pill-hi: rgba(255,255,255,.10);
  --wall: radial-gradient(1000px 520px at 6% -10%, rgba(10,132,255,.28), transparent 62%),
          radial-gradient(900px 560px at 100% 0%, rgba(100,210,255,.16), transparent 60%),
          radial-gradient(900px 620px at 58% 118%, rgba(255,159,10,.10), transparent 62%), #0F1115;
  --glass: linear-gradient(145deg, rgba(80,80,88,.50), rgba(36,36,40,.34));
  --glass-strong: linear-gradient(145deg, rgba(72,72,78,.84), rgba(44,44,48,.70));
  --glass-edge: rgba(255,255,255,.14); --glass-hi: rgba(255,255,255,.22); --glass-lo: rgba(255,255,255,.05);
  --glass-sheen: rgba(255,255,255,.12); --glass-rim: rgba(255,255,255,.38);
  --glass-shadow: 0 14px 34px -16px rgba(0,0,0,.80), 0 1px 2px rgba(0,0,0,.40);
  --bar: linear-gradient(180deg, rgba(28,28,30,.80), rgba(28,28,30,.62));
  --pane: rgba(46,46,50,.90); --pane-solid: rgba(44,44,46,.97); --sheet: rgba(22,22,24,.93);
  --ncard: rgba(58,58,62,.62); --ncard-hover: rgba(72,72,78,.78);
  --card-shadow: 0 0 0 .5px rgba(255,255,255,.07), 0 10px 28px -16px rgba(0,0,0,.70);
  --scrim: rgba(0,0,0,.36); --scrim-soft: rgba(0,0,0,.25);
  --thumb: linear-gradient(180deg, rgba(255,255,255,.24), rgba(255,255,255,0) 58%), linear-gradient(#0A84FF, #0A84FF); --thumb-glow: rgba(10,132,255,.55);
  --scroll-thumb: #48484A; --scroll-track: #1C1C1E; --scroll-edge: #0F1115;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --surface: #1C1C1E; --surface-2: #232326; --fill: #2C2C2E; --tint-bg: rgba(10,132,255,.18); --hover: rgba(118,118,128,.22);
  --label: #F5F5F7; --label-2: #D1D1D6; --label-3: #A1A1A6; --label-4: #8E8E93; --label-5: #636366;
  --line: #3A3A3C; --line-2: #2C2C2E; --sep: rgba(84,84,88,.55);
  --tint: #0A84FF; --tint-hover: #409CFF; --ink: #3E4A62;
  --red: #FF453A; --orange: #FF9F0A; --yellow: #FFD60A; --green: #30D158; --blue: #0A84FF; --purple: #BF5AF2;
  --red-fg: #FF6961; --orange-fg: #FFB340; --yellow-fg: #FFD60A; --green-fg: #30D158; --blue-fg: #409CFF; --purple-fg: #DA8FFF;
  --red-bg: rgba(255,69,58,.20); --orange-bg: rgba(255,159,10,.20); --yellow-bg: rgba(255,214,10,.18); --green-bg: rgba(48,209,88,.18);
  --blue-bg: rgba(10,132,255,.20); --purple-bg: rgba(191,90,242,.20); --gray-bg: rgba(118,118,128,.24);
  --red-bd: rgba(255,69,58,.45); --orange-bd: rgba(255,159,10,.45); --yellow-bd: rgba(255,214,10,.40); --green-bd: rgba(48,209,88,.42);
  --blue-bd: rgba(10,132,255,.45); --purple-bd: rgba(191,90,242,.42); --gray-bd: rgba(118,118,128,.40);
  --pill-hi: rgba(255,255,255,.10);
  --wall: radial-gradient(1000px 520px at 6% -10%, rgba(10,132,255,.28), transparent 62%),
          radial-gradient(900px 560px at 100% 0%, rgba(100,210,255,.16), transparent 60%),
          radial-gradient(900px 620px at 58% 118%, rgba(255,159,10,.10), transparent 62%), #0F1115;
  --glass: linear-gradient(145deg, rgba(80,80,88,.50), rgba(36,36,40,.34));
  --glass-strong: linear-gradient(145deg, rgba(72,72,78,.84), rgba(44,44,48,.70));
  --glass-edge: rgba(255,255,255,.14); --glass-hi: rgba(255,255,255,.22); --glass-lo: rgba(255,255,255,.05);
  --glass-sheen: rgba(255,255,255,.12); --glass-rim: rgba(255,255,255,.38);
  --glass-shadow: 0 14px 34px -16px rgba(0,0,0,.80), 0 1px 2px rgba(0,0,0,.40);
  --bar: linear-gradient(180deg, rgba(28,28,30,.80), rgba(28,28,30,.62));
  --pane: rgba(46,46,50,.90); --pane-solid: rgba(44,44,46,.97); --sheet: rgba(22,22,24,.93);
  --ncard: rgba(58,58,62,.62); --ncard-hover: rgba(72,72,78,.78);
  --card-shadow: 0 0 0 .5px rgba(255,255,255,.07), 0 10px 28px -16px rgba(0,0,0,.70);
  --scrim: rgba(0,0,0,.36); --scrim-soft: rgba(0,0,0,.25);
  --thumb: linear-gradient(180deg, rgba(255,255,255,.24), rgba(255,255,255,0) 58%), linear-gradient(#0A84FF, #0A84FF); --thumb-glow: rgba(10,132,255,.55);
  --scroll-thumb: #48484A; --scroll-track: #1C1C1E; --scroll-edge: #0F1115;
}

/* Giao diện Apple (anh Hùng chốt 16/09/2026): chữ hệ thống của Apple (SF), nền xám nhạt có dải màu rất nhẹ để lớp kính hiện rõ */
body {
  margin: 0; color: var(--label);
  background: var(--wall);
  background-attachment: fixed;
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-size: 14px; -webkit-font-smoothing: antialiased;
}
a { color: var(--tint); text-decoration: none; }
a:hover { color: var(--tint-hover); }
input, select, button, textarea { font-family: inherit; font-size: inherit; color: inherit; }
/* Bấm vào ô chỉ đổi màu viền, không có quầng xám quanh ô */
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--tint); box-shadow: none; }
button { font-family: inherit; }
/* Ô chọn thả xuống — MỘT kiểu cho cả app (anh Hùng chốt 15/09/2026): mũi tên chevron xám cách mép phải 11px (cùng biểu tượng
   ChevronDown ở lib/icons.js và ô có danh sách lib/combo.js). !important vì nhiều ô đặt `background` / `padding` ngay trong style. */
select {
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%237B8B9B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 11px center !important;
  background-size: 14px 14px !important;
  padding-right: 32px !important;
  text-overflow: ellipsis;
}
/* Danh sách hiện ra khi bấm ô chọn: bo góc, dòng rê chuột nền xanh nhạt, dòng đang chọn chữ đậm navy có ✓ — giống hệt danh sách
   của ô có danh sách. Trình duyệt hỗ trợ ô chọn tuỳ biến (Chrome / Edge mới) mới vẽ được; trình duyệt khác giữ danh sách của máy. */
@supports (appearance: base-select) {
  select, select::picker(select) { appearance: base-select; }
  select { align-items: center; }
  select::picker-icon { display: none; }
  select::picker(select) {
    margin-top: 4px; padding: 4px; border: 1px solid var(--sep); border-radius: 14px; background: var(--surface);
    box-shadow: 0 18px 40px -20px rgba(7, 38, 68, .5); max-height: 280px; overflow: auto;
  }
  select option { padding: 7px 9px; border-radius: 7px; font-size: 12.5px; font-weight: 400; color: var(--label); background: transparent;
    white-space: nowrap; }
  select option:hover, select option:focus-visible { background: var(--hover); outline: none; }
  select option:checked { color: var(--tint); font-weight: 600; }
  select option::checkmark { content: '✓'; margin-inline-end: 4px; font-weight: 700; }
  select option:not(:checked)::checkmark { display: none; }
  select option:disabled { color: var(--label-5); }
  /* dòng "+ Thêm …" ở cuối danh sách danh mục (value="__add__") */
  select option[value="__add__"] { margin-top: 4px; border-top: 1px solid var(--sep); border-radius: 0 0 7px 7px; color: var(--tint); font-weight: 600; }
}
select option[value="__add__"] { color: var(--tint); font-weight: 600; }
select::-ms-expand { display: none; }
select:disabled { cursor: default; }

@keyframes bcToast { from { opacity: 0; transform: translateY(14px) scale(.96); } to { opacity: 1; transform: none; } }
/* chuyển màn: mờ dần kiểu Apple — chỉ đổi độ trong, không dịch khung (popup mở ngay lúc chuyển màn vẫn đúng chỗ) */
@keyframes bcScreen { from { opacity: 0; } to { opacity: 1; } }
@keyframes bcPop { from { opacity: 0; transform: translateY(6px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes bcSpin { to { transform: rotate(360deg); } }
@keyframes bcFade { from { opacity: 0; } to { opacity: 1; } }

[data-fx] { opacity: 0; transition: opacity 160ms cubic-bezier(.22,1,.36,1); }
[data-frow]:hover [data-fx] { opacity: 1; }
/* ảnh giấy tờ: nút tải xuống / thay / xoá hiện khi rê chuột vào ảnh; máy cảm ứng (không có rê chuột) thì hiện luôn */
[data-phx] { opacity: 0; transition: opacity 160ms cubic-bezier(.22,1,.36,1); }
[data-ph]:hover [data-phx], [data-ph]:focus-within [data-phx] { opacity: 1; }
/* máy không có chuột: nút chỉ hiện khi đã nhấn giữ vào ảnh (bảng nút bật ra giữa ô) — anh Hùng 18/09/2026 */
@media (hover: none) { [data-phx] { opacity: 1; } html[data-ui="m"] [data-ph] [data-phx] { opacity: 1; } }
[data-frow]:hover { background: var(--hover); }
[data-frow][data-act="1"]:hover { background: var(--tint); }

/* THANH CUỘN TỰ ẨN (anh Hùng chốt 17/09/2026: "chỉ hiện khi cuộn thôi"): mặc định trong suốt, khung nào đang cuộn thì
   lib/scrollfade.js gắn lớp .bc-scrolling vào đúng khung đó, dừng cuộn 0,9 giây thì gỡ. Rê chuột thẳng vào thanh vẫn hiện để kéo.
   Bề rộng thanh giữ nguyên (không nhảy bố cục khi hiện / ẩn). Rãnh luôn trong suốt. */
::-webkit-scrollbar { width: 10px; height: 10px; background: transparent; }
::-webkit-scrollbar-track, ::-webkit-scrollbar-corner { background: transparent; }
::-webkit-scrollbar-thumb { background: transparent; border-radius: 8px; border: 2px solid transparent; background-clip: padding-box; }
.bc-scrolling::-webkit-scrollbar-thumb, ::-webkit-scrollbar-thumb:hover { background-color: var(--scroll-thumb); }
* { scrollbar-color: transparent transparent; }
.bc-scrolling { scrollbar-color: var(--scroll-thumb) transparent; }

/* hover states — nguyên mẫu dùng thuộc tính style-hover, ở đây quy về class */
.bc-hov-nav:hover { background: rgba(118,118,128,.12); }
.bc-hov-row:hover { background: rgba(0,113,227,.05); }
.bc-hov-soft:hover { background: var(--hover); }
/* Lịch xe & DAT: ô trống sáng lên khi rê chuột (ô tự tô nền bằng style nên phải !important) */
.bc-sched-free:hover { background: var(--tint-bg) !important; }
.bc-hov-soft2:hover { background: var(--fill); }
.bc-hov-navy:hover { filter: brightness(1.07); }
.bc-hov-line:hover { border-color: var(--tint) !important; color: var(--tint) !important; }
.bc-hov-border:hover { border-color: var(--tint) !important; }
.bc-hov-line-soft:hover { border-color: var(--line) !important; }
/* ô Giờ DAT: ô số (đơn vị nằm trong ô) sáng viền khi đang gõ · ô ảnh trống sáng lên khi rê chuột */
.bc-field:focus-within { border-color: var(--tint) !important; box-shadow: 0 0 0 3px rgba(0,113,227,.14); }
.bc-slot:hover { border-color: var(--tint) !important; background: var(--fill) !important; }
.bc-hov-ghost:hover { color: var(--tint); background: var(--hover); }
.bc-hov-tint:hover { background: rgba(118,118,128,.10); }
/* khối thông báo kiểu iPhone trong chuông */
.bc-ncard:hover { background: var(--hover) !important; border-color: var(--line) !important; }
/* ô ngày gõ sai (vd. 11926) — app.js tô đỏ khi rời ô, gõ lại là hết */
.bc-bad-date { border-color: var(--red-fg) !important; background: var(--red-bg) !important; }
.bc-hov-del:hover { background: var(--red-bg) !important; color: var(--red-fg) !important; }
.bc-hov-bright:hover { filter: brightness(1.09); }
.bc-hov-dash:hover { border-color: var(--tint) !important; background: var(--hover); }
.bc-hov-chip:hover { background: var(--hover) !important; }
.bc-hov-red:hover { border-color: var(--red-fg) !important; }
/* khối ngày học ở màn xem theo học viên — nhấc nhẹ lên khi rê chuột */
.bc-hov-lift:hover { filter: brightness(1.12); transform: translateY(-1px); }

/* ô STT: rê chuột vào dòng thì số thứ tự nhường chỗ cho tay nắm ⠿ để kéo đổi thứ tự */
.bc-stt .bc-stt-h { display: none; }
.bc-hov-row:hover .bc-stt[data-can="1"] .bc-stt-n,
.bc-stt[data-drag="1"] .bc-stt-n { display: none; }
.bc-hov-row:hover .bc-stt[data-can="1"] .bc-stt-h,
.bc-stt[data-drag="1"] .bc-stt-h { display: inline; }

/* tên bấm được, không gạch chân sẵn — rê chuột mới hiện */
.bc-link:hover:not(:disabled) { color: #1E6FB5 !important; text-decoration: underline; text-underline-offset: 3px; }
/* ô nhập "ẩn viền": trông như chữ thường, rê chuột mới hiện viền, bấm vào mới thành ô nhập */
.bc-ghost:hover:not([readonly]) { border-color: #E1E8EF !important; }
.bc-ghost:focus { border-color: var(--tint) !important; background: var(--surface) !important; }
/* nút ↑ ↓ thùng rác của từng bước lộ trình: chỉ hiện khi rê chuột hoặc đang sửa bước đó */
.bc-step .bc-step-ctl { opacity: 0; transition: opacity 160ms; }
.bc-step:hover .bc-step-ctl, .bc-step:focus-within .bc-step-ctl { opacity: 1; }

.bc-spin { display: inline-block; width: 13px; height: 13px; border: 2px solid rgba(0,113,227,.18);
  border-top-color: var(--tint); border-radius: 50%; animation: bcSpin 700ms linear infinite; }

/* bảng học viên: ô ảo hoá cần chiều cao cố định */
.bc-table { border-collapse: separate; border-spacing: 0; font-size: 12.5px; white-space: nowrap; }
.bc-table td, .bc-table th { box-sizing: border-box; }

/* tay kéo ⠿ đổi thứ tự (lib/dragsort.js): chỉ hiện khi rê chuột vào dòng hoặc đang kéo (anh Hùng chốt 12/09/2026) ·
   máy cảm ứng không rê chuột được thì luôn hiện */
[data-sort-row] [data-grip] { opacity: 0; transition: opacity 150ms ease; }
[data-sort-row]:hover [data-grip], [data-grip][data-on="1"] { opacity: 1; }
@media (hover: none) { [data-sort-row] [data-grip] { opacity: 1; } }
/* bảng học viên: tay nắm ⠿ kéo cột chỉ hiện khi rê chuột vào tiêu đề — giống tay nắm kéo dòng ở cột STT */
th[data-col] .bc-col-grip { opacity: 0; transition: opacity 150ms ease; }
th[data-col]:hover .bc-col-grip, th[data-col][data-on="1"] .bc-col-grip { opacity: 1; }
@media (hover: none) { th[data-col] .bc-col-grip { opacity: 1; } }
/* ô tìm luôn mở (lib/ui.js › SearchInput): bấm vào thì viền xanh đậm như ô tìm trên thanh công cụ */
.bc-search:focus-within { border-color: var(--tint) !important; color: var(--tint) !important; }

/* ===== Màu tiêu đề + giao diện Apple · kính lỏng · sáng / tối (anh Hùng chốt 16/09/2026) ===== */
:root { --group-bg: #FFFFFF; --group-edge: rgba(15,23,42,.06); --group-shadow: 0 1px 2px rgba(15,23,42,.04), 0 6px 18px -12px rgba(15,23,42,.22);
  --panel-bg: rgba(240,241,245,.97); --th-bg: #EDEFF3; --head-bg: rgba(233,235,240,.75); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --group-bg: #2C2C2E; --group-edge: rgba(255,255,255,.07);
  --group-shadow: 0 1px 2px rgba(0,0,0,.35); --panel-bg: #19191B; --th-bg: #2A2A2E; --head-bg: rgba(255,255,255,.05); } }
:root[data-theme="dark"] { --group-bg: #2C2C2E; --group-edge: rgba(255,255,255,.07); --group-shadow: 0 1px 2px rgba(0,0,0,.35);
  --panel-bg: #19191B; --th-bg: #2A2A2E; --head-bg: rgba(255,255,255,.05); }
/* hàng tiêu đề bảng nổi hơn: nền xám nhẹ + chữ đậm (anh Hùng 16/09/2026) — lưới lịch xe có ô "hôm nay" riêng nên chừa ra */
thead th { color: var(--label-2) !important; font-weight: 600 !important; }
table:not(.bc-sched) thead th { background-color: var(--th-bg) !important; }
/* đầu khung: dải xám nhạt cho nổi khối */
.bc-card-head { background: var(--head-bg) !important; border-top-left-radius: inherit; border-top-right-radius: inherit; }
:root { --sheet-head: linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,255,255,.80)); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --sheet-head: linear-gradient(180deg, rgba(66,66,72,.94), rgba(50,50,54,.82)); } }
:root[data-theme="dark"] { --sheet-head: linear-gradient(180deg, rgba(66,66,72,.94), rgba(50,50,54,.82)); }
.bc-modal-head { background: var(--sheet-head) !important; border-bottom: 1px solid var(--sep) !important; box-shadow: inset 0 1px 0 var(--glass-hi);
  position: relative; z-index: 1; border-top-left-radius: inherit; border-top-right-radius: inherit; }
.bc-sec { color: var(--label-2) !important; }
/* khối trắng bo tròn trên nền xám — kiểu danh sách nhóm của Apple (như bản demo) */
.bc-group { background: var(--group-bg); border: 1px solid var(--group-edge); border-radius: 16px; box-shadow: var(--group-shadow); }
.bc-groups { background: transparent !important; }
/* popup: phần nội dung là một khối trắng trên tấm kính xám (popup đã chia sẵn khối thì chừa ra) */
.bc-ovl .bc-modal-head + div:not(.bc-groups) {
  margin: 12px 14px; background: var(--group-bg) !important; border: 1px solid var(--group-edge); border-radius: 16px; box-shadow: var(--group-shadow); }

/* Hiệu ứng kính (backdrop-filter) chỉ đặt ở lớp ::before hoặc ở phần tử không chứa popup: backdrop-filter biến phần tử thành khung chứa
   cho mọi con position:fixed (chuông, popup soạn thông báo, lịch bật ra sẽ lệch / bị cắt nếu đặt thẳng lên phần tử cha). */
.bc-glassbar::before, .bc-glasscap::before, .bc-pane::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  backdrop-filter: blur(28px) saturate(185%); -webkit-backdrop-filter: blur(28px) saturate(185%);
}
.bc-glassbar::before { background: var(--bar); border-bottom: 1px solid var(--glass-edge); box-shadow: 0 1px 0 var(--sep); animation: bcFade 220ms ease; }
.bc-glasscap { isolation: isolate; }
.bc-glasscap::before { background: var(--glass-strong); border: 1px solid var(--glass-edge); box-shadow: inset 0 1px 0 var(--glass-hi), var(--glass-shadow); }
/* kính lỏng: nền kính trong + ánh phản chiếu (::before) + viền sáng hai góc (::after) */
.bc-glass, .bc-seg {
  position: relative; isolation: isolate; background: var(--glass);
  backdrop-filter: blur(24px) saturate(190%); -webkit-backdrop-filter: blur(24px) saturate(190%);
  border: 1px solid var(--glass-edge);
  box-shadow: inset 0 1px 0 var(--glass-hi), inset 0 -1px 0 var(--glass-lo), var(--glass-shadow);
}
.bc-glass::before, .bc-seg::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: -1;
  background: radial-gradient(120% 70% at 18% 0%, var(--glass-sheen), transparent 58%),
              radial-gradient(90% 60% at 100% 100%, var(--glass-lo), transparent 60%);
}
.bc-glass::after, .bc-glasscap::after {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(135deg, var(--glass-rim), transparent 38%, transparent 62%, var(--glass-rim));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); opacity: .8;
}
/* thanh trượt: thẻ đang chọn là "thấu kính" xanh trượt tới (app.js › syncSegs đo vị trí) */
.bc-seg { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 2px; padding: 3px; border-radius: 21px; vertical-align: middle;
  max-width: 100%; scrollbar-width: none; }
.bc-seg::-webkit-scrollbar { display: none; }
.bc-seg > button { position: relative; z-index: 1; }
.bc-seg > button:hover { background: var(--hover); }
.bc-seg[data-live]::after {
  content: ""; position: absolute; left: 0; top: 0; z-index: 0; pointer-events: none; border-radius: 999px;
  width: var(--seg-w, 0); height: var(--seg-h, 0); transform: translate(var(--seg-x, 0), var(--seg-y, 0));
  background: var(--thumb); box-shadow: inset 0 1px 0 rgba(255,255,255,.45), inset 0 0 0 .5px rgba(255,255,255,.2), 0 6px 14px -6px var(--thumb-glow);
  transition: transform 440ms cubic-bezier(.2,.9,.25,1.12), width 440ms cubic-bezier(.2,.9,.25,1.12), height 300ms ease;
}
.bc-seg[data-live] > button { background: transparent !important; box-shadow: none !important; }
.bc-seg[data-live] > button:not([data-on]):hover { background: var(--hover) !important; }
/* danh sách / bảng bật ra (chọn, lọc cột, chuột phải, chuông): tấm kính mờ */
.bc-pane { background: var(--pane) !important; border-color: var(--glass-edge) !important; isolation: isolate;
  box-shadow: inset 0 1px 0 var(--glass-hi), 0 24px 60px -24px rgba(0,0,0,.42) !important; }
.bc-pane::after {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(135deg, var(--glass-rim), transparent 38%, transparent 62%, var(--glass-rim));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); opacity: .75;
}
.bc-pane-solid { background: var(--pane-solid) !important; border-color: var(--glass-edge) !important; box-shadow: 0 18px 40px -20px rgba(0,0,0,.40) !important; }
@supports (appearance: base-select) {
  select::picker(select) { background: radial-gradient(120% 60% at 15% 0%, var(--glass-sheen), transparent 60%), var(--pane);
    border-color: var(--glass-edge); border-radius: 16px;
    box-shadow: inset 0 1px 0 var(--glass-hi), inset 0 0 0 .5px var(--glass-edge), 0 24px 60px -24px rgba(0,0,0,.45);
    backdrop-filter: blur(28px) saturate(185%); -webkit-backdrop-filter: blur(28px) saturate(185%); }
}
/* chuông: nền phía sau hơi nhoè như Trung tâm thông báo · từng thông báo là một tấm kính */
.bc-scrim-soft { background: var(--scrim-soft); backdrop-filter: blur(6px) saturate(140%); -webkit-backdrop-filter: blur(6px) saturate(140%);
  animation: bcFade 200ms ease; }
.bc-ncard { background: var(--ncard) !important; border-color: var(--glass-edge) !important; border-radius: 18px !important;
  box-shadow: inset 0 1px 0 var(--glass-hi), 0 8px 20px -14px rgba(12,40,90,.4) !important; transition: background 200ms ease, transform 220ms cubic-bezier(.2,.9,.25,1); }
.bc-ncard:hover { background: var(--ncard-hover) !important; }
.bc-ncard:active { transform: scale(.985); }
/* nút chính: ĐÚNG kiểu viên xanh đang chọn của thanh trượt (.bc-seg[data-live]::after) — cùng ánh sáng, cùng viền, cùng bóng
   (anh Hùng 16/09/2026: mọi nút xanh phải giống viên "B số tự động"), bấm vào hơi nhún */
button.bc-hov-navy {
  background-image: linear-gradient(180deg, rgba(255,255,255,.24), rgba(255,255,255,0) 58%) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45), inset 0 0 0 .5px rgba(255,255,255,.2), 0 6px 14px -6px var(--thumb-glow) !important;
}
button.bc-hov-navy:active, button.bc-hov-bright:active { transform: scale(.97); }
button.bc-hov-navy:not([style*="position"]) { position: relative; }
/* (bỏ vòng viền trắng 1px quanh nút chính — viên chọn của thanh trượt không có, để mọi nút xanh giống hệt nhau) */
button.bc-hov-navy, button.bc-hov-line, button.bc-hov-border { border-radius: 999px !important; }
/* MỌI nút bo tròn hết cỡ, cùng một kiểu (anh Hùng 16/09/2026) — trừ: dòng trong danh sách / menu (chữ canh trái, như menu Apple), thẻ
   thông báo, khối buổi học ở "Theo học viên", nút phủ kín ô ảnh. Nút vuông nhỏ (✕, thùng rác, +, ngày trong lịch) thành hình tròn. */
/* ⚠ Trừ cả nút của BẢN ĐIỆN THOẠI (lớp .p-…: khối buổi dạy, dòng xe, dòng hồ sơ…) — không thì khối buổi học thành viên thuốc, mất chữ đầu. */
button:not(.bc-ncard):not(.bc-hov-lift):not([style*="text-align: left"]):not([style*="height: 100%"]):not([class^="p-"]):not([class*=" p-"]),
a.bc-hov-line, label.bc-hov-border { border-radius: 999px !important; }
/* menu: mục chưa chọn không có nền (như demo), rê chuột thì nền xám nhạt */
aside nav button.bc-hov-nav:not([aria-current="page"]):hover { background: var(--hover) !important; }
/* ô tick tròn kiểu Apple */
input[type="checkbox"] {
  -webkit-appearance: none; appearance: none; width: 18px; height: 18px; margin: 0; flex: 0 0 auto; vertical-align: middle;
  border-radius: 50%; border: 1.5px solid var(--label-5); background: var(--surface); display: inline-grid; place-items: center; cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease;
}
input[type="checkbox"]::after {
  content: ""; width: 4.5px; height: 8.5px; border: solid #fff; border-width: 0 2px 2px 0;
  transform: translateY(-1px) rotate(45deg) scale(0); transition: transform 180ms cubic-bezier(.2,.9,.25,1.3);
}
input[type="checkbox"]:checked { background: var(--tint); border-color: var(--tint); }
input[type="checkbox"]:checked::after { transform: translateY(-1px) rotate(45deg) scale(1); }
input[type="checkbox"]:disabled { opacity: .45; cursor: default; }
/* popup: nền sau nhoè + tấm kính dày (lớp nền phủ kín màn hình nên popup / lịch bật ra bên trong vẫn đúng chỗ) */
.bc-ovl {
  background: var(--scrim) !important; backdrop-filter: blur(6px) saturate(140%); -webkit-backdrop-filter: blur(6px) saturate(140%);
  animation: bcFade 220ms ease;
}
.bc-ovl > div {
  background: var(--sheet) !important; border-color: var(--glass-edge) !important;
  box-shadow: inset 0 1px 0 var(--glass-hi), inset 0 0 0 1px var(--glass-edge), 0 30px 80px -28px rgba(0,0,0,.5) !important;
}
div:has(> .bc-modal-head) { border-radius: 22px !important; }
/* chân popup (nút Huỷ / Lưu…) nằm luôn trên tấm kính xám, không có dải trắng riêng (anh Hùng 16/09/2026) */
.bc-ovl > div > div:last-child:not(.bc-modal-head) { background: transparent !important; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 1ms !important; transition-duration: 1ms !important; } }

/* ===== menu tài khoản kiểu Liquid Glass (anh Hùng 16/09/2026) — app.js › acct =====
   kính trong + ánh phản chiếu góc trên (::before, có blur) + viền sáng hai góc (::after); mục xếp thành nhóm bo tròn như Cài đặt iPhone */
:root {
  --menu-bg: linear-gradient(165deg, rgba(255,255,255,.80) 0%, rgba(250,251,255,.60) 55%, rgba(244,247,253,.72) 100%);
  --menu-group: rgba(255,255,255,.60); --menu-group-edge: rgba(255,255,255,.90); --menu-group-shadow: 0 1px 2px rgba(15,30,60,.05);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --menu-bg: linear-gradient(165deg, rgba(72,72,80,.72) 0%, rgba(36,36,40,.62) 55%, rgba(44,44,50,.72) 100%);
    --menu-group: rgba(255,255,255,.07); --menu-group-edge: rgba(255,255,255,.10); --menu-group-shadow: none;
  }
}
:root[data-theme="dark"] {
  --menu-bg: linear-gradient(165deg, rgba(72,72,80,.72) 0%, rgba(36,36,40,.62) 55%, rgba(44,44,50,.72) 100%);
  --menu-group: rgba(255,255,255,.07); --menu-group-edge: rgba(255,255,255,.10); --menu-group-shadow: none;
}
@keyframes bcMenuIn { from { opacity: 0; transform: translateY(-6px) scale(.95); } to { opacity: 1; transform: none; } }
.bc-menu { position: fixed; isolation: isolate; display: flex; flex-direction: column; gap: 8px; padding: 10px; border-radius: 28px;
  border: 1px solid var(--glass-edge); background: transparent; transform-origin: top right;
  box-shadow: inset 0 1px 0 var(--glass-hi), inset 0 -1px 0 var(--glass-lo), 0 30px 70px -24px rgba(10,30,70,.42), 0 10px 26px -14px rgba(10,30,70,.22);
  animation: bcMenuIn 300ms cubic-bezier(.2,.9,.25,1.12); }
.bc-menu::before { content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: -1; pointer-events: none;
  -webkit-backdrop-filter: blur(30px) saturate(200%); backdrop-filter: blur(30px) saturate(200%);
  background: radial-gradient(130% 55% at 10% 0%, var(--glass-sheen), transparent 60%),
              radial-gradient(90% 50% at 100% 100%, var(--glass-lo), transparent 62%), var(--menu-bg); }
.bc-menu::after { content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(135deg, var(--glass-rim), transparent 36%, transparent 64%, var(--glass-rim));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); opacity: .9; }
.bc-menu-group { display: flex; flex-direction: column; padding: 4px; border-radius: 20px; background: var(--menu-group);
  border: .5px solid var(--menu-group-edge); box-shadow: var(--menu-group-shadow); }
.bc-menu-row { display: flex; align-items: center; gap: 11px; width: 100%; min-height: 40px; padding: 0 12px 0 8px; border: 0; border-radius: 15px;
  background: transparent; color: var(--label); font-size: 13.5px; font-weight: 500; cursor: pointer; transition: background 160ms ease, transform 160ms ease; }
.bc-menu-row:hover { background: var(--hover); }
.bc-menu-row:active { transform: scale(.985); }
.bc-menu-row:focus-visible { outline: 2px solid var(--tint); outline-offset: -2px; }
.bc-menu-me { min-height: 62px; padding: 6px 10px 6px 6px; gap: 12px; border-radius: 20px; }
/* ô biểu tượng kiểu Liquid Glass, chỉ trắng + xanh (anh Hùng 16/09/2026): kính trắng trong, biểu tượng xanh · vệt sáng loang góc trên ·
   viền sáng mảnh (::before) · vệt bóng láng phía trên (::after) · bóng nhẹ ánh xanh. Mục đang mở ở menu trái: ô kính xanh, biểu tượng trắng */
:root { --tile-top: rgba(255,255,255,.88); --tile-bot: rgba(232,241,253,.78); --tile-sheen: rgba(255,255,255,.95);
  --tile-edge: rgba(0,113,227,.16); --tile-shadow: rgba(0,80,180,.26); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --tile-top: rgba(96,104,124,.60); --tile-bot: rgba(44,52,72,.60); --tile-sheen: rgba(255,255,255,.20);
    --tile-edge: rgba(64,156,255,.30); --tile-shadow: rgba(0,0,0,.55); }
}
:root[data-theme="dark"] { --tile-top: rgba(96,104,124,.60); --tile-bot: rgba(44,52,72,.60); --tile-sheen: rgba(255,255,255,.20);
  --tile-edge: rgba(64,156,255,.30); --tile-shadow: rgba(0,0,0,.55); }
.bc-menu-tile { position: relative; isolation: isolate; overflow: hidden; flex: 0 0 28px; width: 28px; height: 28px;
  border-radius: 9px; display: grid; place-items: center; color: var(--tint);
  background: radial-gradient(120% 80% at 28% 0%, var(--tile-sheen), rgba(255,255,255,0) 60%), linear-gradient(180deg, var(--tile-top), var(--tile-bot));
  -webkit-backdrop-filter: blur(8px) saturate(180%); backdrop-filter: blur(8px) saturate(180%);
  box-shadow: inset 0 1px 1px var(--glass-hi), inset 0 -1px 1px var(--tile-edge), inset 0 0 0 .5px var(--tile-edge),
    0 3px 8px -3px var(--tile-shadow), 0 1px 2px rgba(0,40,100,.08); transition: background 220ms ease, color 220ms ease, box-shadow 220ms ease; }
.bc-menu-tile::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(145deg, var(--glass-rim), rgba(255,255,255,.12) 40%, rgba(255,255,255,0) 60%, var(--glass-sheen));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.bc-menu-tile::after { content: ""; position: absolute; left: 3px; right: 3px; top: 1.5px; height: 46%; pointer-events: none;
  border-radius: 7px 7px 50% 50% / 7px 7px 100% 100%; background: linear-gradient(180deg, var(--glass-sheen), rgba(255,255,255,0)); }
.bc-menu-tile > svg { position: relative; z-index: 1; filter: drop-shadow(0 .5px .5px rgba(0,60,140,.22)); }
aside nav button[aria-current="page"] .bc-menu-tile { color: #fff;
  background: radial-gradient(120% 80% at 28% 0%, rgba(255,255,255,.50), rgba(255,255,255,0) 58%), var(--thumb);
  box-shadow: inset 0 1px 1px rgba(255,255,255,.60), inset 0 -1px 1.5px rgba(0,40,120,.35), 0 4px 10px -4px var(--thumb-glow); }
aside nav button[aria-current="page"] .bc-menu-tile > svg { filter: drop-shadow(0 1px 1px rgba(0,40,120,.35)); }
.bc-menu-chev { color: var(--label-4); font-size: 18px; line-height: 1; margin-top: -2px; }
/* công tắc kiểu iPhone */
.bc-switch { position: relative; flex: 0 0 42px; width: 42px; height: 26px; border-radius: 999px; background: var(--gray-bd);
  box-shadow: inset 0 0 0 .5px rgba(0,0,0,.06); transition: background 220ms ease; }
.bc-switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 22px; height: 22px; border-radius: 50%; background: #fff;
  box-shadow: 0 2px 5px rgba(0,0,0,.22), 0 0 0 .5px rgba(0,0,0,.04); transition: transform 280ms cubic-bezier(.3,1.35,.5,1); }
.bc-switch[data-on="1"] { background: var(--green); }
.bc-switch[data-on="1"]::after { transform: translateX(16px); }
/* biểu tượng máy ảnh ở góc ảnh đại diện: bấm để thêm / đổi ảnh */
.bc-cam { position: absolute; right: -3px; bottom: -3px; width: 19px; height: 19px; border-radius: 50%; display: grid; place-items: center;
  background: var(--surface); color: var(--tint); box-shadow: 0 1px 3px rgba(0,0,0,.22), 0 0 0 1.5px var(--surface); }
/* biểu tượng menu trái cũng là ô kính Liquid Glass (anh Hùng 16/09/2026) — màu từng mục: app.js › NAV_TILE */
.bc-nav-tile { flex: 0 0 26px; width: 26px; height: 26px; border-radius: 8px; }
/* viên kính trắng cho nhãn nhóm (vd. Sắp thi / Đã thi ở Quản lý thi) — anh Hùng 16/09/2026 */
.bc-glass-pill { position: relative; background: var(--glass-strong); border: 1px solid var(--glass-edge) !important;
  box-shadow: inset 0 1px 0 var(--glass-hi), 0 4px 12px -8px rgba(12,40,90,.45); }
/* dòng đang chọn dạng kính xanh nhạt — thay cho vạch màu bên trái (Liquid Glass, anh Hùng 16/09/2026) */
.bc-sel-glass { background: linear-gradient(180deg, color-mix(in srgb, var(--tint) 17%, transparent), color-mix(in srgb, var(--tint) 9%, transparent)) !important;
  box-shadow: inset 0 1px 0 var(--glass-hi), inset 0 0 0 .5px color-mix(in srgb, var(--tint) 28%, transparent),
    0 6px 16px -10px var(--thumb-glow) !important; }
/* chấm báo (vd. còn thiếu học phí): chấm phẳng như ban đầu, nhỏ 6px — anh Hùng 16/09/2026 thấy giọt kính "sợ quá" nên bỏ.
   Màu qua --dot (mặc định đỏ chữ var(--red-fg)) */
.bc-dot { --dot: var(--red-fg); display: inline-block; flex: 0 0 auto; width: 6px; height: 6px; border-radius: 50%; vertical-align: middle;
  background: var(--dot); }
/* ===== Liquid Glass cho nút xanh đặc + khối buổi dạy + dòng bảng (anh Hùng 16/09/2026) ===== */
/* nút nền xanh đặc (var(--tint) — vd. "Mọi trường" đang bật, bộ lọc cột đang dùng "Tất cả · 40/40", "Thi cử · 15/40"):
   ĐÚNG công thức nút chính button.bc-hov-navy ở trên — anh Hùng 16/09/2026 thấy bản kính mạnh hơn nhìn khác các nút khác */
button[style*="background: var(--tint)"]:not(.bc-hov-navy) {
  background-image: linear-gradient(180deg, rgba(255,255,255,.24), rgba(255,255,255,0) 58%) !important;
  border-color: transparent !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45), inset 0 0 0 .5px rgba(255,255,255,.2), 0 6px 14px -6px var(--thumb-glow) !important; }
/* khối buổi dạy trên lịch + ô buổi nhỏ: kính mảnh — vệt sáng rất nhẹ + một đường sáng mảnh ở mép trên + bóng nhỏ sát nền,
   KHÔNG viền sáng bao quanh, KHÔNG bóng dày (anh Hùng 16/09/2026 thấy bản trước "thô"); giữ nền đậm để chữ trắng rõ */
.bc-gblock { background-image: linear-gradient(180deg, rgba(255,255,255,.13), rgba(255,255,255,0) 62%) !important;
  border-color: transparent !important;
  box-shadow: inset 0 .5px 0 rgba(255,255,255,.30), 0 1px 1.5px rgba(7,38,68,.16), 0 2px 6px -3px rgba(7,38,68,.22) !important; }
/* rê chuột vào một dòng: màu nhấn phủ cả các ô dính bên trái (STT, họ tên) — ô dính có nền đục riêng nên phủ thêm một lớp màu trong */
tr.bc-hov-row:hover > td[style*="position: sticky"] { background-image: linear-gradient(rgba(0,113,227,.05), rgba(0,113,227,.05)) !important; }
/* biểu tượng thẻ thông báo (chuông): cùng ô kính trắng biểu tượng xanh như menu tài khoản, cỡ 38px — anh Hùng 16/09/2026 */
.bc-app-tile { flex: 0 0 38px; width: 38px; height: 38px; border-radius: 11px; }
/* chấm đỏ nằm trên ô màu (ô buổi, khối buổi dạy): thêm viền trắng mảnh 1px — bằng nét chữ "2h" — cho khỏi chìm (anh Hùng 16/09/2026) */
.bc-gblock .bc-dot { box-shadow: 0 0 0 1px #fff; }

/* ---------------------------------------------------------------------
   BẢNG LƯƠNG THẦY (anh Hùng 16/09/2026): tách hẳn "được cộng" và "bị trừ" thành hai tấm kính riêng,
   mỗi tấm có tiêu đề và số tổng của chính nó, nên nhìn lướt là biết khoản nào cộng khoản nào trừ.
   Dùng lại tấm kính .bc-gblock, chỉ thêm phần khung và dải màu mảnh bên trái để phân biệt hai hướng.
   --------------------------------------------------------------------- */
.bc-sal-box { position: relative; border-radius: 16px; padding: 0; overflow: hidden;
  background-color: var(--group-bg); border: 1px solid var(--group-edge) !important; }
/* dải màu mảnh bên trái: xanh lá = cộng · đỏ = trừ. Mảnh thôi, không tô cả khối cho đỡ nặng mắt. */
.bc-sal-box::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--green-fg); opacity: .8; }
.bc-sal-minus::after { background: var(--red-fg); }
.bc-sal-head { display: flex; align-items: baseline; gap: 10px; padding: 11px 14px 9px;
  border-bottom: 1px solid var(--line-2); }
.bc-sal-title { flex: 1; min-width: 0; font-size: 12.5px; font-weight: 700; letter-spacing: .01em; color: var(--label); }
.bc-sal-sum { font-size: 14.5px; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bc-sal-body { padding: 2px 14px 10px; }
/* Kết quả cuối: một con số duy nhất, không câu giải thích (anh Hùng bỏ chữ "Công ty gửi thêm cho thầy") */
.bc-sal-total { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 16px;
  background-color: var(--group-bg); border: 1.5px solid var(--group-edge); }

/* =====================================================================
   CHẾ ĐỘ ĐIỆN THOẠI html[data-ui="m"] — luật chung
   16/09/2026: điện thoại vẽ PhoneApp (phone/*.js), bố cục máy tính không bao giờ hiện khi data-ui="m" → đã xoá các luật cho
   header / main / aside menu 3 gạch / .bc-side / .bc-resizer / .bc-fund / .bc-subtabs / bảng / .bc-seg cuộn ngang / xoay ngang.
   Còn lại: luật áp chung cho popup nhập liệu và giao diện .p-… (GHI-CHU-KY-THUAT.md §83).
   ===================================================================== */
html[data-ui="m"] { -webkit-text-size-adjust: 100%; }
html[data-ui="m"] ::-webkit-scrollbar { height: 6px; width: 6px; }
html[data-ui="m"] ::-webkit-scrollbar-thumb { border-radius: 999px; border: 0; }
html[data-ui="m"] .bc-scrolling::-webkit-scrollbar-thumb { background-color: var(--label-5); }
/* Vùng bấm đủ lớn cho ngón tay (popup + PhoneApp) */
html[data-ui="m"] button:not(.bc-table button):not([aria-label="Đóng"]) { min-height: 38px; }
html[data-ui="m"] .bc-seg button { min-height: 34px; }

/* =====================================================================
   NỀN + BIẾN DÙNG CHUNG CHO CHẾ ĐỘ ĐIỆN THOẠI (html[data-ui="m"])
   16/09/2026: đã xoá các lớp .m-* và keyframes mSheet của bản dựng riêng cũ (MobileApp trong mobile.js) — không còn nơi nào dùng.
   Giữ lại: biến --m-bg (nền popup-thành-trang) và nền body. (.m-form/.m-cta xoá 16/09/2026 cùng nhánh inline của SubmitModal.)
   ===================================================================== */
:root { --m-bg: #F2F2F7; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --m-bg: #000000; } }
:root[data-theme="dark"] { --m-bg: #000000; }
html[data-ui="m"] body { background: var(--m-bg); -webkit-tap-highlight-color: transparent; overscroll-behavior-y: none; }
/* ---- popup của bản máy tính khi mở trên điện thoại: tấm trượt từ dưới lên, 1 cột, ô nhập to ---- */
/* POPUP → TRANG RIÊNG (anh Hùng chốt 16/09/2026): "các chỗ trên máy tính hiện lên popup thì giờ trên đt
   giống như kiểu mở trang mới luôn, muốn quay lại thì nhấn nút x ở góc trên bên phải như trên máy tính".
   Nền mờ biến mất, tấm popup phủ kín màn, bo góc phẳng — nhìn và dùng như một trang. Nút ✕ vẫn ở góc trên phải
   đúng chỗ cũ nên không phải học lại thao tác. */
/* ⚠ Cả TRANG popup tự cuộn (lớp phủ overflow-y: auto, tấm popup cao theo nội dung, tối thiểu bằng màn).
   16/09/2026 đo thật: lớp phủ là lưới (display: grid) nên "height: 100%" của tấm popup tính theo nội dung, form Gửi hồ sơ cao
   1979px trong màn 840px mà không cuộn được → nút "Gửi hồ sơ" nằm ngoài màn, không bấm tới. Đừng quay lại height: 100%. */
html[data-ui="m"] .bc-ovl {
  background: var(--m-bg) !important; padding: 0 !important; display: block !important;
  overflow-y: auto !important; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
html[data-ui="m"] .bc-ovl > div {
  width: 100% !important; max-width: 100% !important; min-height: 100% !important; max-height: none !important; height: auto !important;
  overflow: visible !important; border-radius: 0 !important; border: 0 !important; box-shadow: none !important; }
html[data-ui="m"] .bc-ovl > div > div { max-height: none !important; }
/* popup XÁC NHẬN (lớp .bc-ask: hỏi lại trước khi xoá / lưu, bảng cũ → mới, đổi trường…) KHÔNG thành trang:
   giữ tấm nhỏ ở GIỮA màn, nền mờ, để ngón cái bấm được ngay (anh Hùng 17/09/2026) */
html[data-ui="m"] .bc-ovl.bc-ask {
  background: rgba(15,23,42,.36) !important; display: grid !important; place-items: center !important;
  padding: 20px max(16px, env(safe-area-inset-right)) calc(20px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)) !important; }
html[data-ui="m"] .bc-ovl.bc-ask > div {
  width: 100% !important; max-width: 420px !important; min-height: 0 !important; max-height: calc(86 * var(--dvh1, 1vh)) !important;
  overflow: auto !important; border-radius: 20px !important; border: 1px solid var(--sep) !important;
  box-shadow: 0 30px 80px -28px rgba(15,23,42,.55) !important; }
/* NÚT TO CHO NGÓN TAY trong popup (anh Hùng 17/09/2026): hàng nút cuối popup (Lưu · Xác nhận · Huỷ · Gửi · Xoá…) cao 44px, chữ 15px;
   nút ✕ Đóng 40×40. Nhận hàng nút theo kiểu dáng chung của các popup: khối CUỐI có vạch trên hoặc dồn phải. */
html[data-ui="m"] .bc-ovl div:is([style*="border-top"], [style*="justify-content: flex-end"]):last-child > button,
html[data-ui="m"] .bc-ovl div:is([style*="border-top"], [style*="justify-content: flex-end"]):last-child > span > button {
  min-height: 44px !important; height: auto !important; min-width: 64px; padding-left: 18px !important; padding-right: 18px !important;
  font-size: 15px !important; border-radius: 12px !important; }
html[data-ui="m"] .bc-ovl div:is([style*="border-top"], [style*="justify-content: flex-end"]):last-child { gap: 10px !important; }
html[data-ui="m"] .bc-ovl button[aria-label="Đóng"], html[data-ui="m"] .p-page button[aria-label="Đóng"] {
  width: 44px !important; height: 44px !important; min-height: 44px !important; flex: 0 0 44px !important; font-size: 20px !important; line-height: 1 !important; color: var(--label-3) !important; }
/* tiêu đề popup dính trên khi cuộn, để nút ✕ luôn trong tầm ngón tay */
html[data-ui="m"] .bc-ovl .bc-modal-head {
  position: sticky; top: 0; z-index: 2; background: var(--surface); padding-top: calc(env(safe-area-inset-top) + 6px) !important; }

/* ⚠ ĐÃ XOÁ (16/09/2026) khối "tấm trượt từ dưới lên" ở đây: nó dùng ĐÚNG cùng selector
   `html[data-ui="m"] .bc-ovl > div` với khối POPUP → TRANG ngay trên, lại đứng sau nên thắng —
   popup vẫn bo góc 22px và vẫn trượt lên, tức bản vá bên trên không có tác dụng nào.
   Hai khối cùng selector đặt cách nhau vài dòng thì khối sau âm thầm huỷ khối trước. */
html[data-ui="m"] [style*="grid-template-columns: repeat(2"]:not(:has([data-ph])) { grid-template-columns: minmax(0, 1fr) !important; }
html[data-ui="m"] input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), html[data-ui="m"] select, html[data-ui="m"] textarea {
  font-size: 16px !important; }

/* =====================================================================
   BẢN ĐIỆN THOẠI MỚI (anh Hùng chốt 16/09/2026) — public/js/phone/*.js
   Điện thoại để XEM NHANH: 4 thẻ ở đáy (Lịch dạy · Xe & DAT · Gửi hồ sơ · Tra cứu), hiện theo quyền.
   Form nhập (gửi hồ sơ, buổi dạy, sửa xe) dùng LẠI popup bản máy tính → đủ ô, máy chủ kiểm y hệt; trên điện thoại
   popup phủ kín màn nhờ khối "POPUP → TRANG" ở trên. Phong cách giữ như máy tính: nền --wall, kính mờ, khối .bc-group, màu --tint.
   Tiền tố .p- dành riêng cho bản này.
   ===================================================================== */
.p-app { min-height: calc(100 * var(--dvh1)); display: flex; flex-direction: column; }
.p-top { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 10px;
  padding: calc(env(safe-area-inset-top) + 8px) max(16px, env(safe-area-inset-right)) 8px max(16px, env(safe-area-inset-left)); }
.p-top h1 { flex: 1; min-width: 0; margin: 0; font-size: 26px; font-weight: 700; letter-spacing: -.6px; color: var(--label);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.p-top .p-sub { display: block; margin-top: 1px; font-size: 12.5px; font-weight: 500; letter-spacing: 0; color: var(--label-3); }
.p-me { flex: 0 0 auto; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: transparent; cursor: pointer; }
.p-main { flex: 1; width: 100%; max-width: 680px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px;
  padding: 4px max(16px, env(safe-area-inset-right)) calc(96px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); }
.p-sec { margin: 6px 4px -4px; font-size: 12px; font-weight: 600; letter-spacing: .4px; text-transform: uppercase; color: var(--label-3); }
.p-muted { font-size: 13px; color: var(--label-3); }
.p-empty { padding: 26px 16px; text-align: center; font-size: 14px; color: var(--label-3); }
.p-load { display: flex; justify-content: center; padding: 24px; }

/* thanh 4 thẻ ở đáy — kính mờ như thanh trên cùng bản máy tính */
.p-tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  padding: 6px max(8px, env(safe-area-inset-right)) calc(6px + env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
  border-top: 1px solid var(--glass-edge); background: var(--pane);
  -webkit-backdrop-filter: blur(24px) saturate(180%); backdrop-filter: blur(24px) saturate(180%); box-shadow: 0 -10px 30px -24px rgba(10,30,70,.45); }
.p-tab { display: flex; flex-direction: column; align-items: center; gap: 2px; min-height: 48px; padding: 4px 0 0; border: 0; background: transparent;
  color: var(--label-4); font-size: 10.5px; font-weight: 600; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.p-tab svg { width: 25px; height: 25px; }
.p-tab[aria-current="page"] { color: var(--tint); }

/* dải 7 ngày */
.p-week { display: flex; align-items: center; gap: 4px; }
.p-week-nav { flex: 0 0 30px; height: 44px; border: 0; border-radius: 10px; background: transparent; color: var(--tint); font-size: 22px; cursor: pointer; }
.p-days { flex: 1; display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.p-day { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 6px 0 5px; border: 0; border-radius: 12px;
  background: transparent; color: var(--label); cursor: pointer; }
.p-day small { font-size: 10.5px; font-weight: 600; color: var(--label-4); }
.p-day b { font-size: 17px; font-weight: 600; font-variant-numeric: tabular-nums; }
.p-day i { display: flex; gap: 2px; height: 5px; align-items: center; }
.p-day i span { width: 4px; height: 4px; border-radius: 50%; background: var(--label-5); }
.p-day.today b { color: var(--tint); }
.p-day[aria-pressed="true"] { background: var(--tint); }
.p-day[aria-pressed="true"] small, .p-day[aria-pressed="true"] b { color: #fff; }
.p-day[aria-pressed="true"] i span { background: rgba(255,255,255,.85); }

/* đang dạy / tiếp theo · ô tổng */
.p-now-item { display: flex; flex-direction: column; gap: 3px; width: 100%; padding: 11px 0; border: 0; background: transparent; text-align: left;
  color: var(--label); cursor: pointer; }
.p-when.live::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: currentColor;
  vertical-align: 1px; animation: pPulse 1.6s infinite; }
@keyframes pPulse { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }

/* màu loại buổi — theo KIND_COLOR của bản máy tính (lib/theme.js) */
.p-k-vo { --k: var(--ink); } .p-k-sh { --k: #0E8A7E; } .p-k-bt { --k: #B8860B; } .p-k-dat { --k: #1E6FB5; } .p-k-use { --k: #7B8B9B; } .p-k-busy { --k: var(--label-5); }
:root[data-theme="dark"] .p-k-vo { --k: #9DB9DA; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .p-k-vo { --k: #9DB9DA; } }
.p-kd { display: inline-block; flex: 0 0 auto; width: 9px; height: 9px; margin-right: 6px; border-radius: 3px; background: var(--k); }

/* dòng thời gian trong ngày */
.p-ev { position: absolute; left: 56px; right: 8px; display: flex; flex-direction: column; gap: 1px; padding: 5px 10px; overflow: hidden;
  border: 0; border-radius: 10px; text-align: left; cursor: pointer; color: var(--label);
  background: var(--tint-bg); background: color-mix(in srgb, var(--k) 14%, var(--group-bg)); }

/* nút nổi */
.p-fabs { position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: calc(76px + env(safe-area-inset-bottom)); z-index: 35;
  display: flex; gap: 8px; align-items: center; }
.p-fab { display: inline-flex; align-items: center; gap: 6px; height: 50px; padding: 0 20px; border: 0; border-radius: 25px;
  background: var(--tint); color: #fff; font-size: 15px; font-weight: 600; cursor: pointer; box-shadow: 0 12px 26px -12px rgba(0,113,227,.7); }
.p-fab.alt { background: var(--pane-solid); color: var(--tint); border: 1px solid var(--glass-edge);
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); box-shadow: 0 10px 24px -14px rgba(10,30,70,.45); }
.p-fab svg { width: 18px; height: 18px; }

/* xe & DAT: mỗi xe một thanh 6h–22h */
.p-scale span.first { transform: none; } .p-scale span.last { transform: translateX(-100%); }
.p-frow { display: grid; grid-template-columns: 92px 1fr; align-items: center; width: 100%; padding: 9px 14px; border: 0; background: transparent;
  text-align: left; color: var(--label); cursor: pointer; }
.p-st.run { background: #1E6FB5; } .p-st.free { background: var(--green); } .p-st.use { background: var(--orange); }
.p-bar { position: relative; display: block; height: 24px; border-radius: 7px; background: var(--fill); overflow: hidden; }
.p-bar .p-nl { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--red); }
.p-li { display: flex; align-items: center; width: 100%; min-height: 30px; padding: 3px 0; border: 0; background: transparent; text-align: left;
  font-size: 12.5px; color: var(--label-2); cursor: pointer; }
.p-acts { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 6px; }
.p-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 42px; padding: 0 16px; border-radius: 21px;
  border: 1px solid var(--line); background: var(--surface); color: var(--tint); font-size: 14.5px; font-weight: 600; cursor: pointer; }
.p-btn.primary { border: 0; background: var(--tint); color: #fff; }

/* gửi hồ sơ */
.p-stats { display: grid; grid-template-columns: repeat(3, 1fr); padding: 12px 4px; text-align: center; }
.p-stats div + div { border-left: 1px solid var(--line-2); }
.p-stats b { display: block; font-size: 24px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--label); }
.p-stats span { font-size: 12px; color: var(--label-3); }
.p-cta { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; height: 50px; border: 0; border-radius: 14px;
  background: var(--tint); color: #fff; font-size: 16px; font-weight: 600; cursor: pointer; box-shadow: 0 12px 26px -16px rgba(0,113,227,.8); }
.p-alert { display: flex; align-items: center; gap: 8px; width: 100%; padding: 11px 14px; border: 0; border-radius: 14px; text-align: left; cursor: pointer;
  background: var(--orange-bg); color: var(--orange-fg); font-size: 13.5px; font-weight: 600; }
.p-list { overflow: hidden; padding: 0; }
.p-row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 14px; border: 0; background: transparent; text-align: left;
  color: var(--label); cursor: pointer; }
.p-row + .p-row { border-top: 1px solid var(--line-2); }
.p-av { flex: 0 0 auto; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--tint-bg); color: var(--tint);
  font-size: 13px; font-weight: 600; }

/* tra cứu */
.p-chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 0 16px; }
.p-chips::-webkit-scrollbar { display: none; }
.p-chip { flex: 0 0 auto; height: 34px; padding: 0 13px; border: 1px solid var(--line); border-radius: 17px; background: var(--surface);
  color: var(--label-2); font-size: 13px; font-weight: 500; cursor: pointer; white-space: nowrap; }
.p-chip[aria-pressed="true"] { border-color: var(--tint); background: var(--tint); color: #fff; }
.p-warn { color: var(--orange-fg); font-weight: 600; }

/* hàng lọc thả xuống ở Hồ sơ gửi (anh Hùng 18/09/2026): CTV · Hạng HS · Trường đề xuất — mặc định Tất cả, chọn được nhiều.
   Dùng chung ô chọn của cả app (lib/ui.js › PickList); nhìn như hàng chip ngay trên: chưa lọc viền xám, đang lọc nền xanh. */
.p-picks { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 8px -16px 0; padding: 0 16px; }
.p-picks::-webkit-scrollbar { display: none; }
.p-picks > div, .p-picks > button { flex: 0 0 auto; }

/* trang tài khoản */
.p-acct { position: fixed; inset: 0; z-index: 80; display: flex; flex-direction: column; background: var(--wall); background-attachment: fixed;
  animation: bcSheet 260ms cubic-bezier(.22,1,.36,1); }
.p-acct .p-main { padding-bottom: calc(24px + env(safe-area-inset-bottom)); }
.p-x { flex: 0 0 auto; width: 34px; height: 34px; border: 0; border-radius: 50%; background: var(--fill); color: var(--label-2); font-size: 14px;
  font-weight: 700; cursor: pointer; }
.p-acct .bc-menu-row { min-height: 48px; font-size: 15px; }

@media (orientation: landscape) and (max-height: 520px) {
  .p-top h1 { font-size: 21px; } .p-top .p-sub { display: none; }
  .p-main { max-width: 820px; }
  .p-fabs { bottom: calc(66px + env(safe-area-inset-bottom)); }
}
/* popup ứng tiền xăng / sửa xe (fuel.js): cột ảnh hoá đơn 150px + cột ô nhập → trên điện thoại xếp 1 cột, ảnh gọn ở trên */
html[data-ui="m"] .bc-billgrid { grid-template-columns: minmax(0, 1fr) !important; }
html[data-ui="m"] .bc-billgrid > div:first-child { max-width: 200px; }

/* ---- BẢN ĐIỆN THOẠI, đợt 2 (16/09/2026): xem nhiều ngày · thẻ con · tấm chi tiết · màn máy tính đặt trong khung ---- */
.p-app { --p-name-w: 64px; }
.p-select { width: 100%; height: 42px; padding: 0 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface);
  color: var(--label); font-size: 16px; font-weight: 600; }
/* thẻ con: .bc-seg trải hết bề ngang, nhiều mục thì cuộn ngang một hàng */
.p-seg { display: flex !important; width: 100%; flex-wrap: nowrap !important; overflow-x: auto; scrollbar-width: none; }
.p-seg::-webkit-scrollbar { display: none; }
.p-seg-btn { flex: 1 0 auto; min-height: 34px; padding: 0 14px; border: 0; border-radius: 18px; background: transparent; color: var(--label-3);
  font-size: 13.5px; font-weight: 600; white-space: nowrap; cursor: pointer; }
.p-seg-btn.on { background: var(--surface); color: var(--label); box-shadow: 0 1px 3px rgba(7,38,68,.15); }

/* lưới nhiều ngày: hàng thầy / xe × cột ngày — cột tên dính trái khi cuộn ngang */
.p-gh { position: sticky; top: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 6px 0 5px;
  font-size: 10px; color: var(--label-4); border-bottom: 1px solid var(--line-2); }
.p-gcell-name { display: flex; flex-direction: column; justify-content: center; min-width: 0; padding: 6px 6px 6px 12px;
  border-bottom: 1px solid var(--line-2); box-shadow: 1px 0 0 var(--line-2); }
.p-gcell { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 46px; padding: 4px 3px;
  border: 0; border-bottom: 1px solid var(--line-2); background: transparent; color: var(--label); cursor: pointer; }
/* ô 3 ca của Xe & DAT: 3 vạch dọc sáng · chiều · tối */
.p-tag { flex: 0 0 auto; padding: 3px 8px; border-radius: 99px; font-size: 11.5px; font-weight: 600; background: var(--fill); color: var(--label-2); }

/* tấm chi tiết trượt từ dưới lên */
.p-sheet-ovl { position: fixed; inset: 0; z-index: 70; display: flex; align-items: flex-end; background: rgba(15,23,42,.28);
  animation: bcFade 180ms ease; }
.p-sheet { width: 100%; max-height: calc(86 * var(--dvh1)); display: flex; flex-direction: column; border-radius: 22px 22px 0 0; background: var(--sheet);
  border-top: 1px solid var(--glass-edge); -webkit-backdrop-filter: blur(30px) saturate(180%); backdrop-filter: blur(30px) saturate(180%);
  padding-bottom: env(safe-area-inset-bottom); animation: bcSheet 280ms cubic-bezier(.22,1,.36,1); }
.p-sheet-head { display: flex; align-items: center; gap: 10px; padding: 14px 14px 8px 18px; }
.p-sheet-head b { display: block; font-size: 18px; font-weight: 700; color: var(--label); }
.p-sheet-head span { display: block; font-size: 12.5px; color: var(--label-3); }
.p-sheet-body { overflow-y: auto; overscroll-behavior: contain; padding: 4px 16px 18px; display: flex; flex-direction: column; gap: 10px; }
.p-slot-head b { font-size: 14px; font-weight: 600; } .p-slot-head span { font-size: 12px; color: var(--label-4); font-variant-numeric: tabular-nums; }

/* "Thêm": danh sách màn + nút quay lại */
.p-more { padding: 6px; }
.p-back { align-self: flex-start; min-height: 34px; padding: 0 6px; border: 0; background: transparent; color: var(--tint); font-size: 16px; font-weight: 500; cursor: pointer; }

/* hồ sơ học viên (student-detail.js) mở trên điện thoại: phủ kín màn, tự cuộn */
.p-page { position: fixed; inset: 0; z-index: 60; overflow-y: auto; overscroll-behavior: contain; background: var(--wall); background-attachment: fixed;
  padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom); animation: bcSheet 260ms cubic-bezier(.22,1,.36,1); }
.p-page > * { width: 100% !important; max-width: 680px !important; min-width: 0 !important; margin: 0 auto; height: auto !important; max-height: none !important; }
/* hồ sơ học viên = TRANG RIÊNG kín màn như hồ sơ CTV gửi (anh Hùng 17/09/2026): bỏ khung thẻ bo góc, tiêu đề dính trên, ✕ to */
.p-page { background: var(--m-bg); padding: 0 0 env(safe-area-inset-bottom); }
.p-page > * { max-width: 100% !important; min-height: calc(100 * var(--dvh1)) !important; border: 0 !important; border-radius: 0 !important;
  box-shadow: none !important; overflow: visible !important; background: var(--m-bg) !important; }
.p-page > * > div { overflow: visible !important; min-height: 0 !important; }
.p-page .bc-modal-head { position: sticky; top: 0; z-index: 3; background: var(--surface); padding-top: calc(env(safe-area-inset-top) + 8px) !important; }
html[data-ui="m"] .p-page > div:has(> .bc-modal-head) { border-radius: 0 !important; }

/* MÀN BẢN MÁY TÍNH ĐẶT TRONG ĐIỆN THOẠI (.p-embed): bỏ chiều cao cố định theo màn máy tính, hàng nút xuống dòng, bảng cuộn ngang riêng */
.p-embed { min-width: 0; }
.p-embed [style*="--vh1"][style*="height"] { height: auto !important; min-height: 0 !important; }
.p-embed > div > div:first-child { flex-wrap: wrap !important; }
.p-embed .bc-seg { display: flex !important; flex-wrap: nowrap !important; overflow-x: auto; max-width: 100%; scrollbar-width: none; }
.p-embed .bc-seg::-webkit-scrollbar { display: none; }
.p-embed .bc-seg > button { flex: 0 0 auto; }
.p-embed table { font-size: 12.5px; }
.p-embed div:has(> table) { overflow-x: auto !important; max-width: 100%; }
.p-embed input, .p-embed select { max-width: 100%; }
.p-embed [style*="minmax(320px"] { grid-template-columns: minmax(0, 1fr) !important; }
.p-btn { white-space: nowrap; }
.p-btn svg { flex: 0 0 auto; width: 16px; height: 16px; }
/* ô ảnh giấy tờ (photos.js, có data-ph) trên điện thoại: ảnh dọc (chân dung, căn cước điện tử, giấy khám) không cao quá nửa màn — anh Hùng: "ô chọn ảnh quá cao" */
html[data-ui="m"] [data-ph] { max-height: 170px; }
html[data-ui="m"] [data-ph] img { object-fit: contain; }
/* chuông thông báo trên thanh điện thoại: viên kính như bản máy tính · bảng thông báo bám hai mép màn */
.p-bell { position: relative; display: flex; align-items: center; padding: 3px; border-radius: 999px; }
/* Ô chọn thả xuống (lib/ui.js › PickList): bấm chuột xong trình duyệt tự vẽ vòng focus xám đen dày, nhìn như viền
   bị đậm lên (anh Hùng 18/09/2026) — thay bằng quầng xanh nhạt, vẫn thấy rõ khi đi bằng bàn phím. */
.bc-pick:focus { outline: none; }
.bc-pick:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--blue-bg), 0 0 0 4px var(--blue-bd); }

/* Bảng thả xuống trên điện thoại (anh Hùng 18/09/2026): nhìn như menu của iPhone — bo 16, kính mờ hậu cảnh,
   bóng đổ rõ để nổi hẳn lên khỏi nền, dòng cao 44 cho dễ chạm. */
html[data-ui="m"] .bc-pane { border-radius: 16px; background: var(--pane-solid) !important;
  -webkit-backdrop-filter: blur(28px) saturate(185%); backdrop-filter: blur(28px) saturate(185%);
  box-shadow: inset 0 1px 0 var(--glass-hi), inset 0 0 0 .5px var(--glass-edge),
    0 2px 8px -2px rgba(0,0,0,.18), 0 20px 46px -14px rgba(0,0,0,.42) !important; }
html[data-ui="m"] .bc-pane [role="option"] { min-height: 44px; padding: 10px 12px; font-size: 15px; border-radius: 10px; }
/* Ô chọn thả xuống trên điện thoại: vẽ y như menu bật ra của iPhone (anh Hùng 18/09/2026) — tấm kính TỐI,
   chữ trắng, dòng cao 44 có vạch ngăn mảnh, dòng đang chọn có dấu ✓. Nhờ vậy nhìn giống hệt menu của ô chọn
   sẵn có của máy (màn Học viên), dù đây là bảng tự vẽ để chọn được nhiều mục. */
html[data-ui="m"] .bc-pickpane { padding: 0; border: 0 !important; border-radius: 14px; overflow: hidden;
  background: rgba(44,44,48,.82) !important;
  -webkit-backdrop-filter: blur(30px) saturate(180%); backdrop-filter: blur(30px) saturate(180%);
  box-shadow: 0 8px 20px -6px rgba(0,0,0,.28), 0 26px 56px -16px rgba(0,0,0,.52) !important; }
html[data-ui="m"] .bc-pickpane::after { display: none; }
html[data-ui="m"] .bc-pickpane [role="listbox"] { margin: 0 !important; }
html[data-ui="m"] .bc-pickpane [role="option"] { min-height: 46px; padding: 12px 16px !important; border-radius: 0 !important;
  font-size: 16px !important; font-weight: 400 !important; color: #fff !important; background: transparent !important; }
html[data-ui="m"] .bc-pickpane [role="option"] + [role="option"] { box-shadow: inset 0 .5px 0 rgba(255,255,255,.13); }
html[data-ui="m"] .bc-pickpane [role="option"][aria-selected="true"] { font-weight: 600 !important; }
html[data-ui="m"] .bc-pickpane [role="option"] > span:first-child { width: auto !important; min-width: 24px; color: #fff !important; }
html[data-ui="m"] .bc-pickpane [role="option"]:active { background: rgba(255,255,255,.12) !important; }
/* ⚠ Chỉ bảng chuông (.bc-bellpane) mới bám hai mép màn. Trước 18/09/2026 luật này viết cho MỌI .bc-pane nên
   ô chọn thả xuống và menu chuột phải cũng bị kéo lên sát đầu màn — nay giới hạn đúng bảng chuông. */
.p-app .bc-bellpane { left: 8px !important; right: 8px !important; width: auto !important; top: calc(env(safe-area-inset-top) + 58px) !important;
  max-height: calc(calc(100 * var(--dvh1)) - env(safe-area-inset-top) - 140px) !important; }

/* =====================================================================
   PHÓNG TO TOÀN APP TRÊN MÁY TÍNH 115% (anh Hùng chốt 16/09/2026) — js/lib/appzoom.js
   html.bc-zoomed { zoom } · 1vh / 1vw bị zoom nhân lên nên mọi vh / vw trong app viết qua biến --vh1 / --dvh1 / --vw1, ở đây chia lại cho zoom.
   ⚠ Viết CSS / style mới: KHÔNG dùng thẳng "100vh", dùng calc(100 * var(--vh1)) — không thì khung cao 115% màn, tràn.
   ===================================================================== */
:root { --app-zoom: 1; --vh1: 1vh; --dvh1: 1dvh; --vw1: 1vw; }
html.bc-zoomed { zoom: var(--app-zoom); --vh1: calc(1vh / var(--app-zoom)); --dvh1: calc(1dvh / var(--app-zoom)); --vw1: calc(1vw / var(--app-zoom)); }

/* ⓘ giải thích ngắn (lib/ui.js › Info) — anh Hùng chốt 17/09/2026: bỏ câu chữ thừa trên màn, rê chuột vào vòng "!" mới hiện */
.bc-info { position: relative; display: inline-grid; place-items: center; flex: 0 0 auto; width: 16px; height: 16px; border-radius: 50%;
  border: 1.2px solid var(--label-4); color: var(--label-4); font-size: 10.5px; font-weight: 700; line-height: 1; cursor: help;
  vertical-align: middle; transition: color 160ms ease, border-color 160ms ease; outline: none; }
.bc-info:hover, .bc-info:focus-visible { color: var(--tint); border-color: var(--tint); }
.bc-tip { position: absolute; top: calc(100% + 8px); left: -8px; z-index: 20; width: max-content; max-width: 250px; padding: 8px 11px;
  border-radius: 12px; background: var(--pane-solid); border: 1px solid var(--glass-edge); box-shadow: 0 14px 30px -14px rgba(10,30,70,.45);
  color: var(--label-2); font-size: 12px; font-weight: 400; line-height: 1.5; text-align: left; white-space: normal; letter-spacing: 0;
  opacity: 0; transform: translateY(-3px); pointer-events: none; transition: opacity 140ms ease, transform 140ms ease; }
.bc-info[data-align="right"] .bc-tip { left: auto; right: -8px; }
.bc-info:hover .bc-tip, .bc-info:focus .bc-tip { opacity: 1; transform: none; }

/* Mốc thông báo (thiết kế lại 17/09/2026): tên ngắn bên trái · cụm ô bên phải; hẹp thì cụm ô xuống dưới tên */
.bc-set-row { display: flex; flex-wrap: wrap; align-items: center; column-gap: 16px; row-gap: 4px; padding: 7px 0; font-size: 13px; color: var(--label); }
.bc-set-row + .bc-set-row { border-top: 1px dashed var(--line-2); }
.bc-set-label { flex: 1 1 200px; min-width: 0; }
.bc-set-ctl { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-left: auto; }
.bc-set-u { font-size: 12px; color: var(--label-3); white-space: nowrap; }
html[data-ui="m"] .bc-set-label { flex-basis: 100%; font-weight: 500; }
html[data-ui="m"] .bc-set-ctl { margin-left: 0; }
/* Phân quyền trên điện thoại: cột tên quyền hẹp lại, chữ xuống dòng; cột nhóm hẹp hơn */
html[data-ui="m"] .bc-perms .bc-perm-name { min-width: 132px !important; max-width: 150px; white-space: normal !important; font-size: 12px; padding-left: 10px !important; }
html[data-ui="m"] .bc-perms .bc-perm-col { min-width: 56px !important; white-space: normal !important; font-size: 11px; }

/* vạch đỏ giờ hiện tại ở lịch Theo ngày: nhãn "Bây giờ hh:mm" chỉ hiện khi rê chuột vào vạch (17/09/2026) */
.bc-nowline-tag { opacity: 0; transform: translate(-50%, 3px) !important; transition: opacity 140ms ease, transform 140ms ease; }
.bc-nowline:has(.bc-nowline-hit:hover) .bc-nowline-tag { opacity: 1; transform: translate(-50%, 0) !important; }

/* điện thoại làm lại từng màn (17/09/2026): màn chưa làm lại để trống · menu con Học viên 2 hàng (trường, hạng) · nhãn thẻ đáy 1 dòng */
.p-pending { padding: 48px 16px; text-align: center; font-size: 13px; color: var(--label-4); }
.p-subnav { display: flex; flex-direction: column; gap: 8px; }
.p-count { margin-left: 6px; font-size: 11px; font-weight: 600; color: var(--label-4); font-variant-numeric: tabular-nums; }
.p-tab span { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: -.1px; }
.p-tab { min-width: 0; }
/* bảng Theo học viên: ⠿ ở tiêu đề cột chỉ hiện khi rê chuột (như th[data-col] bảng tổng) */
.bc-lcol .bc-col-grip { opacity: 0; transition: opacity 150ms ease; }
.bc-lcol:hover .bc-col-grip { opacity: 1; }

/* chú thích màu thu gọn (17/09/2026): một biểu tượng, rê chuột / Tab tới mới hiện bảng — lib/ui.js › LegendPop */
.bc-legend { position: relative; display: inline-grid; place-items: center; flex: 0 0 auto; width: 22px; height: 22px; border-radius: 6px;
  color: var(--label-4); cursor: help; transition: color 150ms ease, background 150ms ease; }
.bc-legend:hover, .bc-legend:focus-visible { color: var(--label-2); background: var(--hover); outline: none; }
.bc-legend-pop { position: absolute; top: calc(100% + 8px); left: -6px; z-index: 45; width: max-content; padding: 10px 13px; border-radius: 12px;
  background: var(--surface); border: 1px solid var(--line); box-shadow: 0 18px 40px -20px rgba(7,38,68,.45);
  opacity: 0; transform: translateY(-3px); pointer-events: none; transition: opacity 140ms ease, transform 140ms ease; cursor: default; }
.bc-legend[data-align="right"] .bc-legend-pop { left: auto; right: -6px; }
.bc-legend-pop > div { flex-direction: column !important; flex-wrap: nowrap !important; gap: 7px !important; }
.bc-legend:hover .bc-legend-pop, .bc-legend:focus-within .bc-legend-pop { opacity: 1; transform: none; }

/* ĐIỆN THOẠI › HS CTV › Hồ sơ gửi (phone/p-hoso.js, 17/09/2026) */
.p-chip { display: inline-flex; align-items: center; gap: 6px; }
.p-chip-n { font-size: 12px; font-weight: 600; color: var(--label-4); font-variant-numeric: tabular-nums; }
.p-chip[aria-pressed="true"] .p-chip-n { color: rgba(255,255,255,.8); }
.p-chip.red .p-chip-n { color: var(--red-fg); }
.p-chip.red[aria-pressed="true"] { border-color: var(--red); background: var(--red); }
.p-chip.red[aria-pressed="true"] .p-chip-n { color: rgba(255,255,255,.85); }
.p-av { position: relative; }
.p-av-dot { position: absolute; top: -1px; right: -1px; width: 10px; height: 10px; border-radius: 50%; background: var(--red);
  box-shadow: 0 0 0 2px var(--group-bg, var(--surface)); }
.p-tag { flex: 0 0 auto; max-width: 96px; padding: 3px 8px; border-radius: 99px; font-size: 11.5px; font-weight: 600; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
.p-tag.wait { background: var(--tint-bg); color: var(--tint); }
.p-tag.ok { background: var(--green-bg); color: var(--green-fg); }
.p-chev { flex: 0 0 auto; margin-left: -4px; font-size: 20px; line-height: 1; color: var(--label-5); }
.p-fabspace { flex: 0 0 44px; }
/* dòng hồ sơ gửi dạng lưới 2 cột — trái thông tin, phải trạng thái, từng cặp cùng hàng (17/09/2026) */
.p-row.p-hs { align-items: center; padding: 12px 10px 12px 14px; }
.p-hs .p-av { align-self: flex-start; margin-top: 2px; }
.p-hsg { flex: 1; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 10px; row-gap: 1px; align-items: center; }
.p-hsg > * { min-width: 0; line-height: 21px; }
.p-hs-name { font-size: 15px; font-weight: 600; color: var(--label); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.p-hs-l { font-size: 12.5px; color: var(--label-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.p-hs-l b { font-weight: 600; color: var(--label-2); font-variant-numeric: tabular-nums; }
.p-hs-r { justify-self: end; text-align: right; font-size: 12.5px; white-space: nowrap; }
b.p-hs-r { font-size: 13px; font-weight: 600; color: var(--label); }
.p-hs .p-tag { display: inline-block; max-width: 110px; padding: 0 8px; line-height: 20px; vertical-align: top; }
.p-hs .p-orange { color: var(--orange-fg); font-weight: 500; }
.p-hs .p-dim { color: var(--label-5); }
.p-hs-why { grid-column: 1 / -1; margin-top: 2px; font-size: 12.5px; font-weight: 500; color: var(--red-fg); line-height: 18px; }
.p-hs .p-chev { margin-left: 0; }
/* xem Tất cả: hồ sơ đã vào trường làm mờ như bảng máy tính (opacity .5) — lọc "Đã vào trường" thì hiện rõ */
.p-row.p-hs.p-done { opacity: .5; }

/* ĐIỆN THOẠI › HS CTV › Suất (phone/p-hoso.js › PQuota, 17/09/2026) */
.p-qnav { display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; padding: 6px; }
.p-qnav > button { height: 44px; border: 0; border-radius: 12px; background: transparent; color: var(--tint); font-size: 24px; cursor: pointer; }
.p-qnav > div { text-align: center; line-height: 1.3; }
.p-qnav b { display: block; font-size: 15px; font-weight: 600; color: var(--label); font-variant-numeric: tabular-nums; }
.p-qnav span { font-size: 12px; color: var(--label-3); }
.p-stats b.p-red { color: var(--red-fg); }
.p-quota { display: flex; flex-direction: column; gap: 8px; padding: 14px; }
.p-q-top { display: flex; align-items: baseline; gap: 10px; }
.p-q-name { flex: 1; min-width: 0; font-size: 16px; font-weight: 600; color: var(--label); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.p-q-left { flex: 0 0 auto; font-size: 13px; color: var(--label-3); font-variant-numeric: tabular-nums; }
.p-q-left b { margin-right: 4px; font-size: 22px; font-weight: 700; letter-spacing: -.3px; color: var(--green-fg); }
.p-quota.over .p-q-left b { margin-right: 0; font-size: 17px; color: var(--red-fg); }
.p-q-bar { height: 8px; border-radius: 4px; background: var(--fill); overflow: hidden; }
.p-q-bar i { display: block; height: 100%; border-radius: 4px; background: var(--tint); }
.p-quota.over .p-q-bar i { background: var(--red); }
.p-q-row { display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px; color: var(--label-3); font-variant-numeric: tabular-nums; }
.p-q-row > span:last-child { text-align: right; }
.p-q-row b { font-weight: 600; color: var(--label); }
.p-q-schools { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 8px; border-top: 1px solid var(--line-2); }
.p-q-schools span { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 4px 0 10px; border-radius: 13px;
  background: var(--fill); font-size: 12.5px; color: var(--label-2); }
.p-q-schools b { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--surface); font-size: 12px; font-weight: 600;
  color: var(--label); display: inline-grid; place-items: center; font-variant-numeric: tabular-nums; }

/* ĐIỆN THOẠI › HS CTV › Quỹ CTV (phone/p-hoso.js › PFund, 17/09/2026) */
.p-fund-row { padding: 12px 10px 12px 14px; }
.p-fbal.pos, .p-famt.pos, .p-fcard-bal.pos { color: var(--green-fg); }
.p-fbal.neg, .p-famt.neg, .p-fcard-bal.neg { color: var(--red-fg); }
b.p-hs-r.p-fbal { font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }
b.p-hs-r.p-famt { font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }
.p-fund-row .p-orange, .p-frow .p-orange { color: var(--orange-fg); font-weight: 500; }
.p-fcard { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 18px 16px 16px; text-align: center; }
.p-fcard-name { font-size: 13px; font-weight: 500; color: var(--label-3); }
.p-fcard-bal { font-size: 34px; font-weight: 700; letter-spacing: -.8px; font-variant-numeric: tabular-nums; line-height: 1.15; }
.p-fcard-sub { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 16px; margin-top: 8px; padding-top: 10px; width: 100%;
  border-top: 1px solid var(--line-2); font-size: 12.5px; color: var(--label-3); }
.p-fcard-sub span { display: inline-flex; align-items: center; gap: 6px; }
.p-fcard-sub b { font-weight: 600; color: var(--label); font-variant-numeric: tabular-nums; }
.p-fcard-sub i { width: 7px; height: 7px; border-radius: 50%; background: var(--orange); }
.p-fcard-sub i.no { background: var(--red); }
.p-frow { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; }
.p-frow + .p-frow { border-top: 1px solid var(--line-2); }
.p-frow .p-hs .p-tag, .p-frow .p-tag { display: inline-block; padding: 0 8px; line-height: 20px; vertical-align: top; }
.p-tag.no { background: var(--fill); color: var(--label-3); }
.p-hs-note { grid-column: 1 / -1; font-size: 12px; color: var(--label-3); line-height: 18px; }
.p-facts { display: flex; align-items: center; gap: 8px; }
.p-frow > * { width: 100%; align-self: stretch; text-align: left; }
.p-tag.warn { background: var(--orange-bg); color: var(--orange-fg); }
/* nhấn giữ 1 giây mở menu lịch sử (lib/history.js) — tắt bảng "Sao chép / Tra cứu" của iOS trên ô có lịch sử */
html[data-ui="m"] [data-hist] { -webkit-touch-callout: none; }

/* ĐIỆN THOẠI › Học viên (phone/p-hocvien.js, 17/09/2026) — dùng lại lưới .p-hs của HS CTV */
.p-hs .p-c-ok { color: var(--green-fg); }
.p-hs .p-c-red { color: var(--red-fg); font-weight: 600; }
.p-hs .p-c-tint { color: var(--tint); font-weight: 600; }
.p-hs .p-okb { color: var(--green-fg); }
.p-hs-bars { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 4px; }
.p-bar2 { display: block; }
.p-bar2 > span { display: flex; justify-content: space-between; gap: 6px; font-size: 11.5px; line-height: 16px; color: var(--label-3); }
.p-bar2 > span b { font-weight: 600; color: var(--label-2); font-variant-numeric: tabular-nums; }
.p-bar2 i { display: block; height: 5px; margin-top: 3px; border-radius: 3px; background: var(--fill); overflow: hidden; }
.p-bar2 i b { display: block; height: 100%; border-radius: 3px; background: var(--tint); }
.p-bar2 i b.full { background: var(--green); }
.p-tag.red { background: var(--red-bg); color: var(--red-fg); }
.p-tag.exam { background: var(--tint); color: #fff; }

/* DẤU ✕ ĐÓNG TO HƠN TRÊN ĐIỆN THOẠI (anh Hùng 17/09/2026): mọi nút Đóng 44×44, dấu ✕ cỡ 20px · nút ✕ của thông báo nhỏ 32×32 */
html[data-ui="m"] button[aria-label="Đóng"], html[data-ui="m"] .p-x {
  width: 44px !important; height: 44px !important; min-height: 44px !important; flex: 0 0 44px !important;
  font-size: 20px !important; line-height: 1 !important; color: var(--label-3) !important; }
html[data-ui="m"] button[aria-label="Đóng thông báo"] { width: 32px !important; height: 32px !important; min-height: 32px !important; flex: 0 0 32px !important; font-size: 15px !important; }

/* Học viên: trường gọn góc trái + nút tìm góc phải (17/09/2026) */
.p-toolrow { display: flex; align-items: center; gap: 10px; min-height: 44px; }
.p-toolrow > div { flex: 1 1 auto; }
.p-pick { flex: 0 1 auto; max-width: 70%; height: 38px; padding: 0 30px 0 14px; border: 1px solid var(--glass-edge); border-radius: 19px;
  background: var(--glass-strong) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5 6 7.5 9 4.5' fill='none' stroke='%238A8F98' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 12px center;
  -webkit-appearance: none; appearance: none; color: var(--label); font-size: 15px !important; font-weight: 600; text-overflow: ellipsis;
  box-shadow: inset 0 1px 0 var(--glass-hi), 0 6px 16px -10px rgba(12,40,90,.45); }
.p-pick-one { font-size: 16px; font-weight: 600; color: var(--label); }
/* nút tìm (lib/searchbox.js) trên điện thoại: to bằng các nút tròn khác */
html[data-ui="m"] .p-toolrow button[aria-label="Tìm trong danh sách"], html[data-ui="m"] .p-fabs-left button[aria-label="Tìm trong danh sách"] {
  width: 44px !important; height: 44px !important; flex: 0 0 44px !important; }
/* Hồ sơ gửi: nút tìm nổi góc dưới trái, cùng hàng "Gửi hồ sơ"; mở ra thì chiếm cả hàng */
.p-fabs-left { position: fixed; left: max(16px, env(safe-area-inset-left)); bottom: calc(76px + env(safe-area-inset-bottom)); z-index: 35;
  display: flex; align-items: center; height: 50px; }
.p-fabs-left.open { right: max(16px, env(safe-area-inset-right)); }
.p-fabs-left.open > div { flex: 1; height: 46px !important; box-shadow: 0 12px 26px -14px rgba(10,30,70,.45) !important; }
.p-fabs-left.open input { font-size: 16px !important; }
@media (min-width: 700px) { .p-fabs-left { bottom: calc(66px + env(safe-area-inset-bottom)); } }
html[data-ui="m"] .p-toolrow button[aria-label="Tìm trong danh sách"] > span, html[data-ui="m"] .p-fabs-left button[aria-label="Tìm trong danh sách"] > span { transform: scale(1.35); }
.p-toolrow > div { height: 44px !important; }
.p-toolrow > div input { font-size: 16px !important; }
html[data-ui="m"] .p-fabs-left button[aria-label="Tìm trong danh sách"] { width: 50px !important; height: 50px !important; flex: 0 0 50px !important; }

/* ĐIỆN THOẠI: KHÔNG CẮT CHỮ THÀNH "…" (anh Hùng 17/09/2026) — nhất là tên thầy: chữ dài thì xuống dòng.
   Áp cho mọi chỗ trên điện thoại: các màn .p-… và popup / hồ sơ bản máy tính (kiểu viết tay text-overflow: ellipsis).
   Giữ cắt ở: nhãn thanh đáy (.p-tab), khối buổi dạy trên dòng thời gian (.p-ev — ô cao cố định), ô chọn / ô nhập. */
html[data-ui="m"] .p-hs-name, html[data-ui="m"] .p-hs-l, html[data-ui="m"] .p-q-name, html[data-ui="m"] .p-rmain b, html[data-ui="m"] .p-rmain span,
html[data-ui="m"] .p-fname b, html[data-ui="m"] .p-li > span:last-child, html[data-ui="m"] .p-gcell-name b, html[data-ui="m"] .p-gcell-name span,
html[data-ui="m"] .p-more-row small,
html[data-ui="m"] :is(div, span, b, a, label, p, button):not(.p-tab *):not(.p-ev *)[style*="text-overflow: ellipsis"] {
  white-space: normal !important; overflow: visible !important; text-overflow: clip !important; overflow-wrap: anywhere; }
html[data-ui="m"] .p-hs-r { white-space: normal; max-width: 46vw; }
html[data-ui="m"] .p-tag { white-space: normal !important; overflow: visible !important; text-overflow: clip !important; max-width: none !important;
  line-height: 18px !important; padding-top: 1px !important; padding-bottom: 1px !important; text-align: center; }
html[data-ui="m"] .p-pick { max-width: calc(100% - 56px); }
/* cột trái (tên, khoá · thầy) luôn rộng ít nhất 58% — cột phải dài thì tự xuống dòng trong phần còn lại */
html[data-ui="m"] .p-hsg { grid-template-columns: minmax(58%, 1fr) minmax(0, auto); }
html[data-ui="m"] .p-hs-r { max-width: none; }
html[data-ui="m"] .p-hs-r.p-orange, html[data-ui="m"] .p-hs-r.p-c-ok { white-space: nowrap; }
/* tên trường trên điện thoại: khung xanh kính lỏng (liquid glass) cho nổi bật (anh Hùng 17/09/2026) — lớp sáng trên + vệt phản chiếu + viền trong */
html[data-ui="m"] .p-pick {
  height: 42px; padding: 0 34px 0 16px !important; border: 1px solid rgba(255,255,255,.35); border-radius: 21px; color: #fff; font-weight: 600;
  background-color: var(--tint) !important;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"),
    linear-gradient(180deg, rgba(255,255,255,.34) 0%, rgba(255,255,255,.08) 46%, rgba(255,255,255,0) 52%),
    linear-gradient(135deg, color-mix(in srgb, var(--tint) 85%, #5AC8FA) 0%, var(--tint) 55%, color-mix(in srgb, var(--tint) 80%, #1B2A6B) 100%) !important;
  background-repeat: no-repeat, no-repeat, no-repeat !important;
  background-position: right 13px center, 0 0, 0 0 !important;
  background-size: 14px 14px, 100% 100%, 100% 100% !important;
  -webkit-backdrop-filter: blur(18px) saturate(180%); backdrop-filter: blur(18px) saturate(180%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55), inset 0 -1px 0 rgba(0,0,0,.12), 0 10px 24px -12px color-mix(in srgb, var(--tint) 75%, transparent) !important;
  text-shadow: 0 1px 1px rgba(0,0,0,.15); }
html[data-ui="m"] .p-pick option { color: var(--label); background: var(--surface); text-shadow: none; }

/* Học viên: nút kiểu xem Học / Thi + 6 ô tiến độ thi (17/09/2026) */
.p-view { flex: 0 0 auto; display: inline-flex; padding: 3px; border-radius: 22px; background: var(--fill); }
.p-view button { min-height: 38px !important; min-width: 46px; padding: 0 12px; border: 0; border-radius: 19px; background: transparent;
  color: var(--label-3); font-size: 14px; font-weight: 600; cursor: pointer; }
.p-view button[aria-pressed="true"] { background: var(--surface); color: var(--label); box-shadow: 0 1px 3px rgba(7,38,68,.18); }
html[data-ui="m"] .p-pick { max-width: calc(100% - 170px); }
.p-steps2 { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; margin-top: 5px; }
.p-steps2 > span { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 4px 2px; border-radius: 8px; background: var(--fill); text-align: center; }
.p-steps2 b { font-size: 10px; font-weight: 600; line-height: 12px; color: var(--label-4); white-space: normal; }
.p-steps2 i { font-style: normal; font-size: 11px; font-weight: 600; line-height: 14px; color: var(--label-5); font-variant-numeric: tabular-nums; }
.p-steps2 > span.on { background: var(--green-bg); }
.p-steps2 > span.on b, .p-steps2 > span.on i { color: var(--green-fg); }
.p-steps2 > span.bad { background: var(--red-bg); }
.p-steps2 > span.bad b, .p-steps2 > span.bad i { color: var(--red-fg); }
.p-steps2 b { min-height: 24px; display: flex; align-items: center; justify-content: center; }
.p-steps2 > span.plan { background: var(--tint-bg); }
.p-steps2 > span.plan b, .p-steps2 > span.plan i { color: var(--tint); }
.p-steps2 > span { padding: 5px 2px; justify-content: center; min-height: 34px; }
.p-hs .p-fin { grid-column: 2; grid-row: 1 / span 2; align-self: center; display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.p-hs .p-fin .p-orange { white-space: nowrap; font-size: 12.5px; }
.p-hs .p-fin ~ .p-hs-l { grid-column: 1; }
/* chỉ một trường: vẫn khung xanh kính lỏng như ô chọn (không có mũi tên) */
html[data-ui="m"] .p-pick-one { display: inline-flex; align-items: center; height: 42px; max-width: calc(100% - 170px); padding: 0 16px; border-radius: 21px;
  border: 1px solid rgba(255,255,255,.35); color: #fff; font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  background: linear-gradient(180deg, rgba(255,255,255,.34) 0%, rgba(255,255,255,.08) 46%, rgba(255,255,255,0) 52%),
    linear-gradient(135deg, color-mix(in srgb, var(--tint) 85%, #5AC8FA) 0%, var(--tint) 55%, color-mix(in srgb, var(--tint) 80%, #1B2A6B) 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55), inset 0 -1px 0 rgba(0,0,0,.12), 0 10px 24px -12px color-mix(in srgb, var(--tint) 75%, transparent);
  text-shadow: 0 1px 1px rgba(0,0,0,.15); }

/* Học viên: nhấn giữ vào chữ cái để kéo đổi thứ tự (17/09/2026) — tắt bảng sao chép / chọn chữ của máy khi giữ */
.p-av-drag { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
.p-dragging { overflow: visible; -webkit-user-select: none; user-select: none; }
.p-dragging .p-row[style*="z-index: 5"] .p-av { background: var(--tint); color: #fff; }

/* thẻ xem nhanh học viên khi rê chuột vào tên (lib/stuprog.js › StudentPeek, 17/09/2026) — cùng lưới / thanh / ô với bản điện thoại */
.p-peek { position: fixed; z-index: 70; padding: 12px 14px 14px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line);
  box-shadow: 0 22px 46px -24px rgba(7,38,68,.55); pointer-events: none; animation: bcFade 120ms ease; }
.p-peek .p-hsg { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 10px; row-gap: 2px; align-items: center; }
.p-peek-sec { grid-column: 1 / -1; margin-top: 9px; font-size: 10.5px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; color: var(--label-4); }
.p-peek .p-hs-bars, .p-peek .p-steps2 { margin-top: 3px; }
.p-peek .p-tag { display: inline-block; padding: 0 8px; line-height: 20px; border-radius: 99px; font-size: 11.5px; font-weight: 600; }
.p-peek .p-orange { color: var(--orange-fg); font-weight: 500; }
.p-peek .p-c-ok { color: var(--green-fg); }
html[data-ui="m"] .p-pick, html[data-ui="m"] .p-pick-one { max-width: calc(100% - 118px); }

/* ĐIỆN THOẠI: nhấn giữ 1 giây = chuột phải ở MỌI chỗ có menu chuột phải (lib/history.js) — tắt bảng chọn chữ / sao chép của máy
   để không che menu; ô nhập vẫn chọn chữ, dán bình thường (anh Hùng 17/09/2026) */
html[data-ui="m"] body { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
html[data-ui="m"] :is(input, textarea, select, [contenteditable="true"]) { -webkit-touch-callout: default; -webkit-user-select: text; user-select: text; }
.p-peek-dot { display: inline-block; width: 8px; height: 8px; margin-left: 7px; border-radius: 50%; vertical-align: middle; }
.p-peek-exp { grid-column: 1 / -1; margin-top: 2px; font-size: 12px; font-weight: 500; }
/* ô nhập có lịch sử (data-hist): lúc CHƯA bấm vào ô thì nhấn giữ không bôi đen chữ / không hiện "Cắt · Sao chép · Dán" của máy
   (để hiện menu Xem lịch sử chỉnh sửa); bấm vào ô để gõ thì chọn chữ, dán như thường (anh Hùng 17/09/2026) */
html[data-ui="m"] [data-hist] :is(input, textarea):not(:focus), html[data-ui="m"] :is(input, textarea)[data-hist]:not(:focus) {
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
/* bảng học viên: chọn vùng ô bằng chuột thay cho bôi đen chữ của trình duyệt (luôn lấy cả dòng) — chép bằng Ctrl/Cmd+C */
table.bc-gridsel tbody td { -webkit-user-select: none; user-select: none; }
table.bc-gridsel input, table.bc-gridsel textarea { -webkit-user-select: text; user-select: text; }
/* thanh trên điện thoại: chuông thông báo và ảnh đại diện cùng cỡ 42px (anh Hùng 17/09/2026) */
.p-top .p-bell { padding: 0; }
.p-top .p-bell button[aria-label="Thông báo"] { width: 42px !important; height: 42px !important; min-height: 42px !important; }
.p-top .p-bell button[aria-label="Thông báo"] svg { width: 21px; height: 21px; }
.p-top .p-me { width: 42px; height: 42px; }

/* ĐIỆN THOẠI › Đào tạo › Theo ngày (phone/p-daotao.js › PDay, 17/09/2026) — mỗi thầy một thanh 6h–22h */
.p-dv { overflow: hidden; padding: 0; }
.p-dv-scale { display: grid; grid-template-columns: 96px 1fr; padding: 10px 14px 2px; font-size: 10.5px; color: var(--label-4); font-variant-numeric: tabular-nums; }
.p-dv-scale > div { position: relative; height: 14px; }
.p-dv-scale > div span { position: absolute; transform: translateX(-50%); }
.p-dv-scale > div span.first { transform: none; } .p-dv-scale > div span.last { transform: translateX(-100%); }
.p-dv-item + .p-dv-item { border-top: 1px solid var(--line-2); }
.p-dv-row { display: grid; grid-template-columns: 96px 1fr; align-items: center; width: 100%; padding: 10px 14px; border: 0; background: transparent;
  text-align: left; color: var(--label); cursor: pointer; }
.p-dv-name { min-width: 0; padding-right: 8px; }
.p-dv-name b { display: block; font-size: 14px; font-weight: 600; line-height: 1.25; }
.p-dv-name span { display: block; font-size: 11.5px; color: var(--label-3); }
.p-dv-item.idle .p-dv-row { opacity: .55; }
.p-dv-bar { position: relative; display: block; height: 26px; border-radius: 8px; background: var(--fill); overflow: hidden; }
.p-dv-tick { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--line); }
.p-dv-blk { position: absolute; top: 4px; bottom: 4px; border-radius: 4px; background: var(--k); box-shadow: 0 0 0 1px var(--group-bg, #fff); }
.p-dv-blk.wait { background-image: repeating-linear-gradient(135deg, transparent 0 4px, rgba(255,255,255,.45) 4px 8px); }
.p-dv-now { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--red); z-index: 1; }
.p-dv-det { display: flex; flex-direction: column; gap: 4px; padding: 0 14px 12px; }
.p-dv-ses { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 48px; padding: 6px 10px; border: 0; border-radius: 12px;
  background: color-mix(in srgb, var(--k) 10%, var(--group-bg, var(--surface))); text-align: left; color: var(--label); cursor: pointer; }
.p-dv-ses .p-kd { margin-right: 0; }
.p-dv-ses-t { flex: 1; min-width: 0; }
.p-dv-ses-t b { display: block; font-size: 14px; font-weight: 600; color: var(--k); }
.p-dv-ses-t span { display: block; font-size: 12px; color: var(--label-3); font-variant-numeric: tabular-nums; }
.p-dv-empty { padding: 6px 2px; font-size: 13px; color: var(--label-4); }
.p-dv-det .p-btn { align-self: flex-start; margin-top: 2px; }
.p-dv-det .p-btn svg { width: 15px; height: 15px; }
/* vạch đỏ giờ hiện tại nằm DƯỚI các khối buổi — như "Theo ngày" bản máy tính (anh Hùng 17/09/2026) */
.p-dv-now { z-index: 0; } .p-dv-blk { z-index: 1; }
/* Theo ngày: vạch đỏ nối liền qua các dòng thầy (anh Hùng 17/09/2026) — vạch nằm trong cả dòng (trên viền ngăn dòng), dưới khối buổi */
.p-dv-row { position: relative; }
.p-dv-item { position: relative; }
.p-dv-row .p-dv-now { position: absolute; top: -1px; bottom: 0; width: 2px; margin-left: -1px; background: var(--red); z-index: 1; pointer-events: none; }
.p-dv-bar .p-dv-blk { z-index: 2; }
.p-dv-item.idle .p-dv-row { opacity: 1; }
.p-dv-item.idle .p-dv-name, .p-dv-item.idle .p-dv-bar { opacity: .55; }
.p-stats2 { grid-template-columns: repeat(2, 1fr); }
.p-stats b.p-muted-b { color: var(--label-3); }
.p-dv-blk.dim { opacity: .25; }   /* đang tìm: khối buổi không khớp mờ đi */
/* nút ✕ trong ô tìm (lib/searchbox.js) trên điện thoại: to cho dễ bấm (anh Hùng 17/09/2026) */
html[data-ui="m"] button[title="Đóng ô tìm"] { width: 34px !important; height: 34px !important; min-height: 34px !important; flex: 0 0 34px !important;
  margin-right: -6px; font-size: 17px !important; color: var(--label-3) !important; background: transparent !important; }
/* Theo thầy: dòng hôm nay tên xanh; vạch đỏ chỉ trong dòng hôm nay */
.p-dv-item.today .p-dv-name b { color: var(--tint); }
.p-dv-row .p-dv-now.short { top: 8px; bottom: 8px; border-radius: 1px; }
/* Theo thầy: nút khoảng ngày + lịch chọn + 5 ô thống kê (17/09/2026) */
.p-range { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 14px; border: 0; text-align: left; color: var(--label); cursor: pointer; }
.p-range-t { flex: 1; min-width: 0; }
.p-range-t b { display: block; font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.p-range-t span { display: block; font-size: 12px; color: var(--label-3); }
.p-cal { display: flex; justify-content: center; }
.p-cal .bc-pane { width: 100% !important; max-width: 400px; }
.p-cal .bc-pane button { min-height: 40px !important; }
.p-stats5 { display: grid; grid-template-columns: repeat(6, 1fr); row-gap: 10px; padding: 12px 4px; text-align: center; }
.p-stats5 > div { grid-column: span 2; }
.p-stats5 > div:nth-child(1), .p-stats5 > div:nth-child(2) { grid-column: span 3; }
.p-stats5 > div:nth-child(2), .p-stats5 > div:nth-child(4), .p-stats5 > div:nth-child(5) { border-left: 1px solid var(--line-2); }
.p-stats5 b { display: block; font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--label); }
.p-stats5 b.p-muted-b { color: var(--label-3); }
.p-stats5 span { font-size: 12px; color: var(--label-3); }
.p-app .p-cal .bc-pane { position: relative !important; left: auto !important; right: auto !important; top: auto !important; max-height: none !important; }
.p-range-chev { flex: 0 0 auto; display: inline-flex; color: var(--label-3); transition: transform 180ms ease; }
.p-range2 { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; height: 42px; padding: 0 10px 0 14px; border: 1px solid var(--glass-edge);
  border-radius: 21px; background: var(--glass-strong); box-shadow: inset 0 1px 0 var(--glass-hi), 0 6px 16px -10px rgba(12,40,90,.45);
  color: var(--label); text-align: right; cursor: pointer; }
.p-range2 .p-range-t b { font-size: 14px; line-height: 1.15; }
.p-range2 .p-range-t span { font-size: 11px; line-height: 1.2; }
html[data-ui="m"] .p-toolrow .p-pick, html[data-ui="m"] .p-toolrow .p-pick-one { min-width: 0; }

/* ĐIỆN THOẠI › Đào tạo › Theo học viên (p-daotao.js › PStudentLog, 17/09/2026) */
.p-sl { padding: 0; overflow: hidden; }
.p-sl-head { display: flex; align-items: center; gap: 8px; width: 100%; padding: 12px 10px 10px 14px; border: 0; border-bottom: 1px solid var(--line-2); background: color-mix(in srgb, var(--label) 14%, var(--group-bg)); text-align: left; cursor: pointer; color: var(--label); }
.p-sl-dot { display: inline-block; width: 7px; height: 7px; margin-left: 6px; border-radius: 50%; background: var(--red); vertical-align: middle; }
.p-sl-line { padding: 8px 0 10px 14px; border-top: 1px solid var(--line-2); }
.p-sl-left.ok { color: var(--green-fg); } .p-sl-left.warn { color: var(--orange-fg); } .p-sl-left.bad { color: var(--red-fg); } .p-sl-left.mut { color: var(--label-3); }
.p-sl-strip { display: flex; align-items: center; gap: 6px; overflow-x: auto; padding-right: 14px; scrollbar-width: none; }
.p-sl-strip::-webkit-scrollbar { display: none; }
.p-sl-chip { position: relative; flex: 0 0 auto; display: inline-flex; align-items: center; gap: 3px; height: 34px; min-height: 34px !important; padding: 0 10px;
  border: 1.5px solid transparent; border-radius: 10px; background: color-mix(in srgb, var(--k) 14%, var(--group-bg, var(--surface)));
  color: var(--k); font-size: 12.5px; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; cursor: pointer; }
.p-sl-chip i { font-style: normal; font-size: 10.5px; opacity: .8; }
.p-sl-chip.fut { background: transparent; border: 1.5px dashed var(--k); }
.p-sl-chip.pre { --k: var(--label-3); cursor: default; }
.p-sl-bad { position: absolute; top: 4px; right: 4px; width: 6px; height: 6px; border-radius: 50%; background: var(--red); }
.p-sl-none { flex: 0 0 auto; font-size: 12.5px; color: var(--label-4); }
.p-sl-add { flex: 0 0 34px; width: 34px; height: 34px; min-height: 34px !important; display: grid; place-items: center; padding: 0; border: 1px dashed var(--line);
  border-radius: 10px; background: var(--surface); color: var(--tint); cursor: pointer; }
.p-sl-add svg { width: 16px; height: 16px; }

/* ĐIỆN THOẠI › Xăng xe (p-daotao.js › PFuel, 17/09/2026) */
.p-fu-day { padding: 0; overflow: hidden; }
.p-fu-dh { padding: 10px 14px 4px; font-size: 12px; font-weight: 700; letter-spacing: .3px; text-transform: uppercase; color: var(--label-3); }
.p-fu-dh.today { color: var(--tint); }
.p-fu-row { position: relative; display: flex; align-items: center; gap: 12px; width: 100%; padding: 8px 14px; border: 0; background: transparent;
  text-align: left; color: var(--label); cursor: pointer; }
.p-fu-row + .p-fu-row { border-top: 1px solid var(--line-2); }
.p-fu-row.rep { background: var(--purple-bg); } .p-fu-row.adv { background: var(--orange-bg); }
/* ảnh bill · hoá đơn trong danh sách Xăng xe: tỉ lệ ảnh chụp màn hình 9/16 như mọi khung bill (anh Hùng 18/09/2026) */
.p-fu-th { flex: 0 0 30px; width: 30px; height: 53px; border-radius: 7px; object-fit: cover; background: #0E1A27; display: grid; place-items: center;
  font-size: 9px; font-weight: 800; }
.p-fu-th.pdf { background: var(--red-bg); color: var(--red-fg); } .p-fu-th.miss { background: var(--red-bg); border: 1.5px dashed var(--red-bd); }
.p-fu-th.tool { background: var(--surface); font-size: 18px; }
.p-fu-row .p-hsg { flex: 1; }
.p-fu-dot { position: absolute; top: 6px; left: 44px; width: 9px; height: 9px; border-radius: 50%; background: var(--red); border: 2px solid var(--group-bg, #fff); }
.p-fabs .p-fab.alt { padding: 0 14px; }

/* ĐIỆN THOẠI › Việc của thầy + Lượng việc (p-them.js, 17/09/2026) */
.p-tk { padding: 0; overflow: hidden; }
.p-tk-head { display: flex; align-items: center; gap: 8px; width: 100%; padding: 12px 10px 12px 14px; border: 0; background: transparent; text-align: left;
  color: var(--label); cursor: pointer; }
.p-tk-head .p-hsg { flex: 1; }
.p-tk-head small { font-size: 11px; font-weight: 500; color: var(--label-4); }
.p-tk-head .p-chev { transition: transform 160ms ease; }
.p-tk-nums { display: inline-flex; gap: 5px; }
.p-tk-n { min-width: 26px; height: 22px; padding: 0 6px; border-radius: 11px; display: inline-grid; place-items: center; font-size: 12.5px; font-weight: 700;
  font-variant-numeric: tabular-nums; }
.p-tk-n.plum { background: var(--purple-bg); color: var(--purple-fg); } .p-tk-n.red { background: var(--red-bg); color: var(--red-fg); }
.p-tk-n.warn { background: var(--orange-bg); color: var(--orange-fg); } .p-tk-n.zero { color: var(--label-5); }
.p-tk-list { border-top: 1px solid var(--line-2); }
.p-tk-row { display: flex; align-items: flex-start; gap: 10px; padding: 10px 14px; }
.p-tk-row + .p-tk-row { border-top: 1px solid var(--line-2); }
.p-tk-row .p-tag { flex: 0 0 auto; margin-top: 1px; }
.p-tk-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.p-tk-t b { font-size: 14px; font-weight: 600; color: var(--label); }
.p-tk-t span { font-size: 12.5px; color: var(--label-3); }
.p-tk-miss, .p-tk-red { color: var(--red-fg) !important; font-weight: 600; }
.p-tag.plum { background: var(--purple-bg); color: var(--purple-fg); } .p-tag.warnt { background: var(--orange-bg); color: var(--orange-fg); }
.p-tag.mut { background: var(--fill); color: var(--label-3); }
.p-lw { padding: 0; overflow: hidden; }
.p-lw-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--line-2); }
.p-lw-head b { font-size: 15px; font-weight: 600; }
.p-lw-tiles { display: grid; grid-template-columns: 1fr 1fr; }
.p-lw-tiles > div { display: flex; flex-direction: column; gap: 2px; padding: 10px 14px; border-bottom: 1px solid var(--line-2); }
.p-lw-tiles > div:nth-child(odd) { border-right: 1px solid var(--line-2); }
.p-lw-tiles span { font-size: 11.5px; font-weight: 600; color: var(--label-3); }
.p-lw-tiles b { font-size: 21px; font-weight: 700; letter-spacing: -.3px; font-variant-numeric: tabular-nums; }
.p-lw-tiles b i { font-style: normal; font-size: 12px; font-weight: 500; color: var(--label-3); }
.p-lw-tiles small { font-size: 11.5px; color: var(--label-3); }
.p-lw-lines { display: flex; flex-direction: column; gap: 4px; padding: 10px 14px; font-size: 13px; color: var(--label-2); line-height: 1.45; }
.p-lw-cars { border-top: 1px solid var(--line-2); }
.p-lw-car { padding: 8px 14px; } .p-lw-car + .p-lw-car { border-top: 1px solid var(--line-2); }
.p-lw-foot { padding: 8px 14px 12px; font-size: 11.5px; color: var(--label-4); border-top: 1px solid var(--line-2); }
.p-tk-head .p-tk-nums { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 8px; }
.p-tk-nums > span { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 0; border-radius: 10px; background: var(--fill); }
.p-tk-nums small { font-size: 11px !important; color: var(--label-3); }
.p-tk-nums .p-tk-n { min-width: 0; height: auto; padding: 0; background: transparent !important; font-size: 18px; }
html[data-ui="m"] .p-tk-head .p-hsg { grid-template-columns: minmax(0, 1fr) auto; }
.p-tk-head .p-hs-r.p-muted { white-space: nowrap; font-size: 12px; }
/* ---------- Điện thoại › Lịch xe & DAT (p-lich.js, 17/09/2026) ---------- */
.p-sc { padding: 0; overflow: hidden; }
.p-sc.today { box-shadow: inset 0 0 0 1.5px var(--tint); }
.p-sc-day { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 48px; padding: 0 14px; border: 0; background: transparent;
  color: var(--label); font: inherit; text-align: left; cursor: pointer; }
.p-sc-day .p-chev { flex: 0 0 auto; width: 14px; text-align: center; transition: transform .2s; }
.p-sc-cell { position: relative; display: flex; align-items: center; justify-content: center; gap: 3px; min-height: 44px; padding: 3px 4px; border: 0; border-radius: 10px;
  background: var(--surface-2); color: var(--label-4); font: inherit; font-size: 12px; font-weight: 600; line-height: 1.2; text-align: center; cursor: pointer;
  -webkit-touch-callout: none; user-select: none; -webkit-user-select: none; }
.p-sc-cell span { overflow-wrap: anywhere; }
.p-sc-cell.free { box-shadow: inset 0 0 0 1px var(--line-2); }
.p-sc-cell.free:active { background: var(--tint-bg); }
.p-sc-cell.hid, .p-sc-cell:disabled { cursor: default; }
.p-sc-cell.hid { background: var(--fill); box-shadow: none; }
.p-sc-cell.on.xe { background: rgba(168,47,34,.11); color: var(--red-fg); }
.p-sc-cell.on.dat { background: rgba(30,111,181,.14); color: var(--blue-fg); }
.p-sc-cell.wait { box-shadow: inset 0 0 0 1.5px currentColor; }
.p-sc-cell.busy { background: repeating-linear-gradient(135deg, var(--fill) 0 5px, transparent 5px 10px); box-shadow: inset 0 0 0 1px var(--line); }
.p-sc-cell.lock { background: var(--fill); color: var(--label-4); }
.p-sc-cell.lend { background: var(--orange-bg); color: var(--orange-fg); font-size: 11.5px; }
.p-sc-cell .bc-dot { position: absolute; top: 4px; right: 4px; margin: 0; }
.p-sc-only { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; border: 0; border-radius: 17px;
  background: var(--tint); color: #fff; font: inherit; font-size: 13px; font-weight: 600; }
.p-sc-info { display: flex; flex-direction: column; }
.p-sc-info > div { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; font-size: 14px; }
.p-sc-info > div + div { border-top: 1px solid var(--line-2); }
.p-sc-info span { color: var(--label-3); flex: 0 0 auto; }
.p-sc-info b { font-weight: 600; text-align: right; overflow-wrap: anywhere; }
.p-acts .p-btn.danger { color: var(--red-fg); }
.p-fab .bc-dot { margin: 0 2px; }
/* HS CTV · Học viên (điện thoại): mỗi học viên một khối tách riêng (anh Hùng 17/09/2026) */
.p-list.p-cards { display: flex; flex-direction: column; gap: 8px; overflow: visible; background: transparent; border: 0; box-shadow: none; }
.p-cards > .p-row { background: var(--group-bg); border: 1px solid var(--group-edge); border-radius: 16px; box-shadow: var(--group-shadow); }
.p-cards > .p-row + .p-row { border-top: 1px solid var(--group-edge); }
.p-sl-head .p-tag { background: var(--surface); }
/* Theo học viên (điện thoại): lọc trường · hạng (17/09/2026) */
.p-filt { display: flex; gap: 8px; }
.p-filt select { flex: 1 1 0; min-width: 0; height: 40px; padding: 0 30px 0 14px; border: 1px solid var(--line); border-radius: 20px; background-color: var(--surface);
  font-size: 15px; font-weight: 500; color: var(--label-2); }
/* popup Tính lương trên điện thoại: tên thầy một hàng trên (cạnh ✕), chọn ngày xuống hàng dưới (17/09/2026) */
html[data-ui="m"] .bc-salm-head { flex-wrap: wrap; row-gap: 8px; }
html[data-ui="m"] .bc-salm-title { flex: 1 1 calc(100% - 60px) !important; order: 0; }
html[data-ui="m"] .bc-salm-title > div { white-space: normal !important; }
html[data-ui="m"] .bc-salm-head > button[aria-label="Đóng"] { order: 1; }
html[data-ui="m"] .bc-salm-head > .bc-spin { order: 4; }
html[data-ui="m"] .bc-salm-cal { order: 3; flex: 1 1 calc(100% - 40px); display: flex; }
/* Theo học viên (điện thoại): đầu thẻ xám nổi lên trên phần trắng — bóng mềm, mảnh (anh Hùng 17/09/2026) */
.p-sl-head { position: relative; z-index: 1; border-bottom: 0 !important;
  box-shadow: 0 1px 0 rgba(15,23,42,.06), 0 6px 12px -8px rgba(15,23,42,.28); }
:root[data-theme="dark"] .p-sl-head { box-shadow: 0 1px 0 rgba(0,0,0,.35), 0 8px 14px -8px rgba(0,0,0,.7); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .p-sl-head { box-shadow: 0 1px 0 rgba(0,0,0,.35), 0 8px 14px -8px rgba(0,0,0,.7); } }
/* Theo học viên (điện thoại): đầu mỗi dòng giờ chỉ còn số (vỡ 4/8 · DAT còn 14h / 650km) — 17/09/2026 */
.p-sl-line { display: flex; align-items: center; gap: 10px; padding: 8px 0 8px 14px; }
.p-sl-sum { flex: 0 0 56px; display: flex; flex-direction: column; align-items: flex-start; line-height: 1.2; white-space: nowrap; font-variant-numeric: tabular-nums; }
.p-sl-sum b { font-size: 14px; font-weight: 700; }
.p-sl-sum small { font-size: 14px; font-weight: 600; }
.p-sl-sum.ok { color: var(--green-fg); } .p-sl-sum.warn { color: var(--orange-fg); } .p-sl-sum.bad { color: var(--red-fg); } .p-sl-sum.mut { color: var(--label-3); }
.p-sl-line .p-sl-strip { flex: 1; min-width: 0; }
.p-range-x { flex: 0 0 auto; width: 38px; height: 38px; min-height: 38px !important; border: 0; border-radius: 50%; background: transparent; color: var(--label-3); font-size: 18px; }
/* Theo học viên (điện thoại): báo cáo tổng giờ đã dạy trên đầu (17/09/2026) */
.p-rep { padding: 0; overflow: hidden; }
/* khung "hở" như thống kê Theo thầy (.p-stats5): vạch ngăn không chạm mép thẻ, số căn giữa (anh Hùng 17/09/2026) */
.p-rep-tiles { display: grid; grid-template-columns: repeat(3, 1fr); padding: 12px 4px; text-align: center; }
.p-rep-tiles > div { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 0 6px; min-width: 0; }
.p-rep-tiles > div + div { border-left: 1px solid var(--line-2); }
.p-rep-tiles span { font-size: 12px; color: var(--label-3); }
.p-rep-tiles b { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--label); }
.p-rep-tiles small { font-size: 11.5px; color: var(--label-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.p-rep-foot { margin: 0 14px; padding: 8px 0 10px; border-top: 1px solid var(--line-2); font-size: 12px; color: var(--label-3); text-align: center; }
/* Lịch xe & DAT (điện thoại) — bảng: xe là cột, ngày × ca là dòng; cả bảng kéo ngang một lượt, cột ngày · ca và hàng tên xe đứng yên (17/09/2026) */
.p-sc-wrap { padding: 0; overflow: auto; max-height: calc(100 * var(--dvh1) - 250px); min-height: 260px; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  /* tràn sát 2 mép màn hình để xem ngang được nhiều xe hơn (anh Hùng 17/09/2026) */
  margin-left: calc(-1 * max(16px, env(safe-area-inset-left))); margin-right: calc(-1 * max(16px, env(safe-area-inset-right)));
  border-radius: 0; border-left: 0; border-right: 0; }
.p-sc-t { border-collapse: separate; border-spacing: 0; }
.p-sc-t th, .p-sc-t td { padding: 2px; background: var(--group-bg); }
.p-sc-t thead th { position: sticky; top: 0; z-index: 3; padding: 8px 2px 4px; }
.p-sc-t thead .p-sc-c0 { left: 0; z-index: 5; }
.p-sc-th { min-width: 96px; max-width: 96px; text-align: center; vertical-align: bottom; line-height: 1.2; }
.p-sc-th b { display: block; font-size: 12.5px; font-weight: 700; color: var(--red-fg); }
.p-sc-th b.dat { color: var(--blue-fg); }
.p-sc-th small { display: block; font-size: 10.5px; font-weight: 500; color: var(--label-3); }
.p-sc-d { position: sticky; left: 0; z-index: 2; min-width: 44px; max-width: 44px; vertical-align: middle; text-align: center; line-height: 1.2; }
.p-sc-d b { display: block; font-size: 13px; font-weight: 700; color: var(--label); }
.p-sc-d span { display: block; font-size: 11px; color: var(--label-3); font-variant-numeric: tabular-nums; }
/* mỗi ngày cách nhau một khe như bản máy tính, không kẻ đường ngăn */
.p-sc-t tr.p-sc-first > * { padding-top: 10px; }
.p-sc-t tbody tr:first-child > * { padding-top: 2px; }
.p-sc-d { padding-left: 6px !important; }
.p-sc-t tr.today .p-sc-d b, .p-sc-t tr.today .p-sc-d span { color: var(--tint); }
.p-sc-t tr.today .p-sc-d { color: var(--tint); }
.p-sc-t td .p-sc-cell { width: 96px; min-height: 42px; }
/* Theo học viên (điện thoại): chữ "thiếu …" tô cam như danh sách học viên (17/09/2026) */
.p-sl-head .p-orange { color: var(--orange-fg); font-weight: 500; }
/* bảng lịch xe tự xử lý kéo (p-lich.js › stiffScroll) — tắt cuộn sẵn của máy trong bảng để không chạy song song */
html[data-ui="m"] .p-sc-wrap { touch-action: none; }
/* Theo học viên (điện thoại): vạch ngăn giữa dòng vỡ · DAT · bổ túc chỉ là một gạch ngắn dưới cột số, không chạm khung (anh Hùng 17/09/2026) */
.p-sl-line { border-top: 0 !important; }
.p-sl-line { position: relative; }
.p-sl-line + .p-sl-line::before { content: ''; position: absolute; left: 14px; top: 0; width: 36px; height: 1px; background: var(--line); }
/* ô lọc trường · hạng thấp gọn như nút "Tất cả" ở Hồ sơ gửi (cao 38, chữ 13) — bề ngang giữ nguyên (anh Hùng 17/09/2026) */
html[data-ui="m"] .p-filt select { height: 38px !important; min-height: 38px !important; padding: 0 28px 0 13px !important; border-radius: 19px !important;
  font-size: 13px !important; font-weight: 500; color: var(--label-2); background-position: right 11px center !important; }
/* khoảng giữa dòng vỡ · DAT = khoảng từ dòng vỡ lên mép trên (8px) — anh Hùng 17/09/2026 */
.p-sl .p-sl-line { padding-top: 4px; padding-bottom: 4px; }
.p-sl .p-sl-head + .p-sl-line { padding-top: 8px; }
.p-sl .p-sl-line:last-child { padding-bottom: 8px; }
/* Học viên (điện thoại): thanh chọn hạng thấp gọn như nút "Tất cả" ở Hồ sơ gửi (cao 38, chữ 13) — bề ngang giữ nguyên (anh Hùng 17/09/2026) */
html[data-ui="m"] .p-seg-sm { height: 38px; min-height: 38px; padding: 2px !important; box-sizing: border-box; align-items: stretch; }
html[data-ui="m"] .p-seg-sm .p-seg-btn { min-height: 0 !important; height: 34px; font-size: 13px; font-weight: 500; }
/* Lịch xe (điện thoại): % cỡ bảng ở đầu hàng công cụ */
.p-zoom { flex: 0 0 auto; height: 38px; min-height: 38px !important; padding: 0 14px; border: 1px solid var(--line); border-radius: 19px; background: var(--surface);
  color: var(--label-2); font: inherit; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
/* vuốt tiêu đề đổi màn con (điện thoại): tên cũ trượt ra, tên mới trượt vào đúng chỗ (17/09/2026) */
.p-sub-box { position: relative; overflow: hidden; }
.p-sub-box > span { display: inline-block; white-space: nowrap; }
.p-sub-out { position: absolute; left: 0; top: 0; animation: pSubOut 340ms cubic-bezier(.3,.7,.2,1) forwards; }
.p-sub-in { animation: pSubIn 340ms cubic-bezier(.2,.9,.25,1) both; }
@keyframes pSubOut { from { transform: translateX(var(--x0, 0)); opacity: 1; } to { transform: translateX(var(--x1)); opacity: 0; } }
@keyframes pSubIn { from { transform: translateX(var(--x0)); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .p-sub-out { display: none !important; } .p-sub-in { animation: none; } }
/* ---------- Điện thoại › Quản lý thi (p-thi.js, 17/09/2026) ---------- */
.p-ex { padding: 0; overflow: hidden; }
.p-ex-head { display: flex; align-items: center; gap: 8px; width: 100%; padding: 12px 10px 8px 14px; border: 0; background: transparent; font: inherit; color: var(--label); text-align: left; cursor: pointer; }
.p-ex-head .p-chev { transition: transform .2s; }
.p-ex-bar { height: 4px; margin: 0 14px 12px; border-radius: 2px; background: var(--fill); overflow: hidden; }
.p-ex-bar i { display: block; height: 100%; border-radius: 2px; }
.p-ex-body { border-top: 1px solid var(--line-2); padding: 4px 0 10px; }
.p-ex-item { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 4px 10px 4px 14px; }
.p-ex-item + .p-ex-item { border-top: 1px solid var(--line-2); }
.p-ex-check { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; cursor: pointer; }
.p-ex-check input { flex: 0 0 auto; width: 20px; height: 20px; accent-color: var(--tint); }
.p-ex-check span { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.p-ex-check b { font-size: 14px; font-weight: 500; color: var(--label); }
.p-ex-check b.off { color: var(--label-3); font-weight: 400; }
.p-ex-check small { font-size: 11.5px; color: var(--label-4); font-variant-numeric: tabular-nums; }
.p-ex-count { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 4px; }
.p-ex-count b { min-width: 46px; text-align: center; font-size: 12.5px; font-weight: 600; color: var(--label-2); font-variant-numeric: tabular-nums; }
.p-ex-count button { width: 34px; height: 34px; min-height: 34px !important; padding: 0; border: 1px solid var(--line); border-radius: 17px; background: var(--surface);
  color: var(--tint); font-size: 18px; line-height: 1; }
.p-ex-count button:disabled { opacity: .35; }
.p-ex-marks { margin: 8px 14px 0; padding-top: 10px; border-top: 1px solid var(--line-2); display: flex; flex-direction: column; gap: 7px; }
.p-ex-mark { display: grid; grid-template-columns: 88px minmax(0, 1fr) 48px; align-items: center; gap: 8px; }
.p-ex-mark span { font-size: 12px; color: var(--label-3); }
.p-ex-mark i { height: 6px; border-radius: 3px; background: var(--fill); overflow: hidden; }
.p-ex-mark em { display: block; height: 100%; border-radius: 3px; }
.p-ex-mark small { text-align: right; font-size: 11.5px; color: var(--label-4); font-variant-numeric: tabular-nums; }
.p-ex-day { gap: 12px; }
.p-ex-date { flex: 0 0 auto; display: flex; align-items: baseline; gap: 6px; white-space: nowrap; }
.p-ex-date b { font-size: 16px; font-weight: 700; color: var(--label); font-variant-numeric: tabular-nums; }
.p-ex-date small { min-width: 22px; font-size: 14px; font-weight: 600; color: var(--label-3); }
.p-ex-date.today b, .p-ex-date.today small { color: var(--tint); }
.p-ex-dt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.p-ex-dt b { font-size: 14.5px; font-weight: 600; }
.p-ex-dt span { font-size: 12.5px; color: var(--label-3); overflow-wrap: anywhere; }
/* trang một danh sách thi */
.p-exl > .p-exl-in { display: flex; flex-direction: column; gap: 10px; padding: calc(env(safe-area-inset-top) + 8px) max(16px, env(safe-area-inset-right)) 0 max(16px, env(safe-area-inset-left)); }
.p-exl-top { display: flex; align-items: center; gap: 8px; }
.p-exl-del { height: 36px; min-height: 36px !important; padding: 0 12px; border: 0; border-radius: 18px; background: transparent; color: var(--red-fg); font: inherit; font-size: 13.5px; font-weight: 600; }
.p-exl-head { display: flex; flex-direction: column; gap: 2px; padding: 0 4px; }
.p-exl-head b { font-size: 22px; font-weight: 700; letter-spacing: -.3px; }
.p-exl-head > span { font-size: 13px; color: var(--label-3); }
.p-exl-note { margin-top: 6px; height: 38px; padding: 0 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); font-size: 16px; }
.p-exs { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 10px; }
.p-exs-i { flex: 0 0 22px; padding-top: 2px; font-size: 12px; font-weight: 600; color: var(--label-4); text-align: center; font-variant-numeric: tabular-nums; }
.p-exs-x { flex: 0 0 auto; width: 34px; height: 34px; min-height: 34px !important; padding: 0; border: 0; background: transparent; color: var(--label-4); font-size: 16px; }
.p-exs-f { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.p-exs-f label { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.p-exs-f label.wide { grid-column: 1 / -1; }
.p-exs-f label > span { font-size: 11.5px; font-weight: 600; color: var(--label-3); padding-left: 2px; }
.p-exs-f select, .p-exs-f input { width: 100%; min-width: 0; height: 40px; padding: 0 10px; border: 1px solid var(--line); border-radius: 10px; background-color: var(--surface); font-size: 15px; color: var(--label); }
.p-exs-f label.dirty select, .p-exs-f label.dirty input { border-color: var(--tint); background-color: var(--tint-bg); }
.p-exs-f label.ok select { border-color: var(--green-fg); color: var(--green-fg); font-weight: 600; }
.p-exs-f label.bad select { border-color: var(--red-fg); color: var(--red-fg); font-weight: 600; }
.p-exs-ro span.ok { color: var(--green-fg); font-weight: 600; } .p-exs-ro span.bad { color: var(--red-fg); font-weight: 600; }
/* Quản trị hệ thống: hàng quay lại + tên mục */
html[data-ui="m"] .p-ex-head .p-hsg { grid-template-columns: minmax(0, 1fr) auto; }
.p-ex-head .p-hs-r { white-space: nowrap !important; }
.p-exl { position: fixed; inset: 0; z-index: 60; overflow-y: auto; overscroll-behavior: contain; background: var(--m-bg, var(--wall));
  padding-bottom: env(safe-area-inset-bottom); animation: bcSheet 260ms cubic-bezier(.22,1,.36,1); }
.p-exl > .p-exl-in { max-width: 680px; margin: 0 auto; }
.p-exl .p-fabs { bottom: calc(20px + env(safe-area-inset-bottom)); }
.p-exl .p-fabspace { height: 70px; }
/* Thêm học viên vào danh sách thi (điện thoại, p-thi.js › PickStudents) */
.p-exl.p-pk { z-index: 70; }
.p-pk-on { box-shadow: inset 0 0 0 2px var(--tint) !important; }
.p-pk-av { background: var(--tint) !important; color: #fff !important; font-size: 18px; }
.p-pk-ovl { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 20px; background: var(--scrim, rgba(15,23,42,.35)); animation: bcFade 160ms ease; }
.p-pk-card { width: min(420px, 100%); max-height: calc(80 * var(--dvh1)); display: flex; flex-direction: column; background: var(--surface); border-radius: 20px;
  box-shadow: 0 30px 70px -30px rgba(7,38,68,.6); overflow: hidden; animation: bcPop 180ms cubic-bezier(.22,1,.36,1); }
.p-pk-head { display: flex; flex-direction: column; gap: 2px; padding: 16px 18px 10px; border-bottom: 1px solid var(--line-2); }
.p-pk-head b { font-size: 18px; font-weight: 700; }
.p-pk-head span { font-size: 13px; color: var(--label-3); }
.p-pk-rows { overflow-y: auto; padding: 4px 18px; }
.p-pk-rows > div { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; font-size: 14px; }
.p-pk-rows > div + div { border-top: 1px solid var(--line-2); }
.p-pk-rows span { color: var(--label-3); flex: 0 0 auto; }
.p-pk-rows b { font-weight: 600; text-align: right; overflow-wrap: anywhere; }
.p-pk-acts { display: flex; align-items: center; gap: 8px; padding: 12px 16px 14px; border-top: 1px solid var(--line-2); }
/* danh sách thi (điện thoại): dòng gọn + thẻ sửa giữa màn */
.p-exr { gap: 10px; }
.p-exr-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.p-exr-t b { font-size: 15px; font-weight: 600; color: var(--label); }
.p-exr-t span { font-size: 12.5px; color: var(--label-3); }
.p-exr-t em { font-style: normal; color: var(--orange-fg); font-weight: 500; }
.p-pk-f { padding: 12px 16px 4px; }
.p-pk-acts .p-btn { padding: 0 14px; }
.p-btn-red { color: var(--red-fg) !important; }
.p-pk-dob { font-size: 12.5px; font-weight: 400; color: var(--label-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* nút ‹ quay về ngay trước tiêu đề (mục Thêm) */
.p-back-ico { flex: 0 0 auto; align-self: center; width: 36px; height: 44px; min-height: 44px !important; margin: 0 -6px 0 -10px; padding: 0; border: 0; background: transparent;
  color: var(--tint); font-size: 38px; font-weight: 300; line-height: 1; cursor: pointer; }
.p-exl-top { min-height: 48px; }
.p-exl-title { flex: 1; min-width: 0; font-size: 26px; font-weight: 700; letter-spacing: -.5px; color: var(--label); }
.p-exl .p-back-ico { margin-left: -8px; }
.p-exl .p-exl-head > span:first-child { padding-left: 26px; }
.p-sc-th small.p-sc-tag { font-size: 11px; font-weight: 700; color: var(--blue-fg); opacity: .75; letter-spacing: .2px; }
/* ---------- Điện thoại › Quản trị hệ thống làm lại riêng (p-admin.js, 17/09/2026) ---------- */
.p-ad-row, .p-ad-user, .p-ad-trash, .p-ad-log, .p-ad-perm { gap: 10px; }
.p-ad-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.p-ad-t > b { font-size: 15px; font-weight: 600; color: var(--label); overflow-wrap: anywhere; }
.p-ad-t > span { font-size: 12.5px; color: var(--label-3); overflow-wrap: anywhere; }
.p-ad-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 3px; grid-column: 1 / -1; }
.p-ad-dates { flex: 0 0 auto; display: grid; text-align: right; font-size: 11.5px; line-height: 1.25; color: var(--label-4); font-variant-numeric: tabular-nums; }
.p-ad-log small { flex: 0 0 auto; font-size: 11.5px; color: var(--label-4); font-variant-numeric: tabular-nums; }
.p-ad-trash .p-btn { min-height: 34px !important; height: 34px; padding: 0 12px; font-size: 13px; }
.p-ad-secret { user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.p-ad-perm { cursor: pointer; }
.p-ad-perm.changed { background: var(--orange-bg); }
input[type="checkbox"].p-switch { -webkit-appearance: none; appearance: none; flex: 0 0 auto; width: 51px !important; height: 31px !important; margin: 0; padding: 0;
  border-radius: 16px !important; border: 0 !important; background: var(--fill-2, #D1D5DB) !important; position: relative; cursor: pointer; transition: background .2s; min-height: 0 !important; }
input[type="checkbox"].p-switch::after { content: ''; position: absolute; top: 2px; left: 2px; width: 27px; height: 27px; border: 0 !important; border-radius: 50%;
  background: #fff; box-shadow: 0 2px 5px rgba(0,0,0,.2); transition: transform .2s; transform: none !important; }
input[type="checkbox"].p-switch:checked { background: var(--green, #34C759) !important; }
input[type="checkbox"].p-switch:checked::after { transform: translateX(20px) !important; }
.p-red { color: var(--red-fg); }
.p-quota { display: flex; flex-direction: column; gap: 8px; padding: 14px; }
.p-q-top { display: flex; align-items: baseline; gap: 10px; }
.p-q-name { flex: 1; min-width: 0; font-size: 16px; font-weight: 600; color: var(--label); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.p-q-left { flex: 0 0 auto; font-size: 13px; color: var(--label-3); font-variant-numeric: tabular-nums; }
.p-q-left b { margin-right: 4px; font-size: 22px; font-weight: 700; letter-spacing: -.3px; color: var(--green-fg); }
.p-quota.over .p-q-left b { margin-right: 0; font-size: 17px; color: var(--red-fg); }
.p-q-bar { height: 8px; border-radius: 4px; background: var(--fill); overflow: hidden; }
.p-q-bar i { display: block; height: 100%; border-radius: 4px; background: var(--tint); }
.p-quota.over .p-q-bar i { background: var(--red); }
.p-q-row { display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px; color: var(--label-3); font-variant-numeric: tabular-nums; }
.p-q-row > span:last-child { text-align: right; }
.p-q-row b { font-weight: 600; color: var(--label); }
.p-q-schools { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 8px; border-top: 1px solid var(--line-2); }
.p-q-schools span { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 4px 0 10px; border-radius: 13px;
  background: var(--fill); font-size: 12.5px; color: var(--label-2); }
.p-q-schools b { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--surface); font-size: 12px; font-weight: 600;
  color: var(--label); display: inline-grid; place-items: center; font-variant-numeric: tabular-nums; }

/* ĐIỆN THOẠI › HS CTV › Quỹ CTV (phone/p-hoso.js › PFund, 17/09/2026) */
.p-fund-row { padding: 12px 10px 12px 14px; }
.p-fbal.pos, .p-famt.pos, .p-fcard-bal.pos { color: var(--green-fg); }
.p-fbal.neg, .p-famt.neg, .p-fcard-bal.neg { color: var(--red-fg); }
b.p-hs-r.p-fbal { font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }
b.p-hs-r.p-famt { font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }
.p-fund-row .p-orange, .p-frow .p-orange { color: var(--orange-fg); font-weight: 500; }
.p-fcard { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 18px 16px 16px; text-align: center; }
.p-fcard-name { font-size: 13px; font-weight: 500; color: var(--label-3); }
.p-fcard-bal { font-size: 34px; font-weight: 700; letter-spacing: -.8px; font-variant-numeric: tabular-nums; line-height: 1.15; }
.p-fcard-sub { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 16px; margin-top: 8px; padding-top: 10px; width: 100%;
  border-top: 1px solid var(--line-2); font-size: 12.5px; color: var(--label-3); }
.p-fcard-sub span { display: inline-flex; align-items: center; gap: 6px; }
.p-fcard-sub b { font-weight: 600; color: var(--label); font-variant-numeric: tabular-nums; }
.p-fcard-sub i { width: 7px; height: 7px; border-radius: 50%; background: var(--orange); }
.p-fcard-sub i.no { background: var(--red); }
.p-frow { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; }
.p-frow + .p-frow { border-top: 1px solid var(--line-2); }
.p-frow .p-hs .p-tag, .p-frow .p-tag { display: inline-block; padding: 0 8px; line-height: 20px; vertical-align: top; }
.p-tag.no { background: var(--fill); color: var(--label-3); }
.p-hs-note { grid-column: 1 / -1; font-size: 12px; color: var(--label-3); line-height: 18px; }
.p-facts { display: flex; align-items: center; gap: 8px; }
.p-frow > * { width: 100%; align-self: stretch; text-align: left; }
.p-tag.warn { background: var(--orange-bg); color: var(--orange-fg); }
/* nhấn giữ 1 giây mở menu lịch sử (lib/history.js) — tắt bảng "Sao chép / Tra cứu" của iOS trên ô có lịch sử */
html[data-ui="m"] [data-hist] { -webkit-touch-callout: none; }

/* ĐIỆN THOẠI › Học viên (phone/p-hocvien.js, 17/09/2026) — dùng lại lưới .p-hs của HS CTV */
.p-hs .p-c-ok { color: var(--green-fg); }
.p-hs .p-c-red { color: var(--red-fg); font-weight: 600; }
.p-hs .p-c-tint { color: var(--tint); font-weight: 600; }
.p-hs .p-okb { color: var(--green-fg); }
.p-hs-bars { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 4px; }
.p-bar2 { display: block; }
.p-bar2 > span { display: flex; justify-content: space-between; gap: 6px; font-size: 11.5px; line-height: 16px; color: var(--label-3); }
.p-bar2 > span b { font-weight: 600; color: var(--label-2); font-variant-numeric: tabular-nums; }
.p-bar2 i { display: block; height: 5px; margin-top: 3px; border-radius: 3px; background: var(--fill); overflow: hidden; }
.p-bar2 i b { display: block; height: 100%; border-radius: 3px; background: var(--tint); }
.p-bar2 i b.full { background: var(--green); }
.p-tag.red { background: var(--red-bg); color: var(--red-fg); }
.p-tag.exam { background: var(--tint); color: #fff; }

/* DẤU ✕ ĐÓNG TO HƠN TRÊN ĐIỆN THOẠI (anh Hùng 17/09/2026): mọi nút Đóng 44×44, dấu ✕ cỡ 20px · nút ✕ của thông báo nhỏ 32×32 */
html[data-ui="m"] button[aria-label="Đóng"], html[data-ui="m"] .p-x {
  width: 44px !important; height: 44px !important; min-height: 44px !important; flex: 0 0 44px !important;
  font-size: 20px !important; line-height: 1 !important; color: var(--label-3) !important; }
html[data-ui="m"] button[aria-label="Đóng thông báo"] { width: 32px !important; height: 32px !important; min-height: 32px !important; flex: 0 0 32px !important; font-size: 15px !important; }

/* Học viên: trường gọn góc trái + nút tìm góc phải (17/09/2026) */
.p-toolrow { display: flex; align-items: center; gap: 10px; min-height: 44px; }
.p-toolrow > div { flex: 1 1 auto; }
.p-pick { flex: 0 1 auto; max-width: 70%; height: 38px; padding: 0 30px 0 14px; border: 1px solid var(--glass-edge); border-radius: 19px;
  background: var(--glass-strong) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5 6 7.5 9 4.5' fill='none' stroke='%238A8F98' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 12px center;
  -webkit-appearance: none; appearance: none; color: var(--label); font-size: 15px !important; font-weight: 600; text-overflow: ellipsis;
  box-shadow: inset 0 1px 0 var(--glass-hi), 0 6px 16px -10px rgba(12,40,90,.45); }
.p-pick-one { font-size: 16px; font-weight: 600; color: var(--label); }
/* nút tìm (lib/searchbox.js) trên điện thoại: to bằng các nút tròn khác */
html[data-ui="m"] .p-toolrow button[aria-label="Tìm trong danh sách"], html[data-ui="m"] .p-fabs-left button[aria-label="Tìm trong danh sách"] {
  width: 44px !important; height: 44px !important; flex: 0 0 44px !important; }
/* Hồ sơ gửi: nút tìm nổi góc dưới trái, cùng hàng "Gửi hồ sơ"; mở ra thì chiếm cả hàng */
.p-fabs-left { position: fixed; left: max(16px, env(safe-area-inset-left)); bottom: calc(76px + env(safe-area-inset-bottom)); z-index: 35;
  display: flex; align-items: center; height: 50px; }
.p-fabs-left.open { right: max(16px, env(safe-area-inset-right)); }
.p-fabs-left.open > div { flex: 1; height: 46px !important; box-shadow: 0 12px 26px -14px rgba(10,30,70,.45) !important; }
.p-fabs-left.open input { font-size: 16px !important; }
@media (min-width: 700px) { .p-fabs-left { bottom: calc(66px + env(safe-area-inset-bottom)); } }
html[data-ui="m"] .p-toolrow button[aria-label="Tìm trong danh sách"] > span, html[data-ui="m"] .p-fabs-left button[aria-label="Tìm trong danh sách"] > span { transform: scale(1.35); }
.p-toolrow > div { height: 44px !important; }
.p-toolrow > div input { font-size: 16px !important; }
html[data-ui="m"] .p-fabs-left button[aria-label="Tìm trong danh sách"] { width: 50px !important; height: 50px !important; flex: 0 0 50px !important; }

/* ĐIỆN THOẠI: KHÔNG CẮT CHỮ THÀNH "…" (anh Hùng 17/09/2026) — nhất là tên thầy: chữ dài thì xuống dòng.
   Áp cho mọi chỗ trên điện thoại: các màn .p-… và popup / hồ sơ bản máy tính (kiểu viết tay text-overflow: ellipsis).
   Giữ cắt ở: nhãn thanh đáy (.p-tab), khối buổi dạy trên dòng thời gian (.p-ev — ô cao cố định), ô chọn / ô nhập. */
html[data-ui="m"] .p-hs-name, html[data-ui="m"] .p-hs-l, html[data-ui="m"] .p-q-name, html[data-ui="m"] .p-rmain b, html[data-ui="m"] .p-rmain span,
html[data-ui="m"] .p-fname b, html[data-ui="m"] .p-li > span:last-child, html[data-ui="m"] .p-gcell-name b, html[data-ui="m"] .p-gcell-name span,
html[data-ui="m"] .p-more-row small,
html[data-ui="m"] :is(div, span, b, a, label, p, button):not(.p-tab *):not(.p-ev *)[style*="text-overflow: ellipsis"] {
  white-space: normal !important; overflow: visible !important; text-overflow: clip !important; overflow-wrap: anywhere; }
html[data-ui="m"] .p-hs-r { white-space: normal; max-width: 46vw; }
html[data-ui="m"] .p-tag { white-space: normal !important; overflow: visible !important; text-overflow: clip !important; max-width: none !important;
  line-height: 18px !important; padding-top: 1px !important; padding-bottom: 1px !important; text-align: center; }
html[data-ui="m"] .p-pick { max-width: calc(100% - 56px); }
/* cột trái (tên, khoá · thầy) luôn rộng ít nhất 58% — cột phải dài thì tự xuống dòng trong phần còn lại */
html[data-ui="m"] .p-hsg { grid-template-columns: minmax(58%, 1fr) minmax(0, auto); }
html[data-ui="m"] .p-hs-r { max-width: none; }
html[data-ui="m"] .p-hs-r.p-orange, html[data-ui="m"] .p-hs-r.p-c-ok { white-space: nowrap; }
/* tên trường trên điện thoại: khung xanh kính lỏng (liquid glass) cho nổi bật (anh Hùng 17/09/2026) — lớp sáng trên + vệt phản chiếu + viền trong */
html[data-ui="m"] .p-pick {
  height: 42px; padding: 0 34px 0 16px !important; border: 1px solid rgba(255,255,255,.35); border-radius: 21px; color: #fff; font-weight: 600;
  background-color: var(--tint) !important;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"),
    linear-gradient(180deg, rgba(255,255,255,.34) 0%, rgba(255,255,255,.08) 46%, rgba(255,255,255,0) 52%),
    linear-gradient(135deg, color-mix(in srgb, var(--tint) 85%, #5AC8FA) 0%, var(--tint) 55%, color-mix(in srgb, var(--tint) 80%, #1B2A6B) 100%) !important;
  background-repeat: no-repeat, no-repeat, no-repeat !important;
  background-position: right 13px center, 0 0, 0 0 !important;
  background-size: 14px 14px, 100% 100%, 100% 100% !important;
  -webkit-backdrop-filter: blur(18px) saturate(180%); backdrop-filter: blur(18px) saturate(180%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55), inset 0 -1px 0 rgba(0,0,0,.12), 0 10px 24px -12px color-mix(in srgb, var(--tint) 75%, transparent) !important;
  text-shadow: 0 1px 1px rgba(0,0,0,.15); }
html[data-ui="m"] .p-pick option { color: var(--label); background: var(--surface); text-shadow: none; }

/* Học viên: nút kiểu xem Học / Thi + 6 ô tiến độ thi (17/09/2026) */
.p-view { flex: 0 0 auto; display: inline-flex; padding: 3px; border-radius: 22px; background: var(--fill); }
.p-view button { min-height: 38px !important; min-width: 46px; padding: 0 12px; border: 0; border-radius: 19px; background: transparent;
  color: var(--label-3); font-size: 14px; font-weight: 600; cursor: pointer; }
.p-view button[aria-pressed="true"] { background: var(--surface); color: var(--label); box-shadow: 0 1px 3px rgba(7,38,68,.18); }
html[data-ui="m"] .p-pick { max-width: calc(100% - 170px); }
.p-steps2 { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; margin-top: 5px; }
.p-steps2 > span { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 4px 2px; border-radius: 8px; background: var(--fill); text-align: center; }
.p-steps2 b { font-size: 10px; font-weight: 600; line-height: 12px; color: var(--label-4); white-space: normal; }
.p-steps2 i { font-style: normal; font-size: 11px; font-weight: 600; line-height: 14px; color: var(--label-5); font-variant-numeric: tabular-nums; }
.p-steps2 > span.on { background: var(--green-bg); }
.p-steps2 > span.on b, .p-steps2 > span.on i { color: var(--green-fg); }
.p-steps2 > span.bad { background: var(--red-bg); }
.p-steps2 > span.bad b, .p-steps2 > span.bad i { color: var(--red-fg); }
.p-steps2 b { min-height: 24px; display: flex; align-items: center; justify-content: center; }
.p-steps2 > span.plan { background: var(--tint-bg); }
.p-steps2 > span.plan b, .p-steps2 > span.plan i { color: var(--tint); }
.p-steps2 > span { padding: 5px 2px; justify-content: center; min-height: 34px; }
.p-hs .p-fin { grid-column: 2; grid-row: 1 / span 2; align-self: center; display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.p-hs .p-fin .p-orange { white-space: nowrap; font-size: 12.5px; }
.p-hs .p-fin ~ .p-hs-l { grid-column: 1; }
/* chỉ một trường: vẫn khung xanh kính lỏng như ô chọn (không có mũi tên) */
html[data-ui="m"] .p-pick-one { display: inline-flex; align-items: center; height: 42px; max-width: calc(100% - 170px); padding: 0 16px; border-radius: 21px;
  border: 1px solid rgba(255,255,255,.35); color: #fff; font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  background: linear-gradient(180deg, rgba(255,255,255,.34) 0%, rgba(255,255,255,.08) 46%, rgba(255,255,255,0) 52%),
    linear-gradient(135deg, color-mix(in srgb, var(--tint) 85%, #5AC8FA) 0%, var(--tint) 55%, color-mix(in srgb, var(--tint) 80%, #1B2A6B) 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55), inset 0 -1px 0 rgba(0,0,0,.12), 0 10px 24px -12px color-mix(in srgb, var(--tint) 75%, transparent);
  text-shadow: 0 1px 1px rgba(0,0,0,.15); }

/* Học viên: nhấn giữ vào chữ cái để kéo đổi thứ tự (17/09/2026) — tắt bảng sao chép / chọn chữ của máy khi giữ */
.p-av-drag { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
.p-dragging { overflow: visible; -webkit-user-select: none; user-select: none; }
.p-dragging .p-row[style*="z-index: 5"] .p-av { background: var(--tint); color: #fff; }

/* thẻ xem nhanh học viên khi rê chuột vào tên (lib/stuprog.js › StudentPeek, 17/09/2026) — cùng lưới / thanh / ô với bản điện thoại */
.p-peek { position: fixed; z-index: 70; padding: 12px 14px 14px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line);
  box-shadow: 0 22px 46px -24px rgba(7,38,68,.55); pointer-events: none; animation: bcFade 120ms ease; }
.p-peek .p-hsg { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 10px; row-gap: 2px; align-items: center; }
.p-peek-sec { grid-column: 1 / -1; margin-top: 9px; font-size: 10.5px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; color: var(--label-4); }
.p-peek .p-hs-bars, .p-peek .p-steps2 { margin-top: 3px; }
.p-peek .p-tag { display: inline-block; padding: 0 8px; line-height: 20px; border-radius: 99px; font-size: 11.5px; font-weight: 600; }
.p-peek .p-orange { color: var(--orange-fg); font-weight: 500; }
.p-peek .p-c-ok { color: var(--green-fg); }
html[data-ui="m"] .p-pick, html[data-ui="m"] .p-pick-one { max-width: calc(100% - 118px); }

/* ĐIỆN THOẠI: nhấn giữ 1 giây = chuột phải ở MỌI chỗ có menu chuột phải (lib/history.js) — tắt bảng chọn chữ / sao chép của máy
   để không che menu; ô nhập vẫn chọn chữ, dán bình thường (anh Hùng 17/09/2026) */
html[data-ui="m"] body { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
html[data-ui="m"] :is(input, textarea, select, [contenteditable="true"]) { -webkit-touch-callout: default; -webkit-user-select: text; user-select: text; }
.p-peek-dot { display: inline-block; width: 8px; height: 8px; margin-left: 7px; border-radius: 50%; vertical-align: middle; }
.p-peek-exp { grid-column: 1 / -1; margin-top: 2px; font-size: 12px; font-weight: 500; }
/* ô nhập có lịch sử (data-hist): lúc CHƯA bấm vào ô thì nhấn giữ không bôi đen chữ / không hiện "Cắt · Sao chép · Dán" của máy
   (để hiện menu Xem lịch sử chỉnh sửa); bấm vào ô để gõ thì chọn chữ, dán như thường (anh Hùng 17/09/2026) */
html[data-ui="m"] [data-hist] :is(input, textarea):not(:focus), html[data-ui="m"] :is(input, textarea)[data-hist]:not(:focus) {
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
/* bảng học viên: chọn vùng ô bằng chuột thay cho bôi đen chữ của trình duyệt (luôn lấy cả dòng) — chép bằng Ctrl/Cmd+C */
table.bc-gridsel tbody td { -webkit-user-select: none; user-select: none; }
table.bc-gridsel input, table.bc-gridsel textarea { -webkit-user-select: text; user-select: text; }
/* thanh trên điện thoại: chuông thông báo và ảnh đại diện cùng cỡ 42px (anh Hùng 17/09/2026) */
.p-top .p-bell { padding: 0; }
.p-top .p-bell button[aria-label="Thông báo"] { width: 42px !important; height: 42px !important; min-height: 42px !important; }
.p-top .p-bell button[aria-label="Thông báo"] svg { width: 21px; height: 21px; }
.p-top .p-me { width: 42px; height: 42px; }

/* ĐIỆN THOẠI › Đào tạo › Theo ngày (phone/p-daotao.js › PDay, 17/09/2026) — mỗi thầy một thanh 6h–22h */
.p-dv { overflow: hidden; padding: 0; }
.p-dv-scale { display: grid; grid-template-columns: 96px 1fr; padding: 10px 14px 2px; font-size: 10.5px; color: var(--label-4); font-variant-numeric: tabular-nums; }
.p-dv-scale > div { position: relative; height: 14px; }
.p-dv-scale > div span { position: absolute; transform: translateX(-50%); }
.p-dv-scale > div span.first { transform: none; } .p-dv-scale > div span.last { transform: translateX(-100%); }
.p-dv-item + .p-dv-item { border-top: 1px solid var(--line-2); }
.p-dv-row { display: grid; grid-template-columns: 96px 1fr; align-items: center; width: 100%; padding: 10px 14px; border: 0; background: transparent;
  text-align: left; color: var(--label); cursor: pointer; }
.p-dv-name { min-width: 0; padding-right: 8px; }
.p-dv-name b { display: block; font-size: 14px; font-weight: 600; line-height: 1.25; }
.p-dv-name span { display: block; font-size: 11.5px; color: var(--label-3); }
.p-dv-item.idle .p-dv-row { opacity: .55; }
.p-dv-bar { position: relative; display: block; height: 26px; border-radius: 8px; background: var(--fill); overflow: hidden; }
.p-dv-tick { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--line); }
.p-dv-blk { position: absolute; top: 4px; bottom: 4px; border-radius: 4px; background: var(--k); box-shadow: 0 0 0 1px var(--group-bg, #fff); }
.p-dv-blk.wait { background-image: repeating-linear-gradient(135deg, transparent 0 4px, rgba(255,255,255,.45) 4px 8px); }
.p-dv-now { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--red); z-index: 1; }
.p-dv-det { display: flex; flex-direction: column; gap: 4px; padding: 0 14px 12px; }
.p-dv-ses { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 48px; padding: 6px 10px; border: 0; border-radius: 12px;
  background: color-mix(in srgb, var(--k) 10%, var(--group-bg, var(--surface))); text-align: left; color: var(--label); cursor: pointer; }
.p-dv-ses .p-kd { margin-right: 0; }
.p-dv-ses-t { flex: 1; min-width: 0; }
.p-dv-ses-t b { display: block; font-size: 14px; font-weight: 600; color: var(--k); }
.p-dv-ses-t span { display: block; font-size: 12px; color: var(--label-3); font-variant-numeric: tabular-nums; }
.p-dv-empty { padding: 6px 2px; font-size: 13px; color: var(--label-4); }
.p-dv-det .p-btn { align-self: flex-start; margin-top: 2px; }
.p-dv-det .p-btn svg { width: 15px; height: 15px; }
/* vạch đỏ giờ hiện tại nằm DƯỚI các khối buổi — như "Theo ngày" bản máy tính (anh Hùng 17/09/2026) */
.p-dv-now { z-index: 0; } .p-dv-blk { z-index: 1; }
/* Theo ngày: vạch đỏ nối liền qua các dòng thầy (anh Hùng 17/09/2026) — vạch nằm trong cả dòng (trên viền ngăn dòng), dưới khối buổi */
.p-dv-row { position: relative; }
.p-dv-item { position: relative; }
.p-dv-row .p-dv-now { position: absolute; top: -1px; bottom: 0; width: 2px; margin-left: -1px; background: var(--red); z-index: 1; pointer-events: none; }
.p-dv-bar .p-dv-blk { z-index: 2; }
.p-dv-item.idle .p-dv-row { opacity: 1; }
.p-dv-item.idle .p-dv-name, .p-dv-item.idle .p-dv-bar { opacity: .55; }
.p-stats2 { grid-template-columns: repeat(2, 1fr); }
.p-stats b.p-muted-b { color: var(--label-3); }
.p-dv-blk.dim { opacity: .25; }   /* đang tìm: khối buổi không khớp mờ đi */
/* nút ✕ trong ô tìm (lib/searchbox.js) trên điện thoại: to cho dễ bấm (anh Hùng 17/09/2026) */
html[data-ui="m"] button[title="Đóng ô tìm"] { width: 34px !important; height: 34px !important; min-height: 34px !important; flex: 0 0 34px !important;
  margin-right: -6px; font-size: 17px !important; color: var(--label-3) !important; background: transparent !important; }
/* Theo thầy: dòng hôm nay tên xanh; vạch đỏ chỉ trong dòng hôm nay */
.p-dv-item.today .p-dv-name b { color: var(--tint); }
.p-dv-row .p-dv-now.short { top: 8px; bottom: 8px; border-radius: 1px; }
/* Theo thầy: nút khoảng ngày + lịch chọn + 5 ô thống kê (17/09/2026) */
.p-range { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 14px; border: 0; text-align: left; color: var(--label); cursor: pointer; }
.p-range-t { flex: 1; min-width: 0; }
.p-range-t b { display: block; font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.p-range-t span { display: block; font-size: 12px; color: var(--label-3); }
.p-cal { display: flex; justify-content: center; }
.p-cal .bc-pane { width: 100% !important; max-width: 400px; }
.p-cal .bc-pane button { min-height: 40px !important; }
.p-stats5 { display: grid; grid-template-columns: repeat(6, 1fr); row-gap: 10px; padding: 12px 4px; text-align: center; }
.p-stats5 > div { grid-column: span 2; }
.p-stats5 > div:nth-child(1), .p-stats5 > div:nth-child(2) { grid-column: span 3; }
.p-stats5 > div:nth-child(2), .p-stats5 > div:nth-child(4), .p-stats5 > div:nth-child(5) { border-left: 1px solid var(--line-2); }
.p-stats5 b { display: block; font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--label); }
.p-stats5 b.p-muted-b { color: var(--label-3); }
.p-stats5 span { font-size: 12px; color: var(--label-3); }
.p-app .p-cal .bc-pane { position: relative !important; left: auto !important; right: auto !important; top: auto !important; max-height: none !important; }
.p-range-chev { flex: 0 0 auto; display: inline-flex; color: var(--label-3); transition: transform 180ms ease; }
.p-range2 { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; height: 42px; padding: 0 10px 0 14px; border: 1px solid var(--glass-edge);
  border-radius: 21px; background: var(--glass-strong); box-shadow: inset 0 1px 0 var(--glass-hi), 0 6px 16px -10px rgba(12,40,90,.45);
  color: var(--label); text-align: right; cursor: pointer; }
.p-range2 .p-range-t b { font-size: 14px; line-height: 1.15; }
.p-range2 .p-range-t span { font-size: 11px; line-height: 1.2; }
html[data-ui="m"] .p-toolrow .p-pick, html[data-ui="m"] .p-toolrow .p-pick-one { min-width: 0; }

/* ĐIỆN THOẠI › Đào tạo › Theo học viên (p-daotao.js › PStudentLog, 17/09/2026) */
.p-sl { padding: 0; overflow: hidden; }
.p-sl-head { display: flex; align-items: center; gap: 8px; width: 100%; padding: 12px 10px 10px 14px; border: 0; border-bottom: 1px solid var(--line-2); background: color-mix(in srgb, var(--label) 14%, var(--group-bg)); text-align: left; cursor: pointer; color: var(--label); }
.p-sl-dot { display: inline-block; width: 7px; height: 7px; margin-left: 6px; border-radius: 50%; background: var(--red); vertical-align: middle; }
.p-sl-line { padding: 8px 0 10px 14px; border-top: 1px solid var(--line-2); }
.p-sl-left.ok { color: var(--green-fg); } .p-sl-left.warn { color: var(--orange-fg); } .p-sl-left.bad { color: var(--red-fg); } .p-sl-left.mut { color: var(--label-3); }
.p-sl-strip { display: flex; align-items: center; gap: 6px; overflow-x: auto; padding-right: 14px; scrollbar-width: none; }
.p-sl-strip::-webkit-scrollbar { display: none; }
.p-sl-chip { position: relative; flex: 0 0 auto; display: inline-flex; align-items: center; gap: 3px; height: 34px; min-height: 34px !important; padding: 0 10px;
  border: 1.5px solid transparent; border-radius: 10px; background: color-mix(in srgb, var(--k) 14%, var(--group-bg, var(--surface)));
  color: var(--k); font-size: 12.5px; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; cursor: pointer; }
.p-sl-chip i { font-style: normal; font-size: 10.5px; opacity: .8; }
.p-sl-chip.fut { background: transparent; border: 1.5px dashed var(--k); }
.p-sl-chip.pre { --k: var(--label-3); cursor: default; }
.p-sl-bad { position: absolute; top: 4px; right: 4px; width: 6px; height: 6px; border-radius: 50%; background: var(--red); }
.p-sl-none { flex: 0 0 auto; font-size: 12.5px; color: var(--label-4); }
.p-sl-add { flex: 0 0 34px; width: 34px; height: 34px; min-height: 34px !important; display: grid; place-items: center; padding: 0; border: 1px dashed var(--line);
  border-radius: 10px; background: var(--surface); color: var(--tint); cursor: pointer; }
.p-sl-add svg { width: 16px; height: 16px; }

/* ĐIỆN THOẠI › Xăng xe (p-daotao.js › PFuel, 17/09/2026) */
.p-fu-day { padding: 0; overflow: hidden; }
.p-fu-dh { padding: 10px 14px 4px; font-size: 12px; font-weight: 700; letter-spacing: .3px; text-transform: uppercase; color: var(--label-3); }
.p-fu-dh.today { color: var(--tint); }
.p-fu-row { position: relative; display: flex; align-items: center; gap: 12px; width: 100%; padding: 8px 14px; border: 0; background: transparent;
  text-align: left; color: var(--label); cursor: pointer; }
.p-fu-row + .p-fu-row { border-top: 1px solid var(--line-2); }
.p-fu-row.rep { background: var(--purple-bg); } .p-fu-row.adv { background: var(--orange-bg); }
/* ảnh bill · hoá đơn trong danh sách Xăng xe: tỉ lệ ảnh chụp màn hình 9/16 như mọi khung bill (anh Hùng 18/09/2026) */
.p-fu-th { flex: 0 0 30px; width: 30px; height: 53px; border-radius: 7px; object-fit: cover; background: #0E1A27; display: grid; place-items: center;
  font-size: 9px; font-weight: 800; }
.p-fu-th.pdf { background: var(--red-bg); color: var(--red-fg); } .p-fu-th.miss { background: var(--red-bg); border: 1.5px dashed var(--red-bd); }
.p-fu-th.tool { background: var(--surface); font-size: 18px; }
.p-fu-row .p-hsg { flex: 1; }
.p-fu-dot { position: absolute; top: 6px; left: 44px; width: 9px; height: 9px; border-radius: 50%; background: var(--red); border: 2px solid var(--group-bg, #fff); }
.p-fabs .p-fab.alt { padding: 0 14px; }

/* ĐIỆN THOẠI › Việc của thầy + Lượng việc (p-them.js, 17/09/2026) */
.p-tk { padding: 0; overflow: hidden; }
.p-tk-head { display: flex; align-items: center; gap: 8px; width: 100%; padding: 12px 10px 12px 14px; border: 0; background: transparent; text-align: left;
  color: var(--label); cursor: pointer; }
.p-tk-head .p-hsg { flex: 1; }
.p-tk-head small { font-size: 11px; font-weight: 500; color: var(--label-4); }
.p-tk-head .p-chev { transition: transform 160ms ease; }
.p-tk-nums { display: inline-flex; gap: 5px; }
.p-tk-n { min-width: 26px; height: 22px; padding: 0 6px; border-radius: 11px; display: inline-grid; place-items: center; font-size: 12.5px; font-weight: 700;
  font-variant-numeric: tabular-nums; }
.p-tk-n.plum { background: var(--purple-bg); color: var(--purple-fg); } .p-tk-n.red { background: var(--red-bg); color: var(--red-fg); }
.p-tk-n.warn { background: var(--orange-bg); color: var(--orange-fg); } .p-tk-n.zero { color: var(--label-5); }
.p-tk-list { border-top: 1px solid var(--line-2); }
.p-tk-row { display: flex; align-items: flex-start; gap: 10px; padding: 10px 14px; }
.p-tk-row + .p-tk-row { border-top: 1px solid var(--line-2); }
.p-tk-row .p-tag { flex: 0 0 auto; margin-top: 1px; }
.p-tk-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.p-tk-t b { font-size: 14px; font-weight: 600; color: var(--label); }
.p-tk-t span { font-size: 12.5px; color: var(--label-3); }
.p-tk-miss, .p-tk-red { color: var(--red-fg) !important; font-weight: 600; }
.p-tag.plum { background: var(--purple-bg); color: var(--purple-fg); } .p-tag.warnt { background: var(--orange-bg); color: var(--orange-fg); }
.p-tag.mut { background: var(--fill); color: var(--label-3); }
.p-lw { padding: 0; overflow: hidden; }
.p-lw-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--line-2); }
.p-lw-head b { font-size: 15px; font-weight: 600; }
.p-lw-tiles { display: grid; grid-template-columns: 1fr 1fr; }
.p-lw-tiles > div { display: flex; flex-direction: column; gap: 2px; padding: 10px 14px; border-bottom: 1px solid var(--line-2); }
.p-lw-tiles > div:nth-child(odd) { border-right: 1px solid var(--line-2); }
.p-lw-tiles span { font-size: 11.5px; font-weight: 600; color: var(--label-3); }
.p-lw-tiles b { font-size: 21px; font-weight: 700; letter-spacing: -.3px; font-variant-numeric: tabular-nums; }
.p-lw-tiles b i { font-style: normal; font-size: 12px; font-weight: 500; color: var(--label-3); }
.p-lw-tiles small { font-size: 11.5px; color: var(--label-3); }
.p-lw-lines { display: flex; flex-direction: column; gap: 4px; padding: 10px 14px; font-size: 13px; color: var(--label-2); line-height: 1.45; }
.p-lw-cars { border-top: 1px solid var(--line-2); }
.p-lw-car { padding: 8px 14px; } .p-lw-car + .p-lw-car { border-top: 1px solid var(--line-2); }
.p-lw-foot { padding: 8px 14px 12px; font-size: 11.5px; color: var(--label-4); border-top: 1px solid var(--line-2); }
.p-tk-head .p-tk-nums { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 8px; }
.p-tk-nums > span { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 0; border-radius: 10px; background: var(--fill); }
.p-tk-nums small { font-size: 11px !important; color: var(--label-3); }
.p-tk-nums .p-tk-n { min-width: 0; height: auto; padding: 0; background: transparent !important; font-size: 18px; }
html[data-ui="m"] .p-tk-head .p-hsg { grid-template-columns: minmax(0, 1fr) auto; }
.p-tk-head .p-hs-r.p-muted { white-space: nowrap; font-size: 12px; }
/* ---------- Điện thoại › Lịch xe & DAT (p-lich.js, 17/09/2026) ---------- */
.p-sc { padding: 0; overflow: hidden; }
.p-sc.today { box-shadow: inset 0 0 0 1.5px var(--tint); }
.p-sc-day { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 48px; padding: 0 14px; border: 0; background: transparent;
  color: var(--label); font: inherit; text-align: left; cursor: pointer; }
.p-sc-day .p-chev { flex: 0 0 auto; width: 14px; text-align: center; transition: transform .2s; }
.p-sc-cell { position: relative; display: flex; align-items: center; justify-content: center; gap: 3px; min-height: 44px; padding: 3px 4px; border: 0; border-radius: 10px;
  background: var(--surface-2); color: var(--label-4); font: inherit; font-size: 12px; font-weight: 600; line-height: 1.2; text-align: center; cursor: pointer;
  -webkit-touch-callout: none; user-select: none; -webkit-user-select: none; }
.p-sc-cell span { overflow-wrap: anywhere; }
.p-sc-cell.free { box-shadow: inset 0 0 0 1px var(--line-2); }
.p-sc-cell.free:active { background: var(--tint-bg); }
.p-sc-cell.hid, .p-sc-cell:disabled { cursor: default; }
.p-sc-cell.hid { background: var(--fill); box-shadow: none; }
.p-sc-cell.on.xe { background: rgba(168,47,34,.11); color: var(--red-fg); }
.p-sc-cell.on.dat { background: rgba(30,111,181,.14); color: var(--blue-fg); }
.p-sc-cell.wait { box-shadow: inset 0 0 0 1.5px currentColor; }
.p-sc-cell.busy { background: repeating-linear-gradient(135deg, var(--fill) 0 5px, transparent 5px 10px); box-shadow: inset 0 0 0 1px var(--line); }
.p-sc-cell.lock { background: var(--fill); color: var(--label-4); }
.p-sc-cell.lend { background: var(--orange-bg); color: var(--orange-fg); font-size: 11.5px; }
.p-sc-cell .bc-dot { position: absolute; top: 4px; right: 4px; margin: 0; }
.p-sc-only { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; border: 0; border-radius: 17px;
  background: var(--tint); color: #fff; font: inherit; font-size: 13px; font-weight: 600; }
.p-sc-info { display: flex; flex-direction: column; }
.p-sc-info > div { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; font-size: 14px; }
.p-sc-info > div + div { border-top: 1px solid var(--line-2); }
.p-sc-info span { color: var(--label-3); flex: 0 0 auto; }
.p-sc-info b { font-weight: 600; text-align: right; overflow-wrap: anywhere; }
.p-acts .p-btn.danger { color: var(--red-fg); }
.p-fab .bc-dot { margin: 0 2px; }
/* HS CTV · Học viên (điện thoại): mỗi học viên một khối tách riêng (anh Hùng 17/09/2026) */
.p-list.p-cards { display: flex; flex-direction: column; gap: 8px; overflow: visible; background: transparent; border: 0; box-shadow: none; }
.p-cards > .p-row { background: var(--group-bg); border: 1px solid var(--group-edge); border-radius: 16px; box-shadow: var(--group-shadow); }
.p-cards > .p-row + .p-row { border-top: 1px solid var(--group-edge); }
.p-sl-head .p-tag { background: var(--surface); }
/* Theo học viên (điện thoại): lọc trường · hạng (17/09/2026) */
.p-filt { display: flex; gap: 8px; }
.p-filt select { flex: 1 1 0; min-width: 0; height: 40px; padding: 0 30px 0 14px; border: 1px solid var(--line); border-radius: 20px; background-color: var(--surface);
  font-size: 15px; font-weight: 500; color: var(--label-2); }
/* popup Tính lương trên điện thoại: tên thầy một hàng trên (cạnh ✕), chọn ngày xuống hàng dưới (17/09/2026) */
html[data-ui="m"] .bc-salm-head { flex-wrap: wrap; row-gap: 8px; }
html[data-ui="m"] .bc-salm-title { flex: 1 1 calc(100% - 60px) !important; order: 0; }
html[data-ui="m"] .bc-salm-title > div { white-space: normal !important; }
html[data-ui="m"] .bc-salm-head > button[aria-label="Đóng"] { order: 1; }
html[data-ui="m"] .bc-salm-head > .bc-spin { order: 4; }
html[data-ui="m"] .bc-salm-cal { order: 3; flex: 1 1 calc(100% - 40px); display: flex; }
/* Theo học viên (điện thoại): đầu thẻ xám nổi lên trên phần trắng — bóng mềm, mảnh (anh Hùng 17/09/2026) */
.p-sl-head { position: relative; z-index: 1; border-bottom: 0 !important;
  box-shadow: 0 1px 0 rgba(15,23,42,.06), 0 6px 12px -8px rgba(15,23,42,.28); }
:root[data-theme="dark"] .p-sl-head { box-shadow: 0 1px 0 rgba(0,0,0,.35), 0 8px 14px -8px rgba(0,0,0,.7); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .p-sl-head { box-shadow: 0 1px 0 rgba(0,0,0,.35), 0 8px 14px -8px rgba(0,0,0,.7); } }
/* Theo học viên (điện thoại): đầu mỗi dòng giờ chỉ còn số (vỡ 4/8 · DAT còn 14h / 650km) — 17/09/2026 */
.p-sl-line { display: flex; align-items: center; gap: 10px; padding: 8px 0 8px 14px; }
.p-sl-sum { flex: 0 0 56px; display: flex; flex-direction: column; align-items: flex-start; line-height: 1.2; white-space: nowrap; font-variant-numeric: tabular-nums; }
.p-sl-sum b { font-size: 14px; font-weight: 700; }
.p-sl-sum small { font-size: 14px; font-weight: 600; }
.p-sl-sum.ok { color: var(--green-fg); } .p-sl-sum.warn { color: var(--orange-fg); } .p-sl-sum.bad { color: var(--red-fg); } .p-sl-sum.mut { color: var(--label-3); }
.p-sl-line .p-sl-strip { flex: 1; min-width: 0; }
.p-range-x { flex: 0 0 auto; width: 38px; height: 38px; min-height: 38px !important; border: 0; border-radius: 50%; background: transparent; color: var(--label-3); font-size: 18px; }
/* Theo học viên (điện thoại): báo cáo tổng giờ đã dạy trên đầu (17/09/2026) */
.p-rep { padding: 0; overflow: hidden; }
/* khung "hở" như thống kê Theo thầy (.p-stats5): vạch ngăn không chạm mép thẻ, số căn giữa (anh Hùng 17/09/2026) */
.p-rep-tiles { display: grid; grid-template-columns: repeat(3, 1fr); padding: 12px 4px; text-align: center; }
.p-rep-tiles > div { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 0 6px; min-width: 0; }
.p-rep-tiles > div + div { border-left: 1px solid var(--line-2); }
.p-rep-tiles span { font-size: 12px; color: var(--label-3); }
.p-rep-tiles b { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--label); }
.p-rep-tiles small { font-size: 11.5px; color: var(--label-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.p-rep-foot { margin: 0 14px; padding: 8px 0 10px; border-top: 1px solid var(--line-2); font-size: 12px; color: var(--label-3); text-align: center; }
/* Lịch xe & DAT (điện thoại) — bảng: xe là cột, ngày × ca là dòng; cả bảng kéo ngang một lượt, cột ngày · ca và hàng tên xe đứng yên (17/09/2026) */
.p-sc-wrap { padding: 0; overflow: auto; max-height: calc(100 * var(--dvh1) - 250px); min-height: 260px; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  /* tràn sát 2 mép màn hình để xem ngang được nhiều xe hơn (anh Hùng 17/09/2026) */
  margin-left: calc(-1 * max(16px, env(safe-area-inset-left))); margin-right: calc(-1 * max(16px, env(safe-area-inset-right)));
  border-radius: 0; border-left: 0; border-right: 0; }
.p-sc-t { border-collapse: separate; border-spacing: 0; }
.p-sc-t th, .p-sc-t td { padding: 2px; background: var(--group-bg); }
.p-sc-t thead th { position: sticky; top: 0; z-index: 3; padding: 8px 2px 4px; }
.p-sc-t thead .p-sc-c0 { left: 0; z-index: 5; }
.p-sc-th { min-width: 96px; max-width: 96px; text-align: center; vertical-align: bottom; line-height: 1.2; }
.p-sc-th b { display: block; font-size: 12.5px; font-weight: 700; color: var(--red-fg); }
.p-sc-th b.dat { color: var(--blue-fg); }
.p-sc-th small { display: block; font-size: 10.5px; font-weight: 500; color: var(--label-3); }
.p-sc-d { position: sticky; left: 0; z-index: 2; min-width: 44px; max-width: 44px; vertical-align: middle; text-align: center; line-height: 1.2; }
.p-sc-d b { display: block; font-size: 13px; font-weight: 700; color: var(--label); }
.p-sc-d span { display: block; font-size: 11px; color: var(--label-3); font-variant-numeric: tabular-nums; }
/* mỗi ngày cách nhau một khe như bản máy tính, không kẻ đường ngăn */
.p-sc-t tr.p-sc-first > * { padding-top: 10px; }
.p-sc-t tbody tr:first-child > * { padding-top: 2px; }
.p-sc-d { padding-left: 6px !important; }
.p-sc-t tr.today .p-sc-d b, .p-sc-t tr.today .p-sc-d span { color: var(--tint); }
.p-sc-t tr.today .p-sc-d { color: var(--tint); }
.p-sc-t td .p-sc-cell { width: 96px; min-height: 42px; }
/* Theo học viên (điện thoại): chữ "thiếu …" tô cam như danh sách học viên (17/09/2026) */
.p-sl-head .p-orange { color: var(--orange-fg); font-weight: 500; }
/* bảng lịch xe tự xử lý kéo (p-lich.js › stiffScroll) — tắt cuộn sẵn của máy trong bảng để không chạy song song */
html[data-ui="m"] .p-sc-wrap { touch-action: none; }
/* Theo học viên (điện thoại): vạch ngăn giữa dòng vỡ · DAT · bổ túc chỉ là một gạch ngắn dưới cột số, không chạm khung (anh Hùng 17/09/2026) */
.p-sl-line { border-top: 0 !important; }
.p-sl-line { position: relative; }
.p-sl-line + .p-sl-line::before { content: ''; position: absolute; left: 14px; top: 0; width: 36px; height: 1px; background: var(--line); }
/* ô lọc trường · hạng thấp gọn như nút "Tất cả" ở Hồ sơ gửi (cao 38, chữ 13) — bề ngang giữ nguyên (anh Hùng 17/09/2026) */
html[data-ui="m"] .p-filt select { height: 38px !important; min-height: 38px !important; padding: 0 28px 0 13px !important; border-radius: 19px !important;
  font-size: 13px !important; font-weight: 500; color: var(--label-2); background-position: right 11px center !important; }
/* khoảng giữa dòng vỡ · DAT = khoảng từ dòng vỡ lên mép trên (8px) — anh Hùng 17/09/2026 */
.p-sl .p-sl-line { padding-top: 4px; padding-bottom: 4px; }
.p-sl .p-sl-head + .p-sl-line { padding-top: 8px; }
.p-sl .p-sl-line:last-child { padding-bottom: 8px; }
/* Học viên (điện thoại): thanh chọn hạng thấp gọn như nút "Tất cả" ở Hồ sơ gửi (cao 38, chữ 13) — bề ngang giữ nguyên (anh Hùng 17/09/2026) */
html[data-ui="m"] .p-seg-sm { height: 38px; min-height: 38px; padding: 2px !important; box-sizing: border-box; align-items: stretch; }
html[data-ui="m"] .p-seg-sm .p-seg-btn { min-height: 0 !important; height: 34px; font-size: 13px; font-weight: 500; }
/* Lịch xe (điện thoại): % cỡ bảng ở đầu hàng công cụ */
.p-zoom { flex: 0 0 auto; height: 38px; min-height: 38px !important; padding: 0 14px; border: 1px solid var(--line); border-radius: 19px; background: var(--surface);
  color: var(--label-2); font: inherit; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
/* vuốt tiêu đề đổi màn con (điện thoại): tên cũ trượt ra, tên mới trượt vào đúng chỗ (17/09/2026) */
.p-sub-box { position: relative; overflow: hidden; }
.p-sub-box > span { display: inline-block; white-space: nowrap; }
.p-sub-out { position: absolute; left: 0; top: 0; animation: pSubOut 340ms cubic-bezier(.3,.7,.2,1) forwards; }
.p-sub-in { animation: pSubIn 340ms cubic-bezier(.2,.9,.25,1) both; }
@keyframes pSubOut { from { transform: translateX(var(--x0, 0)); opacity: 1; } to { transform: translateX(var(--x1)); opacity: 0; } }
@keyframes pSubIn { from { transform: translateX(var(--x0)); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .p-sub-out { display: none !important; } .p-sub-in { animation: none; } }
/* ---------- Điện thoại › Quản lý thi (p-thi.js, 17/09/2026) ---------- */
.p-ex { padding: 0; overflow: hidden; }
.p-ex-head { display: flex; align-items: center; gap: 8px; width: 100%; padding: 12px 10px 8px 14px; border: 0; background: transparent; font: inherit; color: var(--label); text-align: left; cursor: pointer; }
.p-ex-head .p-chev { transition: transform .2s; }
.p-ex-bar { height: 4px; margin: 0 14px 12px; border-radius: 2px; background: var(--fill); overflow: hidden; }
.p-ex-bar i { display: block; height: 100%; border-radius: 2px; }
.p-ex-body { border-top: 1px solid var(--line-2); padding: 4px 0 10px; }
.p-ex-item { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 4px 10px 4px 14px; }
.p-ex-item + .p-ex-item { border-top: 1px solid var(--line-2); }
.p-ex-check { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; cursor: pointer; }
.p-ex-check input { flex: 0 0 auto; width: 20px; height: 20px; accent-color: var(--tint); }
.p-ex-check span { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.p-ex-check b { font-size: 14px; font-weight: 500; color: var(--label); }
.p-ex-check b.off { color: var(--label-3); font-weight: 400; }
.p-ex-check small { font-size: 11.5px; color: var(--label-4); font-variant-numeric: tabular-nums; }
.p-ex-count { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 4px; }
.p-ex-count b { min-width: 46px; text-align: center; font-size: 12.5px; font-weight: 600; color: var(--label-2); font-variant-numeric: tabular-nums; }
.p-ex-count button { width: 34px; height: 34px; min-height: 34px !important; padding: 0; border: 1px solid var(--line); border-radius: 17px; background: var(--surface);
  color: var(--tint); font-size: 18px; line-height: 1; }
.p-ex-count button:disabled { opacity: .35; }
.p-ex-marks { margin: 8px 14px 0; padding-top: 10px; border-top: 1px solid var(--line-2); display: flex; flex-direction: column; gap: 7px; }
.p-ex-mark { display: grid; grid-template-columns: 88px minmax(0, 1fr) 48px; align-items: center; gap: 8px; }
.p-ex-mark span { font-size: 12px; color: var(--label-3); }
.p-ex-mark i { height: 6px; border-radius: 3px; background: var(--fill); overflow: hidden; }
.p-ex-mark em { display: block; height: 100%; border-radius: 3px; }
.p-ex-mark small { text-align: right; font-size: 11.5px; color: var(--label-4); font-variant-numeric: tabular-nums; }
.p-ex-day { gap: 12px; }
.p-ex-date { flex: 0 0 auto; display: flex; align-items: baseline; gap: 6px; white-space: nowrap; }
.p-ex-date b { font-size: 16px; font-weight: 700; color: var(--label); font-variant-numeric: tabular-nums; }
.p-ex-date small { min-width: 22px; font-size: 14px; font-weight: 600; color: var(--label-3); }
.p-ex-date.today b, .p-ex-date.today small { color: var(--tint); }
.p-ex-dt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.p-ex-dt b { font-size: 14.5px; font-weight: 600; }
.p-ex-dt span { font-size: 12.5px; color: var(--label-3); overflow-wrap: anywhere; }
/* trang một danh sách thi */
.p-exl > .p-exl-in { display: flex; flex-direction: column; gap: 10px; padding: calc(env(safe-area-inset-top) + 8px) max(16px, env(safe-area-inset-right)) 0 max(16px, env(safe-area-inset-left)); }
.p-exl-top { display: flex; align-items: center; gap: 8px; }
.p-exl-del { height: 36px; min-height: 36px !important; padding: 0 12px; border: 0; border-radius: 18px; background: transparent; color: var(--red-fg); font: inherit; font-size: 13.5px; font-weight: 600; }
.p-exl-head { display: flex; flex-direction: column; gap: 2px; padding: 0 4px; }
.p-exl-head b { font-size: 22px; font-weight: 700; letter-spacing: -.3px; }
.p-exl-head > span { font-size: 13px; color: var(--label-3); }
.p-exl-note { margin-top: 6px; height: 38px; padding: 0 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); font-size: 16px; }
.p-exs { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 10px; }
.p-exs-i { flex: 0 0 22px; padding-top: 2px; font-size: 12px; font-weight: 600; color: var(--label-4); text-align: center; font-variant-numeric: tabular-nums; }
.p-exs-x { flex: 0 0 auto; width: 34px; height: 34px; min-height: 34px !important; padding: 0; border: 0; background: transparent; color: var(--label-4); font-size: 16px; }
.p-exs-f { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.p-exs-f label { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.p-exs-f label.wide { grid-column: 1 / -1; }
.p-exs-f label > span { font-size: 11.5px; font-weight: 600; color: var(--label-3); padding-left: 2px; }
.p-exs-f select, .p-exs-f input { width: 100%; min-width: 0; height: 40px; padding: 0 10px; border: 1px solid var(--line); border-radius: 10px; background-color: var(--surface); font-size: 15px; color: var(--label); }
.p-exs-f label.dirty select, .p-exs-f label.dirty input { border-color: var(--tint); background-color: var(--tint-bg); }
.p-exs-f label.ok select { border-color: var(--green-fg); color: var(--green-fg); font-weight: 600; }
.p-exs-f label.bad select { border-color: var(--red-fg); color: var(--red-fg); font-weight: 600; }
.p-exs-ro span.ok { color: var(--green-fg); font-weight: 600; } .p-exs-ro span.bad { color: var(--red-fg); font-weight: 600; }
/* Quản trị hệ thống: hàng quay lại + tên mục */
html[data-ui="m"] .p-ex-head .p-hsg { grid-template-columns: minmax(0, 1fr) auto; }
.p-ex-head .p-hs-r { white-space: nowrap !important; }
.p-exl { position: fixed; inset: 0; z-index: 60; overflow-y: auto; overscroll-behavior: contain; background: var(--m-bg, var(--wall));
  padding-bottom: env(safe-area-inset-bottom); animation: bcSheet 260ms cubic-bezier(.22,1,.36,1); }
.p-exl > .p-exl-in { max-width: 680px; margin: 0 auto; }
.p-exl .p-fabs { bottom: calc(20px + env(safe-area-inset-bottom)); }
.p-exl .p-fabspace { height: 70px; }
/* Thêm học viên vào danh sách thi (điện thoại, p-thi.js › PickStudents) */
.p-exl.p-pk { z-index: 70; }
.p-pk-on { box-shadow: inset 0 0 0 2px var(--tint) !important; }
.p-pk-av { background: var(--tint) !important; color: #fff !important; font-size: 18px; }
.p-pk-ovl { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 20px; background: var(--scrim, rgba(15,23,42,.35)); animation: bcFade 160ms ease; }
.p-pk-card { width: min(420px, 100%); max-height: calc(80 * var(--dvh1)); display: flex; flex-direction: column; background: var(--surface); border-radius: 20px;
  box-shadow: 0 30px 70px -30px rgba(7,38,68,.6); overflow: hidden; animation: bcPop 180ms cubic-bezier(.22,1,.36,1); }
.p-pk-head { display: flex; flex-direction: column; gap: 2px; padding: 16px 18px 10px; border-bottom: 1px solid var(--line-2); }
.p-pk-head b { font-size: 18px; font-weight: 700; }
.p-pk-head span { font-size: 13px; color: var(--label-3); }
.p-pk-rows { overflow-y: auto; padding: 4px 18px; }
.p-pk-rows > div { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; font-size: 14px; }
.p-pk-rows > div + div { border-top: 1px solid var(--line-2); }
.p-pk-rows span { color: var(--label-3); flex: 0 0 auto; }
.p-pk-rows b { font-weight: 600; text-align: right; overflow-wrap: anywhere; }
.p-pk-acts { display: flex; align-items: center; gap: 8px; padding: 12px 16px 14px; border-top: 1px solid var(--line-2); }
/* danh sách thi (điện thoại): dòng gọn + thẻ sửa giữa màn */
.p-exr { gap: 10px; }
.p-exr-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.p-exr-t b { font-size: 15px; font-weight: 600; color: var(--label); }
.p-exr-t span { font-size: 12.5px; color: var(--label-3); }
.p-exr-t em { font-style: normal; color: var(--orange-fg); font-weight: 500; }
.p-pk-f { padding: 12px 16px 4px; }
.p-pk-acts .p-btn { padding: 0 14px; }
.p-btn-red { color: var(--red-fg) !important; }
.p-pk-dob { font-size: 12.5px; font-weight: 400; color: var(--label-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* nút ‹ quay về ngay trước tiêu đề (mục Thêm) */
.p-back-ico { flex: 0 0 auto; align-self: center; width: 36px; height: 44px; min-height: 44px !important; margin: 0 -6px 0 -10px; padding: 0; border: 0; background: transparent;
  color: var(--tint); font-size: 38px; font-weight: 300; line-height: 1; cursor: pointer; }
.p-exl-top { min-height: 48px; }
.p-exl-title { flex: 1; min-width: 0; font-size: 26px; font-weight: 700; letter-spacing: -.5px; color: var(--label); }
.p-exl .p-back-ico { margin-left: -8px; }
.p-exl .p-exl-head > span:first-child { padding-left: 26px; }
.p-sc-th small.p-sc-tag { font-size: 11px; font-weight: 700; color: var(--blue-fg); opacity: .75; letter-spacing: .2px; }
/* ---------- Điện thoại › Quản trị hệ thống làm lại riêng (p-admin.js, 17/09/2026) ---------- */
.p-ad-row, .p-ad-user, .p-ad-trash, .p-ad-log, .p-ad-perm { gap: 10px; }
.p-ad-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.p-ad-t > b { font-size: 15px; font-weight: 600; color: var(--label); overflow-wrap: anywhere; }
.p-ad-t > span { font-size: 12.5px; color: var(--label-3); overflow-wrap: anywhere; }
.p-ad-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 3px; grid-column: 1 / -1; }
.p-ad-dates { flex: 0 0 auto; display: grid; text-align: right; font-size: 11.5px; line-height: 1.25; color: var(--label-4); font-variant-numeric: tabular-nums; }
.p-ad-log small { flex: 0 0 auto; font-size: 11.5px; color: var(--label-4); font-variant-numeric: tabular-nums; }
.p-ad-trash .p-btn { min-height: 34px !important; height: 34px; padding: 0 12px; font-size: 13px; }
.p-ad-secret { user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.p-ad-perm { cursor: pointer; }
.p-ad-perm.changed { background: var(--orange-bg); }
.p-switch { -webkit-appearance: none; appearance: none; flex: 0 0 auto; width: 51px; height: 31px; margin: 0; border-radius: 16px; background: var(--fill-2, #D1D5DB);
  position: relative; cursor: pointer; transition: background .2s; border: 0; min-height: 0 !important; }
.p-switch::after { content: ''; position: absolute; top: 2px; left: 2px; width: 27px; height: 27px; border-radius: 50%; background: #fff; box-shadow: 0 2px 5px rgba(0,0,0,.2); transition: transform .2s; }
.p-switch:checked { background: var(--green, #34C759); }
.p-switch:checked::after { transform: translateX(20px); }
.p-red { color: var(--red-fg) !important; } .p-green { color: var(--green-fg) !important; }
.p-ad-chg { display: flex; flex-direction: column; gap: 4px; max-height: 240px; overflow: auto; text-align: left; }
.p-ad-menu { display: flex; flex-direction: column; padding: 6px 6px 0; }
.p-ad-menu .bc-menu-row { display: flex; justify-content: space-between; min-height: 48px; padding: 0 12px; border: 0; background: transparent; font: inherit; font-size: 15px; color: var(--label); border-radius: 10px; }
.p-ad-menu .bc-menu-row + .bc-menu-row { border-top: 1px solid var(--line-2); border-radius: 0; }
.p-ad-av { display: flex; align-items: center; gap: 12px; padding: 8px 12px 12px; font-size: 13px; color: var(--label-3); }
.p-ad-form { padding: 4px 14px; display: flex; flex-direction: column; }
.p-ad-f { display: flex; flex-direction: column; gap: 4px; padding: 10px 0; }
.p-ad-f + .p-ad-f { border-top: 1px solid var(--line-2); }
.p-ad-f > span { font-size: 12px; font-weight: 600; color: var(--label-3); }
.p-ad-f input, .p-ad-f select { width: 100%; height: 42px; padding: 0 12px; border: 1px solid var(--line); border-radius: 10px; background-color: var(--surface); font-size: 16px; color: var(--label); }
.p-ad-roles { flex-wrap: wrap; }
.p-ad-fund { align-self: flex-start; margin: 10px 0; }
.p-ad-gal { padding: 10px 0 12px; }
.p-ad-gal-h { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; padding: 0 14px 8px; }
.p-ad-gal-h b { font-size: 15px; font-weight: 600; }
.p-ad-gal-h span { font-size: 12.5px; color: var(--label-3); }
.p-ad-gal-h em { margin-left: auto; font-style: normal; font-size: 12px; color: var(--label-4); font-variant-numeric: tabular-nums; }
.p-ad-strip { display: flex; gap: 8px; overflow-x: auto; padding: 0 14px; scrollbar-width: none; }
.p-ad-strip::-webkit-scrollbar { display: none; }
.p-ad-shot { flex: 0 0 76px; display: flex; flex-direction: column; gap: 3px; align-items: center; }
.p-ad-shot img, .p-ad-shot .p-ad-hole { width: 76px; height: 76px; border-radius: 10px; background: #0E1D2C; display: block; object-fit: contain;
  -webkit-touch-callout: none; user-select: none; }
.p-ad-shot .p-ad-hole { background: var(--surface-2); border: 1.5px dashed var(--line); box-sizing: border-box; }
.p-ad-shot small { max-width: 76px; font-size: 10.5px; color: var(--label-3); text-align: center; line-height: 1.2; }
.p-ad-pager { display: flex; align-items: center; justify-content: center; gap: 14px; font-size: 13px; color: var(--label-3); }
/* màn máy tính đặt trong trang điện thoại: bỏ khung thẻ ngoài */
.p-ad-embed > div, .p-ad-settings > div { max-width: none !important; border-radius: 16px !important; }
/* lộ trình học trong trang điện thoại: hình thức · địa điểm xuống 2 dòng, bỏ khoảng trên thẻ */
.p-ad-embed > div { margin-top: 0 !important; }
.p-ad-embed .bc-step input[placeholder="Hình thức"] { flex: 1 1 100% !important; width: 100% !important; }
.p-ad-embed .bc-step input[placeholder="Hình thức"] + span { display: none; }
.p-ad-embed .bc-step div:has(> input[placeholder="Hình thức"]) { flex-wrap: wrap; }
.p-ad-embed .bc-step input, .p-ad-embed .bc-step textarea { font-size: 15px !important; }
.p-ad-embed .bc-step input { height: 34px !important; }
/* Lịch sử sửa chữa · bảo dưỡng xe trên điện thoại: dòng xuống hàng gọn, không bị bóp thành chữ dọc (17/09/2026) */
html[data-ui="m"] .bc-carlog-form { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; }
html[data-ui="m"] .bc-carlog-form > * { grid-column: auto !important; min-width: 0; width: 100% !important; height: 40px !important; font-size: 15px !important; box-sizing: border-box; }
html[data-ui="m"] .bc-carlog-form input { height: 40px !important; }
html[data-ui="m"] .bc-carlog-form > input[placeholder^="Làm gì"] { grid-column: 1 / -1 !important; }
html[data-ui="m"] .bc-carlog-form > button { grid-column: 1 / -1 !important; }
/* mỗi lần một thẻ nhỏ: ngày · loại ······ số tiền / (thầy) / việc làm ······ ODO */
html[data-ui="m"] .bc-carlog-row { display: grid !important; grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 8px; row-gap: 4px;
  align-items: center; padding: 10px 12px !important; font-size: 13.5px !important; position: relative; }
html[data-ui="m"] .bc-carlog-row > span { white-space: normal !important; }
html[data-ui="m"] .bc-carlog-row .cl-date { grid-column: 1; grid-row: 1; }
html[data-ui="m"] .bc-carlog-row .cl-kind { grid-column: 2; grid-row: 1; justify-self: start; }
html[data-ui="m"] .bc-carlog-row .cl-cost { grid-column: 3; grid-row: 1; justify-self: end; font-size: 14px; }
html[data-ui="m"] .bc-carlog-row .cl-who { grid-column: 1 / -1; grid-row: 2; justify-self: start; }
html[data-ui="m"] .bc-carlog-row .bc-carlog-note { grid-column: 1 / 3; grid-row: 3; overflow: visible !important; overflow-wrap: anywhere; color: var(--label-2) !important; }
html[data-ui="m"] .bc-carlog-row .cl-odo { grid-column: 3; grid-row: 3; justify-self: end; font-size: 12.5px; }

/* mục Thêm (và danh sách Quản trị hệ thống) trên điện thoại: mỗi mục một khung riêng, chữ to dễ bấm (anh Hùng 17/09/2026) */
html[data-ui="m"] .bc-menu-group.p-more { padding: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important;
  display: flex; flex-direction: column; gap: 10px; -webkit-backdrop-filter: none; backdrop-filter: none; }
html[data-ui="m"] .bc-menu-group.p-more::before { display: none !important; }
html[data-ui="m"] .p-more > .bc-menu-row { min-height: 56px !important; padding: 0 16px 0 18px !important; border-radius: 16px !important;
  background: var(--group-bg) !important; border: 1px solid var(--group-edge) !important; box-shadow: var(--group-shadow);
  font-size: 15.5px !important; font-weight: 500; color: var(--label); }
html[data-ui="m"] .p-more > .bc-menu-row + .bc-menu-row { border-top: 1px solid var(--group-edge) !important; }
html[data-ui="m"] .p-more > .bc-menu-row::after, html[data-ui="m"] .p-more > .bc-menu-row::before { display: none !important; }
html[data-ui="m"] .p-more .bc-menu-chev { font-size: 18px; }
/* thanh menu dưới cùng tự ẩn khi cuộn xuống (phone.js › barHidden) — nút nổi hạ xuống theo */
.p-tabbar { transition: transform 260ms cubic-bezier(.2,.9,.25,1); }
.p-tabbar.off { transform: translateY(110%); }
.p-fabs, .p-fabs-left { transition: bottom 260ms cubic-bezier(.2,.9,.25,1); }
html.p-bar-off .p-app .p-fabs, html.p-bar-off .p-app .p-fabs-left { bottom: calc(16px + env(safe-area-inset-bottom)); }
html.p-bar-off .p-exl .p-fabs { bottom: calc(20px + env(safe-area-inset-bottom)); }

/* bảng chọn nhanh của thầy khi mở app (phone.js › QuickPick) — Liquid Glass: nền mờ, 3 nút kính to giữa màn (anh Hùng 18/09/2026) */
.p-qp { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 24px;
  background: var(--scrim); -webkit-backdrop-filter: blur(14px) saturate(150%); backdrop-filter: blur(14px) saturate(150%); animation: bcFade 200ms ease; }
.p-qp-stack { width: min(340px, 100%); display: flex; flex-direction: column; align-items: stretch; gap: 16px; animation: bcPop 260ms cubic-bezier(.2,.9,.25,1.12); }
.p-qp-btn { position: relative; isolation: isolate; overflow: hidden; min-height: 76px; padding: 0 24px; border: 0; border-radius: 26px;
  font: inherit; font-size: 22px; font-weight: 700; letter-spacing: -.2px; text-align: center; color: var(--label); cursor: pointer;
  background: radial-gradient(130% 70% at 20% 0%, var(--glass-sheen), transparent 60%), var(--menu-bg);
  -webkit-backdrop-filter: blur(30px) saturate(200%); backdrop-filter: blur(30px) saturate(200%);
  box-shadow: inset 0 1px 0 var(--glass-hi), inset 0 -1px 0 var(--glass-lo), inset 0 0 0 1px var(--glass-edge),
    0 24px 50px -22px rgba(10,30,70,.5), 0 8px 18px -10px rgba(10,30,70,.25);
  transition: transform 160ms ease, filter 160ms ease; }
.p-qp-btn::after { content: ""; position: absolute; left: 10px; right: 10px; top: 3px; height: 45%; z-index: -1; pointer-events: none;
  border-radius: 22px 22px 50% 50% / 22px 22px 100% 100%; background: linear-gradient(180deg, var(--glass-sheen), rgba(255,255,255,0)); }
.p-qp-btn:active { transform: scale(.97); filter: brightness(.97); }
html[data-ui="m"] .p-qp .p-qp-btn { min-height: 76px !important; }
.p-qp-x { align-self: center; width: 52px; height: 52px; margin-top: 6px; border: 0; border-radius: 50%; font-size: 18px; color: var(--label-2); cursor: pointer;
  background: var(--menu-bg); -webkit-backdrop-filter: blur(24px) saturate(180%); backdrop-filter: blur(24px) saturate(180%);
  box-shadow: inset 0 1px 0 var(--glass-hi), inset 0 0 0 1px var(--glass-edge), 0 12px 26px -14px rgba(10,30,70,.45); }
/* Cài đặt — màn mở đầu, nằm ngay trong menu tài khoản (screens/startpref.js › StartPanel) — mỗi thiết bị một khối kính tách riêng (anh Hùng 18/09/2026) */
.bc-set { display: flex; flex-direction: column; gap: 10px; }
.bc-set-back { display: flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 10px 0 6px; border: 0; border-radius: 15px; background: transparent;
  color: var(--label); font: inherit; font-size: 16px; font-weight: 600; cursor: pointer; text-align: left; }
.bc-set-back:hover { background: var(--hover); }
.bc-set-chev { width: 24px; font-size: 26px; line-height: 1; margin-top: -3px; color: var(--tint); text-align: center; }
.bc-set-cap { margin-bottom: -4px; padding: 2px 12px 0; font-size: 11.5px; font-weight: 600; color: var(--label-3); }
.bc-set-card { gap: 8px; padding: 10px; }
.bc-set-head { display: flex; align-items: center; gap: 10px; min-height: 30px; }
.bc-set-head > b { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 600; color: var(--label); text-align: left; }
.bc-set-here { flex: 0 0 auto; padding: 2px 8px; border-radius: 999px; font-size: 10.5px; font-weight: 600; color: #fff;
  background: var(--thumb); box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 4px 10px -5px var(--thumb-glow); }
/* ô màn đang đặt: giếng kính lõm nhẹ trong khối */
.bc-set-val { padding: 9px 11px; border-radius: 13px; font-size: 13px; font-weight: 500; line-height: 1.4; color: var(--label);
  background: linear-gradient(180deg, rgba(120,130,160,.10), rgba(120,130,160,.05));
  box-shadow: inset 0 1px 2px rgba(10,30,70,.08), inset 0 0 0 .5px var(--menu-group-edge), 0 1px 0 var(--glass-hi); }
.bc-set-val.mute { color: var(--label-3); font-weight: 400; }
.bc-set-row { display: flex; gap: 8px; justify-content: flex-end; }
/* nút kính: viên thuốc có gờ sáng — pri = xanh như thẻ đang chọn (tabBtn), thường = kính trắng */
.bc-set-pill { position: relative; height: 34px; padding: 0 16px; border: 0; border-radius: 999px; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
  color: var(--label); background: linear-gradient(180deg, var(--tile-top), var(--tile-bot));
  box-shadow: inset 0 1px 1px var(--glass-hi), inset 0 -1px 1px var(--tile-edge), inset 0 0 0 .5px var(--tile-edge), 0 4px 10px -5px var(--tile-shadow);
  transition: transform 160ms ease, filter 160ms ease; }
.bc-set-pill:hover { filter: brightness(1.03); }
.bc-set-pill:active { transform: scale(.97); }
.bc-set-pill.pri { color: #fff; background: var(--thumb); box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 8px 18px -8px var(--thumb-glow); }
.bc-set-pill.red { color: var(--red-fg); }
.bc-set-pill.grow { flex: 1; }
.bc-set-ask { display: flex; flex-direction: column; gap: 10px; padding: 10px; border-radius: 13px; font-size: 13px; line-height: 1.4; color: var(--label);
  background: linear-gradient(180deg, rgba(10,132,255,.10), rgba(10,132,255,.04)); box-shadow: inset 0 0 0 .5px rgba(10,132,255,.25); }
.bc-set-sw { width: 100%; padding: 0; border: 0; background: transparent; font: inherit; cursor: pointer; }
.bc-set-seg { display: flex; align-items: center; gap: 10px; padding: 4px 4px 4px 11px; }
.bc-set-seg > span { flex: 1; }
.bc-set button:disabled { opacity: .6; cursor: default; }
.p-acct .bc-set { gap: 12px; }
.p-acct .bc-set-card { padding: 12px; gap: 10px; }
.p-acct .bc-set-head > b { font-size: 15px; }
.p-acct .bc-set-val, .p-acct .bc-set-ask { font-size: 15px; }
.p-acct .bc-set-cap { font-size: 13px; }
.p-acct .bc-set-pill { height: 42px; font-size: 15px; padding: 0 18px; }
/* popup Đổ xăng trên điện thoại (fuel.js › FuelModal): hàng 4 ô của máy tính → Ngày đổ | Số tiền · Xe cả dòng · Trả bằng cả dòng (anh Hùng 18/09/2026) */
html[data-ui="m"] .bc-fuel-grid { grid-template-columns: minmax(0,1fr) minmax(0,1fr) !important; gap: 12px !important; }
html[data-ui="m"] .bc-fuel-grid > :nth-child(1) { order: 1; }
html[data-ui="m"] .bc-fuel-grid > :nth-child(3) { order: 2; }
html[data-ui="m"] .bc-fuel-grid > :nth-child(2) { order: 3; grid-column: 1 / -1; }
html[data-ui="m"] .bc-fuel-grid > :nth-child(4) { order: 4; grid-column: 1 / -1; }
html[data-ui="m"] .bc-fuel-grid > :nth-child(4) > div > button { flex: 1; height: 36px !important; font-size: 14px !important; }
html[data-ui="m"] .bc-fuel-grid input, html[data-ui="m"] .bc-fuel-grid select { width: 100%; min-width: 0; }
html[data-ui="m"] .bc-fuel-shots > div > div:first-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 11px !important; letter-spacing: -.1px; }
/* popup Sửa xe trên điện thoại: Ngày sửa | Tiền sửa · Xe cả dòng (đọc đủ biển số + thầy) · Việc | ODO */
html[data-ui="m"] .bc-rep-grid > :nth-child(1) { order: 1; }
html[data-ui="m"] .bc-rep-grid > :nth-child(5) { order: 2; }
html[data-ui="m"] .bc-rep-grid > :nth-child(2) { order: 3; grid-column: 1 / -1; }
html[data-ui="m"] .bc-rep-grid > :nth-child(3) { order: 4; }
html[data-ui="m"] .bc-rep-grid > :nth-child(4) { order: 5; }
/* ô chọn xe trong popup Đổ xăng / Sửa xe: biển số không xuống dòng (anh Hùng 18/09/2026) */
.bc-fuel-grid select, .bc-rep-grid select { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bc-fuel-grid > :nth-child(4) > div > button { flex: 1; }
/* khung ảnh bill chuyển khoản (lib/ui.js › BILL_RATIO): điện thoại thu nhỏ theo CHIỀU CAO, bề ngang tự co để giữ đúng tỉ lệ ảnh chụp màn hình */
html[data-ui="m"] .bc-bill { height: 170px !important; width: auto !important; max-width: 100%; max-height: 170px; align-self: flex-start; }
/* 3 ảnh của popup Đổ xăng trên điện thoại: chiều cao bằng nhau, bề ngang tự co đúng tỉ lệ từng loại ảnh */
html[data-ui="m"] .bc-fuel-shots { display: flex !important; gap: 8px; justify-content: center; }
html[data-ui="m"] .bc-fuel-shots [data-ph] { height: 150px !important; max-height: none; width: auto !important; }