/* MyFarm – bộ giao diện chung cho mọi mục (Trang chủ, Nhân sự, Đơn hàng…).
   Nạp sau CSS riêng của từng trang nên màu, chữ, nút, bảng ở đây là chuẩn chung.

   Màu theo thương hiệu Sữa Nông Trại Ba Vì (giống trang suanongtrai.vn):
     Rừng     #005a2b  màu chính, nút chính, mục đang mở · rừng đậm #003c20
     Cam      #b95100  điểm nhấn thương hiệu (gạch dưới mục đang mở, ngày ở Trang chủ)
     Giấy     #f6f2e8  nền trang      · sữa #fffdf8 nền khối
     Mực      #173522  chữ            · xám lá #5f6d62 chữ phụ
     Trời     #2a62a0  đang xử lý, thông tin
     Rơm      #9a5a00  đang chờ, cần chú ý
     Đỏ       #b42318  quá hạn, hủy, xóa
   Chữ: Fraunces (có chân) cho tiêu đề trang và tiêu đề khối, Be Vietnam Pro cho nội dung, nhãn và con số.
   Cả hai tự lưu trên máy chủ (thư mục fonts/), có đủ dấu tiếng Việt.
   Bố cục: thanh trên cùng chọn mục (cả app), bên dưới là menu và nội dung của mục đó. Canh trái. */

@font-face{font-family:"Be Vietnam Pro";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/bvp-400-vi.woff2) format("woff2");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:"Be Vietnam Pro";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/bvp-400-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Be Vietnam Pro";font-style:normal;font-weight:500;font-display:swap;src:url(fonts/bvp-500-vi.woff2) format("woff2");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:"Be Vietnam Pro";font-style:normal;font-weight:500;font-display:swap;src:url(fonts/bvp-500-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Be Vietnam Pro";font-style:normal;font-weight:600;font-display:swap;src:url(fonts/bvp-600-vi.woff2) format("woff2");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:"Be Vietnam Pro";font-style:normal;font-weight:600;font-display:swap;src:url(fonts/bvp-600-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Be Vietnam Pro";font-style:normal;font-weight:700;font-display:swap;src:url(fonts/bvp-700-vi.woff2) format("woff2");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:"Be Vietnam Pro";font-style:normal;font-weight:700;font-display:swap;src:url(fonts/bvp-700-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Fraunces";font-style:normal;font-weight:500 700;font-display:swap;src:url(fonts/fraunces-vi.woff2) format("woff2");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:"Fraunces";font-style:normal;font-weight:500 700;font-display:swap;src:url(fonts/fraunces-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --bar-h:60px;
  /* chung */
  --bg:#f6f2e8;--surface:#fffdf8;--surface-2:#f1ecdf;--line:#e4ddcd;--line-strong:#cdc4b0;
  --muted:#5f6d62;--accent:#005a2b;--accent-soft:#e3eee0;--accent-strong:#003c20;
  --brand:#b95100;--brand-soft:#fbe8d4;--forest-deep:#003c20;
  --sky:#2a62a0;--sky-soft:#e6edf6;--straw:#9a5a00;--straw-soft:#f8ecd8;
  --danger:#b42318;--danger-soft:#fbe9e5;--ok:#1b7a3c;--ok-soft:#e2f0e1;
  --shadow-1:0 1px 2px rgba(20,50,35,.06);--shadow-2:0 14px 34px rgba(20,50,35,.14);
  --f-serif:"Fraunces",Georgia,"Times New Roman",serif;
  --f-display:"Be Vietnam Pro",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --f-body:"Be Vietnam Pro",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  /* tên dùng trong mục Nhân sự và Trang chủ */
  --fg:#173522;--accent-fg:#ffffff;--warn:#9a5a00;--warn-soft:#f8ecd8;--sunday:#f6ecdc;
  --g1:#005a2b;--g1-soft:#e3eee0;--g2:#2a62a0;--g2-soft:#e6edf6;--g3:#9a5a00;--g3-soft:#f8ecd8;--g4:#5b6670;--g4-soft:#eeede8;
  --r:12px;
  /* tên dùng trong mục Đơn hàng */
  --ink:#173522;--accent-ink:#ffffff;--ship:#2a62a0;--ship-soft:#e6edf6;
  --bad:#b42318;--bad-soft:#fbe9e5;--on-bad:#ffffff;--on-ok:#ffffff;
  --scrim:rgba(12,30,20,.45);--shadow:0 14px 34px rgba(20,50,35,.16);
  --font-display:var(--f-display);--font-body:var(--f-body);--font-mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#0c1410;--surface:#131f19;--surface-2:#1a2a22;--line:#24372d;--line-strong:#33503f;
  --muted:#9fb0a4;--accent:#5cc488;--accent-soft:#163325;--accent-strong:#86d8aa;
  --brand:#f0a35a;--brand-soft:#3a2614;
  --sky:#8fb6ea;--sky-soft:#16263a;--straw:#efb46a;--straw-soft:#33260f;
  --danger:#f28b82;--danger-soft:#3a1a17;--ok:#72d39c;--ok-soft:#153021;
  --shadow-1:none;--shadow-2:0 14px 34px rgba(0,0,0,.5);
  --fg:#ece8dc;--accent-fg:#04190d;--warn:#efb46a;--warn-soft:#33260f;--sunday:#241e17;
  --g1:#5cc488;--g1-soft:#163325;--g2:#8fb6ea;--g2-soft:#16263a;--g3:#efb46a;--g3-soft:#33260f;--g4:#a9b5c1;--g4-soft:#222a31;
  --ink:#ece8dc;--accent-ink:#04190d;--ship:#8fb6ea;--ship-soft:#16263a;
  --bad:#f28b82;--bad-soft:#3a1a17;--on-bad:#2a0c0a;--on-ok:#0b1d13;
  --scrim:rgba(0,0,0,.55);--shadow:0 14px 34px rgba(0,0,0,.5);
  color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#0c1410;--surface:#131f19;--surface-2:#1a2a22;--line:#24372d;--line-strong:#33503f;
  --muted:#9fb0a4;--accent:#5cc488;--accent-soft:#163325;--accent-strong:#86d8aa;
  --brand:#f0a35a;--brand-soft:#3a2614;
  --sky:#8fb6ea;--sky-soft:#16263a;--straw:#efb46a;--straw-soft:#33260f;
  --danger:#f28b82;--danger-soft:#3a1a17;--ok:#72d39c;--ok-soft:#153021;
  --shadow-1:none;--shadow-2:0 14px 34px rgba(0,0,0,.5);
  --fg:#ece8dc;--accent-fg:#04190d;--warn:#efb46a;--warn-soft:#33260f;--sunday:#241e17;
  --g1:#5cc488;--g1-soft:#163325;--g2:#8fb6ea;--g2-soft:#16263a;--g3:#efb46a;--g3-soft:#33260f;--g4:#a9b5c1;--g4-soft:#222a31;
  --ink:#ece8dc;--accent-ink:#04190d;--ship:#8fb6ea;--ship-soft:#16263a;
  --bad:#f28b82;--bad-soft:#3a1a17;--on-bad:#2a0c0a;--on-ok:#0b1d13;
  --scrim:rgba(0,0,0,.55);--shadow:0 14px 34px rgba(0,0,0,.5);
  color-scheme:dark}

/* ---------- nền và chữ ---------- */
html{-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--fg);font-family:var(--f-body);font-size:14.5px;line-height:1.55;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--f-display);font-weight:600;letter-spacing:-.01em;text-wrap:balance}
h1,h2{font-family:var(--f-serif);font-optical-sizing:auto;letter-spacing:-.005em;font-variant-numeric:lining-nums}
h1{font-size:26px;line-height:1.2}
h2{font-size:19px;line-height:1.3}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
a{color:var(--accent)}
.mf-i{flex:none;display:inline-block;vertical-align:middle}

/* ---------- thanh trên cùng ---------- */
.mf-bar{position:sticky;top:0;z-index:40;height:calc(var(--bar-h) + env(safe-area-inset-top,0px));padding:env(safe-area-inset-top,0px) 18px 0;background:var(--surface);border-bottom:1px solid var(--line);box-shadow:0 1px 0 rgba(20,50,35,.03),0 6px 18px -14px rgba(20,50,35,.35);display:flex;align-items:center;gap:4px}
.mf-logo{flex:none;display:flex;align-items:center;margin-right:18px;padding:4px 2px;border-radius:8px;text-decoration:none}
.mf-wm{display:block;width:auto;height:40px}
.mf-tabs{display:flex;gap:2px;min-width:0;overflow-x:auto;scrollbar-width:none;height:100%;align-items:stretch}
.mf-tabs::-webkit-scrollbar{display:none}
.mf-tab{display:flex;align-items:center;gap:8px;padding:0 14px;color:var(--muted);text-decoration:none;font-weight:500;font-size:14.5px;white-space:nowrap;border-bottom:3px solid transparent;border-top:3px solid transparent}
.mf-tab:hover{color:var(--fg);background:var(--surface-2)}
.mf-tab[aria-current="page"]{color:var(--accent);border-bottom-color:var(--brand);font-weight:600}
.mf-user{margin-left:auto;display:flex;align-items:center;gap:10px;padding-left:12px;min-width:0;flex:0 0 auto}
.mf-av{flex:none;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--accent);color:var(--accent-fg);font:600 14px var(--f-serif);box-shadow:0 0 0 2px var(--surface),0 0 0 3.5px color-mix(in srgb,var(--brand) 55%,transparent)}
.mf-who{display:flex;flex-direction:column;line-height:1.25;min-width:0}
.mf-who b{font-weight:600;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:180px}
.mf-who small{color:var(--muted);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:220px}
.mf-out{display:flex;align-items:center;gap:6px;border:1px solid var(--line);background:var(--surface);color:var(--muted);border-radius:9px;padding:7px 11px;cursor:pointer;font:500 13.5px var(--f-body)}
.mf-out:hover{color:var(--danger);border-color:var(--danger)}
@media (max-width:760px){
  :root{--bar-h:54px}
  .mf-bar{padding-inline:10px;gap:2px}
  .mf-logo{margin-right:6px}.mf-wm{height:32px}
  .mf-tab{padding:0 10px;gap:6px;font-size:13.5px}
  .mf-who{display:none}
  .mf-out span{display:none}.mf-out{padding:7px 8px}
  .mf-user{gap:6px;padding-left:4px}
}
@media (max-width:560px){
  .mf-tab span{display:none}.mf-tab{padding:0 11px}.mf-wm{height:28px}
  /* Kỹ thuật: ô "Xem như" thu gọn thành nút biểu tượng, bấm vào mở danh sách bộ phận */
  .mf-as{position:relative;width:38px;height:38px;justify-content:center;border:1px solid var(--line);border-radius:9px;background:var(--surface)}
  .mf-as select{position:absolute;inset:0;width:100%;max-width:none;opacity:0;cursor:pointer}
  .mf-as + .mf-user{margin-left:6px}
}

/* ---------- nút ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:38px;padding:0 14px;border:1px solid var(--line-strong);background:var(--surface);color:var(--fg);border-radius:9px;font:500 14px/1.2 var(--f-body);cursor:pointer;white-space:nowrap;text-decoration:none;box-shadow:var(--shadow-1)}
.btn:hover{border-color:var(--accent);color:var(--accent)}
.btn.pri,.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-fg);font-weight:600}
.btn.pri:hover,.btn.primary:hover{background:var(--accent-strong);border-color:var(--accent-strong);color:var(--accent-fg);filter:none}
.btn.dan,.btn.danger{color:var(--danger);border-color:color-mix(in srgb,var(--danger) 45%,var(--line));background:var(--surface)}
.btn.dan:hover,.btn.danger:hover{background:var(--danger-soft);border-color:var(--danger);color:var(--danger)}
.btn.ghost{background:transparent;box-shadow:none;border-color:transparent}
.btn.ghost:hover{background:var(--surface-2);border-color:transparent;color:var(--fg)}
.btn.sm{min-height:32px;padding:0 11px;font-size:13px;border-radius:8px}
.btn.icon{width:38px;padding:0}
.btn:disabled,.btn[disabled]{opacity:.5;cursor:not-allowed}
.ico{color:var(--muted);border-radius:7px;font-weight:500}
.ico:hover{background:var(--surface-2);color:var(--accent)}
.ico.del:hover{color:var(--danger);background:var(--danger-soft)}

/* ---------- ô nhập ---------- */
input,select,textarea{font:inherit;color:inherit;background:var(--surface);border:1px solid var(--line-strong);border-radius:9px;padding:8px 10px;min-height:38px}
textarea{min-height:0}
input[type="checkbox"],input[type="radio"]{min-height:0;accent-color:var(--accent)}
input:hover,select:hover,textarea:hover{border-color:var(--muted)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent)}
input:disabled,select:disabled{background:var(--surface-2);color:var(--muted)}
::placeholder{color:color-mix(in srgb,var(--muted) 80%,transparent)}

/* ---------- bảng ---------- */
.tw,.tbl{border:1px solid var(--line);border-radius:var(--r);background:var(--surface);overflow-x:auto}
table{border-collapse:collapse;width:100%;font-size:14px}
th,td{padding:10px 12px;border-bottom:1px solid var(--line)}
th{font:600 12.5px var(--f-body);color:var(--muted);background:var(--surface-2);text-align:left;letter-spacing:0;text-transform:none}
tbody tr.click:hover td,.tw tbody tr:hover td{background:color-mix(in srgb,var(--accent-soft) 55%,var(--surface))}
td.num,th.num{font-variant-numeric:tabular-nums}

/* ---------- nhãn trạng thái ---------- */
.pill{display:inline-flex;align-items:center;gap:5px;padding:2px 9px;border-radius:99px;font-size:12.5px;font-weight:600;line-height:1.5}
.pill.ok{background:var(--ok-soft);color:var(--ok)}
.pill.warn{background:var(--straw-soft);color:var(--straw)}
.pill.dan{background:var(--danger-soft);color:var(--danger)}
.pill.acc{background:var(--sky-soft);color:var(--sky)}

/* ---------- khối, hộp thoại, thông báo ---------- */
body.mf-app[data-mod="hr"] .panel{border-radius:var(--r);border-color:var(--line);box-shadow:var(--shadow-1)}
.md{border-radius:16px;box-shadow:var(--shadow-2)}
.ov{background:var(--scrim)}
.toast{border-radius:10px;padding:11px 18px;box-shadow:var(--shadow-2);font-weight:500}
.empty b{font-family:var(--f-display);font-weight:600}

/* ---------- màn đăng nhập ---------- */
/* Bên trái: ảnh đàn bò của nông trại, chữ trắng trên nền rừng mờ dần. Bên phải: logo và form trên nền giấy */
.hr-login{position:fixed;inset:0;z-index:9999;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);background:var(--bg);overflow:auto}
.hr-login .mf-side{position:relative;color:#fff;display:flex;flex-direction:column;justify-content:flex-end;padding:48px 52px 56px;overflow:hidden;min-height:100%;
  background:linear-gradient(180deg,rgba(0,40,20,.08) 0%,rgba(0,40,20,.18) 38%,rgba(0,45,22,.78) 72%,rgba(0,36,18,.95) 100%),url(brand/bo-sua.webp) 50% 42%/cover no-repeat,var(--forest-deep)}
.hr-login .mf-side h2{font:600 clamp(28px,3.4vw,42px)/1.15 var(--f-serif);margin:0 0 12px;max-width:16ch;letter-spacing:-.01em;color:#fff;text-shadow:0 1px 18px rgba(0,30,15,.35)}
.hr-login .mf-side p{margin:0;max-width:44ch;color:rgba(255,255,255,.86);font-size:15.5px;line-height:1.6}
.hr-login .mf-formwrap{display:grid;place-items:center;padding:40px 24px}
.hr-login .mf-formin{width:100%;max-width:380px}
.hr-login .mf-logo{display:inline-flex;margin:0 0 30px -4px;padding:4px}
.hr-login .mf-wm{height:64px}
.hr-login form{width:100%;max-width:380px;background:none;border:0;box-shadow:none;padding:0}
.hr-login h1{font:600 30px/1.2 var(--f-serif);margin:0 0 8px;display:block;letter-spacing:-.01em}
.hr-login h1 i{display:none}
.hr-login form>p{margin:0 0 24px;color:var(--muted);font-size:15px}
.hr-login label{display:block;font-size:13.5px;font-weight:500;color:var(--fg);margin:14px 0 6px}
.hr-login input{width:100%;font-size:16px;padding:11px 13px;min-height:48px;border-radius:12px;border:1px solid var(--line-strong);background:var(--surface);color:var(--fg)}
.hr-login button{margin-top:24px;width:100%;min-height:50px;border:0;border-radius:12px;background:var(--accent);color:var(--accent-fg);font:600 16px var(--f-body);cursor:pointer;box-shadow:0 10px 22px -12px rgba(0,60,32,.6)}
.hr-login button:hover{background:var(--accent-strong)}
.hr-login .hr-err{color:var(--danger);font-size:14px;min-height:20px;margin-top:12px}
.hr-login .mf-help{margin-top:26px;padding-top:18px;border-top:1px solid var(--line);font-size:13.5px;color:var(--muted)}
.hr-login form a{display:block;text-align:center;text-decoration:none;margin-top:18px;padding:13px;border-radius:12px;background:var(--accent);color:var(--accent-fg);font-weight:600}
.hr-login form button[data-hr="logout"]{background:transparent;color:var(--muted);border:1px solid var(--line-strong);box-shadow:none}
@media (max-width:820px){
  .hr-login{grid-template-columns:1fr;align-content:start}
  .hr-login .mf-side{min-height:0;height:210px;padding:22px 20px 20px;background-position:center,50% 64%,0 0}
  .hr-login .mf-side h2{font-size:24px;margin:0;max-width:20ch}
  .hr-login .mf-side p{display:none}
  .hr-login .mf-formwrap{padding:26px 20px 40px;place-items:start center}
  .hr-login .mf-logo{margin-bottom:20px}
  .hr-login .mf-wm{height:50px}
  .hr-login h1{font-size:26px}
}

/* ---------- quản lý tài khoản (Trang chủ) ---------- */
.hr-acc table{font-size:14px}
.hr-acc th,.hr-acc td{padding:10px 10px}
.hr-acc h4{font:600 15px var(--f-display);margin:22px 0 10px}
.hr-acc .hr-f{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px;margin-top:6px}
.hr-acc .hr-f .btn{width:100%}
.hr-acc .hr-f input,.hr-acc .hr-f select{width:100%;min-width:0}
.hr-acc .tw{margin-top:4px}
/* Kỹ thuật: xem như bộ phận khác */
.mf-as{display:inline-flex;align-items:center;gap:6px;margin-left:auto;color:var(--muted);flex:none}
.mf-as select{min-height:34px;padding:4px 8px;font-size:13px;border-radius:8px;max-width:190px}
.mf-as + .mf-user{margin-left:12px}
.mf-asbar{position:sticky;top:var(--bar-h);z-index:49;display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;padding:8px 20px;background:var(--straw-soft);color:var(--straw);font-size:13.5px;border-bottom:1px solid color-mix(in srgb,var(--straw) 30%,transparent)}
.mf-asbar span{flex:1 1 260px;color:var(--fg)}
.mf-asbar button{min-height:32px;padding:0 12px;border-radius:8px;border:1px solid currentColor;background:var(--surface);color:var(--straw);font-weight:600;cursor:pointer}
@media (max-width:760px){.mf-as select{max-width:120px}.mf-asbar{padding:8px 14px}}
/* quyền của từng tài khoản và bảng quy ước theo bộ phận */
.hr-acc .hr-ck{display:flex;gap:8px;align-items:flex-start;font-size:13.5px;line-height:1.4;cursor:pointer}
.hr-acc .hr-ck input{width:auto;min-height:0;margin-top:2px;flex:none}
.hr-acc .hr-ck small{color:var(--muted);font-size:12px;white-space:nowrap}
.hr-acc .hr-ck.lock{color:var(--muted);cursor:default}
.hr-acc .hr-perm{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:10px;margin-top:12px;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--surface-2)}
.hr-acc .hr-perm > p{grid-column:1/-1}
.hr-acc .hr-perm fieldset{border:0;margin:0;padding:0;display:grid;gap:7px;align-content:start}
.hr-acc .hr-perm legend{font:600 13.5px var(--f-display);padding:0;margin-bottom:6px}
.hr-acc .hr-rules td,.hr-acc .hr-rules th{text-align:center;padding:8px 8px}
.hr-acc .hr-rules td:first-child,.hr-acc .hr-rules th:first-child{text-align:left;min-width:240px}
.hr-acc .hr-rules tr.grp td{font:600 13.5px var(--f-display);background:var(--surface-2);text-align:left}
.hr-acc .hr-rules input{width:18px;height:18px;min-height:0;cursor:pointer}

/* ---------- mục Nhân sự ---------- */
body.mf-app[data-mod="hr"] .app{min-height:calc(100vh - var(--bar-h))}
body.mf-app[data-mod="hr"] nav.side{top:var(--bar-h);height:calc(100vh - var(--bar-h));padding:18px 12px 24px;gap:1px;background:var(--surface)}
body.mf-app[data-mod="hr"] nav.side .brand{font:600 17px var(--f-display);padding:0 8px 10px;gap:10px;color:var(--fg)}
body.mf-app[data-mod="hr"] nav.side .brand i{width:30px;height:30px;border-radius:8px;background:var(--sky-soft);color:var(--sky)}
body.mf-app[data-mod="hr"] nav.side button{display:flex;align-items:center;gap:10px;padding:8px 10px;font-size:14.5px;color:var(--fg);border-radius:8px}
body.mf-app[data-mod="hr"] nav.side button .mf-i{color:var(--muted)}
body.mf-app[data-mod="hr"] nav.side button.on .mf-i{color:inherit}
body.mf-app[data-mod="hr"] nav.side .ngrp{margin-top:12px;padding:2px 4px 6px;border-left-width:3px}
body.mf-app[data-mod="hr"] nav.side .grp{text-transform:none;letter-spacing:0;font:700 13px var(--f-display);padding:9px 8px 5px}
body.mf-app[data-mod="hr"] nav.side .grp small{font:600 11.5px var(--f-body);padding:1px 8px}
body.mf-app[data-mod="hr"] main{padding:26px 28px 64px}
body.mf-app[data-mod="hr"] .head{margin-bottom:18px;gap:14px}
body.mf-app[data-mod="hr"] .head h1{font-size:27px}
body.mf-app[data-mod="hr"] .head p{font-size:14.5px;margin-top:4px;max-width:70ch}
body.mf-app[data-mod="hr"] .bar label{font-size:12.5px;font-weight:500;gap:5px}
body.mf-app[data-mod="hr"] legend{text-transform:none;letter-spacing:0;font:600 15px var(--f-display);color:var(--fg);margin-bottom:10px}
body.mf-app[data-mod="hr"] .field label{font-size:13px;color:var(--fg)}
body.mf-app[data-mod="hr"] .kpi{padding:14px 16px}
body.mf-app[data-mod="hr"] .kpi span{font-size:13px}
body.mf-app[data-mod="hr"] .card{padding:16px 18px}
body.mf-app[data-mod="hr"] .mh{padding:16px 22px}
body.mf-app[data-mod="hr"] .mb{padding:18px 22px}
body.mf-app[data-mod="hr"] .mf{padding:14px 22px}
body.mf-app[data-mod="hr"] #fxv{top:calc(var(--bar-h) + 12px)}
body.mf-app[data-mod="hr"] .att td,body.mf-app[data-mod="hr"] .att th{padding:6px 6px}
body.mf-app[data-mod="hr"] .pay td,body.mf-app[data-mod="hr"] .pay th{padding:7px 8px}
@media (max-width:820px){
  body.mf-app[data-mod="hr"] nav.side{top:var(--bar-h);height:auto;padding:6px 10px;gap:2px}
  body.mf-app[data-mod="hr"] nav.side .brand{display:none}
  body.mf-app[data-mod="hr"] nav.side{align-items:center;gap:6px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  body.mf-app[data-mod="hr"] nav.side::-webkit-scrollbar{display:none}
  /* Nhóm mục giữ nguyên chiều rộng, cả dải trượt ngang (không bóp chữ, không kéo cao) */
  body.mf-app[data-mod="hr"] nav.side .ngrp{flex:none;align-self:center;align-items:center;margin:0;padding:2px 4px;gap:2px}
  body.mf-app[data-mod="hr"] nav.side button{flex:none;padding:8px 10px;font-size:14px}
  body.mf-app[data-mod="hr"] main{padding:20px 16px 56px}
  body.mf-app[data-mod="hr"] .head h1{font-size:22px}
}

/* báo có bản cập nhật */
.mf-upd{position:fixed;left:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:120;border:0;border-radius:99px;padding:11px 18px;background:var(--accent);color:var(--accent-fg);font:600 14px var(--f-body);box-shadow:var(--shadow-2);cursor:pointer}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}