:root {
    /* Nền + đường viền chuyển từ tông be/giấy cũ sang xám-lục lạnh, sáng
       hơn — "sáng sủa, hiện đại, rõ ràng" (yêu cầu 2026-09-04). Giữ nguyên
       màu thương hiệu (accent xanh lá đậm) và toàn bộ màu trạng thái. */
    --ground: #F2F5F3;
    --raised: #FFFFFF;
    --raised-2: #F8FAF9;
    --ink: #16211C;
    --ink-soft: #4A5650;
    --ink-faint: #8C9691;
    --line: #E1E7E3;
    --line-soft: #EDF2EF;
    --accent: #0E6B58;
    --accent-strong: #0A4D40;
    --accent-soft: #DCEAE4;
    --accent-ink: #FFFFFF;
    /* Luôn giữ tông ĐẬM của thương hiệu, không đổi theo dark mode — dùng
       cho các mảng nền cố định cần chữ sáng đè lên (sidebar...). Khác với
       --accent-strong: biến đó CHỦ Ý đổi sang màu SÁNG ở dark mode (làm
       màu chữ/icon nổi trên nền tối), nên không dùng được làm màu NỀN nếu
       muốn chữ trắng đọc được — đây là lỗi thực tế đã xảy ra (sidebar mất
       chữ khi bật dark mode, phản hồi 2026-09-12). */
    --accent-fixed-dark: #0A4D40;
    --good: #2E7D46;
    --good-soft: #E1F0E4;
    --warn: #B8791A;
    --warn-soft: #F6EAD4;
    --bad: #B23A34;
    --bad-soft: #F5E1DF;
    --info: #2A6FB5;
    --info-soft: #E3EDF7;
    --neutral-soft: #EEF2F0;
    /* Bạch kim — riêng cho thẻ 3 cổ đông sáng lập (Ban Quản lý tổng), tách
       hẳn khỏi --accent (Trưởng phòng & nhóm phòng) để nổi bật cấp cao nhất
       (yêu cầu 2026-09-16: "thẻ nhân viên của 3 cổ đông để màu Bạch kim"). */
    --platinum: #35504C;
    --platinum-soft: #D9E3E1;
    --shadow: 0 1px 3px rgba(15,30,24,0.05), 0 10px 26px -12px rgba(15,30,24,0.16);
    --font-ui: system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Roboto, Arial, sans-serif;
    --font-mono: ui-monospace, "Cascadia Code", "SFMono-Regular", Consolas, "Roboto Mono", monospace;
    /* Vùng bị tai thỏ/thanh trạng thái iOS che khi cài "Thêm vào màn hình
       chính" (PWA full màn hình, apple-mobile-web-app-status-bar-style =
       black-translucent khiến nội dung web tràn lên dưới thanh trạng thái hệ
       điều hành) — cộng thêm khoảng đệm này vào topbar để nút menu không bị
       che, không bấm được (yêu cầu 2026-09-06). Trên Android/trình duyệt
       thường env() trả về 0, không ảnh hưởng gì. */
    --safe-top: env(safe-area-inset-top, 0px);
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --ground: #10150F;
      --raised: #171F19;
      --raised-2: #1B241E;
      --ink: #EEF1EA;
      --ink-soft: #AEB8AC;
      --ink-faint: #6F7A70;
      --line: #2A342C;
      --line-soft: #212A23;
      --accent: #4FA98D;
      --accent-strong: #6FC1A4;
      --accent-soft: #1C332C;
      --accent-ink: #0B1512;
      --good: #57B378;
      --good-soft: #16281C;
      --warn: #D3A24B;
      --warn-soft: #2E260F;
      --bad: #D3746D;
      --bad-soft: #2E1613;
      --info: #6FA3D8;
      --info-soft: #17263A;
      --neutral-soft: #1E2620;
      --platinum: #6FA396;
      --platinum-soft: #1E2E2B;
      --shadow: 0 1px 2px rgba(0,0,0,0.3), 0 10px 28px -10px rgba(0,0,0,0.5);
    }
  }
  :root[data-theme="dark"] {
    --ground: #10150F;
    --raised: #171F19;
    --raised-2: #1B241E;
    --ink: #EEF1EA;
    --ink-soft: #AEB8AC;
    --ink-faint: #6F7A70;
    --line: #2A342C;
    --line-soft: #212A23;
    --accent: #4FA98D;
    --accent-strong: #6FC1A4;
    --accent-soft: #1C332C;
    --accent-ink: #0B1512;
    --good: #57B378;
    --good-soft: #16281C;
    --warn: #D3A24B;
    --warn-soft: #2E260F;
    --bad: #D3746D;
    --bad-soft: #2E1613;
    --info: #6FA3D8;
    --info-soft: #17263A;
    --neutral-soft: #1E2620;
    --platinum: #6FA396;
    --platinum-soft: #1E2E2B;
    --shadow: 0 1px 2px rgba(0,0,0,0.3), 0 10px 28px -10px rgba(0,0,0,0.5);
  }

  /* ============================================================
     Tông màu giao diện tự chọn (Hồ sơ cá nhân, yêu cầu 2026-09-11)
     — data-tong-mau đặt ở thẻ <html> (xem base_sidebar/base_doi_tac/
     base_nong_dan.html), đọc từ HoSoCaNhan.tong_mau qua context
     processor "perms". Mặc định "hien_tai" -> không override gì, giữ
     nguyên bộ màu gốc phía trên. Mỗi tông chỉ đổi nền/chữ/màu chủ đạo —
     good/warn/bad/info giữ NGUYÊN xuyên suốt mọi tông (màu trạng thái
     là ngữ nghĩa chung, không phải thương hiệu, không đổi theo tông). */
  :root[data-tong-mau="ruong_rung"] {
    --ground: #F4F6F1; --raised: #FFFFFF; --raised-2: #F9FAF7;
    --ink: #10160D; --ink-soft: #44503C; --ink-faint: #7C8672;
    --line: #D8E0D1; --line-soft: #E9EDE4;
    --accent: #0A6B44; --accent-strong: #053F28; --accent-soft: #D6E9DC; --accent-ink: #FFFFFF;
    --accent-fixed-dark: #053F28;
  }
  @media (prefers-color-scheme: dark) {
    :root[data-tong-mau="ruong_rung"]:not([data-theme="light"]) {
      --ground: #10140D; --raised: #171D14; --raised-2: #1B2318;
      --ink: #EDF0E8; --ink-soft: #AEB6A5; --ink-faint: #707A68;
      --line: #2A3324; --line-soft: #212A1C;
      --accent: #4CA875; --accent-strong: #6EC194; --accent-soft: #1D3226; --accent-ink: #0B1512;
    }
  }
  :root[data-tong-mau="ruong_rung"][data-theme="dark"] {
    --ground: #10140D; --raised: #171D14; --raised-2: #1B2318;
    --ink: #EDF0E8; --ink-soft: #AEB6A5; --ink-faint: #707A68;
    --line: #2A3324; --line-soft: #212A1C;
    --accent: #4CA875; --accent-strong: #6EC194; --accent-soft: #1D3226; --accent-ink: #0B1512;
  }

  /* Sóng biển — xanh lam ngả lục, sâu như nước biển (yêu cầu 2026-09-22). */
  :root[data-tong-mau="song_bien"] {
    --ground: #F1F6F7; --raised: #FFFFFF; --raised-2: #F7FAFB;
    --ink: #0D2027; --ink-soft: #3D5560; --ink-faint: #7C9199;
    --line: #D8E6EA; --line-soft: #E9F1F3;
    --accent: #0B6E8C; --accent-strong: #06465A; --accent-soft: #D5EAF0; --accent-ink: #FFFFFF;
    --accent-fixed-dark: #06465A;
  }
  @media (prefers-color-scheme: dark) {
    :root[data-tong-mau="song_bien"]:not([data-theme="light"]) {
      --ground: #0A1518; --raised: #131F23; --raised-2: #16262B;
      --ink: #E7F1F3; --ink-soft: #A8BEC4; --ink-faint: #6C848B;
      --line: #223339; --line-soft: #1A282D;
      --accent: #4FB8D6; --accent-strong: #7ED0E8; --accent-soft: #163038; --accent-ink: #062229;
    }
  }
  :root[data-tong-mau="song_bien"][data-theme="dark"] {
    --ground: #0A1518; --raised: #131F23; --raised-2: #16262B;
    --ink: #E7F1F3; --ink-soft: #A8BEC4; --ink-faint: #6C848B;
    --line: #223339; --line-soft: #1A282D;
    --accent: #4FB8D6; --accent-strong: #7ED0E8; --accent-soft: #163038; --accent-ink: #062229;
  }

  /* Bầu trời — xanh da trời sáng, nhẹ nhàng (yêu cầu 2026-09-22). */
  :root[data-tong-mau="bau_troi"] {
    --ground: #F1F5FA; --raised: #FFFFFF; --raised-2: #F7FAFD;
    --ink: #131C2A; --ink-soft: #47566B; --ink-faint: #8492A3;
    --line: #DCE5F0; --line-soft: #EBF1F8;
    --accent: #2B72C4; --accent-strong: #184E8F; --accent-soft: #DCE9F8; --accent-ink: #FFFFFF;
    --accent-fixed-dark: #184E8F;
  }
  @media (prefers-color-scheme: dark) {
    :root[data-tong-mau="bau_troi"]:not([data-theme="light"]) {
      --ground: #0B1420; --raised: #131E2D; --raised-2: #172436;
      --ink: #E9EFF7; --ink-soft: #A9B8CB; --ink-faint: #6C7C90;
      --line: #24344A; --line-soft: #1B283A;
      --accent: #5B9DE8; --accent-strong: #8DBCF0; --accent-soft: #182A3F; --accent-ink: #06111E;
    }
  }
  :root[data-tong-mau="bau_troi"][data-theme="dark"] {
    --ground: #0B1420; --raised: #131E2D; --raised-2: #172436;
    --ink: #E9EFF7; --ink-soft: #A9B8CB; --ink-faint: #6C7C90;
    --line: #24344A; --line-soft: #1B283A;
    --accent: #5B9DE8; --accent-strong: #8DBCF0; --accent-soft: #182A3F; --accent-ink: #06111E;
  }

  /* Cà phê — nâu ấm, tương phản với các tông xanh còn lại (yêu cầu 2026-09-22). */
  :root[data-tong-mau="ca_phe"] {
    --ground: #F7F3EE; --raised: #FFFFFF; --raised-2: #FBF8F4;
    --ink: #2A1E14; --ink-soft: #5C4A3A; --ink-faint: #93816F;
    --line: #E6DACB; --line-soft: #F0E8DD;
    --accent: #7B4B2A; --accent-strong: #4F2F17; --accent-soft: #ECDDC8; --accent-ink: #FFFFFF;
    --accent-fixed-dark: #4F2F17;
  }
  @media (prefers-color-scheme: dark) {
    :root[data-tong-mau="ca_phe"]:not([data-theme="light"]) {
      --ground: #16110C; --raised: #211A13; --raised-2: #271F17;
      --ink: #F3EAE0; --ink-soft: #C6B39F; --ink-faint: #8C7863;
      --line: #3A2E22; --line-soft: #2B2319;
      --accent: #C89968; --accent-strong: #E0B98C; --accent-soft: #2E2216; --accent-ink: #1D1408;
    }
  }
  :root[data-tong-mau="ca_phe"][data-theme="dark"] {
    --ground: #16110C; --raised: #211A13; --raised-2: #271F17;
    --ink: #F3EAE0; --ink-soft: #C6B39F; --ink-faint: #8C7863;
    --line: #3A2E22; --line-soft: #2B2319;
    --accent: #C89968; --accent-strong: #E0B98C; --accent-soft: #2E2216; --accent-ink: #1D1408;
  }

  * { box-sizing: border-box; }
  body {
    margin: 0;
    background: var(--ground);
    color: var(--ink);
    font-family: var(--font-ui);
    font-size: 14px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
  }
  h1, h2, h3, h4 { text-wrap: balance; margin: 0; font-weight: 700; letter-spacing: -0.01em; }
  a { color: inherit; text-decoration: none; }
  button { font-family: inherit; }
  ::selection { background: var(--accent-soft); }

  /* Bat buoc >=16px tren MOI o nhap lieu (ke ca khong co class) — Safari/
     Chrome tren iPhone tu dong zoom trang khi cham vao o nhap chu nho hon
     16px, phai zoom tay ra lai sau do. Dat o day de la "san" chung, cac rule
     rieng (vd .field input) van giu 16px, khong bi ghi de xuong duoi nua. */
  input, select, textarea { font-size: 16px; }
  /* Bo tròn 4 góc cho mọi ô chọn (kể cả các select "Tất cả farm" đứng
     ngoài .field như diary.html/purchase.html, vốn chưa có bo góc gì) —
     dùng đúng giá trị 10px đã là quy ước sẵn có của .field select (yêu cầu
     2026-09-05). */
  select, .fake-input { border-radius: 14px; }

  .demo-banner {
    background: var(--warn-soft); color: var(--warn);
    border-bottom: 1px solid var(--warn); padding: calc(8px + var(--safe-top)) 16px 8px 16px; font-size: 12.5px;
    display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap;
    position: sticky; top: 0; z-index: 50; box-sizing: border-box;
  }

  .app-shell {
    display: grid;
    grid-template-columns: 248px 1fr;
    grid-template-rows: calc(56px + var(--safe-top)) auto 1fr;
    grid-template-areas:
      "sidebar topbar"
      "sidebar statusbar"
      "sidebar content";
    min-height: 100vh;
  }

  /* ---------- Thanh trạng thái (nhiệm vụ/cảnh báo farm) ---------- */
  .status-bar {
    grid-area: statusbar;
    display: flex; align-items: center; gap: 4px; padding: 6px 16px;
    background: var(--raised); border-bottom: 1px solid var(--line);
    position: sticky; top: calc(56px + var(--safe-top)); z-index: 6;
    min-width: 0;
  }
  .status-item {
    display: flex; align-items: center; gap: 7px; color: var(--ink);
    text-decoration: none; padding: 6px 11px; border-radius: 8px;
    border: none; background: transparent; font: inherit; cursor: pointer;
  }
  .status-item:hover { background: var(--raised-2); }
  .status-icon-wrap { position: relative; display: inline-flex; }
  .status-count {
    display: none; position: absolute; top: -6px; right: -8px;
    min-width: 16px; height: 16px; padding: 0 3px; border-radius: 9px;
    background: var(--bad); color: #fff; font-size: 10px; font-weight: 700;
    align-items: center; justify-content: center; line-height: 1;
    border: 2px solid var(--raised);
  }
  .status-count.show { display: flex; }

  /* ---------- Topbar ---------- */
  .topbar {
    grid-area: topbar;
    background: var(--raised);
    border-bottom: 1px solid var(--line);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--safe-top) 20px 0 20px;
    box-sizing: border-box;
    gap: 16px;
    position: sticky;
    top: 0;
    z-index: 5;
    min-width: 0; /* la grid item cua .app-shell — khong co dong nay se tu
      nong rong hon track theo noi dung topbar-right, day ca trang rong hon
      man hinh (yeu cau 2026-09-03, cung loi nhu .content). */
  }
  .topbar-left { display: flex; align-items: center; gap: 12px; min-width: 0; flex: 1 1 auto; }
  .topbar-left > div { min-width: 0; }
  .topbar-title { font-size: 15px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .topbar-sub { color: var(--ink-faint); font-size: 12px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .topbar-right { display: flex; align-items: center; gap: 14px; flex: none; }
  .topbar-right .btn { white-space: nowrap; }
  .role-demo {
    display: flex; align-items: center; gap: 8px;
    border: 1px solid var(--line); background: var(--raised-2);
    border-radius: 8px; padding: 5px 10px;
  }
  .role-demo label { font-size: 11px; color: var(--ink-faint); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; }
  .role-demo select {
    font-family: inherit; font-size: 12.5px; font-weight: 600; color: var(--ink);
    background: transparent; border: none; outline: none;
  }
  .user-badge { display: flex; align-items: center; gap: 8px; min-width: 0; }
  .user-avatar {
    width: 28px; height: 28px; border-radius: 999px; background: var(--accent);
    color: var(--accent-ink); display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 12px; object-fit: cover; flex: none;
  }
  .user-name {
    font-weight: 600; font-size: 13px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
  }

  /* ---------- Sidebar ---------- */
  /* Menu nổi, cách viền màn hình (Phương án J, yêu cầu 2026-09-17) — bo
     góc đều 4 phía + khoảng cách với mép trang/nội dung thay vì tràn viền
     như trước, để lộ màu nền trang (var(--ground)) làm rãnh xung quanh.
     top/height cộng đúng 2 lần --sidebar-gutter để giữ rãnh đều khi cuộn
     trang (sticky dùng top làm mốc, không phải margin-top). */
  .sidebar {
    --sidebar-gutter: 14px;
    grid-area: sidebar;
    background: var(--accent-fixed-dark);
    color: #F3F7F4;
    padding: 16px 12px 20px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    position: sticky;
    top: var(--sidebar-gutter);
    height: calc(100vh - 2 * var(--sidebar-gutter));
    margin: var(--sidebar-gutter) var(--sidebar-gutter) var(--sidebar-gutter) var(--sidebar-gutter);
    border-radius: 22px;
    box-shadow: 0 6px 18px rgba(10,40,32,0.28);
    overflow: hidden;
  }
  /* Vùng menu cuộn riêng, Logo (.brand) đứng yên phía trên (yêu cầu
     2026-09-17) — flex:1 chiếm hết phần còn lại của .sidebar, min-height:0
     là bắt buộc để flex item chịu co lại thay vì tự nong theo nội dung.
     Ẩn thanh cuộn mặc định, thay bằng 2 nút .nav-scroll-btn. */
  .nav-scroll {
    flex: 1; min-height: 0; overflow-y: auto;
    display: flex; flex-direction: column; gap: 4px;
    scrollbar-width: none; -ms-overflow-style: none;
  }
  .nav-scroll::-webkit-scrollbar { display: none; width: 0; height: 0; }
  .nav-scroll-btn {
    position: sticky; align-self: center; flex: none;
    width: 26px; height: 26px; border-radius: 999px;
    background: rgba(255,255,255,0.95); color: var(--accent-strong); border: none;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.28); cursor: pointer; z-index: 5;
    transition: background-color 0.15s ease, transform 0.1s ease;
  }
  .nav-scroll-btn:hover { background: #fff; }
  .nav-scroll-btn:active { transform: scale(0.88); }
  .nav-scroll-btn-up { top: 2px; margin-bottom: 4px; }
  .nav-scroll-btn-down { bottom: 2px; margin-top: 4px; }
  .brand {
    display: flex; align-items: center; gap: 11px;
    padding: 10px 10px 20px;
    margin-bottom: 6px;
    border-bottom: 1px solid rgba(255,255,255,0.14);
  }
  /* Logo LITECH ở đầu sidebar — trước quá nhỏ (30px) + nền trắng mờ 14%
     khiến logo (lá/cá/bánh răng/người) gần như lẫn vào nền xanh đậm, khó
     nhìn rõ chi tiết (phản hồi 2026-09-22: "hình khó nhìn quá... đang lẫn
     màu"). Nền đổi sang trắng đặc + bo tròn khớp hình dáng logo gốc (vòng
     xoáy chữ C) + tăng size rõ rệt — logo nổi hẳn khỏi nền, đọc rõ từng
     chi tiết. Đã cho Tùng xem trước bản demo trực tiếp rồi mới chốt. */
  .brand-mark {
    width: 54px; height: 54px; border-radius: 999px;
    background: #FFFFFF;
    display: flex; align-items: center; justify-content: center; flex: none;
    box-shadow: 0 2px 8px rgba(0,0,0,0.25);
  }
  .brand-name { font-weight: 700; font-size: 16px; letter-spacing: -0.01em; }
  .brand-tag { font-size: 11px; color: rgba(243,247,244,0.66); font-weight: 600; letter-spacing: 0.03em; }

  /* Đầu mục nhóm (Công việc / My Farm...) — đổi từ chữ hoa tô đậm + gạch
     chân sang chữ thường, cỡ nhỏ, không tô đậm, kiểu nhã hơn (yêu cầu
     2026-09-17, đi cùng menu nổi Phương án J — áp dụng cho cả sidebar
     desktop lẫn ngăn kéo điện thoại vì dùng chung 1 class). */
  .nav-group-label {
    font-size: 10.5px; letter-spacing: 0.02em;
    color: rgba(243,247,244,0.55); font-weight: 600;
    padding: 16px 12px 6px;
    position: relative;
  }
  .nav-item {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 12px; border-radius: 999px;
    font-size: 13.4px; font-weight: 600;
    color: rgba(243,247,244,0.94);
    cursor: pointer; border: none; background: transparent; text-align: left; width: 100%;
  }
  .nav-item svg { flex: none; opacity: 0.85; }
  .nav-item:hover { background: rgba(255,255,255,0.1); }
  /* Trang đang xem — hiện thành nút tô màu đặc hẳn (nền trắng, chữ xanh
     đậm) thay vì lớp phủ mờ cũ, để nổi bật rõ ràng giữa các mục còn lại
     (yêu cầu 2026-09-16: "Tên trang hiện tại sẽ làm dạng nút, tô màu nổi
     hẳn"). */
  .nav-item.active {
    background: #fff; color: var(--accent-strong); font-weight: 800;
    box-shadow: 0 2px 8px rgba(0,0,0,0.22);
  }
  .nav-item.active svg { opacity: 1; stroke: var(--accent-strong); }
  .nav-item.locked { opacity: 0.55; }
  /* Mục menu vừa xuất hiện sau khi cổ đông bổ nhiệm vị trí mới — tô nổi bật
     3 ngày để người nhận dễ nhận ra ngay (yêu cầu 2026-09-05), tự hết nổi
     bật sau đó (xem webapp/context_processors.py::_menu_moi). */
  .nav-item.nav-item-moi { color: #FFD166; font-weight: 700; }
  .nav-item.nav-item-moi svg { stroke: #FFD166; opacity: 1; }
  .nav-badge-moi {
    font-size: 8.5px; font-weight: 800; letter-spacing: 0.04em; color: #3A2A00;
    background: #FFD166; padding: 1px 5px; border-radius: 999px; margin-left: auto; flex: none;
  }
  /* Tem "Litech CĐ" — đánh dấu mục menu chỉ cổ đông xem được (Lịch & Thời
     tiết, Thông báo LITECH). Màu đỏ tía rượu vang, KHÔNG dùng bất kỳ màu
     nào khác đang có trong app (kể cả --bad đỏ cảnh báo) để không lẫn với
     ý nghĩa khác — cố ý nổi bật khác hẳn xanh thương hiệu (yêu cầu
     2026-09-22, phương án "nhóm 2, kiểu C" đã duyệt qua mockup). */
  .tem-cd {
    width: 17px; height: 17px; border-radius: 5px; flex: none;
    background: #8E2A55; color: #fff; font-size: 7px; font-weight: 800;
    display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-ui);
    vertical-align: middle;
  }
  .nav-badge-cd { margin-left: auto; }
  .nav-item .lock-tag {
    margin-left: auto; font-size: 9.5px; font-weight: 700; letter-spacing: 0.04em;
    background: rgba(255,255,255,0.16); padding: 2px 5px; border-radius: 4px;
  }
  .nav-item.hidden-role { display: none; }
  .hidden-role { display: none !important; }

  /* ---------- Content ---------- */
  /* min-width:0 la BAT BUOC tren grid item — mac dinh grid item khong co
     min-width:auto se tu nong rong hon track de "khong lam mat" noi dung
     con (vd bang responsive-cards/flex td khong chiu co lai), day ca trang
     rong hon man hinh du .app-shell dung dung 100vw (yeu cau 2026-09-03). */
  .content { grid-area: content; padding: 26px 28px 60px; max-width: 1180px; min-width: 0; }
  .view { display: none; }
  .view.active { display: block; }

  .view-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 20px; gap: 16px; flex-wrap: wrap; }
  /* Tên trang tô màu riêng (accent đậm), tách hẳn khỏi màu chữ thường — dễ
     nhận ra đang ở trang nào ngay khi lướt mắt (yêu cầu 2026-09-16: "Tên
     trang để khác màu cho dễ nhìn"). */
  .view-head h1 { font-size: 22px; font-weight: 800; color: var(--accent-strong); letter-spacing: -0.01em; }
  .view-desc { color: var(--ink-soft); font-size: 13px; margin-top: 4px; max-width: 62ch; }
  .view-actions { display: flex; gap: 8px; }

  .btn {
    font-size: 12.5px; font-weight: 600; padding: 7px 13px; border-radius: 999px;
    border: 1px solid var(--line); background: var(--raised); color: var(--ink);
    cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
  }
  .btn:hover { border-color: var(--ink-faint); }
  .btn-primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
  .btn-primary:hover { background: var(--accent-strong); border-color: var(--accent-strong); }
  .btn-good { background: var(--good); border-color: var(--good); color: #fff; }
  .btn-bad { background: transparent; border-color: var(--bad); color: var(--bad); }
  .btn-sm { padding: 5px 10px; font-size: 11.5px; }
  /* Thanh tác vụ gọn — nhiều nút hành động (in/tải file/đề xuất/duyệt/xóa…)
     gộp chung 1 hàng, mỗi nút icon riêng + chữ ngắn gọn, thay vì dàn hàng
     dài các nút full-text (yêu cầu 2026-09-16: "thiết kế thành nút nhỏ gọn
     để cùng 1 thanh tác vụ, mỗi nút có biểu tượng riêng"). */
  .action-toolbar { flex-wrap: wrap; gap: 6px; }
  .btn-compact { padding: 5px 10px; font-size: 11.5px; gap: 5px; }
  /* Nút chỉ icon (topbar: hồ sơ cá nhân/thoát/xem demo vai trò) — vuông,
     không chữ, có title/aria-label để vẫn đọc được bằng trình đọc màn hình
     (yêu cầu 2026-09-16: "thay bằng biểu tượng, ko để chữ"). */
  .btn-icon { width: 32px; height: 32px; padding: 0; justify-content: center; }
  .btn-icon svg { flex: none; }

  /* ---------- Stat tiles ---------- */
  .stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 22px; }
  .stat-tile {
    display: block; background: var(--raised); border-radius: 20px;
    padding: 15px 16px; box-shadow: var(--shadow); transition: box-shadow 0.15s ease, transform 0.15s ease;
    text-decoration: none; color: inherit; cursor: pointer;
  }
  .stat-tile:hover { box-shadow: 0 0 0 2px var(--accent-soft), 0 14px 32px -12px rgba(15,30,24,0.2); transform: translateY(-1px); }
  .stat-label { font-size: 11px; color: var(--ink-faint); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }
  .stat-value { font-family: var(--font-mono); font-size: 24px; font-weight: 700; margin-top: 6px; font-variant-numeric: tabular-nums; }
  .stat-delta { font-size: 11.5px; margin-top: 4px; color: var(--ink-faint); }
  .stat-tile.accent { box-shadow: 0 0 0 2px var(--accent), var(--shadow); }
  .stat-tile.accent .stat-value { color: var(--accent); }

  /* ---------- Cards / sections ---------- */
  .card {
    background: var(--raised); border-radius: 20px;
    box-shadow: var(--shadow); margin-bottom: 18px;
  }
  .card-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 18px; border-bottom: 1px solid var(--line-soft);
  }
  .card-head h3 { font-size: 14px; }
  .card-head .hint { font-size: 11.5px; color: var(--ink-faint); font-weight: 500; }
  .bulk-bar { padding: 10px 18px; border-bottom: 1px solid var(--line-soft); background: var(--accent-soft); }
  /* Module "phòng thí nghiệm" (Môi trường & đo kiểm nước, Tổng quan Trưởng
     phòng QLCL) — viền trên nhấn màu accent để nổi bật như 1 khu vực
     chuyên biệt, không đổi cả bảng màu (yêu cầu 2026-09-05). */
  .dash-lab-card { border-top: 3px solid var(--accent); }
  .dash-lab-card .card-head { background: var(--accent-soft); }
  .bulk-bar .hint { font-size: 12px; }
  .card-body { padding: 16px 18px; }
  .two-col { display: grid; grid-template-columns: 1.4fr 1fr; gap: 16px; align-items: start; }

  /* ---------- Sơ đồ tổ chức (Tổng quan) ---------- */
  .org-group-label { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-faint); font-weight: 700; margin-bottom: 6px; }
  .org-person { display: flex; align-items: center; gap: 8px; padding: 5px 0; font-size: 12.8px; font-weight: 600; }
  .org-person .dot { width: 24px; height: 24px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-strong); font-size: 10px; font-weight: 800; display: flex; align-items: center; justify-content: center; flex: none; object-fit: cover; }

  /* ---------- Sơ đồ nhân sự dạng cây (Thông tin farm) — mỗi đơn vị (phòng/
     farm) là 1 khối riêng, viền trên tô màu theo loại, bên trong xếp từng
     "vị trí" có avatar + tên + nhãn chức vụ, thay cho kiểu liệt kê tên
     suông cũ (yêu cầu 2026-09-16: "vẽ sơ đồ nhân sự, lắp tên người và biểu
     tượng đại diện vào từng vị trí"). Không vẽ đường nối — nhóm theo tầng
     (nhãn tầng phía trên mỗi hàng khối) đã đủ thể hiện thứ bậc mà không rối
     mắt trên khung hẹp/di động. ---------- */
  .org-tree-tier-label {
    font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 800;
    color: var(--ink-faint); margin-bottom: 8px; padding-top: 10px; border-top: 1px dashed var(--line);
  }
  .org-tree-tier-label:first-child { padding-top: 0; border-top: none; }
  .org-tree-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; margin-bottom: 4px; }
  .org-unit {
    background: var(--raised-2); border-top: 3px solid var(--mau-unit, var(--accent));
    border-radius: 16px; padding: 12px 14px; box-shadow: var(--shadow);
  }
  .org-unit-head { font-size: 13px; font-weight: 800; color: var(--mau-unit, var(--accent)); margin-bottom: 8px; }
  .org-unit-head .hint { font-weight: 600; text-transform: none; letter-spacing: 0; }
  .org-slot { display: flex; align-items: center; gap: 8px; padding: 5px 0; border-top: 1px dotted var(--line-soft); }
  .org-slot:first-of-type { border-top: none; }
  .org-slot .dot {
    width: 26px; height: 26px; border-radius: 999px; flex: none; object-fit: cover;
    background: var(--mau-unit-soft, var(--accent-soft));
    color: var(--mau-unit, var(--accent)); font-size: 10.5px; font-weight: 800;
    display: flex; align-items: center; justify-content: center;
  }
  .org-slot-name { font-size: 12.5px; font-weight: 700; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .org-slot-role { font-size: 10px; color: var(--ink-faint); font-weight: 700; white-space: nowrap; text-transform: uppercase; letter-spacing: 0.03em; }

  /* ---------- Table ---------- */
  .table-wrap { overflow-x: auto; }
  table { width: 100%; border-collapse: collapse; font-size: 13px; }
  thead th {
    text-align: left; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.05em;
    color: var(--ink-faint); font-weight: 700; padding: 9px 18px; border-bottom: 1px solid var(--line);
    white-space: nowrap;
  }
  .th-sort { color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: 3px; cursor: pointer; }
  .th-sort:hover { color: var(--accent); }
  tbody td { padding: 11px 18px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
  tbody tr:last-child td { border-bottom: none; }
  tbody tr:hover { background: var(--raised-2); }
  tbody tr.row-clickable { cursor: pointer; }
  .wrap-col { white-space: normal; max-width: 120px; font-size: 12px; line-height: 1.35; }
  td.num, th.num { text-align: right; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
  td.mono { font-family: var(--font-mono); font-size: 12.5px; color: var(--ink-soft); }
  .row-title { font-weight: 600; }
  .row-sub { color: var(--ink-faint); font-size: 11.5px; margin-top: 1px; }

  /* Bấm vào tên (file/người/farm) để bật menu hành động nhỏ ngay dưới, thay
     vì để sẵn 2-3 nút hành động luôn hiện trên mỗi dòng — đỡ rối mắt, nhất
     là trên bảng đã chuyển thành từng "thẻ" trên di động (.responsive-cards)
     (yêu cầu 2026-09-16). */
  .name-menu-btn {
    background: none; border: none; padding: 0; margin: 0; font: inherit;
    color: var(--ink); font-weight: 600; cursor: pointer; text-align: left;
    display: inline-flex; align-items: center; gap: 6px;
  }
  /* Nút tròn mũi tên ">" cạnh tên — báo cho biết bấm vào có thể sửa/xóa,
     nhún nhẹ qua lại khi rê chuột để thu hút mắt hơn (Phương án G trong 10
     phương án đã gửi Tùng duyệt qua artifact, yêu cầu 2026-09-17 — trước
     đó thử mũi tên "→" tĩnh, giờ đổi sang ">" + hiệu ứng nhún). Vẫn nằm
     trong CHÍNH .name-menu-btn (button bao trọn cả tên) nên bấm vào nút
     tròn này có tác dụng y hệt bấm vào tên, không cần thêm JS. */
  .name-menu-btn::after {
    content: ">"; display: inline-flex; align-items: center; justify-content: center;
    width: 18px; height: 18px; border-radius: 999px; flex: none;
    background: var(--accent-soft); color: var(--accent-strong);
    font-family: var(--font-mono, inherit); font-weight: 800; font-size: 11px; text-decoration: none;
    transition: background-color 0.15s ease, color 0.15s ease;
  }
  .name-menu-btn:hover::after {
    background: var(--accent); color: #fff;
    animation: name-menu-nudge 0.7s ease-in-out infinite;
  }
  .name-menu-btn:active::after { animation: none; transform: scale(0.85); }
  @keyframes name-menu-nudge {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(3px); }
  }
  .name-menu {
    display: none; gap: 6px; flex-wrap: wrap; margin-top: 8px;
  }
  .name-menu.open { display: flex; }

  /* ---------- Phân cấp giá trị trong bảng (yêu cầu 2026-09-16: "thông tin
     chính trong modul được làm nổi bật, có chia màu để đọc dễ hơn") — dùng
     trên các ô số liệu/kết quả để tách rõ số liệu CHÍNH (val-strong, vd dòng
     Tổng) khỏi số liệu phụ (val-muted, vd từng dòng chi tiết), và tô màu kết
     quả tốt/cần chú ý/xấu (val-good/val-warn/val-bad) tái dùng đúng bộ màu
     --good/--warn/--bad sẵn có, không thêm màu mới. ---------- */
  /* !important vì các ô áp dụng thường đã có sẵn .mono (td.mono đặt màu
     --ink-soft, specificity cao hơn 1 class thường) — class phân cấp này
     PHẢI luôn thắng để override đúng ý đồ, không phụ thuộc thứ tự khai báo. */
  .val-strong { font-size: 14.5px; font-weight: 800; color: var(--ink) !important; }
  .val-muted { font-size: 11.5px; color: var(--ink-faint) !important; }
  .val-good { font-weight: 700; color: var(--good) !important; }
  .val-warn { font-weight: 700; color: var(--warn) !important; }
  .val-bad { font-weight: 700; color: var(--bad) !important; }

  /* ---------- Module kéo-thả có viền màu + tiêu đề nổi bật riêng (yêu cầu
     2026-09-16, sửa lại 2026-09-16: bỏ hẳn icon — Tùng thấy không ổn — thay
     bằng làm nổi TIÊU ĐỀ module qua màu sắc + kích thước). Mỗi module tự đặt
     biến --mau-mod (lấy đúng từ bộ màu --accent/--info/--warn/--good/--bad
     sẵn có, không thêm màu mới) qua inline style — viền trái CỦA CARD lấy
     màu đó, tiêu đề h3 trong card-head cũng tô cùng màu + phóng to + đậm hơn
     hẳn h3 thường, để mắt bắt được ngay tên module khi lướt nhanh. Dùng
     chung cho mọi trang có khối kéo-thả (đi kèm htqtInitModuleDrag ở
     base_sidebar.html) — trang nào áp dụng thì bọc đúng theo mẫu này, trang
     chưa áp dụng (Tổng quan/Vault hiện tại) không bị ảnh hưởng vì chỉ
     .mod-card mới nhận các style này. ---------- */
  .mod-card { cursor: grab; margin-bottom: 10px; }
  .mod-card.dragging { opacity: .45; }
  .mod-card.dragging .mod-drag { cursor: grabbing; }
  .mod-card > .card { border-left: 4px solid var(--mau-mod, var(--line)); margin-bottom: 0; }
  .mod-card > .card > .card-head h3 { font-size: 16.5px; font-weight: 800; color: var(--mau-mod, var(--ink)); letter-spacing: -0.01em; }
  .mod-drag { color: var(--ink-faint); font-size: 16px; cursor: grab; padding: 2px 6px; margin-left: 8px; }
  .mod-alert-sub { color: var(--bad); font-weight: 700; }

  /* ---------- Pills ---------- */
  .pill {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px;
    white-space: nowrap;
  }
  .pill::before { content: ""; width: 6px; height: 6px; border-radius: 999px; background: currentColor; }
  .pill-good { background: var(--good-soft); color: var(--good); }
  .pill-warn { background: var(--warn-soft); color: var(--warn); }
  .pill-bad { background: var(--bad-soft); color: var(--bad); }
  .pill-neutral { background: var(--neutral-soft); color: var(--ink-soft); }
  .pill-accent { background: var(--accent-soft); color: var(--accent); }
  .pill-info { background: var(--info-soft); color: var(--info); }
  /* Chức vụ/nhãn dài (vd cổ đông kiêm nhiều chức vụ) — cho phép xuống dòng
     trong đúng khổ thẻ thay vì tràn ra ngoài như .pill mặc định (nowrap),
     yêu cầu 2026-09-17. */
  .pill-wrap { white-space: normal; text-align: left; line-height: 1.4; }
  .pill-critical { background: #1A1A1A; color: #F5F5F5; }

  /* ---------- Biểu đồ công việc (cột SVG vẽ tay) ---------- */
  .chart-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
  /* Bo tròn hẳn (pill) + nút đang chọn tô màu ĐẶC thay vì chỉ đổi màu chữ
     nhạt — nổi bật rõ đang ở lựa chọn nào (yêu cầu 2026-09-16: "làm nổi bật
     nút đang mở hiện tại, bôi màu nổi bật cả nút"). Mỗi nút có thể tự đặt
     --mau-toggle riêng qua inline style (vd mỗi chỉ số thời tiết 1 màu) —
     mặc định dùng accent thương hiệu khi không đặt riêng. */
  .chart-toggle { display: flex; background: var(--raised-2); border-radius: 999px; padding: 3px; gap: 2px; flex-wrap: wrap; }
  .chart-toggle a, .chart-toggle button { font-size: 11.5px; font-weight: 700; padding: 7px 14px; border-radius: 999px; color: var(--ink-soft); text-decoration: none; }
  .chart-toggle a.active, .chart-toggle button.active { background: var(--mau-toggle, var(--accent)); color: #fff; box-shadow: var(--shadow); }

  /* ---------- Tab trang (Nhiệm vụ / Kiến nghị & Sự cố / Công việc theo
     phòng) — mỗi tab 1 màu riêng để dễ phân biệt, tab hiện hành nổi bật hẳn
     lên bằng nền đặc màu đó (yêu cầu 2026-09-04). */
  .page-tabs { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
  .page-tabs a {
    font-size: 12.5px; font-weight: 700; padding: 8px 16px; border-radius: 10px;
    text-decoration: none; border: 1.5px solid transparent; cursor: pointer;
    transition: transform 0.1s ease, box-shadow 0.15s ease;
  }
  .page-tabs a:hover { transform: translateY(-1px); }
  .page-tabs a.tab-nhiemvu { color: var(--accent-strong); background: var(--accent-soft); }
  .page-tabs a.tab-nhiemvu.active { color: #fff; background: var(--accent); box-shadow: 0 4px 12px -4px rgba(14,107,88,0.55); }
  .page-tabs a.tab-kiennghi { color: var(--warn); background: var(--warn-soft); }
  .page-tabs a.tab-kiennghi.active { color: #fff; background: var(--warn); box-shadow: 0 4px 12px -4px rgba(184,121,26,0.55); }
  .page-tabs a.tab-phongban { color: var(--info); background: var(--info-soft); }
  .page-tabs a.tab-phongban.active { color: #fff; background: var(--info); box-shadow: 0 4px 12px -4px rgba(42,111,181,0.55); }
  .page-tabs a.tab-kho-farm { color: var(--accent-strong); background: var(--accent-soft); }
  .page-tabs a.tab-kho-farm.active { color: #fff; background: var(--accent-fixed-dark); box-shadow: 0 4px 12px -4px rgba(10,77,64,0.55); }
  .page-tabs a.tab-kho-tong { color: var(--info); background: var(--info-soft); }
  .page-tabs a.tab-kho-tong.active { color: #fff; background: var(--info); box-shadow: 0 4px 12px -4px rgba(42,111,181,0.55); }
  .page-tabs a.tab-ncc { color: var(--good); background: var(--good-soft); }
  .page-tabs a.tab-ncc.active { color: #fff; background: var(--good); box-shadow: 0 4px 12px -4px rgba(46,125,70,0.55); }
  .page-tabs a.tab-dai-ly { color: var(--warn); background: var(--warn-soft); }
  .page-tabs a.tab-dai-ly.active { color: #fff; background: var(--warn); box-shadow: 0 4px 12px -4px rgba(184,121,26,0.55); }
  .page-tabs a.tab-doi-tac-farm { color: var(--bad); background: var(--bad-soft); }
  .page-tabs a.tab-doi-tac-farm.active { color: #fff; background: var(--bad); box-shadow: 0 4px 12px -4px rgba(178,58,52,0.55); }
  .page-tabs a.tab-nhanvien { color: var(--accent-strong); background: var(--accent-soft); }
  .page-tabs a.tab-nhanvien.active { color: #fff; background: var(--accent); box-shadow: 0 4px 12px -4px rgba(14,107,88,0.55); }
  .page-tabs a.tab-vunuoi { color: var(--accent-strong); background: var(--accent-soft); }
  .page-tabs a.tab-vunuoi.active { color: #fff; background: var(--accent); box-shadow: 0 4px 12px -4px rgba(14,107,88,0.55); }
  .page-tabs a.tab-sodo { color: var(--info); background: var(--info-soft); }
  .page-tabs a.tab-sodo.active { color: #fff; background: var(--info); box-shadow: 0 4px 12px -4px rgba(42,111,181,0.55); }
  .chart-legend { display: flex; gap: 14px; font-size: 11px; color: var(--ink-soft); margin: 8px 0 2px; flex-wrap: wrap; }
  .chart-legend .sw { width: 9px; height: 9px; border-radius: 3px; display: inline-block; margin-right: 5px; }
  /* Gọn lại — trước đây height:auto theo tỉ lệ viewBox khiến biểu đồ chiếm
     rất nhiều chiều cao màn hình (yêu cầu 2026-09-03), giới hạn max-height
     giữ chart luôn nhỏ gọn kể cả khi có nhiều cột dữ liệu. */
  .chart-svg { width: 100%; height: auto; max-height: 150px; display: block; margin: 0 auto; }
  @media (max-width: 860px) { .chart-svg { max-height: 120px; } }
  .chart-empty { color: var(--ink-faint); font-size: 12.5px; text-align: center; padding: 24px 0; }

  /* ---------- Vỏ giao diện Đối tác dự án (thân thiện, chỉ xem) ---------- */
  .dt-shell { min-height: 100vh; background: var(--ground); }
  .dt-topbar {
    display: flex; align-items: center; justify-content: space-between;
    padding: calc(18px + var(--safe-top)) 28px 18px 28px; background: var(--raised); border-bottom: 1px solid var(--line);
    box-sizing: border-box;
  }
  .dt-brand { display: flex; align-items: center; gap: 11px; }
  .dt-logo { width: 36px; height: 36px; border-radius: 12px; background: var(--accent-soft); display: flex; align-items: center; justify-content: center; padding: 4px; box-shadow: inset 0 1px 1px rgba(255,255,255,.6), inset 0 -6px 10px -6px rgba(14,107,88,.25); }
  .dt-logo img { width: 100%; height: 100%; object-fit: contain; }
  .dt-brand-name { font-weight: 800; font-size: 15px; }
  .dt-brand-sub { font-size: 11px; color: var(--ink-faint); }
  .dt-user { display: flex; align-items: center; gap: 12px; }
  .dt-user-name { font-size: 13px; font-weight: 700; }
  .dt-user-role { font-size: 11px; color: var(--ink-faint); }
  .dt-avatar { width: 32px; height: 32px; border-radius: 999px; background: var(--warn); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 12px; object-fit: cover; flex: none; }
  .dt-tabs { display: flex; gap: 22px; padding: 0 28px; background: var(--raised); border-bottom: 1px solid var(--line); overflow-x: auto; }
  .dt-tab { padding: 13px 2px; font-size: 13px; font-weight: 700; color: var(--ink-faint); border-bottom: 2.5px solid transparent; text-decoration: none; white-space: nowrap; }
  .dt-tab.active { color: var(--accent-strong); border-color: var(--accent); }
  .dt-content { padding: 26px 28px 48px; max-width: 1080px; margin: 0 auto; }

  .dt-farm-card {
    background: linear-gradient(135deg, var(--accent-strong), var(--accent)); border-radius: 22px;
    padding: 22px 26px; color: #fff; display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; align-items: center;
    box-shadow: var(--shadow); margin-bottom: 20px;
  }
  .dt-farm-name { font-size: 18px; font-weight: 800; }
  .dt-farm-loc { font-size: 12.5px; opacity: .85; margin-top: 3px; }
  .dt-farm-stats { display: flex; gap: 26px; flex-wrap: wrap; }
  .dt-farm-stat-label { font-size: 10px; text-transform: uppercase; letter-spacing: .06em; opacity: .75; }
  .dt-farm-stat-value { font-size: 16px; font-weight: 800; font-family: var(--font-mono); margin-top: 2px; }

  /* ---------- Vỏ giao diện Nông dân (di động, tối giản) ---------- */
  .nd-shell { min-height: 100vh; background: var(--ground); display: flex; flex-direction: column; }
  .nd-header {
    padding: 20px 18px 16px; background: var(--raised); border-bottom: 1px solid var(--line);
    display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  }
  .nd-greeting { font-size: 19px; font-weight: 800; }
  .nd-header-sub { font-size: 12.5px; color: var(--ink-soft); margin-top: 3px; }
  .nd-header-right { display: flex; align-items: center; gap: 10px; flex: none; }
  .nd-logo { width: 30px; height: 30px; border-radius: 11px; background: var(--accent-soft); display: flex; align-items: center; justify-content: center; padding: 3px; box-shadow: inset 0 1px 1px rgba(255,255,255,.6), inset 0 -5px 8px -5px rgba(14,107,88,.25); }
  .nd-logo img { width: 100%; height: 100%; object-fit: contain; }
  .nd-logout { width: 34px; height: 34px; border-radius: 999px; border: none; background: var(--raised-2); color: var(--ink-soft); display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow); }
  .nd-content { padding: 16px; display: flex; flex-direction: column; gap: 12px; flex: 1; max-width: 520px; width: 100%; margin: 0 auto; box-sizing: border-box; }

  .nd-task-card { background: var(--raised); border-radius: 20px; box-shadow: var(--shadow); display: flex; overflow: hidden; }
  .nd-task-band { width: 8px; flex: none; }
  .nd-task-band.st-chua-nhan { background: var(--ink-faint); }
  .nd-task-band.st-dang-lam { background: var(--warn); }
  .nd-task-band.st-hoan-thanh { background: var(--good); }
  .nd-task-body { flex: 1; padding: 15px 16px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
  .nd-task-name { font-size: 16px; font-weight: 800; line-height: 1.3; }
  .nd-task-meta { font-size: 12.5px; color: var(--ink-faint); }
  .nd-pill-row { display: flex; align-items: center; justify-content: space-between; margin-top: 2px; }
  .nd-pill { font-size: 12px; font-weight: 800; padding: 5px 12px; border-radius: 999px; }
  .nd-pill.st-chua-nhan { background: var(--neutral-soft); color: var(--ink-soft); }
  .nd-pill.st-dang-lam { background: var(--warn-soft); color: var(--warn); }
  .nd-pill.st-hoan-thanh { background: var(--good-soft); color: var(--good); }
  /* 1 hang ngang, moi nut chia deu chieu rong the — "vua du de nhan" thay
     vi xep chong doc chiem het chieu cao the (yeu cau 2026-09-04). */
  .nd-actions { display: flex; flex-direction: row; gap: 7px; padding: 0 14px 14px; }
  .nd-actions form { display: contents; }
  .nd-action-btn {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
    padding: 9px 4px; border-radius: 11px; border: none; flex: 1; min-width: 0;
    font-size: 11px; font-weight: 800; text-align: center; font-family: var(--font-ui); cursor: pointer;
  }
  .nd-action-icon { width: 24px; height: 24px; border-radius: 8px; background: rgba(255,255,255,.5); display: flex; align-items: center; justify-content: center; flex: none; }
  .nd-action-icon svg { width: 14px; height: 14px; }
  .nd-btn-nhan { background: var(--info-soft); color: var(--info); }
  .nd-btn-nhan .nd-action-icon svg { stroke: var(--info); }
  .nd-btn-xong { background: var(--good-soft); color: var(--good); }
  .nd-btn-xong .nd-action-icon svg { stroke: var(--good); }
  .nd-btn-sucos { background: var(--bad-soft); color: var(--bad); }
  .nd-btn-sucos .nd-action-icon svg { stroke: var(--bad); }
  .nd-harvest-module { background: var(--raised); border-radius: 20px; box-shadow: var(--shadow); padding: 14px; margin-bottom: 14px; }
  .nd-harvest-list { margin-top: 12px; display: flex; flex-direction: column; }
  .nd-harvest-list-title { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-faint); margin-bottom: 4px; }
  .nd-harvest-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 0; border-top: 1px solid var(--line-soft); }
  .nd-harvest-row:first-of-type { border-top: none; }
  .nd-harvest-name { font-size: 13.5px; font-weight: 700; }
  .nd-harvest-meta { font-size: 11px; color: var(--ink-faint); margin-top: 1px; }
  .nd-empty { text-align: center; color: var(--ink-faint); font-size: 13px; padding: 40px 20px; }
  .nd-legend { display: flex; flex-wrap: wrap; gap: 10px 16px; font-size: 11px; color: var(--ink-faint); padding: 2px 2px 4px; }
  .nd-legend .dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; margin-right: 5px; vertical-align: middle; }

  /* ---------- Stepper (routing hub) ---------- */
  .stepper { display: flex; align-items: flex-start; gap: 0; padding: 6px 4px 2px; }
  .step { display: flex; flex-direction: column; align-items: center; flex: 1; position: relative; }
  .step-dot {
    width: 22px; height: 22px; border-radius: 999px; border: 2px solid var(--line);
    background: var(--raised); display: flex; align-items: center; justify-content: center;
    font-size: 10px; font-weight: 800; color: var(--ink-faint); z-index: 1;
  }
  .step-line {
    position: absolute; top: 11px; left: 50%; width: 100%; height: 2px; background: var(--line); z-index: 0;
  }
  .step:first-child .step-line { display: none; }
  .step-label { font-size: 10.8px; font-weight: 600; color: var(--ink-faint); margin-top: 6px; text-align: center; max-width: 92px; }
  .step.done .step-dot { background: var(--good); border-color: var(--good); color: #fff; }
  .step.done .step-line { background: var(--good); }
  .step.done .step-label { color: var(--ink); }
  .step.current .step-dot { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); box-shadow: 0 0 0 4px var(--accent-soft); }
  .step.current .step-label { color: var(--accent); font-weight: 700; }

  .routing-card { padding: 16px 18px; }
  .routing-title { font-weight: 700; font-size: 13.5px; }
  .routing-meta { color: var(--ink-faint); font-size: 11.5px; margin-top: 2px; }
  .routing-note {
    margin-top: 12px; padding: 9px 12px; background: var(--raised-2); border: 1px solid var(--line-soft);
    border-radius: 8px; font-size: 12px; color: var(--ink-soft);
  }

  /* ---------- Timeline (confirmations) ---------- */
  .timeline { display: flex; flex-direction: column; gap: 0; }
  .tl-item { display: grid; grid-template-columns: 88px 16px 1fr; gap: 10px; }
  .tl-time { font-family: var(--font-mono); font-size: 11px; color: var(--ink-faint); padding-top: 2px; text-align: right; }
  .tl-rail { display: flex; flex-direction: column; align-items: center; }
  .tl-dot { width: 9px; height: 9px; border-radius: 999px; background: var(--accent); margin-top: 5px; }
  .tl-bar { flex: 1; width: 1px; background: var(--line); margin-top: 3px; }
  .tl-item:last-child .tl-bar { display: none; }
  .tl-body { padding-bottom: 16px; font-size: 12.8px; }
  .tl-who { font-weight: 700; }

  /* ---------- Form mock ---------- */
  .form-mock { display: flex; flex-direction: column; gap: 12px; }
  .field { display: flex; flex-direction: column; gap: 5px; }
  .field label { font-size: 11.5px; font-weight: 600; color: var(--ink-soft); }
  .field .fake-input, .field select, .field textarea,
  .field input[type="text"], .field input[type="number"], .field input[type="date"],
  .field input[type="password"], .field input[type="email"], .field input[type="file"] {
    /* font-size >=16px la bat buoc — Safari/Chrome tren iPhone tu dong zoom
       vao trang khi cham vao o nhap co chu nho hon 16px, nguoi dung phai tu
       zoom ra lai sau do. Day la nguyen nhan "phai zoom out/in thuong xuyen". */
    border: 1px solid var(--line); border-radius: 14px; padding: 8px 10px; font-size: 16px;
    font-family: inherit; background: var(--raised-2); color: var(--ink); width: 100%;
  }
  .field select:focus, .field textarea:focus, .field input:focus {
    outline: 2px solid var(--accent); outline-offset: 1px;
  }
  /* Nút "Choose Files"/"Chọn tệp" là 1 pseudo-element riêng của trình duyệt,
     KHÔNG tự thừa hưởng border-radius của input cha — phải bo tròn riêng
     (yêu cầu 2026-09-06, áp dụng mọi input[type=file] toàn hệ thống). */
  input[type="file"]::file-selector-button,
  input[type="file"]::-webkit-file-upload-button {
    font-size: 12.5px; font-weight: 600; padding: 6px 12px; border-radius: 8px;
    border: 1px solid var(--line); background: var(--raised); color: var(--ink);
    cursor: pointer; margin-right: 8px;
  }
  input[type="file"]::file-selector-button:hover,
  input[type="file"]::-webkit-file-upload-button:hover { border-color: var(--ink-faint); }
  .field textarea { resize: vertical; min-height: 58px; }
  .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .field-errors { color: var(--bad); font-size: 11.5px; margin: 0; list-style: none; padding: 0; }
  .form-errors {
    background: var(--bad-soft); color: var(--bad); border-radius: 9px; padding: 10px 13px;
    font-size: 12.5px; margin-bottom: 12px;
  }
  .checkbox-field { flex-direction: row; align-items: center; gap: 8px; }
  .checkbox-field input { width: auto; }

  /* ---------- Vault ---------- */
  .lock-screen {
    display: flex; flex-direction: column; align-items: center; text-align: center;
    padding: 64px 24px; gap: 12px; background: var(--raised);
    border-radius: 22px; box-shadow: var(--shadow);
  }
  .lock-icon-big {
    width: 52px; height: 52px; border-radius: 999px; background: var(--warn-soft);
    display: flex; align-items: center; justify-content: center; color: var(--warn);
  }
  .lock-screen h2 { font-size: 17px; margin-top: 6px; }
  .lock-screen p { color: var(--ink-soft); font-size: 13px; max-width: 44ch; margin: 0; }
  .masked { font-family: var(--font-mono); color: var(--ink-faint); letter-spacing: 0.02em; }

  .avatar-chip { display: inline-flex; align-items: center; gap: 6px; }
  .avatar-chip .dot { width: 20px; height: 20px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-size: 9.5px; font-weight: 800; display: flex; align-items: center; justify-content: center; object-fit: cover; }

  .farm-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 20px; }
  .farm-card { background: var(--raised); border-radius: 20px; padding: 16px 17px; box-shadow: var(--shadow); }
  .farm-card-head { display: flex; align-items: center; justify-content: space-between; }
  .farm-code { font-family: var(--font-mono); font-size: 11px; font-weight: 700; color: var(--accent); background: var(--accent-soft); padding: 2px 7px; border-radius: 5px; }
  .farm-name { font-weight: 700; font-size: 14px; margin-top: 8px; }
  .farm-loc { color: var(--ink-faint); font-size: 11.5px; margin-top: 2px; }
  .farm-stats { display: flex; gap: 16px; margin-top: 12px; }
  .farm-stat-label { font-size: 10px; color: var(--ink-faint); text-transform: uppercase; letter-spacing: 0.04em; font-weight: 700; }
  .farm-stat-value { font-family: var(--font-mono); font-weight: 700; font-size: 13.5px; margin-top: 2px; }
  .farm-card.is-setup { border: 1.5px dashed var(--warn); }

  /* ---------- Thẻ tài khoản (Nhân viên & tài khoản) / thẻ đối tác (Nhà
     cung cấp) — mỗi bản ghi 1 thẻ riêng thay vì 1 dòng bảng dài tràn
     ngang, avatar/chữ cái đầu đóng vai trò "logo" riêng của thẻ (yêu cầu
     2026-09-16: "mỗi tài khoản là 1 thẻ, có gắn thêm logo biểu tượng riêng
     của thẻ đấy"). Viền trái tô màu theo LOẠI tài khoản/đối tác — cùng quy
     ước màu đã dùng cho module (--mau-the qua inline style mỗi thẻ). ---------- */
  .staff-grid, .ncc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; margin-bottom: 20px; }
  .staff-card, .ncc-card {
    background: var(--raised); border-left: 4px solid var(--mau-the, var(--line));
    border-radius: 18px; padding: 15px 16px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 10px;
  }
  .staff-card-top, .ncc-card-top { display: flex; align-items: flex-start; gap: 10px; }
  .staff-avatar, .ncc-avatar {
    width: 42px; height: 42px; border-radius: 999px; flex: none; object-fit: cover;
    background: var(--mau-the-soft, var(--neutral-soft)); color: var(--mau-the, var(--ink-soft));
    font-size: 14px; font-weight: 800; display: flex; align-items: center; justify-content: center;
  }
  .staff-card-id, .ncc-card-id { flex: 1; min-width: 0; }
  .staff-card-name { font-size: 14.5px; font-weight: 800; color: var(--ink); }
  .staff-card-user { font-family: var(--font-mono); font-size: 11px; color: var(--ink-faint); margin-top: 1px; }
  .staff-card-type { flex: none; }
  .staff-card-roles { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
  .staff-card-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; font-size: 11.5px; border-top: 1px solid var(--line-soft); padding-top: 10px; }
  .staff-card-meta .k { color: var(--ink-faint); font-weight: 600; text-transform: uppercase; font-size: 9.5px; letter-spacing: 0.03em; display: block; margin-bottom: 2px; }
  .staff-card-actions { display: flex; gap: 6px; flex-wrap: wrap; border-top: 1px solid var(--line-soft); padding-top: 10px; }
  .ncc-card-title { font-size: 14px; font-weight: 800; }
  .ncc-card-row { font-size: 12px; color: var(--ink-soft); display: flex; gap: 6px; }
  .ncc-card-row .k { color: var(--ink-faint); flex: none; min-width: 60px; }
  .ncc-card-actions { display: flex; gap: 6px; border-top: 1px solid var(--line-soft); padding-top: 10px; margin-top: 2px; }

  /* ---------- Thẻ nhân viên kiểu ID badge (Nhân viên & tài khoản, thiết kế
     duyệt qua mockup 2026-09-17) — dải màu dọc bên trái = nhóm quản lý
     (--mau-nhom qua inline style mỗi thẻ: phòng ban/đối tác farm/nhân viên
     farm, tài khoản demo ghi đè xám), tên phòng/farm phụ trách đọc dọc,
     chức vụ liệt kê dọc dưới tên, mặc định gọn — bấm nút mũi tên góc trên
     mới hiện chi tiết (checklist/KPI/nút thao tác). Dùng class riêng
     idcard-*, KHÔNG tái dùng .staff-card (đang dùng ở vault.html cho thẻ
     Cổ đông sáng lập, layout khác hẳn). ---------- */
  .idcard-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; margin-bottom: 20px; }
  .idcard { background: var(--raised); border-radius: 18px; box-shadow: var(--shadow); overflow: hidden; position: relative; display: flex; min-height: 300px; }
  .idcard-stripe { width: 30px; flex: none; background: var(--mau-nhom); position: relative; overflow: hidden; }
  /* Vân vòng cung đồng tâm riêng cho thẻ Ban Quản lý tổng — đồng màu, chỉ
     khác độ sáng nhẹ để tạo hoạ tiết chìm kiểu vải/giấy cao cấp, theo đúng
     ảnh mẫu Tùng gửi (yêu cầu 2026-09-16: "màu thẻ của cổ đông để màu và
     vân giống ảnh này"). */
  .idcard[data-nhom="bqlt"] .idcard-stripe {
    background-image: repeating-radial-gradient(circle at 120% 130%, rgba(255,255,255,0.09) 0px, rgba(255,255,255,0.09) 1.5px, transparent 1.5px, transparent 11px);
  }
  .idcard-stripe-label { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 10px 0; }
  .idcard-stripe-label span {
    writing-mode: vertical-rl; transform: rotate(180deg); color: #fff; font-weight: 800; font-size: 10.5px;
    letter-spacing: 0.14em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-height: 100%;
  }
  .idcard-main { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; padding: 14px 10px 12px; position: relative; }
  .idcard-expand {
    position: absolute; top: 8px; right: 9px; width: 22px; height: 22px; border-radius: 999px; border: 1px solid var(--line);
    background: var(--raised-2); color: var(--ink-soft); display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: transform .15s ease, background-color .15s, color .15s;
  }
  .idcard-expand:hover { background: var(--mau-nhom-soft); color: var(--mau-nhom); }
  .idcard-expand.open { transform: rotate(180deg); background: var(--mau-nhom-soft); color: var(--mau-nhom); }
  .idcard-topbar { display: flex; align-items: center; justify-content: space-between; gap: 6px; width: 100%; padding-right: 20px; }
  .idcard-logo { display: flex; align-items: center; gap: 5px; font-weight: 800; font-size: 10.5px; color: var(--ink); letter-spacing: 0.03em; }
  .idcard-logo .mark { width: 16px; height: 16px; border-radius: 5px; background: var(--accent); flex: none; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 9px; font-weight: 800; }
  /* Nút tròn màu theo KPI tự động (webapp/status.py) — thay đèn giao thông
     3 nút bằng đúng 1 nút, giữ logo LITECH (yêu cầu 2026-09-16). */
  /* Vòng cung năng lượng KPI — % cố định theo màu (webapp/status.py), tính
     sẵn ở view. Mỗi .kpi-* chỉ đổi --c (màu vòng tô) — chu vi/độ lệch nét
     đã in sẵn trong thuộc tính stroke-dasharray/dashoffset ở template. */
  .idcard-kpi-ring { position: relative; width: 26px; height: 26px; flex: none; }
  .idcard-kpi-ring svg { transform: rotate(-90deg); }
  .idcard-kpi-ring .track { fill: none; stroke: var(--line-soft); stroke-width: 2.6; }
  .idcard-kpi-ring .fill { fill: none; stroke: var(--c, var(--line)); stroke-width: 2.6; stroke-linecap: round; transition: stroke-dashoffset .3s; }
  .idcard-kpi-pct { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 7.5px; font-weight: 800; color: var(--c, var(--ink-faint)); }
  .idcard-kpi-ring.kpi-xanh { --c: var(--good); }
  .idcard-kpi-ring.kpi-vang { --c: var(--warn); }
  .idcard-kpi-ring.kpi-do { --c: var(--bad); }
  .idcard-kpi-ring.kpi-den { --c: #1A1A1A; }
  .idcard-kpi-ring.kpi-chua_co_du_lieu, .idcard-kpi-ring.kpi-none { --c: var(--line); }
  .idcard-photo-stack { position: relative; width: 74px; height: 74px; margin: 12px 0 8px; flex: none; }
  .idcard-photo-accent { position: absolute; width: 66px; height: 66px; border-radius: 22px; background: var(--mau-nhom-soft); top: 8px; left: 8px; }
  .idcard-avatar {
    position: relative; width: 66px; height: 66px; border-radius: 999px; object-fit: cover;
    background: var(--mau-nhom-soft); color: var(--mau-nhom); border: 3px solid var(--raised); box-shadow: var(--shadow);
    display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 17px;
  }
  .idcard-dot-status { position: absolute; right: -1px; bottom: -1px; width: 13px; height: 13px; border-radius: 999px; background: var(--good); border: 2.5px solid var(--raised); z-index: 1; }
  .idcard-dot-status.locked { background: var(--ink-faint); }
  .idcard-name { font-size: 13px; font-weight: 800; color: var(--ink); text-align: center; text-transform: uppercase; letter-spacing: 0.01em; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .idcard-roles { display: flex; flex-direction: column; align-items: center; gap: 1px; margin-top: 4px; }
  .idcard-role { font-size: 10px; font-weight: 700; color: var(--mau-nhom); text-transform: uppercase; letter-spacing: 0.04em; text-align: center; }
  .idcard-role .sub { display: block; font-size: 9px; font-weight: 600; color: var(--ink-faint); text-transform: none; letter-spacing: 0; margin-top: 0.5px; }
  .idcard-fields { margin-top: auto; padding-top: 10px; display: flex; flex-direction: column; align-items: center; gap: 5px; width: 100%; }
  .idcard-barcode { display: flex; align-items: flex-end; gap: 1.4px; height: 20px; }
  .idcard-barcode span { width: 1.8px; background: var(--ink-faint); border-radius: 1px; display: block; }
  .idcard-id { font-size: 9.5px; font-weight: 700; font-family: var(--font-mono); color: var(--ink-soft); letter-spacing: 0.03em; }
  .idcard-detail { display: none; flex-direction: column; gap: 8px; width: 100%; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line-soft); }
  .idcard-detail.open { display: flex; }
  .idcard-detail { width: 100%; box-sizing: border-box; }
  .idcard-detail .staff-card-roles { justify-content: center; max-width: 100%; }
  .idcard-detail .staff-card-roles .pill { max-width: 100%; box-sizing: border-box; }
  .idcard-detail .staff-card-meta { grid-template-columns: 1fr; text-align: left; border-top: none; padding-top: 0; }
  .idcard-detail .staff-card-actions { justify-content: center; border-top: none; padding-top: 0; }

  /* ---------- Thư viện ---------- */
  .library-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 20px; }
  .book-card { display: flex; flex-direction: column; }
  .book-cover {
    display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
    aspect-ratio: 3 / 4; border-radius: 8px; box-shadow: var(--shadow); overflow: hidden; position: relative;
    color: #fff; padding: 14px; text-decoration: none;
  }
  .book-cover img { width: 100%; height: 100%; object-fit: cover; }
  .book-cover-icon { font-size: 34px; line-height: 1; margin-bottom: 8px; }
  .book-cover-label { font-size: 10px; font-weight: 800; letter-spacing: 0.06em; opacity: 0.85; margin-bottom: 10px; }
  .book-cover-title { font-size: 12px; font-weight: 700; line-height: 1.35; }
  .book-info { padding-top: 9px; }
  .book-title { font-size: 12.5px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .book-meta { font-size: 11px; color: var(--ink-faint); margin-top: 2px; }
  .book-actions { display: flex; gap: 5px; margin-top: 7px; flex-wrap: wrap; }
  /* ---------- Bảng thời tiết + âm lịch + lời khuyên (trên trang Tin tức) ---------- */
  /* Gọn theo kiểu widget thời tiết Google (yêu cầu 2026-09-11): tóm tắt hôm
     nay bên trái, giờ/mô tả/âm lịch bên phải, 2 tab biểu đồ theo giờ (nhiệt
     độ/lượng mưa — bỏ hẳn mục gió riêng), dự báo nhiều ngày rút gọn. */
  .wx-card {
    background: var(--raised); border-radius: 20px;
    box-shadow: var(--shadow); padding: 14px 16px 12px; margin: 0 0 22px; max-width: 640px;
  }
  .wx-top { display: flex; align-items: flex-start; gap: 12px; padding-bottom: 10px; }
  .wx-icon { width: 38px; height: 38px; flex: none; color: var(--accent); }
  .wx-icon svg { width: 100%; height: 100%; }
  .wx-now { flex: 1; min-width: 0; }
  .wx-temp { font-size: 22px; font-weight: 800; line-height: 1.1; }
  .wx-mini { font-size: 11.5px; color: var(--ink-faint); margin-top: 3px; line-height: 1.5; }
  .wx-right { text-align: right; flex: none; }
  .wx-loc { font-size: 11.5px; font-weight: 700; color: var(--accent); }
  .wx-time { font-size: 11.5px; color: var(--ink-soft); margin-top: 2px; }
  .wx-desc { font-size: 11.5px; color: var(--ink-soft); }
  .wx-lunar-mini { font-size: 11px; color: var(--ink-faint); margin-top: 3px; }

  .wx-tabs { margin-bottom: 6px; }
  .wx-tabs button { border: none; background: none; cursor: pointer; font-family: inherit; }
  .wx-chart { max-height: 96px; }
  .wx-chart-empty { font-size: 11.5px; color: var(--ink-faint); text-align: center; padding: 20px 0; }

  .wx-days { display: flex; gap: 2px; padding-top: 10px; border-top: 1px solid var(--line-soft); overflow-x: auto; }
  .wx-day { text-align: center; padding: 5px 3px; border-radius: 8px; flex: 1; min-width: 38px; }
  .wx-day.today { background: var(--accent-soft); }
  .wx-day .d-name { font-size: 9.5px; font-weight: 700; color: var(--ink-soft); text-transform: uppercase; }
  .wx-day.today .d-name { color: var(--accent-strong); }
  .wx-day .d-icon { width: 18px; height: 18px; margin: 3px auto; color: var(--accent); }
  .wx-day .d-icon svg { width: 100%; height: 100%; }
  .wx-day .d-hi { font-size: 11.5px; font-weight: 700; color: var(--ink); }
  .wx-day .d-lo { font-size: 10px; color: var(--ink-faint); }

  .wx-advice { display: flex; gap: 8px; align-items: flex-start; padding-top: 10px; margin-top: 8px; border-top: 1px solid var(--line-soft); }
  /* "display: flex" ở trên đè mất rule [hidden] { display: none } mặc định
     của trình duyệt (CSS tác giả luôn thắng CSS mặc định dù độ ưu tiên chọn
     lọc ngang nhau) — khối gợi ý thời tiết (icon 💡 + border-top) hiện lộ ra
     rỗng ngay từ lúc tải trang, trước khi có dữ liệu thời tiết thật (cùng
     loại lỗi vừa phát hiện ở .quyen-popover, rà lại 2026-09-28). */
  .wx-advice[hidden] { display: none; }
  .wx-advice .a-icon {
    width: 22px; height: 22px; flex: none; border-radius: 50%; background: var(--good-soft);
    color: var(--good); display: flex; align-items: center; justify-content: center; font-size: 12px;
  }
  .wx-advice .a-text { font-size: 12px; line-height: 1.5; color: var(--ink); }
  @media (max-width: 640px) {
    .wx-top { flex-wrap: wrap; }
    .wx-right { text-align: left; }
  }

  /* ---------- Lịch & Thời tiết — bảng + biểu đồ 16 ngày theo farm ---------- */
  .wx-table-wrap { overflow-x: auto; cursor: grab; -webkit-overflow-scrolling: touch; }
  .wx-table-wrap.dragging { cursor: grabbing; user-select: none; }
  table.wx-table { border-collapse: separate; border-spacing: 0; width: max-content; }
  table.wx-table th, table.wx-table td { border-bottom: 1px solid var(--line-soft); border-right: 1px solid var(--line-soft); padding: 0; }
  .wx-corner {
    position: sticky; left: 0; z-index: 3; background: var(--raised);
    min-width: 128px; max-width: 128px; padding: 10px 12px !important; text-align: left;
    border-right: 1px solid var(--line) !important; vertical-align: bottom;
  }
  .wx-corner .t { font-size: 11px; font-weight: 700; color: var(--ink-faint); text-transform: uppercase; }
  .wx-col-head { min-width: 96px; padding: 8px 4px !important; text-align: center; background: var(--raised-2); }
  .wx-col-head .thu { font-size: 10.5px; font-weight: 700; color: var(--ink-soft); text-transform: uppercase; }
  .wx-col-head .duong { font-size: 15px; font-weight: 800; color: var(--ink); margin-top: 1px; }
  .wx-col-head .am { font-size: 10px; color: var(--ink-faint); margin-top: 1px; }
  .wx-col-head.hom-nay { background: var(--accent-soft); }
  .wx-col-head.hom-nay .thu, .wx-col-head.hom-nay .am { color: var(--accent-strong); }
  td.wx-cell.hom-nay { background: var(--accent-soft); }
  .wx-col-head.chu-nhat .thu, .wx-col-head.chu-nhat .duong { color: var(--bad); }
  .wx-col-head.chu-nhat.hom-nay .thu, .wx-col-head.chu-nhat.hom-nay .duong { color: var(--accent-strong); }
  .wx-farm-cell {
    position: sticky; left: 0; z-index: 2; background: var(--raised);
    min-width: 128px; max-width: 128px; padding: 10px 12px !important; text-align: left;
    border-right: 1px solid var(--line) !important;
  }
  .wx-farm-cell .ten { font-size: 13.5px; font-weight: 800; color: var(--ink); }
  .wx-farm-cell .loc { font-size: 10.5px; color: var(--ink-faint); margin-top: 2px; }
  .wx-cell { padding: 8px 4px !important; text-align: center; vertical-align: top; }
  .wx-cell .icon { width: 22px; height: 22px; margin: 0 auto 4px; color: var(--accent); }
  .wx-cell .icon svg { width: 100%; height: 100%; }
  .wx-cell .temp { font-size: 12.5px; font-weight: 700; color: var(--ink); }
  .wx-cell .temp .lo { color: var(--ink-faint); font-weight: 500; }
  .wx-cell .mua { font-size: 10.5px; color: var(--info); font-weight: 600; margin-top: 3px; }
  .wx-cell .am-do { font-size: 10px; color: var(--ink-faint); }
  .wx-legend { display: flex; gap: 18px; margin-top: 12px; font-size: 11.5px; color: var(--ink-soft); flex-wrap: wrap; }
  .wx-legend span { display: inline-flex; align-items: center; gap: 5px; }
  .wx-hint-drag { font-size: 11.5px; color: var(--ink-faint); margin-top: 8px; }
  .chart-scroll { overflow-x: auto; cursor: grab; }
  .chart-scroll.dragging { cursor: grabbing; user-select: none; }
  .chart-legend .ln { width: 14px; height: 3px; border-radius: 2px; display: inline-block; }
  .advice-row { display: flex; gap: 10px; padding: 11px 13px; background: var(--raised-2); border-radius: 10px; align-items: flex-start; }
  .advice-row .a-icon { font-size: 17px; line-height: 1; flex: none; margin-top: 1px; }
  .advice-row .a-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
  .advice-row .a-farm { font-size: 13px; font-weight: 800; color: var(--ink); }
  .advice-row .a-text { font-size: 12.5px; color: var(--ink-soft); margin-top: 4px; line-height: 1.5; }
  .giai-doan-pill { font-size: 10.5px; font-weight: 700; padding: 2px 9px; border-radius: 20px; background: var(--accent-soft); color: var(--accent-strong); }

  /* ---------- Tin tức nông nghiệp (tự động, kiểu Google Discover) ---------- */
  .discover-feed { display: flex; flex-direction: column; }
  .discover-feed-full { max-width: 640px; }
  .discover-card {
    display: block; padding: 14px 4px; border-top: 1px solid var(--line-soft);
    text-decoration: none; color: inherit;
  }
  .discover-card:first-child { border-top: none; }
  .discover-src {
    display: flex; align-items: center; gap: 6px; margin-bottom: 8px;
    font-size: 12px; font-weight: 600; color: var(--ink-soft);
  }
  .discover-dot { width: 16px; height: 16px; border-radius: 50%; flex: none; }
  .discover-time { color: var(--ink-faint); font-weight: 500; }
  .discover-time::before { content: "·"; margin: 0 4px; }
  .discover-thumb {
    width: 100%; height: 170px; border-radius: 12px; margin-bottom: 9px; overflow: hidden;
    background: var(--raised-2);
  }
  .discover-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
  .discover-title { font-size: 15px; font-weight: 700; line-height: 1.4; color: var(--ink); margin: 0 0 7px; }
  .discover-card:hover .discover-title { color: var(--accent); }

  .farm-den { display: flex; gap: 4px; margin-top: 2px; }
  .farm-den .den-dot { width: 9px; height: 9px; border-radius: 999px; background: var(--line); flex: none; }
  .farm-den .den-dot.done { background: var(--good); }
  .farm-den .den-dot.current { background: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
  .setup-checklist { margin-top: 12px; display: flex; flex-direction: column; gap: 6px; }
  .setup-check-item { display: flex; align-items: center; gap: 7px; font-size: 11.5px; }
  .setup-check-item .chk { width: 15px; height: 15px; border-radius: 4px; flex: none; display: flex; align-items: center; justify-content: center; }
  .setup-check-item.done .chk { background: var(--good); color: #fff; }
  .setup-check-item.pending .chk { border: 1.5px solid var(--line); }
  .setup-check-item.done span.label { color: var(--ink-soft); text-decoration: line-through; }
  .farm-grid-add {
    border: 1.5px dashed var(--line); border-radius: 20px; display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 8px; color: var(--ink-faint); cursor: pointer;
    padding: 24px; font-size: 12.5px; font-weight: 600; background: transparent;
  }
  .farm-grid-add:hover { border-color: var(--accent); color: var(--accent); }

  .note-banner {
    background: var(--accent-soft); color: var(--accent-strong); border-radius: 10px; padding: 10px 14px;
    font-size: 12px; font-weight: 600; display: flex; gap: 8px; align-items: center; margin-bottom: 18px;
  }
  .req-restricted { display: none; }

  /* ---------- Scope banner (đối tác dự án) ---------- */
  .scope-banner {
    display: none;
    align-items: center; gap: 9px; background: var(--accent-soft); color: var(--accent-strong);
    border-radius: 10px; padding: 10px 14px; font-size: 12px; font-weight: 600; margin-bottom: 18px;
  }
  .scope-banner.show { display: flex; }

  /* ---------- Sơ đồ farm ---------- */
  .diagram-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 20px; }
  .diagram-card { background: var(--raised); border-radius: 20px; overflow: hidden; box-shadow: var(--shadow); display: flex; flex-direction: column; }
  .diagram-thumb {
    aspect-ratio: 4/3; background: var(--raised-2); border-bottom: 1px solid var(--line);
    display: flex; align-items: center; justify-content: center; cursor: zoom-in; position: relative;
  }
  .diagram-thumb svg { width: 100%; height: 100%; }
  .diagram-thumb .zoom-hint {
    position: absolute; bottom: 8px; right: 8px; font-size: 10px; font-weight: 700; color: var(--accent-ink);
    background: var(--accent); padding: 3px 7px; border-radius: 5px; opacity: 0.92;
  }
  .diagram-empty { flex-direction: column; gap: 8px; color: var(--ink-faint); cursor: default; }
  .diagram-empty svg { width: 30px; height: 30px; opacity: 0.5; }
  .diagram-empty span { font-size: 11.5px; font-weight: 600; }
  .diagram-body { padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
  .diagram-farm-name { font-weight: 700; font-size: 13px; }
  .diagram-meta { font-size: 11px; color: var(--ink-faint); line-height: 1.5; }
  .diagram-meta .file-tag { font-family: var(--font-mono); background: var(--neutral-soft); color: var(--ink-soft); padding: 1px 5px; border-radius: 4px; font-size: 10px; }
  .diagram-actions { display: flex; gap: 6px; }

  .modal-overlay {
    /* display:flex LUÔN bật (không phải display:none/flex như trước) —
       dùng opacity+visibility để ẩn/hiện thay vì display, vì display không
       animate được bằng CSS transition (yêu cầu hiệu ứng mở/đóng cửa sổ,
       2026-09-11, xem thêm khối [data-hieu-ung=...] cuối file). Ẩn khi
       không .show vẫn tương đương display:none về mặt tương tác/accessibility
       (visibility:hidden + pointer-events:none, không bắt được focus/click). */
    display: flex; position: fixed; inset: 0; background: rgba(15,20,17,0.66);
    align-items: center; justify-content: center; z-index: 50; padding: 32px;
    opacity: 0; visibility: hidden; pointer-events: none;
  }
  .modal-overlay.show { opacity: 1; visibility: visible; pointer-events: auto; }
  /* Hiệu ứng mở/đóng cửa sổ tự chọn (Hồ sơ cá nhân, yêu cầu 2026-09-11) —
     mặc định (không data-hieu-ung hoặc "khong") KHÔNG có transition nào ở
     đây -> hiện/ẩn tức thì y hệt hành vi cũ. "visibility 0s linear Xms" trên
     trạng thái ẩn trì hoãn việc chuyển visibility:hidden cho tới khi opacity
     mờ xong mới thật sự ẩn; trạng thái .show đặt lại visibility 0s (hiện
     ngay, không đợi) để có thể bấm/thao tác được ngay khi bắt đầu mở. */
  [data-hieu-ung="mo_dan"] .modal-overlay {
    transition: opacity 160ms ease, visibility 0s linear 160ms;
  }
  [data-hieu-ung="mo_dan"] .modal-overlay.show { transition: opacity 160ms ease, visibility 0s linear 0s; }
  [data-hieu-ung="mo_dan"] .modal-box {
    transform: scale(0.94) translateY(6px);
    transition: transform 140ms cubic-bezier(.22,1,.36,1);
  }
  [data-hieu-ung="mo_dan"] .modal-overlay.show .modal-box { transform: scale(1) translateY(0); }
  [data-hieu-ung="truot_len"] .modal-overlay {
    transition: opacity 180ms ease, visibility 0s linear 180ms;
  }
  [data-hieu-ung="truot_len"] .modal-overlay.show { transition: opacity 180ms ease, visibility 0s linear 0s; }
  [data-hieu-ung="truot_len"] .modal-box {
    transform: translateY(28px);
    transition: transform 180ms cubic-bezier(.22,1,.36,1);
  }
  [data-hieu-ung="truot_len"] .modal-overlay.show .modal-box { transform: translateY(0); }
  .modal-box {
    background: var(--raised); border-radius: 22px; max-width: 720px; width: 100%; box-shadow: var(--shadow);
    /* Cuộn được bên trong khi nội dung dài hơn màn hình (form thêm farm có
       bản đồ + nhiều trường) — trước đây chỉ cuộn được trên mobile, desktop
       bị overflow:hidden cắt mất phần dưới, không thao tác được (yêu cầu
       2026-09-04). */
    max-height: calc(100vh - 64px); display: flex; flex-direction: column; overflow: hidden;
  }
  .modal-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--line-soft); flex: none; }
  /* Tên đối tác/dự án dài (nhập tự do, không giới hạn) từng đẩy nút "✕" ra
     ngoài vùng nhìn thấy trên màn hình hẹp — modal-box cắt tràn (overflow:
     hidden) nên nút bị cắt mất luôn, không bấm đóng được (yêu cầu
     2026-09-08, Tùng báo "sửa đối tác... không đóng được cửa sổ" trên
     mobile). min-width:0 để flex item chịu co lại thay vì tự giữ nguyên độ
     rộng theo nội dung rồi đẩy nút ra ngoài. */
  .modal-head h3 { font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
  .modal-close { border: none; background: var(--neutral-soft); width: 26px; height: 26px; border-radius: 999px; cursor: pointer; color: var(--ink-soft); display: flex; align-items: center; justify-content: center; flex: none; }
  .modal-body { padding: 0; background: var(--raised-2); overflow-y: auto; }
  .modal-body svg { width: 100%; height: auto; display: block; }
  /* Loại trừ icon SVG của thư viện Leaflet (bản đồ chọn vị trí farm trong
     modal) khỏi rule phóng to ở trên — rule đó vốn để phóng to SVG minh hoạ
     lớn trong modal, nhưng "nuốt" luôn icon nhỏ cờ Ukraine ở góc credit bản
     đồ, phóng to sai kích thước (phát hiện 2026-09-05 khi thêm lớp vệ tinh). */
  .modal-body .leaflet-container svg { width: auto; height: auto; display: inline; }

  .media-thumb { display: block; max-width: 220px; max-height: 220px; width: auto; height: auto; border-radius: 8px; cursor: pointer; object-fit: cover; }
  .media-gallery { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
  .media-gallery .media-thumb { max-width: 90px; max-height: 90px; }

  /* ---------- Lịch làm việc tháng (Kỹ thuật ao nuôi) ---------- */
  .calendar-table { border-collapse: collapse; width: 100%; table-layout: fixed; }
  .calendar-table th { font-size: 10.5px; text-transform: uppercase; color: var(--ink-faint); padding: 6px 4px; text-align: center; }
  .calendar-cell { border: 1px solid var(--line-soft); vertical-align: top; height: 74px; padding: 3px; width: 14.28%; position: relative; }
  .calendar-weather { position: absolute; top: 2px; right: 4px; font-size: 12px; line-height: 1; }
  .calendar-cell.empty { background: var(--raised-2); }
  .calendar-day-num { font-size: 13.5px; font-weight: 700; color: var(--ink); margin-bottom: 2px; }
  .calendar-task { display: flex; align-items: center; justify-content: space-between; gap: 4px; font-size: 10.5px; background: var(--accent-soft); color: var(--accent-strong); border-radius: 5px; padding: 2px 5px; margin-bottom: 2px; }
  .calendar-task.done { background: var(--good-soft); color: var(--good); text-decoration: line-through; opacity: 0.8; }
  .calendar-task span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .calendar-task form { display: inline; }
  .calendar-task button { border: none; background: transparent; cursor: pointer; font-weight: 800; color: inherit; padding: 0; }
  .calendar-cell.clickable { cursor: pointer; }
  .calendar-cell.clickable:hover { background: var(--accent-soft); }
  .calendar-cell.today { background: var(--accent-soft); box-shadow: inset 0 0 0 2px var(--accent); }
  .calendar-cell.today .calendar-day-num { color: var(--accent-strong); }
  .calendar-am-lich { font-style: italic; font-weight: 500; font-size: 9px; color: var(--ink-faint); margin-left: 3px; }
  .calendar-cell.chu-nhat .calendar-day-num { color: var(--bad); }
  .calendar-ngay-le { font-size: 9.5px; color: var(--bad); font-weight: 700; margin-bottom: 2px; line-height: 1.2; }
  .map-noDownload { -webkit-user-drag: none; user-select: none; -webkit-touch-callout: none; }

  /* ---------- Lightbox (xem ảnh cỡ lớn) ---------- */
  .lightbox-overlay {
    display: none; position: fixed; inset: 0; z-index: 999; background: rgba(10, 14, 12, 0.88);
    align-items: center; justify-content: center; padding: 24px; cursor: zoom-out;
  }
  .lightbox-overlay.show { display: flex; }
  .lightbox-overlay img { max-width: 100%; max-height: 100%; border-radius: 6px; box-shadow: 0 8px 32px rgba(0,0,0,0.5); cursor: zoom-in; touch-action: none; user-select: none; }
  .lightbox-overlay iframe { display: none; width: min(92vw, 900px); height: 90vh; border: none; border-radius: 6px; background: #fff; box-shadow: 0 8px 32px rgba(0,0,0,0.5); cursor: default; }

  @media (max-width: 980px) {
    .stat-grid { grid-template-columns: repeat(2,1fr); }
    .farm-grid { grid-template-columns: 1fr; }
    .two-col { grid-template-columns: 1fr; }
  }

  /* ---------- Mobile / tablet nav (sidebar thành menu trượt) ---------- */
  .sidebar-toggle {
    display: none;
    align-items: center; justify-content: center;
    width: 34px; height: 34px; border-radius: 999px;
    background: transparent; border: 1px solid var(--line);
    color: var(--ink); cursor: pointer; flex-shrink: 0;
  }
  .sidebar-overlay {
    display: none;
    position: fixed; inset: 0; background: rgba(0,0,0,0.45); z-index: 40;
  }

  @media (max-width: 860px) {
    .app-shell {
      grid-template-columns: 1fr;
      grid-template-rows: calc(56px + var(--safe-top)) auto 1fr;
      grid-template-areas: "topbar" "statusbar" "content";
    }
    .sidebar-toggle { display: inline-flex; }
    /* Ngăn kéo di động cũng nổi bo góc + cách viền màn hình, cùng phong
       cách với sidebar desktop (Phương án J, yêu cầu 2026-09-17) — trước
       đây tràn hết viền. Đóng: dịch thêm đúng --sidebar-gutter ra ngoài
       -100% để bo góc/bóng đổ không bị "hở" 1 lát ở mép trái lúc đóng. */
    .sidebar {
      --sidebar-gutter: 14px;
      position: fixed;
      left: 0; top: 0;
      width: 220px; height: calc(100vh - 2 * var(--sidebar-gutter));
      margin: var(--sidebar-gutter);
      border-radius: 22px;
      z-index: 50;
      transform: translateX(calc(-100% - var(--sidebar-gutter) - 6px));
      transition: transform 0.2s ease;
      box-shadow: 0 6px 18px rgba(10,40,32,0.32);
      padding-top: var(--safe-top);
      box-sizing: border-box;
    }
    .sidebar.open { transform: translateX(0); }
    .sidebar-overlay.open { display: block; }
    .topbar { padding: var(--safe-top) 12px 0 12px; gap: 8px; }
    /* Tên trang đã bỏ khỏi topbar (yêu cầu 2026-09-04) — tên tài khoản
       (.user-name) giờ là nội dung nhận diện duy nhất bên trái, phải luôn
       hiện kể cả trên điện thoại. Thu gọn bằng cách rút ngắn khoảng cách
       + ellipsis (xem .topbar-left, .user-name ở trên) thay vì ẩn đi. */
    .topbar-right { gap: 8px; }
    .content { padding: 16px; }

    /* Modal khong bi cat mat tren man hinh thap — cuon duoc ben trong */
    .modal-overlay { padding: 10px; align-items: flex-start; padding-top: 36px; }
    .modal-box { max-height: calc(100vh - 56px); display: flex; flex-direction: column; }
    .modal-body { overflow-y: auto; }

    /* Tieu de trang + nut hanh dong xep doc, nut rong het hang cho de bam */
    .view-head { flex-direction: column; align-items: stretch; }
    .view-actions { flex-wrap: wrap; }
    .view-actions .btn { flex: 1 1 auto; }

    .card-head { flex-direction: column; align-items: stretch; gap: 8px; }
    .card-head form { width: 100%; flex-wrap: wrap; }

    .field-row { grid-template-columns: 1fr; }

    /* Bang: chu nho lai + cuon ngang muot tren cham (thay vi bi ep chat) */
    .table-wrap { -webkit-overflow-scrolling: touch; }
    table { font-size: 11.5px; }
    table th, table td { padding: 6px 8px; }

    /* Bang nhieu cot (Nhiem vu/Nhat ky/Ky thuat ao nuoi/Mua sam/Duyet ban/
       Kho tong/Nhan vien) — cuon ngang tren dien thoai van kho doc (7-13
       cot). ".table-wrap.responsive-cards" (them class nay + data-label
       tren tung <td> ở template) doi bang thanh 1 the/dong, moi o du lieu
       tu hien nhan cot cua no qua data-label — khong can lam rieng 1 giao
       dien "the" khac cho tung trang (yeu cau 2026-08-26). */
    .table-wrap.responsive-cards { overflow-x: visible; }
    .table-wrap.responsive-cards table,
    .table-wrap.responsive-cards tbody,
    .table-wrap.responsive-cards tr,
    .table-wrap.responsive-cards td { display: block; width: 100%; }
    .table-wrap.responsive-cards thead { display: none; }
    .table-wrap.responsive-cards tr {
      border-radius: 18px; margin-bottom: 10px; box-shadow: var(--shadow);
      padding: 4px 12px; background: var(--raised);
    }
    .table-wrap.responsive-cards tr:hover { background: var(--raised); }
    .table-wrap.responsive-cards td {
      border: none; border-bottom: 1px solid var(--line-soft);
      padding: 8px 0; display: flex; align-items: center; justify-content: space-between; gap: 12px;
      text-align: right;
    }
    .table-wrap.responsive-cards td:last-child { border-bottom: none; }
    .table-wrap.responsive-cards td:empty { display: none; }
    /* Cot khong dat data-label (checkbox/nut hanh dong) — khong hien nhan,
       chi day noi dung sang phai; ::before rong khong chiem cho. */
    .table-wrap.responsive-cards td::before {
      content: attr(data-label); text-align: left; font-weight: 700; font-size: 10px;
      color: var(--ink-faint); text-transform: uppercase; letter-spacing: .04em; flex: none;
    }
    .table-wrap.responsive-cards td.num { text-align: right; }

    /* Rieng bang Mua sam (13 cot, nhieu o co pill+form+2 dong chu) — liet ke
       1 cot doc bi qua dai/roi. Xep luoi 2 cot cho cac truong ngan (Khan
       cap/Hang muc/Phan loai/Don vi/Don gia/So luong/Thanh tien/Nguoi de
       xuat/Ngay de xuat), rieng o phuc tap (checkbox/Trang thai/Noi dung/Ghi
       chu — danh dau class "ps-full" trong template) chiem tron 1 hang
       (yeu cau 2026-08-26: "trinh bay lai theo hang theo cot"). Ke thua mau
       nhan (::before) tu .responsive-cards o tren, chi doi lai bo cuc. */
    .table-wrap.purchase-cards tr {
      display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px;
      padding: 12px 14px;
    }
    .table-wrap.purchase-cards td {
      display: block; border: none; padding: 0; text-align: left;
    }
    .table-wrap.purchase-cards td::before { display: block; text-align: left; margin-bottom: 3px; }
    .table-wrap.purchase-cards td.num { text-align: left; }
    .table-wrap.purchase-cards td.ps-full { grid-column: 1 / -1; }

    .bulk-bar { padding: 8px 12px; }
  }

  /* ---------- Phieu in (kho tong/kho farm/xuat ban/bao cao) ----------
     Đầu trang đổi từ xếp giữa sang logo trái/thông tin công ty+tên báo cáo
     phải (yêu cầu 2026-09-17, đợt mở lại chức năng In). @page ép khổ A4
     thật khi in — trước đây không khai báo, phụ thuộc khổ giấy mặc định
     của từng máy in/trình duyệt. */
  @page { size: A4; margin: 15mm 15mm 18mm; }
  .print-page { max-width: 720px; margin: 0 auto; padding: 32px; background: var(--raised); }
  .print-actions { max-width: 720px; margin: 0 auto 16px; padding: 0 32px; display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
  .print-head { display: flex; align-items: center; gap: 18px; border-bottom: 2px solid var(--accent-strong); padding-bottom: 14px; margin-bottom: 20px; }
  .print-head .brand { font-weight: 700; font-size: 16px; }
  .print-logo { height: 52px; width: auto; flex: none; }
  .print-head-text { flex: 1; min-width: 0; text-align: right; }
  .print-brand-name { font-weight: 700; font-size: 16px; }
  .print-company-sub { font-size: 11px; color: var(--ink-faint); margin-top: 2px; }
  .print-head h1 { font-size: 18px; margin-top: 8px; text-transform: uppercase; }
  .print-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 24px; margin-bottom: 18px; font-size: 13px; background: var(--raised-2); padding: 10px 14px; border-radius: 6px; }
  .print-section-title {
    font-size: 13.5px; font-weight: 800; color: #fff; background: var(--accent-strong);
    padding: 5px 11px; border-radius: 4px; margin: 22px 0 10px;
  }
  .print-table { width: 100%; border-collapse: collapse; margin-bottom: 18px; }
  .print-table th, .print-table td { border: 1px solid var(--line); padding: 7px 10px; font-size: 13px; text-align: left; }
  .print-table th { background: var(--raised-2); }
  .print-table td.num, .print-table th.num { text-align: right; font-family: var(--font-mono); }
  .print-org { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
  .print-org-box { border: 1px solid var(--line); border-radius: 6px; padding: 7px 12px; min-width: 140px; }
  .print-org-box .role { font-size: 10px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; color: var(--accent-strong); }
  .print-org-box .name { font-size: 13px; font-weight: 700; margin-top: 1px; }
  .print-sign-row { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 48px; text-align: center; font-size: 13px; }
  .print-sign-row .sign-space { height: 70px; }
  /* Dòng "người in" bắt buộc cuối mọi bản in (yêu cầu 2026-09-17) — nguoi_in
     lấy từ request.user lúc render trang in, KHÔNG lưu cứng vào bản ghi vì
     có thể in lại nhiều lần bởi người khác nhau. */
  .print-signed-by { margin-top: 28px; padding-top: 10px; border-top: 1px dashed var(--line); font-size: 11.5px; color: var(--ink-faint); display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
  .print-signed-by b { color: var(--ink-soft); }
  .print-pagebreak { page-break-before: always; }

  @media print {
    body { background: #fff; }
    .sidebar, .topbar, .status-bar, .print-actions, .sidebar-overlay { display: none !important; }
    .app-shell { display: block; }
    .content { padding: 0; }
    .print-page { max-width: none; padding: 0; }
  }

  /* ---------- Đăng nhập (trang độc lập, không dùng khung Django Admin) ---------- */
  body.login-page {
    margin: 0; min-height: 100vh; display: flex; align-items: center; justify-content: center;
    background: linear-gradient(160deg, var(--accent-strong) 0%, var(--accent) 55%, #3FA085 100%);
    padding: 24px;
  }
  .login-wrap { width: 100%; max-width: 380px; display: flex; flex-direction: column; align-items: center; }
  .login-card {
    width: 100%; background: var(--raised); border-radius: 24px; padding: 36px 28px 30px;
    box-shadow: 0 20px 50px -18px rgba(10,30,24,0.45); text-align: center;
  }
  .login-logo { width: 64px; height: 64px; margin-bottom: 14px; }
  .login-title { font-size: 24px; font-weight: 800; color: var(--accent-strong); margin: 0; }
  .login-sub { color: var(--ink-faint); font-size: 14px; margin: 6px 0 26px; }
  .login-error {
    background: var(--bad-soft); color: var(--bad); border-radius: 10px; padding: 11px 14px;
    font-size: 13px; text-align: left; margin-bottom: 18px; line-height: 1.4;
  }
  .login-field { text-align: left; margin-bottom: 16px; }
  .login-field label { display: block; font-size: 13px; font-weight: 700; color: var(--ink-soft); margin-bottom: 6px; }
  .login-field input {
    width: 100%; box-sizing: border-box; padding: 14px 16px; font-size: 16px; border-radius: 16px;
    border: 1.5px solid var(--line); background: var(--raised-2); color: var(--ink);
  }
  .login-field input:focus { outline: none; border-color: var(--accent); background: var(--raised); }
  .login-btn {
    width: 100%; padding: 15px; font-size: 16px; font-weight: 800; color: var(--accent-ink);
    background: var(--accent); border: none; border-radius: 999px; cursor: pointer; margin-top: 6px;
  }
  .login-btn:hover { background: var(--accent-strong); }
  .login-hint { font-size: 12px; color: var(--ink-faint); line-height: 1.5; margin: 20px 0 0; text-align: left; }
  .login-footer { color: rgba(255,255,255,0.85); font-size: 12px; margin-top: 22px; text-align: center; }