/* Pet’s Home — giao diện quản lý kiểu KiotViet: thanh menu nâu thương hiệu, bộ lọc bên trái, bảng dữ liệu, chi tiết mở ngay dưới dòng */
:root {
  /* Design tokens Pet’s Home — lấy theo màu logo: nâu đậm (nền logo), nâu vàng (chó), xanh lá (mèo), vàng ánh kim (viền).
     Toàn bộ màu của giao diện chỉ khai báo ở đây; component chỉ dùng var(--…). */
  --brand: #3a2619; --brand-dark: #24170f; --brand-deep: #1a100a; --brand-soft: #f4ece3;
  --accent: #74c15f; --accent-dark: #4f9a3e; --gold: #c99a3d; --gold-soft: #f7ecd2; --tan: #ae8350;
  --bg: #f3efea; --panel: #fff; --line: #e4dcd3; --line-soft: #efe9e2; --line-strong: #cbbfb2; --text: #2a1d15; --muted: #7a6b60;
  --ok: #3a8f36; --ok-dark: #2e7429; --ok-soft: #e6f4e2; --warn: #b26a00; --warn-soft: #fff1da; --bad: #c0392b; --bad-soft: #fbe9e7;
  --radius: 8px; --shadow: 0 1px 2px rgba(42, 29, 21, .06), 0 1px 3px rgba(42, 29, 21, .09);
  --font: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  --on-brand: #fff; --primary: var(--brand); --secondary: var(--tan); --surface: #fff; --surface-muted: #faf7f3; --text-primary: var(--text); --text-secondary: #5c4c41;
  --border: var(--line); --success: var(--ok); --warning: var(--warn); --danger: var(--bad);
  --neutral-soft: #f0ebe5; --th-bg: #f4ece3; --th-text: #4a372a; --sum-bg: #fff8e6; --row-hover: #faf6f1;
  --on-brand-fill: rgba(255,255,255,.12); --on-brand-hover: rgba(255,255,255,.14); --on-brand-line: rgba(255,255,255,.28); --on-brand-soft: rgba(255,255,255,.08);
  /* Mệnh giá tiền (màu gần tờ tiền thật để nhận nhanh) */
  --n500: #d7ecef; --n200: #f1dfd2; --n100: #dfeccf; --n50: #f4dbe6; --n20: #d9e4f3; --n10: #efe6c8; --n5: #e3dcef; --n2: #e6e1dc; --n1: #eee7da;
  --gold-dark: #9c7426; --hero-grad: linear-gradient(160deg, #fffdf9 0%, #f7efe3 100%);
  --overlay: rgba(26, 16, 10, .5); --focus-ring: rgba(116,193,95,.28); --shadow-pop-color: rgba(42,29,21,.18); --shadow-lg-color: rgba(26,16,10,.3);
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--bg); color: var(--text); font: 14px/1.45 var(--font); -webkit-font-smoothing: antialiased; }
a { color: var(--brand); text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
.boot { padding: 40px; text-align: center; color: var(--muted); }
.muted { color: var(--muted); }
.num, td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.nowrap { white-space: nowrap; }
.hidden { display: none !important; }

/* ===== Thanh trên ===== */
.topbar { background: var(--brand); color: var(--on-brand); position: sticky; top: 0; z-index: 30; box-shadow: 0 1px 0 var(--line-soft); }
.topbar-in { display: flex; align-items: center; gap: 8px; height: 52px; padding: 0 16px; max-width: 1600px; margin: 0 auto; }
.logo { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 17px; color: var(--on-brand); margin-right: 12px; white-space: nowrap; }
.logo svg { width: 28px; height: 28px; }
.nav { display: flex; gap: 2px; flex: 1; min-width: 0; }
.nav-item { position: relative; }
.nav-btn { background: none; border: 0; color: var(--on-brand); padding: 8px 12px; border-radius: 6px; cursor: pointer; display: flex; align-items: center; gap: 6px; white-space: nowrap; font-weight: 500; }
.nav-btn:hover, .nav-item.open > .nav-btn, .nav-btn.active { background: var(--on-brand-hover); }
.nav-btn .caret { font-size: 10px; opacity: .8; }
.dropdown { position: absolute; top: calc(100% + 4px); left: 0; background: var(--surface); color: var(--text); border-radius: var(--radius); box-shadow: 0 8px 24px var(--shadow-pop-color); min-width: 200px; padding: 6px; display: none; z-index: 40; }
.nav-item.open .dropdown { display: block; }
.dropdown a, .dropdown button { display: block; width: 100%; text-align: left; padding: 8px 10px; border-radius: 6px; color: var(--text); background: none; border: 0; cursor: pointer; }
.dropdown a:hover, .dropdown button:hover { background: var(--brand-soft); color: var(--brand-dark); }
.dropdown .sep { height: 1px; background: var(--line); margin: 4px 0; }
.top-right { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.retailer-select { background: var(--on-brand-fill); color: var(--on-brand); border: 1px solid var(--on-brand-line); border-radius: 6px; padding: 5px 8px; max-width: 200px; }
.retailer-select option { color: var(--text); }
.menu-toggle { display: none; background: none; border: 0; color: var(--on-brand); font-size: 22px; padding: 4px 8px; cursor: pointer; }

/* ===== Bố cục trang ===== */
.page { max-width: 1600px; margin: 0 auto; padding: 16px; }
.page-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.page-head h1 { font-size: 20px; margin: 0; font-weight: 650; }
.page-head .spacer { flex: 1; }
.layout { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 16px; align-items: start; }
.panel { background: var(--panel); border-radius: var(--radius); box-shadow: var(--shadow); }
.panel-pad { padding: 14px 16px; }

/* ===== Bộ lọc ===== */
.filters { display: flex; flex-direction: column; gap: 10px; position: sticky; top: 68px; max-height: calc(100vh - 84px); overflow: auto; padding-bottom: 4px; }
.fcard { background: var(--panel); border-radius: var(--radius); box-shadow: var(--shadow); padding: 10px 12px; }
.fcard h4 { margin: 0 0 8px; font-size: 13px; font-weight: 650; display: flex; justify-content: space-between; }
.fcard select, .fcard input[type=text], .fcard input[type=number], .fcard input[type=date] { width: 100%; }
.fcard label.radio { display: flex; align-items: center; gap: 8px; padding: 3px 0; cursor: pointer; }
.fcard .dates { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 6px; }
.fcard .dates input { min-width: 0; padding: 5px 6px; font-size: 13px; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.chip { background: var(--brand-soft); color: var(--brand-dark); border-radius: 999px; padding: 3px 4px 3px 10px; display: inline-flex; align-items: center; gap: 4px; font-size: 13px; }
.chip button { border: 0; background: none; cursor: pointer; color: inherit; padding: 0 6px; font-size: 15px; line-height: 1; }
.btn.filter-toggle { display: none; }

/* ===== Điều khiển ===== */
input[type=text], input[type=search], input[type=number], input[type=date], input[type=email], input[type=password], input[type=datetime-local], select, textarea {
  border: 1px solid var(--line); border-radius: 6px; padding: 7px 9px; background: var(--surface); outline: none; min-width: 0;
}
input:focus, select:focus, textarea:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--focus-ring); }
textarea { width: 100%; min-height: 64px; resize: vertical; }
.btn { border: 1px solid var(--line); background: var(--surface); color: var(--text); padding: 7px 14px; border-radius: 6px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; font-weight: 500; }
.btn:hover { border-color: var(--line-strong); background: var(--surface-muted); }
.btn.primary { background: var(--ok); border-color: var(--ok); color: var(--on-brand); }
.btn.primary:hover { background: var(--ok-dark); }
.btn.blue { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
.btn.blue:hover { background: var(--brand-dark); }
.btn.danger { color: var(--bad); }
.btn.small { padding: 4px 10px; font-size: 13px; }
.btn.link { border: 0; background: none; color: var(--brand); padding: 4px 6px; }
.btn:disabled { opacity: .55; cursor: default; }
.search { position: relative; flex: 1 1 320px; max-width: 520px; }
.search input { width: 100%; padding-left: 34px; }
.search::before { content: ""; position: absolute; left: 11px; top: 50%; width: 12px; height: 12px; border: 2px solid var(--muted); border-radius: 50%; transform: translateY(-62%); }
.search::after { content: ""; position: absolute; left: 22px; top: 58%; width: 6px; height: 2px; background: var(--muted); transform: rotate(45deg); }

/* ===== Bảng ===== */
.table-wrap { overflow-x: auto; }
table.grid { width: 100%; border-collapse: collapse; }
.grid th { background: var(--th-bg); color: var(--th-text); font-weight: 600; text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; position: relative; user-select: none; }
.grid th.num { text-align: right; }
.grid th.sortable { cursor: pointer; }
.grid th.sortable:hover { color: var(--brand-dark); }
.grid th .arrow { font-size: 10px; margin-left: 4px; color: var(--brand); }
.grid td { padding: 9px 10px; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
.grid tr.row { cursor: pointer; }
.grid tr.row:hover td { background: var(--row-hover); }
.grid tr.row.open td { background: var(--brand-soft); border-bottom-color: transparent; }
.grid tr.sum td { background: var(--sum-bg); font-weight: 650; border-bottom: 1px solid var(--line); }
.grid td.wide { min-width: 200px; }
.grid td.long { max-width: 360px; white-space: normal; color: var(--muted); font-size: 13px; }
.grid tr.detail > td { background: var(--surface); padding: 0; border-bottom: 2px solid var(--brand); }
.grid.mini th { background: var(--surface-muted); font-size: 13px; padding: 7px 8px; }
.grid.mini td { font-size: 13px; padding: 7px 8px; }
.empty { padding: 40px; text-align: center; color: var(--muted); }
.pager { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border-top: 1px solid var(--line-soft); flex-wrap: wrap; }
.pager .pages { display: flex; gap: 4px; align-items: center; }
.pager select { padding: 4px 6px; }
.badge { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 600; background: var(--neutral-soft); color: var(--text-secondary); white-space: nowrap; }
.badge.ok { background: var(--ok-soft); color: var(--ok); }
.badge.warn { background: var(--warn-soft); color: var(--warn); }
.badge.bad { background: var(--bad-soft); color: var(--bad); }
.badge.blue { background: var(--brand-soft); color: var(--brand-dark); }
.due-over { color: var(--bad); font-weight: 600; }
.due-soon { color: var(--warn); font-weight: 600; }
.colpick { position: relative; }
.colpick .dropdown { right: 0; left: auto; }
.colpick.open .dropdown { display: block; }
.colpick label { display: flex; gap: 8px; padding: 5px 8px; cursor: pointer; border-radius: 4px; }
.colpick label:hover { background: var(--brand-soft); }

/* ===== Chi tiết ===== */
.detail-box { padding: 14px 16px 16px; }
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); margin-bottom: 12px; overflow-x: auto; }
.tab { border: 0; background: none; padding: 8px 14px; cursor: pointer; color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; font-weight: 500; }
.tab.active { color: var(--brand-dark); border-bottom-color: var(--brand); }
.kv { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 6px 24px; }
.kv div { display: flex; gap: 8px; padding: 5px 0; border-bottom: 1px dashed var(--line-soft); min-width: 0; }
.kv dt { color: var(--muted); min-width: 120px; flex-shrink: 0; }
.kv dd { margin: 0; font-weight: 500; overflow-wrap: anywhere; }
.detail-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 14px; flex-wrap: wrap; }
.note-box { background: var(--warn-soft); border-left: 3px solid var(--accent); padding: 8px 12px; border-radius: 4px; margin: 8px 0; font-size: 13px; }
.info-box { background: var(--brand-soft); border-left: 3px solid var(--brand); padding: 10px 12px; border-radius: 4px; margin: 0 0 12px; font-size: 13px; }
.pet-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.pet-card { border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px; }
.pet-card h5 { margin: 0 0 4px; font-size: 15px; display: flex; justify-content: space-between; align-items: center; gap: 6px; }
.pet-card .meta { color: var(--muted); font-size: 13px; }
.pet-card .care { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 10px; margin-top: 6px; font-size: 13px; }

/* ===== Tổng quan ===== */
.kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; margin-bottom: 16px; }
.kpi { background: var(--panel); border-radius: var(--radius); box-shadow: var(--shadow); padding: 14px 16px; }
.kpi .label { color: var(--muted); font-size: 13px; }
.kpi .value { font-size: 24px; font-weight: 700; margin-top: 2px; font-variant-numeric: tabular-nums; }
.kpi .sub { font-size: 12px; color: var(--muted); margin-top: 2px; }
.kpi .sub.up { color: var(--ok); } .kpi .sub.down { color: var(--bad); }
.dash-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 16px; }
.dash-grid .panel h3 { margin: 0 0 10px; font-size: 15px; }
.chart svg { width: 100%; height: 240px; display: block; }
.chart .bar { fill: var(--brand); }
.chart .bar:hover { fill: var(--accent); }
.chart text { font-size: 11px; fill: var(--muted); }
.chart .grid-line { stroke: var(--line-soft); }
.hbar { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; align-items: center; font-size: 13px; }
.hbar .track { grid-column: 1 / -1; height: 6px; background: var(--line-soft); border-radius: 3px; margin-bottom: 6px; overflow: hidden; }
.hbar .fill { height: 100%; background: var(--brand); border-radius: 3px; }
.due-list a { display: flex; justify-content: space-between; padding: 7px 0; border-bottom: 1px dashed var(--line-soft); color: var(--text); }
.due-list a:hover { color: var(--brand); }

/* ===== Hộp thoại ===== */
.modal-back { position: fixed; inset: 0; background: var(--overlay); z-index: 60; display: flex; align-items: flex-start; justify-content: center; padding: 40px 16px; overflow: auto; }
.modal { background: var(--surface); border-radius: 10px; width: 100%; max-width: 760px; box-shadow: 0 20px 50px var(--shadow-lg-color); }
.modal.wide { max-width: 980px; }
.modal-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.modal-head h3 { margin: 0; font-size: 17px; }
.modal-head .x { border: 0; background: none; font-size: 22px; cursor: pointer; color: var(--muted); line-height: 1; }
.modal-body { padding: 16px 18px; }
.modal-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 18px; border-top: 1px solid var(--line); background: var(--surface-muted); border-radius: 0 0 10px 10px; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; }
.form-grid .full { grid-column: 1 / -1; }
.field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.field > span { font-size: 13px; color: var(--text-secondary); font-weight: 500; }
.field > span .req { color: var(--bad); }
.field input, .field select, .field textarea { width: 100%; }
.field .hint { font-size: 12px; color: var(--muted); }
.check { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.form-section { grid-column: 1 / -1; font-weight: 650; padding-top: 6px; border-top: 1px solid var(--line-soft); margin-top: 4px; color: var(--brand-dark); }
.form-error { background: var(--bad-soft); color: var(--bad); padding: 8px 12px; border-radius: 6px; margin-bottom: 12px; }
.ac { position: relative; }
.ac-list { position: absolute; left: 0; right: 0; top: 100%; background: var(--surface); border: 1px solid var(--line); border-radius: 6px; box-shadow: 0 8px 20px var(--shadow-pop-color); z-index: 70; max-height: 260px; overflow: auto; }
.ac-list button { display: flex; width: 100%; justify-content: space-between; gap: 10px; text-align: left; padding: 8px 10px; border: 0; background: none; cursor: pointer; }
.ac-list button:hover, .ac-list button.hl { background: var(--brand-soft); }
.lines td input { width: 100%; padding: 5px 6px; }
.total-line { display: flex; justify-content: flex-end; gap: 24px; margin-top: 10px; font-size: 15px; }
.total-line b { font-variant-numeric: tabular-nums; }
.secret-box { font-family: ui-monospace, Menlo, Consolas, monospace; background: var(--surface-muted); padding: 8px 10px; border-radius: 6px; word-break: break-all; user-select: all; }

/* ===== Đăng nhập ===== */
.login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 16px; background: linear-gradient(160deg, var(--brand) 0%, var(--brand-dark) 60%, var(--brand-deep) 100%); }
.login { background: var(--surface); border-radius: 12px; padding: 28px; width: 100%; max-width: 380px; box-shadow: 0 20px 50px var(--shadow-lg-color); }
.login h2 { margin: 8px 0 4px; }
.login .field { margin-top: 14px; }
.login .btn { width: 100%; justify-content: center; margin-top: 18px; padding: 10px; }
.login .logo-lg { display: flex; align-items: center; gap: 10px; color: var(--brand); font-weight: 700; font-size: 20px; }
.login .logo-lg svg { width: 40px; height: 40px; }

/* ===== Thông báo ===== */
#toast-root { position: fixed; right: 16px; bottom: 16px; z-index: 90; display: flex; flex-direction: column; gap: 8px; max-width: calc(100vw - 32px); }
.toast { background: var(--text); color: var(--on-brand); padding: 10px 14px; border-radius: 8px; box-shadow: 0 8px 24px var(--shadow-lg-color); max-width: 420px; }
.toast.ok { background: var(--ok); } .toast.bad { background: var(--bad); }

/* ===== Màn hình nhỏ ===== */
@media (max-width: 1100px) {
  .dash-grid { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .menu-toggle { display: block; }
  .nav { display: none; position: absolute; top: 52px; left: 0; right: 0; background: var(--brand-dark); flex-direction: column; padding: 8px; }
  .nav.show { display: flex; }
  .nav-item .dropdown { position: static; box-shadow: none; background: var(--on-brand-soft); margin: 2px 0 6px 12px; }
  .nav-item .dropdown a, .nav-item .dropdown button { color: var(--on-brand); }
  .layout { grid-template-columns: 1fr; }
  .filters { position: static; max-height: none; display: none; }
  .filters.show { display: flex; }
  .btn.filter-toggle { display: inline-flex; }
  .form-grid { grid-template-columns: 1fr; }
  .retailer-select { max-width: 130px; }
  .logo span { display: none; }
}
@media (max-width: 520px) {
  .page { padding: 12px; }
  .kpi .value { font-size: 20px; }
  .modal-back { padding: 0; }
  .modal { border-radius: 0; min-height: 100vh; }
}

.small-text { font-size: 12px; }
.colpick .dropdown { width: min(620px, calc(100vw - 32px)); padding: 12px; max-height: 70vh; overflow: auto; }
.cp-head { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.cp-search { width: 100%; }
.cp-actions { display: flex; gap: 4px; flex-wrap: wrap; }
.cp-groups { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 4px 16px; }
.cp-gname { font-size: 12px; font-weight: 650; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; margin: 8px 0 2px; }
.cp-order { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.cp-order li { background: var(--brand-soft); color: var(--brand-dark); border-radius: 6px; padding: 4px 10px; cursor: grab; font-size: 13px; user-select: none; }
.cp-order li.dragging { opacity: .4; }
.cp-order .grip { color: var(--muted); margin-right: 2px; }
.cp-foot { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; border-top: 1px solid var(--line); margin-top: 10px; padding-top: 10px; }
.cp-foot .muted { flex: 1; }

/* Logo: đặt file logo chính thức tại public/brand/logo.png (nền trong suốt). Chưa có file thì hiện tên chữ. */
.brand-logo { height: 34px; width: auto; display: block; }
.topbar { border-bottom: 2px solid var(--gold); }
.login .brand-logo { height: 120px; margin: 0 auto 4px; }
.login .logo-lg { justify-content: center; }
.brand-text { font-weight: 700; letter-spacing: .01em; }
.colpick .dropdown .cp-actions button, .colpick .dropdown .cp-foot button { width: auto; display: inline-flex; }
.cp-actions { flex-direction: row; }

/* ===== Màn hình chính + chấm công ===== */
.login .gbtn { display: flex; justify-content: center; margin-top: 18px; min-height: 44px; }
.login .or { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 12px; margin: 16px 0 4px; }
.login .or::before, .login .or::after { content: ""; flex: 1; border-top: 1px solid var(--line); }
.home { display: grid; gap: 16px; }
.home-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.tile { background: var(--brand); color: var(--on-brand); border-radius: 12px; padding: 16px; display: flex; flex-direction: column; gap: 4px; box-shadow: var(--shadow); border-bottom: 3px solid var(--gold); min-height: 112px; }
.tile:hover { background: var(--brand-dark); }
.tile b { font-size: 16px; letter-spacing: .3px; }
.tile span:last-child { font-size: 12px; opacity: .8; }
.tile-ic svg { width: 30px; height: 30px; fill: none; stroke: var(--accent); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.att h2 { margin: 0; font-size: 20px; }
.att h3 { margin: 18px 0 8px; font-size: 14px; color: var(--text-secondary); text-transform: uppercase; letter-spacing: .4px; }
.att-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.att-clock { font-size: 32px; font-weight: 700; color: var(--brand); font-variant-numeric: tabular-nums; }
.att-state { margin: 14px 0 4px; }
.att-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0 8px; }
.btn.big { padding: 14px 22px; font-size: 16px; border-radius: 10px; min-width: 150px; justify-content: center; }
.att-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.att-links { display: flex; flex-wrap: wrap; gap: 8px; }
.sched-line { padding: 6px 0; border-bottom: 1px dashed var(--line-soft); }
.warn-box { background: var(--warn-soft); border: 1px solid var(--gold); border-radius: var(--radius); padding: 10px 12px; margin-top: 12px; }
.row-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.chipbox { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); border-radius: 999px; padding: 4px 10px; margin: 2px 4px 2px 0; cursor: pointer; background: var(--surface); white-space: nowrap; font-size: 13px; }
.chipbox:has(input:checked) { background: var(--ok-soft); border-color: var(--ok); }
.chip-col { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; margin-bottom: 12px; }
.sched-grid tr.locked td { background: var(--surface-muted); }
input.sm, select.sm { padding: 5px 8px; border: 1px solid var(--line); border-radius: 6px; max-width: 220px; }
.live-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.live-grid h3 { margin: 0 0 8px; }
.live-sec { margin-top: 10px; }
.live-p { padding: 4px 0 4px 8px; border-left: 2px solid var(--line); margin: 4px 0; font-size: 13px; }
.ts-grid td.ts-cell { min-width: 92px; vertical-align: top; font-size: 12px; }
.ts-grid td.ts-cell.edit { cursor: pointer; }
.ts-grid td.ts-cell.edit:hover { background: var(--row-hover); outline: 1px dashed var(--line-strong); }
.ts-grid .today { background: var(--gold-soft); }
.ts-s { background: var(--ok-soft); border-radius: 4px; padding: 1px 4px; margin-bottom: 2px; white-space: nowrap; }
.ts-s.pend { background: var(--warn-soft); }
.ts-s.off { background: var(--neutral-soft); color: var(--muted); }
.ts-a { color: var(--text-secondary); white-space: nowrap; }
.ts-a.bad { color: var(--bad); }
.photo-row { display: flex; flex-wrap: wrap; gap: 10px; }
.photo-row img { max-width: 100%; max-height: 60vh; border-radius: var(--radius); border: 1px solid var(--line); }
details.guide { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 14px; margin-top: 12px; }
details.guide summary { cursor: pointer; font-weight: 600; color: var(--brand); }
details.guide li { margin: 6px 0; }
.kv-line { margin-bottom: 10px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
@media (max-width: 900px) {
  .home-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .att-cols { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .tile { min-height: 96px; padding: 12px; }
  .btn.big { flex: 1 1 100%; }
  .att-clock { font-size: 24px; }
}
@media (max-width: 520px) {
  .topbar-in { gap: 4px; padding: 0 10px; }
  .logo { margin-right: 2px; }
  .topbar .brand-logo { height: 28px; }
  .retailer-select { max-width: 92px; }
  .top-right { min-width: 0; }
  .top-right .nav-btn { max-width: 96px; overflow: hidden; text-overflow: ellipsis; padding: 8px 6px; }
}

/* ===== v4: phân mục Chấm công ===== */
.hr-tabs { display: flex; justify-content: center; gap: 4px; background: var(--surface); border-bottom: 1px solid var(--line); margin: -16px -16px 16px; padding: 8px 12px; position: sticky; top: 52px; z-index: 20; overflow-x: auto; }
.hr-tabs a, .hr-bottom a { display: flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 8px; color: var(--text-secondary); white-space: nowrap; font-weight: 500; }
.hr-tabs a.active { background: var(--brand-soft); color: var(--brand); font-weight: 600; box-shadow: inset 0 -2px 0 var(--gold); }
.hr-tabs svg, .hr-bottom svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.hr-bottom { display: none; }
.hr-wrap { max-width: 980px; margin: 0 auto; display: grid; gap: 14px; }
.hr-wrap > .page-head { margin: 0; }
.card { background: var(--surface); border: 1px solid var(--line-soft); border-radius: 14px; padding: 16px 18px; box-shadow: var(--shadow); }
.card h3 { margin: 0 0 10px; font-size: 15px; }
.card h4 { margin: 16px 0 8px; font-size: 13px; color: var(--text-secondary); text-transform: uppercase; letter-spacing: .4px; }
.hero { background: var(--hero-grad); border-color: var(--line); text-align: center; padding: 18px 18px 14px; }
.hero-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.hero-clock { font-size: 56px; line-height: 1.05; font-weight: 800; color: var(--brand); font-variant-numeric: tabular-nums; letter-spacing: -1px; margin-top: 8px; }
.hero-date { color: var(--muted); margin-bottom: 12px; }
.shift-bar { text-align: left; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; margin: 4px 0 12px; }
.sb-head, .sb-foot { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; }
.sb-foot { color: var(--muted); font-size: 12px; margin-top: 6px; }
.sb-track { position: relative; height: 8px; border-radius: 99px; background: linear-gradient(90deg, var(--tan) 0, var(--tan) var(--p, 0%), var(--line-soft) var(--p, 0%)); margin-top: 8px; }
.shift-bar.working .sb-track { background: linear-gradient(90deg, var(--accent) 0, var(--accent) var(--p, 0%), var(--line-soft) var(--p, 0%)); }
.sb-now { position: absolute; top: -4px; width: 4px; height: 16px; border-radius: 2px; background: var(--brand); transform: translateX(-2px); box-shadow: 0 0 0 2px var(--surface); }
.sb-in { position: absolute; top: 0; width: 10px; height: 8px; border-radius: 99px; background: var(--accent); transform: translateX(-5px); }
.att-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 6px 0 10px; }
.att-btn { border: 0; border-radius: 12px; min-height: 64px; font-size: 18px; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 10px; color: var(--on-brand); }
.att-btn small { display: block; font-size: 12px; font-weight: 500; opacity: .85; }
.att-btn span { text-align: left; line-height: 1.15; }
.att-btn svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.att-btn.in { background: var(--ok); }
.att-btn.in:hover:not(:disabled) { background: var(--ok-dark); }
.att-btn.out { background: var(--brand); }
.att-btn.out:hover:not(:disabled) { background: var(--brand-dark); }
.att-btn.count { background: var(--gold); color: var(--brand-deep); animation: pulse 2s infinite; text-decoration: none; }
.att-btn:disabled { background: var(--neutral-soft); color: var(--muted); cursor: default; font-weight: 600; }
@keyframes pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(201,154,61,.5); } 50% { box-shadow: 0 0 0 8px rgba(201,154,61,0); } }
.att-sub { width: 100%; border: 1px solid transparent; background: var(--ok-soft); color: var(--ok-dark); border-radius: 10px; padding: 12px; font-weight: 600; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; margin-bottom: 8px; font-size: 15px; }
.att-sub.on { background: #e5eef9; color: #234a77; }
.att-sub.done { background: var(--neutral-soft); color: var(--muted); font-weight: 500; cursor: default; }
.att-sub.ghost { background: var(--surface); border-color: var(--line); color: var(--brand); }
.att-sub svg, .banner svg, .hero-hint svg, .btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; flex: none; }
#break-left.over { color: var(--bad); }
.hero-hint { display: flex; gap: 6px; align-items: flex-start; justify-content: center; color: var(--muted); font-size: 12px; margin-top: 4px; text-align: left; }
.banner { display: flex; align-items: center; gap: 10px; text-align: left; border-radius: 10px; padding: 10px 12px; margin: 0 0 10px; background: var(--brand-soft); border: 1px solid var(--line); }
.banner > div { flex: 1; }
.banner.warn { background: var(--warn-soft); border-color: #efd29c; }
.banner.gold { background: var(--gold-soft); border-color: var(--gold); }
.btn.gold { background: var(--gold); border-color: var(--gold); color: var(--brand-deep); font-weight: 600; }
.btn.soft { background: var(--brand-soft); border-color: var(--brand-soft); color: var(--brand); font-weight: 600; }
.mod-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.mod { background: var(--brand); color: var(--on-brand); border-radius: 12px; padding: 12px; display: flex; align-items: center; gap: 10px; border-bottom: 3px solid var(--gold); font-size: 13px; }
.mod:hover { background: var(--brand-dark); }
.mod-ic svg { width: 26px; height: 26px; fill: none; stroke: var(--accent); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; display: block; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.shift-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; border: 1px solid var(--line-soft); border-radius: 10px; padding: 10px 12px; margin-bottom: 8px; }
.stat-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.stat { font-size: 26px; font-weight: 800; color: var(--brand); }
.stat-actions { display: flex; gap: 8px; }
.hub { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.hub-item { display: flex; flex-direction: column; gap: 4px; color: var(--text); border-left: 3px solid var(--gold); }
.hub-item:hover { background: var(--row-hover); }
/* Đếm tiền */
.slots { display: flex; flex-wrap: wrap; gap: 8px; }
.slot { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 10px; padding: 6px 12px; min-width: 96px; background: var(--surface); }
.slot b { font-size: 16px; font-variant-numeric: tabular-nums; }
.slot small { font-size: 11px; color: var(--muted); }
.slot.ok { background: var(--ok-soft); border-color: #b9dcb1; }
.slot.wait { background: #eef3fa; border-color: #c7d6ea; }
.slot.due { background: var(--gold-soft); border-color: var(--gold); box-shadow: 0 0 0 2px rgba(201,154,61,.25); }
.slot.late { background: var(--bad-soft); border-color: #efc3bd; }
.slot.off { opacity: .55; }
.cash-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 14px; align-items: start; }
.denoms { display: grid; gap: 6px; }
.denom { display: grid; grid-template-columns: 70px 1fr 110px; align-items: center; gap: 10px; }
.note { font-weight: 800; text-align: center; border-radius: 6px; padding: 8px 0; color: var(--brand-deep); border: 1px solid rgba(0,0,0,.06); font-variant-numeric: tabular-nums; }
.note.d500000 { background: var(--n500); } .note.d200000 { background: var(--n200); } .note.d100000 { background: var(--n100); } .note.d50000 { background: var(--n50); }
.note.d20000 { background: var(--n20); } .note.d10000 { background: var(--n10); } .note.d5000 { background: var(--n5); } .note.d2000 { background: var(--n2); } .note.d1000 { background: var(--n1); }
.stepper { display: flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; max-width: 170px; }
.stepper button { width: 40px; border: 0; background: var(--surface-muted); font-size: 20px; cursor: pointer; color: var(--brand); }
.stepper button:active { background: var(--brand-soft); }
.stepper input { width: 100%; min-width: 0; border: 0; text-align: center; font-size: 17px; font-weight: 700; padding: 8px 0; font-variant-numeric: tabular-nums; }
.dsum { text-align: right; font-variant-numeric: tabular-nums; color: var(--text-secondary); }
.rc-line { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px dashed var(--line-soft); }
.rc-line small { display: block; color: var(--muted); font-size: 11px; }
.rc-line b { font-variant-numeric: tabular-nums; white-space: nowrap; }
.rc-line.total { border-bottom: 0; border-top: 2px solid var(--brand); margin-top: 4px; font-size: 16px; }
.rc-line.small { font-size: 13px; padding: 6px 0; }
.pending { background: var(--surface-muted); border-radius: 8px; padding: 8px 10px; margin-top: 8px; }
.diff-box { margin-top: 12px; border-top: 1px solid var(--line); padding-top: 10px; }
.sum-bar { grid-column: 1 / -1; position: sticky; bottom: 12px; z-index: 15; display: grid; grid-template-columns: 1fr 1fr 1fr auto; gap: 12px; align-items: center; background: var(--brand); color: var(--on-brand); border-radius: 14px; padding: 12px 16px; box-shadow: 0 6px 20px var(--shadow-lg-color); }
.sum-bar small { display: block; opacity: .75; font-size: 11px; }
.sum-bar b { font-size: 20px; font-variant-numeric: tabular-nums; }
.sum-bar b.neg { color: #ffb4a8; } .sum-bar b.zero { color: #b9f0a8; }
td.neg, .amt.neg { color: var(--bad); } .amt.pos { color: var(--ok); }
.branch-cash .bc-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.branch-cash .bc-head h3 { margin: 0; flex: 1; }
.prop { display: grid; grid-template-columns: 1fr auto auto; gap: 12px; align-items: center; border: 1px solid var(--line-soft); border-radius: 10px; padding: 10px 12px; margin-bottom: 8px; }
.prop-act { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.slot-edit { display: grid; grid-template-columns: 110px 1fr auto auto; gap: 8px; align-items: center; margin-bottom: 8px; }
@media (max-width: 900px) {
  .two-col, .cash-grid { grid-template-columns: 1fr; }
  .mod-strip { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .hr-tabs { display: none; }
  body.has-bottom .page { padding-bottom: 86px; }
  .hr-bottom { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; position: fixed; left: 0; right: 0; bottom: 0; z-index: 35; background: var(--surface); border-top: 1px solid var(--line); padding: 6px 6px calc(6px + env(safe-area-inset-bottom)); }
  .hr-bottom a { flex-direction: column; gap: 2px; padding: 6px 2px; font-size: 11px; border-radius: 10px; }
  .hr-bottom a.active { background: var(--brand-soft); color: var(--brand); font-weight: 700; }
  .hr-bottom svg { width: 22px; height: 22px; }
  .hero-clock { font-size: 48px; }
  .att-btn { min-height: 58px; font-size: 17px; }
  .sum-bar { grid-template-columns: 1fr 1fr 1fr; bottom: 76px; padding: 10px 12px; }
  .sum-bar b { font-size: 16px; }
  .sum-bar .btn { grid-column: 1 / -1; justify-content: center; padding: 11px; }
  .denom { grid-template-columns: 58px 1fr 92px; gap: 8px; }
  .prop { grid-template-columns: 1fr auto; }
  .prop-act { grid-column: 1 / -1; justify-content: flex-start; }
}
.cash-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
.cash-grid > *, .hr-wrap > *, .two-col > * { min-width: 0; }
.rc-line > span { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 900px) { .cash-grid { grid-template-columns: minmax(0, 1fr); } }
.chipbox input { width: auto !important; flex: none; margin: 0; }
@media (max-width: 640px) {
  .hr-wrap { overflow-x: clip; }
  .sum-bar { padding: 8px 12px; gap: 6px 10px; }
  .sum-bar b { font-size: 15px; }
  .sum-bar .btn { padding: 9px; }
}

/* ===== v4.1: nhóm chức năng trên màn hình chính ===== */
.sec { padding: 0; overflow: hidden; }
.sec-head { width: 100%; display: flex; align-items: center; gap: 12px; padding: 14px 18px; background: none; border: 0; cursor: pointer; text-align: left; }
.sec-head:hover { background: var(--row-hover); }
.sec-ic svg { width: 22px; height: 22px; fill: none; stroke: var(--brand); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; display: block; }
.sec-title { flex: 1; display: flex; flex-direction: column; }
.sec-title small, .link-row small { color: var(--muted); font-size: 12px; font-weight: 400; }
.chev { color: var(--muted); font-size: 22px; line-height: 1; transition: transform .15s; }
.sec.open .sec-head .chev { transform: rotate(90deg); }
.sec-body { display: none; padding: 0 18px 16px; border-top: 1px solid var(--line-soft); }
.sec.open .sec-body { display: block; padding-top: 12px; }
.sec-body .page-head { margin: 0 0 8px; }
.sec-body .page-head h1 { display: none; }
.sec-body .panel { box-shadow: none; border: 1px solid var(--line-soft); }
.seg { display: inline-flex; background: var(--neutral-soft); border-radius: 10px; padding: 3px; margin-bottom: 12px; }
.seg button { border: 0; background: none; padding: 7px 14px; border-radius: 8px; cursor: pointer; color: var(--text-secondary); font-weight: 500; }
.seg button.on { background: var(--surface); color: var(--brand); font-weight: 700; box-shadow: var(--shadow); }
.todo-line { display: flex; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px dashed var(--line-soft); color: var(--text-secondary); }
.todo-line .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--line-strong); flex: none; }
.group h3 { margin-bottom: 4px; }
.group.admin { border-top: 3px solid var(--gold); }
.grp-title { display: flex; align-items: center; gap: 8px; margin: 14px 0 4px; font-size: 12px; font-weight: 700; color: var(--text-secondary); text-transform: uppercase; letter-spacing: .4px; }
.grp-title svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.link-row { display: flex; align-items: center; gap: 10px; padding: 11px 4px; border-bottom: 1px solid var(--line-soft); color: var(--text); }
.link-row:last-child { border-bottom: 0; }
.link-row:hover { background: var(--row-hover); }
.link-row > span:first-child { flex: 1; display: flex; flex-direction: column; }
.cnt { display: none; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 99px; background: var(--bad); color: #fff; font-size: 12px; font-weight: 700; align-items: center; justify-content: center; }
.cnt.on { display: inline-flex; }
.board-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.board-head h3 { margin: 0; }
.board-head .spacer { flex: 1; }
.ts-grid.board tr.me td { background: var(--gold-soft); }
.ts-grid tfoot td { background: var(--surface-muted); }
.page-head.sub h2 { margin: 0; font-size: 17px; }
#myreg { margin-top: 2px; }
.emp-group h3 { margin-bottom: 8px; }
.reg-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.reg-head > div { flex: 1; }
.branch-label { color: var(--on-brand); opacity: .9; font-weight: 600; padding: 0 6px; }
.login.wide-login { max-width: 560px; }
.login.wide-login .btn.link { width: auto; background: none; border: 0; margin-top: 8px; }
.hub-item.pick { text-align: left; cursor: pointer; font: inherit; }
.hub-item.pick.on { border-color: var(--ok); box-shadow: 0 0 0 2px var(--ok-soft); }
.ts-grid.board th:first-child, .ts-grid.board td:first-child { position: sticky; left: 0; z-index: 1; background: var(--surface); box-shadow: 1px 0 0 var(--line-soft); }
.ts-grid.board thead th:first-child { background: var(--th-bg); }
.ts-grid.board tr.me td:first-child { background: var(--gold-soft); }
@media (max-width: 640px) { .board-head select { flex: 1 1 100%; } .ts-grid td.ts-cell { min-width: 84px; } }
.branch-pick { display: inline-flex; align-items: center; gap: 6px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 4px 4px 4px 10px; }
.branch-pick svg { width: 18px; height: 18px; fill: none; stroke: var(--brand); stroke-width: 1.8; }
.branch-pick select { border: 0; background: none; font-weight: 600; color: var(--brand); padding: 6px; max-width: 260px; }
.sched-grid tr.other td { background: var(--surface-muted); }
.sched-grid .reason { margin-top: 6px; display: block; width: 100%; max-width: 360px; }
@media (max-width: 640px) { .page-head .branch-pick { width: 100%; } .page-head .branch-pick select { max-width: none; flex: 1; } }
@media (max-width: 640px) {
  .board-head h3 { flex: 1 1 100%; }
  .sched-grid thead { display: none; }
  .sched-grid, .sched-grid tbody, .sched-grid tr, .sched-grid td { display: block; width: 100%; }
  .sched-grid tr { padding: 10px 0; border-bottom: 1px solid var(--line-soft); }
  .sched-grid td { border: 0 !important; padding: 3px 4px !important; }
  .sched-grid td:first-child { display: flex; justify-content: space-between; }
  .sched-grid .chipbox { font-size: 14px; padding: 6px 12px; }
}
.cash-grid.one { grid-template-columns: minmax(0, 1fr); max-width: 720px; }
.sum-bar.two { grid-template-columns: 1fr 1fr auto; }
.big-money { display: flex; flex-direction: column; margin: 8px 0 6px; }
.big-money small, .diff-big small { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .3px; }
.big-money b { font-size: 34px; color: var(--brand); font-variant-numeric: tabular-nums; }
.diff-big { margin-top: 12px; border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 2px; }
.diff-big b { font-size: 26px; font-variant-numeric: tabular-nums; }
.diff-big.zero { background: var(--ok-soft); color: var(--ok-dark); }
.diff-big.neg { background: var(--bad-soft); color: var(--bad); }
.denom-detail summary { cursor: pointer; color: var(--text-secondary); font-size: 13px; margin-bottom: 4px; }
.explain-box { background: var(--surface-muted); border-radius: 10px; padding: 10px 12px; }
.banner.ok-banner { background: var(--ok-soft); border-color: #b9dcb1; }
.result-main h4 { margin-top: 18px; }
@media (max-width: 640px) { .sum-bar.two { grid-template-columns: 1fr 1fr; } .big-money b { font-size: 28px; } }
.hr-wrap.wide { max-width: 1280px; }
.field .check { display: inline-flex; align-items: center; gap: 6px; margin: 4px 14px 4px 0; width: auto; font-weight: 400; }
.field .check input { width: auto !important; margin: 0; }
.field.full > span + .check, .field.full > .check { vertical-align: middle; }
.field.full:has(> .check) { flex-direction: row; flex-wrap: wrap; align-items: center; }
.field.full:has(> .check) > span { flex: 1 1 100%; }