/* Khung chamcong2 (13/10/2026, v3): bố cục theo hệ thiết kế KiotViet, màu nhấn theo tài khoản (mặc định xanh lá), sáng / tối (đo trực tiếp salon.kiotviet.vn):
   màu nhấn --acc (KiotViet dùng #0070F4) · nền #F7F8F9 · chữ Inter 14px #15171A · chữ phụ 12px #677484 · thẻ trắng bo 12px không viền, không bóng ·
   nút cao 32px bo 10px (viền xanh / viền xám #D1D5DA) · đầu bảng nền #E6F1FE chữ 12px đậm · dòng kẻ #E8EAED · tab gạch chân xanh.
   Phủ lên app.css (nội dung trang của chamcong) và dùng chung cho erp-web. Tiền tố t2- / n2- không đụng app.css. */
/* Màu nhấn theo tài khoản (users.ui_accent → html[data-accent], trang /giao-dien) — mặc định xanh lá Home Mart; --acc-d = bản sáng hơn cho nền tối */
:root { --acc-l: #448127; --acc-d: #76b82a; }
html[data-accent="blue"] { --acc-l: #0070f4; --acc-d: #4c9bff; }
html[data-accent="teal"] { --acc-l: #0f766e; --acc-d: #2dd4bf; }
html[data-accent="purple"] { --acc-l: #6d28d9; --acc-d: #a78bfa; }
html[data-accent="pink"] { --acc-l: #be185d; --acc-d: #f472b6; }
html[data-accent="red"] { --acc-l: #b91c1c; --acc-d: #f87171; }
html[data-accent="orange"] { --acc-l: #c2410c; --acc-d: #fb923c; }
html[data-accent="amber"] { --acc-l: #92400e; --acc-d: #fbbf24; }
html[data-accent="slate"] { --acc-l: #334155; --acc-d: #94a3b8; }
body.skin2 {
  --acc: var(--acc-l); --acc-bar: var(--acc-l); --acc-on: #fff;
  --acc-2: color-mix(in srgb, var(--acc) 84%, #000); --acc-soft: color-mix(in srgb, var(--acc) 10%, #fff); --acc-line: color-mix(in srgb, var(--acc) 24%, #fff);
  --kv-bg: #f7f8f9; --kv-surface: #fff; --kv-surface-2: #f4f5f7; --kv-text: #15171a; --kv-muted: #677484; --kv-label: #3e464f; --kv-line: #e8eaed; --kv-line-2: #e1e3e6; --kv-input: #d1d5da; --kv-gray: #f0f1f3; --kv-red: #e5484d; --kv-shadow: 0 4px 12px rgba(0, 0, 0, .12);
  /* biến của app.css + erp.css → bảng màu khung mới (trạng thái chấm công giữ nguyên ý nghĩa màu) */
  --bg: var(--kv-bg); --surface: var(--kv-surface); --surface-2: var(--kv-surface-2); --text: var(--kv-text); --muted: var(--kv-muted); --border: var(--kv-line-2); --border-strong: var(--kv-input);
  --primary: var(--acc); --primary-2: var(--acc-2); --on-primary: var(--acc-on); --accent: var(--kv-red); --brand-bar: var(--acc-bar); --on-brand: #fff;
  --head-bg: var(--acc-soft); --on-head: var(--kv-text); --head-line: var(--acc-line);
  --card: var(--kv-surface); --line: var(--kv-line); --line-2: var(--kv-gray); --head: var(--acc-soft); --red: var(--kv-red);
  --brand: var(--acc); --brand-2: var(--acc-2); --brand-bright: var(--acc); --brand-soft: var(--acc-soft); --brand-line: var(--acc-line);
  --radius: 12px; --shadow: none;
  background: var(--kv-bg) !important; color: var(--kv-text); padding: 0 !important;
  font-family: "Inter", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, Arial, sans-serif; font-size: 14px; line-height: 20px;
}
/* Giao diện tối (nút Sáng / Tối trên thanh menu, cùng khoá hm-theme với bản cũ; chưa chọn = theo máy) */
html[data-theme="dark"] body.skin2 {
  --acc: var(--acc-d); --acc-bar: color-mix(in srgb, var(--acc-l) 72%, #0b0f14); --acc-on: #0b1220;
  --acc-2: color-mix(in srgb, var(--acc) 85%, #fff); --acc-soft: color-mix(in srgb, var(--acc) 16%, #181c21); --acc-line: color-mix(in srgb, var(--acc) 32%, #181c21);
  --kv-bg: #0f1216; --kv-surface: #181c21; --kv-surface-2: #1f242a; --kv-text: #e6e9ed; --kv-muted: #9aa4b1; --kv-label: #c7cfd8; --kv-line: #262c33; --kv-line-2: #2e353d; --kv-input: #3a434d; --kv-gray: #222830; --kv-red: #f2555a; --kv-shadow: 0 4px 12px rgba(0, 0, 0, .45);
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) { html:not([data-theme="light"]) body.skin2 {
  --acc: var(--acc-d); --acc-bar: color-mix(in srgb, var(--acc-l) 72%, #0b0f14); --acc-on: #0b1220;
  --acc-2: color-mix(in srgb, var(--acc) 85%, #fff); --acc-soft: color-mix(in srgb, var(--acc) 16%, #181c21); --acc-line: color-mix(in srgb, var(--acc) 32%, #181c21);
  --kv-bg: #0f1216; --kv-surface: #181c21; --kv-surface-2: #1f242a; --kv-text: #e6e9ed; --kv-muted: #9aa4b1; --kv-label: #c7cfd8; --kv-line: #262c33; --kv-line-2: #2e353d; --kv-input: #3a434d; --kv-gray: #222830; --kv-red: #f2555a; --kv-shadow: 0 4px 12px rgba(0, 0, 0, .45);
  color-scheme: dark;
} }
.skin2 .t2i { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* ---------------------------------------------------------------- thanh menu (bk-header) */
.t2-bar { position: sticky; top: 0; z-index: 60; padding: 8px 8px 0; background: var(--kv-bg); }
.t2-in { display: flex; align-items: center; height: 54px; border-radius: 12px; padding: 0 12px 0 16px; color: #fff; background: var(--acc-bar); box-shadow: var(--kv-shadow); }
.t2-logo { display: flex; align-items: center; gap: 8px; text-decoration: none; color: #fff; flex: none; }
.t2-logo img { height: 24px; display: block; }
.t2-v { font-size: 10px; font-weight: 700; background: rgba(255, 255, 255, .22); border-radius: 6px; padding: 1px 6px; letter-spacing: .3px; }
.t2-nav { display: flex; align-items: stretch; height: 100%; margin: 0 0 0 16px; padding: 0; list-style: none; }
.t2-nav > li { position: relative; display: flex; }
.t2-nav > li > a { display: flex; align-items: center; gap: 4px; padding: 0 12px; color: #fff; text-decoration: none; font-weight: 500; font-size: 14px; white-space: nowrap; position: relative; }
.t2-nav > li > a::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 0; height: 2px; border-radius: 2px 2px 0 0; background: transparent; }
.t2-nav > li.on > a::after, .t2-nav > li:hover > a::after { background: var(--kv-surface); }
.t2-dd { position: absolute; top: 100%; left: 0; min-width: 216px; padding: 8px; background: var(--kv-surface); color: var(--kv-text); border-radius: 12px; box-shadow: 0 8px 24px rgba(16, 24, 40, .14); display: none; z-index: 70; text-align: left; }
.t2-nav > li:hover > .t2-dd, .t2-nav > li.open > .t2-dd { display: block; }
.t2-dd a { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 8px; color: var(--kv-text); text-decoration: none; white-space: nowrap; font-size: 14px; font-weight: 400; line-height: 20px; }
.t2-dd a:hover { background: var(--kv-gray); }
.t2-dd a.on { background: var(--acc-soft); color: var(--acc); font-weight: 500; }
.t2-gt { font-size: 12px; color: var(--kv-muted); padding: 10px 12px 4px; border-top: 1px solid var(--kv-line); margin-top: 6px; font-weight: 400; }
.t2-gt0 { font-size: 12px; color: var(--kv-muted); padding: 4px 12px 6px; font-weight: 400; }
.t2-dd.t2-mega { width: 600px; padding: 12px; }
.t2-nav > li:hover > .t2-mega, .t2-nav > li.open > .t2-mega { display: grid; grid-template-columns: 1.15fr 1fr; gap: 8px; }
.t2-col { border-left: 1px solid var(--kv-line); padding-left: 12px; }
.t2-g2 { display: grid; grid-template-columns: 1fr 1fr; }
.t2-trend { align-items: flex-start !important; white-space: normal !important; }
.t2-ti { width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center; background: var(--acc-soft); color: var(--acc); flex: none; }
.t2-trend b { display: block; font-size: 14px; font-weight: 600; }
.t2-trend small, .t2-notes small { display: block; font-size: 12px; line-height: 16px; color: var(--kv-muted); font-weight: 400; }
.t2-cnt { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--kv-red); color: #fff; font-size: 11px; font-weight: 700; display: inline-grid; place-items: center; line-height: 1; margin-left: auto; }
.t2-nav > li > a .t2-cnt { margin-left: 2px; }
.t2-right { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.t2-btn { height: 32px; border: 0; border-radius: 10px; padding: 0 12px; display: inline-flex; align-items: center; gap: 6px; background: var(--acc-soft); color: var(--acc); font: 600 14px/20px inherit; cursor: pointer; text-decoration: none; white-space: nowrap; position: relative; }
.t2-btn:hover, .t2-btn.on { background: var(--kv-surface); }
.t2-btn.t2-ic { width: 32px; padding: 0; justify-content: center; }
.t2-btn .t2-cnt { position: absolute; top: -6px; right: -6px; border: 2px solid var(--acc-bar); margin: 0; }
.t2-av { border-radius: 50% !important; }
.t2-av span { font-size: 12px; font-weight: 700; }
.t2-light { background: var(--kv-gray); color: var(--kv-text); }
.t2-pop { position: relative; }
.t2-pop > .t2-dd { left: auto; right: 0; top: calc(100% + 10px); }
.t2-pop.open > .t2-dd { display: block; }
.t2-set { width: min(540px, calc(100vw - 20px)); padding: 12px; }
.t2-pop.open > .t2-set { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 12px; }
.t2-set a .t2i { color: #5b6573; width: 18px; height: 18px; }
.t2-all { grid-column: 1 / -1; justify-content: center; background: var(--acc-soft); color: var(--acc) !important; font-weight: 600 !important; margin-top: 6px; }
.t2-ext { width: 13px !important; height: 13px !important; margin-left: auto; color: var(--kv-muted); }
.t2-notes { width: 340px; max-height: 70vh; overflow: auto; }
.t2-notes a { white-space: normal; align-items: flex-start; }
/* ô Thông báo trên điện thoại trong chuông (16/10/2026) */
.t2-notes .rp-push { margin: 8px 4px 2px; background: var(--kv-surface-2); border-color: var(--accent, var(--primary)); color: var(--kv-text); }
.t2-notes .rp-push-s { color: var(--kv-muted); }
.t2-notes .rp-push-a .btn { text-transform: capitalize; }
.t2-num { min-width: 26px; height: 22px; border-radius: 11px; background: var(--acc-soft); color: var(--acc); font-size: 12px; font-weight: 700; display: grid; place-items: center; flex: none; }
.t2-empty { padding: 10px 12px; color: var(--kv-muted); font-size: 13px; }
.t2-user { min-width: 240px; }
.t2-uinfo { padding: 8px 12px 10px; border-bottom: 1px solid var(--kv-line); margin-bottom: 6px; }
.t2-uinfo b { display: block; font-weight: 600; }
.t2-uinfo small { color: var(--kv-muted); font-size: 12px; }
.t2-user a .t2i { color: #5b6573; }
.t2-burger { display: none; }

/* ---------------------------------------------------------------- dải tab trang con (kiểu tab KiotViet: gạch chân xanh) */
.t2-tabs { padding: 12px 8px 0; max-width: 1800px; margin: 0 auto; }
.t2-tabs-in { display: flex; gap: 24px; background: var(--kv-surface); border-radius: 12px; padding: 0 16px; overflow-x: auto; scrollbar-width: none; }
.t2-tabs-in::-webkit-scrollbar { display: none; }
.t2-tabs a { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; padding: 14px 0 12px; color: var(--kv-text); font-weight: 500; font-size: 14px; text-decoration: none; white-space: nowrap; border-bottom: 2px solid transparent; }
.t2-tabs a:hover { color: var(--acc); }
.t2-tabs a.on { color: var(--acc); border-bottom-color: var(--acc); }
.t2-tabs .t2-cnt { margin-left: 0; }

/* ---------------------------------------------------------------- trang Thiết lập (như Thiết lập KiotViet) */
.t2-setl { display: grid; grid-template-columns: 254px minmax(0, 1fr); gap: 16px 12px; align-items: start; max-width: 1800px; margin: 0 auto; padding: 12px 8px 0; }
.t2-seth { grid-column: 1 / -1; display: flex; align-items: center; gap: 0; }
.t2-seth h1 { font-size: 24px; line-height: 32px; font-weight: 700; margin: 0; width: 266px; flex: none; color: var(--kv-text); }
.t2-ssearch { display: flex; align-items: center; gap: 8px; height: 32px; width: 300px; max-width: 100%; border: 1px solid var(--kv-input); border-radius: 10px; padding: 0 12px; background: var(--kv-surface); color: var(--kv-muted); }
.t2-ssearch input { border: 0 !important; outline: 0 !important; box-shadow: none !important; padding: 0 !important; min-height: 0 !important; height: 20px; font: 400 14px/20px inherit; background: transparent; width: 100%; color: var(--kv-text); }
.t2-setl main.page.p2 { padding: 0 0 40px !important; margin: 0; min-width: 0; max-width: none; }
.t2-setl > main { min-width: 0; margin: 0; max-width: none; } /* 17/10/2026: trang Thiết lập bên erp-web (main.e2-main) bị bảng đẩy rộng quá màn điện thoại */
.t2-snav { background: var(--kv-surface); border-radius: 12px; padding: 16px; position: sticky; top: 74px; max-height: calc(100vh - 86px); overflow: auto; }
.t2-snav-g { font-size: 14px; line-height: 20px; font-weight: 600; color: var(--kv-text); padding: 4px 0 8px; }
.t2-snav-g ~ .t2-snav-g { margin-top: 12px; padding-top: 16px; border-top: 1px solid var(--kv-line); }
.t2-snav a { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 11px; border-radius: 12px; color: var(--kv-text); text-decoration: none; font-size: 14px; line-height: 20px; border: 1px solid transparent; }
.t2-snav a .t2i { width: 20px; height: 20px; color: #3e464f; }
.t2-snav a:hover { background: var(--kv-gray); }
.t2-snav a.on { background: var(--acc-soft); color: var(--acc); font-weight: 600; }
.t2-snav a.on .t2i { color: var(--acc); }
.t2-snav a[hidden] { display: none; }

/* ---------------------------------------------------------------- nội dung trang chamcong (app.css) theo KiotViet */
.skin2 main.page.p2 { max-width: 1800px; margin: 0 auto; padding: 12px 8px 40px; }
.skin2 .p2-guest { padding-top: 0; }
.skin2 .form-bar { bottom: 12px !important; }
.skin2 .container { padding: 0; }
/* tiêu đề */
.skin2 .p2 .h1, .skin2 .p2 h1 { font-size: 20px; line-height: 28px; font-weight: 700; letter-spacing: 0; color: var(--kv-text); }
.skin2 .p2 h2 { font-size: 16px; line-height: 24px; font-weight: 600; }
.skin2 .p2 h3 { font-size: 15px; line-height: 22px; font-weight: 600; }
.skin2 .p2 .card-title { font-size: 16px; line-height: 24px; font-weight: 600; color: var(--kv-text); margin-bottom: 12px; }
.skin2 .p2 .page-head { margin-bottom: 12px; align-items: center; }
.skin2 .p2 .muted, .skin2 .p2 .small.muted, .skin2 .p2 small.muted { color: var(--kv-muted); }
.skin2 .p2 .small { font-size: 12px; line-height: 16px; }
.skin2 .p2 label { font-size: 14px; font-weight: 500; color: var(--kv-text); }
/* thẻ */
.skin2 .card, .skin2 .set-card, .skin2 .summary-strip, .skin2 .stat-card, .skin2 .kpi-card { background: var(--kv-surface); border: 0; border-radius: 12px; box-shadow: none; }
.skin2 .card { padding: 16px; margin-bottom: 12px; }
/* nút: cao 32px, bo 10px, chữ 14px đậm */
.skin2 .btn { min-height: 32px; padding: 5px 12px; border-radius: 10px; font-size: 14px; font-weight: 600; line-height: 20px; box-shadow: none; }
.skin2 .btn-primary { background: var(--acc); color: var(--acc-on); border-color: var(--acc); box-shadow: none; }
.skin2 .btn-primary:hover { background: var(--acc-2); }
.skin2 .btn-outline { background: var(--kv-surface); border: 1px solid var(--acc); color: var(--acc); }
.skin2 .btn-outline:hover { background: var(--acc-soft); }
.skin2 .btn-ghost { background: var(--kv-surface); border: 1px solid var(--kv-input); color: var(--kv-label); }
.skin2 .btn-ghost:hover { background: var(--kv-gray); }
.skin2 .btn-danger { background: var(--kv-surface); border: 1px solid #f5c2c4; color: #d1242f; }
.skin2 .btn-sm { min-height: 28px; padding: 3px 10px; font-size: 13px; }
.skin2 .btn-lg { min-height: 40px; padding: 9px 16px; }
/* ô nhập */
.skin2 input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="range"]), .skin2 select, .skin2 textarea {
  border: 1px solid var(--kv-input); border-radius: 10px; padding: 6px 12px; font-size: 14px; line-height: 20px; color: var(--kv-text); background-color: var(--kv-surface); min-height: 34px; }
.skin2 .search input { padding-left: 36px !important; }
.skin2 input:focus, .skin2 select:focus, .skin2 textarea:focus { outline: none !important; border-color: var(--acc) !important; box-shadow: 0 0 0 3px rgba(0, 112, 244, .14); }
.skin2 input[type="checkbox"], .skin2 input[type="radio"] { accent-color: var(--acc); }
/* bảng: đầu bảng nền xanh nhạt chữ đậm 12px, dòng kẻ mảnh */
.skin2 .table { border-collapse: separate; border-spacing: 0; font-size: 14px; }
.skin2 .table thead th, .skin2 .table > tr:first-child > th { background: var(--acc-soft); color: var(--kv-text); font-size: 12px; line-height: 16px; font-weight: 600; text-transform: capitalize; letter-spacing: 0; padding: 10px 12px; border-bottom: 0; }
.skin2 .table thead th:first-child { border-radius: 10px 0 0 10px; }
.skin2 .table thead th:last-child { border-radius: 0 10px 10px 0; }
.skin2 .table td { padding: 10px 12px; border-bottom: 1px solid var(--kv-line); }
.skin2 .table .total td { background: #fafbfc; }
.skin2 .table thead th a { color: inherit !important; }
.skin2 .matrix thead th, .skin2 .matrix thead .sticky, .skin2 .ws thead .ws-stt { background: var(--acc-soft); color: var(--kv-text); border-color: var(--acc-line); font-weight: 600; }
.skin2 .matrix thead th small { color: var(--kv-muted); }
.skin2 .matrix thead th.sun { color: #d1242f; }
:root body.skin2 .matrix th.today { background: var(--acc); color: var(--acc-on); box-shadow: none; }
:root body.skin2 .matrix th.today :is(small, b) { color: inherit; }
:root body.skin2 .matrix th.today small { opacity: .85; }
.skin2 .matrix-wrap { border-color: var(--kv-line-2); border-radius: 12px; }
/* huy hiệu: bo 6px, chữ đậm vừa */
.skin2 .badge { border-radius: 6px; font-weight: 600; padding: 2px 8px; font-size: 12px; line-height: 16px; }
/* thông báo */
.skin2 .alert { border-left: 0; border-radius: 10px; font-weight: 400; }
/* tab trong trang (subtabs) → gạch chân xanh như KiotViet */
.skin2 .subtabs { background: transparent; padding: 0; gap: 24px; border-radius: 0; border-bottom: 1px solid var(--kv-line); margin-bottom: 16px; }
.skin2 .subtabs a { padding: 10px 0; border-radius: 0; color: var(--kv-text); font-weight: 500; border-bottom: 2px solid transparent; }
.skin2 .subtabs a.active { background: transparent; color: var(--acc); box-shadow: none; border-bottom-color: var(--acc); }
/* số đếm đỏ */
.skin2 .nav-count { background: var(--kv-red); }
/* Trung tâm cài đặt: thẻ trắng, biểu tượng nền xanh nhạt */
.skin2 .set-card { padding: 16px; }
.skin2 .set-card:hover { box-shadow: 0 0 0 1px var(--acc-line); }
.skin2 .set-ico { background: var(--acc-soft); color: var(--acc); border-radius: 10px; }
.skin2 .set-gtitle h2 { font-size: 16px; font-weight: 600; }
.skin2 .stat-row { border-bottom-color: var(--kv-line); border-bottom-style: solid; }
html.embed .t2-bar, html.embed .t2-tabs, html.embed .t2-snav, html.embed .t2-seth, html.embed .t2-mnav { display: none !important; }
html.embed .t2-setl { display: block; padding: 0; }

/* Viết hoa chữ cái đầu mỗi từ ở MỌI chữ giao diện (16/10/2026, khách: "chữ cái đầu đã viết hoa hết chưa? kể cả trong dropbox ngày tháng, phiếu lương"):
   menu, tiêu đề, nút, cột bảng, nhãn, thẻ trạng thái, ô chọn + danh sách thả xuống (skin2.js viết hoa thật chữ trong <option>), chữ gợi ý trong ô nhập, popup.
   Giữ nguyên: chữ người dùng gõ (ô nhập, ghi chú, địa chỉ, email), mã / code, và câu dài > 8 từ (skin2.js gắn .cap-off) */
body.skin2 { text-transform: capitalize; }
.skin2 :is(button, select, option, optgroup, .btn, summary) { text-transform: capitalize; }
.skin2 :is(input, textarea)::placeholder { text-transform: capitalize; }
.skin2 :is(.sys-cap-note, .perm-group th small, .slip-table .slip-grp th, .pfq .pyf-gt) { text-transform: capitalize; } /* app.css để chữ thường ở mấy nhãn này */
.skin2 :is(input, textarea, code, kbd, pre, .no-cap, .cap-off, [data-no-cap], a[href^="mailto:"], .kvs-clip, .kvs-note b, .kvs-email) { text-transform: none; }

/* ---------------------------------------------------------------- ghi chú gập (đang tắt — skin2.js window.N2_ON) */
.n2 { display: inline-flex; align-items: flex-start; gap: 4px; position: relative; vertical-align: middle; max-width: 100%; }
.n2-wrap { display: block; margin: 2px 0 6px; }
.n2-b { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px 0 4px; border: 1px solid var(--kv-input); border-radius: 11px; background: var(--kv-surface); color: var(--kv-label); font: 600 12px/1 inherit !important; cursor: pointer; text-transform: none !important; white-space: nowrap; }
.n2-b i { width: 15px; height: 15px; border-radius: 50%; background: var(--acc); color: #fff; font: 800 10px/15px Georgia, serif; font-style: italic; text-align: center; }
.n2-box { display: none; }
.n2.pin > .n2-box { display: block; margin-top: 6px; padding: 8px 10px; background: var(--kv-surface); border: 1px solid var(--kv-line); border-radius: 8px; font-size: 13px; color: var(--kv-label); white-space: normal; }
.n2.pin { flex-direction: column; }
.n2-float { position: fixed; z-index: 120; max-width: min(380px, calc(100vw - 16px)); background: var(--kv-surface); color: var(--kv-text); border: 1px solid var(--kv-line-2); border-radius: 10px; box-shadow: 0 8px 24px rgba(16, 24, 40, .14); padding: 8px 12px; font-size: 13px; pointer-events: none; }

/* ---------------------------------------------------------------- điện thoại */
@media (max-width: 1180px) { .t2-nav > li > a { padding: 0 8px; font-size: 13.5px; } .t2-nav > li > a::after { left: 8px; right: 8px; } .t2-lbl { display: none; } }
@media (max-width: 960px) {
  .t2-nav { display: none; }
  .t2-burger { display: inline-flex; }
  .t2-in { padding-left: 8px; }
  .t2-logo { margin-left: 4px; }
  .t2-setl { grid-template-columns: minmax(0, 1fr); }
  .t2-seth { flex-wrap: wrap; gap: 8px; }
  .t2-seth h1 { width: auto; margin-right: 12px; }
  .t2-snav { position: static; max-height: none; display: flex; flex-wrap: nowrap; overflow-x: auto; gap: 4px; padding: 6px; }
  .t2-snav-g { display: none; }
  .t2-snav a { white-space: nowrap; flex: none; }
}
@media (max-width: 640px) {
  .t2-bar { padding: 6px 6px 0; }
  .t2-right { gap: 6px; }
  .t2-hide-sm { display: none !important; }
  .skin2 main.page.p2 { padding: 8px 6px 30px; }
  .t2-tabs { padding: 8px 6px 0; }
  .t2-pop.open > .t2-set { grid-template-columns: 1fr; max-height: 75vh; overflow: auto; }
  .t2-pop > .t2-dd { position: fixed; top: 62px; left: 8px; right: 8px; width: auto; min-width: 0; }
}
/* 17/10/2026: máy 360–375px — thanh trên của Giám đốc (chi nhánh · sáng/tối · chuông · thiết lập · tài khoản) tràn ngang 8–23px → ẩn nút Sáng/Tối (vẫn có trong menu tài khoản + ngăn kéo Menu) */
/* 17/10/2026: ô chọn tháng / tuần / ngày — chữ do trình duyệt vẽ (iPhone, Android: "tháng 10 năm 2026") cũng viết hoa đầu từ.
   Ô nhập không thừa hưởng text-transform của trang nên phải đặt riêng; mỗi phần tử ảo 1 quy tắc (trình duyệt không biết 1 cái thì không bỏ cả nhóm) */
input::-webkit-date-and-time-value { text-transform: capitalize; }
input::-webkit-datetime-edit { text-transform: capitalize; }
@media (max-width: 400px) { .t2-right .t2-theme { display: none; } }
@media (max-width: 640px) { .kvx .tsb-badge { right: -4px; } } /* huy hiệu nút Duyệt chấm công sát mép phải: không đẩy trang rộng thêm 1px */
.t2-mnav { position: fixed; inset: 0; z-index: 100; display: none; }
.t2-mnav.show { display: block; }
.t2-shade { position: absolute; inset: 0; background: rgba(15, 23, 42, .4); }
.t2-panel { position: absolute; left: 0; top: 0; bottom: 0; width: min(330px, 88vw); background: var(--kv-surface); overflow: auto; padding: 12px 12px 30px; box-shadow: 4px 0 24px rgba(0, 0, 0, .18); }
.t2-mh { display: flex; align-items: center; justify-content: space-between; padding: 4px 4px 12px; border-bottom: 1px solid var(--kv-line); margin-bottom: 6px; }
.t2-mh img { height: 24px; }
.t2-panel details { border-bottom: 1px solid var(--kv-line); }
.t2-panel summary { list-style: none; padding: 12px 8px; font-weight: 600; display: flex; justify-content: space-between; align-items: center; gap: 6px; cursor: pointer; color: var(--kv-text); }
.t2-panel summary::-webkit-details-marker { display: none; }
.t2-panel details a, .t2-m1 { display: flex; align-items: center; gap: 8px; padding: 9px 8px 9px 20px; color: var(--kv-text); text-decoration: none; border-radius: 8px; }
.t2-m1 { padding-left: 8px; font-weight: 600; border-bottom: 1px solid var(--kv-line); border-radius: 0; }
.t2-panel a.on { background: var(--acc-soft); color: var(--acc); }
.t2-mg { font-size: 12px; color: var(--kv-muted); padding: 8px 8px 2px 20px; }
@media print { .t2-bar, .t2-tabs, .t2-snav, .t2-seth { display: none !important; } .t2-setl { display: block; } }

/* nút Sáng / Tối + chọn màu nhanh trong menu tài khoản (13/10/2026) */
.skin2 .t2-sun { display: none !important; }
html[data-theme="dark"] .skin2 .t2-sun { display: revert !important; } html[data-theme="dark"] .skin2 .t2-moon { display: none !important; }
@media (prefers-color-scheme: dark) { html:not([data-theme="light"]) .skin2 .t2-sun { display: revert !important; } html:not([data-theme="light"]) .skin2 .t2-moon { display: none !important; } }
.t2-accs { display: flex; flex-wrap: wrap; gap: 8px; padding: 8px 12px 10px; border-bottom: 1px solid var(--kv-line); margin-bottom: 6px; }
.t2-acc { width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--kv-surface); box-shadow: 0 0 0 1px var(--kv-line-2); cursor: pointer; padding: 0; }
.t2-acc.on { box-shadow: 0 0 0 2px var(--acc); }
.t2-cap { font-size: 12px; color: var(--kv-muted); padding: 6px 12px 0; }
.t2-mh .lg-d { display: none; }
html[data-theme="dark"] .t2-mh .lg-l { display: none; } html[data-theme="dark"] .t2-mh .lg-d { display: block; }
@media (prefers-color-scheme: dark) { html:not([data-theme="light"]) .t2-mh .lg-l { display: none; } html:not([data-theme="light"]) .t2-mh .lg-d { display: block; } }
/* nền tối: ô nhập, lịch, phần app.css còn ghi màu sáng cố định */
html[data-theme="dark"] body.skin2 .t2-dd, html[data-theme="dark"] body.skin2 .t2-panel { box-shadow: 0 8px 24px rgba(0, 0, 0, .5); }
.t2-mnav .t2-accs { border-bottom: 0; padding: 4px 16px 10px; }
.t2-mnav .t2-acc { width: 28px; height: 28px; }

/* 14/10/2026: menu Nhân Viên 3 mục có biểu tượng + 1 dòng mô tả; ⚙ Cài đặt liên quan ở cuối dải tab; mục "Của Tôi" trong menu tài khoản */
.t2-dd a.t2-big { align-items: flex-start; white-space: normal; padding: 10px 12px; min-width: 300px; }
.t2-dl { display: flex; flex-direction: column; min-width: 0; }
.t2-dl b { display: flex; align-items: center; gap: 4px; font-size: 14px; font-weight: 600; }
.t2-dl small { font-size: 12px; line-height: 16px; color: var(--kv-muted); font-weight: 400; }
.t2-dd a.t2-big.on .t2-dl small { color: var(--acc); opacity: .85; }
.t2-sep { height: 1px; background: var(--kv-line); margin: 6px 0; }
.t2-tabs-in { align-items: stretch; }
.t2-ctx { margin-left: auto; position: relative; display: flex; align-items: center; }
.t2-ctx > summary { list-style: none; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; margin: 6px 0; border-radius: 10px; border: 1px solid var(--kv-input); color: var(--kv-label); font-weight: 500; font-size: 13.5px; cursor: pointer; background: var(--kv-surface); white-space: nowrap; }
.t2-ctx > summary::-webkit-details-marker { display: none; }
.t2-ctx > summary:hover, .t2-ctx[open] > summary { border-color: var(--acc); color: var(--acc); }
.t2-ctx .rm-list { min-width: 250px; }
@media (max-width: 760px) { .t2-ctx > summary span { display: none; } .t2-ctx > summary { padding: 6px 9px; } }
html.embed .t2-setc { padding: 10px 16px 24px !important; }

/* thanh chọn nhanh dưới cùng trên điện thoại như bản chamcong (15/10/2026): hiện khi menu ngang thu gọn (≤ 960px).
   Viết đủ ở đây (không dựa app.css) vì trang Tổng quan / Hàng hóa / Phân tích của erp-web chỉ nạp skin2.css */
.skin2 .t2-bnav { display: none; }
@media (max-width: 960px) {
  .skin2 .t2-bnav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; display: flex !important; background: var(--kv-surface); border-top: 1px solid var(--kv-line);
    padding: 0 max(4px, env(safe-area-inset-right)) env(safe-area-inset-bottom) max(4px, env(safe-area-inset-left)); box-shadow: 0 -2px 10px rgba(0, 0, 0, .05); }
  .skin2 .t2-bnav > a, .skin2 .t2-bnav > button { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 1px 5px; margin: 0; border: 0; background: none;
    font: inherit; font-size: 11px; line-height: 1.2; color: var(--kv-muted); cursor: pointer; text-decoration: none; -webkit-tap-highlight-color: transparent; text-transform: capitalize; }
  .skin2 .t2-bnav .nb-ico { position: relative; display: grid; place-items: center; width: 46px; height: 28px; border-radius: 14px; transition: background-color .15s; }
  .skin2 .t2-bnav .t2i { width: 22px; height: 22px; stroke-width: 1.9; }
  .skin2 .t2-bnav .nb-lbl { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .skin2 .t2-bnav .active { color: var(--acc); font-weight: 700; }
  .skin2 .t2-bnav .active .nb-ico { background: var(--acc-soft); }
  .skin2 .t2-bnav > a.nb-fab { color: var(--acc); font-weight: 700; }
  .skin2 .t2-bnav .nb-fab .nb-ico { width: 54px; height: 54px; margin-top: -24px; border-radius: 50%; background: var(--acc); color: var(--acc-on); box-shadow: 0 0 0 4px var(--kv-surface), 0 8px 18px color-mix(in srgb, var(--acc) 38%, transparent); }
  .skin2 .t2-bnav .nb-fab .t2i { width: 27px; height: 27px; stroke-width: 2; }
  .skin2 .t2-bnav .nb-fab:active .nb-ico { transform: scale(.95); }
  .skin2 .t2-bnav .nb-ico .nav-count { position: absolute; top: -5px; left: 50%; margin-left: 3px; min-width: 17px; height: 17px; line-height: 17px; padding: 0 4px; border-radius: 999px;
    background: var(--kv-red); color: #fff; font-size: 10.5px; font-weight: 700; text-align: center; box-shadow: 0 0 0 2px var(--kv-surface); }
  .skin2 .t2-burger, .skin2 .t2-hide-bn { display: none !important; }
  body.skin2 { padding-bottom: calc(66px + env(safe-area-inset-bottom)) !important; }
}
@media (max-width: 359px) { .skin2 .t2-bnav > a, .skin2 .t2-bnav > button { font-size: 10px; } .skin2 .t2-bnav .nb-ico { width: 40px; } }
html.embed .skin2 .t2-bnav, html.embed body.skin2 .t2-bnav { display: none !important; }
html.embed body.skin2 { padding-bottom: 0 !important; }

/* ================================================================ Bảng chấm công · Lịch làm việc · popup Chấm công kiểu KiotViet (15/10/2026)
   Màu thẻ đo từ KiotViet Home Mart: đúng giờ #E5F1FE/#002D62/#005AC3 · đi muộn – về sớm #F1E5FF/#3F1F66/#7E3DCC · chưa chấm công #FFF3E5/#663600/#CC6D00 ·
   chưa tới #F0F1F3/#677484; chấm công thiếu đỏ cùng sắc độ. Bo 8px, đệm 4px, tên 13px/500, giờ + trạng thái 12px. */
body.skin2 {
  --tsc-ok-bg: #e5f1fe; --tsc-ok-fg: #002d62; --tsc-ok-nt: #005ac3;
  --tsc-late-bg: #f1e5ff; --tsc-late-fg: #3f1f66; --tsc-late-nt: #7e3dcc;
  --tsc-forgot-bg: #fff3e5; --tsc-forgot-fg: #663600; --tsc-forgot-nt: #cc6d00;
  --tsc-miss-bg: #ffe8e8; --tsc-miss-fg: #6b0f0f; --tsc-miss-nt: #d12b2b;
  --tsc-future-bg: #f0f1f3; --tsc-future-fg: #677484; --tsc-future-nt: #677484;
  --tsc-off-bg: #f0f1f3; --tsc-off-fg: #4b5563; --tsc-off-nt: #677484;
}
html[data-theme="dark"] body.skin2 {
  --tsc-ok-bg: #16263a; --tsc-ok-fg: #cfe3ff; --tsc-ok-nt: #79b4ff; --tsc-late-bg: #261a38; --tsc-late-fg: #e6d6ff; --tsc-late-nt: #b98cf5;
  --tsc-forgot-bg: #2f2314; --tsc-forgot-fg: #ffe1bf; --tsc-forgot-nt: #ffad52; --tsc-miss-bg: #351a1a; --tsc-miss-fg: #ffd3d3; --tsc-miss-nt: #ff7b7b;
  --tsc-future-bg: #1f242a; --tsc-future-fg: #9aa4b1; --tsc-future-nt: #9aa4b1; --tsc-off-bg: #1f242a; --tsc-off-fg: #c7cfd8; --tsc-off-nt: #9aa4b1;
}
@media (prefers-color-scheme: dark) { html:not([data-theme="light"]) body.skin2 {
  --tsc-ok-bg: #16263a; --tsc-ok-fg: #cfe3ff; --tsc-ok-nt: #79b4ff; --tsc-late-bg: #261a38; --tsc-late-fg: #e6d6ff; --tsc-late-nt: #b98cf5;
  --tsc-forgot-bg: #2f2314; --tsc-forgot-fg: #ffe1bf; --tsc-forgot-nt: #ffad52; --tsc-miss-bg: #351a1a; --tsc-miss-fg: #ffd3d3; --tsc-miss-nt: #ff7b7b;
  --tsc-future-bg: #1f242a; --tsc-future-fg: #9aa4b1; --tsc-future-nt: #9aa4b1; --tsc-off-bg: #1f242a; --tsc-off-fg: #c7cfd8; --tsc-off-nt: #9aa4b1;
} }
.tsb { display: flex; flex-direction: column; gap: 12px; }
.tsb-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.tsb-bar > * { flex: none; margin: 0; }
.skin2 .tsb-bar select.tsb-ctl, .skin2 .tsb-bar .tsb-ctl { width: auto; min-width: 0; max-width: 100%; }
.skin2 .tsb-bar .tsb-search input { width: 220px; }
.tsb-title { margin: 0 12px 0 0; font-size: 20px; font-weight: 700; }
.tsb-ctl { height: 34px; border: 1px solid var(--kv-input); border-radius: 10px; background: var(--kv-surface); color: var(--kv-text); font: inherit; font-size: 14px; padding: 0 10px; }
select.tsb-ctl { padding-right: 28px; }
.tsb-btn { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; font-weight: 500; position: relative; cursor: pointer; list-style: none; }
.tsb-btn::-webkit-details-marker { display: none; }
.tsb-btn:hover { border-color: var(--acc); color: var(--acc); }
.tsb-badge { position: absolute; top: -8px; right: -8px; min-width: 18px; height: 18px; line-height: 18px; padding: 0 5px; border-radius: 999px; background: var(--kv-red); color: #fff; font-size: 11px; font-weight: 700; text-align: center; }
.tsb-search { position: relative; display: inline-flex; align-items: center; }
.tsb-search .t2i { position: absolute; left: 10px; width: 16px; height: 16px; color: var(--kv-muted); }
.tsb-search input { height: 34px; width: 220px; border: 1px solid var(--kv-input); border-radius: 10px; padding: 0 10px 0 32px !important; background: var(--kv-surface); color: var(--kv-text); font: inherit; font-size: 14px; }
.tsb-nav { display: inline-flex; align-items: center; height: 34px; border: 1px solid var(--kv-input); border-radius: 10px; background: var(--kv-surface); }
.tsb-nav a { width: 30px; height: 100%; display: grid; place-items: center; color: var(--kv-text); text-decoration: none; font-size: 18px; }
.tsb-nav a:hover { color: var(--acc); }
.tsb-nav span { padding: 0 8px; font-size: 14px; white-space: nowrap; border-left: 1px solid var(--kv-line); border-right: 1px solid var(--kv-line); line-height: 32px; }
.tsb-pick { position: relative; display: inline-flex; align-items: center; height: 34px; padding: 0 12px; border: 1px solid var(--kv-input); border-radius: 10px; background: var(--kv-surface); font-size: 14px; font-weight: 500; cursor: pointer; overflow: hidden; }
.tsb-pick input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.tsb-bar .tsb-sp { flex: 1 1 auto; }
.tsb-wrap { overflow-x: auto; background: var(--kv-surface); border-radius: 12px; border: 1px solid var(--kv-line); }
.tsb-grid { width: 100%; min-width: 980px; border-collapse: separate; border-spacing: 0; table-layout: fixed; }
.tsb-grid.tsb-one { min-width: 0; }
.tsb-grid th, .tsb-grid td { border-bottom: 1px solid var(--kv-line); border-left: 1px solid var(--kv-line); vertical-align: top; padding: 4px; }
.tsb-grid thead th { height: 52px; vertical-align: middle; text-align: center; font-weight: 400; font-size: 14px; color: var(--kv-text); background: var(--kv-surface); position: sticky; top: 0; z-index: 2; }
.tsb-grid thead th span { margin-right: 6px; }
.tsb-dn { font-weight: 600; font-size: 13px; }
.tsb-grid thead th.tsb-today { color: var(--acc); }
.tsb-grid thead th.tsb-today .tsb-dn { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--acc); color: var(--acc-on); }
.tsb-grid th.tsb-sh { width: 150px; text-align: left; position: sticky; left: 0; z-index: 3; background: var(--kv-surface); border-left: 0; padding: 10px 12px; }
.tsb-grid thead th.tsb-sh { display: table-cell; font-weight: 600; z-index: 4; }
.tsb-h0 { white-space: nowrap; }
.tsb-add { float: right; text-decoration: none; color: var(--kv-text); font-size: 18px; line-height: 1; }
.tsb-add:hover { color: var(--acc); }
.tsb-grid tbody th.tsb-sh b { display: block; font-size: 14px; font-weight: 600; }
.tsb-grid tbody th.tsb-sh small { display: block; font-size: 12px; color: var(--kv-muted); font-weight: 400; }
.tsb-grid tbody th.tsb-sh { box-shadow: none; } /* KiotViet không có vạch màu bên trái hàng ca (so lại 16/10/2026) */
.tsb-grid td { display: table-cell; }
.tsb-grid td > .tsc + .tsc { margin-top: 4px; }
.tsb-empty { text-align: center; color: var(--kv-muted); padding: 28px 12px !important; }
.tsc { display: flex; flex-direction: column; gap: 1px; padding: 4px 6px; border-radius: 8px; border: 1px solid transparent; text-decoration: none; min-height: 52px; background: var(--tsc-future-bg); color: var(--tsc-future-fg); transition: box-shadow .12s, transform .12s; }
.tsc:hover { box-shadow: 0 2px 8px rgba(0, 0, 0, .12); }
.tsc[hidden] { display: none !important; }
.tsc-n { font-size: 13px; font-weight: 500; line-height: 20px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tsc-t { font-size: 12px; line-height: 17px; font-variant-numeric: tabular-nums; }
.tsc-s, .tsc-w { font-size: 12px; line-height: 16px; }
.tsc-w { font-weight: 600; }
.tsc-ok { background: var(--tsc-ok-bg); color: var(--tsc-ok-fg); } .tsc-ok .tsc-s, .tsc-ok .tsc-w { color: var(--tsc-ok-nt); }
.tsc-late { background: var(--tsc-late-bg); color: var(--tsc-late-fg); } .tsc-late .tsc-s, .tsc-late .tsc-w { color: var(--tsc-late-nt); }
.tsc-forgot { background: var(--tsc-forgot-bg); color: var(--tsc-forgot-fg); } .tsc-forgot .tsc-s, .tsc-forgot .tsc-w { color: var(--tsc-forgot-nt); }
.tsc-miss { background: var(--tsc-miss-bg); color: var(--tsc-miss-fg); } .tsc-miss .tsc-s, .tsc-miss .tsc-w { color: var(--tsc-miss-nt); }
.tsc-future { background: var(--tsc-future-bg); color: var(--tsc-future-fg); }
.tsc-off { background: var(--tsc-off-bg); color: var(--tsc-off-fg); } .tsc-off .tsc-s { color: var(--tsc-off-nt); font-style: italic; }
.tsb-legend { align-self: center; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 20px; padding: 8px 18px; background: var(--kv-surface); border-radius: 999px; box-shadow: 0 2px 12px rgba(0, 0, 0, .1); font-size: 14px; }
.tsb-legend span { display: inline-flex; align-items: center; gap: 6px; }
.tsl { display: inline-grid; place-items: center; width: 15px; height: 15px; border-radius: 50%; }
.tsl::after { content: ""; width: 7px; height: 4px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: translateY(-1px) rotate(-45deg); }
.tsl-ok { background: #1e78ff; } .tsl-late { background: #9b51e0; } .tsl-miss { background: #e5484d; } .tsl-forgot { background: #f59e0b; } .tsl-off { background: #9aa1ab; }
.tsb-sum { width: 100%; min-width: 860px; border-collapse: collapse; }
.tsb-sum thead th { background: var(--acc-soft); text-align: left; font-size: 12px; font-weight: 600; padding: 10px 12px; color: var(--kv-text); }
.tsb-sum td { padding: 10px 12px; border-bottom: 1px solid var(--kv-line); font-size: 14px; vertical-align: top; }
.tsb-sum td b { display: block; font-weight: 500; }
.tsb-sum td small { display: block; color: var(--kv-muted); font-size: 13px; }
.tsb-sum tr[hidden] { display: none; }
.tsb-emp { text-decoration: none; color: var(--kv-text); } .tsb-emp b { font-weight: 600 !important; } .tsb-emp:hover b { color: var(--acc); }
.tsb-none { text-align: center; color: var(--kv-muted); }
@media (max-width: 760px) {
  .tsb-title { width: 100%; font-size: 18px; }
  .tsb-bar .tsb-search { flex: 1 1 100%; } .skin2 .tsb-bar .tsb-search input { width: 100%; }
  .tsb-sp { display: none; }
  .tsb-grid th.tsb-sh { width: 108px; padding: 8px; }
  .tsb-legend { border-radius: 12px; font-size: 12.5px; gap: 4px 12px; }
}
/* popup Chấm công */
.tcc { max-width: 860px; margin: 0 auto; padding: 4px 4px 12px; display: flex; flex-direction: column; gap: 12px; }
.tcc-head h1 { margin: 0; font-size: 20px; font-weight: 700; }
.tcc-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 0; color: var(--kv-muted); font-size: 13px; margin-top: 4px; }
.tcc-sub > span + span { border-left: 1px solid var(--kv-line-2); margin-left: 10px; padding-left: 10px; }
.tcc-badge { border-radius: 6px; padding: 2px 8px !important; font-weight: 600; font-size: 12px; border-left: 0 !important; margin-left: 10px; }
.tcc-badge.tsc-late { color: var(--tsc-late-nt); } .tcc-badge.tsc-ok { color: var(--tsc-ok-nt); } .tcc-badge.tsc-forgot { color: var(--tsc-forgot-nt); } .tcc-badge.tsc-miss { color: var(--tsc-miss-nt); }
.tcc-info { display: grid; grid-template-columns: 120px 1fr; gap: 12px 16px; align-items: start; font-size: 14px; }
.tcc-info > span, .tcc-info > label { color: var(--kv-text); font-weight: 500; padding-top: 2px; }
.tcc-info > b { font-weight: 400; }
.tcc-info textarea { width: 100%; border: 1px solid var(--kv-input); border-radius: 10px; padding: 8px 10px; font: inherit; background: var(--kv-surface); color: var(--kv-text); resize: vertical; }
.tcc-other { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 4px; font-size: 13px; }
.tcc-other a { color: var(--acc); text-decoration: none; }
.tcc-tabs { display: flex; gap: 24px; border-bottom: 1px solid var(--kv-line); overflow-x: auto; }
.tcc-tabs a { padding: 8px 0; color: var(--kv-muted); text-decoration: none; font-weight: 500; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.tcc-tabs a.on { color: var(--acc); border-bottom-color: var(--acc); }
.tcc-form { display: flex; flex-direction: column; gap: 14px; }
.tcc-lbl { width: 100px; flex: none; font-weight: 500; }
.tcc-radios { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; }
.tcc-radios label { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.tcc-radios input { accent-color: var(--acc); width: 16px; height: 16px; }
.tcc-line { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.tcc-time { width: 104px; height: 38px; border: 1px solid var(--kv-input); border-radius: 10px; padding: 0 12px !important; font: inherit; font-size: 15px; font-variant-numeric: tabular-nums; background: var(--kv-surface); color: var(--kv-text); }
.tcc-time:disabled { background: var(--kv-gray); color: var(--kv-muted); }
.tcc-calc { display: inline-flex; align-items: center; gap: 6px; color: var(--kv-text); }
.tcc-calc output { display: inline-grid; place-items: center; min-width: 52px; height: 34px; padding: 0 8px; border: 1px solid var(--kv-input); border-radius: 10px; background: var(--kv-gray); font-variant-numeric: tabular-nums; }
.tcc-k { min-width: 64px; font-weight: 500; }
.tcc-ro { margin: 0; padding: 8px 12px; border-radius: 10px; background: var(--kv-gray); color: var(--kv-muted); font-size: 13px; }
.tcc-h { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 8px 0; border-bottom: 1px dashed var(--kv-line); font-size: 14px; }
.tcc-h b { font-variant-numeric: tabular-nums; }
.tcc-hk { font-weight: 600; }
.tcc-adj { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.tcc-adj input { height: 34px; border: 1px solid var(--kv-input); border-radius: 10px; padding: 0 10px; font: inherit; background: var(--kv-surface); color: var(--kv-text); }
.tcc-adj input[name="note"] { flex: 1 1 220px; }
.tcc-foot { display: flex; align-items: center; gap: 10px; border-top: 1px solid var(--kv-line); padding-top: 12px; margin-top: 4px; }
.tcc-sp { flex: 1; }
@media (max-width: 560px) { .tcc-info { grid-template-columns: 1fr; gap: 4px; } .tcc-info > b { margin-bottom: 8px; } .tcc-lbl { width: auto; } }
/* Lịch làm việc (Xếp lịch) kiểu KiotViet: ô ca chỉ ghi tên ca (rê chuột xem giờ), "+ Thêm lịch" khi rê chuột, cột Lương dự kiến */
body.skin2 .ro-grid .ro-chip .chip-time { display: none; }
body.skin2 .ro-grid .ro-chip.ro-pend .chip-time { display: inline; }
body.skin2 .ro-grid .ro-chip { border-radius: 8px; padding: 4px 8px; font-size: 14px; font-weight: 500; }
body.skin2 .ro-grid .ro-chip.ro-col { border-color: transparent !important; }
body.skin2 .ro-grid .ro-x { opacity: 0; transition: opacity .12s; }
body.skin2 .ro-grid .ro-chip:hover .ro-x, body.skin2 .ro-grid .ro-chip:focus-within .ro-x { opacity: 1; }
body.skin2 .ro-add-t { font-size: 13px; }
body.skin2 .ro-grid .ro-add { width: auto; padding: 0 6px; border: 0; background: none; color: var(--acc); font-size: 13px; opacity: 0; }
body.skin2 .ro-grid td:hover .ro-add, body.skin2 .ro-grid .ro-add:focus { opacity: 1; }
@media (hover: none) { body.skin2 .ro-grid .ro-add, body.skin2 .ro-grid .ro-x { opacity: 1; } }
body:not(.skin2) .ro-add-t { display: none; }
.ro-pay-h b { display: block; font-size: 15px; margin-top: 4px; }
.ro-pay b { display: block; font-variant-numeric: tabular-nums; }
.ro-pay small { display: block; color: var(--kv-muted, var(--muted)); font-size: 12px; }
input.t2-24h { font-variant-numeric: tabular-nums; }

/* ================================================================ "i chang KiotViet" (15/10/2026): Bảng chấm công · popup Chấm công · popup Yêu cầu chờ duyệt
   Chữ thường như KiotViet ("Bảng chấm công", "Thứ hai", "Ca làm việc") — 3 khung này không viết hoa từng từ. Ô 34px bo 8px viền #D1D5DA,
   chữ nút đậm 600 #15171A; nút Duyệt chấm công nền xám #F0F1F3; thẻ đệm 8px, tên 14px, giờ 13px, trạng thái 12.5px. */
/* (16/10/2026: bỏ chữ thường kiểu KiotViet — khách muốn viết hoa chữ cái đầu mọi chữ, xem quy tắc body.skin2 ở trên) */
body.skin2 { --kvx-text: #15171a; --kvx-sub: #3e464f; --kvx-line: #d1d5da; --kvx-grid: #e5e5e5; --kvx-gray: #f0f1f3; }
html[data-theme="dark"] body.skin2 { --kvx-text: #e7eaee; --kvx-sub: #b4bcc6; --kvx-line: #3a424c; --kvx-grid: #2c333b; --kvx-gray: #232a32; }
@media (prefers-color-scheme: dark) { html:not([data-theme="light"]) body.skin2 { --kvx-text: #e7eaee; --kvx-sub: #b4bcc6; --kvx-line: #3a424c; --kvx-grid: #2c333b; --kvx-gray: #232a32; } }
.kvx { gap: 14px; }
.kvx .tsb-bar { gap: 8px; }
.kvx .tsb-title { font-size: 20px; font-weight: 700; color: var(--kvx-text); margin-right: 96px; letter-spacing: -.1px; }
.kvx .tsb-ctl, .kvx .tsb-search input, .kvx .tsb-nav { height: 34px; border-color: var(--kvx-line); border-radius: 8px; color: var(--kvx-text); }
.kvx .tsb-ctl b, .kvx .tsb-pick b { font-weight: 600; }
.kvx .tsb-sel { display: inline-flex; align-items: center; gap: 8px; padding: 0 10px 0 12px; cursor: pointer; font-size: 14px; user-select: none; }
.kvx .tsb-chev { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; margin-left: 6px; }
.kvx .tsb-ic { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.kvx .tsb-dmenu[open] > .tsb-sel, .kvx .tsb-sel:hover, .kvx .tsb-btn:hover, .kvx .tsb-pick:hover { border-color: var(--acc); color: var(--kvx-text); }
.kvx .tsb-dmenu .rm-list { min-width: 170px; }
.kvx .tsb-dmenu .rm-item.on { color: var(--acc); font-weight: 600; }
.kvx .tsb-search input { width: 240px !important; padding: 0 30px 0 34px !important; font-size: 14px; }
.kvx .tsb-search .t2i { left: 11px; width: 17px; height: 17px; color: #75808b; }
.kvx .tsb-caret { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 26px; height: 26px; display: grid; place-items: center; border: 0; background: none; color: var(--kvx-sub); cursor: pointer; border-radius: 6px; padding: 0; }
.kvx .tsb-caret svg { width: 20px; height: 20px; fill: currentColor; }
.kvx .tsb-caret:hover { background: var(--kvx-gray); }
.kvx .tsb-dd { position: absolute; top: calc(100% + 4px); left: 0; z-index: 60; width: 100%; min-width: 260px; max-height: 340px; overflow: auto; padding: 6px; background: var(--kv-surface); border: 1px solid var(--kvx-line); border-radius: 10px; box-shadow: 0 10px 28px rgba(0, 0, 0, .16); }
.kvx .tsb-dd[hidden] { display: none; }
.kvx .tsb-dd button { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; width: 100%; padding: 8px 10px; border: 0; border-radius: 6px; background: none; color: var(--kvx-text); font: inherit; font-size: 14px; text-align: left; cursor: pointer; }
.kvx .tsb-dd button:hover { background: var(--kvx-gray); }
.kvx .tsb-dd button[hidden] { display: none; }
.kvx .tsb-dd small { color: var(--kv-muted); font-size: 12px; }
.kvx .tsb-dd-empty { padding: 10px; color: var(--kv-muted); font-size: 13px; }
.kvx .tsb-nav { overflow: hidden; }
.kvx .tsb-nav a { width: 26px; color: var(--kvx-text); }
.kvx .tsb-nav a svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.kvx .tsb-nav a:hover { background: var(--kvx-gray); color: var(--acc); }
.kvx .tsb-nav span { padding: 0 10px; border-color: var(--kvx-line); line-height: 32px; color: var(--kvx-text); }
.kvx .tsb-pick { padding: 0 12px; }
.kvx .tsb-btn { padding: 0 12px; font-size: 14px; gap: 8px; }
.kvx .tsb-appr { background: var(--kvx-gray); }
.kvx .tsb-appr:hover { background: color-mix(in srgb, var(--kvx-gray) 70%, var(--kvx-line)); }
.kvx .tsb-badge { top: -9px; right: -9px; min-width: 20px; height: 20px; line-height: 20px; font-size: 12px; background: #e5262d; border: 2px solid var(--kv-surface); }
.kvx .tsb-dots { width: 40px; justify-content: center; padding: 0; }
.kvx .tsb-dots svg { width: 18px; height: 18px; fill: currentColor; }
/* lưới */
.kvx .tsb-wrap { border: 0; border-radius: 8px; box-shadow: 0 1px 2px rgba(16, 24, 40, .04); }
.kvx .tsb-grid th, .kvx .tsb-grid td { border-color: var(--kvx-grid); }
.kvx .tsb-grid thead th { height: 52px; color: var(--kvx-sub); font-size: 14px; border-bottom-color: var(--kvx-grid); }
.kvx .tsb-grid thead th span { margin-right: 12px; }
.kvx .tsb-grid thead th .tsb-dn { color: var(--kvx-text); font-size: 12px; font-weight: 600; }
.kvx .tsb-grid thead th.tsb-today, .kvx .tsb-grid thead th.tsb-today span { color: var(--acc); }
.kvx .tsb-grid thead th.tsb-today .tsb-dn { width: 22px; height: 22px; color: var(--acc-on); }
.kvx .tsb-grid thead th.tsb-sh { color: var(--kvx-text); font-weight: 600; padding: 0 12px; }
.kvx .tsb-add { font-size: 20px; font-weight: 300; color: var(--kvx-text); }
.kvx .tsb-grid tbody th.tsb-sh { padding: 10px 12px; }
.kvx .tsb-grid tbody th.tsb-sh b { color: var(--kvx-text); font-size: 14px; line-height: 20px; }
.kvx .tsb-grid tbody th.tsb-sh small { color: #6b6b70; font-size: 13px; line-height: 18px; }
.kvx .tsb-grid td { padding: 4px; }
.kvx .tsb-grid td > .tsc + .tsc { margin-top: 5px; }
.kvx .tsc { padding: 6px 6px 7px 6px; border-radius: 6px; min-height: 56px; gap: 0; }
.kvx .tsc-n { font-size: 14px; line-height: 22px; font-weight: 500; }
.kvx .tsc-t { font-size: 13px; line-height: 20px; margin-top: 1px; }
.kvx .tsc-s, .kvx .tsc-w { font-size: 12.5px; line-height: 18px; }
.kvx .tsc-future .tsc-n, .kvx .tsc-off .tsc-n { font-weight: 400; }
.kvx .tsb-legend { margin-top: -2px; padding: 9px 12px; gap: 6px 28px; font-size: 14px; color: #333; box-shadow: 0 4px 14px rgba(0, 0, 0, .12); }
html[data-theme="dark"] .kvx .tsb-legend { color: var(--kvx-text); }
.kvx .tsl { width: 15px; height: 15px; }
.kvx .tsl-ok { background: #0070f4; } .kvx .tsl-late { background: #9f53f0; } .kvx .tsl-miss { background: #e5262d; } .kvx .tsl-forgot { background: #ff8b00; } .kvx .tsl-off { background: #a7aeb6; }
@media (max-width: 1100px) { .kvx .tsb-title { margin-right: 12px; } }
@media (max-width: 760px) {
  .kvx .tsb-search { flex: 1 1 100%; } .kvx .tsb-search input { width: 100% !important; }
  .kvx .tsb-appr b { font-size: 13.5px; }
}
/* ô chọn chi nhánh trên thanh menu (Bảng chấm công) */
.t2-brpick .t2-lbl { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.t2-brpick .t2-dd { right: 0; left: auto; min-width: 240px; max-height: 70vh; overflow: auto; }
/* popup khung lớn (Yêu cầu chờ duyệt) */
dialog.modal.frame-dlg.fd-lg { width: min(1240px, calc(100vw - 24px)); height: min(780px, calc(100vh - 32px)); }
@media (max-width: 699px) { dialog.modal.frame-dlg.fd-lg { width: 100vw; height: 100%; } }

/* ---------------------------------------------------------------- popup Chấm công: ảnh chấm công ở phần dưới */
.tcc-pics { border-top: 1px solid var(--kv-line); padding-top: 12px; }
.tcc-pics-t { font-weight: 600; font-size: 14px; margin-bottom: 8px; color: var(--kvx-text); }
.tcc-pics-t small { color: var(--kv-muted); font-weight: 400; }
.tcc-pics-l { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; }
.tcc-pic { flex: none; width: 132px; text-decoration: none; color: var(--kvx-text); border: 1px solid var(--kv-line); border-radius: 10px; overflow: hidden; background: var(--kv-surface); }
.tcc-pic img { display: block; width: 100%; height: 132px; object-fit: cover; background: var(--kvx-gray); }
.tcc-pic-c { display: flex; flex-direction: column; gap: 3px; padding: 6px 8px; font-size: 12.5px; }
.tcc-pic-c b { font-weight: 600; font-variant-numeric: tabular-nums; }
.tcc-pic-c .badge { align-self: flex-start; font-size: 11px; }
.tcc-pic:hover { border-color: var(--acc); }

/* ---------------------------------------------------------------- xem ảnh lớn */
dialog.kv-img-dlg { padding: 0; border: 0; border-radius: 12px; background: #111; max-width: min(92vw, 720px); max-height: 92vh; overflow: hidden; }
dialog.kv-img-dlg::backdrop { background: rgba(0, 0, 0, .7); }
dialog.kv-img-dlg img { display: block; max-width: min(92vw, 720px); max-height: calc(92vh - 40px); margin: 0 auto; object-fit: contain; }
.kv-img-c { padding: 8px 44px 10px 12px; color: #eee; font-size: 13px; }
.kv-img-x { position: absolute; top: 8px; right: 8px; width: 32px; height: 32px; border: 0; border-radius: 50%; background: rgba(0, 0, 0, .55); color: #fff; font-size: 16px; cursor: pointer; }

/* ---------------------------------------------------------------- popup Yêu cầu chờ duyệt (KiotViet) */
.kvq { display: flex; flex-direction: column; min-height: calc(100vh - 140px); color: var(--kvx-text); font-size: 14px; }
html.embed .kvq { height: 100vh; min-height: 0; padding: 0 24px; }
html.embed body.skin2 .p2:has(> .kvq) { padding: 0 !important; max-width: none; }
.kvq-h { margin: 0 0 6px; font-size: 20px; font-weight: 700; }
html.embed .kvq-h { display: none; }
.kvq-tabs { display: flex; gap: 32px; border-bottom: 1px solid var(--kv-line); flex: none; }
.kvq-tabs a { position: relative; padding: 12px 0 10px; color: var(--kvx-sub); text-decoration: none; font-size: 15px; font-weight: 500; border-bottom: 2px solid transparent; margin-bottom: -1px; display: inline-flex; align-items: center; gap: 6px; }
.kvq-tabs a.on { color: var(--acc); border-bottom-color: var(--acc); }
.kvq-tabs a:hover { color: var(--acc); }
.kvq-n { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: #e5262d; color: #fff; font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; }
.kvq-alert { margin: 10px 0 0; }
.kvq-body { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: 250px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); gap: 12px; padding: 24px 0 16px; }
.kvq-fd { min-height: 0; border: 1px solid var(--kv-line); border-radius: 8px; background: var(--kv-surface); overflow: auto; }
.kvq-fd > summary { display: none; }
.kvq-side { display: flex; flex-direction: column; gap: 18px; padding: 14px 12px; margin: 0; }
.kvq-g { display: flex; flex-direction: column; gap: 6px; }
.kvq-gt { font-weight: 600; font-size: 15px; margin-bottom: 2px; color: var(--kvx-text); }
.kvq-r { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 400; color: var(--kvx-sub); cursor: pointer; margin: 0; }
.kvq-r input { width: 15px; height: 15px; margin: 0; accent-color: var(--acc); flex: none; }
.kvq-in, .kvq-side select.kvq-in { width: 100%; height: 36px; border: 1px solid var(--kvx-line); border-radius: 8px; padding: 0 10px; font: inherit; font-size: 14px; background: var(--kv-surface); color: var(--kvx-text); }
.kvq-tg { display: flex; align-items: center; gap: 8px; margin: 0; cursor: pointer; }
.kvq-tg > input { width: 16px; height: 16px; margin: 0; accent-color: var(--acc); flex: none; }
.kvq-box { position: relative; flex: 1; display: flex; align-items: center; height: 36px; border: 1px solid var(--kvx-line); border-radius: 8px; background: var(--kv-surface); }
.kvq-box select { flex: 1; height: 100%; border: 0 !important; background: transparent !important; padding: 0 30px 0 10px; font: inherit; font-size: 14px; color: var(--kvx-text); appearance: none; -webkit-appearance: none; cursor: pointer; width: 100%; box-shadow: none !important; }
.kvq-box select:disabled { color: var(--kv-muted); cursor: default; }
.kvq-box svg { position: absolute; right: 8px; width: 16px; height: 16px; fill: none; stroke: var(--kvx-sub); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.kvq-box-l { padding: 0 30px 0 10px; color: var(--kvx-text); }
.kvq-range { display: grid; grid-template-columns: 1fr; gap: 6px; padding-left: 24px; }
.kvq-range[hidden] { display: none; }
.kvq-range label { display: grid; grid-template-columns: 34px 1fr; align-items: center; gap: 6px; font-size: 13px; color: var(--kvx-sub); margin: 0; }
.kvq-main { min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.kvq-tw { flex: 1 1 auto; min-height: 0; overflow: auto; border-radius: 8px; background: var(--kv-surface); }
.kvq-t { width: 100%; border-collapse: separate; border-spacing: 0; }
.kvq-t thead th { position: sticky; top: 0; z-index: 2; background: var(--kvx-gray); color: var(--kvx-text); font-size: 14px; font-weight: 600; text-align: left; padding: 13px 12px; white-space: nowrap; border: 0; letter-spacing: 0; }
.kvq-t thead th:first-child { border-radius: 8px 0 0 0; } .kvq-t thead th:last-child { border-radius: 0 8px 0 0; }
.kvq-t td { padding: 14px 12px; vertical-align: top; border-bottom: 1px solid var(--kv-line); font-size: 14px; line-height: 22px; color: var(--kvx-text); }
.kvq-t tr[hidden] { display: none; }
.kvq-t tbody tr:hover td, .kvq-t tbody tr.kvq-on td { background: color-mix(in srgb, var(--kvx-gray) 70%, transparent); }
.kvq-c0 { width: 40px; padding-right: 0 !important; }
.kvq-c0 input { width: 17px; height: 17px; margin: 2px 0 0; accent-color: var(--acc); cursor: pointer; }
.kvq-c1 { width: 112px; white-space: nowrap; } .kvq-c2 { width: 170px; } .kvq-c3 { width: 130px; }
.kvq-c1 small, .kvq-c2 small { display: block; color: #75808b; font-size: 12.5px; line-height: 18px; }
.kvq-c2 span { display: block; }
.kvq-ct b { font-weight: 700; }
.kvq-ct .kvq-x { color: var(--kvx-sub); font-size: 13px; }
.kvq-ct a.link { color: var(--acc-strong, var(--acc)); }
.kvq-open { margin-top: 2px; font-size: 13px; }
.kvq-photo { display: inline-flex; align-items: flex-end; gap: 8px; margin-top: 8px; text-decoration: none; color: var(--kvx-sub); font-size: 12.5px; }
.kvq-photo img { width: 96px; height: 96px; object-fit: cover; border-radius: 8px; border: 1px solid var(--kv-line); background: var(--kvx-gray); display: block; }
.kvq-photo:hover img { border-color: var(--acc); }
.kvq-cx { width: 92px; text-align: right; white-space: nowrap; }
.kvq-acts { display: inline-flex; gap: 6px; }
.kvq-ib { width: 26px; height: 26px; display: inline-grid; place-items: center; padding: 0; border: 1px solid var(--kvx-line); border-radius: 6px; background: var(--kv-surface); color: var(--kvx-sub); cursor: pointer; }
.kvq-ib svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.kvq-no:hover { border-color: #e5262d; color: #e5262d; background: color-mix(in srgb, #e5262d 8%, var(--kv-surface)); }
.kvq-ok:hover { border-color: var(--acc); color: var(--acc); background: var(--acc-soft); }
.kvq-go { display: inline-block; padding: 3px 10px; border: 1px solid var(--kvx-line); border-radius: 6px; font-size: 13px; color: var(--kvx-text); text-decoration: none; white-space: nowrap; }
.kvq-go:hover { border-color: var(--acc); color: var(--acc); }
.kvq-st { display: inline-block; padding: 2px 8px; border-radius: 6px; font-size: 12.5px; font-weight: 600; }
.kvq-st-ok { background: var(--acc-soft); color: var(--acc); } .kvq-st-no { background: #ffe8e8; color: #d12b2b; }
.kvq-by { display: block; margin-top: 4px; color: var(--kv-muted); font-size: 12px; line-height: 16px; white-space: normal; }
.kvq-empty { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 56px 16px; color: var(--kv-muted); text-align: center; }
.kvq-empty svg { width: 44px; height: 44px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; opacity: .6; }
.kvq-foot { flex: none; display: flex; align-items: center; gap: 10px; padding: 14px 0 18px; border-top: 1px solid var(--kv-line); margin: 0 -24px; padding-left: 24px; padding-right: 24px; }
.kvq-sel { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; }
.kvq-sel[hidden] { display: none; }
.kvq-sp { flex: 1; }
.kvq-done { min-width: 70px; height: 40px; border-radius: 8px; font-weight: 600; }
html:not(.embed) .kvq-done { display: none; }
html:not(.embed) .kvq-foot { margin: 0; padding: 12px 0; border-top: 0; }
html:not(.embed) .kvq-foot:not(:has(.kvq-sel:not([hidden]))) { display: none; }
@media (max-width: 760px) {
  html.embed .kvq { padding: 0 12px; }
  .kvq-tabs { gap: 24px; }
  .kvq-body { grid-template-columns: 1fr; padding: 12px 0; gap: 10px; }
  .kvq-fd { overflow: visible; }
  .kvq-fd > summary { display: flex; align-items: center; gap: 6px; padding: 10px 12px; font-weight: 600; cursor: pointer; list-style: none; }
  .kvq-fd > summary::-webkit-details-marker { display: none; }
  .kvq-fd > summary::after { content: ""; margin-left: auto; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); }
  .kvq-fd[open] > summary::after { transform: rotate(-135deg); }
  .kvq-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--acc); }
  .kvq-side { padding-top: 4px; }
  .kvq-t thead { display: none; }
  .kvq-t, .kvq-t tbody { display: block; }
  .kvq-t tr { display: grid; grid-template-columns: 28px 1fr auto; grid-template-areas: "c0 c2 cx" "c0 c1 c1" "c0 c3 c3" "c0 ct ct"; gap: 2px 8px; padding: 12px 4px; border-bottom: 1px solid var(--kv-line); }
  .kvq-t td { display: block; padding: 0; border: 0; width: auto; }
  .kvq-t td.kvq-c0 { grid-area: c0; } .kvq-t td.kvq-c1 { grid-area: c1; } .kvq-t td.kvq-c2 { grid-area: c2; } .kvq-t td.kvq-c3 { grid-area: c3; } .kvq-t td.kvq-ct { grid-area: ct; } .kvq-t td.kvq-cx { grid-area: cx; }
  .kvq-c1 span, .kvq-c1 small { display: inline; font-size: 12.5px; color: #75808b; } .kvq-c1 small { margin-left: 6px; }
  .kvq-c2 span { font-weight: 600; } .kvq-c2 small { display: inline; margin-left: 6px; }
  .kvq-c3 { font-size: 12.5px !important; color: var(--acc); font-weight: 600; }
  .kvq-acts .kvq-ib { width: 34px; height: 34px; }
  .kvq-foot { margin: 0 -12px; padding: 10px 12px calc(12px + env(safe-area-inset-bottom)); flex-wrap: wrap; }
}
.kvq-main > .pager { flex: none; padding: 10px 4px 0; }
.kvq-tw.table-scroll { margin: 0; border: 0; box-shadow: none; }

/* ================================================================ Lịch làm việc "i chang KiotViet" (15/10/2026, partials/roster-kv.ejs)
   Lưới: Nhân viên (tên 14/500 · mã · phòng ban IN HOA 12px) × Thứ hai…CN × Lương dự kiến (dòng tổng ngay dưới tiêu đề); ô ca 32px bo 6px chỉ tên ca,
   rê chuột: khung "Tên ca (05:00 - 15:00)" nền trắng đổ bóng, ✕ bỏ ca, "+ Thêm lịch". */
.container.wide.ro-page.ro-k { max-width: none; padding: 0; margin: 0; }
.ro-kvw .tsb-bar form.inline { display: inline-flex; margin: 0; }
.ro-kvw .tsb-bar button.tsb-ctl { font: inherit; font-size: 14px; cursor: pointer; }
.ro-kvw .rm-list form { display: block; }
.ro-kstrip { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 8px 12px; background: var(--kv-surface); border-radius: 8px; font-size: 13.5px; color: var(--kvx-sub); }
.ro-kstrip .tsb-sp { flex: 1 1 auto; }
.ro-kstrip form.inline { display: inline-flex; margin: 0; }
.ro-kwrap { overflow: auto; max-height: calc(100vh - 210px); }
.ro-kgrid { width: 100%; min-width: 1120px; border-collapse: separate; border-spacing: 0; table-layout: fixed; }
.ro-kgrid th, .ro-kgrid td { border-bottom: 1px solid var(--kvx-grid); border-left: 1px solid var(--kvx-grid); padding: 4px; vertical-align: top; background: var(--kv-surface); }
.ro-kgrid thead th { height: 52px; vertical-align: middle; text-align: center; font-weight: 400; font-size: 14px; color: var(--kvx-sub); position: sticky; top: 0; z-index: 3; letter-spacing: 0; }
.ro-kgrid thead th span { margin-right: 12px; }
.ro-kgrid thead th .tsb-dn { color: var(--kvx-text); font-size: 13px; font-weight: 600; }
.ro-kgrid thead th.tsb-today, .ro-kgrid thead th.tsb-today span { color: var(--acc); }
.ro-kgrid thead th.tsb-today .tsb-dn { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--acc); color: var(--acc-on); font-size: 12px; }
.ro-kgrid .ro-kh0 { width: 176px; text-align: left !important; font-weight: 600 !important; color: var(--kvx-text) !important; border-left: 0; left: 0; z-index: 4 !important; padding: 0 10px; }
.ro-kgrid .ro-kh0 .tsb-add { float: right; text-decoration: none; color: var(--kvx-text); font-size: 20px; font-weight: 300; line-height: 1; }
.ro-kgrid .ro-kpay-h { width: 176px; text-align: right !important; font-weight: 600 !important; color: var(--kvx-text) !important; padding: 0 14px; }
.ro-ki { display: inline-grid; place-items: center; width: 15px; height: 15px; border: 1.5px solid var(--kvx-sub); border-radius: 50%; font-size: 10px; font-weight: 700; font-style: normal; color: var(--kvx-sub); vertical-align: -2px; margin-left: 4px; cursor: help; line-height: 1; }
.ro-kgrid thead tr.ro-ksum th { height: 40px; top: 52px; z-index: 3; }
.ro-kgrid thead tr.ro-ksum th.ro-kh0 { z-index: 4 !important; }
.ro-kgrid thead tr.ro-ksum .ro-kpay-h b { font-size: 16px; font-weight: 700; color: var(--kvx-text); font-variant-numeric: tabular-nums; }
.ro-kgrid .ro-kname { position: sticky; left: 0; z-index: 2; border-left: 0; padding: 10px; }
.ro-kgrid .ro-kname b { display: block; font-size: 14px; font-weight: 500; line-height: 21px; color: var(--kvx-text); }
.ro-kgrid .ro-kname small { display: block; font-size: 12.5px; line-height: 17px; color: var(--kvx-sub); }
.ro-kgrid .ro-kname .ro-kdep { text-transform: uppercase; }
.ro-kgrid .ro-kpay { text-align: right; padding: 10px 14px; }
.ro-kgrid .ro-kpay b { display: block; font-size: 14px; font-weight: 500; color: var(--kvx-text); font-variant-numeric: tabular-nums; line-height: 21px; }
.ro-kgrid .ro-kpay small { display: block; font-size: 12px; color: var(--kv-muted); margin-top: 2px; }
.ro-kgrid tbody tr[hidden] { display: none; }
.ro-kgrid td.ro-td, .ro-kgrid td.ro-std { padding: 6px 4px; cursor: pointer; position: relative; }
body.skin2 .ro-k .ro-kgrid .ro-chip { position: relative; display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: space-between; gap: 4px; width: 100%; min-height: 32px; margin: 0 0 4px; padding: 0 8px; border: 0; border-radius: 6px;
  background: #e6f4ea; color: #0a7a33; font-size: 14px; font-weight: 500; line-height: 1.25; text-align: left; box-shadow: none; white-space: normal; }
.ro-k .ro-kgrid .ro-chip.ro-col { border: 0 !important; }
.ro-k .ro-kgrid .ro-chip .chip-name { flex: 1; min-width: 0; text-align: left; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 6px 0; }
.ro-k .ro-kgrid .ro-chip .chip-time { display: none; }
.ro-k .ro-kgrid .ro-chip[hidden] { display: none; }
.ro-k .ro-kgrid .ro-chip.ro-off { background: var(--kvx-gray); color: var(--kvx-sub); }
.ro-k .ro-kgrid .ro-chip.ro-kv { background: transparent; color: var(--kvx-sub); border: 1px dashed var(--kvx-line) !important; }
body.skin2 .ro-k .ro-kgrid .ro-chip.ro-pend { flex-wrap: wrap; background: #fff8e6; color: #8a5a00; border: 1.5px dashed #e0a100 !important; padding: 2px 6px 4px 8px; }
html[data-theme="dark"] .ro-k .ro-kgrid .ro-chip.ro-pend { background: #2f2512; color: #ffd27a; }
.ro-k .ro-kgrid .ro-pend .ro-pend-act { margin: 0; gap: 4px; }
.ro-k .ro-kgrid .ro-pend .ro-ok, .ro-k .ro-kgrid .ro-pend .ro-no { padding: 1px 8px; font-size: 13px; }
.ro-k .ro-kgrid .ro-pend .chip-st { font-size: 11px; font-weight: 600; }
.ro-k .ro-kgrid .ro-x { flex: none; width: 20px; height: 20px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 4px; background: none; color: inherit; font-size: 12px; line-height: 1; cursor: pointer; opacity: 0; }
.ro-k .ro-kgrid .ro-chip:hover .ro-x, .ro-k .ro-kgrid .ro-chip:focus-within .ro-x { opacity: 1; }
.ro-k .ro-kgrid .ro-x:hover { background: rgba(0, 0, 0, .08); }
/* khung giờ ca khi rê chuột (như KiotViet) */
.ro-k .ro-kgrid .ro-chip[data-tip]:hover::after { content: attr(data-tip); position: absolute; left: 50%; bottom: calc(100% + 9px); transform: translateX(-50%); z-index: 30; white-space: nowrap;
  padding: 9px 14px; border-radius: 8px; background: var(--kv-surface); color: var(--kvx-text); font-size: 14px; font-weight: 400; box-shadow: 0 4px 18px rgba(0, 0, 0, .18); pointer-events: none; }
.ro-k .ro-kgrid .ro-chip[data-tip]:hover::before { content: ""; position: absolute; left: 50%; bottom: calc(100% + 3px); width: 12px; height: 12px; transform: translateX(-50%) rotate(45deg); background: var(--kv-surface); z-index: 31; pointer-events: none; }
.ro-k .ro-kgrid tbody tr:first-child .ro-chip[data-tip]:hover::after { bottom: auto; top: calc(100% + 9px); }
.ro-k .ro-kgrid tbody tr:first-child .ro-chip[data-tip]:hover::before { bottom: auto; top: calc(100% + 3px); }
.ro-k .ro-kgrid .ro-add { display: inline-flex; align-items: center; gap: 6px; width: auto; height: 24px; padding: 0 6px; margin: 2px 0 0; border: 0; background: none; color: var(--acc); font: inherit; font-size: 13px; cursor: pointer; opacity: 0; }
.ro-k .ro-kgrid .ro-add svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.ro-k .ro-kgrid td:hover > .ro-add, .ro-k .ro-kgrid .ro-add:focus-visible { opacity: 1; }
@media (hover: none) { .ro-k .ro-kgrid .ro-add, .ro-k .ro-kgrid .ro-x { opacity: 1; } .ro-k .ro-kgrid .ro-add .ro-add-t { display: none; } }
.ro-klegend .ro-sw { width: 14px; height: 14px; border-radius: 4px; margin: 0; }
.ro-klegend small { color: var(--kv-muted); font-size: 12.5px; }
/* hộp thêm người vào ca (Xem theo ca) */
.ro-add-q { width: 100%; height: 36px; border: 1px solid var(--kvx-line); border-radius: 8px; padding: 0 10px; font: inherit; margin-bottom: 8px; background: var(--kv-surface); color: var(--kvx-text); }
.ro-add-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 6px; max-height: 52vh; overflow: auto; }
.ro-add-it { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--kv-line); border-radius: 8px; cursor: pointer; margin: 0; }
.ro-add-it[hidden] { display: none; }
.ro-add-it input { width: 16px; height: 16px; accent-color: var(--acc); flex: none; }
.ro-add-it b { display: block; font-weight: 500; font-size: 14px; }
.ro-add-it small { display: block; color: var(--kv-muted); font-size: 12px; }
.ro-add-it.ro-add-has { opacity: .55; cursor: default; }
.ro-add-it:has(input:checked:not(:disabled)) { border-color: var(--acc); background: var(--acc-soft); }
@media (max-width: 760px) {
  .ro-kwrap { max-height: none; }
  .ro-k .ro-kgrid .ro-chip .chip-name { white-space: normal; overflow: visible; font-size: 13px; line-height: 1.25; padding: 5px 0; }
  .ro-k .ro-kgrid .ro-x { width: 18px; height: 18px; font-size: 11px; }
  .ro-kgrid { min-width: 900px; }
  .ro-kgrid .ro-kh0 { width: 128px; }
  .ro-kgrid .ro-kpay-h { width: 120px; }
  .ro-kgrid .ro-kname { padding: 8px; }
}

/* ================================================================ popup Chấm công "i chang KiotViet" (15/10/2026, mgr/ts-cc.ejs, khung data-frame-size="kv")
   Khung không thanh tiêu đề, trang tự vẽ "Chấm công" + ✕, cao theo nội dung (app.js nhận frame-h). Nhãn cột 110px, ô 34px bo 6px viền #D1D5DA,
   bảng tab Lịch sử / Phạt / Thưởng tiêu đề nền xám #F0F1F3, chân: Hủy · Đổi ca … Bỏ qua · Lưu. */
dialog.modal.frame-dlg.fd-kv { width: min(780px, calc(100vw - 24px)); height: min(560px, calc(100vh - 32px)); border-radius: 12px; }
.frame-dlg.fd-kv .modal-head { display: none; }
.frame-dlg.fd-kv .fd-body, .frame-dlg.fd-kv iframe { border-radius: 12px; background: var(--kv-surface); }
@media (max-width: 699px) { dialog.modal.frame-dlg.fd-kv { width: 100vw; height: 100% !important; border-radius: 0; } .frame-dlg.fd-kv .fd-body, .frame-dlg.fd-kv iframe { border-radius: 0; } }
html.embed:has(.kcc), html.embed body.skin2:has(.kcc) { background: var(--kv-surface); }
html.embed body.skin2 .p2:has(> .kcc) { padding: 0 !important; max-width: none; }
.kcc { display: flex; flex-direction: column; padding: 18px 22px 0; color: var(--kvx-text); font-size: 14px; }
.kcc-head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 14px; }
.kcc-ht { flex: 1; min-width: 0; }
.kcc-head h1 { margin: 0; font-size: 19px; font-weight: 700; line-height: 26px; color: var(--kvx-text); }
.kcc-sub { display: flex; flex-wrap: wrap; align-items: center; margin-top: 3px; font-size: 12.5px; color: var(--kvx-sub); }
.kcc-sub > span + span { border-left: 1px solid var(--kvx-line); margin-left: 10px; padding-left: 10px; }
.kcc-sub > .kcc-badge { border-left: 0; margin-left: 10px; padding: 2px 8px; border-radius: 4px; font-size: 12px; font-weight: 600; }
.kcc-badge.tsc-late { color: var(--tsc-late-nt); } .kcc-badge.tsc-ok { color: var(--tsc-ok-nt); } .kcc-badge.tsc-forgot { color: var(--tsc-forgot-nt); } .kcc-badge.tsc-miss { color: var(--tsc-miss-nt); }
.kcc-x { flex: none; display: grid; place-items: center; width: 32px; height: 32px; margin: -4px -8px 0 0; padding: 0; border: 0; border-radius: 6px; background: none; color: var(--kvx-text); cursor: pointer; }
.kcc-x svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.kcc-x:hover { background: var(--kvx-gray); }
.kcc-al { margin: 0 0 10px; }
.kcc-al[hidden] { display: none; }
.kcc-info { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 14px 12px; align-items: start; }
.kcc-l { font-weight: 500; color: var(--kvx-text); }
.kcc-info > .kcc-l { padding-top: 1px; }
.kcc-shift .kcc-sel { min-width: 300px; margin-top: -6px; }
.kcc-other { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 4px; font-size: 13px; }
.kcc-other a { color: var(--acc); text-decoration: none; }
.kcc-i { position: relative; display: inline-grid; place-items: center; width: 14px; height: 14px; margin-left: 3px; border: 1.3px solid var(--kvx-sub); border-radius: 50%; color: var(--kvx-sub); font-size: 9.5px; font-weight: 700; font-style: normal; line-height: 1; vertical-align: 0; cursor: help; }
.kcc-i[data-tip]:hover::after, .kcc-i[data-tip]:focus::after { content: attr(data-tip); position: absolute; left: 50%; top: calc(100% + 8px); transform: translateX(-30%); z-index: 50; width: 300px; padding: 8px 12px; border-radius: 6px;
  background: #1f2937; color: #fff; font-size: 12.5px; font-weight: 400; line-height: 1.45; text-align: left; white-space: normal; box-shadow: 0 4px 14px rgba(0, 0, 0, .2); }
.kcc-info textarea { width: 100%; min-height: 58px; padding: 8px 10px; border: 1px solid var(--kvx-line); border-radius: 8px; background: var(--kv-surface); color: var(--kvx-text); font: inherit; resize: vertical; }
.kcc-sel { height: 34px; max-width: 100%; padding: 0 28px 0 10px; border: 1px solid var(--kvx-line); border-radius: 6px; background-color: var(--kv-surface); color: var(--kvx-text); font: inherit; font-size: 14px; width: auto; }
.kcc-tabs { display: flex; gap: 28px; margin-top: 18px; border-bottom: 1px solid var(--kv-line); overflow-x: auto; }
.kcc-tabs a { padding: 8px 0 10px; margin-bottom: -1px; border-bottom: 2px solid transparent; color: var(--kvx-sub); font-weight: 500; text-decoration: none; white-space: nowrap; }
.kcc-tabs a.on { color: var(--acc); border-bottom-color: var(--acc); }
.kcc-tabs a:hover { color: var(--acc); }
.kcc-pane { padding: 16px 0 4px; }
.kcc-pane[hidden] { display: none; }
.kcc-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; min-height: 40px; margin-bottom: 4px; }
.kcc-row > .kcc-l { width: 110px; flex: none; }
.kcc-radios label { display: inline-flex; align-items: center; gap: 7px; margin: 0 16px 0 0; font-weight: 400; cursor: pointer; }
.kcc-radios input, .kcc-ck input { width: 16px; height: 16px; margin: 0; accent-color: var(--acc); flex: none; }
.kcc-ck { display: inline-flex; align-items: center; gap: 8px; margin: 0; cursor: pointer; }
.kcc-off > .kcc-l { color: var(--kvx-sub); }
.kcc-time { position: relative; display: inline-flex; align-items: center; }
.kcc-time input { width: 96px; height: 34px; padding: 0 28px 0 10px !important; border: 1px solid var(--kvx-line); border-radius: 6px; background: var(--kv-surface); color: var(--kvx-text); font: inherit; font-variant-numeric: tabular-nums; }
.kcc-time input:disabled { background: var(--kvx-gray); color: var(--kv-muted); }
.kcc-time svg { position: absolute; right: 8px; width: 15px; height: 15px; fill: none; stroke: var(--kvx-sub); stroke-width: 1.8; stroke-linecap: round; pointer-events: none; }
.kcc-dots { display: grid; place-items: center; width: 22px; height: 30px; padding: 0; border: 0; border-radius: 4px; background: none; color: var(--kvx-sub); cursor: pointer; }
.kcc-dots svg { width: 16px; height: 16px; fill: currentColor; }
.kcc-dots:hover { background: var(--kvx-gray); }
.kcc-day { min-width: 170px; }
.kcc-day[hidden] { display: none; }
.kcc-m { display: inline-flex; align-items: center; gap: 8px; margin-left: 8px; }
.kcc-m[hidden] { display: none; }
.kcc-n { width: 70px; height: 34px; padding: 0 8px; border: 1px solid var(--kvx-line); border-radius: 6px; background: var(--kv-surface); color: var(--kvx-text); font: inherit; text-align: center; font-variant-numeric: tabular-nums; }
.kcc-n:disabled { background: var(--kvx-gray); color: var(--kv-muted); }
.kcc-wait { color: var(--tsc-forgot-nt); font-weight: 600; font-size: 12.5px; }
.kcc-hint { margin: 4px 0 0; color: var(--kv-muted); font-size: 13px; }
.kcc-hint:empty { display: none; }
.kcc-ro { margin: 0 0 12px; padding: 8px 12px; border-radius: 8px; background: var(--kvx-gray); color: var(--kvx-sub); font-size: 13px; }
.kcc-tw { overflow-x: auto; }
.kcc-t { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13.5px; }
.kcc-t thead th { padding: 10px 12px; background: var(--kvx-gray); color: var(--kvx-text); font-size: 13px; font-weight: 600; text-align: left; white-space: nowrap; letter-spacing: 0; border: 0; }
.kcc-t thead th:first-child { border-radius: 8px 0 0 8px; } .kcc-t thead th:last-child { border-radius: 0 8px 8px 0; }
.kcc-t td { padding: 12px; border-bottom: 1px solid var(--kv-line); vertical-align: top; color: var(--kvx-text); }
.kcc-t .num { text-align: right; font-variant-numeric: tabular-nums; }
.kcc-t tr[hidden] { display: none; }
.kcc-adj td { padding: 8px 12px; vertical-align: middle; }
.kcc-ac { width: 42px; text-align: right; }
.kcc-in { width: 100%; height: 34px; padding: 0 10px; border: 1px solid var(--kvx-line); border-radius: 6px; background: var(--kv-surface); color: var(--kvx-text); font: inherit; }
.kcc-num { width: 96px; text-align: right; }
.kcc-del { display: grid; place-items: center; width: 30px; height: 30px; margin-left: auto; padding: 0; border: 0; border-radius: 6px; background: none; color: var(--kvx-sub); cursor: pointer; }
.kcc-del svg, .kcc-fb svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.kcc-del:hover { background: var(--kvx-gray); color: #e5262d; }
.kcc-addrow { margin: 10px 0 0; padding: 0; border: 0; background: none; color: var(--acc); font: inherit; font-weight: 600; cursor: pointer; }
.kcc-empty { padding: 22px !important; color: var(--kv-muted) !important; text-align: center; }
.kcc-pics { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-top: 8px; padding: 12px 0 4px; border-top: 1px dashed var(--kv-line); }
.kcc-pics > .kcc-l { width: 110px; }
.kcc-pic { display: flex; flex-direction: column; align-items: center; gap: 3px; color: var(--kvx-sub); font-size: 12px; text-decoration: none; }
.kcc-pic img { display: block; width: 64px; height: 64px; object-fit: cover; border: 1px solid var(--kv-line); border-radius: 8px; background: var(--kvx-gray); }
.kcc-pic:hover img { border-color: var(--acc); }
.kcc-swap { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 10px; padding: 12px; border-radius: 8px; background: var(--kvx-gray); }
.kcc-swap[hidden] { display: none; }
.kcc-swap-t { flex: 1 1 200px; color: var(--kvx-sub); font-size: 13px; }
.kcc-foot { position: sticky; bottom: 0; display: flex; align-items: center; gap: 4px; margin: 14px -22px 0; padding: 12px 22px; border-top: 1px solid var(--kv-line); background: var(--kv-surface); z-index: 5; }
.kcc-fb { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 10px; border: 0; border-radius: 6px; background: none; color: var(--kvx-text); font: inherit; font-weight: 500; text-decoration: none; cursor: pointer; }
.kcc-fb:hover { background: var(--kvx-gray); }
.kcc-fb:disabled { opacity: .5; cursor: default; }
.kcc-more { color: var(--kvx-sub); font-size: 13px; font-weight: 400; }
.kcc-sp { flex: 1; }
.kcc-btn { height: 38px; min-width: 74px; margin-left: 6px; border-radius: 8px; font-weight: 600; }
@media (max-width: 600px) {
  .kcc { padding: 14px 14px 0; }
  .kcc-info { grid-template-columns: 1fr; gap: 4px; }
  .kcc-info > :nth-child(2n) { margin-bottom: 8px; }
  .kcc-shift .kcc-sel { min-width: 0; width: 100%; margin-top: 0; }
  .kcc-row > .kcc-l { width: auto; min-width: 54px; }
  .kcc-radios > .kcc-l { width: 100%; }
  .kcc-m { margin-left: 0; }
  .kcc-tabs { gap: 20px; }
  .kcc-foot { flex-wrap: wrap; margin: 14px -14px 0; padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); }
  .kcc-more { order: 9; width: 100%; }
}

/* ================================================================ Nút nguồn dữ liệu chấm công KiotViet · Cả hai · Web (15/10/2026, partials/src-toggle.ejs) */
.srcx { display: inline-flex; align-items: center; height: 34px; padding: 2px; border: 1px solid var(--kvx-line); border-radius: 8px; background: var(--kv-surface); flex: none; }
.srcx-b { height: 28px; padding: 0 10px; border: 0; border-radius: 6px; background: none; color: var(--kvx-sub); font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.srcx-b:hover { color: var(--kvx-text); background: var(--kvx-gray); }
.srcx-b.on { background: var(--acc); color: var(--acc-on); cursor: default; }
dialog.modal.srcx-dlg { width: min(520px, calc(100vw - 24px)); }
.srcx-q { margin: 0 0 8px; font-size: 15px; }
.srcx-x { margin: 0 0 12px; color: var(--kvx-sub); font-size: 13.5px; line-height: 1.5; }
.srcx-from { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border-radius: 8px; background: var(--kvx-gray); }
.srcx-from label { display: flex; align-items: center; gap: 8px; margin: 0; font-weight: 400; cursor: pointer; }
.srcx-from input { width: 16px; height: 16px; accent-color: var(--acc); margin: 0; }
.srcx-n { margin: 12px 0 0; color: var(--kv-muted); font-size: 13px; line-height: 1.5; }

/* ================================================================ Bảng lương "i chang KiotViet" (mgr/payroll-kv.ejs) */
.kvp { display: flex; flex-direction: column; gap: 14px; }
.kvp .kvp-search input { width: 360px !important; padding-right: 34px !important; }
.kvp-filt { position: absolute; right: 10px; width: 18px; height: 18px; fill: none; stroke: var(--kvx-sub); stroke-width: 1.8; stroke-linecap: round; pointer-events: none; }
.kvp-cols .rm-list { min-width: 210px; }
.kvp-ci { gap: 10px !important; }
.kvp-ci input { width: 16px; height: 16px; accent-color: var(--acc); margin: 0; }
.kvp-body { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 12px; align-items: start; }
.kvp-side { display: flex; flex-direction: column; gap: 18px; padding: 14px 12px; border-radius: 8px; background: var(--kv-surface); position: sticky; top: 8px; }
.kvp-main { min-width: 0; background: var(--kv-surface); border-radius: 8px; }
.kvp-tw { overflow-x: auto; }
.kvp-t { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 14px; }
.kvp-t > thead th { padding: 12px 10px; background: var(--acc-soft); color: var(--kvx-text); font-size: 13.5px; font-weight: 600; text-align: left; white-space: nowrap; border: 0; letter-spacing: 0; }
.kvp-t th.num, .kvp-t td.num { text-align: right; font-variant-numeric: tabular-nums; }
.kvp-t > tbody > tr > td { padding: 13px 10px; border-bottom: 1px solid var(--kv-line); vertical-align: middle; color: var(--kvx-text); }
.kvp-t [hidden] { display: none !important; }
.kvp-c0 { width: 36px; }
.kvp-c0 input { width: 16px; height: 16px; accent-color: var(--acc); margin: 0; cursor: pointer; }
.kvp-sum td { font-weight: 600; }
.kvp-t > tbody > tr.kvp-sum > td { padding: 10px; }
.kvp-row { cursor: pointer; }
.kvp-row:hover > td { background: color-mix(in srgb, var(--kvx-gray) 60%, transparent); }
.kvp-row.on > td { background: var(--kvx-gray); border-top: 1px solid var(--acc); }
.kvp-row.on > td:first-child { border-left: 1px solid var(--acc); } .kvp-row.on > td:last-child { border-right: 1px solid var(--acc); }
.kvp-t > tbody > tr.kvp-det > td { padding: 0; border: 1px solid var(--acc); border-top: 0; background: var(--kv-surface); }
.kvp-d { padding: 4px 20px 16px; }
.kvp-d .kcc-tabs { margin-top: 0; }
.kvp-pane { padding-top: 16px; }
.kvp-pane[hidden] { display: none; }
.kvp-info { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px 24px; }
.kvp-info > div { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.kvp-info span { color: var(--kv-muted); font-size: 13px; }
.kvp-info b { font-weight: 500; color: var(--kvx-text); overflow-wrap: anywhere; }
.kvp-info .kvp-note { grid-column: span 2; }
.kvp-warn { margin: 16px 0 0; padding: 10px 12px; border-radius: 8px; background: color-mix(in srgb, var(--tsc-forgot-bg) 80%, transparent); color: var(--kvx-text); font-size: 13.5px; }
.kvp-kpi { margin-top: 14px; border: 1px solid var(--kv-line); border-radius: 8px; padding: 8px 12px; }
.kvp-kpi summary { cursor: pointer; font-weight: 600; font-size: 13.5px; }
.kvp-kpi-l { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 6px 16px; margin-top: 8px; font-size: 13px; }
.kvp-kpi-l div { display: flex; justify-content: space-between; gap: 8px; }
.kvp-kpi-l span { color: var(--kvx-sub); }
.kvp-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 20px; padding-top: 12px; border-top: 1px solid var(--kv-line); }
.kvp-foot form.inline { display: inline-flex; margin: 0; }
.kvp-upd { color: var(--kv-muted); font-size: 13px; }
.kvp-upd b { color: var(--kvx-sub); font-weight: 600; }
.kvp-sp { flex: 1; }
.kvp-a { color: var(--acc); text-decoration: none; }
.kvp-a:hover { text-decoration: underline; }
.kvp-slips td, .kvp-slips th { white-space: nowrap; }
.kvp-paybar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 12px; padding: 10px 12px; border-radius: 8px; background: var(--kvx-gray); font-size: 13.5px; }
.kvp-paybar label { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-weight: 500; }
.kvp-paybar .kvq-in { width: auto; height: 34px; }
.kvp-paybar input[name="note"] { flex: 1 1 160px; }
.kvp-time { width: 72px !important; }
.kvp-cx td, .kvp-cx { color: var(--kv-muted) !important; text-decoration: line-through; }
.kvp-x { padding: 2px 8px; border: 1px solid var(--kvx-line); border-radius: 6px; background: var(--kv-surface); color: var(--kvx-sub); font: inherit; font-size: 12.5px; cursor: pointer; }
.kvp-x:hover { border-color: #e5262d; color: #e5262d; }
.kvp-pg { display: flex; align-items: center; gap: 8px; padding: 10px; color: var(--kvx-sub); font-size: 13px; }
.kvp-pg .kvq-in { width: auto; height: 30px; }
@media (max-width: 900px) { .kvp-t { min-width: 880px; } .kvp-t > tbody > tr.kvp-row > td, .kvp-t > thead th { white-space: nowrap; } .kvp-body { grid-template-columns: 1fr; } .kvp-side { position: static; flex-direction: row; flex-wrap: wrap; } .kvp .kvp-search input { width: 100% !important; } .kvp-info { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .kvp-info { grid-template-columns: 1fr; } .kvp-info .kvp-note { grid-column: auto; } .kvp-d { padding: 4px 10px 12px; } }

/* ---------------------------------------------------------------- Phiếu lương cá nhân (mgr/payslip-kv.ejs, khung "kv") */
.kps .kcc-head h1 { font-size: 18px; }
.kps-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 40px; }
.kps-dl { display: grid; grid-template-columns: auto 1fr; gap: 12px 16px; margin: 0; align-content: start; font-size: 14px; }
.kps-dl dt { color: var(--kvx-sub); font-weight: 500; }
.kps-dl dt small { display: block; font-size: 11.5px; color: var(--kv-muted); font-weight: 400; }
.kps-dl dd { margin: 0; color: var(--kvx-text); }
.kps-money dd { text-align: right; font-variant-numeric: tabular-nums; }
.kps-dl .kps-note { color: var(--kv-muted); font-style: italic; font-weight: 400; }
.kps-big { font-size: 16px; }
.kps-link { padding: 0; border: 0; background: none; color: var(--acc); font: inherit; font-variant-numeric: tabular-nums; cursor: pointer; }
.kps-link:hover { text-decoration: underline; }
.kps-st { display: inline-block; padding: 1px 8px; border-radius: 4px; font-size: 12.5px; background: var(--tsc-future-bg); }
.kps-st.tsc-ok { background: var(--tsc-ok-bg); color: var(--tsc-ok-nt); } .kps-st.tsc-late { background: var(--tsc-late-bg); color: var(--tsc-late-nt); }
.kps-st.tsc-miss { background: var(--tsc-miss-bg); color: var(--tsc-miss-nt); } .kps-st.tsc-forgot { background: var(--tsc-forgot-bg); color: var(--tsc-forgot-nt); }
.kps-pays { display: flex; flex-direction: column; gap: 6px; margin-top: 16px; padding-top: 12px; border-top: 1px dashed var(--kv-line); font-size: 13.5px; }
.kps-pay { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.kps-pay span { flex: 1; color: var(--kvx-sub); }
.kps-pay form { margin: 0; }
dialog.kps-dlg { width: min(760px, calc(100vw - 24px)); max-height: calc(100vh - 40px); padding: 0; border: 0; border-radius: 12px; background: var(--kv-surface); color: var(--kvx-text); box-shadow: 0 20px 50px rgba(0, 0, 0, .25); overflow: auto; }
dialog.kps-dlg::backdrop { background: rgba(0, 0, 0, .35); }
.kps-dh { display: flex; align-items: flex-start; gap: 12px; padding: 18px 20px 10px; }
.kps-dh > div { flex: 1; }
.kps-dh b { display: block; font-size: 18px; font-weight: 700; }
.kps-dh small { display: block; margin-top: 4px; color: var(--kvx-sub); font-size: 13px; }
.kps-dlg .kcc-tw { padding: 0 20px; }
.kps-dlg .kcc-hint { padding: 0 20px; }
.kps-lv { margin: 6px 20px 12px; font-size: 14px; }
.kps-box { display: inline-block; min-width: 110px; padding: 6px 10px; border-radius: 6px; background: var(--kvx-gray); text-align: right; color: var(--kvx-sub); }
.kps-dlg td small { display: block; color: var(--kv-muted); font-size: 11.5px; }
.kps-det { color: var(--kvx-sub); font-size: 13px; }
.kps-df { display: flex; align-items: center; gap: 8px; margin-top: 12px; padding: 12px 20px; border-top: 1px solid var(--kv-line); }
.kps-df .btn { margin-left: 0; }
.kps-more { font-size: 13px; }
.kps-form { display: grid; grid-template-columns: 1fr; gap: 12px; padding: 4px 20px 0; }
.kps-form label { display: grid; grid-template-columns: 150px 1fr; align-items: center; gap: 12px; margin: 0; font-weight: 500; }
.kps-form b { text-align: left; font-size: 16px; }
.kps-dt { display: flex; gap: 8px; }
.kps-dt input[name="gio"] { width: 90px; }
@media (max-width: 600px) { .kps-grid { grid-template-columns: 1fr; gap: 16px; } .kps-form label { grid-template-columns: 1fr; gap: 4px; } }

/* ===================================================== Danh sách nhân viên "i chang KiotViet" (16/10/2026, views/pages/mgr/staff-kv.ejs + partials/staff-kv-tab.ejs) */
.kvs .tsb-btn { position: relative; }
.kvs-badge { position: absolute; top: -8px; right: -8px; display: grid; place-items: center; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; background: var(--kv-red); color: #fff; font-size: 11px; font-weight: 700; line-height: 1; }
.kvs-colgrid { display: grid !important; grid-template-columns: repeat(2, minmax(170px, 1fr)); min-width: 380px; }
.kvs-t th.kvs-cimg, .kvs-t td.kvs-cimg { width: 44px; padding-right: 0 !important; }
.kvs-t > tbody > tr > td.kvs-cimg { padding-top: 6px; padding-bottom: 6px; }
.kvs-av { display: inline-grid; place-items: end center; width: 26px; height: 26px; border-radius: 50%; background: var(--acc-soft); color: color-mix(in srgb, var(--acc) 70%, #fff); overflow: hidden; vertical-align: middle; }
.kvs-av svg { width: 76%; height: 76%; fill: currentColor; stroke: none; }
.kvs-av-lg { width: 64px; height: 64px; flex: none; }
.kvs-t td { white-space: nowrap; }
.kvs-t td.kvs-clip { max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
.kvs-t [hidden] { display: none !important; }
/* dòng đang mở: nền xám, khung chi tiết viền trái màu chủ đạo như KiotViet */
.kvs-t .kvp-row.on > td { background: var(--kvx-gray); border-top: 0; border-left: 0 !important; border-right: 0 !important; }
.kvs-t > tbody > tr.kvp-det > td { border: 0; border-left: 2px solid var(--acc); border-bottom: 2px solid var(--acc); }
.kvs-pane { min-height: 80px; }
.kvs-pane > .kcc-empty:only-child { padding: 28px 0; }
/* ô lọc kiểu thẻ */
.kvs-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; min-height: 36px; padding: 3px 6px; border: 1px solid var(--kvx-line); border-radius: 8px; background: var(--kv-surface); }
.kvs-chips:focus-within { border-color: var(--acc); }
.kvs-chip { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 3px 6px 3px 8px; border-radius: 4px; background: var(--acc); color: #fff; font-size: 13px; font-weight: 500; line-height: 1.3; }
.kvs-chip button { padding: 0; border: 0; background: none; color: inherit; font-size: 11px; font-weight: 700; cursor: pointer; line-height: 1; }
.kvs-chips select { flex: 1 1 20px; min-width: 20px; height: 28px; padding: 0 4px; border: 0; background: transparent; color: var(--kv-muted); font: inherit; font-size: 14px; outline: 0; appearance: none; -webkit-appearance: none; cursor: pointer; }
/* Thông tin */
.kvs-info { padding-top: 18px; }
.kvs-hd { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; }
.kvs-hd b { display: block; font-size: 17px; font-weight: 600; color: var(--kvx-text); }
.kvs-hd > div > span { display: block; margin-top: 6px; color: var(--kvx-sub); font-size: 13.5px; }
.kvs-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 26px; }
.kvs-f { display: flex; flex-direction: column; gap: 8px; padding: 10px 0 8px; border-bottom: 1px solid var(--kv-line); font-size: 14px; min-width: 0; }
.kvs-f > span { color: var(--kvx-sub); font-size: 13.5px; }
.kvs-f > b { min-height: 20px; font-weight: 400; color: var(--kvx-text); overflow-wrap: anywhere; }
.kvs-note { display: flex; align-items: center; gap: 6px; margin-top: 20px; font-size: 14px; color: var(--kvx-text); }
.kvs-note svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
.kvs-note b { font-weight: 400; }
/* Lịch làm việc */
.kvs-wk { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 16px 0 12px; }
.kvs-wkp { display: inline-flex; align-items: center; height: 34px; border: 1px solid var(--kvx-line); border-radius: 6px; background: var(--kv-surface); }
.kvs-wkp a { display: grid; place-items: center; width: 26px; height: 100%; color: var(--kvx-sub); text-decoration: none; font-size: 17px; }
.kvs-wkp a:hover { color: var(--acc); }
.kvs-wkp b { padding: 0 8px; border-left: 1px solid var(--kv-line); border-right: 1px solid var(--kv-line); line-height: 32px; font-weight: 500; font-size: 13.5px; color: var(--kvx-text); white-space: nowrap; }
.kvs-today { color: var(--acc); text-decoration: none; font-size: 13.5px; }
.kvs-cal { width: 100%; border-collapse: separate; border-spacing: 0; border: 1px solid var(--kv-line); border-radius: 8px; font-size: 14px; }
.kvs-cal th, .kvs-cal td { padding: 10px; border-right: 1px solid var(--kv-line); border-bottom: 1px solid var(--kv-line); color: var(--kvx-text); }
.kvs-cal tr > :last-child { border-right: 0; }
.kvs-cal tbody tr:last-child > td { border-bottom: 0; }
.kvs-cal th { font-weight: 400; text-align: center; white-space: nowrap; background: none; letter-spacing: 0; }
.kvs-cal th:first-child { text-align: left; width: 200px; font-weight: 600; font-size: 13px; }
.kvs-cal th i { display: inline-grid; place-items: center; min-width: 22px; height: 22px; margin-left: 6px; font-style: normal; font-weight: 600; }
.kvs-cal th.kvs-td { color: var(--acc); font-weight: 600; }
.kvs-cal th.kvs-td i { border-radius: 50%; background: var(--acc); color: #fff; }
.kvs-sh b { display: block; font-weight: 600; }
.kvs-sh small { color: var(--kvx-sub); font-size: 13px; }
.kvs-ck { text-align: center; vertical-align: middle; }
.kvs-tick { color: var(--acc); font-weight: 700; font-size: 15px; cursor: default; }
.kvs-lv { display: inline-block; padding: 2px 8px; border-radius: 10px; background: color-mix(in srgb, #f59e0b 16%, transparent); color: #b45309; font-size: 12px; white-space: nowrap; }
/* Thiết lập lương: các khung xếp dọc */
.kvs-pay { display: flex; flex-direction: column; gap: 14px; padding-top: 16px; }
.kvs-box { padding: 14px 14px 12px; border: 1px solid var(--kv-line); border-radius: 6px; font-size: 14px; color: var(--kvx-text); }
.kvs-box h4 { margin: 0 0 8px; font-size: 14px; font-weight: 600; letter-spacing: 0; color: var(--kvx-text); }
.kvs-box p { margin: 0 0 8px; } .kvs-box p:last-child { margin-bottom: 0; }
.kvs-box p b { font-weight: 600; margin-right: 4px; }
.kvs-na { color: var(--kv-muted); }
.kvs-box-t { padding: 0; } .kvs-box-t h4 { margin: 0; padding: 12px 14px; border-bottom: 1px solid var(--kv-line); } .kvs-box-t > :not(h4) { margin: 10px 14px 12px; }
.kvs-rows > div { display: grid; grid-template-columns: minmax(0, 280px) auto; gap: 12px; align-items: start; padding: 4px 0; }
.kvs-rows span small { display: block; color: var(--kv-muted); font-size: 12px; }
.kvs-rows b { font-weight: 500; font-variant-numeric: tabular-nums; }
/* Phiếu lương · Nợ */
.kcc-t th.num, .kcc-t td.num { text-align: right; font-variant-numeric: tabular-nums; }
.kvs-slips td, .kvs-ledger td { vertical-align: middle; white-space: nowrap; }
.kvs-slips [hidden] { display: none; }
.kvs-cnt { padding: 10px 2px 0; color: var(--kvx-sub); font-size: 13px; }
.kvs-mut { color: var(--kv-muted); }
/* chia trang */
.kvs-pg { flex-wrap: wrap; }
.kvs-pinfo { color: var(--kvx-sub); }
.kvs-pb { display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 1px solid var(--kvx-line); border-radius: 6px; background: var(--kv-surface); color: var(--kvx-sub); font: inherit; font-size: 16px; cursor: pointer; }
.kvs-pb:hover:not(:disabled) { border-color: var(--acc); color: var(--acc); }
.kvs-pb:disabled { opacity: .4; cursor: default; }
.kvs-pcur { min-width: 54px; text-align: center; font-weight: 600; color: var(--kvx-text); }
html.embed .st-backbar[data-list] { display: none; } /* form mở từ danh sách nhân viên trong popup: đã có ✕ */
@media (max-width: 1200px) { .kvs-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) { .kvs-t { min-width: 760px; } .kvs-t .kvp-d { position: sticky; left: 0; max-width: calc(100vw - 24px); box-sizing: border-box; } .kvs-colgrid { grid-template-columns: 1fr; min-width: 220px; } .kvs-side .kvq-g { flex: 1 1 160px; } }
@media (max-width: 560px) { .kvs-grid { grid-template-columns: 1fr; } }
.kvs-chip a { color: inherit; text-decoration: none; font-size: 11px; font-weight: 700; line-height: 1; }
.kvp-brc { max-width: 170px; white-space: normal !important; }

/* ================================================================ Giao diện gọn (19/10/2026) — public/notes.js
   ghi chú giải thích ẩn (đưa vào HDSD); bộ lọc trái gập trên điện thoại; thanh công cụ 1 dòng */
.n-off { display: none !important; }
.mf-btn { display: none; }
.tsb-row { display: contents; }
@media (max-width: 900px) {
  .kvp-body:not(.mf-open) > .kvp-side { display: none !important; }
  .mf-btn { display: flex; align-items: center; gap: 8px; width: 100%; padding: 9px 12px; margin: 0; border: 1px solid var(--kv-line); border-radius: 8px;
    background: var(--kv-surface); color: var(--kvx-text, var(--kv-text)); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; text-transform: capitalize; }
  .mf-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
  .mf-btn .mf-chev { margin-left: auto; transition: transform .15s; }
  .mf-open > .mf-btn .mf-chev { transform: rotate(180deg); }
  .mf-btn .mf-n { font-style: normal; min-width: 20px; height: 20px; line-height: 20px; padding: 0 6px; border-radius: 999px; background: var(--acc-soft); color: var(--acc); font-size: 12px; text-align: center; }
}
@media (max-width: 760px) {
  .tsb-bar .tsb-row { display: flex; flex: 1 1 100%; flex-wrap: nowrap; align-items: center; gap: 8px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; padding-bottom: 2px; }
  .tsb-bar .tsb-row::-webkit-scrollbar { display: none; }
  .tsb-bar .tsb-row > * { flex: none; margin: 0; }
  .tsb-bar .tsb-row > .tsb-sp { display: none; }
}

/* ================================================================ Dải tab dạng NÚT (19/10/2026, khách: "các thẻ menu nhỏ, nút cần có hiệu ứng nút hơn, chỉ gạch chân thì chưa nổi bật")
   Mọi dải tab (thanh tab trang con, tab trong trang, tab hộp Cần Duyệt, hồ sơ nhân viên, trang erp) = nút bo tròn có viền + bóng; rê chuột sáng màu;
   bấm lún nhẹ; tab đang chọn tô đặc màu giao diện (--acc). Thay kiểu gạch chân cũ. */
body.skin2 .t2-tabs-in { gap: 8px; padding: 10px 12px; align-items: center; }
body.skin2 :is(.subtabs, .tcc-tabs, .kvq-tabs, .kcc-tabs, .st-tabs, .tabs, .ctabs) { gap: 8px; border-bottom: 0; padding: 2px 2px 6px; background: none; box-shadow: none; overflow-x: auto; scrollbar-width: none; }
body.skin2 :is(.t2-tabs a, .subtabs a, .tcc-tabs a, .kvq-tabs a, .kcc-tabs a, .st-tabs a, .tabs a, .tabs button, .ctabs button) {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; margin: 0; padding: 7px 14px; border: 1px solid var(--kv-line); border-radius: 999px;
  background: var(--kv-surface); color: var(--kv-text); font-weight: 600; font-size: 14px; line-height: 1.2; text-decoration: none; white-space: nowrap; cursor: pointer;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .07); -webkit-tap-highlight-color: transparent;
  transition: background-color .15s, border-color .15s, color .15s, box-shadow .15s, transform .08s;
}
body.skin2 :is(.t2-tabs a, .subtabs a, .tcc-tabs a, .kvq-tabs a, .kcc-tabs a, .st-tabs a, .tabs a, .tabs button, .ctabs button):hover {
  border-color: var(--acc-line); background: var(--acc-soft); color: var(--acc); box-shadow: 0 2px 6px rgba(16, 24, 40, .1);
}
body.skin2 :is(.t2-tabs a, .subtabs a, .tcc-tabs a, .kvq-tabs a, .kcc-tabs a, .st-tabs a, .tabs a, .tabs button, .ctabs button):active { transform: scale(.96); box-shadow: none; }
body.skin2 :is(.t2-tabs a.on, .subtabs a.active, .subtabs a.on, .tcc-tabs a.on, .kvq-tabs a.on, .kcc-tabs a.on, .st-tabs a.on, .tabs .on, .ctabs button.on),
body.skin2 :is(.t2-tabs a.on, .subtabs a.active, .subtabs a.on, .tcc-tabs a.on, .kvq-tabs a.on, .kcc-tabs a.on, .st-tabs a.on, .tabs .on, .ctabs button.on):hover {
  background: var(--acc); border-color: var(--acc); color: var(--acc-on); font-weight: 700;
  box-shadow: 0 2px 8px color-mix(in srgb, var(--acc) 35%, transparent);
}
body.skin2 :is(.t2-tabs a, .subtabs a, .kvq-tabs a, .kcc-tabs a):focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }
@media (max-width: 760px) {
  body.skin2 .t2-tabs-in { gap: 6px; padding: 8px 10px; }
  body.skin2 :is(.t2-tabs a, .subtabs a, .tcc-tabs a, .kvq-tabs a, .kcc-tabs a, .st-tabs a, .tabs a, .tabs button, .ctabs button) { padding: 6px 12px; font-size: 13.5px; }
}
/* nút chọn dạng cụm (Hằng ngày / Hằng tuần, .seg) cùng kiểu: mục đang chọn tô đặc, bấm lún */
body.skin2 .tk-seg a { box-shadow: 0 1px 2px rgba(16, 24, 40, .07); transition: background-color .15s, border-color .15s, color .15s, transform .08s; }
body.skin2 .tk-seg a:active, body.skin2 .seg a:active, body.skin2 .seg button:active { transform: scale(.96); }
body.skin2 .tk-seg a.on, body.skin2 .seg a.active, body.skin2 .seg button.active { background: var(--acc); border-color: var(--acc); color: var(--acc-on); box-shadow: 0 2px 8px color-mix(in srgb, var(--acc) 35%, transparent); }
body.skin2 .tk-seg a.on small { color: inherit; opacity: .85; }

/* ================================================================ Theo dõi chấm công kiểu app KiotViet (22/10/2026, khách gửi ảnh + video app KiotViet)
   .cct = khối Tổng quan (erp-web): tab nút, 5 dòng tên · số · thanh dài, "Xem chi tiết". .ccx = Bảng chấm công dạng thẻ /ql/lich/nv + chi tiết /ql/lich/nv/:id:
   thẻ trắng bo 12px, dòng "Đi làm … ›", hộp Chọn nhân viên dưới màn hình (điện thoại) / giữa (máy tính), Bộ lọc toàn màn hình (điện thoại) / ngăn phải. */
body.skin2 .cct { margin-top: 10px; }
body.skin2 .cct h3 { margin-bottom: 4px; }
body.skin2 .cct-dd { position: relative; font-size: 13px; font-weight: 600; }
body.skin2 .cct-dd > summary { list-style: none; display: inline-flex; align-items: center; gap: 2px; height: 30px; padding: 0 8px 0 12px; border-radius: 999px; background: var(--kv-gray); color: var(--kv-text); cursor: pointer; }
body.skin2 .cct-dd > summary::-webkit-details-marker { display: none; }
body.skin2 .cct-dd > summary svg { width: 18px; height: 18px; fill: currentColor; }
body.skin2 .cct-ddl { position: absolute; right: 0; top: calc(100% + 4px); z-index: 30; min-width: 160px; padding: 6px; border-radius: 10px; background: var(--kv-surface); box-shadow: var(--kv-shadow); display: grid; }
body.skin2 .cct-ddl a { padding: 8px 10px; border-radius: 8px; color: var(--kv-text); text-decoration: none; font-weight: 500; }
body.skin2 .cct-ddl a:hover { background: var(--kv-surface-2); }
body.skin2 .cct-ddl a.on { color: var(--acc); font-weight: 700; }
body.skin2 .cct-tabs { margin: 8px 0 4px; }
body.skin2 .cct-pane { display: grid; }
body.skin2 .cct-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 6px 12px; padding: 9px 0; color: var(--kv-text); text-decoration: none; }
body.skin2 .cct-row:hover .cct-n { color: var(--acc); }
body.skin2 .cct-n { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14.5px; font-weight: 500; }
body.skin2 .cct-n em, body.skin2 .ccx-live { margin-left: 6px; padding: 1px 6px; border-radius: 6px; font-size: 11px; font-weight: 600; line-height: 1.5; font-style: normal; vertical-align: 1px;
  background: color-mix(in srgb, #1a7f37 14%, var(--kv-surface)); color: color-mix(in srgb, #1a7f37 85%, var(--kv-text)); }
body.skin2 .cct-v { font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
body.skin2 .cct-bar { grid-column: 1 / -1; height: 6px; border-radius: 999px; background: var(--kv-gray); overflow: hidden; }
body.skin2 .cct-bar i { display: block; height: 100%; border-radius: 999px; background: var(--acc); }
body.skin2 .cct-empty { padding: 34px 0; text-align: center; color: var(--kv-muted); }
body.skin2 .cct-more { display: block; margin-top: 6px; padding: 12px 0 2px; border-top: 1px solid var(--kv-line); text-align: center; color: var(--acc); font-weight: 600; text-decoration: none; }

body.skin2 .ccx { max-width: 1180px; margin: 0 auto; }
body.skin2 .ccx svg { flex: 0 0 auto; }
body.skin2 .ccx-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 2px 0 10px; }
body.skin2 .ccx-title { margin: 0; font-size: 20px; font-weight: 700; }
body.skin2 .ccx-views { display: inline-flex; gap: 6px; }
body.skin2 .ccx-views a, body.skin2 .ccx-back { width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid var(--kv-line); border-radius: 10px; background: var(--kv-surface); color: var(--kv-muted); cursor: pointer; }
body.skin2 .ccx-views a.on { background: var(--acc-soft); border-color: var(--acc-line); color: var(--acc); }
body.skin2 :is(.ccx-views, .ccx-back, .ccx-fbtn, .ccx-search) svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
body.skin2 .ccx-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 12px; }
body.skin2 .ccx-bar .rgb { margin: 0; }
body.skin2 .ccx-bar .rgb-sum { height: 34px; border-radius: 999px; border-color: transparent; background: var(--acc-soft); color: var(--acc); font-weight: 600; }
body.skin2 .ccx-bar .rgb-arrow { height: 34px; border-radius: 999px; }
body.skin2 .ccx-fbtn { position: relative; width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid var(--kv-line); border-radius: 50%; background: var(--kv-surface); color: var(--kv-text); cursor: pointer; }
body.skin2 .ccx-fbtn.on { border-color: var(--acc-line); color: var(--acc); }
body.skin2 .ccx-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--acc); }
body.skin2 .ccx-fbtn .ccx-dot { position: absolute; top: 4px; right: 4px; }
body.skin2 .ccx-pill { display: inline-flex; align-items: center; gap: 2px; height: 34px; max-width: 100%; padding: 0 8px 0 14px; border: 0; border-radius: 999px; background: var(--kv-gray); color: var(--kv-text); font-size: 13.5px; font-weight: 600; line-height: 1; cursor: pointer; }
body.skin2 .ccx-pill > svg { width: 18px; height: 18px; fill: currentColor; }
body.skin2 .ccx-pill select { appearance: none; -webkit-appearance: none; border: 0; background: transparent; color: inherit; font: inherit; padding: 0 2px 0 0; max-width: 220px; cursor: pointer; }
body.skin2 .ccx-active { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: -4px 0 12px; font-size: 12.5px; }
body.skin2 .ccx-active span { padding: 3px 8px; border-radius: 6px; background: var(--acc-soft); color: var(--acc); font-weight: 600; }
body.skin2 .ccx-active a { color: var(--kv-muted); }
body.skin2 .ccx-list { display: grid; gap: 10px; align-items: start; }
@media (min-width: 900px) { body.skin2 .ccx-list { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); } }
body.skin2 .ccx-card { border-radius: 12px; background: var(--kv-surface); overflow: hidden; }
body.skin2 .ccx-ch { padding: 12px 14px 10px; }
body.skin2 .ccx-ch b { display: block; font-size: 15px; font-weight: 600; }
body.skin2 .ccx-ch small { display: block; margin-top: 2px; color: var(--kv-muted); font-size: 12.5px; }
body.skin2 .ccx-row { display: flex; align-items: center; gap: 8px; padding: 11px 10px 11px 14px; border-top: 1px solid var(--kv-line); color: var(--kv-text); text-decoration: none; }
body.skin2 .ccx-row:hover { background: var(--kv-surface-2); }
body.skin2 .ccx-row > span { flex: 1; min-width: 0; font-size: 14px; }
body.skin2 .ccx-row > b { font-size: 14px; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
body.skin2 .ccx-chev { width: 18px; height: 18px; fill: none; stroke: var(--kv-muted); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
body.skin2 .ccx-empty { padding: 18px 14px 20px; border-top: 1px solid var(--kv-line); text-align: center; color: var(--kv-muted); font-size: 13.5px; }
body.skin2 .ccx-none { padding: 30px 10px; text-align: center; color: var(--kv-muted); }
/* Chọn nhân viên: hộp dưới màn hình */
body.skin2 dialog.ccx-sheet { position: fixed; inset: auto 0 0 0; width: 100%; max-width: 100%; max-height: 86vh; margin: 0; padding: 0; border: 0; border-radius: 16px 16px 0 0; background: var(--kv-surface); color: var(--kv-text); box-shadow: var(--kv-shadow); }
body.skin2 dialog.ccx-sheet::backdrop, body.skin2 dialog.ccx-full::backdrop { background: rgba(0, 0, 0, .4); }
body.skin2 dialog.ccx-sheet form { display: flex; flex-direction: column; max-height: 86vh; }
body.skin2 .ccx-sh-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 16px 16px 8px; font-size: 16px; }
body.skin2 .ccx-link { border: 0; background: none; padding: 4px 0; color: var(--acc); font-size: 13.5px; font-weight: 600; line-height: 1.3; cursor: pointer; }
body.skin2 .ccx-search { display: flex; align-items: center; gap: 8px; height: 38px; margin: 4px 16px 6px; padding: 0 10px; border-radius: 10px; background: var(--kv-gray); color: var(--kv-muted); }
body.skin2 .ccx-search input { flex: 1; min-width: 0; height: 100%; border: 0; background: transparent; color: var(--kv-text); font-size: 14px; outline: none; box-shadow: none; padding: 0; }
body.skin2 .ccx-opts { flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; }
body.skin2 .ccx-opt { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 16px; border-bottom: 1px solid var(--kv-line); cursor: pointer; font-size: 14.5px; }
body.skin2 .ccx-opt small { margin-left: 8px; color: var(--kv-muted); font-size: 12px; }
body.skin2 .ccx-opt input { width: 20px; height: 20px; accent-color: var(--acc); flex: 0 0 auto; }
body.skin2 .ccx-sh-foot { padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); }
body.skin2 .ccx-sh-foot .btn, body.skin2 .ccx-ff .btn { width: 100%; height: 42px; border-radius: 10px; justify-content: center; }
body.skin2 .ccx-apply:disabled { opacity: .45; cursor: not-allowed; }
/* Bộ lọc: toàn màn hình */
body.skin2 dialog.ccx-full { position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; border-radius: 0; background: var(--kv-bg); color: var(--kv-text); }
body.skin2 dialog.ccx-full form { display: flex; flex-direction: column; height: 100%; }
body.skin2 .ccx-fh { display: flex; align-items: center; gap: 8px; padding: 10px 12px; background: var(--kv-surface); font-size: 17px; }
body.skin2 .ccx-fh .ccx-back { border: 0; background: none; color: var(--kv-text); }
body.skin2 .ccx-fbody { flex: 1; min-height: 0; overflow: auto; display: grid; gap: 10px; align-content: start; padding: 12px; }
body.skin2 .ccx-fsec { padding: 12px 14px 14px; border-radius: 12px; background: var(--kv-surface); }
body.skin2 .ccx-fsec h3 { display: flex; align-items: center; gap: 6px; margin: 0 0 10px; font-size: 15px; font-weight: 600; }
body.skin2 .ccx-fsec h3 .ccx-link { margin-left: auto; }
body.skin2 .ccx-chips { display: flex; flex-wrap: wrap; gap: 6px; }
body.skin2 .ccx-chip { position: relative; cursor: pointer; }
body.skin2 .ccx-chip input { position: absolute; opacity: 0; pointer-events: none; }
body.skin2 .ccx-chip span { display: inline-block; padding: 6px 10px; border: 1px solid transparent; border-radius: 8px; background: var(--kv-gray); color: var(--kv-text); font-size: 13px; }
body.skin2 .ccx-chip input:checked + span { border-color: var(--acc-line); background: var(--acc-soft); color: var(--acc); font-weight: 600; }
body.skin2 .ccx-chip input:focus-visible + span { outline: 2px solid var(--acc); outline-offset: 1px; }
body.skin2 .ccx-ff { display: flex; gap: 10px; padding: 12px 12px calc(12px + env(safe-area-inset-bottom)); background: var(--kv-surface); }
@media (min-width: 700px) {
  body.skin2 dialog.ccx-sheet { inset: 0; width: min(460px, calc(100vw - 32px)); max-height: 80vh; margin: auto; border-radius: 14px; }
  body.skin2 dialog.ccx-sheet form { max-height: 80vh; }
  body.skin2 dialog.ccx-full { inset: 0 0 0 auto; width: min(440px, 100vw); box-shadow: var(--kv-shadow); }
}
/* chi tiết 1 nhân viên */
body.skin2 .ccx-head-emp { justify-content: flex-start; }
body.skin2 .ccx-head-emp .ccx-back { flex: 0 0 auto; }
body.skin2 .ccx-ht { min-width: 0; }
body.skin2 .ccx-ht small { display: block; margin-top: 2px; color: var(--kv-muted); font-size: 13px; }
body.skin2 .ccx-total { border-radius: 12px; background: var(--kv-surface); }
body.skin2 .ccx-total > summary { list-style: none; display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 2px 6px; padding: 12px 10px 12px 14px; cursor: pointer; }
body.skin2 .ccx-total > summary::-webkit-details-marker { display: none; }
body.skin2 .ccx-total > summary > span { font-size: 14.5px; font-weight: 600; }
body.skin2 .ccx-total > summary > b { font-size: 15px; font-weight: 700; text-align: right; }
body.skin2 .ccx-tchev { width: 18px; height: 18px; fill: none; stroke: var(--kv-muted); stroke-width: 2; transition: transform .15s; }
body.skin2 .ccx-total[open] .ccx-tchev { transform: rotate(180deg); }
body.skin2 .ccx-sub { grid-column: 1 / -1; color: var(--kv-muted); font-size: 12.5px; }
body.skin2 .ccx-tbody { padding: 0 14px 10px; }
body.skin2 .ccx-tbody > div { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; border-top: 1px dashed var(--kv-line); font-size: 13.5px; }
body.skin2 .ccx-days { margin-top: 4px; display: grid; gap: 0 10px; align-items: start; }
@media (min-width: 900px) { body.skin2 .ccx-days { grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); } }
body.skin2 .ccx-day h2 { margin: 14px 2px 6px; color: var(--kv-muted); font-size: 12px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; }
body.skin2 .ccx-shift { display: block; margin-bottom: 8px; padding: 12px 14px; border-radius: 12px; background: var(--kv-surface); color: var(--kv-text); text-decoration: none; }
body.skin2 a.ccx-shift:hover { box-shadow: 0 2px 8px rgba(16, 24, 40, .1); }
body.skin2 .ccx-s1 { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
body.skin2 .ccx-s1 b { font-size: 15px; font-weight: 600; }
body.skin2 .ccx-s1 span { font-size: 14px; font-weight: 600; text-align: right; }
body.skin2 .ccx-shift.live .ccx-s1 span { color: color-mix(in srgb, #1a7f37 85%, var(--kv-text)); }
body.skin2 .ccx-s2 { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 12px; margin-top: 6px; color: var(--kv-muted); font-size: 13px; font-variant-numeric: tabular-nums; }
body.skin2 .ccx-s3 { margin-top: 2px; color: var(--kv-muted); font-size: 12.5px; }
body.skin2 .ccx-s4 { display: flex; justify-content: flex-end; align-items: center; gap: 10px; margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--kv-line); font-size: 13.5px; }
body.skin2 .ccx-s4 > span:last-child { font-weight: 600; }
body.skin2 .ccx-st { margin-right: auto; padding: 1px 7px; border-radius: 6px; font-size: 12px; font-weight: 600;
  background: color-mix(in srgb, #c2410c 12%, var(--kv-surface)); color: color-mix(in srgb, #c2410c 85%, var(--kv-text)); }
body.skin2 .ccx-off .ccx-s1 b { color: var(--kv-muted); }
/* Bảng chấm công: "Xem theo nhân viên" trên điện thoại mở dạng thẻ, máy tính giữ bảng */
@media (min-width: 641px) { body.skin2 .ccx-narrow-only { display: none !important; } }
@media (max-width: 640px) { body.skin2 .ccx-wide-only { display: none !important; } }
@media (max-width: 480px) { body.skin2 .ccx-bar .rgb-arrow { display: none; } }
body.skin2 :is(.ccx-link, .ccx-back):focus:not(:focus-visible) { outline: none; }
body.skin2 :is(.ccx-opt, .ccx-day, .ccx-shift)[hidden] { display: none !important; }

/* ================================================================ 23/10/2026 — điện thoại bố cục như APP KiotViet (khách gửi video "clip dt kiot.mp4"):
   (1) trang con: thanh trắng "‹ Tên trang" + chi nhánh + chuông thay thanh logo (cùng markup .t2-in, lớp .t2-bar-sub); Tổng quan giữ thanh logo
   (2) dải "Có N yêu cầu xét duyệt · Xem ngay ✕" (Nhân viên · Lịch làm việc · Bảng chấm công)
   (3) nút Menu → trang "Khác" toàn màn hình: thẻ tài khoản, mỗi mục menu 1 thẻ 2 cột có biểu tượng, Cài Đặt Chung, Đăng xuất đỏ
   (4) Tổng quan (erp-web): ô chọn ngày · chi nhánh → thẻ doanh thu → 4 ô chọn nhanh (.ah), 3 thẻ KPI ẩn */
.t2-sub-back, .t2-sub-t { display: none; }
.t2-strip { display: flex; align-items: center; gap: 10px; max-width: 1800px; margin: 10px auto 0; padding: 8px 14px; border-radius: 10px; background: var(--acc-soft); color: var(--kv-text); font-size: 13.5px; }
.t2-strip b { font-weight: 700; }
.t2-strip a { margin-left: auto; color: var(--acc); font-weight: 600; text-decoration: none; white-space: nowrap; }
.t2-strip button { border: 0; background: none; color: var(--kv-muted); font-size: 15px; line-height: 1; cursor: pointer; padding: 2px 4px; }
.t2-strip.off { display: none; }
@media (max-width: 1800px) { .t2-strip { margin-left: 8px; margin-right: 8px; } }
@media (max-width: 640px) {
  .t2-strip { margin: 0; border-radius: 0; padding: 8px 12px; }
  .t2-bar-sub { padding: 0; }
  .t2-bar-sub .t2-in { height: 48px; border-radius: 0; background: var(--kv-surface); color: var(--kv-text); box-shadow: 0 1px 0 var(--kv-line); padding: 0 8px 0 2px; }
  .t2-bar-sub .t2-logo, .t2-bar-sub .t2-theme, .t2-bar-sub .t2-gear, .t2-bar-sub .t2-avp, .t2-bar-sub .t2-cc { display: none !important; }
  .t2-bar-sub .t2-sub-back { display: inline-flex; width: 40px; height: 40px; align-items: center; justify-content: center; color: var(--kv-text); border-radius: 50%; flex: none; }
  .t2-bar-sub .t2-sub-back .t2i { width: 24px; height: 24px; stroke-width: 2.2; }
  .t2-bar-sub .t2-sub-t { display: block; flex: 1 1 auto; min-width: 0; margin: 0; font-size: 18px; line-height: 24px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--kv-text); }
  .t2-bar-sub .t2-right { gap: 6px; }
  .t2-bar-sub .t2-btn { background: var(--kv-gray); color: var(--kv-text); }
  .t2-bar-sub .t2-btn .t2-cnt { border-color: var(--kv-surface); }
  .t2-bar-sub .t2-pop > .t2-dd { top: 52px; }
}
/* trang "Khác" (nút Menu thanh dưới) — ≤ 960px toàn màn hình, nền xám, thẻ trắng; thanh chọn nhanh dưới cùng vẫn hiện (z 90 > 85) để bấm Menu / Tổng quan đóng lại */
@media (max-width: 960px) {
  .t2-mnav { z-index: 85; }
  .t2-shade { display: none; }
  .t2-panel { width: 100%; background: var(--kv-bg); padding: 10px 10px calc(82px + env(safe-area-inset-bottom)); box-shadow: none; }
  html.t2-open, html.t2-open body { overflow: hidden; }
}
.t2-mc { background: var(--kv-surface); border-radius: 12px; padding: 2px 12px; margin-bottom: 10px; }
.t2-mc-t { font-size: 16px; line-height: 22px; font-weight: 600; padding: 12px 4px 4px; color: var(--kv-text); }
.t2-mc-cap { font-size: 12px; letter-spacing: .4px; color: var(--kv-muted); text-transform: uppercase !important; }
.t2-mg2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 8px; padding-bottom: 6px; }
.t2-mi { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 4px 4px; color: var(--kv-text); text-decoration: none; border-radius: 8px; font-size: 14px; line-height: 18px; font-weight: 500; }
.t2-mi.on { color: var(--acc); }
.t2-mi-i { width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center; background: var(--acc-soft); color: var(--acc); flex: none; }
.t2-mi-i .t2i { width: 20px; height: 20px; }
.t2-mi .t2-cnt, .t2-mrow .t2-cnt { margin-left: 0; flex: none; }
.t2-grow { flex: 1 1 auto; min-width: 0; }
.t2-mrow { display: flex; align-items: center; gap: 12px; min-height: 50px; padding: 6px 4px; color: var(--kv-text); text-decoration: none; border-top: 1px solid var(--kv-line); font-size: 15px; line-height: 20px; }
.t2-mc > .t2-mrow:first-child, .t2-mc-t + .t2-mrow, .t2-acct-h + .t2-mrow { border-top: 0; }
.t2-mrow > .t2i:first-child { color: var(--kv-label); width: 20px; height: 20px; }
.t2-mrow .t2-chev { color: var(--kv-muted); width: 18px; height: 18px; }
.t2-mrow.t2-out, .t2-mrow.t2-out > .t2i:first-child { color: #d1242f; font-weight: 600; }
.t2-mrow .t2-accs { padding: 0; margin: 0; border: 0; flex: none; }
.t2-acct-h { display: flex; align-items: center; gap: 12px; padding: 12px 4px; }
.t2-av2 { width: 48px; height: 48px; border-radius: 50%; background: var(--acc-soft); color: var(--acc); display: grid; place-items: center; font-weight: 700; font-size: 16px; flex: none; }
.t2-acct-n { flex: 1 1 auto; min-width: 0; }
.t2-acct-n b { display: block; font-size: 17px; line-height: 22px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.t2-acct-n small { display: block; color: var(--kv-muted); font-size: 13px; }
.t2-acct-e { width: 36px; height: 36px; border-radius: 50%; background: var(--kv-gray); color: var(--kv-text); display: grid; place-items: center; flex: none; }
.t2-acct-e .t2i { width: 18px; height: 18px; }
html[data-theme="dark"] .t2-mrow.t2-out, html[data-theme="dark"] .t2-mrow.t2-out > .t2i:first-child { color: #f2555a; }
/* Tổng quan erp-web trên điện thoại (.ah): máy tính ẩn */
.ah { display: none; }
@media (max-width: 640px) {
  .ah { display: block; margin-bottom: 10px; }
  .ah-chips { display: flex; gap: 8px; margin-bottom: 10px; }
  .ah-chips details { position: relative; min-width: 0; }
  .ah-chips summary { list-style: none; display: inline-flex; align-items: center; gap: 4px; max-width: 100%; height: 32px; padding: 0 10px 0 12px; border-radius: 999px; background: var(--kv-gray); color: var(--kv-text); font-size: 13.5px; font-weight: 500; cursor: pointer; white-space: nowrap; }
  .ah-chips summary > span { overflow: hidden; text-overflow: ellipsis; }
  .ah-chips summary::-webkit-details-marker { display: none; }
  .ah-chips summary.on, .ah-chips details[open] > summary { background: var(--acc-soft); color: var(--acc); }
  .ah-chips summary .t2i { width: 16px; height: 16px; flex: none; }
  .ah-dd { position: absolute; left: 0; top: calc(100% + 4px); z-index: 40; min-width: 210px; max-width: calc(100vw - 32px); max-height: 60vh; overflow: auto; padding: 8px; border-radius: 10px; background: var(--kv-surface); box-shadow: var(--kv-shadow); display: grid; gap: 2px; }
  .ah-dd > a { padding: 9px 10px; border-radius: 8px; color: var(--kv-text); text-decoration: none; }
  .ah-dd > a.on { color: var(--acc); font-weight: 700; background: var(--acc-soft); }
  .ah-dd-dt { min-width: min(330px, calc(100vw - 32px)); }
  .ah-dd-dt .dr-chips { display: flex; flex-wrap: wrap; gap: 6px; }
  .ah-dd-dt .dr-custom { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; align-items: center; }
  .ah-dd-dt .dr-custom label { display: flex; align-items: center; gap: 4px; font-size: 13px; }
  .ah-card { background: var(--kv-surface); border-radius: 12px; padding: 14px 16px 10px; }
  .ah-card > small { display: block; color: var(--kv-muted); font-size: 12.5px; line-height: 16px; }
  .ah-card > b { display: block; font-size: 28px; line-height: 36px; font-weight: 700; color: var(--acc); font-variant-numeric: tabular-nums; margin: 2px 0; }
  .ah-quick { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--kv-line); }
  .ah-quick a { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 4px 0; color: var(--kv-text); text-decoration: none; font-size: 12px; line-height: 14px; }
  .ah-quick .t2i { width: 24px; height: 24px; color: var(--acc); }
  .ah-quick .t2-cnt { position: absolute; top: -4px; left: calc(50% + 6px); margin: 0; }
  body.skin2.e2 .kpis, body.skin2.e2 .dr-m { display: none; }
  .t2-dup { display: none !important; } /* tiêu đề trong trang trùng chữ thanh "‹ Tên trang" (skin2.js gắn) */
}

/* Thẻ ca "đã chấm · chờ duyệt" trên Bảng chấm công kiểu KiotViet (sql/56, 23/10/2026): vàng chờ duyệt, viền nét đứt */
body.skin2 { --tsc-pend-bg: #fff8dc; --tsc-pend-fg: #5c4600; --tsc-pend-nt: #b08900; }
html[data-theme="dark"] body.skin2 { --tsc-pend-bg: #332a0c; --tsc-pend-fg: #ffe9a8; --tsc-pend-nt: #e8b730; }
@media (prefers-color-scheme: dark) { html:not([data-theme="light"]) body.skin2 { --tsc-pend-bg: #332a0c; --tsc-pend-fg: #ffe9a8; --tsc-pend-nt: #e8b730; } }
.tsc-pend { background: var(--tsc-pend-bg); color: var(--tsc-pend-fg); outline: 1.5px dashed var(--tsc-pend-nt); outline-offset: -1.5px; } .tsc-pend .tsc-s, .tsc-pend .tsc-w { color: var(--tsc-pend-nt); }
.tsl-pend { background: #d9a400; }
.tcc-badge.tsc-pend, .kcc-badge.tsc-pend, .kps-st.tsc-pend { color: var(--tsc-pend-nt); }