@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* ============================================================================
   Giao diện theo app MC (Go Global): nền xám nhạt, thẻ trắng bo 12px, màu chủ
   đạo tím chàm, cột menu nền slate. Font Inter; không có mạng thì dùng font hệ
   thống, giao diện vẫn đủ.
   ========================================================================== */
:root {
  --bg: #f5f6f9;
  --fg: #0f172a;
  --card: #ffffff;
  --muted: #f3f4f6;
  --muted-fg: #6b7280;
  --border: #e5e7eb;
  --primary: #4f46e5;
  --primary-600: #4338ca;
  --accent: #eef2ff;

  --radius: 12px;
  --radius-md: 10px;
  --radius-sm: 8px;
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / .05);
  --shadow: 0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);

  --slate-100: #f1f5f9; --slate-200: #e2e8f0; --slate-600: #475569;
  --blue-50: #eff6ff; --blue-100: #dbeafe; --blue-200: #bfdbfe; --blue-600: #2563eb; --blue-700: #1d4ed8;
  --green-50: #f0fdf4; --green-600: #16a34a;
  --teal-50: #f0fdfa; --teal-600: #0d9488;
  --violet-50: #f5f3ff; --violet-100: #ede9fe; --violet-200: #ddd6fe; --violet-600: #7c3aed; --violet-700: #6d28d9;
  --emerald-50: #ecfdf5; --emerald-100: #d1fae5; --emerald-200: #a7f3d0; --emerald-700: #047857; --emerald-800: #065f46;
  --amber-50: #fffbeb; --amber-100: #fef3c7; --amber-200: #fde68a; --amber-600: #d97706; --amber-700: #b45309; --amber-800: #92400e;
  --red-50: #fef2f2; --red-100: #fee2e2; --red-200: #fecaca; --red-600: #dc2626; --red-700: #b91c1c; --red-800: #991b1b;
  --orange-600: #ea580c;

  /* Tên biến cũ — login.html và vài chỗ viết inline trong app.js vẫn dùng. */
  --ink: var(--fg); --ink-2: var(--muted-fg); --ink-3: #9ca3af;
  --rule: var(--border); --rule-2: #f1f2f4; --field: var(--bg); --surface: var(--card);
  --brand: var(--primary); --brand-2: var(--primary-600); --brand-3: #312e81; --wash: var(--accent);
  --ok: var(--emerald-700); --ok-wash: var(--emerald-50); --ok-rule: var(--emerald-200);
  --warn: var(--amber-700); --warn-wash: var(--amber-50); --warn-rule: var(--amber-200);
  --bad: var(--red-600); --bad-wash: var(--red-50); --bad-rule: var(--red-200);
  --r-sm: var(--radius-sm); --r: var(--radius-md); --r-lg: var(--radius);

  --t: 150ms cubic-bezier(.4, 0, .2, 1);
  --rail-w: 256px;
  --chev: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; }
body {
  margin: 0;
  font: 400 14px/1.5 Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  background: var(--bg);
  color: var(--fg);
  -webkit-font-smoothing: antialiased;
}
:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 4px; }
svg { width: 16px; height: 16px; flex-shrink: 0; }

/* ================================================================= khung */
body.app { display: flex; min-height: 100vh; }

aside.rail {
  width: var(--rail-w);
  flex-shrink: 0;
  height: 100vh;
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  background: var(--slate-100);
  border-right: 1px solid var(--border);
}
.brand { padding: 24px; border-bottom: 1px solid var(--slate-200); }
.brand h1 { margin: 0; font-size: 20px; font-weight: 700; letter-spacing: -.02em; line-height: 1.3; }
.brand p { margin: 4px 0 0; font-size: 12px; color: var(--muted-fg); }

nav.menu { flex: 1; padding: 16px; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; }
.menu-head {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; padding: 10px 12px; border: 0; border-radius: var(--radius-md);
  background: none; color: var(--fg); cursor: pointer;
  font-family: inherit; font-size: 14px; font-weight: 500;
  transition: background var(--t);
}
.menu-head span { display: flex; align-items: center; gap: 12px; }
.menu-head span svg { color: var(--blue-600); }
.menu-head .chev { transition: transform var(--t); }
.menu-group.closed .chev { transform: rotate(-90deg); }
.menu-head:hover { background: #e8ecf1; }
.menu-group:has(button.on) > .menu-head { background: #fff; box-shadow: var(--shadow-sm); }
.menu-sub {
  margin: 4px 0 0 16px; padding-left: 12px;
  border-left: 1px solid var(--slate-200);
  display: flex; flex-direction: column; gap: 2px;
}
.menu-group.closed .menu-sub { display: none; }

nav.menu button[data-tab] {
  display: flex; align-items: center; gap: 12px;
  width: 100%; padding: 8px 12px; border: 0; border-radius: var(--radius-md);
  background: none; color: var(--fg); text-align: left; cursor: pointer;
  font-family: inherit; font-size: 14px;
  transition: background var(--t), color var(--t);
}
nav.menu button[data-tab]:hover { background: #e8ecf1; }
nav.menu button[data-tab] svg { width: 15px; height: 15px; }
nav.menu button.menu-top { margin-top: 8px; padding: 10px 12px; font-weight: 500; }
nav.menu button.menu-top svg { width: 16px; height: 16px; }
nav.menu [data-color="blue"] svg { color: var(--blue-600); }
nav.menu [data-color="green"] svg { color: var(--green-600); }
nav.menu [data-color="teal"] svg { color: var(--teal-600); }
nav.menu [data-color="violet"] svg { color: var(--violet-600); }
nav.menu [data-color="blue"].on { background: var(--blue-50); color: var(--blue-600); font-weight: 500; }
nav.menu [data-color="green"].on { background: var(--green-50); color: var(--green-600); font-weight: 500; }
nav.menu [data-color="teal"].on { background: var(--teal-50); color: var(--teal-600); font-weight: 500; }
nav.menu [data-color="violet"].on { background: var(--violet-50); color: var(--violet-700); }
nav.menu [data-color="amber"] svg { color: var(--amber-600); }
nav.menu [data-color="amber"].on { background: var(--amber-50); color: var(--amber-700); font-weight: 500; }
.badge {
  margin-left: auto; padding: 0 7px; border-radius: 999px;
  background: var(--amber-600); color: #fff;
  font-size: 11px; font-weight: 600; line-height: 18px; font-variant-numeric: tabular-nums;
}

.rail-user { border-top: 1px solid var(--slate-200); padding: 12px; }
.who { display: flex; align-items: center; gap: 8px; padding: 6px 8px; margin-bottom: 4px; }
.who svg { width: 20px; height: 20px; color: var(--muted-fg); }
.who-text { min-width: 0; }
.who .nm { font-size: 12px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.who .nm:empty::before { content: "HCNS Global"; }
.who .em { font-size: 12px; color: var(--muted-fg); }
.logout {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 6px 8px; border: 0; border-radius: var(--radius-md);
  background: none; color: var(--red-600); cursor: pointer;
  font-family: inherit; font-size: 14px;
}
.logout:hover { background: var(--red-50); }

main { flex: 1; min-width: 0; height: 100vh; overflow-y: auto; }
.main-inner { max-width: 1280px; margin: 0 auto; padding: 32px; }

header.topbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 24px; }
.page-title h1 { margin: 0; font-size: 24px; font-weight: 700; letter-spacing: -.02em; line-height: 1.3; }
.page-title p { margin: 4px 0 0; font-size: 14px; color: var(--muted-fg); }
.topbar .spacer { flex: 1; }
.topbar .period select { min-width: 160px; }

main section[id^="tab-"] { display: none; }
main section[id^="tab-"].on { display: block; }
@media (prefers-reduced-motion: no-preference) {
  main section[id^="tab-"].on { animation: hien 200ms ease-out; }
  @keyframes hien { from { opacity: 0; transform: translateY(4px); } }
}

.banner {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 10px 32px; background: var(--red-50); border-bottom: 1px solid var(--red-200);
  color: var(--red-800); font-size: 14px;
}
.banner .btn { background: var(--red-600); }

/* ========================================================= thanh công cụ */
.toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.row.end { justify-content: flex-end; }
.grow { flex: 1; }

.search { position: relative; width: 256px; max-width: 100%; }
.search svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--muted-fg); pointer-events: none; }
.search input { width: 100%; padding-left: 36px; background: #e9ebef; border-color: transparent; box-shadow: none; }
.search input:focus { background: #fff; }

nav.subnav {
  display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px;
  margin-bottom: 20px; background: #e9ebef; border-radius: var(--radius-md);
}
nav.subnav button {
  border: 0; background: none; padding: 6px 14px; border-radius: var(--radius-sm);
  font-family: inherit; font-size: 14px; font-weight: 500; color: var(--muted-fg); cursor: pointer;
}
nav.subnav button:hover { color: var(--fg); }
nav.subnav button.on { background: #fff; color: var(--fg); box-shadow: var(--shadow-sm); }
#tab-setup .sub { display: none; }
#tab-setup .sub.on { display: block; }

/* ================================================================== thẻ */
.card {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 20px; margin-bottom: 16px;
}
.card > h2 { margin: 0 0 14px; font-size: 16px; font-weight: 600; letter-spacing: -.01em; }

.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin-bottom: 16px; }
.tile {
  position: relative; overflow: hidden;
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 20px;
}
.tile::after {
  content: ""; position: absolute; top: -16px; right: -16px;
  width: 80px; height: 80px; border-radius: 50%; background: #3b82f6; opacity: .1;
}
.tile:nth-child(4n+2)::after { background: #10b981; }
.tile:nth-child(4n+3)::after { background: #a855f7; }
.tile:nth-child(4n+4)::after { background: #f59e0b; }
.tile .k { font-size: 14px; font-weight: 500; color: var(--muted-fg); }
.tile .v { margin-top: 4px; font-size: 24px; font-weight: 700; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.tile .s { margin-top: 2px; font-size: 12px; color: var(--muted-fg); }
.tile.warn { background: var(--amber-50); border-color: var(--amber-200); }
.tile.warn .v { color: var(--amber-700); }

/* nguồn dữ liệu */
.prov { margin: 2px 0 4px; }
.prov-bar { display: flex; height: 10px; border-radius: 99px; overflow: hidden; background: var(--border); }
.prov-bar i { display: block; transition: width var(--t); }
.prov-bar i.dev { background: var(--primary); }
.prov-bar i.legacy { background: #9ca3af; }
.prov-key { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px 32px; max-width: 760px; margin-top: 12px; }
.prov-key .n { display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; color: var(--muted-fg); }
.prov-key .n::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: #9ca3af; }
.prov-key .n.dev::before { background: var(--primary); }
.prov-key .q { margin-top: 2px; font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }
.prov-key .d { font-size: 12px; color: var(--muted-fg); }
.kv { display: grid; grid-template-columns: max-content 1fr; gap: 7px 18px; align-items: baseline; }
.kv dt { font-size: 13px; color: var(--muted-fg); }
.kv dd { margin: 0; }

/* ============================================================== điều khiển */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 36px; padding: 0 16px; border: 1px solid transparent; border-radius: var(--radius-md);
  background: var(--primary); color: #fff; box-shadow: var(--shadow-sm);
  font-family: inherit; font-size: 14px; font-weight: 500; white-space: nowrap; cursor: pointer;
  transition: background var(--t), border-color var(--t), color var(--t);
}
.btn:hover { background: #4640de; }
.btn:active { background: var(--primary-600); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn.ghost { background: #fff; color: var(--fg); border-color: var(--border); }
.btn.ghost:hover { background: var(--accent); color: var(--primary-600); }
.btn.ghost.active { background: var(--accent); color: var(--primary); border-color: #c7d2fe; }
.btn.sm { height: 32px; padding: 0 12px; font-size: 13px; }
.btn.warn { background: var(--amber-600); }
.btn.warn:hover { background: var(--amber-700); }
/* Ô chọn hành động trong bảng chi tiết chấm công */
select.chon-hanh-dong { width: 150px; height: 32px; padding: 0 30px 0 10px; font-size: 13px; }
.btn.danger { background: var(--red-600); }
.btn.danger:hover { background: var(--red-700); }
.icon-btn {
  display: inline-grid; place-items: center; width: 36px; height: 36px;
  border: 0; border-radius: var(--radius-md); background: none; color: var(--fg); cursor: pointer;
  transition: background var(--t);
}
.icon-btn:hover { background: var(--accent); }

input, select, textarea {
  height: 36px; padding: 0 12px;
  border: 1px solid var(--border); border-radius: var(--radius-md);
  background: #fff; color: var(--fg); box-shadow: var(--shadow-sm);
  font-family: inherit; font-size: 14px;
  transition: border-color var(--t), box-shadow var(--t), background var(--t);
}
textarea { height: auto; padding: 8px 12px; }
select {
  padding-right: 34px; appearance: none; -webkit-appearance: none;
  background-image: var(--chev); background-repeat: no-repeat;
  background-position: right 10px center; background-size: 16px;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgb(79 70 229 / .15); }
input[type=number] { text-align: right; font-variant-numeric: tabular-nums; }
input[type=checkbox] { width: 16px; height: 16px; padding: 0; box-shadow: none; accent-color: var(--primary); }
label.f { display: flex; flex-direction: column; gap: 6px; font-size: 14px; font-weight: 500; color: var(--fg); }
label.f > input, label.f > select { font-weight: 400; }
label.inline { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; white-space: nowrap; }
.req { color: var(--red-600); }
/* Ngày + giờ đi liền nhau (trang Nghỉ lễ) */
.f-nhom { display: flex; flex-direction: column; gap: 6px; font-size: 14px; font-weight: 500; }
.o-ngay-gio { display: flex; gap: 6px; }
.o-ngay-gio input { font-weight: 400; }
.o-ngay-gio input[type=time] { width: 118px; }
.ds-ten { white-space: normal; min-width: 280px; line-height: 1.6; }   /* danh sách tên dài thì xuống dòng */

input.switch {
  appearance: none; -webkit-appearance: none; position: relative;
  width: 36px; height: 20px; border: 0; border-radius: 999px; padding: 0;
  background: #d1d5db; box-shadow: none; cursor: pointer; transition: background var(--t);
}
input.switch::before {
  content: ""; position: absolute; top: 2px; left: 2px;
  width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: var(--shadow);
  transition: transform var(--t);
}
input.switch:checked { background: var(--primary); }
input.switch:checked::before { transform: translateX(16px); }
.switch-row { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 500; }

/* ================================================================== bảng */
.tbl-wrap {
  overflow: auto; max-height: calc(100vh - 230px); margin-bottom: 16px;
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow);
}
.card .tbl-wrap { box-shadow: none; margin-bottom: 0; }
/* Bảng chưa có dữ liệu (VD bảng lương trước khi bấm Tính) thì ẩn khung, khỏi hiện vạch xám. */
.tbl-wrap:has(> table:empty) { display: none; }
table { border-collapse: separate; border-spacing: 0; width: 100%; font-size: 14px; }
th, td { padding: 10px 14px; border-bottom: 1px solid var(--border); text-align: left; white-space: nowrap; }
thead th { position: sticky; top: 0; z-index: 2; background: var(--muted); color: #4b5563; font-size: 13px; font-weight: 600; }
tbody tr { transition: background var(--t); }
tbody tr:hover { background: #fafafb; }
tbody tr:last-child td { border-bottom: 0; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
tfoot td {
  position: sticky; bottom: 0; z-index: 2;
  background: var(--accent); border-top: 1px solid #c7d2fe; border-bottom: 0;
  font-weight: 700; font-variant-numeric: tabular-nums;
}
tr.review { background: var(--amber-50); }
tr.review:hover { background: var(--amber-100); }
tr.group td { background: var(--accent); color: var(--primary-600); font-size: 12px; font-weight: 600; }
td.neg, .neg { color: var(--red-600); }
.empty { padding: 28px; text-align: center; color: var(--muted-fg); }

/* =============================================================== nhãn */
.pill, .chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 1px 10px; border: 1px solid transparent; border-radius: var(--radius-sm);
  font-size: 12px; font-weight: 600; line-height: 1.6; white-space: nowrap;
}
.chip svg { width: 12px; height: 12px; }
.pill.ok, .chip-emerald { background: var(--emerald-100); color: var(--emerald-700); border-color: var(--emerald-200); }
.pill.warn, .chip-amber { background: var(--amber-100); color: var(--amber-700); border-color: var(--amber-200); }
.pill.info { background: var(--accent); color: var(--primary-600); border-color: #c7d2fe; }
.pill.mute, .chip-slate { background: var(--slate-100); color: var(--slate-600); border-color: var(--slate-200); }
.pill.bad, .chip-red { background: var(--red-100); color: var(--red-700); border-color: var(--red-200); }
.chip-blue { background: var(--blue-100); color: var(--blue-700); border-color: var(--blue-200); }
.chip-violet { background: var(--violet-100); color: var(--violet-700); border-color: var(--violet-200); }
.chip-link { background: var(--emerald-50); color: var(--emerald-700); border-color: var(--emerald-200); }

.muted { color: var(--muted-fg); }
.small { font-size: 12px; }
.right { text-align: right; }
.mono { font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace; font-size: .92em; }

/* ============================================================== thông báo */
.note {
  margin-bottom: 16px; padding: 12px 16px;
  background: var(--amber-50); border: 1px solid var(--amber-200); border-radius: var(--radius-sm);
  color: var(--amber-800); font-size: 14px;
}
.note > div + div { margin-top: 8px; }
.note.ok { background: var(--emerald-50); border-color: var(--emerald-200); color: var(--emerald-800); }
.note.info { background: var(--accent); border-color: #c7d2fe; color: #3730a3; }
.note.bad { background: var(--red-50); border-color: var(--red-200); color: var(--red-800); }

/* ================================================== thẻ nhân viên (kiểu MC) */
.emp-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.emp-card {
  display: flex; align-items: flex-start; gap: 16px; padding: 16px;
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow); transition: box-shadow var(--t);
}
.emp-card:hover { box-shadow: var(--shadow-md); }
.emp-card.is-off { opacity: .6; background: #fafafa; }
.avatar {
  display: grid; place-items: center; flex-shrink: 0;
  width: 44px; height: 44px; border-radius: 50%;
  background: rgb(79 70 229 / .1); color: var(--primary); font-size: 14px; font-weight: 700;
}
.emp-main { flex: 1; min-width: 0; }
.emp-name { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.emp-name h3 { margin: 0; font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.emp-money { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 8px; font-size: 12px; color: var(--muted-fg); }
.emp-money b { color: var(--amber-700); font-weight: 600; }
.emp-hours { margin-top: 4px; font-size: 12px; color: var(--muted-fg); }
.emp-hours .pill { padding: 0 6px; font-size: 11px; }
.emp-actions { display: flex; gap: 2px; flex-shrink: 0; }
.empty-state { grid-column: 1 / -1; padding: 48px 16px; text-align: center; color: var(--muted-fg); }

.dropdown {
  position: fixed; z-index: 60; min-width: 220px; padding: 4px;
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-lg);
}
.dropdown button {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 8px 10px; border: 0; border-radius: 6px; background: none;
  color: var(--fg); font-family: inherit; font-size: 14px; text-align: left; cursor: pointer;
}
.dropdown button:hover { background: var(--muted); }
.t-orange { color: var(--orange-600) !important; }
.t-green { color: var(--green-600) !important; }

/* ================================================= bảng lương kiểu Excel */
.tbl-luong { max-height: calc(100vh - 300px); }
table.bang-luong { font-size: 13px; }
table.bang-luong th, table.bang-luong td { padding: 6px 10px; }
table.bang-luong thead tr.nhom th {
  top: 0; height: 32px; box-sizing: border-box; text-align: center;
  font-size: 11px; font-weight: 700; letter-spacing: .04em; color: #374151;
  border-right: 1px solid rgb(0 0 0 / .06);
}
table.bang-luong thead tr.nhan th {
  top: 32px; min-width: 92px; max-width: 150px; white-space: normal; line-height: 1.3;
  vertical-align: bottom; font-size: 12px; border-right: 1px solid rgb(0 0 0 / .04);
}
table.bang-luong thead th[rowspan] { vertical-align: bottom; text-align: left; }
/* Tên nhóm bám mép trái (ngay sau cột Họ tên) để cuộn ngang tới đâu vẫn đọc được */
table.bang-luong thead tr.nhom th[colspan] { text-align: left; }
table.bang-luong thead tr.nhom th[colspan] span { position: sticky; left: 252px; }
table.bang-luong .g0 { background: #e2e8f0; } table.bang-luong .l0 { background: #f1f5f9; }
table.bang-luong .g1 { background: #fde68a; } table.bang-luong .l1 { background: #fef3c7; }
table.bang-luong .g2 { background: #bbf7d0; } table.bang-luong .l2 { background: #dcfce7; }
table.bang-luong .g3 { background: #bfdbfe; } table.bang-luong .l3 { background: #dbeafe; }
table.bang-luong .g4 { background: #fecaca; } table.bang-luong .l4 { background: #fee2e2; }
table.bang-luong .g5 { background: #ddd6fe; } table.bang-luong .l5 { background: #ede9fe; }
table.bang-luong td.dam { font-weight: 600; }
table.bang-luong tr.phong td {
  padding: 5px 10px; background: #f3f4f6; color: var(--slate-600);
  font-size: 11px; font-weight: 700; letter-spacing: .05em;
}
table.bang-luong tr.phong td span { position: sticky; left: 10px; }
/* Stt và Họ tên đứng yên khi cuộn ngang */
table.bang-luong .c1, table.bang-luong .c2 { position: sticky; z-index: 1; background: #fff; }
table.bang-luong .c1 { left: 0; width: 48px; min-width: 48px; max-width: 48px; }
table.bang-luong .c2 { left: 48px; min-width: 190px; box-shadow: inset -1px 0 0 var(--border); }
table.bang-luong thead .c1, table.bang-luong thead .c2 { z-index: 4; background: #e2e8f0; }
table.bang-luong tbody tr:hover td.c1, table.bang-luong tbody tr:hover td.c2 { background: #fafafb; }
table.bang-luong tfoot .c1, table.bang-luong tfoot .c2 { z-index: 3; background: var(--accent); }
/* Ô nhập tay: nền vàng như file Excel, trông như chữ thường cho tới khi rê chuột */
table.bang-luong td.nhap { padding: 2px 4px; background: #fffbeb; }
.o-nhap {
  width: 100%; min-width: 96px; height: 28px; padding: 0 6px;
  border: 1px solid transparent; border-radius: 6px; background: transparent; box-shadow: none;
  font-size: 13px; text-align: right; -moz-appearance: textfield;
}
.o-nhap[type=text] { min-width: 150px; text-align: left; }
.o-nhap::-webkit-inner-spin-button, .o-nhap::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.o-nhap:hover { border-color: var(--border); background: #fff; }
.o-nhap:focus { background: #fff; }
.o-nhap:disabled { color: var(--fg); cursor: default; border-color: transparent; background: transparent; }
.o-nhap::placeholder { color: #9ca3af; }
.o-nhap.dang-luu { opacity: .5; }
.link-btn {
  padding: 0; border: 0; background: none; color: var(--fg); cursor: pointer;
  font: inherit; font-weight: 500; text-align: left;
}
.link-btn:hover { color: var(--primary); text-decoration: underline; }

/* ============================================================== hộp thoại */
.modal-bg {
  position: fixed; inset: 0; z-index: 50;
  display: flex; align-items: center; justify-content: center; padding: 24px;
  background: rgb(15 23 42 / .6);
}
.modal {
  width: 100%; max-width: 512px; max-height: 88vh; overflow: auto;
  padding: 24px; background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow-lg);
}
.modal.modal-nv { max-width: 600px; }
.modal h3 { margin: 0 0 18px; font-size: 18px; font-weight: 600; letter-spacing: -.01em; }
.modal p { margin: 0 0 10px; }
.modal .row.end { margin-top: 20px !important; gap: 8px; }
.form-nv { display: flex; flex-direction: column; gap: 16px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; }
.grid3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px 16px; }
details.section { border-top: 1px solid var(--border); padding-top: 14px; }
details.section > summary {
  display: flex; align-items: center; gap: 6px; list-style: none; cursor: pointer;
  font-size: 14px; font-weight: 600;
}
details.section > summary::-webkit-details-marker { display: none; }
details.section > summary::before {
  content: ""; width: 16px; height: 16px;
  background: var(--chev) no-repeat center / 16px; transform: rotate(-90deg); transition: transform var(--t);
}
details.section[open] > summary::before { transform: none; }
details.section[open] > summary { margin-bottom: 10px; }

#toast { position: fixed; top: 16px; right: 16px; z-index: 100; display: flex; flex-direction: column; gap: 8px; pointer-events: none; }
#toast div {
  max-width: 380px; padding: 12px 16px;
  background: #fff; color: var(--fg); border: 1px solid var(--border); border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg); font-size: 14px;
}
#toast div.ok { background: var(--emerald-50); border-color: var(--emerald-200); color: var(--emerald-800); }
#toast div.err { background: var(--red-50); border-color: var(--red-200); color: var(--red-800); }
@media (prefers-reduced-motion: no-preference) {
  .modal-bg { animation: mo 120ms ease-out; }
  .modal { animation: bat 160ms cubic-bezier(.2, .7, .3, 1); }
  #toast div { animation: truot 180ms cubic-bezier(.2, .7, .3, 1); }
  @keyframes mo { from { opacity: 0; } }
  @keyframes bat { from { opacity: 0; transform: translateY(8px) scale(.99); } }
  @keyframes truot { from { opacity: 0; transform: translateX(12px); } }
}
.spin { display: inline-block; animation: xoay 1s linear infinite; }
@keyframes xoay { to { transform: rotate(360deg); } }

/* ============================================================ màn hình hẹp */
@media (max-width: 1024px) {
  .emp-grid { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  body.app { flex-direction: column; }
  aside.rail { position: static; width: 100%; height: auto; border-right: 0; border-bottom: 1px solid var(--border); }
  .brand { padding: 14px 16px; }
  nav.menu { flex-direction: row; align-items: center; overflow-x: auto; padding: 8px 12px; }
  .menu-group { display: contents; }
  .menu-head { display: none; }
  .menu-sub { flex-direction: row; margin: 0; padding: 0; border: 0; }
  nav.menu button[data-tab] { width: auto; white-space: nowrap; }
  nav.menu button.menu-top { margin-top: 0; }
  .rail-user { padding: 4px 16px 10px; border-top: 0; }
  .who { display: none; }
  main { height: auto; overflow: visible; }
  .main-inner { padding: 16px; }
  .banner { padding: 10px 16px; }
  .tbl-wrap { max-height: none; }
  .grid2 { grid-template-columns: 1fr; }
  .search { width: 100%; }
}

/* Bảng chấm công chi tiết theo ngày: gọn để không phải kéo ngang */
#tblDaily { font-size: 13px; }
#tblDaily th, #tblDaily td { padding: 6px 8px; }
#tblDaily thead th { font-size: 12px; }
#tblDaily td:has(> .tt-ngay) { white-space: normal; min-width: 150px; }
#tblDaily .tt-ngay { display: flex; flex-wrap: wrap; gap: 4px; }
#tblDaily .ghi-chu-ngay { margin-top: 3px; max-width: 240px; font-size: 12px; color: var(--muted-fg, #6b7280);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#tblDaily select.chon-hanh-dong { width: 104px; height: 28px; font-size: 12px; padding: 0 24px 0 8px; }