:root {
  --brand: #022352;      /* navy Pegas Next (thân ngựa, chữ PEGAS) */
  --brand-2: #0b4a9e;    /* xanh hoàng gia – liên kết, nút, tiêu điểm */
  --silver: #a2a3aa;     /* bạc (cánh, chữ NEXT) */
  --silver-2: #d7d9df;
  --accent: #0e9f6e;
  --bg: #f2f4f8;
  --surface: #ffffff;
  --surface-2: #f8fafc;
  --line: #e1e5ee;
  --text: #111a2e;
  --muted: #64748b;
  --danger: #dc2626;
  --warn: #b45309;
  --warn-bg: #fffbeb;
  --ok: #059669;
  --hol: #fff1e6;
  --hol-text: #c2410c;
  --weekend: #f1f5f9;
  --input: #fffde7;
  --radius: 10px;
  --shadow: 0 1px 2px rgb(15 23 42 / 6%), 0 4px 16px rgb(15 23 42 / 6%);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color-scheme: light;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--text); font-size: 14px; line-height: 1.45; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--brand-2); }
h1, h2, h3 { margin: 0; line-height: 1.25; }
h2 { font-size: 20px; }
h3 { font-size: 16px; }
.boot { display: grid; place-items: center; height: 100vh; color: var(--muted); }
.muted { color: var(--muted); }
.small { font-size: 12px; }
.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.center { text-align: center; }
.danger { color: var(--danger); }
.ok { color: var(--ok); }
.hidden { display: none !important; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.spacer { flex: 1; }
.stack > * + * { margin-top: 16px; }

/* ---- Nút, input */
.btn {
  display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); background: var(--surface);
  padding: 8px 14px; border-radius: 8px; cursor: pointer; font-weight: 500; white-space: nowrap; text-decoration: none; color: var(--text);
}
.btn:hover { background: var(--surface-2); }
.btn.primary { background: var(--brand); border-color: var(--brand); color: #fff; }
.btn.primary:hover { background: var(--brand-2); }
.btn.success { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.danger { color: var(--danger); border-color: #fecaca; }
.btn.ghost { background: transparent; }
.btn.sm { padding: 4px 10px; font-size: 13px; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.icon-btn { border: 0; background: transparent; cursor: pointer; font-size: 18px; padding: 4px 10px; border-radius: 6px; color: var(--muted); }
.icon-btn:hover { background: var(--surface-2); color: var(--text); }
input[type=text], input[type=search], input[type=password], input[type=date], input[type=month], input[type=email], input[type=number], input[type=time], select, textarea {
  border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; background: #fff; width: 100%; min-width: 0;
}
input:focus, select:focus, textarea:focus, .btn:focus-visible { outline: 2px solid var(--brand-2); outline-offset: 1px; }
label.field { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--muted); }
label.field > span { font-weight: 500; }
label.check { display: inline-flex; gap: 8px; align-items: center; cursor: pointer; }
.grid-form { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.grid-form .full { grid-column: 1 / -1; }
fieldset { border: 1px solid var(--line); border-radius: var(--radius); padding: 12px; margin: 0; }
legend { font-weight: 600; padding: 0 6px; }

/* ---- Bố cục quản trị */
.layout { display: grid; grid-template-columns: 232px 1fr; min-height: 100vh; }
.layout > div { min-width: 0; }
.sidebar { background: var(--brand); color: #dbe7f5; padding: 16px 12px; position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.brand { display: flex; gap: 10px; align-items: center; padding: 4px 8px 18px; color: #fff; }
.brand .logo { width: 34px; height: 34px; border-radius: 9px; background: #fff; color: var(--brand); display: grid; place-items: center; font-weight: 800; }
.brand b { display: block; font-size: 15px; }
.brand small { color: #9fb6d1; font-size: 11px; }
.nav a { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 8px; color: inherit; text-decoration: none; margin-bottom: 2px; }
.nav a:hover { background: rgb(255 255 255 / 8%); }
.nav a.active { background: rgb(255 255 255 / 16%); color: #fff; font-weight: 600; }
.nav .ico { width: 20px; text-align: center; }
.nav .badge { margin-left: auto; background: #f97316; color: #fff; border-radius: 10px; padding: 0 7px; font-size: 11px; font-weight: 700; }
.nav-sep { height: 1px; background: rgb(255 255 255 / 12%); margin: 10px 4px; }
.main { min-width: 0; padding: 20px 24px 40px; }
.page-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.page-head h2 { margin-right: auto; }
.topbar-mobile { display: none; }

.card { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px; }
.card > h3 { margin-bottom: 12px; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.stat { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); padding: 14px 16px; }
.stat .k { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .03em; }
.stat .v { font-size: 24px; font-weight: 700; margin-top: 4px; font-variant-numeric: tabular-nums; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 14px; overflow-x: auto; }
.tabs button { border: 0; background: none; padding: 9px 14px; cursor: pointer; border-bottom: 2px solid transparent; color: var(--muted); font-weight: 500; white-space: nowrap; }
.tabs button.active { color: var(--brand); border-color: var(--brand); }

.month-picker { display: inline-flex; align-items: center; gap: 2px; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 2px; }
.month-picker input { border: 0; width: 150px; padding: 6px; }

/* ---- Bảng */
.table-wrap { overflow: auto; background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); max-height: calc(100vh - 170px); }
table { border-collapse: separate; border-spacing: 0; width: 100%; }
th, td { padding: 7px 10px; border-bottom: 1px solid var(--line); vertical-align: middle; }
th { background: var(--surface-2); font-weight: 600; font-size: 12px; color: #334155; text-align: left; position: sticky; top: 0; z-index: 2; }
thead tr:nth-child(2) th { top: 31px; }
tbody tr:hover td { background: #f8fbff; }
tr.total td { font-weight: 700; background: #eef4fb; position: sticky; bottom: 0; }
tr.section td { background: #e8eef6; font-weight: 700; color: var(--brand); }
td.warn, .warn-text { color: var(--warn); font-size: 12px; }
.pill { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 12px; font-weight: 600; background: var(--surface-2); border: 1px solid var(--line); white-space: nowrap; }
.pill.green { background: #ecfdf5; color: #047857; border-color: #a7f3d0; }
.pill.red { background: #fef2f2; color: #b91c1c; border-color: #fecaca; }
.pill.amber { background: #fffbeb; color: #b45309; border-color: #fde68a; }
.pill.blue { background: #eff6ff; color: #1d4ed8; border-color: #bfdbfe; }

/* Lưới chấm công */
.sheet { font-size: 12px; }
.sheet th, .sheet td { padding: 0; border-right: 1px solid var(--line); text-align: center; }
.sheet th { padding: 4px 2px; }
.sheet td.lbl { text-align: left; padding: 4px 8px; white-space: nowrap; background: #fff; position: sticky; left: 0; z-index: 1; min-width: 210px; }
.sheet th.lbl { position: sticky; left: 0; z-index: 3; }
.sheet td.lbl2 { text-align: left; padding: 4px 6px; white-space: nowrap; color: var(--muted); background: #fff; position: sticky; left: 210px; z-index: 1; min-width: 92px; }
.sheet th.lbl2 { position: sticky; left: 210px; z-index: 3; }
.sheet .day { min-width: 38px; width: 38px; }
.sheet .wk { background: var(--weekend); }
.sheet .hol { background: var(--hol); color: var(--hol-text); }
.sheet .out { background: #e5e7eb; }
.sheet input { width: 100%; border: 0; background: transparent; text-align: center; padding: 6px 0; font-size: 12px; border-radius: 0; }
.sheet input:focus { background: #fff; outline: 2px solid var(--brand-2); outline-offset: -2px; position: relative; z-index: 1; }
.sheet td.edit { background: var(--input); }
.sheet td.edit.hol, .sheet td.edit.wk { background: color-mix(in srgb, var(--input) 50%, var(--hol)); }
.sheet td.ro { color: #7c3aed; padding: 6px 0; }
.sheet td.sum { font-weight: 700; padding: 4px 8px; background: #eef4fb; min-width: 56px; }
.sheet tr.first td { border-top: 2px solid #cbd5e1; }
.sheet td.saving { outline: 2px solid #93c5fd; outline-offset: -2px; }
.sheet td.err { background: #fee2e2 !important; }
.sheet .ci { display: block; font-size: 9px; color: var(--ok); line-height: 1; padding-bottom: 2px; }
.legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--muted); margin: 8px 0; }
.legend i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; vertical-align: -2px; margin-right: 4px; border: 1px solid var(--line); }

/* Bảng lương */
.payroll { font-size: 12px; }
.payroll th { text-align: center; white-space: normal; min-width: 92px; vertical-align: bottom; }
.payroll td { white-space: nowrap; }
.payroll td.sticky, .payroll th.sticky { position: sticky; left: 0; background: #fff; z-index: 1; }
.payroll th.sticky { z-index: 3; background: var(--surface-2); }
.payroll th.grp { background: #e2eaf4; color: var(--brand); }
.payroll td.netcol { font-weight: 700; color: var(--brand); background: #f0f7ff; }
.payroll input { width: 110px; text-align: right; padding: 4px 6px; border: 1px solid var(--line); border-radius: 6px; background: var(--input); }
.payroll input.note { width: 200px; text-align: left; }

.warn-box { background: var(--warn-bg); border: 1px solid #fde68a; color: #78350f; border-radius: var(--radius); padding: 10px 14px; font-size: 13px; }
.warn-box ul { margin: 6px 0 0; padding-left: 20px; max-height: 180px; overflow: auto; }
.info-box { background: #eff6ff; border: 1px solid #bfdbfe; color: #1e3a8a; border-radius: var(--radius); padding: 10px 14px; font-size: 13px; }

/* ---- Modal, toast */
.modal-backdrop { position: fixed; inset: 0; background: rgb(15 23 42 / 45%); display: grid; place-items: center; z-index: 50; padding: 16px; }
.modal { background: #fff; border-radius: 14px; width: min(520px, 100%); max-height: calc(100vh - 32px); display: flex; flex-direction: column; box-shadow: 0 20px 60px rgb(0 0 0 / 25%); }
.modal.wide { width: min(980px, 100%); }
.modal header { display: flex; align-items: center; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.modal header h3 { flex: 1; }
.modal-body { padding: 16px 18px; overflow-y: auto; }
.actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; flex-wrap: wrap; }
.toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px); opacity: 0; transition: .2s; background: #0f172a; color: #fff; padding: 10px 18px; border-radius: 10px; z-index: 100; pointer-events: none; max-width: calc(100vw - 32px); }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast.err { background: var(--danger); }

/* ---- Đăng nhập */
.login { min-height: 100vh; display: grid; place-items: center; padding: 16px; background: linear-gradient(135deg, var(--brand) 0%, #0f2440 100%); }
.login .box { background: #fff; border-radius: 16px; padding: 28px; width: min(380px, 100%); box-shadow: 0 30px 80px rgb(0 0 0 / 30%); }
.login h1 { font-size: 20px; margin: 12px 0 2px; }
.login form { display: grid; gap: 12px; margin-top: 20px; }
.login .logo { width: 44px; height: 44px; border-radius: 12px; background: var(--brand); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 20px; }

/* ---- Giao diện nhân viên (mobile-first) */
.emp { max-width: 560px; margin: 0 auto; min-height: 100vh; padding: 0 0 84px; }
.emp-head { background: var(--brand); color: #fff; padding: 18px 18px 56px; border-radius: 0 0 22px 22px; }
.emp-head .hi { font-size: 13px; color: #b8cbe2; }
.emp-head .who { font-size: 18px; font-weight: 700; }
.emp-body { padding: 0 14px; margin-top: -40px; }
.emp-body .card + .card { margin-top: 12px; }
.clock { text-align: center; padding: 22px 16px; }
.clock .time { font-size: 44px; font-weight: 800; letter-spacing: 1px; font-variant-numeric: tabular-nums; color: var(--brand); }
.clock .date { color: var(--muted); margin-bottom: 16px; }
.big-btn { width: 100%; padding: 18px; font-size: 18px; font-weight: 700; border-radius: 14px; border: 0; cursor: pointer; color: #fff; background: var(--accent); box-shadow: 0 8px 20px rgb(14 159 110 / 30%); }
.big-btn.out { background: #ea580c; box-shadow: 0 8px 20px rgb(234 88 12 / 30%); }
.big-btn:disabled { background: #94a3b8; box-shadow: none; cursor: default; }
.times { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
.times div { background: var(--surface-2); border-radius: 10px; padding: 10px; }
.times b { display: block; font-size: 18px; }
.kv { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; }
.kv .v { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.bottom-nav { position: fixed; bottom: 0; left: 0; right: 0; background: #fff; border-top: 1px solid var(--line); display: flex; justify-content: center; padding-bottom: env(safe-area-inset-bottom); z-index: 20; }
.bottom-nav .inner { display: flex; width: 100%; max-width: 560px; }
.bottom-nav a { flex: 1; text-align: center; padding: 8px 4px 10px; font-size: 11px; color: var(--muted); text-decoration: none; }
.bottom-nav a .ico { display: block; font-size: 20px; }
.bottom-nav a.active { color: var(--brand); font-weight: 700; }
.cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal .h { text-align: center; font-size: 11px; color: var(--muted); font-weight: 600; }
.cal .c { min-height: 54px; border-radius: 8px; background: var(--surface-2); padding: 4px; font-size: 11px; display: flex; flex-direction: column; }
.cal .c .d { font-weight: 700; font-size: 12px; }
.cal .c.hol { background: var(--hol); color: var(--hol-text); }
.cal .c.today { outline: 2px solid var(--brand-2); }
.cal .c .w { margin-top: auto; font-weight: 700; color: var(--ok); }
.cal .c .l { color: #7c3aed; font-weight: 600; }
.req { display: flex; gap: 10px; align-items: flex-start; padding: 10px 0; border-bottom: 1px solid var(--line); }
.req:last-child { border-bottom: 0; }

/* ---- Phiếu lương */
.slip { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 18px; max-width: 560px; }
.slip h4 { text-align: center; margin: 4px 0 2px; font-size: 16px; }
.slip .sub { text-align: center; color: var(--muted); margin-bottom: 12px; }
.slip table td { padding: 4px 6px; border-bottom: 1px dotted var(--line); }
.slip table tr.h td { font-weight: 700; background: var(--surface-2); }
.slip table tr.net td { font-weight: 800; font-size: 15px; color: var(--brand); border-top: 2px solid var(--brand); }
.slips { display: grid; grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); gap: 16px; }

@media (max-width: 900px) {
  .layout { grid-template-columns: minmax(0, 1fr); }
  .sidebar { position: fixed; inset: 0 auto 0 0; width: 260px; transform: translateX(-100%); transition: transform .2s; z-index: 40; }
  .sidebar.open { transform: none; }
  .topbar-mobile { display: flex; align-items: center; gap: 8px; background: var(--brand); color: #fff; padding: 10px 12px; position: sticky; top: 0; z-index: 30; }
  .topbar-mobile .icon-btn { color: #fff; }
  .main { padding: 14px 16px 40px; }
  .two-col { grid-template-columns: 1fr; }
  .slips { grid-template-columns: 1fr; }
}

@media print {
  body { background: #fff; }
  .sidebar, .topbar-mobile, .page-head .btn, .page-head .month-picker, .no-print, .bottom-nav, .tabs { display: none !important; }
  .layout { display: block; }
  .main { padding: 0; }
  .table-wrap { box-shadow: none; max-height: none; overflow: visible; }
  .payroll { font-size: 9px; }
  .payroll th, .payroll td { padding: 2px 3px; position: static !important; }
  .payroll input { border: 0; background: none; width: auto; padding: 0; }
  .slips { display: block; }
  .slip { page-break-after: always; border: 0; max-width: none; }
  .card { box-shadow: none; }
}

/* ---- Thống kê */
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--surface); }
.seg button { border: 0; background: none; padding: 7px 14px; cursor: pointer; font-weight: 500; color: var(--muted); }
.seg button + button { border-left: 1px solid var(--line); }
.seg button.active { background: var(--brand); color: #fff; }
.viz { position: relative; min-height: 120px; overflow: hidden; }
.viz svg { display: block; }
.viz-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12px; color: #52514e; margin-bottom: 8px; }
.viz-legend i, .viz-tip i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.viz-tip { position: absolute; pointer-events: none; background: #fff; border: 1px solid var(--line); border-radius: 8px; box-shadow: var(--shadow); padding: 8px 10px; font-size: 12px; min-width: 220px; z-index: 5; }
.viz-tip table td { padding: 2px 4px; border: 0; }
.viz-tip table td + td { text-align: right; font-variant-numeric: tabular-nums; }
.viz-tip tr.t td { font-weight: 700; border-top: 1px solid var(--line); }

/* ---- Avatar, sinh nhật */
.avatar { display: inline-grid; place-items: center; border-radius: 50%; object-fit: cover; color: #fff; font-weight: 700; flex: none; border: 2px solid #fff; box-sizing: content-box; }
.av-stack { display: inline-flex; align-items: center; }
.av-stack .avatar + .avatar { margin-left: -8px; }
.av-more { display: inline-grid; place-items: center; border-radius: 50%; background: #334155; color: #fff; font-size: 9px; font-weight: 700; margin-left: -8px; border: 2px solid #fff; }
.cal .c { position: relative; overflow: hidden; }
.cal .c .hname { font-size: 9px; line-height: 1.15; font-weight: 600; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cal .c.bday { background: #fdf2f8; }
.cal .c.bday.hol { background: linear-gradient(135deg, var(--hol) 50%, #fdf2f8 50%); }
.cal .c .bd { display: block; margin-top: auto; }
.cal .c.has { cursor: pointer; }
.cal .c.has:active { filter: brightness(.96); }
.cal .c .evm { display: block; border-left: 3px solid; border-radius: 3px; font-size: 9.5px; font-weight: 600; padding: 1px 3px; margin-top: 2px; white-space: nowrap; overflow: hidden; }
.cal .c .bd .cake { position: absolute; top: 3px; right: 3px; font-size: 12px; line-height: 1; }
.cal .c .bd .av-stack .avatar, .cal .c .bd .av-more { border-width: 1.5px; }
.cal .c .bd .av-stack .avatar + .avatar, .cal .c .bd .av-more { margin-left: -9px; }
.cal .c.weekend .d { color: var(--muted); }
.ev-list { list-style: none; margin: 0; padding: 0; }
.ev-list li { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--line); }
.ev-list li:last-child { border-bottom: 0; }
.ev-date { min-width: 46px; text-align: center; font-weight: 700; color: var(--brand); background: var(--surface-2); border-radius: 8px; padding: 3px 0; font-size: 12px; }
.bday-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 14px; text-align: center; }
.bday-grid .who { font-weight: 600; margin-top: 6px; font-size: 13px; }
.emp-head .me { display: flex; align-items: center; gap: 12px; }

/* ---- Lịch biểu */
.gcal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); background: var(--line); gap: 1px; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.gcal .gh { background: var(--surface-2); text-align: center; font-size: 12px; font-weight: 600; color: var(--muted); padding: 6px 0; }
.gcal .gd { background: #fff; min-height: 112px; padding: 4px 5px 6px; display: flex; flex-direction: column; gap: 2px; cursor: pointer; min-width: 0; }
.gcal .gd:hover { background: #f8fbff; }
.gcal .gd.other { background: #fafafa; }
.gcal .gd.other .gdn { color: #cbd5e1; }
.gcal .gd.hol { background: #fffaf5; }
.gcal .gdn { display: flex; justify-content: space-between; align-items: center; font-weight: 600; font-size: 13px; padding: 0 2px; }
.gcal .gd.today .gdn span:first-child { background: var(--brand); color: #fff; border-radius: 50%; width: 24px; height: 24px; display: inline-grid; place-items: center; }
.gcal .ghol { font-size: 11px; color: var(--hol-text); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ev-chip { display: block; width: 100%; text-align: left; border: 0; border-left: 3px solid; border-radius: 4px; padding: 2px 5px; font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
.ev-chip:hover { filter: brightness(.96); }
.ev-more { border: 0; background: none; color: var(--muted); font-size: 11px; text-align: left; cursor: pointer; padding: 0 4px; }
.ev-card { border-left: 4px solid; background: var(--surface-2); border-radius: 8px; padding: 10px 12px; }
.people-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 6px; max-height: 260px; overflow: auto; }
.pp { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; cursor: pointer; }
.pp:has(input:checked) { border-color: var(--brand-2); background: #eff6ff; }
@media (max-width: 700px) { .gcal .gd { min-height: 70px; } .ev-chip b { display: none; } }
.quick { gap: 6px; }
.chip-btn { border: 1px solid var(--line); background: #fff; border-radius: 999px; padding: 5px 12px; font-size: 13px; cursor: pointer; font-weight: 500; }
.chip-btn:hover { background: var(--surface-2); }
.chip-btn.active { background: var(--brand); border-color: var(--brand); color: #fff; }
.chip-btn.active .muted { color: #c7d6ea; }

/* ---- Nhóm chức danh */
.group-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; align-items: start; }
.group-card .member-list { list-style: none; margin: 0; padding: 0; max-height: 260px; overflow: auto; }
.group-card .member-list li { display: flex; align-items: center; gap: 8px; padding: 5px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.group-card .member-list li:last-child { border-bottom: 0; }
.group-add { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 140px; border: 2px dashed var(--line); box-shadow: none; background: transparent; color: var(--muted); cursor: pointer; font-weight: 600; }
.group-add:hover { border-color: var(--brand-2); color: var(--brand-2); }
.swatch { width: 26px; height: 26px; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 0 0 1px var(--line); cursor: pointer; }
.swatch.active { box-shadow: 0 0 0 2px var(--text); }
.steps { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.steps span { background: var(--surface-2); border: 1px solid var(--line); border-radius: 8px; padding: 3px 8px; font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
.steps small { display: block; color: var(--muted); font-weight: 500; font-size: 10px; }
.field.step { width: 140px; }
.pp select.grade { width: auto; padding: 4px 6px; font-size: 12px; }
table.scale td, table.scale th { padding: 8px 12px; }
.cfiles { min-width: 220px; }
.cfile { display: flex; align-items: center; gap: 4px; margin-bottom: 4px; }
.cfile a:first-child { max-width: 170px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-decoration: none; font-size: 13px; }
.cfile .icon-btn { font-size: 13px; padding: 2px 6px; text-decoration: none; }
.cfile .small { white-space: nowrap; }

/* ---- Lưu trữ hóa đơn */
.btn.disabled { pointer-events: none; opacity: .5; }
.dropzone { border: 2px dashed var(--line); border-radius: 12px; padding: 22px; text-align: center; cursor: pointer; background: var(--surface-2); }
.dropzone:hover, .dropzone.over { border-color: var(--brand-2); background: #eff6ff; }
.up-group { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; margin-bottom: 8px; }
.up-status { font-size: 12px; font-weight: 600; }
.grid-form.compact { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.grid-form.compact .field { font-size: 12px; }
.grid-form.compact input, .grid-form.compact select { padding: 6px 8px; }
table.inv td { vertical-align: top; }
.ifiles a { font-size: 18px; text-decoration: none; margin-right: 4px; }
.need { background: #fff7d6 !important; border-color: #f5c542 !important; }

/* ---- KPI */
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(460px, 100%), 1fr)); gap: 14px; }
.kpi-tbl { font-size: 13px; }
.kpi-tbl th { position: static; }
.kpi-tbl td, .kpi-tbl th { padding: 6px 8px; }
.kpi-tbl tfoot td { border-top: 2px solid var(--line); background: var(--surface-2); }
.kpi-tbl input { padding: 4px 6px; text-align: right; background: var(--input); }
.grade { font-size: 16px; color: var(--brand); }
.kpi-edit td { vertical-align: top; }
.kpi-edit th { position: static; }
.kpi-edit input.small { font-size: 12px; padding: 5px 8px; }
@media (max-width: 700px) { .kpi-grid { grid-template-columns: 1fr; } }

/* ---- KPI: bộ chỉ tiêu theo nhóm */
.kpi-layout { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 16px; align-items: start; }
.glist { padding: 10px; position: sticky; top: 12px; }
.gitem { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; border: 0; background: none; padding: 9px 8px; border-radius: 8px; cursor: pointer; }
.gitem b { display: block; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gitem .small { display: block; }
.gitem:hover { background: var(--surface-2); }
.gitem.active { background: #eaf2fc; box-shadow: inset 3px 0 0 var(--brand-2); }
.dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; flex: none; }
.empty-kpi { text-align: center; padding: 18px 10px; border: 2px dashed var(--line); border-radius: 12px; }
.start-grid { display: grid; gap: 14px; margin-top: 12px; }
.kpi-view td { vertical-align: middle; }
.wbar { display: inline-block; width: calc(100% - 52px); height: 8px; background: var(--surface-2); border-radius: 4px; vertical-align: middle; overflow: hidden; }
.wbar span { display: block; height: 100%; background: var(--brand-2); border-radius: 4px; }
.wtxt { display: inline-block; width: 46px; text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
tr.editing td { background: #f8fbff; }
.kpi-editor { border: 1px solid #bfdbfe; background: #fff; border-radius: 10px; padding: 14px; }
.ind-head, .ind-main { display: grid; grid-template-columns: 26px minmax(0, 1fr) 88px 230px 96px; gap: 8px; align-items: center; }
.ind-head { padding: 0 0 4px; }
.ind-row { border: 1px solid var(--line); border-radius: 8px; padding: 8px; margin-bottom: 6px; background: var(--surface-2); }
.ind-no { width: 22px; height: 22px; border-radius: 50%; background: var(--brand); color: #fff; font-size: 12px; display: grid; place-items: center; font-weight: 700; }
.ind-w { display: flex; align-items: center; gap: 4px; }
.ind-w input { text-align: right; }
.ind-t { display: flex; gap: 4px; }
.ind-t input:first-child { text-align: right; }
.ind-act { display: flex; justify-content: flex-end; }
.ind-act .icon-btn { padding: 2px 6px; font-size: 14px; }
.ind-act .icon-btn:disabled { opacity: .3; cursor: default; }
.ind-more { margin: 6px 0 0 34px; }
.ind-more summary { cursor: pointer; }
.ind-more input[type=text] { margin: 6px 0; }
.wsum { display: flex; align-items: center; gap: 12px; }
.wsum-bar { flex: 1; max-width: 360px; height: 10px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.wsum-bar span { display: block; height: 100%; background: #f59e0b; transition: width .2s; }
.wsum-bar span.ok { background: var(--accent); }
.wsum-bar span.over { background: var(--danger); }
@media (max-width: 900px) {
  .kpi-layout { grid-template-columns: minmax(0, 1fr); }
  .glist { position: static; }
  .ind-head { display: none; }
  .ind-main { grid-template-columns: 26px 1fr 88px; }
  .ind-t { grid-column: 2 / 4; }
  .ind-act { grid-column: 1 / 4; }
}
.kpi-editor input[type=text] { text-align: left; background: #fff; }
.kpi-editor .ind-w input, .kpi-editor .ind-t input:first-child { text-align: right; }
.ind-more summary { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---- Nhân sự: danh sách – hồ sơ */
.emp-layout { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 16px; align-items: start; }
.elist { padding: 12px; position: sticky; top: 12px; display: flex; flex-direction: column; gap: 10px; max-height: calc(100vh - 140px); }
.elist .chips { display: flex; flex-wrap: wrap; gap: 6px; }
.elist .chip-btn { font-size: 12px; padding: 4px 10px; }
.elist .chip-btn b { font-weight: 700; margin-left: 2px; }
.chip-btn.alert:not(.active) { border-color: #fcd34d; background: #fffbeb; }
.elist-items { overflow-y: auto; margin: 0 -4px; padding: 0 4px; flex: 1; min-height: 120px; }
.eitem { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; border: 0; background: none; padding: 8px; border-radius: 10px; cursor: pointer; }
.eitem:hover { background: var(--surface-2); }
.eitem.active { background: #eaf2fc; box-shadow: inset 3px 0 0 var(--brand-2); }
.eitem b { display: block; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.eitem .small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gtag { display: block; font-size: 11px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.av-wrap { position: relative; flex: none; display: inline-flex; }
.sdot { position: absolute; right: 0; bottom: 0; width: 11px; height: 11px; border-radius: 50%; border: 2px solid #fff; }
.warn-ico { color: var(--warn); font-size: 16px; flex: none; }
.profile { padding: 18px 20px; }
.prof-head { display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
.av-btn { position: relative; border: 0; background: none; padding: 0; cursor: pointer; border-radius: 50%; }
.av-btn .cam { font-style: normal; position: absolute; right: -2px; bottom: -2px; background: #fff; border-radius: 50%; width: 24px; height: 24px; display: grid; place-items: center; font-size: 12px; box-shadow: var(--shadow); opacity: 0; transition: .15s; }
.av-btn:hover .cam { opacity: 1; }
.prof-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px 18px; }
.fact span { display: block; font-size: 12px; color: var(--muted); }
.fact b { font-weight: 600; word-break: break-word; }
.sec-title { margin: 18px 0 8px; font-size: 14px; }
.con-card { border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; background: #fff; }
.con-card.inactive { background: var(--surface-2); }
.con-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; margin-top: 12px; }
.con-grid span { display: block; font-size: 12px; color: var(--muted); }
.con-grid b { display: block; }
.con-grid small { display: block; font-size: 12px; color: var(--muted); }
.timeline { position: relative; padding-left: 22px; }
.timeline::before { content: ''; position: absolute; left: 6px; top: 6px; bottom: 6px; width: 2px; background: var(--line); }
.tl-item { position: relative; margin-bottom: 12px; }
.tl-dot { position: absolute; left: -21px; top: 14px; width: 12px; height: 12px; border-radius: 50%; background: #cbd5e1; border: 2px solid #fff; }
.tl-item.now .tl-dot { background: var(--accent); box-shadow: 0 0 0 3px #d1fae5; }
@media (max-width: 900px) {
  .emp-layout { grid-template-columns: minmax(0, 1fr); }
  .elist { position: static; max-height: none; }
  .elist-items { max-height: 320px; }
}
@media (max-width: 600px) {
  .prof-head { gap: 12px; }
  .prof-actions { width: 100%; }
  .profile { padding: 14px; }
}
.kpi-card { min-width: 0; overflow-x: auto; }

/* ---- Thang lương */
.step-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.step-card { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; background: var(--surface-2); }
.step-card b { display: block; font-size: 17px; font-variant-numeric: tabular-nums; margin: 2px 0 6px; }
.sbar { height: 6px; background: #fff; border-radius: 3px; overflow: hidden; margin-bottom: 6px; }
.sbar span { display: block; height: 100%; border-radius: 3px; }
.mem-tbl select { padding: 4px 8px; font-size: 13px; }
table.scale td, table.scale th { white-space: nowrap; }

/* ---- Bộ chỉ tiêu mẫu */
.tpl-list { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.tpl-row { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; background: #fffdf5; }
.tpl-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.tpl-chips span { font-size: 11.5px; background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 2px 8px; }
.tpl-act { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
select.tpl-quick { width: auto; padding: 4px 6px; font-size: 12px; }
.mem-kpi td:first-child { min-width: 190px; }
.mem-act { display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; max-width: 330px; margin-left: auto; }
@media (max-width: 700px) {
  .mem-kpi thead { display: none; }
  .mem-kpi tr { display: block; border-bottom: 1px solid var(--line); padding: 8px 0; }
  .mem-kpi td { display: block; border: 0; padding: 3px 0; min-width: 0 !important; }
  .mem-act { justify-content: flex-start; margin-left: 0; max-width: none; }
}

/* ---- Thưởng sản lượng */
.out-box { border: 1px solid #c7e3d5; background: #f2fbf6; border-radius: 10px; padding: 10px 14px; margin-bottom: 12px; }
.out-grid { display: grid; grid-template-columns: 160px 180px 1fr; gap: 12px; margin-top: 6px; }
.out-grid span { display: block; font-size: 12px; color: var(--muted); }
.out-grid b { display: block; font-size: 16px; }
.out-grid small { display: block; font-size: 12px; color: var(--muted); }
.out-edit { border: 1px solid #c7e3d5; background: #f2fbf6; border-radius: 10px; padding: 10px 12px; }
.tpl-chips span.out-chip { background: #ecfdf5; border-color: #a7f3d0; color: #065f46; }
@media (max-width: 700px) { .out-grid { grid-template-columns: 1fr 1fr; } .out-grid > div:last-child { grid-column: 1 / -1; } }

/* Bộ chọn ngày/tháng tiếng Việt (datepick.js) */
.dp { position: relative; display: block; min-width: 0; }
.dp.in-mp { display: inline-block; }
.dp .dp-src { position: absolute; left: 0; bottom: 0; width: 1px !important; height: 1px; opacity: 0; pointer-events: none; padding: 0; border: 0; }
.dp .dp-view { cursor: pointer; padding-right: 30px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%2364748b' stroke-width='1.6'%3E%3Crect x='2' y='3' width='12' height='11' rx='2'/%3E%3Cpath d='M2 6.5h12M5.5 1.5v3M10.5 1.5v3'/%3E%3C/svg%3E") no-repeat right 9px center; }
.dp .dp-view.dp-invalid { border-color: var(--danger); }
.month-picker .dp-view { border: 0; width: 140px; padding: 6px 28px 6px 6px; text-align: center; font-weight: 600; }
.dp-pop { position: fixed; z-index: 100; width: 272px; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 12px 32px rgb(15 23 42 / 18%); padding: 10px; font-size: 14px; color: var(--text); }
.dp-pop button { font: inherit; border: 0; background: transparent; cursor: pointer; border-radius: 8px; color: inherit; }
.dp-pop button:hover:not(:disabled) { background: var(--surface-2); }
.dp-pop button:disabled { color: #cbd5e1; cursor: default; }
.dp-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.dp-head > button:not(.dp-title) { width: 32px; height: 32px; font-size: 18px; color: var(--muted); }
.dp-title { font-weight: 700; padding: 6px 10px; }
.dp-grid { display: grid; gap: 2px; }
.dp-grid.days { grid-template-columns: repeat(7, 1fr); }
.dp-grid.months { grid-template-columns: repeat(3, 1fr); gap: 6px; }
.dp-wd { text-align: center; font-size: 12px; color: var(--muted); padding: 4px 0; font-weight: 600; }
.dp-wd.sun, .dp-d.sun { color: var(--danger); }
.dp-d { height: 34px; }
.dp-m { padding: 10px 0; }
.dp-pop .today { box-shadow: inset 0 0 0 1px var(--brand-2); }
.dp-pop .sel, .dp-pop .sel:hover { background: var(--brand) !important; color: #fff !important; }
.dp-foot { display: flex; justify-content: space-between; margin-top: 8px; border-top: 1px solid var(--line); padding-top: 8px; }
.dp-foot button { color: var(--brand-2); font-weight: 600; padding: 4px 10px; }

/* KPI của nhân viên */
.kpi-rule { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.kpi-rule > div { background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; }
.kpi-rule span { display: block; font-size: 12px; color: var(--muted); }
.kpi-rule b { font-size: 16px; }
.kpi-hero { margin: 14px 0; }
.kpi-hero .big { font-size: 30px; font-weight: 800; color: var(--brand); font-variant-numeric: tabular-nums; }
.kpi-hero .big small { font-size: 15px; font-weight: 600; color: var(--muted); }
.kpi-bar { height: 10px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 999px; overflow: hidden; margin: 8px 0; }
.kpi-bar i { display: block; height: 100%; background: var(--accent); border-radius: 999px; }
.kpi-ind { display: flex; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); }
.kpi-ind:last-child { border-bottom: 0; }
.kpi-days { width: 100%; font-size: 13px; }
.kpi-days th, .kpi-days td { padding: 6px 8px; text-align: right; white-space: nowrap; }
.kpi-days th:first-child, .kpi-days td:first-child { text-align: left; }
.kpi-days tr.today td { background: #eff6ff; font-weight: 600; }
.kpi-days tr.later td { color: var(--muted); }
.kpi-up { display: flex; justify-content: space-between; align-items: center; width: 100%; text-align: left; font: inherit; color: inherit; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; cursor: pointer; }
.kpi-up:hover { border-color: var(--brand-2); }
#kpi-up.stack > * + * { margin-top: 8px; }
.kpi-days td:first-child { white-space: normal; min-width: 92px; }
.kpi-days td:first-child .small { font-size: 11px; line-height: 1.3; }

/* Hoán đổi ngày làm việc */
.sheet th.swap-off, .sheet th.swap-work { background: #ede9fe; box-shadow: inset 0 -3px 0 #7c3aed; }
.swap-tag { font-size: 10px; font-weight: 700; color: #6d28d9; white-space: nowrap; margin-top: 2px; }
.pill.swap { background: #f5f3ff; color: #6d28d9; border-color: #ddd6fe; white-space: normal; }
.cal .c.swap-off { background: #f5f3ff; }
.cal .c.swap-work { box-shadow: inset 0 0 0 2px #c4b5fd; }
.cal .c .hname.swapn { color: #6d28d9; }

/* Phiếu lương */
.ps-stat { text-align: left; font: inherit; color: inherit; border: 0; cursor: pointer; }
.ps-stat:hover { box-shadow: 0 0 0 2px var(--brand-2); }
.ps-all { display: flex; align-items: center; gap: 8px; font-size: 13px; padding: 0 8px; }
.ps-item { cursor: pointer; }
.ps-item input[type=checkbox] { flex: none; width: 16px; height: 16px; }
.ps-right { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; flex: none; font-size: 13px; font-variant-numeric: tabular-nums; }
.ps-right .pill { font-size: 11px; }
.ps-bulk { display: flex; align-items: center; gap: 8px; background: #eaf2fc; border-radius: 10px; padding: 8px 10px; font-size: 13px; }
.ps-bulk span { flex: 1; }
.ps-detail { padding: 18px 20px; }
.ps-detail .slip { max-width: none; }
.nf-scope { display: grid; gap: 8px; }
.nf-opt { display: flex; gap: 10px; align-items: flex-start; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; cursor: pointer; }
.nf-opt:has(input:checked) { border-color: var(--brand-2); background: #f5f9ff; }
.nf-opt:has(input:disabled) { opacity: .5; cursor: default; }
.nf-opt > span { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.nf-opt small { color: var(--muted); }
.nf-opt select { margin-top: 2px; }
.nf-preview { margin-top: 12px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; font-size: 13.5px; display: grid; gap: 4px; }
.print-only { display: none; }
@media print {
  .print-only { display: block !important; }
  .print-only .slip { break-inside: avoid; margin: 0 auto 16px; }
}

/* Lưu trữ: kỳ xem chung + 2 tab hóa đơn VAT / chứng từ */
[hidden] { display: none !important; }
.arch-period { margin-bottom: 12px; padding: 12px 16px; }
.arch-k { font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.arch-tabs button { display: inline-flex; align-items: center; gap: 6px; font-size: 14.5px; }
.arch-tabs button.active .pill { background: var(--brand); color: #fff; border-color: var(--brand); }
.seg-wrap { flex-wrap: wrap; }
.seg button small { opacity: .7; margin-left: 2px; }
.pill-btn { cursor: pointer; font: inherit; font-size: 12px; font-weight: 600; }
.pill-btn:hover { filter: brightness(.95); }

/* Bảng lương */
.modal-body > p { white-space: pre-line; }
.ready { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); padding: 12px 14px; margin-bottom: 14px; }
.ready.done { background: #f0fdf4; border: 1px solid #bbf7d0; box-shadow: none; }
.ready-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ready-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 8px; margin-top: 10px; }
.rstep { display: flex; gap: 8px; align-items: flex-start; text-align: left; font: inherit; border: 1px solid var(--line); background: #fff; border-radius: 10px; padding: 8px 10px; cursor: pointer; color: inherit; }
.rstep:hover { border-color: var(--brand-2); }
.rstep b { display: block; font-size: 13px; }
.rstep small { display: block; font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.rstep .ri { flex: none; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 800; color: #fff; margin-top: 1px; }
.rstep.ok .ri { background: var(--accent); }
.rstep.ok { cursor: default; }
.rstep.bad { border-color: #fcd34d; background: #fffbeb; }
.rstep.bad .ri { background: #d97706; }
.rstep.soft .ri { background: #94a3b8; font-style: italic; }
.pr-stats { margin-bottom: 14px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.pr-stats .v { font-size: 21px; }
.pr-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.pr-toolbar input[type=search] { width: 240px; }
.pr-toolbar .chips { display: flex; gap: 6px; flex-wrap: wrap; }
.pr-toolbar .chip-btn b { margin-left: 2px; }
.pr-compact { width: 100%; font-size: 13.5px; }
.pr-compact th { white-space: nowrap; font-size: 12px; }
.pr-compact td { white-space: nowrap; font-variant-numeric: tabular-nums; }
.pr-compact td small { display: block; font-size: 11px; color: var(--muted); }
.pr-compact th.sticky, .pr-compact td.sticky { position: sticky; left: 0; background: inherit; z-index: 1; }
.pr-compact thead th.sticky { background: var(--surface-2); z-index: 2; }
.pr-compact tbody tr { background: #fff; }
.pr-row { cursor: pointer; }
.pr-row:hover { background: #f5f9ff; }
.pr-row.sel { background: #eaf2fc; }
.pr-row.anom td.netcol { background: #fffbeb; }
.pr-row:focus-visible { outline: 2px solid var(--brand-2); outline-offset: -2px; }
.pr-who { display: flex; align-items: center; gap: 10px; min-width: 200px; }
.pr-who b { display: block; }
.pr-d { font-weight: 600; }
.pr-d.big { color: var(--warn) !important; }
.pr-d.new { color: var(--brand-2) !important; }
.pr-compact tfoot td { font-weight: 700; background: #e8eef6; position: sticky; bottom: 0; }
.pr-compact td.netcol { color: var(--brand); background: #f0f7ff; }
.pr-cols { gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.pr-cols .chip-btn { font-size: 12px; padding: 3px 10px; }
.linkish { border: 0; background: none; padding: 0; cursor: pointer; color: var(--brand-2); font: inherit; text-decoration: underline dotted; }
.pr-foot { margin-top: 14px; display: grid; gap: 8px; }
.pr-foot summary { cursor: pointer; font-weight: 600; font-size: 13.5px; }
.menu { position: relative; }
.menu summary { list-style: none; }
.menu summary::-webkit-details-marker { display: none; }
.menu-pop { position: absolute; right: 0; top: calc(100% + 4px); background: #fff; border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 12px 30px rgb(15 23 42 / 15%); padding: 6px; min-width: 290px; z-index: 30; display: grid; }
.menu-pop a, .menu-pop span { padding: 8px 10px; border-radius: 8px; text-decoration: none; color: var(--text); font-size: 13.5px; }
.menu-pop a:hover { background: var(--surface-2); }
.drawer-back { position: fixed; inset: 0; background: rgb(15 23 42 / 25%); z-index: 45; display: flex; justify-content: flex-end; }
.drawer { background: #fff; width: min(460px, 100%); height: 100%; display: flex; flex-direction: column; box-shadow: -12px 0 40px rgb(15 23 42 / 18%); animation: dr-in .18s ease-out; }
@keyframes dr-in { from { transform: translateX(30px); opacity: .6; } }
.drawer header { display: flex; gap: 12px; align-items: center; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.drawer header h3 { margin: 0; font-size: 16px; }
.drawer-body { flex: 1; overflow-y: auto; padding: 14px 16px 20px; }
.drawer-body h4 { margin: 16px 0 6px; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.drawer footer { display: flex; justify-content: space-between; align-items: center; padding: 10px 16px; border-top: 1px solid var(--line); }
.d-net { background: #f0f7ff; border-radius: 12px; padding: 12px 14px; margin-bottom: 12px; display: grid; }
.d-net span { font-size: 12px; color: var(--muted); }
.d-net b { font-size: 26px; color: var(--brand); font-variant-numeric: tabular-nums; }
.dl { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px dotted var(--line); font-size: 13.5px; }
.dl small { display: block; font-size: 11.5px; color: var(--muted); }
.dl b { white-space: nowrap; font-variant-numeric: tabular-nums; }
.dl.sum { font-weight: 700; border-bottom: 0; border-top: 1px solid var(--line); }
.dl.net b { color: var(--brand); font-size: 16px; }
.d-adj { margin-top: 4px; }
.d-adj input { background: var(--input); }
.d-links { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 16px; }
@media (max-width: 700px) { .pr-toolbar input[type=search] { width: 100%; } .drawer { width: 100%; } }
.pr-compact .stick-r { position: sticky; right: 34px; z-index: 1; box-shadow: -6px 0 8px -6px rgb(15 23 42 / 18%); }
.pr-compact th.stick-r { background: #e2eaf4; z-index: 2; }
.pr-compact tr > :last-child { position: sticky; right: 0; background: #fff; width: 34px; min-width: 34px; z-index: 1; }
.pr-compact thead tr > :last-child { background: var(--surface-2); }
.pr-compact tfoot tr > :last-child { background: #e8eef6; }
.pr-row.sel > :last-child { background: #eaf2fc; }
.pr-compact td small { max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 700px) {
  .pr-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .pr-stats .stat { padding: 10px 12px; }
  .pr-stats .v { font-size: 17px; }
  .pr-stats .stat:first-child { grid-column: 1 / -1; }
  .ready-steps { grid-template-columns: 1fr; }
  .rstep.ok { padding: 6px 10px; }
}

/* Bảng chấm công & làm thêm giờ */
.ts-stats { margin-bottom: 12px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.ts-stats .v { font-size: 22px; }
a.stat { text-decoration: none; color: inherit; }
a.stat:hover { box-shadow: 0 0 0 2px var(--brand-2); }
.ts-legend { margin: -2px 0 8px; }
.ts-legend summary { cursor: pointer; font-size: 12.5px; color: var(--muted); font-weight: 600; }
.ts-legend .legend { margin: 6px 0 0; }
.sheet td.lbl, .sheet th.lbl { min-width: 236px; max-width: 236px; width: 236px; }
.sheet td.lbl2, .sheet th.lbl2 { left: 236px; }
.sheet td.lbl { vertical-align: top; padding: 6px 8px; white-space: normal; }
.ts-who { display: flex; gap: 8px; align-items: flex-start; }
.ts-who b { display: block; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 180px; }
.ts-who small { display: block; font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 180px; }
.ts-prog { display: flex; align-items: center; gap: 6px; margin-top: 4px; font-size: 11px; color: var(--muted); white-space: nowrap; }
.ts-bar { display: inline-block; width: 64px; height: 6px; border-radius: 999px; background: #e2e8f0; overflow: hidden; flex: none; }
.ts-bar i { display: block; height: 100%; background: var(--accent); border-radius: 999px; }
.ts-bar.warn i { background: #f59e0b; }
.ts-bar.over i { background: var(--danger); }
.ts-flags { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 4px; }
.flag { font-size: 10.5px; font-weight: 700; border-radius: 999px; padding: 1px 7px; white-space: nowrap; cursor: default; }
.flag.miss { background: #fee2e2; color: #b91c1c; }
.flag.late { background: #ffedd5; color: #c2410c; }
.flag.warn { background: #fef3c7; color: #92400e; }
.flag.money { background: #ecfdf5; color: #047857; }
.ts-acts { display: flex; gap: 4px; margin-top: 6px; flex-wrap: wrap; }
.btn.xs { font-size: 11px; padding: 2px 8px; border-radius: 6px; }
.sheet th.today { background: var(--brand) !important; color: #fff; }
.sheet th.today .small { color: #dbeafe; }
.sheet td.today { box-shadow: inset 2px 0 0 var(--brand-2), inset -2px 0 0 var(--brand-2); }
.sheet th.fut { opacity: .7; }
.sheet td.edit.miss { background: #fee2e2; box-shadow: inset 0 0 0 1px #fca5a5; }
.sheet td.edit.miss.today { box-shadow: inset 0 0 0 2px var(--brand-2); }
.sheet .ci.late { color: #c2410c; font-weight: 700; }
.rate-tag { font-size: 9.5px; font-weight: 800; border-radius: 4px; margin-top: 2px; padding: 0 2px; }
.rate-tag.r200 { background: #dbeafe; color: #1d4ed8; }
.rate-tag.r300 { background: #fee2e2; color: #b91c1c; }
.ot-sheet td.edit.r200 { background: color-mix(in srgb, var(--input) 55%, #dbeafe); }
.ot-sheet td.edit.r300 { background: color-mix(in srgb, var(--input) 55%, #fee2e2); }
.ot-rates { display: inline-flex; gap: 4px; }
.ot-rates i { font-style: normal; font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 6px; border: 1px solid var(--line); background: var(--input); }
.ot-rates i.r200 { background: #dbeafe; color: #1d4ed8; }
.ot-rates i.r300 { background: #fee2e2; color: #b91c1c; }
.ot-pend { display: block; text-decoration: none; margin-bottom: 12px; }
.ot-pend:hover { filter: brightness(.98); }
@media (max-width: 700px) {
  .ts-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .ts-stats .v { font-size: 18px; }
  .sheet td.lbl, .sheet th.lbl { min-width: 150px; max-width: 150px; width: 150px; }
  .sheet td.lbl2, .sheet th.lbl2 { left: 150px; min-width: 70px; white-space: normal; }
  .ts-who .avatar { display: none; }
  .ts-who b, .ts-who small { max-width: 132px; }
  .ts-bar { width: 40px; }
}

/* Đăng nhập Google */
.google-btn { display: flex; justify-content: center; gap: 10px; margin-top: 18px; padding: 11px; background: #fff; border: 1px solid #dadce0; color: #3c4043; font-weight: 600; text-decoration: none; }
.google-btn:hover { background: #f8faff; border-color: #c6dafc; }
.login .or { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 12px; margin: 14px 0 4px; }
.login .or::before, .login .or::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.g-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: -4px; }

/* Vai trò, hệ thống */
.role-tag { font-size: 11px; color: #9fb6d3; padding: 4px 12px; }
.emp-head .me { display: flex; align-items: center; gap: 12px; }
.to-admin { background: rgb(255 255 255 / 15%); color: #fff; border-color: rgb(255 255 255 / 30%); }
.role-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }
.role-card { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); padding: 12px 14px; }
.role-card p { margin: 6px 0; min-height: 34px; }
.audit td { vertical-align: top; }
.audit tr.fail td { background: #fef2f2; }
.au-detail { white-space: pre-wrap; word-break: break-all; font-size: 11.5px; color: var(--muted); display: block; max-width: 520px; max-height: 60px; overflow: hidden; }
.nowrap { white-space: nowrap; }

/* Đợt 2: đơn từ, nhóm, thông báo, việc cần làm */
.req-files { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.req-files a { display: inline-flex; width: 52px; height: 52px; border-radius: 8px; overflow: hidden; border: 1px solid var(--line); align-items: center; justify-content: center; background: var(--surface-2); font-size: 22px; text-decoration: none; }
.req-files img { width: 100%; height: 100%; object-fit: cover; }
.req-tbl td { vertical-align: top; }
.prof-req { padding: 12px 14px; }
.diff { margin: 6px 0; font-size: 13px; }
.diff td { padding: 2px 8px 2px 0; }
.diff .old { color: var(--muted); text-decoration: line-through; }
.diff .new { color: var(--ok); }
.g-mgr { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 10px; padding: 8px 10px; background: var(--surface-2); border-radius: 10px; font-size: 13px; }
.g-mgr > span { flex: 1; min-width: 200px; }
.team-tbl td, .team-tbl th { font-size: 13px; }
.bell { position: relative; border: 0; background: rgb(255 255 255 / 12%); border-radius: 50%; width: 34px; height: 34px; cursor: pointer; font-size: 16px; flex: none; }
.topbar-mobile .bell { background: rgb(255 255 255 / 15%); }
.bell-n { position: absolute; top: -3px; right: -3px; background: var(--danger); color: #fff; font-size: 10px; font-weight: 700; border-radius: 999px; min-width: 17px; height: 17px; display: grid; place-items: center; padding: 0 4px; }
.bell-n.hidden { display: none; }
.bell-pop { position: fixed; z-index: 90; width: min(330px, calc(100vw - 16px)); max-height: 70vh; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 14px 40px rgb(15 23 42 / 22%); color: var(--text); }
.bell-head { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; border-bottom: 1px solid var(--line); }
.bell-list { overflow-y: auto; }
.bell-item { display: grid; gap: 2px; padding: 10px 14px; border-bottom: 1px solid var(--line); text-decoration: none; color: inherit; font-size: 13px; }
.bell-item:hover { background: var(--surface-2); }
.bell-item.unread { background: #f0f7ff; box-shadow: inset 3px 0 0 var(--brand-2); }
.bell-item span { color: var(--muted); }
.bell-item small { color: var(--muted); font-size: 11px; }
.brand { display: flex; align-items: center; gap: 10px; }
.todo-list { display: grid; gap: 6px; }
.todo-item { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 10px; border: 1px solid var(--line); text-decoration: none; color: inherit; background: #fff; }
.todo-item:hover { border-color: var(--brand-2); }
.todo-item.lv-high { border-left: 4px solid var(--danger); }
.todo-item.lv-mid { border-left: 4px solid #f59e0b; }
.todo-item.lv-low { border-left: 4px solid #60a5fa; }
.todo-item b { display: block; font-size: 13.5px; }
.todo-item small { display: block; color: var(--muted); font-size: 12px; }
.todo-ico { font-size: 20px; flex: none; }

/* Đợt 3: chấm công nâng cao, QR, PWA */
.att-way { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; background: var(--surface-2); }
.att-way b { font-size: 14px; }
.qr-screen { text-align: center; max-width: 560px; margin: 0 auto; }
.qr-box { background: #fff; border-radius: 18px; padding: 16px; box-shadow: var(--shadow); width: min(420px, 90%); margin: 12px auto; }
.qr-box svg { width: 100%; height: auto; display: block; }
.qr-count { font-size: 18px; margin-bottom: 6px; }
.selfie { width: 34px; height: 34px; border-radius: 8px; object-fit: cover; border: 1px solid var(--line); display: block; }
.install-btn { background: #34d399; color: #064e3b; border-color: #34d399; font-weight: 700; }
.ios-steps li { margin-bottom: 8px; }

/* Đợt 4: giấy tờ, mẫu văn bản, quy trình, lịch sử lương */
.tpl-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; }
.tpl-doc { display: grid; gap: 2px; text-align: left; font: inherit; color: inherit; border: 1px solid var(--line); background: #fff; border-radius: 10px; padding: 10px 12px; cursor: pointer; }
.tpl-doc:hover { border-color: var(--brand-2); background: #f5f9ff; }
.tpl-doc span { font-size: 20px; }
.tpl-doc small { color: var(--muted); font-size: 11.5px; }
.doc-list { display: grid; gap: 6px; }
.doc-item { display: flex; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; background: #fff; }
.doc-ico { font-size: 24px; text-decoration: none; }
.doc-item b { display: block; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tpl-tools { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 6px; }
.tpl-editor { border: 1px solid var(--line); border-radius: 8px; padding: 18px 22px; min-height: 360px; max-height: 60vh; overflow-y: auto; background: #fff; font-family: "Times New Roman", serif; font-size: 15px; line-height: 1.5; color: #000; }
.tpl-editor:focus { outline: 2px solid var(--brand-2); }
.tpl-src { width: 100%; min-height: 360px; font-family: ui-monospace, monospace; font-size: 12px; }
.ph-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.ph { font-size: 11.5px; border: 1px dashed #93c5fd; background: #eff6ff; color: #1d4ed8; border-radius: 6px; padding: 2px 8px; cursor: pointer; }
.ph:hover { background: #dbeafe; }
.cl-card { padding: 12px 14px; }
.cl-items { display: grid; gap: 2px; }
.cl-item { display: flex; gap: 8px; align-items: flex-start; padding: 6px 4px; border-radius: 6px; cursor: pointer; font-size: 13.5px; }
.cl-item:hover { background: var(--surface-2); }
.cl-item.done span { color: var(--muted); text-decoration: line-through; }
.cl-item small { display: block; font-size: 11px; text-decoration: none; color: var(--ok); }
.ob-box { border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; background: var(--surface-2); }
.pay-bars { display: flex; gap: 6px; align-items: flex-end; height: 140px; padding: 6px 0; overflow-x: auto; }
.pay-bar { display: grid; justify-items: center; gap: 4px; min-width: 28px; }
.pb-col { position: relative; width: 22px; height: 110px; display: flex; align-items: flex-end; }
.pb-col i { position: absolute; bottom: 0; left: 0; width: 100%; background: #bfdbfe; border-radius: 4px 4px 0 0; }
.pb-col i.net { background: var(--brand-2); width: 60%; left: 20%; }
.pay-bar small { font-size: 10.5px; color: var(--muted); }
.lg { display: inline-block; width: 10px; height: 10px; border-radius: 2px; vertical-align: -1px; margin-left: 8px; }
.lg.gross { background: #bfdbfe; } .lg.net { background: var(--brand-2); }
.slip table tr.sub td { font-size: 12.5px; color: var(--muted); padding-left: 16px; }

/* Đợt 5: thưởng theo đợt, báo cáo, file chuyển khoản */
.batch { padding: 14px 16px; }
.rp-tbl { width: 100%; }
.rp-tbl td { padding: 8px 10px; border-bottom: 1px solid var(--line); }
.rp-tbl td.code { font-weight: 700; color: var(--brand-2); width: 60px; }
.rp-qtt td, .rp-qtt th { font-size: 13px; white-space: nowrap; }
.bk-cols { display: grid; gap: 4px; }
.bk-col { display: flex; gap: 6px; align-items: center; }
.slip table tr.sub td:first-child { text-align: left; }

/* Đợt 6: phòng họp */
.room-chips { display: flex; gap: 6px; flex-wrap: wrap; margin: 4px 0 10px; }
.ok-box { background: #ecfdf5; border: 1px solid #a7f3d0; color: #047857; border-radius: var(--radius); padding: 8px 12px; }
.conflict:empty { display: none; }
.room-row { display: flex; align-items: center; gap: 10px; padding: 8px 4px; border-bottom: 1px solid var(--line); }
.room-row .small { display: block; }
.swatch-r input { display: none; }
.swatch-r span { display: inline-block; width: 24px; height: 24px; border-radius: 50%; cursor: pointer; border: 3px solid #fff; box-shadow: 0 0 0 1px var(--line); }
.swatch-r input:checked + span { box-shadow: 0 0 0 2px var(--brand); }

/* Chấm công: xác nhận 2 lần, lỗi, thông báo thành công */
.big-btn.confirm { background: #b91c1c; animation: pulse 1s ease-in-out infinite; font-size: 17px; }
.big-btn.busy { opacity: .75; }
@keyframes pulse { 50% { transform: scale(1.02); box-shadow: 0 0 0 6px rgb(185 28 28 / 20%); } }
.check-err { margin-top: 10px; background: #fef2f2; border: 1px solid #fecaca; color: #b91c1c; border-radius: 10px; padding: 8px 12px; font-size: 13.5px; font-weight: 600; }
.check-ok { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; background: rgb(15 23 42 / 45%); animation: ck-in .2s ease-out; padding: 20px; }
.check-ok.hide { opacity: 0; transition: opacity .45s; }
.ck-card { background: #fff; border-radius: 22px; padding: 26px 24px 20px; width: min(340px, 100%); text-align: center; box-shadow: 0 24px 60px rgb(0 0 0 / 30%); animation: ck-pop .35s cubic-bezier(.2, 1.4, .4, 1); }
.ck-icon { width: 84px; height: 84px; border-radius: 50%; margin: 0 auto 12px; display: grid; place-items: center; font-size: 44px; color: #fff; background: var(--accent); box-shadow: 0 0 0 10px #d1fae5; }
.check-ok.out .ck-icon { background: #f59e0b; box-shadow: 0 0 0 10px #fef3c7; font-size: 38px; }
.ck-card b { font-size: 18px; display: block; }
.ck-time { font-size: 40px; font-weight: 800; color: var(--brand); font-variant-numeric: tabular-nums; margin: 4px 0; }
.ck-card p { color: var(--muted); margin: 6px 0 0; font-size: 14px; }
@keyframes ck-in { from { opacity: 0; } }
@keyframes ck-pop { from { transform: scale(.7); opacity: 0; } }


/* ===== Nhận diện thương hiệu Pegas Next: navy – xanh hoàng gia – bạc ===== */
.btn.primary { background: linear-gradient(180deg, #0b3f86 0%, var(--brand) 100%); border-color: var(--brand); box-shadow: 0 2px 6px rgb(2 35 82 / 22%); }
.btn.primary:hover { background: linear-gradient(180deg, #11509f 0%, #06306b 100%); }
.page-head h2 { color: var(--brand); letter-spacing: -.01em; }
.stat .v { color: var(--brand); }
.stat { border-top: 3px solid transparent; border-image: linear-gradient(90deg, var(--brand-2), var(--silver)) 1; border-image-slice: 1 0 0 0; }
.tabs button.active { color: var(--brand-2); border-color: var(--brand-2); }
.chip-btn.active, .seg button.active { background: var(--brand); border-color: var(--brand); }
a { color: var(--brand-2); }

/* Thanh bên: nền navy chuyển sắc, hình ngựa chìm, mục đang chọn có vạch bạc */
.sidebar { background: linear-gradient(180deg, #022352 0%, #011a3d 60%, #01132c 100%); color: #d3dcec; }
.sidebar::after { content: ''; position: absolute; left: -30px; bottom: 30px; width: 260px; height: 200px; background: url(/brand/mark-light.png) no-repeat center / contain; opacity: .05; pointer-events: none; }
.brand { padding: 2px 6px 16px; align-items: center; border-bottom: 1px solid rgb(255 255 255 / 8%); margin-bottom: 10px; }
.brand-mark { width: 46px; height: auto; flex: none; filter: drop-shadow(0 2px 6px rgb(0 0 0 / 30%)); }
.brand-word { display: block; height: 15px; width: auto; margin-bottom: 4px; }
.brand small { color: var(--silver); font-size: 10.5px; letter-spacing: .02em; display: block; line-height: 1.3; }
.nav a { color: #c9d3e6; }
.nav a:hover { background: rgb(255 255 255 / 7%); color: #fff; }
.nav a.active { background: linear-gradient(90deg, rgb(255 255 255 / 14%), rgb(255 255 255 / 4%)); color: #fff; box-shadow: inset 3px 0 0 #c9ccd3; }
.nav-sep { background: linear-gradient(90deg, transparent, rgb(162 163 170 / 35%), transparent); }
.role-tag { color: var(--silver); }
.topbar-mobile { background: linear-gradient(90deg, #022352, #01183b) !important; }
.topbar-mobile .tb-mark { height: 26px; width: auto; }
.topbar-mobile .tb-word { height: 12px; width: auto; }

/* Đăng nhập */
.login { background: radial-gradient(circle at 20% 10%, #0b3f86 0%, #022352 45%, #010f24 100%); position: relative; overflow: hidden; }
.login::before { content: ''; position: absolute; right: -8vw; bottom: -6vh; width: 60vw; max-width: 760px; aspect-ratio: 1.4; background: url(/brand/mark-light.png) no-repeat center / contain; opacity: .06; pointer-events: none; }
.login .box { position: relative; border-top: 4px solid; border-image: linear-gradient(90deg, var(--brand), var(--brand-2), var(--silver)) 1; border-radius: 16px; }
.login .brand-logo { display: block; width: 210px; max-width: 80%; height: auto; margin: 0 auto 6px; }
.login h1 { text-align: center; font-size: 15px; color: var(--muted); font-weight: 600; margin: 6px 0 0; }
.login .box > .muted { text-align: center; }

/* Trang nhân viên */
.emp-head { background: radial-gradient(circle at 85% 0%, #0b3f86 0%, #022352 55%, #011a3d 100%); position: relative; overflow: hidden; }
.emp-head::after { content: ''; position: absolute; right: -24px; bottom: 8px; width: 190px; height: 140px; background: url(/brand/mark-light.png) no-repeat center / contain; opacity: .09; pointer-events: none; }
.emp-head .me { position: relative; z-index: 1; }
.emp-head .hi { color: #aebbd2; }
.emp-brand { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; position: relative; z-index: 1; }
.emp-brand img:first-child { height: 26px; width: auto; }
.emp-brand img + img { height: 11px; width: auto; }
.bottom-nav a.active { color: var(--brand-2); }
.bottom-nav a.active .ico { filter: drop-shadow(0 2px 4px rgb(11 74 158 / 30%)); }

/* Phiếu lương in có logo */
.slip-logo { display: block; height: 34px; width: auto; margin: 0 auto 6px; }
.emp-body { position: relative; z-index: 2; }
.brand small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 120px; }
.brand { gap: 8px; }
.brand-mark { width: 40px; }
.brand-word { max-width: 100%; height: auto; max-height: 14px; object-fit: contain; object-position: left; }
.brand .bell { width: 30px; height: 30px; font-size: 14px; }

/* Tan làm sớm / hoàn tác / điều chỉnh giờ ra */
.early-box { margin-top: 4px; text-align: left; background: #fff7ed; border: 1px solid #fed7aa; border-radius: 14px; padding: 14px; }
.early-q { font-size: 14.5px; line-height: 1.5; color: #7c2d12; }
.early-reasons { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 8px; }
.early-reasons .chip-btn { font-size: 13px; background: #fff; }
.early-reasons .chip-btn.active { background: var(--brand); color: #fff; border-color: var(--brand); }
#er-other { margin-bottom: 8px; }
.early-acts { display: grid; gap: 8px; margin-top: 6px; }
.early-acts .btn { justify-content: center; padding: 12px; font-size: 15px; }
.ok-btn { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 700; }
.undo-btn { margin-top: 10px; width: 100%; justify-content: center; border-color: #fdba74; color: #9a3412; background: #fff7ed; font-weight: 600; }
.ck-card .undo-btn { margin-top: 14px; }
.fix-out { display: inline-block; margin-top: 10px; }
.sheet .ci.early { color: #b45309; font-weight: 700; }
.flag.early { background: #fef3c7; color: #92400e; }

/* Thông báo gửi đơn thành công */
.sent-ok { text-align: center; }
.sent-ok .ck-icon { animation: ck-pop .35s cubic-bezier(.2, 1.4, .4, 1); }
.sent-ok h3 { font-size: 19px; color: var(--brand); margin: 4px 0 12px; }
.sent-sum { text-align: left; background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; }
.sent-next { margin: 14px 0 16px; font-size: 14px; color: var(--brand-2); font-weight: 600; }
.sent-next .small { font-weight: 400; }
.sent-btn { width: 100%; justify-content: center; padding: 12px; font-size: 16px; font-weight: 700; }

/* File chuyển lương MB Bank */
.mb-dlg { display: grid; gap: 12px; }
.mb-head { display: flex; gap: 12px; align-items: center; background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; }
.mb-mark { width: 54px; height: auto; }
.mb-tbl td { vertical-align: top; font-size: 13px; }
.mb-tbl tr.off td { opacity: .45; }
.mb-tbl tr.bad td { background: #fef2f2; }
.mb-detail { max-width: 260px; font-family: ui-monospace, monospace; font-size: 11.5px; color: var(--muted); }
.mb-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }

/* Ô chọn ngân hàng */
.bank-btn { display: flex; align-items: center; gap: 6px; width: 100%; min-width: 0; text-align: left; font: inherit; color: var(--text); background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 8px 30px 8px 10px; cursor: pointer; position: relative; }
.bank-btn::after { content: '▾'; position: absolute; right: 10px; color: var(--muted); }
.bank-btn:focus-visible { outline: 2px solid var(--brand-2); }
.bank-btn b { color: var(--brand); flex: none; }
.bank-btn span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text); font-size: 13px; }
.bank-btn .bank-ph { color: var(--muted); }
.bank-pop { position: fixed; z-index: 110; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 14px 40px rgb(15 23 42 / 22%); padding: 8px; max-width: calc(100vw - 16px); }
.bank-pop input { margin-bottom: 6px; }
.bank-list { max-height: 270px; overflow-y: auto; }
.bank-list button { display: flex; gap: 8px; align-items: baseline; width: 100%; text-align: left; font: inherit; border: 0; background: none; padding: 7px 8px; border-radius: 8px; cursor: pointer; color: var(--text); }
.bank-list button:hover, .bank-list button.sel { background: #eaf2fc; }
.bank-list button b { color: var(--brand); min-width: 78px; font-size: 12.5px; }
.bank-list button span { font-size: 13px; }
.bank-list .clear { color: var(--danger); font-size: 12.5px; }
.bank-list .grp { font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; padding: 8px 8px 4px; letter-spacing: .04em; }

/* Ảnh CCCD 2 mặt – tự điền từ mã QR */
.cccd-box { border: 1px dashed var(--brand-2, #0b4a9e); border-radius: 12px; background: linear-gradient(180deg, #f4f8ff, #fff); }
.cccd-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cccd-slot { position: relative; display: flex; align-items: center; justify-content: center; aspect-ratio: 1.58; border: 1.5px dashed #b8c6dd; border-radius: 10px; background: #fff; cursor: pointer; overflow: hidden; transition: border-color .15s, background .15s; }
.cccd-slot:hover, .cccd-slot.drag { border-color: var(--brand-2, #0b4a9e); background: #eef4ff; }
.cccd-slot.has { border-style: solid; }
.cccd-slot img { width: 100%; height: 100%; object-fit: contain; background: #0b1b33; }
.cccd-ph { display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; padding: 8px; color: var(--brand, #022352); }
.cccd-ph small { font-size: 11.5px; }
.cccd-x { position: absolute; top: 6px; right: 6px; width: 26px; height: 26px; border-radius: 50%; border: 0; background: rgba(0,0,0,.6); color: #fff; cursor: pointer; }
.cccd-msg { margin-top: 8px; }
.cccd-msg.ok-text { color: #0f7a3d; }
.cccd-filled input, .cccd-filled select, .cccd-filled .dp-btn { background: #ecfdf3 !important; border-color: #7ccf9f !important; }
@media (max-width: 560px) { .cccd-grid { grid-template-columns: 1fr; } }

/* Lịch làm thêm giờ */
.otp-list { display: flex; flex-direction: column; gap: 8px; }
.otp-item { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.otp-item.off { opacity: .6; }
.otp-item.open { border-color: #c9b8f5; box-shadow: 0 2px 10px rgba(109,40,217,.08); }
.otp-head { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; background: #fff; border: 0; text-align: left; font: inherit; color: inherit; cursor: pointer; }
.otp-head:hover { background: #faf8ff; }
.otp-date { display: flex; flex-direction: column; align-items: center; min-width: 74px; padding: 4px 6px; border-radius: 8px; background: #f1ebff; color: #5b21b6; }
.otp-date small { font-size: 11.5px; }
.otp-title { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.otp-title small { font-size: 12px; }
.otp-count { display: flex; gap: 8px; font-style: normal; font-size: 13px; }
.otp-count i { font-style: normal; font-weight: 600; }
.otp-body { padding: 4px 12px 12px; border-top: 1px dashed var(--line); background: #fcfbff; }
.otp-people { width: 100%; border-collapse: collapse; }
.otp-people td { padding: 6px 4px; border-bottom: 1px solid #f0edf7; vertical-align: middle; }
.otp-people td:first-child { width: 32px; }
.otp-people td:last-child { text-align: right; }
.otp-sec { margin: 12px 0 6px; gap: 8px; align-items: center; }
.otp-groups { display: flex; flex-wrap: wrap; gap: 6px; }
.otp-groups .chip-btn.part { border-style: dashed; border-color: var(--brand-2, #0b4a9e); }
.otp-emps { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 6px; max-height: 300px; overflow: auto; padding: 2px; }
.otp-emp { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; cursor: pointer; }
.otp-emp.on { border-color: #7c3aed; background: #f6f2ff; }
.otp-emp span { display: flex; flex-direction: column; min-width: 0; }
.otp-emp small { font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.otp-form .actions { margin-top: 14px; }
.ot-inv.hot { border: 1.5px solid #c4b5fd; background: linear-gradient(180deg, #f6f2ff, #fff 60%); }
.oti { padding: 10px 12px; border-radius: 10px; background: #fff; border: 1px solid var(--line); text-align: left; }
.oti.pending { border-color: #f5c451; }
.oti-when { display: flex; justify-content: space-between; gap: 8px; align-items: center; margin-bottom: 4px; flex-wrap: wrap; }
.oti-act { display: flex; gap: 8px; align-items: center; margin-top: 8px; flex-wrap: wrap; }
@media (max-width: 640px) { .otp-head { flex-wrap: wrap; } .otp-count { order: 3; } }

/* Xóa công ngày */
.zero-list { margin: 0; padding-left: 18px; max-height: 180px; overflow: auto; }
.zero-dlg .actions { gap: 8px; }
td.edit.reset { background: repeating-linear-gradient(135deg, #fff5f5, #fff5f5 6px, #ffe4e4 6px, #ffe4e4 12px) !important; }
.ben-kv { grid-template-columns: 1fr auto; }

/* Phúc lợi tập thể */
.wf-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 14px; align-items: start; }
.wf-card.empty { border-style: dashed; }
.wf-card.warn { border-color: #f5c451; }
.wf-head { display: flex; gap: 12px; align-items: flex-start; }
.wf-head h3 { margin: 0 0 2px; }
.wf-ico { font-size: 26px; line-height: 1; }
.wf-steps { display: flex; gap: 4px; flex-wrap: wrap; margin: 10px 0; font-size: 11.5px; }
.wf-steps span { padding: 3px 8px; border-radius: 999px; background: #f1f4f9; color: var(--muted); }
.wf-steps span.done { background: #ecfdf5; color: #047857; }
.wf-steps span.cur { background: var(--brand, #022352); color: #fff; }
.wf-nums { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 6px 0; }
.wf-nums div { background: #f8fafc; border-radius: 8px; padding: 8px; display: flex; flex-direction: column; }
.wf-nums span { font-size: 11.5px; color: var(--muted); }
.wf-nums b { font-size: 16px; }
.wf-nums small { font-size: 11px; color: var(--muted); }
.wf-inv { width: 100%; border-collapse: collapse; margin-top: 8px; font-size: 13px; }
.wf-inv td { padding: 5px 4px; border-bottom: 1px solid var(--line); vertical-align: top; }
.wf-att { margin-top: 8px; }
.wf-pick { display: flex; flex-direction: column; gap: 6px; max-height: 320px; overflow: auto; }

/* Đơn đã duyệt trên bảng công nhân viên */
.req-ok { border: 1.5px solid #a7f3d0; background: linear-gradient(180deg, #f0fdf7, #fff 70%); }
.req-ok-item { padding: 10px 12px; border: 1px solid #d1fae5; border-radius: 10px; background: #fff; }
.cal .c .rq, .legend .rq { display: inline-block; font-size: 9.5px; line-height: 1.2; padding: 1px 4px; border-radius: 4px; font-weight: 600; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.rq.fam { background: #ede9fe; color: #5b21b6; }
.rq.unp { background: #fee2e2; color: #b91c1c; }
.rq.trip { background: #e0f2fe; color: #0369a1; }
.rq.wfh { background: #ecfdf5; color: #047857; }
.rq.fix { background: #fef3c7; color: #92400e; }

/* Chi tiết ngày trên bảng công nhân viên */
.cal .c[data-day] { cursor: pointer; transition: box-shadow .12s, transform .12s; }
.cal .c[data-day]:hover, .cal .c[data-day]:focus-visible { box-shadow: 0 0 0 2px var(--brand-2, #0b4a9e) inset; outline: none; }
.day-tip { position: fixed; z-index: 60; max-width: 300px; background: #0f1d33; color: #fff; border-radius: 10px; padding: 10px 12px; font-size: 12.5px; box-shadow: 0 10px 30px rgba(2,35,82,.3); pointer-events: none; }
.day-tip .tt { font-weight: 700; margin-bottom: 4px; }
.day-tip .dd { margin: 3px 0; }
.day-tip .muted, .day-tip .small.muted { color: #b9c6dc; }
.day-tip .pill { display: none; }
.day-tip .dd.warn { color: #fecaca; }
.day-detail .dd { padding: 8px 10px; border-radius: 8px; background: var(--surface-2, #f6f8fb); }
.day-detail .dd.hol { background: var(--hol); color: var(--hol-text); }
.day-detail .dd.swap { background: #f1ebff; color: #5b21b6; }
.day-detail .dd.warn { background: #fef2f2; color: #991b1b; }
.day-detail .dd.dreq { background: #f0fdf7; }

/* KPI theo giai đoạn */
.per-rows { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.per-row { display: grid; grid-template-columns: 150px 150px 90px 150px 1fr 32px; gap: 8px; align-items: end; padding: 8px; border: 1px dashed var(--line); border-radius: 8px; background: #fbfcfe; }
.per-row .field { margin: 0; }
@media (max-width: 860px) { .per-row { grid-template-columns: 1fr 1fr; } }
.per-view { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; align-items: center; }
.per-chip { display: inline-flex; gap: 6px; align-items: center; padding: 4px 10px; border-radius: 999px; background: #eef4ff; font-size: 12px; }
.seg-tbl { margin: 6px 0 0 auto; font-size: 11.5px; border-collapse: collapse; text-align: left; }
.seg-tbl td { padding: 2px 6px; border-top: 1px dashed var(--line); white-space: nowrap; }
.kpi-periods { display: flex; flex-direction: column; gap: 4px; margin: 8px 0; }
.kpi-periods div { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; padding: 6px 10px; border-radius: 8px; background: #f6f8fb; font-size: 13px; }
.kpi-periods div.cur { background: #eef4ff; outline: 1.5px solid #93c5fd; }
.kpi-segs { margin-top: 10px; display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.kpi-segs div { display: grid; grid-template-columns: 1fr 1fr 1.4fr; gap: 6px; padding: 5px 0; border-top: 1px dashed var(--line); }
.kpi-days td.kpi-off { white-space: normal; text-align: left; font-size: 12px; color: var(--muted); }

/* Thông báo đẩy */
.push-box.on { color: inherit; }
.bell-push:empty { display: none; }
.bell-push { padding: 8px 12px; border-bottom: 1px solid var(--line); background: #f6f9ff; }
.ack-box { margin-top: 8px; padding: 10px 12px; border: 1px dashed #93c5fd; border-radius: 10px; background: #f6f9ff; }
.ack-box p { margin: 0 0 8px; }
.ps-right .pill + .pill { margin-left: 4px; }
.kpi-charts { margin: 0 0 16px; }
.kpi-charts summary { cursor: pointer; margin-bottom: 8px; }
.kpi-chart-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); gap: 12px; }
.kpi-chart { background: var(--surface, #fff); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; }
.kpi-chart svg { width: 100%; height: 120px; display: block; margin-top: 6px; }
@media (max-width: 520px) { .kpi-chart-grid { grid-template-columns: 1fr; } }
.month-report { max-width: 900px; }
@media print { .month-report { box-shadow: none; border: 0; } }
.wf-files { margin-top: 10px; padding: 8px 10px; border: 1px dashed var(--line); border-radius: 8px; background: #fbfcfe; }
.wf-flist { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.wf-flist li { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.ob-con { padding: 4px 2px; }
.ob-pv { margin-top: 8px; padding: 8px 10px; background: #f0f6ff; border-radius: 8px; display: flex; flex-direction: column; gap: 4px; }
.ob-pv:empty { display: none; }

/* ==== Responsive – tinh chỉnh chung (đặt cuối để ưu tiên) ==== */
img, svg, video, canvas { max-width: 100%; }
img { height: auto; }
code { overflow-wrap: anywhere; }
.slip-logo { max-width: 100%; height: 34px; object-fit: contain; }
/* Tiêu đề trong hàng flex: không bị ép hẹp – hết chỗ thì phần bên cạnh xuống dòng. */
.row > h3, .row > [style*="flex:1"], .row > [style*="flex: 1"] { min-width: min(200px, 100%); }
.page-head > h2 { min-width: 0; }

@media (max-width: 900px) {
  .layout { display: block; }
  .main { padding: 14px 14px 40px; }
}

@media (max-width: 700px) {
  html, body { font-size: 14.5px; }
  h2 { font-size: 19px; }
  /* Chạm dễ hơn trên điện thoại (tối thiểu ~40px) */
  .btn { min-height: 38px; }
  .btn.sm { min-height: 32px; }
  input[type=text], input[type=search], input[type=password], input[type=date], input[type=month], input[type=email], input[type=number], input[type=time], select, textarea { font-size: 16px; } /* iOS không tự phóng to khi gõ */
  .sheet input, .payroll input { font-size: 13px; }
  .page-head { gap: 8px; margin-bottom: 12px; }
  .card { padding: 14px; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .stat { padding: 12px; }
  .stat .v { font-size: 20px; }
  .tabs { margin-left: -14px; margin-right: -14px; padding: 0 14px; scrollbar-width: none; }
  .tabs::-webkit-scrollbar { display: none; }
  .tabs button { padding: 9px 10px; }
  /* Bảng nhiều cột: cuộn ngang thay vì bóp chữ thành từng dòng */
  .table-wrap { max-height: none; -webkit-overflow-scrolling: touch; }
  .table-wrap > table:has(> thead th:nth-child(4)) { min-width: 620px; }
  .table-wrap > table:has(> thead th:nth-child(6)) { min-width: 760px; }
  .table-wrap > table:has(> thead th:nth-child(8)) { min-width: 980px; }
  .month-picker input { width: 184px; font-size: 15px; }
  .table-wrap > table.sheet, .table-wrap > table.payroll { min-width: 0; }
  th { white-space: nowrap; }
  .payroll th { white-space: normal; }
  .payroll td.sticky, .payroll th.sticky { max-width: 150px; white-space: normal; }
  .sheet td.lbl { min-width: 150px; max-width: 150px; white-space: normal; }
  .sheet td.lbl2, .sheet th.lbl2 { left: 150px; }
  /* Tờ khai: mã | nội dung / số + đơn vị */
  .rp-tbl tr { display: grid; grid-template-columns: 44px 1fr auto; grid-template-areas: "c l l" "c v u"; border-bottom: 1px solid var(--line); }
  .rp-tbl td { border: 0; padding: 4px 6px; }
  .rp-tbl td:nth-child(1) { grid-area: c; width: auto; padding-top: 8px; }
  .rp-tbl td:nth-child(2) { grid-area: l; padding-top: 8px; }
  .rp-tbl td:nth-child(3) { grid-area: v; text-align: left; }
  .rp-tbl td:nth-child(4) { grid-area: u; padding-bottom: 8px; }
  /* Báo cáo tháng (bố cục bảng để gửi email) → lưới 2 cột trên điện thoại */
  .month-report table[style*="border-spacing:6px"], .month-report table[style*="border-spacing:6px"] tbody { display: block; }
  .month-report table[style*="border-spacing:6px"] tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin-bottom: 6px; }
  .month-report table[style*="border-spacing:6px"] td { display: block; }
  /* Modal gần toàn màn hình, nút thao tác dễ bấm */
  .modal-backdrop { padding: 8px; align-items: end; }
  .modal, .modal.wide { width: 100%; max-height: calc(100dvh - 16px); border-radius: 14px; }
  .modal header { padding: 12px 14px; }
  .modal-body { padding: 14px; }
  .grid-form, .grid-form[style*="grid-template-columns"] { grid-template-columns: minmax(0, 1fr) !important; }
  .grid-form.dow-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
  .actions .btn { flex: 1; justify-content: center; }
  .two-col { grid-template-columns: minmax(0, 1fr); }
  .kv { gap: 6px 10px; }
  .emp-body { padding: 0 10px; }
}

@media (max-width: 420px) {
  .stats { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .stat .v { font-size: 18px; }
  .page-head .btn { padding: 7px 10px; }
}

/* ==== Menu quản trị trên điện thoại / máy tính bảng ==== */
.nav-backdrop, .nav-close, .tb-title { display: none; }
@media (max-width: 900px) {
  .topbar-mobile { gap: 10px; padding: 8px 10px; min-height: 56px; }
  .topbar-mobile .menu-btn { width: 44px; height: 44px; padding: 0; font-size: 22px; display: grid; place-items: center; border-radius: 10px; }
  .topbar-mobile .menu-btn:active { background: rgb(255 255 255 / 15%); }
  .topbar-mobile .tb-mark { height: 28px; }
  .topbar-mobile .tb-word { display: none; }
  .tb-title { display: block; flex: 1; min-width: 0; font-weight: 700; font-size: 16px; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .sidebar { width: min(300px, 86vw); z-index: 60; transition: transform .22s ease, box-shadow .22s; padding-top: 12px; overscroll-behavior: contain; padding-bottom: calc(16px + env(safe-area-inset-bottom)); }
  .sidebar.open { box-shadow: 8px 0 32px rgb(0 0 0 / 35%); }
  .sidebar #bell { display: none; }
  .nav-close { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; margin-left: auto; color: #fff; font-size: 18px; background: rgb(255 255 255 / 10%); border-radius: 10px; flex: none; }
  .nav-close:hover { background: rgb(255 255 255 / 20%); color: #fff; }
  .sidebar .nav a { padding: 12px 12px; font-size: 15px; }
  .nav-backdrop { display: block; position: fixed; inset: 0; z-index: 55; background: rgb(2 12 30 / 50%); opacity: 0; pointer-events: none; transition: opacity .22s; -webkit-tap-highlight-color: transparent; }
  .sidebar.open + .nav-backdrop { opacity: 1; pointer-events: auto; }
  body.nav-open { overflow: hidden; }
}
@media (prefers-reduced-motion: reduce) { .sidebar, .nav-backdrop { transition: none; } }

/* ==== Thanh trên cùng (điện thoại): nút menu và chuông cùng cỡ 40px, cân đối ==== */
@media (max-width: 900px) {
  .topbar-mobile { gap: 12px; padding: 8px 12px; min-height: 58px; }
  .topbar-mobile .menu-btn { width: 40px; height: 40px; border-radius: 12px; background: rgb(255 255 255 / 12%); color: #fff; }
  .topbar-mobile .menu-btn svg { width: 22px; height: 22px; display: block; }
  .topbar-mobile .menu-btn:hover, .topbar-mobile .menu-btn:active { background: rgb(255 255 255 / 22%); color: #fff; }
  .topbar-mobile .tb-mark { height: 26px; margin-left: 2px; }
  .topbar-mobile .tb-title { font-size: 17px; letter-spacing: .1px; }
  .topbar-mobile .bell { width: 40px; height: 40px; border-radius: 12px; font-size: 18px; background: rgb(255 255 255 / 12%); }
  .topbar-mobile .bell-n { top: -4px; right: -4px; border: 2px solid #022352; height: 19px; min-width: 19px; }
  .nav-close svg { display: block; }
  /* Tên trang đã hiện trên thanh trên cùng → ẩn tiêu đề lặp lại để nội dung lên cao hơn */
  .main > .page-head > h2:first-child { display: none; }
  .main > .page-head:has(> h2:first-child) { justify-content: flex-start; }
}