/* ui2.css (07/11/2026, theo skill evon:ui-ux, xem DESIGN.md) — lớp nền chung cho chamcong-web + erp-web: ô chọn, ô ngày, ô tích, thanh cuộn, chuyển động lớp nổi, và các sửa lỗi đo được.
   Nạp sau skin2.css. Chỉ đổi dáng, không đổi vai màu; mọi màu đi qua biến của skin2.css nên theo sáng / tối + màu tài khoản.
   Hoàn tác: gỡ thẻ link ui2.css + thẻ script ui2.js ở layout2.ejs và erp-web/views/layout.ejs. */

/* ---------------------------------------------------------------- ô chọn lúc đóng: mũi tên riêng thay mũi tên của hệ điều hành */
body.skin2 select:not([multiple]):not([size]):not(:is(.kvq-box, .kvs-chips, .ccx-pill) select) {
  appearance: none; -webkit-appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23677484' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center; background-size: 14px; padding-right: 30px;
}
body.skin2 select:not([multiple]):not([size]):not(:is(.kvq-box, .kvs-chips, .ccx-pill) select):disabled { background-image: none; padding-right: 12px; cursor: default; }
body.skin2 select[data-ui2-open], body.skin2 input[data-ui2-open] { border-color: var(--acc) !important; box-shadow: var(--focus-ring); }
/* ô chọn nằm trong khung có viền sẵn: sáng cả khung, không vẽ vòng thứ hai bên trong */
body.skin2 :is(.kvq-box, .kvs-chips, .ccx-pill) select[data-ui2-open] { box-shadow: none; border-color: transparent !important; }
body.skin2 :is(.kvq-box, .kvs-chips, .ccx-pill):has(select[data-ui2-open]) { border-color: var(--acc) !important; box-shadow: var(--focus-ring); }
body.skin2 :is(.kvq-box, .kvs-chips, .ccx-pill) select:focus { box-shadow: none; }
body.skin2 :is(.kvq-box, .kvs-chips, .ccx-pill):has(select:focus) { border-color: var(--acc) !important; box-shadow: var(--focus-ring); }

/* ---------------------------------------------------------------- ô ngày, ô tháng trên máy tính: biểu tượng lịch riêng, bấm ra lịch của app, vẫn gõ tay được */
@media (min-width: 761px) and (pointer: fine) {
  body.skin2 input:is([type="date"], [type="month"])::-webkit-calendar-picker-indicator { display: none; }
  body.skin2 input:is([type="date"], [type="month"]):not(:is(.tsb-pick) input) {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23677484' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M16 3v4M8 3v4M3 10h18'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 10px center; background-size: 16px; padding-right: 32px; cursor: pointer;
  }
  body.skin2 input:is([type="date"], [type="month"]):disabled { background-image: none; cursor: default; }
}

/* ô tháng: nhãn tiếng Việt đè lên phần chữ của trình duyệt */
.ui2-mwrap { position: relative; display: inline-flex; max-width: 100%; vertical-align: middle; }
.ui2-mwrap.full { display: flex; width: 100%; }
.ui2-mwrap > input { width: 100% !important; min-width: 0; }
.ui2-mwrap > input { color: transparent !important; -webkit-text-fill-color: transparent !important; }
.ui2-mwrap > input::-webkit-datetime-edit, .ui2-mwrap > input::-webkit-date-and-time-value { opacity: 0; }
.ui2-mlabel { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); pointer-events: none; color: var(--kv-text); font-size: 14px; line-height: 20px; white-space: nowrap; font-variant-numeric: tabular-nums; }
@media (pointer: coarse) { .ui2-mlabel { font-size: 16px; line-height: 24px; } }

/* ---------------------------------------------------------------- ô tích, ô tròn */
body.skin2 input:is([type="checkbox"], [type="radio"]):not(:is(.tk-dow, .pyf-seg, .ccx-chip, .switch, .tsb-pick) input) {
  appearance: none; -webkit-appearance: none; flex: none; width: 18px; height: 18px; min-height: 0; margin: 0; padding: 0; vertical-align: -4px; cursor: pointer;
  border: 1.5px solid var(--kv-input); background-color: var(--kv-surface); background-repeat: no-repeat; background-position: center;
  transition: background-color .12s, border-color .12s, border-width .12s;
}
body.skin2 input[type="checkbox"]:not(:is(.tk-dow, .pyf-seg, .ccx-chip, .switch, .tsb-pick) input) { border-radius: 5px; background-size: 14px; }
body.skin2 input[type="radio"]:not(:is(.tk-dow, .pyf-seg, .ccx-chip, .switch, .tsb-pick) input) { border-radius: 50%; }
body.skin2 input:is([type="checkbox"], [type="radio"]):not(:checked):not(:indeterminate):not(:disabled):hover { border-color: var(--kv-text); }
body.skin2 input[type="checkbox"]:checked:not(:is(.tk-dow, .pyf-seg, .ccx-chip, .switch, .tsb-pick) input) {
  background-color: var(--acc); border-color: var(--acc);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}
body.skin2 input[type="checkbox"]:indeterminate:not(:is(.tk-dow, .pyf-seg, .ccx-chip, .switch, .tsb-pick) input) {
  background-color: var(--acc); border-color: var(--acc);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E");
}
body.skin2 input[type="radio"]:checked:not(:is(.tk-dow, .pyf-seg, .ccx-chip, .switch, .tsb-pick) input) { border: 5.5px solid var(--acc); background-color: var(--acc-on); }
body.skin2 input:is([type="checkbox"], [type="radio"]):disabled { opacity: .5; cursor: not-allowed; }
body.skin2 input:is([type="checkbox"], [type="radio"]):focus-visible { outline: 0; box-shadow: var(--focus-ring); }
body.skin2 table input:is([type="checkbox"], [type="radio"]):not(:is(.tk-dow, .pyf-seg, .ccx-chip, .switch, .tsb-pick) input) { width: 16px; height: 16px; }
html[data-theme="dark"] body.skin2 input[type="checkbox"]:checked:not(:is(.tk-dow, .pyf-seg, .ccx-chip, .switch, .tsb-pick) input) {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b1220' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) body.skin2 input[type="checkbox"]:checked:not(:is(.tk-dow, .pyf-seg, .ccx-chip, .switch, .tsb-pick) input) {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b1220' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  }
}

/* ---------------------------------------------------------------- lớp nổi của ô chọn và ô ngày */
.ui2-pop {
  position: fixed; z-index: 3000; box-sizing: border-box; max-width: min(420px, calc(100vw - 16px)); background: var(--kv-surface); color: var(--kv-text);
  border: 1px solid var(--kv-line); border-radius: 12px; box-shadow: var(--sh-3); font-size: 14px; line-height: 20px; transform-origin: top left; animation: ui2-in .15s ease-out;
  transition: none; /* quy tắc giảm chuyển động ở skin2.css cho mọi phần tử chuyển tiếp 0,01ms: left, top đi từ 0 làm lớp nổi chớp ở góc màn */
}
.ui2-pop.ui2-up { transform-origin: bottom left; animation-name: ui2-in-up; }
.ui2-pop.ui2-out { animation: ui2-out .1s ease-in forwards; pointer-events: none; }
@keyframes ui2-in { from { opacity: 0; transform: translateY(-4px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes ui2-in-up { from { opacity: 0; transform: translateY(4px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes ui2-out { to { opacity: 0; transform: scale(.97); } }

.ui2-sel { display: flex; flex-direction: column; max-height: 368px; overflow: hidden; }
.ui2-find { display: flex; align-items: center; gap: 8px; flex: none; padding: 8px 12px; border-bottom: 1px solid var(--kv-line); color: var(--kv-muted); }
.ui2-find input, body.skin2 .ui2-find input { flex: 1; min-width: 0; width: 100%; min-height: 0 !important; height: 24px; padding: 0 !important; border: 0 !important; outline: 0 !important; box-shadow: none !important; background: transparent; color: var(--kv-text); font: inherit; }
.ui2-list { flex: 1 1 auto; min-height: 0; max-height: 332px; overflow-y: auto; overscroll-behavior: contain; padding: 4px; display: flex; flex-direction: column; gap: 2px; outline: 0; }
.ui2-opt { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 34px; padding: 6px 10px; border: 0; border-radius: 8px; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; flex: none; text-transform: inherit; }
.ui2-opt > span { min-width: 0; overflow-wrap: anywhere; }
.ui2-opt > svg { flex: none; color: var(--acc-ink); }
.ui2-opt.hl { background: var(--kv-surface-2); }
.ui2-opt.on { font-weight: 600; color: var(--acc-ink); }
.ui2-opt[disabled] { color: var(--kv-muted); opacity: .6; cursor: not-allowed; }
.ui2-opt[hidden], .ui2-grp[hidden] { display: none; }
.ui2-grp { padding: 8px 10px 4px; font-size: 12px; line-height: 16px; font-weight: 600; color: var(--kv-muted); flex: none; }
.ui2-none { padding: 16px 12px; text-align: center; color: var(--kv-muted); }
.ui2-none[hidden] { display: none; }

.ui2-cal { width: 296px; padding: 12px; }
.ui2-cal button { font: inherit; color: inherit; background: transparent; border: 0; cursor: pointer; text-transform: inherit; }
.ui2-cal-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.ui2-cal-t { display: inline-flex; align-items: center; gap: 4px; height: 32px; padding: 0 8px; border-radius: 8px; font-weight: 600 !important; }
.ui2-cal-t:hover:not(:disabled) { background: var(--kv-surface-2); }
.ui2-cal-t:disabled { cursor: default; }
.ui2-cal-n { display: inline-flex; gap: 4px; }
.ui2-cal-n button { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; color: var(--kv-muted); }
.ui2-cal-n button:hover { background: var(--kv-surface-2); color: var(--kv-text); }
.ui2-cal-g { display: grid; grid-template-columns: repeat(7, 1fr); row-gap: 2px; }
.ui2-dow { display: grid; place-items: center; height: 28px; font-size: 12px; color: var(--kv-muted); }
.ui2-day { position: relative; height: 36px; border-radius: 8px; font-variant-numeric: tabular-nums; }
.ui2-day:hover:not(:disabled):not(.on) { background: var(--kv-surface-2); }
.ui2-day.other { color: var(--kv-muted); }
.ui2-day.today { font-weight: 700; }
.ui2-day.today::after { content: ""; position: absolute; left: 50%; bottom: 4px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--acc); }
.ui2-day.on { background: var(--acc) !important; color: var(--acc-on) !important; font-weight: 600; }
.ui2-day.on.today::after { background: var(--acc-on); }
.ui2-day:disabled { color: var(--kv-muted); opacity: .4; cursor: not-allowed; }
.ui2-cal-m { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; min-height: 186px; align-content: start; }
.ui2-mo { height: 42px; border-radius: 8px; font-variant-numeric: tabular-nums; }
.ui2-mo:hover:not(:disabled):not(.on) { background: var(--kv-surface-2); }
.ui2-mo.today { font-weight: 700; color: var(--acc-ink); }
.ui2-mo.on { background: var(--acc) !important; color: var(--acc-on) !important; font-weight: 600; }
.ui2-mo:disabled { color: var(--kv-muted); opacity: .4; cursor: not-allowed; }
.ui2-cal-f { display: flex; justify-content: space-between; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--kv-line); }
.ui2-cal-f button { height: 32px; padding: 0 10px; border-radius: 8px; font-weight: 500; }
.ui2-cal-f button:hover { background: var(--kv-surface-2); }
.ui2-cal-f [data-act="today"] { color: var(--acc-ink); }

/* ---------------------------------------------------------------- thanh cuộn: 6px, ẩn tới khi rê hoặc cuộn; chiếm chỗ cố định nên nội dung không xô */
@media (pointer: fine) {
  body.skin2 *, html:has(body.skin2) { --ui2-thumb: transparent; }
  body.skin2 *:hover, html:has(body.skin2):hover { --ui2-thumb: color-mix(in srgb, var(--kv-text) 22%, transparent); }
  body.skin2 .is-scrolling, html.is-scrolling { --ui2-thumb: color-mix(in srgb, var(--kv-text) 34%, transparent); }
  body.skin2 ::-webkit-scrollbar, html:has(body.skin2)::-webkit-scrollbar { width: 6px; height: 6px; }
  body.skin2 ::-webkit-scrollbar-track, html:has(body.skin2)::-webkit-scrollbar-track { background: transparent; }
  body.skin2 ::-webkit-scrollbar-thumb, html:has(body.skin2)::-webkit-scrollbar-thumb { background: var(--ui2-thumb); border-radius: 999px; }
  body.skin2 ::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--kv-text) 45%, transparent); }
}

/* ---------------------------------------------------------------- chuyển động: hộp thoại và menu thả có vào, có ra */
@media (prefers-reduced-motion: no-preference) and (min-width: 761px) {
  body.skin2 dialog:is(.modal, .cmdk) {
    opacity: 0; scale: .96;
    transition: opacity .1s ease-in, scale .1s ease-in, overlay .1s allow-discrete, display .1s allow-discrete;
  }
  body.skin2 dialog:is(.modal, .cmdk)[open] {
    opacity: 1; scale: none; /* không dùng scale: 1: mọi giá trị khác none làm position: fixed bên trong tính theo hộp thoại, lớp nổi của ô chọn lệch chỗ */
    transition: opacity .15s ease-out, scale .15s ease-out, overlay .15s allow-discrete, display .15s allow-discrete;
  }
  @starting-style { body.skin2 dialog:is(.modal, .cmdk)[open] { opacity: 0; scale: .96; } }
  body.skin2 dialog:is(.modal, .cmdk)::backdrop { opacity: 0; transition: opacity .1s ease-in, overlay .1s allow-discrete, display .1s allow-discrete; }
  body.skin2 dialog:is(.modal, .cmdk)[open]::backdrop { opacity: 1; transition: opacity .15s ease-out, overlay .15s allow-discrete, display .15s allow-discrete; }
  @starting-style { body.skin2 dialog:is(.modal, .cmdk)[open]::backdrop { opacity: 0; } }

  body.skin2 :is(.t2-dd, .user-menu .menu) { animation: ui2-in .15s ease-out; transform-origin: top left; }
  body.skin2 details[open] > :is(.menu, .rm-menu, .row-menu-list, .ccx-pop, .rgb-pop) { animation: ui2-in .15s ease-out; }
}
@media (prefers-reduced-motion: reduce) {
  .ui2-pop, .ui2-pop.ui2-up, .ui2-pop.ui2-out { animation: none; }
}

/* ---------------------------------------------------------------- sửa lỗi đo được theo từng trang */
/* Duyệt Chấm Công Web trên điện thoại: ô chọn quá rộng làm cả trang cuộn ngang */
body.skin2 :is(.filter-bar, .form) label { min-width: 0; max-width: 100%; }
body.skin2 select { max-width: 100%; }
body.skin2 select:not([multiple]):not([size]) { text-overflow: ellipsis; }
@media (max-width: 760px) { body.skin2 .att-lookup label { flex: 1 1 100%; } body.skin2 .att-lookup select { width: 100%; } }

/* Chữ xám trên thẻ xanh Thu Nhập: gần như không đọc được */
body.skin2 .ic-hero .muted { color: inherit; opacity: 1; }

/* Nút Nhập Từ Excel: thẻ label làm chữ đen trên nền xanh */
body.skin2 label.btn-primary { color: var(--acc-on); }

/* Chữ màu nhấn trên nền nhạt, chữ mờ trên nền màu nhấn: đưa về đủ tương phản, giữ sắc */
body.skin2 a.link, body.skin2 :is(.ah-chips, .t2-dd) a.on:not(.dr-chip), body.skin2 .ss-net b, body.skin2 .sf-net { color: var(--acc-ink); }
body.skin2 .tk-seg a.on small, body.skin2 .att-io-time { opacity: 1; }
body.skin2 .rg-weeks a small { opacity: 1; }
body.skin2 .tk-wd.on :is(small, .tk-wn) { color: var(--acc-on); opacity: 1; }

/* Lịch tháng: dấu + gần như vô hình lúc thường; máy tính rê vào mới hiện, điện thoại luôn hiện, nhỏ lại để đỡ rối */
body.skin2 .ws-empty span { color: var(--kv-muted); font-size: 12px; }
@media (hover: hover) {
  body.skin2 .ws-empty span { opacity: 0; transition: opacity .12s; }
  body.skin2 .ws-empty:hover span, body.skin2 .ws-empty:focus-visible span { opacity: 1; color: var(--acc-ink); }
}

/* Vùng chạm điện thoại dưới 24px */
@media (pointer: coarse) {
  body.skin2 input:is([type="checkbox"], [type="radio"]):not(:is(.tk-dow, .pyf-seg, .ccx-chip, .switch, .tsb-pick) input) { width: 24px; height: 24px; }
  body.skin2 input[type="checkbox"]:not(:is(.tk-dow, .pyf-seg, .ccx-chip, .switch, .tsb-pick) input) { background-size: 18px; border-radius: 6px; }
  body.skin2 input[type="radio"]:checked:not(:is(.tk-dow, .pyf-seg, .ccx-chip, .switch, .tsb-pick) input) { border-width: 7px; }
  body.skin2 table input:is([type="checkbox"], [type="radio"]):not(:is(.tk-dow, .pyf-seg, .ccx-chip, .switch, .tsb-pick) input) { width: 24px; height: 24px; }
  body.skin2 a.small { display: inline-flex; align-items: center; min-height: 32px; white-space: nowrap; }
  body.skin2 :is(.qe-x, .tk-wnav) { min-width: 32px; min-height: 32px; display: inline-grid; place-items: center; }
}

/* Thiết Lập Lương: nút Sửa rớt xuống một dòng riêng, giữ đúng bên phải thẻ */
@media (min-width: 761px) {
  body.skin2 .rf-head { flex-wrap: nowrap; }
  body.skin2 .rf-head > :first-child { min-width: 0; }
}

/* Thiết Lập: nội dung sát menu trái ở mọi trang, không nhảy chỗ khi đổi mục */
/* gốc lỗi: .skin2 main.page.p2 { margin: 0 auto } đè .t2-setl main.page.p2 { margin: 0 } vì cùng độ ưu tiên mà đứng sau; ô lưới có margin auto tự co lại và ra giữa */
body.skin2 .t2-setl > main.page.p2 { margin: 0; }
body.skin2 .t2-setc > .container { margin-inline: 0; }

/* Mục trong menu ⋯ và menu thả dính sát nhau: cách 4px */
body.skin2 :is(.rm-list, .t2-dd) > :is(a, button, form, label) + :is(a, button, form, label) { margin-top: 4px; }

/* Hàng lọc: nút và ô cùng chiều cao */
@media (pointer: fine) {
  body.skin2 .filter-bar :is(input:not([type="checkbox"]):not([type="radio"]), select, .btn) { height: 34px; min-height: 34px; }
  body.skin2 .filter-bar { align-items: flex-end; }
}

/* Điện thoại: ô Vĩ Độ / Kinh Độ quá hẹp, gợi ý bị cắt */
@media (max-width: 760px) { body.skin2 .att-ll { flex-direction: column; align-items: stretch; } body.skin2 .att-ll input { width: 100%; min-width: 0; } }

/* Hàng cuộn ngang trên điện thoại: mờ mép phía còn mục */
body.skin2 .ui2-fade-r { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); }
body.skin2 .ui2-fade-l { -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(to left, #000 calc(100% - 28px), transparent); }
body.skin2 .ui2-fade-l.ui2-fade-r { -webkit-mask-image: linear-gradient(to right, transparent, #000 28px, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(to right, transparent, #000 28px, #000 calc(100% - 28px), transparent); }

/* Bảng báo cáo trên điện thoại: cột tên một dòng, đứng yên khi cuộn ngang */
@media (max-width: 760px) {
  body.skin2 .tw > table.t:not(.hh-the) :is(th, td):first-child {
    position: sticky; left: 0; z-index: 1; white-space: nowrap; background: var(--kv-surface); box-shadow: 1px 0 0 var(--kv-line);
  }
  body.skin2 .tw > table.t:not(.hh-the) thead th:first-child { background: var(--acc-soft); z-index: 2; }
  body.skin2 .tw > table.t:not(.hh-the) > tbody > tr:not(.det) > td { white-space: nowrap; }

  /* Hàng Hóa trên điện thoại: thẻ thay bảng 6 cột, đủ 6 thông tin; bấm thẻ vẫn mở chi tiết (tr.det) */
  body.skin2 table.t.hh-the { display: block; min-width: 0; width: 100%; }
  body.skin2 table.t.hh-the thead { display: none; }
  body.skin2 table.t.hh-the tbody { display: block; }
  body.skin2 table.t.hh-the tr:not(.hide) { display: block; }
  body.skin2 table.t.hh-the tr.row { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; gap: 2px 8px; padding: 10px 12px; border-bottom: 1px solid var(--kv-line); align-items: baseline; }
  body.skin2 table.t.hh-the tr.row > td { display: block; padding: 0; border: 0; background: none; white-space: normal; font-size: 13px; color: var(--kv-muted); }
  body.skin2 table.t.hh-the tr.row > td:nth-child(2) { grid-column: 1 / 4; grid-row: 1; font-size: 14px; font-weight: 600; color: var(--kv-text); }
  body.skin2 table.t.hh-the tr.row > td:nth-child(5) { grid-column: 4; grid-row: 1; font-size: 14px; font-weight: 600; color: var(--kv-text); text-align: right; }
  body.skin2 table.t.hh-the tr.row > td:nth-child(1) { grid-column: 1; grid-row: 2; }
  body.skin2 table.t.hh-the tr.row > td:nth-child(3) { grid-column: 2; grid-row: 2; }
  body.skin2 table.t.hh-the tr.row > td:nth-child(4) { grid-column: 3; grid-row: 2; }
  body.skin2 table.t.hh-the tr.row > td:nth-child(6) { grid-column: 4; grid-row: 2; text-align: right; }
  body.skin2 table.t.hh-the tr.det > td { display: block; }
}

/* Menu chọn chi nhánh trên điện thoại: tên một dòng; canh theo mép phải nút để menu rộng hơn mà không lòi màn */
body.skin2 .ah-chips details + details .ah-dd:not(.ah-dd-dt) { left: auto; right: 0; width: max-content; }
body.skin2 .ah-dd:not(.ah-dd-dt) > a { white-space: nowrap; }

/* Hồ Sơ Lương: mỗi dòng đã có số và nhãn xanh, bỏ viền trái trang trí. Dòng thiếu ngày vào làm giữ viền đỏ vì đó là cảnh báo; bù 3px để cột vẫn thẳng hàng */
body.skin2 .prow:not(.prow-warn) { border-left-width: 1px; border-left-color: var(--border); padding-left: 17px; }
@media (max-width: 699px) { body.skin2 .prow:not(.prow-warn) { padding-left: 15px; } }

/* Nền rê yếu: pha màu chữ vào màu thẻ, nên đậm hơn rõ một bậc ở cả nền sáng và nền tối */
body.skin2 :is(.remind, .ccx-row, .tk-wnav, .tsb-caret, .ro-add, .ws .sticky a.link):hover { background-color: color-mix(in srgb, var(--kv-text) 12%, var(--kv-surface)); }

/* ---------------------------------------------------------------- giao diện tối
   Mã màu viết cho nền sáng làm chữ chìm trên nền tối. Đổi qua biến: fallback trong var() là đúng giá trị cũ của nền sáng, nên nền sáng không đổi. */
html[data-theme="dark"] { color-scheme: dark; }
@media (prefers-color-scheme: dark) { html:not([data-theme="light"]) { color-scheme: dark; } }
body.skin2 { --u2-on-status: #fff; }
html[data-theme="dark"] body.skin2 {
    --danger: #f87171; --ok: #4ade80; --warn: #fb923c; --off: #9aa4b1; --pending: #fbbf24; --u2-on-status: #0b1220;
    --u2-danger: #f87171; --u2-danger-line: #7f2a2e; --u2-ghost: var(--kv-text); --u2-ghost-line: var(--kv-input); --u2-sun: #fca5a5; --u2-legend: var(--kv-text); --u2-att-out: var(--kv-muted);
    --u2-sf-ok: #4ade80; --u2-sf-work: #7fb0ff; --u2-sf-warn: #fbbf24; --u2-sf-bad: #f87171;
}
@media (prefers-color-scheme: dark) { html:not([data-theme="light"]) body.skin2 {
    --danger: #f87171; --ok: #4ade80; --warn: #fb923c; --off: #9aa4b1; --pending: #fbbf24; --u2-on-status: #0b1220;
    --u2-danger: #f87171; --u2-danger-line: #7f2a2e; --u2-ghost: var(--kv-text); --u2-ghost-line: var(--kv-input); --u2-sun: #fca5a5; --u2-legend: var(--kv-text); --u2-att-out: var(--kv-muted);
    --u2-sf-ok: #4ade80; --u2-sf-work: #7fb0ff; --u2-sf-warn: #fbbf24; --u2-sf-bad: #f87171;
} }
/* Biến trạng thái sáng lên ở nền tối, nên nhãn có nền trạng thái phải đổi chữ trắng thành chữ tối */
body.skin2 :is(.quick-btn .pill, .pill-danger, .att-big-ico, .pk-banner-ico, .ro-x:hover, .ro-ok, .ro-no, .ui-pop .pop-ok.btn-danger, b.bal-tag.b-neg, b.bal-tag.b-absent, b.bal-tag.b-pending, .ws .chip-st, .qchip.q-ok:hover, .qchip.q-no:hover, .pc-bad .pc-ic, .tk-overdue .tk-when, .tk-missed .tk-when, .tr-alert-n, .dash-attn-n, .tr-group.g-todo span, .tr-group.g-over span, .lf-chips .qchip.q-no.on, .lf-chips .qchip.q-ok.on) { color: var(--u2-on-status); }
body.skin2 .tr-steps li.done::before { color: var(--u2-on-status); }
/* Chữ trên nền màu nhấn đặc: --acc-on (trắng ở nền sáng, tối ở nền tối) */
body.skin2 :is(.btn.pri, .pager span.cur, .seg a.on, .dr-chip.on) { color: var(--acc-on); }
body.skin2 .btn-danger { color: var(--u2-danger, #d1242f); border-color: var(--u2-danger-line, #f5c2c4); }
body.skin2 .btn.ghost { color: var(--u2-ghost, #3e464f); border-color: var(--u2-ghost-line, #d1d5da); }
body.skin2 .matrix thead th.sun { color: var(--u2-sun, #d1242f); }
body.skin2 .kvx .tsb-legend { color: var(--u2-legend, #333); }
body.skin2 .att-io-btn.att-out:not(.sug) { color: var(--u2-att-out, var(--c)); }
body.skin2 .sf-st.st-ok { color: var(--u2-sf-ok, #226a35); }
body.skin2 .sf-st.st-work { color: var(--u2-sf-work, #1d5fc2); }
body.skin2 .sf-st.st-warn { color: var(--u2-sf-warn, #a35f00); }
body.skin2 .sf-st.st-bad { color: var(--u2-sf-bad, #c22a2a); }
html[data-theme="dark"] body.skin2 :is(input, textarea)::placeholder { color: var(--kv-muted); opacity: 1; }
html[data-theme="dark"] body.skin2 .ccx-live { color: #4ade80; }
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) body.skin2 :is(input, textarea)::placeholder { color: var(--kv-muted); opacity: 1; }
  html:not([data-theme="light"]) body.skin2 .ccx-live { color: #4ade80; }
}