/* Component dùng chung của prototype Bơi Đạt v7. Nạp sau tokens.css và themes.css, ở mọi trang và ở _system.html.
   Một bộ class cho hai portal: token đổi theo theme (quan-ly · nguoi-dung), nên cùng .btn là nút ngọc phẳng ở Portal quản lý
   và nút xanh lá viền mực bóng cứng ở Portal người dùng. Phần riêng của từng portal ghi rõ ở tiêu đề khối.
   Luật: DESIGN.md. Không màu viết cứng: mọi màu là token (preflight.py). */

/* ---------- Nền ---------- */
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font-body);font-size:var(--text-base);line-height:var(--leading-normal);font-variant-numeric:tabular-nums}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:var(--weight-display);line-height:var(--leading-tight);margin:0}
p{margin:0}
a{color:var(--link)}
:focus-visible{outline:2px solid var(--ring);outline-offset:2px}
img{max-width:100%}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.muted{color:var(--muted)}
.block{display:block}
.num{font-variant-numeric:tabular-nums;white-space:nowrap}
.code{font-family:var(--font-mono);font-size:.95em}
.ph{font-size:1.15em;line-height:1;vertical-align:-.15em}
.row{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.stack{display:grid;gap:12px}
.grow{flex:1 1 auto;min-width:0}
kbd{font:500 var(--text-xs)/1 var(--font-mono);padding:2px 5px;border:1px solid var(--line-strong);border-radius:var(--radius-sm);background:var(--surface);color:var(--muted)}

/* ---------- Nút ---------- */
/* Desktop (con trỏ chuột) cao 36px, nhỏ 30px · màn chạm cao var(--tap) hoặc 44px (DESIGN.md mục 4) */
/* Nhãn dài xuống dòng thay vì tràn (khổ 390): nút giữ chiều cao tối thiểu, không cố định */
.btn{--h:36px;display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:var(--h);max-width:100%;padding:4px 14px;
  font:inherit;font-size:var(--text-sm);font-weight:var(--weight-strong);line-height:1.2;text-align:center;text-decoration:none;white-space:normal;
  border:var(--border-width) solid transparent;border-radius:var(--radius);background:var(--primary);color:var(--on-primary);cursor:pointer;
  transition:background-color var(--dur-fast) var(--ease-out),transform var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out)}
.btn:hover{background:var(--primary-hover)}
.btn:active{background:var(--primary-pressed);transform:scale(.98)}
.btn:disabled,.btn[aria-disabled="true"]{opacity:var(--disabled-opacity);cursor:not-allowed;transform:none}
.btn[aria-busy="true"]{cursor:progress}
.btn[aria-busy="true"]::before{content:"";width:14px;height:14px;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.btn.is-secondary{background:var(--surface);color:var(--ink);border-color:var(--line-strong)}
.btn.is-secondary:hover{background:var(--muted-bg)}
.btn.is-secondary:active{background:var(--pressed)}
.btn.is-secondary[aria-expanded="true"],.btn.is-ghost[aria-expanded="true"]{background:var(--selected);border-color:var(--ring)}
.btn.is-ghost{background:transparent;color:var(--ink)}
.btn.is-ghost:hover{background:var(--hover)}
.btn.is-ghost:active{background:var(--pressed)}
.btn.is-danger{background:var(--destructive);color:var(--on-destructive)}
.btn.is-danger:hover{background:var(--destructive-hover)}
.btn.is-danger:active{background:var(--destructive-pressed)}
.btn.is-ghost[aria-pressed="true"]{background:var(--selected);border-color:var(--ring);box-shadow:inset 0 -2px 0 var(--ring)}
.back-from{margin:0 0 10px}
.btn.is-ghost.is-danger{background:transparent;color:var(--danger-text);border-color:var(--destructive)}
.btn.is-ghost.is-danger:hover{background:var(--danger-soft)}
.btn.is-ghost.is-danger:active{background:var(--danger-soft);color:var(--destructive-pressed)}
.btn.is-sm{--h:30px;padding:3px 10px;font-size:var(--text-xs)}
.btn.is-block{display:flex;width:100%}
.btn-icon{--h:32px;display:inline-grid;place-items:center;width:var(--h);height:var(--h);padding:0;border:0;border-radius:var(--radius);background:transparent;color:var(--ink);cursor:pointer;font-size:18px}
.btn-icon:hover{background:var(--hover)}
.btn-icon:active{background:var(--pressed)}
.btn-icon[aria-expanded="true"],.avatar[aria-expanded="true"]{background:var(--selected);box-shadow:inset 0 0 0 2px var(--ring)}
@media (pointer:coarse){.btn{--h:44px}.btn.is-sm{--h:40px}.btn-icon{--h:44px}}
[data-surface="app"] .btn,.surface-app .btn{--h:var(--tap,44px);font-size:var(--text-base)}

/* ---------- Ô nhập ---------- */
.field{display:grid;gap:6px;min-width:0}
.field > label,.field > .label{font-size:var(--text-sm);font-weight:var(--weight-strong);color:var(--ink)}
.field small{font-size:var(--text-xs);color:var(--muted)}
.err{color:var(--danger-text);font-weight:500}
.input,.select,.textarea{width:100%;max-width:100%;min-height:36px;padding:7px 10px;font:inherit;font-size:var(--text-base);color:var(--ink);background:var(--surface);
  border:var(--border-width) solid var(--line-strong);border-radius:var(--radius-sm)}
.textarea{min-height:84px;resize:vertical}
.input::placeholder,.textarea::placeholder{color:var(--muted)}
.input:hover,.select:hover,.textarea:hover{border-color:var(--ink)}
.input:focus-visible,.select:focus-visible,.textarea:focus-visible{outline:2px solid var(--ring);outline-offset:1px;border-color:var(--ring)}
.input[aria-invalid="true"],.select[aria-invalid="true"],.textarea[aria-invalid="true"]{border-color:var(--destructive)}
.input:disabled,.select:disabled,.textarea:disabled{opacity:var(--disabled-opacity);cursor:not-allowed}
.input-search{position:relative}
.input-search .ph{position:absolute;left:10px;top:50%;transform:translateY(-50%);color:var(--muted);pointer-events:none}
.input-search .input{padding-left:32px}
[data-surface="app"] .input,[data-surface="app"] .select,[data-surface="app"] .textarea,.surface-app .input{min-height:var(--tap,44px);font-size:16px}
.check{display:inline-flex;align-items:center;gap:8px;min-height:32px;font-size:var(--text-sm);cursor:pointer}
.check input{width:16px;height:16px;margin:0;accent-color:var(--ring)}
/* Nhóm chọn một (segmented): đang chọn = nền chọn + chữ đậm */
.seg{display:inline-flex;padding:2px;gap:2px;background:var(--muted-bg);border-radius:var(--radius);border:var(--border-width) solid var(--line)}
.seg button{min-height:30px;padding:0 12px;font:inherit;font-size:var(--text-sm);color:var(--muted);background:transparent;border:0;border-radius:calc(var(--radius) - 2px);cursor:pointer}
.seg button:hover{color:var(--ink);background:var(--hover)}
.seg button[aria-pressed="true"],.seg button[aria-checked="true"]{background:var(--surface);color:var(--ink);font-weight:var(--weight-strong);box-shadow:inset 0 0 0 1px var(--line-strong)}

/* ---------- Nhãn trạng thái ---------- */
/* Màu chỉ để báo trạng thái, luôn kèm chữ. need = việc cần người quyết (vàng, như dấu trên lưới) */
.badge{display:inline-flex;align-items:center;gap:4px;padding:1px 7px;font-size:var(--text-xs);font-weight:600;line-height:1.5;white-space:nowrap;
  border-radius:var(--radius-sm);background:var(--muted-bg);color:var(--ink)}
.badge.ok{background:var(--success-soft);color:var(--success)}
.badge.warn{background:var(--warning-soft);color:var(--warning)}
.badge.info{background:var(--info-soft);color:var(--info)}
.badge.bad{background:var(--danger-soft);color:var(--danger-text)}
.badge.absent{background:transparent;border:2px dashed var(--destructive);color:var(--danger-text)}
.kpi.is-lead .kpi-v{font-size:clamp(var(--text-2xl),1.4rem + 1vw,var(--text-4xl))}
.badge.absent{background:transparent;border:2px dashed var(--destructive);color:var(--danger-text)}
.kpi.is-lead .kpi-v{font-size:clamp(var(--text-2xl),1.4rem + 1vw,var(--text-4xl))}
.badge.need{background:var(--accent);color:var(--on-accent)}
.count{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 6px;font-size:var(--text-xs);font-weight:700;border-radius:10px;background:var(--accent);color:var(--on-accent)}
.count.is-zero{background:var(--muted-bg);color:var(--muted);font-weight:500}

/* ---------- Thông báo trong trang ---------- */
.note{display:flex;gap:10px;align-items:flex-start;padding:4px 12px;font-size:var(--text-sm);border-left:3px solid var(--info);border-radius:0;background:transparent;color:var(--muted);max-width:76ch}
.note .ph{flex:none;margin-top:2px}
.note.ok{border-color:var(--success);color:var(--success)}
.note.warn{border-color:var(--warning);color:var(--warning)}
.note.bad{border-color:var(--destructive);color:var(--danger-text)}
.note b{font-weight:700}

/* ---------- Tab ---------- */
.tabs{display:flex;gap:4px;border-bottom:var(--border-width) solid var(--line);overflow-x:auto;scrollbar-width:none}
.tabs [role="tab"]{flex:none;min-height:36px;padding:0 12px;font:inherit;font-size:var(--text-sm);color:var(--muted);background:transparent;border:0;border-bottom:3px solid transparent;margin-bottom:calc(-1 * var(--border-width));cursor:pointer}
.tabs [role="tab"]:hover{color:var(--ink);background:var(--hover)}
.tabs [role="tab"][aria-selected="true"]{color:var(--ink);font-weight:var(--weight-strong);border-bottom-color:var(--ring)}
.tabs [role="tab"]:disabled{opacity:var(--disabled-opacity);cursor:not-allowed}

/* ---------- Thẻ và khối ---------- */
.card{background:var(--surface);color:var(--card-foreground);border:var(--border-width) solid var(--border-ink);border-radius:var(--radius-lg);box-shadow:var(--shadow-1);padding:16px;min-width:0}
.card h3{font-size:var(--text-lg)}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);min-width:0}
.panel-head{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:12px 16px;border-bottom:1px solid var(--line)}
.panel-head h2,.panel-head h3{font-size:var(--text-xl)}
.panel-body{padding:10px 16px 12px}
.content .stack>.panel+.panel,.content .stack>.panel+section,.content .stack>section+section,.content .stack>.table-wrap+.panel{margin-top:12px}
.panel-body>.stack,.drawer-body.stack,.dialog .stack{gap:8px}
.steps{display:flex;gap:8px;margin:0 0 12px;padding:0;list-style:none;counter-reset:s}
.steps li{flex:1;position:relative;padding-top:20px;font-size:var(--text-sm);color:var(--muted)}
.steps li::before{counter-increment:s;content:counter(s);position:absolute;top:0;left:0;width:16px;height:16px;border-radius:50%;background:var(--muted);color:var(--surface);font-size:11px;font-weight:700;display:grid;place-items:center}
.steps li::after{content:"";position:absolute;top:7px;left:20px;right:0;height:2px;background:var(--line)}
.steps li:last-child::after{display:none}
.steps li[aria-current],.steps li[data-done]{color:var(--ink);font-weight:600}
.steps li[aria-current]::before,.steps li[data-done]::before,.steps li[data-done]::after{background:var(--primary);color:var(--on-primary)}

/* ---------- Bảng dày (Portal quản lý) ---------- */
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface)}
.table{width:100%;border-collapse:collapse;font-size:var(--text-sm)}
.table th,.table td{padding:7px 10px;text-align:left;vertical-align:middle;border-bottom:1px solid var(--line)}
.table thead th{position:sticky;top:0;z-index:1;background:var(--muted-bg);font-size:var(--text-xs);font-weight:600;color:var(--muted);white-space:nowrap}
.table th.num,.table td.num{text-align:right}
.table tbody tr:hover{background:var(--hover)}
.table tbody tr[aria-selected="true"]{background:var(--selected)}
.table tbody tr:last-child td{border-bottom:0}
.table .cell-main{font-weight:600}
.cell-sub{display:block;font-size:var(--text-xs);color:var(--muted)}
.sort{display:inline-flex;align-items:center;gap:4px;padding:0;font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.sort[aria-sort] {color:var(--ink)}
.table-foot{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:8px 10px;font-size:var(--text-xs);color:var(--muted);border-top:1px solid var(--line)}

/* ---------- Vùng dữ liệu: đang tải · rỗng · lỗi ---------- */
.skel{display:block;height:12px;border-radius:var(--radius-sm);background:var(--muted-bg);animation:pulse 1.4s ease-in-out infinite}
@keyframes pulse{50%{opacity:.5}}
.empty{display:grid;justify-items:start;gap:8px;padding:20px 16px;font-size:var(--text-sm);color:var(--muted)}
.empty h3{font-size:var(--text-base);color:var(--ink)}
.empty .ph{font-size:24px;color:var(--muted)}

/* ---------- Dải đếm việc (Việc cần làm, Quầy) ---------- */
.tally{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,168px),1fr));gap:0;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.tally>*{box-shadow:-1px 0 0 var(--line),0 -1px 0 var(--line)}
.tally a,.tally button{display:grid;gap:2px;padding:10px 12px;font:inherit;text-align:left;text-decoration:none;color:var(--ink);background:var(--surface);border:0;cursor:pointer}
.tally a:hover,.tally button:hover{background:var(--muted-bg)}
.tally b{font-size:var(--text-xl);font-weight:600;line-height:1.1}
.tally span{font-size:var(--text-xs);color:var(--muted)}
.tally [data-need] b::after{content:"";display:inline-block;width:8px;height:8px;margin-left:6px;vertical-align:.25em;border-radius:50%;background:var(--accent);box-shadow:0 0 0 2px var(--surface)}
.tally [aria-pressed="true"]{background:var(--selected);box-shadow:inset 0 -3px 0 var(--ring)}

/* ---------- Khung Portal quản lý desktop: thanh trên có hàng phân hệ · sidebar trái là màn của phân hệ ---------- */
.shell{display:grid;grid-template-columns:var(--sidebar-w) minmax(0,1fr);grid-template-rows:var(--topbar-h) minmax(0,1fr);min-height:100dvh}
.topbar{grid-column:1/-1;display:flex;align-items:center;gap:16px;padding:0 16px;background:var(--surface);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:var(--z-sticky);min-width:0}
/* Thanh trên 60px: logo 40px; mọi ô trên thanh (phân hệ, ô tìm, cơ sở, nút tìm, người dùng) cao 36px, bằng ô nhập của form, chữ 14px (11/10/2026) */
.topbar .logo{height:40px;width:auto;flex:none}
/* Phân hệ: viên thuốc (evolve-site 10/10/2026, Cổng 2 "Sáng, token sẵn có").
   11/10/2026: chữ 14px --ink 500 (trước 13px --muted); đang mở = nền đặc --ring + chữ --surface 600, như ô icon của mục sidebar đang mở.
   Bản 16px đậm cùng ngày BA thấy "hơi to quá, nhìn hơi thô". Dưới 1280px đệm 12px để hàng phân hệ không phải cuộn ngang */
.modules{display:flex;align-items:center;gap:4px;min-width:0;overflow-x:auto;scrollbar-width:none;padding:2px}
.modules a{display:flex;align-items:center;min-height:36px;padding:0 14px;font-size:var(--text-base);font-weight:500;color:var(--ink);text-decoration:none;white-space:nowrap;border-radius:999px}
.modules a:hover{background:var(--hover)}
.modules a[aria-current="page"]{color:var(--surface);font-weight:600;background:var(--ring)}
@media (max-width:1279px){.modules a{padding:0 12px}}
.topbar-tools{display:flex;align-items:center;gap:8px;margin-left:auto;flex:none}
/* Ô tìm kiếm trên thanh trên: gõ là xổ kết quả ngay dưới (combobox); dưới 768px thu về icon mở hộp tìm.
   Bề rộng theo khổ màn để hàng phân hệ co trước (1024: khoảng 225px · 1440: 320px) */
.gsearch{position:relative;width:clamp(180px,22vw,320px)}
.facility{white-space:nowrap}
.gsearch > .ph{position:absolute;left:11px;top:50%;transform:translateY(-50%);font-size:16px;color:var(--muted);pointer-events:none}
.gsearch .input{min-height:36px;padding:7px 60px 7px 34px;font-size:var(--text-base);background:var(--muted-bg);border-color:var(--line);border-radius:var(--radius)}
.gsearch .input:hover{border-color:var(--line-strong)}
.gsearch .input:focus-visible{background:var(--surface)}
.gsearch .input::-webkit-search-cancel-button{display:none}
.gsearch kbd{position:absolute;right:8px;top:50%;transform:translateY(-50%);pointer-events:none}
.gsearch-list{position:absolute;top:calc(100% + 6px);right:0;width:max(100%,380px);max-width:calc(100vw - 32px);z-index:var(--z-dropdown);display:grid;gap:2px;max-height:min(440px,70vh);overflow-y:auto;padding:6px;
  background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--radius);box-shadow:var(--shadow-2)}
.topbar [data-cmdk]{display:none}
@media (max-width:1279px){.gsearch kbd{display:none}.gsearch .input{padding-right:10px}}
@media (max-width:767px){.gsearch{display:none}.topbar [data-cmdk]{display:inline-grid}}
.facility{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 12px;font:inherit;font-size:var(--text-base);color:var(--ink);background:var(--muted-bg);border:1px solid var(--line);border-radius:var(--radius);cursor:pointer}
.facility:hover{border-color:var(--line-strong)}
.avatar{display:inline-grid;place-items:center;width:36px;height:36px;font-size:var(--text-sm);font-weight:700;border-radius:50%;background:var(--primary-soft);color:var(--ink)}
.topbar .btn-icon{--h:36px}
/* Sidebar nổi hơn (evolve-site 10/10/2026): tên phân hệ đầy đủ bằng font tiêu đề, icon trong ô vuông ngọc nhạt;
   mục đang mở: vạch --ring 3px bên trái, nền ngọc nhạt, chữ 600, icon trong ô đặc --ring.
   11/10/2026: rộng 240px, mục 40px chữ 14px (trước 13px), icon 17px trong ô 30px; tên dài xuống dòng trong mục, không cắt.
   Bản chữ 16px cùng ngày BA thấy "hơi to quá, nhìn hơi thô" */
.sidebar{padding:14px 10px;background:var(--surface);border-right:1px solid var(--line-strong);overflow-y:auto;min-width:0}
.sidebar h2{margin:0 0 8px;padding:2px 10px 10px;font-family:var(--font-display);font-size:var(--text-lg);font-weight:var(--weight-display);line-height:var(--leading-tight);color:var(--ink);border-bottom:1px solid var(--line)}
.sidebar a{position:relative;display:flex;align-items:center;gap:10px;min-height:40px;margin:2px 0;padding:4px 10px 4px 8px;font-size:var(--text-base);font-weight:500;line-height:var(--leading-tight);color:var(--ink);text-decoration:none;border-radius:var(--radius)}
.sidebar a .ph{flex:none;display:inline-grid;place-items:center;width:30px;height:30px;font-size:17px;color:var(--ink);background:var(--primary-soft);border-radius:var(--radius)}
.sidebar a:hover{background:var(--hover)}
.sidebar a:hover .ph{background:var(--muted-bg)}
.sidebar a[aria-current="page"]{background:var(--primary-soft);font-weight:600;box-shadow:inset 3px 0 0 var(--ring)}
.sidebar a[aria-current="page"] .ph{background:var(--ring);color:var(--surface)}
.sidebar a .count{margin-left:auto}
.content{min-width:0;padding:20px 24px 48px}
.page-head{display:flex;flex-wrap:wrap;align-items:flex-end;gap:8px 16px;margin-bottom:16px}
.page-head h1{font-size:var(--text-3xl)}
.page-head .meta{font-size:var(--text-sm);color:var(--muted)}
.page-head .actions{display:flex;flex-wrap:wrap;gap:8px;margin-left:auto;min-width:0;max-width:100%}
/* Đầu trang giữ dáng (11/10/2026, BA: "độ dài title bị đổi khi chọn khóa học trong dropdown => UI bị nhảy"): cho trang đổi tiêu đề tại chỗ.
   Khối tiêu đề có bề rộng gốc cố định 300px nên hàng nút xuống dòng hay không không phụ thuộc độ dài tiêu đề;
   từ 768px tiêu đề và meta một dòng, dài thì ba chấm (đủ chữ ở thuộc tính title). Dòng cao 1,35 để dấu chồng (Ẩ, Ễ) không bị cắt */
.page-head.is-steady > :first-child{flex:1 1 300px;min-width:0}
/* Hàng nút luôn riêng một dòng đủ bề rộng, căn phải (11/10/2026, BA: "vị trí các button trong sidebar chi tiết khóa học nhảy lung tung"): trước đây hàng
   co theo nội dung nên điểm xuống dòng đổi theo độ dài tên khóa; bộ nút cố định nên đổi khóa thì nút đứng nguyên chỗ */
.page-head.is-steady > .actions{flex:1 0 100%;justify-content:flex-end;margin-left:0}
.page-head.is-steady .ph-title{display:flex;align-items:center;gap:10px;min-width:0}
.page-head.is-steady .ph-title .badge{flex:none}
@media (min-width:768px){.page-head.is-steady h1,.page-head.is-steady .meta{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;line-height:1.35}}
/* Ngăn xem nhanh hẹp hơn 768px: tên khóa vẫn một dòng để hàng nút không trượt lên xuống khi đổi khóa; tên đủ ở tiêu đề ngăn và `title` */
html.is-embed .page-head.is-steady h1,html.is-embed .page-head.is-steady .meta{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;line-height:1.35}
/* Dưới 1280px sidebar thu thành dải icon 56px ở mọi màn (Cổng 3); rê hoặc focus một mục hiện tên. .is-compact ép thu ở khổ rộng
   (khung mẫu 1024 của _system.html) · .is-expanded mở lại đủ chữ khi người dùng bấm nút mở rộng */
.shell.is-compact{--sidebar-w:56px}
.shell.is-compact .sidebar{overflow:visible}
.shell.is-compact .sidebar h2{display:none}
.shell.is-compact .sidebar a > span,.shell.is-compact .sidebar a .count{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.shell.is-compact .sidebar a{position:relative;justify-content:center;padding:0}
.shell.is-compact .sidebar a:is(:hover,:focus-visible) > span:first-of-type{left:calc(100% + 8px);top:50%;width:auto;height:auto;margin:0;padding:4px 8px;clip:auto;overflow:visible;transform:translateY(-50%);
  z-index:var(--z-dropdown);font-size:var(--text-xs);font-weight:600;color:var(--bg);background:var(--ink);border-radius:var(--radius-sm)}
@media (max-width:1279px){
  .shell:not(.is-expanded){--sidebar-w:56px}
  .shell:not(.is-expanded) .sidebar{overflow:visible}
  .shell:not(.is-expanded) .sidebar h2{display:none}
  .shell:not(.is-expanded) .sidebar a > span,.shell:not(.is-expanded) .sidebar a .count{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
  .shell:not(.is-expanded) .sidebar a{position:relative;justify-content:center;padding:0}
  .shell:not(.is-expanded) .sidebar a:is(:hover,:focus-visible) > span:first-of-type{left:calc(100% + 8px);top:50%;width:auto;height:auto;margin:0;padding:4px 8px;clip:auto;overflow:visible;transform:translateY(-50%);
    z-index:var(--z-dropdown);font-size:var(--text-xs);font-weight:600;color:var(--bg);background:var(--ink);border-radius:var(--radius-sm)}
}
@media (max-width:767px){.shell{grid-template-columns:minmax(0,1fr)}.sidebar{display:none}.content{padding:16px}}

/* ---------- Lớp phủ: ngăn trượt · hộp thoại · thông báo ngắn ---------- */
.scrim{position:fixed;inset:0;z-index:var(--z-overlay);background:var(--scrim);opacity:0;pointer-events:none;transition:opacity var(--dur-base) var(--ease-out)}
.scrim.is-open{opacity:1;pointer-events:auto}
.drawer{position:fixed;top:0;right:0;bottom:0;z-index:var(--z-modal);display:flex;flex-direction:column;width:min(100%,var(--drawer-w));background:var(--surface);
  border-left:var(--border-width) solid var(--border-ink);box-shadow:var(--shadow-4);transform:translateX(100%);visibility:hidden;transition:transform var(--dur-slow) var(--ease-out),visibility 0s linear var(--dur-slow)}
.drawer.is-open{transform:none;visibility:visible;transition:transform var(--dur-slow) var(--ease-out)}
.drawer-head{display:flex;align-items:flex-start;gap:8px;padding:16px;border-bottom:1px solid var(--line)}
.drawer-head h2{font-size:var(--text-xl)}
.drawer-head p{font-size:var(--text-sm);color:var(--muted)}
.drawer-body{flex:1;overflow-y:auto;padding:16px;display:grid;gap:14px;align-content:start}
.drawer-foot{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end;padding:12px 16px;border-top:1px solid var(--line)}
.dialog{position:fixed;left:50%;top:50%;z-index:var(--z-modal);width:min(calc(100% - 32px),440px);padding:20px;background:var(--surface);
  border:var(--border-width) solid var(--border-ink);border-radius:var(--radius-lg);box-shadow:var(--shadow-4);transform:translate(-50%,-48%);opacity:0;visibility:hidden;
  transition:opacity var(--dur-base) var(--ease-out),transform var(--dur-base) var(--ease-out),visibility 0s linear var(--dur-base)}
.dialog.is-open{opacity:1;visibility:visible;transform:translate(-50%,-50%);transition:opacity var(--dur-base) var(--ease-out),transform var(--dur-base) var(--ease-out)}
.dialog h2{font-size:var(--text-xl)}
.dialog p{margin-top:8px;font-size:var(--text-sm)}
.dialog-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px;margin-top:20px}
.toast{position:fixed;left:50%;bottom:24px;z-index:var(--z-toast);width:max-content;max-width:min(calc(100% - 32px),480px);padding:10px 14px;font-size:var(--text-sm);
  background:var(--ink);color:var(--bg);border-radius:var(--radius);box-shadow:var(--shadow-4);transform:translate(-50%,8px);opacity:0;pointer-events:none;transition:opacity var(--dur-base) var(--ease-out),transform var(--dur-base) var(--ease-out)}
.toast.is-open{opacity:1;transform:translate(-50%,0)}


/* =====================================================================
   Portal quản lý · Lịch tuần (concept M): lưới 7 ngày × 13 ca, ô giữ số lớp, ngăn ca liệt kê ai dạy
   ===================================================================== */
.wk-wrap{overflow-x:auto;min-width:0}
.wk{width:100%;min-width:520px;border-collapse:separate;border-spacing:2px;font-size:var(--text-sm)}
.wk th{font-weight:400;text-align:left;padding:0 2px 4px;font-size:var(--text-xs);white-space:nowrap}
.wk th b{font-weight:600}
.wk th[scope="row"]{width:36px;padding:0 6px 0 0;text-align:right;color:var(--muted)}
.wk-noon td{padding:1px 0;text-align:center;font-size:var(--text-xs);color:var(--muted)}
.wk-cell{position:relative;display:block;width:100%;height:32px;padding:0;font:inherit;font-size:var(--text-sm);font-weight:500;color:var(--ink);
  border:0;border-radius:var(--radius-sm);cursor:pointer;background:color-mix(in oklch,var(--primary) var(--heat,6%),var(--surface))}
.wk-cell:hover{outline:1px solid var(--line-strong);outline-offset:0}
.wk-cell[aria-pressed="true"]{outline:2px solid var(--ink);outline-offset:1px}
.wk-cell:focus-visible{outline:2px solid var(--ring);outline-offset:1px}
.wk-cell.is-empty{color:var(--muted);font-weight:400}
.wk-cell.is-rail{box-shadow:inset 4px 0 0 var(--accent)}
.wk-dot{position:absolute;top:3px;right:3px;width:9px;height:9px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 2px var(--surface)}
.wk-legend{display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:8px;font-size:var(--text-xs);color:var(--muted)}
.wk-legend i{display:inline-block;width:12px;height:12px;margin-right:4px;vertical-align:-2px;border-radius:2px}
.wk-strip{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:6px 8px;font-size:var(--text-sm);background:var(--surface);border:1px solid var(--line);border-radius:var(--radius)}
.wk-strip > span{color:var(--muted);margin-right:4px}
.wk-strip button{display:inline-flex;align-items:center;gap:6px;min-height:28px;padding:0 8px;font:inherit;font-size:var(--text-sm);color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-sm);cursor:pointer}
.wk-strip button:hover{background:var(--hover)}
.wk-strip button[aria-pressed="true"]{background:var(--selected);border-color:var(--ring)}
/* Ngăn ca: ai dạy trước, ngoại lệ sau */
.shift{display:flex;flex-direction:column;min-width:0;max-height:min(720px,calc(100dvh - 140px));background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg)}
.shift-head{padding:14px 16px 10px;border-bottom:1px solid var(--line)}
.shift-head p{font-size:var(--text-sm);color:var(--muted)}
.shift-head h2{font-size:var(--text-xl);margin-top:2px}
.shift-head .sum{margin-top:4px;font-size:var(--text-sm);color:var(--ink)}
.shift-body{overflow-y:auto;padding:4px 0 8px}
.shift-sec{padding:10px 16px 4px;font-size:var(--text-xs);font-weight:600;color:var(--muted)}
.who{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 12px;padding:7px 16px;border-top:1px solid var(--line)}
.who:first-of-type{border-top:0}
.who-name{font-weight:600;min-width:0;overflow-wrap:anywhere}
.who-cls{display:flex;flex-wrap:wrap;gap:2px 8px;font-size:var(--text-sm);color:var(--muted)}
.who-cls span + span::before{content:"·";margin-right:8px}
.who-fill{align-self:start;font-size:var(--text-sm);text-align:right}
.who-flag{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:var(--text-xs);color:var(--ink)}
.who.is-open{background:color-mix(in srgb,var(--accent) 14%,var(--surface))}
.ex{margin:8px 16px 0;padding:10px 12px;border:1px solid var(--line);border-radius:var(--radius)}
.ex p{margin-top:6px;font-size:var(--text-sm)}
.ex .row{margin-top:8px}

/* =====================================================================
   Portal quản lý trên điện thoại · Ca hôm nay của HLV
   ===================================================================== */
.ca-list{display:grid;gap:2px;margin:0;padding:0;list-style:none}
.ca-off{display:flex;align-items:center;gap:12px;min-height:28px;padding:0 12px;font-size:var(--text-xs);color:var(--muted);background:var(--muted-bg);border-radius:var(--radius-sm)}
.ca-off b{width:36px;font-weight:500}
.ca{overflow:hidden;border-radius:var(--radius-sm);background:color-mix(in oklch,var(--primary) 30%,var(--surface))}
.ca > button{display:flex;align-items:center;gap:12px;width:100%;min-height:var(--tap,48px);padding:10px 12px;font:inherit;text-align:left;color:var(--ink);background:none;border:0;cursor:pointer}
.ca > button b{width:36px;font-weight:700}
.ca > button .grow{font-size:var(--text-base)}
.ca > button .num{font-size:var(--text-sm)}
.ca > button[aria-expanded="true"]{background:color-mix(in oklch,var(--primary) 46%,var(--surface));font-weight:600}
.ca-caret{flex:none;transition:transform var(--dur-fast) var(--ease-out)}
.ca > button[aria-expanded="true"] .ca-caret{transform:rotate(180deg)}
.ca ul{margin:0;padding:4px 12px 8px;list-style:none;background:var(--surface)}
.ca li{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 12px;min-height:44px;padding:4px 0;border-top:1px solid var(--line)}
.ca li:first-child{border-top:0}
.dock{position:sticky;bottom:0;padding:12px 16px calc(12px + var(--sab,0px));background:var(--surface);border-top:1px solid var(--line)}
.dock p{font-size:var(--text-sm);color:var(--muted);margin-bottom:8px}
/* Thanh tab dưới tĩnh cho _system.html; trang thật dùng .app-tabs của app.css */
.tabbar{display:flex;justify-content:space-around;padding:6px 4px;background:var(--surface);border-top:var(--border-width) solid var(--line)}
.tabbar a{flex:1 1 0;display:grid;justify-items:center;align-content:center;gap:2px;min-width:0;min-height:var(--tap,48px);padding:4px 2px;font-size:var(--text-xs);color:var(--muted);text-decoration:none;white-space:nowrap}
.tabbar a .ph{font-size:22px}
.tabbar a[aria-current="page"]{color:var(--ink);font-weight:600}
.tabbar a[aria-current="page"] .ph{color:var(--ring)}

/* =====================================================================
   Portal người dùng (concept Z4 + màu V + hình Z5): buổi tới · lưới buổi có ngày · tấm chọn đổi lịch
   ===================================================================== */
:root[data-theme="nguoi-dung"] .btn{border-color:var(--ink);box-shadow:var(--shadow-1)}
:root[data-theme="nguoi-dung"] .btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
:root[data-theme="nguoi-dung"] .btn.is-ghost{border-color:transparent;box-shadow:none}
:root[data-theme="nguoi-dung"] .btn.is-ghost:active{transform:scale(.98)}
:root[data-theme="nguoi-dung"] .btn:disabled{box-shadow:none}
:root[data-theme="nguoi-dung"] .input,:root[data-theme="nguoi-dung"] .select,:root[data-theme="nguoi-dung"] .textarea{border-color:var(--ink)}
:root[data-theme="nguoi-dung"] .tabs [role="tab"][aria-selected="true"]{border-bottom-color:var(--primary)}
:root[data-theme="nguoi-dung"] .badge{border-radius:999px;padding:1px 9px}
.u-next{padding:18px;border-radius:var(--radius-lg);background:var(--primary);color:var(--on-primary);border:var(--border-width) solid var(--ink);box-shadow:var(--shadow-1)}
.u-next .eyebrow{font-size:var(--text-sm);font-weight:600}
.u-next h2{margin-top:2px;font-size:clamp(1.55rem,7.4vw,2.1rem);font-weight:700}
.u-next .meta{margin-top:4px;font-size:var(--text-sm)}
.u-next .left{display:flex;flex-wrap:wrap;gap:4px 24px;margin-top:14px;padding-top:12px;border-top:2px solid color-mix(in srgb,var(--on-primary) 40%,transparent)}
.u-next .left b{font-family:var(--font-display);font-size:var(--text-2xl);font-weight:700;margin-right:4px}
.u-next .left span{font-size:var(--text-sm)}
.u-next .row{margin-top:14px}
.u-next .btn{background:var(--surface);color:var(--ink)}
.u-next .btn:hover{background:var(--muted-bg)}
.u-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:2px 12px}
.u-head h2{font-size:var(--text-lg);font-weight:700}
.u-head p{font-size:var(--text-sm);color:var(--muted)}
.u-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin-top:10px}
.u-cell{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:66px;min-width:0;padding:6px 2px;font:inherit;text-align:center;line-height:1.15;
  color:var(--ink);background:var(--surface);border:2px solid var(--line);border-radius:var(--radius)}
.u-cell b{font-family:var(--font-display);font-size:15px;font-weight:700}
.u-cell small{font-size:11.5px;overflow-wrap:anywhere}
.u-cell.is-done{background:var(--primary);color:var(--on-primary);border-color:var(--primary)}
.u-cell.is-today{border:3px solid var(--primary)}
.u-cell.is-exam{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.u-cell.is-gift{background:var(--secondary);color:var(--on-secondary);border-color:var(--secondary)}
.u-cell.is-makeup{border:2px dashed var(--primary)}
.u-cell.is-absent{border:2px dashed var(--destructive);color:var(--danger-text);cursor:pointer}
.u-cell.is-absent:hover{background:var(--danger-soft)}
.u-cell.is-absent:active{transform:scale(.97)}
.u-cell.is-absent u{text-underline-offset:2px}
.u-cell.is-moved{background:transparent;border:2px dashed var(--line-strong);color:var(--muted)}
.u-cell.is-charged{background:var(--danger-soft);border-color:var(--destructive);color:var(--danger-text);cursor:pointer}
.u-cell.is-flash{animation:flash .5s ease 3}
@keyframes flash{50%{opacity:.35}}
.u-legend{display:flex;flex-wrap:wrap;gap:4px 12px;margin:10px 0 0;padding:0;list-style:none;font-size:var(--text-xs);color:var(--muted)}
.u-legend i{display:inline-block;width:12px;height:12px;margin-right:4px;vertical-align:-2px;border-radius:3px;border:2px solid transparent}
.u-kid{display:block;width:100%;padding:12px 14px;font:inherit;text-align:left;color:var(--ink);background:var(--surface);border:var(--border-width) solid var(--ink);border-radius:var(--radius-lg);box-shadow:var(--shadow-1);cursor:pointer}
.u-kid:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
.u-kid .u-head h3{font-size:var(--text-base);font-weight:700}
.u-mini{display:grid;grid-template-columns:repeat(var(--n,14),minmax(0,1fr));gap:3px;margin-top:10px}
.u-mini i{height:14px;border-radius:4px;background:var(--surface);border:2px solid var(--line)}
.u-mini .is-done{background:var(--primary);border-color:var(--primary)}
.u-mini .is-today{border-color:var(--primary);border-width:3px}
.u-mini .is-exam{background:var(--accent);border-color:var(--accent)}
.u-mini .is-gift{background:var(--secondary);border-color:var(--secondary)}
.u-mini .is-absent{border:2px dashed var(--destructive)}
.u-mini .is-skip{border:2px dashed var(--muted);background:transparent}
.u-mini .is-charged{background:var(--danger-soft);border-color:var(--destructive)}
/* Tấm chọn từ đáy (sheet). Trang thật dùng .app-sheet của app.css; bản này cho _system.html và cho lựa chọn trong tấm */
.u-sheet{position:fixed;left:0;right:0;bottom:0;z-index:var(--z-modal);display:flex;flex-direction:column;max-height:84dvh;margin:0 auto;width:min(100%,440px);
  background:var(--surface);border:var(--border-width) solid var(--ink);border-bottom:0;border-radius:var(--radius-lg) var(--radius-lg) 0 0;
  transform:translateY(100%);visibility:hidden;transition:transform var(--dur-slow) var(--ease-out),visibility 0s linear var(--dur-slow)}
.u-sheet.is-open{transform:none;visibility:visible;transition:transform var(--dur-slow) var(--ease-out)}
.u-sheet .grip{width:40px;height:4px;margin:10px auto 0;border-radius:2px;background:var(--line-strong)}
.u-sheet-head{display:flex;align-items:flex-start;gap:12px;padding:10px 18px 6px}
.u-sheet-head h2{font-size:var(--text-lg);font-weight:700}
.u-sheet-head p{font-size:var(--text-sm);color:var(--muted)}
.u-sheet-body{overflow-y:auto;padding:0 18px 12px}
.u-sheet-body h3{margin-top:14px;font-size:var(--text-sm);font-weight:700}
.u-sheet-foot{padding:12px 18px calc(14px + var(--sab,0px));border-top:2px solid var(--line)}
.u-sheet-foot p{margin-bottom:8px;font-size:var(--text-sm)}
.u-opts{display:grid;gap:8px;margin-top:8px}
.u-opt{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:56px;padding:10px 14px;font:inherit;text-align:left;color:var(--ink);
  background:var(--surface);border:2px solid var(--line);border-radius:var(--radius);cursor:pointer}
.u-opt:hover{border-color:var(--line-strong)}
.u-opt[aria-checked="true"]{border-color:var(--primary);box-shadow:0 0 0 1px var(--primary);background:var(--muted-bg)}
.u-opt .t{display:block;font-weight:600}
.u-opt .s{display:block;font-size:var(--text-sm);color:var(--muted)}
.u-opt .left{flex:none;font-size:var(--text-sm);font-weight:500}
.u-opt.is-full{border-style:dashed;color:var(--muted);cursor:default;background:transparent}
.u-opt.is-full .t{font-weight:400}
.u-rec{display:inline-block;margin-left:4px;padding:0 8px;font-size:var(--text-xs);font-weight:600;border-radius:999px;background:var(--accent);color:var(--on-accent)}
.link-btn{display:inline-flex;align-items:center;min-height:var(--tap,44px);padding:0 4px;font:inherit;font-size:var(--text-sm);font-weight:600;color:var(--link);text-decoration:underline;text-underline-offset:2px;background:none;border:0;cursor:pointer}

/* =====================================================================
   Khung Portal quản lý: phần thêm ở B3 (shell.js)
   ===================================================================== */
.skip{position:absolute;left:8px;top:-48px;z-index:var(--z-toast);padding:8px 12px;background:var(--ink);color:var(--bg);border-radius:var(--radius);text-decoration:none}
.skip:focus{top:8px}
.shell.is-single{grid-template-columns:minmax(0,1fr)}
.logo-link{display:inline-flex;flex:none;border-radius:var(--radius-sm)}
.menu-wrap{position:relative}
.avatar{border:0;cursor:pointer;font:inherit;font-size:var(--text-sm);font-weight:700}
.avatar:hover{background:var(--primary-hover)}
.menu{position:absolute;right:0;top:calc(100% + 6px);z-index:var(--z-dropdown);display:grid;min-width:248px;padding:6px;background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--radius);box-shadow:var(--shadow-2)}
.menu[hidden]{display:none}
.menu-head{display:grid;gap:2px;padding:6px 8px 8px;border-bottom:1px solid var(--line);font-size:var(--text-sm)}
.menu-head span{color:var(--muted);font-size:var(--text-xs)}
.menu-sec{padding:8px 8px 2px;font-size:var(--text-xs);color:var(--muted)}
.menu a,.menu button.menu-item{display:flex;align-items:center;gap:8px;min-height:32px;padding:0 8px;font:inherit;font-size:var(--text-sm);color:var(--ink);text-decoration:none;text-align:left;background:none;border:0;border-radius:var(--radius-sm);cursor:pointer}
.menu a:hover,.menu button.menu-item:hover{background:var(--hover)}
.menu a[aria-current="true"]{font-weight:600;background:var(--selected)}
.menu hr{border:0;border-top:1px solid var(--line);margin:6px 0}
.side-toggle{display:none;align-items:center;gap:8px;width:100%;min-height:32px;margin-top:12px;padding:0 10px;font:inherit;font-size:var(--text-sm);color:var(--muted);background:none;border:0;border-radius:var(--radius);cursor:pointer}
.side-toggle:hover{background:var(--hover);color:var(--ink)}
@media (max-width:1279px){
  .side-toggle{display:flex}
  .shell:not(.is-expanded) .side-toggle{justify-content:center;padding:0}
  .shell:not(.is-expanded) .side-toggle span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
  .shell.is-expanded .sidebar{position:fixed;top:var(--topbar-h);left:0;bottom:0;width:var(--sidebar-w);z-index:var(--z-overlay);border-right:1px solid var(--line-strong)}
}
.cmdk{top:12vh;transform:translate(-50%,0);width:min(calc(100% - 32px),560px);padding:12px}
.cmdk.is-open{transform:translate(-50%,0)}
.cmdk-list{display:grid;gap:2px;max-height:min(420px,60vh);overflow-y:auto;margin-top:8px}
.cmdk-list a,.gsearch-list a{display:flex;align-items:center;gap:10px;min-height:36px;padding:0 10px;font-size:var(--text-sm);color:var(--ink);text-decoration:none;border-radius:var(--radius-sm)}
.cmdk-list a:hover,.cmdk-list a:focus-visible,.gsearch-list a:hover,.gsearch-list a:focus-visible{background:var(--hover)}
.cmdk-list a[aria-selected="true"],.gsearch-list a[aria-selected="true"]{background:var(--selected);box-shadow:inset 3px 0 0 var(--ring)}
.cmdk-list a .muted,.gsearch-list a .muted{margin-left:auto;font-size:var(--text-xs)}
.cmdk-sec{padding:8px 10px 2px;font-size:var(--text-xs);color:var(--muted)}
.cmdk-hint{margin-top:8px;font-size:var(--text-xs);color:var(--muted)}

/* ---------- Lịch tuần: bố cục hai cột và đầu cột ngày ---------- */
.week-layout{display:grid;grid-template-columns:minmax(0,1fr) var(--aside,352px);gap:16px;align-items:start}
.week-layout .shift{position:sticky;top:calc(var(--topbar-h) + 12px)}
@media (max-width:1000px){.week-layout{grid-template-columns:minmax(0,1fr)}.week-layout .shift{position:static}}
.wk-day{display:inline-flex;align-items:center;gap:4px;padding:2px 4px;font:inherit;font-size:var(--text-xs);color:var(--ink);background:none;border:0;border-radius:var(--radius-sm);cursor:pointer;white-space:nowrap}
.wk-day:hover{background:var(--hover)}
.wk-day[aria-pressed="true"]{background:var(--selected);box-shadow:inset 0 -2px 0 var(--ring)}
.wk-day.is-today b{color:var(--link)}
.wk-cell.is-closed{background:var(--muted-bg);color:var(--muted);text-decoration:line-through}
.toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:12px}
.toolbar .grow{flex:1 1 auto}
.plan-row{display:grid;gap:8px;padding:12px;border:1px solid var(--line);border-radius:var(--radius)}
.plan-row h3{font-size:var(--text-base);font-family:var(--font-body);font-weight:600}
.plan-row .opts{display:grid;gap:6px}
.radio{display:flex;align-items:flex-start;gap:8px;font-size:var(--text-sm);cursor:pointer}
.radio input{margin:3px 0 0;accent-color:var(--ring)}
.inline-form{display:grid;gap:6px;margin-top:8px}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media (max-width:480px){.grid2{grid-template-columns:minmax(0,1fr)}}

/* =====================================================================
   Màn điện thoại (khung app.css của kit): màu nhấn của khuôn là --accent, ở dự án này --accent là
   "việc cần quyết" (quản lý) và "Thi" (người dùng) nên đổi về token đúng vai. Vùng chạm 48px cho cả iOS và Android (DESIGN.md mục 10)
   ===================================================================== */
html[data-surface="app"]{--tap:48px;--app-font:var(--font-body)}
.app-large-title{font-family:var(--font-display);font-weight:var(--weight-display)}
[data-platform="android"] .app-large-title{font-weight:var(--weight-display)}
.app-back,.app-icon-btn{color:var(--link)}
.app-tabs a{font-size:11px}
.app-tabs [aria-current="page"]{color:var(--ink);font-weight:700}
.app-tabs [aria-current="page"] i{color:var(--ring)}
.app-btn{background:var(--primary);color:var(--on-primary)}
.app-btn:not(.is-quiet):hover{background:var(--primary-hover)}
.app-btn:not(.is-quiet):active{background:var(--primary-pressed)}
.app-btn.is-quiet{background:var(--primary-soft);color:var(--ink)}
.app-btn:disabled{opacity:var(--disabled-opacity);cursor:not-allowed}
.app-switch:checked{background:var(--ring)}
[data-platform="android"] .app-section{color:var(--link)}
[data-platform="android"] .app-switch:checked{border-color:var(--ring);background:var(--ring)}
.app-logo{height:28px;width:auto;margin:0 4px 0 8px;flex:none}
.app-pad{padding:0 16px}
.app-h2{margin:22px 16px 8px;font-family:var(--font-display);font-size:var(--text-lg);font-weight:var(--weight-display)}
.app-sheet-panel h2{font-family:var(--font-display);font-size:var(--text-xl);font-weight:var(--weight-display);margin:0 0 4px}
.app-sheet-panel .sub{font-size:var(--text-sm);color:var(--muted);margin-bottom:12px}
.app-sheet-panel .stack{gap:14px}
.app-sheet-actions{display:grid;gap:8px;margin-top:16px}
.cam{display:grid;place-items:center;gap:6px;aspect-ratio:4/3;border:2px dashed var(--line-strong);border-radius:var(--radius-lg);background:var(--muted-bg);color:var(--muted);text-align:center;font-size:var(--text-sm);padding:12px}
.cam .ph{font-size:32px}
.result{display:grid;gap:4px;padding:12px 14px;border-radius:var(--radius);background:var(--success-soft);color:var(--ink)}
.result.is-bad{background:var(--danger-soft)}
.result b{font-size:var(--text-lg)}
.kv{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 12px;font-size:var(--text-sm)}
.kv dt{color:var(--muted)}
.kv dd{margin:0;font-weight:500}
:root[data-theme="nguoi-dung"] .app-btn{border:var(--border-width) solid var(--ink);box-shadow:var(--shadow-1);border-radius:var(--radius)}
:root[data-theme="nguoi-dung"] .app-btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
:root[data-theme="nguoi-dung"] .app-tabs [aria-current="page"] i{color:var(--primary)}
:root[data-theme="nguoi-dung"] .app-sheet-panel{border:var(--border-width) solid var(--ink);border-bottom:0;border-radius:var(--radius-lg) var(--radius-lg) 0 0}

/* ---------- In (Lịch dạy trong ngày: mỗi HLV một bản) ---------- */
.sheet-hlv{break-inside:avoid}
/* ---------- Ô số và biểu đồ cột ngang (baocao.js · DESIGN.md mục 11) ---------- */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.kpi{padding:10px 12px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);min-width:0}
.kpi-l{font-size:var(--text-xs);color:var(--muted)}
.kpi-v{font-family:var(--font-display);font-size:clamp(var(--text-lg),1.1rem + 0.6vw,var(--text-2xl));font-weight:var(--weight-display,600);line-height:1.15;margin-top:2px;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.kpi-s{font-size:var(--text-xs);color:var(--muted);margin-top:2px}
.bars{display:grid;gap:6px}
.bar{display:grid;grid-template-columns:minmax(90px,160px) minmax(0,1fr) auto;align-items:center;gap:8px;font-size:var(--text-sm)}
.bar-l{color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bar-t{height:14px;background:var(--muted-bg);border-radius:var(--radius-sm);overflow:hidden}
.bar-f{display:block;height:100%;border-radius:var(--radius-sm);min-width:2px;transition:width var(--dur-base) var(--ease-out)}
.bar-v{font-variant-numeric:tabular-nums;white-space:nowrap}
.bars-table{margin-top:8px;font-size:var(--text-sm)}
.bars-table summary{cursor:pointer;color:var(--link);min-height:28px;display:flex;align-items:center}
.bars-table .table{margin-top:6px}
@media (max-width:480px){.bar{grid-template-columns:minmax(70px,110px) minmax(0,1fr) auto}}

/* =====================================================================
   evolve-site 10/10/2026: Bán khóa giờ riêng từng thứ · các buổi sẽ sinh · lịch Ngày/Tuần/Tháng (FEATURE-DECISIONS.md)
   ===================================================================== */
.grid-auto{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,190px),1fr));gap:12px}
.bk-aside{position:sticky;top:calc(var(--topbar-h) + 12px)}
@media (max-width:1000px){.bk-aside{position:static}}
/* Mỗi thứ một ô tick và một khung giờ riêng (BR-SV-27 · BR-XL-19) */
.day-slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:8px}
.day-slot{display:grid;gap:4px;min-width:0}
.day-slot .check{min-height:28px}
.day-slot .select{min-height:34px;padding:6px 4px}
.day-slot .select:disabled{opacity:.45}
/* Màn chạm hay màn hẹp (dưới 768px): ô tick và ô giờ đủ 44px như nút (DESIGN.md mục 4, vùng chạm) */
@media (pointer:coarse),(max-width:767px){.day-slot .check,.day-slot .select{min-height:44px}}
/* Các buổi sẽ sinh, dời từng buổi tại chỗ (F-244) */
.buoi-list{border:1px solid var(--line);border-radius:var(--radius);background:var(--surface)}
.buoi-list > summary{display:flex;flex-wrap:wrap;align-items:center;gap:6px;min-height:40px;padding:6px 12px;font-size:var(--text-sm);font-weight:600;cursor:pointer;list-style:none;border-radius:var(--radius)}
.buoi-list > summary::-webkit-details-marker{display:none}
.buoi-list > summary:hover{background:var(--hover)}
.buoi-list > summary .ph{transition:transform var(--dur-fast) var(--ease-out)}
.buoi-list[open] > summary .ph{transform:rotate(90deg)}
.buoi-hint{margin-left:auto;font-weight:400;font-size:var(--text-xs);color:var(--muted)}
.buoi-rows{margin:0;padding:0;list-style:none;border-top:1px solid var(--line);max-height:460px;overflow-y:auto}
.buoi{display:grid;grid-template-columns:36px minmax(0,1.4fr) minmax(0,1fr) auto;align-items:center;gap:4px 12px;min-height:40px;padding:4px 12px;font-size:var(--text-sm);border-top:1px solid var(--line)}
.buoi:first-child{border-top:0}
.buoi-no{color:var(--muted)}
.buoi[data-moved]{background:var(--info-soft)}
.buoi.is-editing{grid-template-columns:36px minmax(0,1fr);align-items:start;padding:8px 12px;background:var(--muted-bg)}
.buoi-edit{display:grid;gap:8px;min-width:0}
@media (max-width:600px){
  .buoi{grid-template-columns:32px minmax(0,1fr) auto}
  .buoi-who{grid-column:2;grid-row:2;font-size:var(--text-xs);color:var(--muted)}
  .buoi > .btn{grid-column:3;grid-row:1/span 2}
  .buoi-hint{margin-left:0;flex-basis:100%}
}
/* Lịch tháng: mỗi ngày một ô, nền theo số lớp như ô ca của lưới tuần (F-245 · F-246) */
.mcal-head,.mcal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px;margin:0;padding:0;list-style:none}
.mcal-head{margin-bottom:4px;font-size:var(--text-xs);font-weight:600;color:var(--muted);text-align:center}
.mcal > li{min-width:0;display:grid}
.mcal-day,.mcal-cell{display:grid;align-content:start;gap:3px;min-width:0;min-height:92px;padding:6px 8px;font:inherit;text-align:left;color:var(--ink);border-radius:var(--radius-sm)}
.mcal-day{background:color-mix(in oklch,var(--primary) var(--heat,6%),var(--surface));border:0;cursor:pointer}
.mcal-day:hover{outline:1px solid var(--line-strong)}
.mcal-day:focus-visible{outline:2px solid var(--ring);outline-offset:1px}
.mcal-day.is-closed{background:var(--muted-bg);color:var(--muted)}
.mcal-cell{background:var(--surface);border:1px solid var(--line)}
.mcal-d{display:inline-grid;place-items:center;justify-self:start;min-width:22px;height:22px;padding:0 4px;font-size:var(--text-sm);font-weight:600;border-radius:11px}
.is-today > .mcal-d{background:var(--ink);color:var(--surface)}
.mcal-n{font-size:var(--text-xs)}
.mcal-tags{display:flex;flex-wrap:wrap;gap:2px}
.mcal-tags .badge{padding:0 5px;font-size:11px}
.mcal-dots{display:none;flex-wrap:wrap;gap:3px}
.mcal-dots i{width:8px;height:8px;border-radius:50%;background:var(--info)}
.mcal-dots .d-warn{background:var(--warning)}
.mcal-dots .d-need{background:var(--accent);box-shadow:0 0 0 1px var(--on-accent)}
.mcal-legend{display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:8px;font-size:var(--text-xs);color:var(--muted)}
/* Ô ngày có buổi của Lịch học của học viên là nút mở ngăn buổi (11/10/2026: bỏ chế độ Tuần, bấm buổi trên lịch tháng để thao tác) */
button.mcal-cell{width:100%;cursor:pointer}
button.mcal-cell:hover{border-color:var(--line-strong);background:var(--hover)}
button.mcal-cell:focus-visible{outline:2px solid var(--ring);outline-offset:1px}
/* Ngăn buổi: mỗi buổi của ngày một thẻ (giờ, lớp, HLV; trạng thái; thao tác) */
.hvb-card{display:grid;gap:8px;padding:12px;border:1px solid var(--line);border-radius:var(--radius)}
.hvb-card h3{font-family:var(--font-body);font-size:var(--text-base);font-weight:600}
.hvb-card .row{flex-wrap:wrap;gap:8px}
.hvb-state{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0;font-size:var(--text-sm);color:var(--muted)}
/* Buổi của một học viên trong lịch tháng */
.hv-chip{display:block;padding:2px 6px;font-size:var(--text-xs);line-height:1.35;color:var(--ink);background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--radius-sm);overflow-wrap:anywhere}
.hv-chip.is-done{background:var(--primary-soft);border-color:var(--ring)}
.hv-chip.is-bu{border-style:dashed;border-color:var(--ring)}
.hv-chip.is-off{color:var(--muted);background:transparent;border-style:dashed}
.hv-chip.is-absent{color:var(--danger-text);border:1px dashed var(--destructive)}
.cal-nav{display:inline-flex;align-items:center;gap:4px;font-size:var(--text-sm);font-weight:600}
@media (max-width:640px){
  .mcal-day,.mcal-cell{min-height:58px;padding:4px}
  .mcal-tags{display:none}
  .mcal-dots{display:flex}
  .mcal-n{font-size:11px}
  .mcal-cell .hv-chip{width:8px;height:8px;padding:0;border-radius:50%}
  .mcal-cell .hv-chip > span{display:none}
}

/* =====================================================================
   evolve-site 11/10/2026 (FEATURE-DECISIONS.md, không thêm token): ngăn rộng · ngăn chồng · ngăn xem nhanh · dòng bấm được ·
   ô chọn · thanh bước có trạng thái · bảng ca của Lịch Ngày · dải nhịp 13 ca của Lịch Tháng · dòng quyền của Sửa bộ quyền
   ===================================================================== */
/* Ngăn rộng: nửa màn trên máy tính (tối thiểu 640px), toàn màn dưới 768px */
.drawer.is-wide{width:min(100%,max(640px,50vw))}
@media (max-width:767px){.drawer.is-wide{width:100%;border-left:0}}
/* Ngăn chồng (ui.push): ngăn dưới lệch trái 24px và phủ mờ, không bấm được; ngăn trên có nút quay lại */
.drawer.is-open.is-under{transform:translateX(-24px)}
.drawer.is-under::after{content:"";position:absolute;inset:0;background:var(--scrim);pointer-events:none}
.drawer-back{flex:none;align-self:center;max-width:46%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.drawer-back .ph{flex:none}
/* Ngăn xem nhanh: nguyên màn chi tiết trong khung nhúng; đang tải là khung xương đúng hình, quá 6 giây thì khối lỗi kèm Mở toàn trang */
.peek .drawer-head{align-items:center}
.peek-kind{font-size:var(--text-xs);color:var(--muted)}
.peek-body{position:relative;flex:1;min-height:0;display:flex;flex-direction:column;background:var(--bg)}
.peek-frame{flex:1;width:100%;min-height:0;border:0;background:var(--bg)}
.peek-load,.peek-err{position:absolute;inset:0;display:grid;align-content:start;gap:12px;padding:20px;background:var(--bg)}
.peek-load .skel{height:14px}
.peek-load .skel:first-child{width:46%;height:24px}
@media (max-width:479px){.peek-full-l{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}}
/* Trang chạy trong ngăn xem nhanh (?embed=1): không thanh trên, không sidebar, không đường về */
html.is-embed .topbar,html.is-embed .sidebar,html.is-embed .skip,html.is-embed .back-from,html.is-embed #back{display:none!important}
html.is-embed .shell{display:block;min-height:0}
html.is-embed .content{padding:16px 20px 32px}
/* Dòng bảng có lối vào chi tiết: cả dòng bấm được (site.js) */
.table tbody tr:has([data-row-main]),.table tbody tr:has(a.cell-main[href]){cursor:pointer}
/* Ô chọn (Cổng 2 "Cả ô lẫn danh sách xổ"): mũi tên mảnh vẽ bằng token, chữ dài cắt ba chấm */
.select,select.facility{appearance:none;padding-right:30px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 43%,var(--muted) 43%,var(--muted) 57%,transparent 57%),linear-gradient(-45deg,transparent 43%,var(--muted) 43%,var(--muted) 57%,transparent 57%);
  background-position:calc(100% - 17px) 50%,calc(100% - 12px) 50%;background-size:6px 6px;background-repeat:no-repeat}
.select:disabled{cursor:not-allowed}
/* Ô trong một trường không giãn khi trường bên cạnh cao hơn (ô chọn tùy biến không còn là phần tử thay thế nên giãn theo hàng) */
.field{align-content:start}
/* Edge, Chrome từ 135: ô chọn tùy biến, danh sách xổ cùng kiểu menu (nền mặt thẻ, viền, bo, mục đang chọn nền nhạt và dấu tick ngọc đậm).
   Trình duyệt khác giữ danh sách mặc định của hệ điều hành; mã đọc giá trị không đổi */
@supports (appearance:base-select){
  /* Mũi tên ghim mép phải trên nền cùng màu ô: chữ quá dài bị che dưới mũi tên, không đẩy mất mũi tên */
  .select:not([multiple]):not([size]),select.facility{appearance:base-select;position:relative;display:inline-flex;align-items:center;padding-right:30px;background-image:none}
  .select:not([multiple]):not([size])::picker-icon,select.facility::picker-icon{content:"";position:absolute;top:0;right:0;bottom:0;width:28px;margin:0;border-radius:0 var(--radius-sm) var(--radius-sm) 0;
    background-color:inherit;background-image:linear-gradient(45deg,transparent 43%,var(--muted) 43%,var(--muted) 57%,transparent 57%),linear-gradient(-45deg,transparent 43%,var(--muted) 43%,var(--muted) 57%,transparent 57%);
    background-position:9px 50%,14px 50%;background-size:6px 6px;background-repeat:no-repeat;transition:transform var(--dur-fast) var(--ease-out)}
  .select:open::picker-icon,select.facility:open::picker-icon{transform:rotate(180deg)}
  .select:not([multiple]):not([size])::picker(select),select.facility::picker(select){appearance:base-select;margin-block:4px;padding:4px;max-height:min(360px,60vh);
    color:var(--ink);background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--radius);box-shadow:var(--shadow-2)}
  :root[data-theme="nguoi-dung"] .select::picker(select){border:var(--border-width) solid var(--ink)}
  .select option,select.facility option{display:flex;align-items:center;gap:8px;min-height:32px;padding:4px 10px;font-size:var(--text-sm);color:var(--ink);border-radius:var(--radius-sm);white-space:normal;cursor:pointer}
  [data-surface="app"] .select option{min-height:44px;font-size:var(--text-base)}
  .select option:hover,.select option:focus-visible,select.facility option:hover,select.facility option:focus-visible{background:var(--hover);outline:none}
  .select option:checked,select.facility option:checked{background:var(--selected);font-weight:600}
  .select option::checkmark,select.facility option::checkmark{order:1;margin-inline-start:auto;color:var(--ring);font-weight:700}
  .select option:disabled{opacity:var(--disabled-opacity);cursor:not-allowed}
  .day-slot .select{padding-left:6px;padding-right:22px}
  .day-slot .select::picker-icon{width:20px;background-position:4px 50%,9px 50%}
}
/* Thanh bước có trạng thái (Bán khóa): mỗi bước là nút đưa tới phần của nó; xong = ô tròn đặc --ring có dấu tick; đang làm = vòng --ring;
   phần đang làm viền --ring */
.steps.is-live{flex-wrap:wrap;gap:4px 8px;margin-bottom:16px}
.steps.is-live li{flex:1 1 auto;display:flex;align-items:center;gap:8px;padding:0;min-width:0}
.steps.is-live li:last-child{flex:0 1 auto}
.steps.is-live li::before{content:none}
.steps.is-live li::after{position:static;flex:1 1 auto;min-width:12px;height:2px;background:var(--line)}
.steps.is-live li[data-done]::after{background:var(--ring)}
.steps.is-live button{display:inline-flex;align-items:center;gap:8px;min-height:32px;padding:2px 10px 2px 2px;font:inherit;font-size:var(--text-sm);font-weight:inherit;color:inherit;
  white-space:nowrap;background:none;border:0;border-radius:999px;cursor:pointer}
.steps.is-live button:hover{background:var(--hover)}
.step-dot{display:inline-grid;place-items:center;flex:none;width:24px;height:24px;border-radius:50%;font-size:var(--text-xs);font-weight:700;color:var(--muted);background:var(--muted-bg);box-shadow:inset 0 0 0 1px var(--line-strong)}
.steps.is-live li[aria-current] .step-dot{color:var(--ink);background:var(--surface);box-shadow:inset 0 0 0 2px var(--ring)}
.steps.is-live li[data-done] .step-dot{color:var(--surface);background:var(--ring);box-shadow:none}
.steps.is-live .badge{margin-left:2px}
.panel.is-current{border-color:var(--ring);box-shadow:inset 0 0 0 1px var(--ring)}
@media (max-width:600px){
  .steps.is-live,.steps.is-live li{gap:4px}
  .steps.is-live li::after{min-width:6px}
  .steps.is-live button{min-width:0;padding-right:4px;white-space:normal;text-align:left;line-height:1.25}
  .steps.is-live li:not([aria-current]) .step-l{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
}
/* Bảng ca của Lịch Ngày: một bảng cả ngày, mỗi ca một dòng; bấm dòng mở ngăn chi tiết ca */
.ca-table td{vertical-align:top}
.ca-table .ca-c{width:72px}
.ca-open{display:inline-flex;align-items:center;gap:4px;min-height:24px;padding:0;font:inherit;font-size:var(--text-base);font-weight:700;color:var(--ink);background:none;border:0;cursor:pointer}
.ca-open .ph{font-size:14px;color:var(--muted)}
.ca-names{display:block;max-width:52ch}
.ca-flags{display:flex;flex-wrap:wrap;gap:4px}
.ca-noon td{padding:2px 10px;font-size:var(--text-xs);color:var(--muted);background:var(--muted-bg)}
.ca-table tbody tr[aria-selected="true"]{background:var(--selected)}
/* Ngăn chi tiết ca: mỗi HLV một khối, mỗi lớp một thẻ, tên học viên mở hồ sơ trong ngăn xem nhanh */
.ca-sum{display:flex;flex-wrap:wrap;gap:4px 16px;font-size:var(--text-sm)}
.ca-hlv{display:grid;gap:8px;padding:12px 0;border-top:1px solid var(--line)}
.ca-hlv:first-child{border-top:0;padding-top:0}
.ca-hlv-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px}
.ca-hlv-head h3{font-family:var(--font-body);font-size:var(--text-base);font-weight:600}
.ca-lop{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 12px;padding:8px 12px;border:1px solid var(--line);border-radius:var(--radius)}
.ca-lop-t{font-size:var(--text-sm);font-weight:600}
.ca-hv{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:2px 12px;font-size:var(--text-sm)}
.ca-hv a{text-underline-offset:2px}
.ca-lop .who-flag{grid-column:1/-1}
/* Lịch Tháng: dải số của tháng, ô ngày có số HLV và dải nhịp 13 ca (cao theo số lớp từng ca, khe trưa giữa 11h và 14h) */
.mcal-kpis{margin-bottom:12px}
.mcal-day{min-height:112px}
.mcal-sub{font-size:var(--text-xs);color:var(--muted)}
.mcal-day.is-closed .mcal-sub{display:none}
.mcal-rhythm{display:grid;grid-template-columns:repeat(7,minmax(0,1fr)) 4px repeat(6,minmax(0,1fr));align-items:end;gap:2px;height:22px;margin-top:4px}
.mcal-rhythm i{display:block;height:max(2px,var(--h,0%));background:var(--ring);border-radius:1px 1px 0 0}
.mcal-rhythm .noon{height:100%}
@media (max-width:640px){.mcal-sub{display:none}.mcal-rhythm{height:12px;gap:1px;grid-template-columns:repeat(7,minmax(0,1fr)) 2px repeat(6,minmax(0,1fr))}}
/* Ngăn ngày của Lịch Tháng */
.day-tags{display:grid;gap:6px;margin:0;padding:0;list-style:none;font-size:var(--text-sm)}
.day-tags li{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
/* Bộ quyền theo module của ngăn Sửa bộ quyền (evolve-site 11/10/2026, đề xuất; thay dòng quyền ba cột): bảng module × Xem · Tạo · Sửa · Xóa,
   phạm vi dưới tên module, quyền đặc biệt là viên tick ngay dưới dòng module. Tiêu đề cột và dòng nhóm dính khi cuộn ngăn (đệm ngăn 16px);
   ô không áp hiện "—"; module chưa có Xem chữ mờ. Không bọc bảng trong khung cuộn ngang: dính theo chiều dọc cần ngăn là khung cuộn */
.pm-table{width:100%;border-collapse:separate;border-spacing:0;font-size:var(--text-sm)}
.pm-table thead th{position:sticky;top:-16px;z-index:2;height:34px;padding:0 4px;font-size:var(--text-xs);font-weight:600;color:var(--muted);text-align:center;background:var(--surface);border-bottom:1px solid var(--line-strong)}
.pm-table thead th:first-child{padding-left:8px;text-align:left}
.pm-table .pm-g th{position:sticky;top:18px;z-index:1;padding:14px 8px 6px;text-align:left;font-family:var(--font-display);font-size:var(--text-base);font-weight:var(--weight-display);color:var(--ink);background:var(--surface);border-bottom:1px solid var(--line)}
.pm-g th span{margin-left:8px;font-family:var(--font-body);font-size:var(--text-xs);font-weight:400;color:var(--muted)}
.pm-m td{padding:6px 2px;text-align:center;vertical-align:middle;border-top:1px solid var(--line)}
.pm-m td:first-child{padding:8px 4px 8px 8px;text-align:left}
.pm-g + .pm-m td{border-top:0}
.pm-n{display:block;font-weight:500;color:var(--ink)}
.pm-m:has(.pm-xem:not(:checked)) .pm-n{color:var(--muted)}
.pm-d{display:block;margin-top:2px;font-size:var(--text-xs);color:var(--muted)}
.pm-table .pm-sc{display:flex;width:128px;max-width:100%;min-height:30px;margin-top:6px;padding-top:4px;padding-bottom:4px;font-size:var(--text-xs)}
.pm-cell{display:inline-grid;place-items:center;width:36px;height:36px;border-radius:var(--radius-sm);cursor:pointer}
.pm-cell:hover{background:var(--hover)}
.pm-cell input,.pm-chip input{width:18px;height:18px;margin:0;accent-color:var(--ring);cursor:pointer}
.pm-na{color:var(--muted)}
.pm-sp td{padding:0 8px 10px;text-align:left}
.pm-sp-l{margin-right:2px;font-size:var(--text-xs);color:var(--muted)}
.pm-chip{display:inline-flex;align-items:center;gap:6px;min-height:30px;margin:4px 6px 0 0;padding:2px 10px 2px 8px;font-size:var(--text-xs);color:var(--ink);border:1px solid var(--line);border-radius:999px;cursor:pointer}
.pm-chip:hover{border-color:var(--line-strong);background:var(--hover)}
.pm-chip:has(input:checked){background:var(--selected);border-color:var(--ring)}
.pm-self{font-size:var(--text-xs);color:var(--muted)}
/* Phần tử của chức năng mà vai thiếu quyền (shell.js theo PERM_FEATURES): ẩn hẳn, không mờ */
[data-perm-hidden]{display:none!important}
/* Vùng chạm trên điện thoại (DESIGN.md mục 4): thành phần mới đủ 44px khi màn chạm hay dưới 768px */
@media (pointer:coarse),(max-width:767px){
  .steps.is-live button,.drawer-back,.ca-open{min-height:44px}
  .pm-cell{width:44px;height:44px}
  .pm-chip,.pm-table .pm-sc{min-height:44px}
}
/* Chỉ in: bản in mỗi HLV một tờ của Lịch Ngày */
.print-only{display:none}

/* Màn Đăng nhập: không thanh điều hướng, không sidebar; nội dung giữa trang */
body[data-screen="dang-nhap"] .topbar,body[data-screen="dang-nhap"] .sidebar{display:none}
body[data-screen="dang-nhap"] .shell{display:block;min-height:100dvh}
body[data-screen="dang-nhap"] .content{padding:0;min-height:100dvh;display:grid;place-items:center}

@media print{
  .topbar,.sidebar,.skip,.no-print,.toast,.scrim{display:none!important}
  .shell{display:block}
  .content{padding:0}
  body{background:#FFFFFF} /* color-ok: giấy in luôn trắng */
  .sheet-hlv{break-after:page;border:0}
  .print-only{display:block!important}
  .drawer,.dialog{display:none!important}
}