/* Web quản trị theo vai trò — CSS thuần, phông tự host (CSP chỉ cho tài nguyên cùng máy chủ).
   Bộ màu theo bản mẫu Stitch đã duyệt. Phông Be Vietnam Pro: SIL OFL 1.1 (fonts/OFL.txt). */

/* ---------------------------------------------------------------- phông */
@font-face{font-family:"Be Vietnam Pro";font-style:normal;font-display:swap;font-weight:400;src:url(fonts/be-vietnam-pro-vietnamese-400-normal.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-display:swap;font-weight:400;src:url(fonts/be-vietnam-pro-latin-ext-400-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Be Vietnam Pro";font-style:normal;font-display:swap;font-weight:400;src:url(fonts/be-vietnam-pro-latin-400-normal.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-display:swap;font-weight:500;src:url(fonts/be-vietnam-pro-vietnamese-500-normal.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-display:swap;font-weight:500;src:url(fonts/be-vietnam-pro-latin-ext-500-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Be Vietnam Pro";font-style:normal;font-display:swap;font-weight:500;src:url(fonts/be-vietnam-pro-latin-500-normal.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-display:swap;font-weight:600;src:url(fonts/be-vietnam-pro-vietnamese-600-normal.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-display:swap;font-weight:600;src:url(fonts/be-vietnam-pro-latin-ext-600-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Be Vietnam Pro";font-style:normal;font-display:swap;font-weight:600;src:url(fonts/be-vietnam-pro-latin-600-normal.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-display:swap;font-weight:700;src:url(fonts/be-vietnam-pro-vietnamese-700-normal.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-display:swap;font-weight:700;src:url(fonts/be-vietnam-pro-latin-ext-700-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Be Vietnam Pro";font-style:normal;font-display:swap;font-weight:700;src:url(fonts/be-vietnam-pro-latin-700-normal.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}

/* ---------------------------------------------------------------- màu, nền */
:root{
  --nen:#F6F7F5; --the:#FFFFFF; --vien:#E2E6E3; --vien-dam:#D5DBD7;
  --chu:#1B2421; --phu:#4A5550; --mo:#66706B;
  --chinh:#1F6F4A; --chinh-dam:#165337; --chinh-nhat:#E8F3ED; --chinh-vien:#C6E2D3;
  --canh:#8A4A06; --canh-nen:#FDF3E2; --canh-vien:#F8DCAB;
  --loi:#B42318; --loi-nen:#FEF3F2; --loi-vien:#FECDCA;
  --xanh:#1D5E8A; --xanh-nen:#EFF7FC;
  --bo:8px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--nen);color:var(--chu);font:14px/20px "Be Vietnam Pro",system-ui,sans-serif}
a{color:var(--chinh)} a:hover{color:var(--chinh-dam)}
h1,h2,h3{margin:0;letter-spacing:-.01em}
h1{font-size:24px;line-height:32px;font-weight:700}
h2{font-size:16px;line-height:24px;font-weight:600}
h3{font-size:14px;line-height:20px;font-weight:600}
p{margin:0}
:focus-visible{outline:2px solid var(--chinh);outline-offset:2px}
/* ẩn với mắt, vẫn đọc được bằng trình đọc màn hình — padding/border 0 để không đẩy trang tràn ngang */
.an-chu{position:absolute;width:1px;height:1px;padding:0;margin:-1px;border:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
a.an-chu:focus{position:fixed;left:12px;top:12px;width:auto;height:auto;margin:0;padding:10px 14px;clip:auto;z-index:50;background:var(--the);border:2px solid var(--chinh);border-radius:6px}

/* ---------------------------------------------------------------- khung trang */
/* Thanh "Đang xem với tư cách …" khi T0 đăng nhập với vai trò — luôn nổi, không ẩn được */
.dong-vai{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;padding:8px 16px;background:var(--canh-nen);border-bottom:2px solid var(--canh);color:var(--canh)}
.dong-vai p{margin:0;flex:1 1 280px;min-width:0}
.dong-vai form{margin:0}
.thanh-tren{height:60px;background:var(--the);border-bottom:1px solid var(--vien);display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 16px;position:sticky;top:0;z-index:20}
.thuong-hieu{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--chu)}
.thuong-hieu .logo{width:34px;height:34px;border-radius:6px;background:var(--chinh);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:12px;letter-spacing:.04em}
.thuong-hieu b{font-size:15px;color:var(--chinh)} .thuong-hieu small{display:block;font-size:11px;color:var(--phu);line-height:14px}
.thanh-tren .phai{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.nhan-vai-tro{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:999px;background:var(--chinh-nhat);border:1px solid var(--chinh-vien);color:var(--chinh);font-size:12px;font-weight:600}
.tai-khoan{position:relative}
.tai-khoan summary{list-style:none;display:flex;align-items:center;gap:8px;cursor:pointer;padding:4px 8px;border-radius:6px;min-height:44px}
.tai-khoan summary::-webkit-details-marker{display:none}
.tai-khoan summary:hover{background:var(--nen)}
.avatar{width:32px;height:32px;border-radius:50%;background:var(--chinh);color:#fff;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600}
.tai-khoan .menu{position:absolute;right:0;top:100%;background:var(--the);border:1px solid var(--vien);border-radius:var(--bo);min-width:220px;padding:6px;box-shadow:0 6px 24px rgba(0,0,0,.08)}
.tai-khoan .menu a,.tai-khoan .menu button{display:block;width:100%;text-align:left;padding:9px 10px;border-radius:6px;color:var(--chu);text-decoration:none;background:none;border:0;font:inherit;cursor:pointer}
.tai-khoan .menu a:hover,.tai-khoan .menu button:hover{background:var(--nen)}
.tai-khoan .ten{display:flex;flex-direction:column;line-height:16px} .tai-khoan .ten small{color:var(--phu);font-size:12px}

.khung{display:flex;flex-wrap:wrap;align-items:flex-start;max-width:1440px;margin:0 auto}
.menu-trai{flex:1 1 220px;max-width:260px;padding:16px 12px}
.menu-trai .nhom{font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--mo);padding:12px 12px 6px}
.menu-trai a{display:block;padding:9px 12px;border-radius:6px;color:var(--phu);text-decoration:none;min-height:40px}
.menu-trai a:hover{background:var(--the);color:var(--chu)}
.menu-trai a[aria-current="page"]{background:var(--chinh);color:#fff;font-weight:600}
.noi-dung{flex:999 1 560px;min-width:0;padding:20px 16px 48px;display:flex;flex-direction:column;gap:20px}
@media (max-width:820px){.tai-khoan .ten{display:none}}

/* ---------------------------------------------------------------- tiêu đề trang */
.dau-trang{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px}
.dau-trang .tieu-de{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.dau-trang .phu-de{color:var(--phu);font-size:13px;margin-top:2px}
.nhom-nut{display:flex;flex-wrap:wrap;gap:8px}

/* ---------------------------------------------------------------- thẻ số liệu */
.luoi-the{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:16px}
.the-so{background:var(--the);border:1px solid var(--vien);border-radius:var(--bo);padding:16px;display:flex;flex-direction:column;gap:6px}
.the-so .nhan-the{font-size:13px;font-weight:500;color:var(--phu)}
.the-so .so{font-size:30px;line-height:38px;font-weight:700}
.the-so .so.canh{color:var(--canh)} .the-so .so.loi{color:var(--loi)}
.the-so .ghi{font-size:12px;color:var(--phu);border-top:1px solid var(--vien);padding-top:8px;margin-top:4px}

/* ---------------------------------------------------------------- khối nội dung, bảng */
.khoi{background:var(--the);border:1px solid var(--vien);border-radius:var(--bo);overflow:hidden}
.khoi-dau{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;padding:14px 16px;border-bottom:1px solid var(--vien)}
.khoi-dau p{color:var(--phu);font-size:13px}
.khoi-than{padding:16px}
.hai-cot{display:grid;grid-template-columns:minmax(0,2fr) minmax(300px,1fr);gap:20px;align-items:start}
@media (max-width:1180px){.hai-cot{grid-template-columns:minmax(0,1fr)}}
.cuon-ngang{overflow-x:auto;position:relative} /* chứa cả phần tử .an-chu (absolute) trong bảng, không đẩy trang tràn ngang */
table{width:100%;border-collapse:collapse;font-size:13px}
th{text-align:left;font-size:12px;font-weight:600;letter-spacing:.02em;text-transform:uppercase;color:var(--phu);background:var(--nen);padding:10px 14px;border-bottom:1px solid var(--vien);white-space:nowrap}
td{padding:11px 14px;border-bottom:1px solid var(--vien);vertical-align:top}
tr:last-child td{border-bottom:0}
td .phu{display:block;color:var(--phu);font-size:12px}
td.thao-tac{text-align:right;white-space:nowrap}
td.thao-tac form{display:inline}
.trong{padding:24px 16px;color:var(--phu);text-align:center}

/* ---------------------------------------------------------------- nhãn trạng thái */
.nhan{display:inline-flex;align-items:center;gap:6px;padding:2px 8px;border-radius:4px;font-size:12px;font-weight:500;border:1px solid var(--vien-dam);background:var(--nen);color:var(--phu);white-space:nowrap}
.nhan::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.nhan.tot{background:var(--chinh-nhat);border-color:var(--chinh-vien);color:var(--chinh)}
.nhan.canh{background:var(--canh-nen);border-color:var(--canh-vien);color:var(--canh)}
.nhan.loi{background:var(--loi-nen);border-color:var(--loi-vien);color:var(--loi)}
.nhan.khong-cham::before{display:none}
.nhan-minh-hoa{font-size:12px;padding:2px 8px;border-radius:4px;background:#ECEEEB;border:1px solid var(--vien-dam);color:var(--mo)}

/* ---------------------------------------------------------------- nút, form */
.nut{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:36px;padding:7px 14px;border-radius:6px;border:1px solid var(--vien-dam);background:var(--the);color:var(--chu);font:500 13px/18px inherit;font-family:inherit;text-decoration:none;cursor:pointer}
.nut:hover{background:var(--nen);color:var(--chu)}
.nut.chinh{background:var(--chinh);border-color:var(--chinh);color:#fff} .nut.chinh:hover{background:var(--chinh-dam)}
.nut.nguy{color:var(--loi);border-color:var(--loi-vien)} .nut.nguy:hover{background:var(--loi-nen)}
.nut.nho{min-height:30px;padding:4px 10px;font-size:12px}
.form{display:flex;flex-direction:column;gap:12px}
.form .hang{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px}
label{display:block;font-size:13px;font-weight:500;margin-bottom:4px}
input,select,textarea{width:100%;min-height:38px;padding:7px 10px;border:1px solid var(--vien-dam);border-radius:6px;background:var(--the);color:var(--chu);font:inherit}
input[type=checkbox],input[type=radio]{width:18px;height:18px;min-height:0;padding:0;flex:0 0 18px;accent-color:var(--chinh)}
textarea{min-height:72px}
input:focus,select:focus,textarea:focus{border-color:var(--chinh);outline:none;box-shadow:0 0 0 3px var(--chinh-nhat)}
.goi-y{font-size:12px;color:var(--phu);margin-top:4px}
.bat-buoc{color:var(--loi)}

/* ---------------------------------------------------------------- thông báo, ghi chú */
.thong-bao{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.thong-bao li{padding:10px 14px;border-radius:6px;border:1px solid var(--chinh-vien);background:var(--chinh-nhat);color:var(--chinh)}
.thong-bao li.error,.thong-bao li.warning{border-color:var(--loi-vien);background:var(--loi-nen);color:var(--loi)}
.viec{display:flex;flex-direction:column;gap:8px;list-style:none;margin:0;padding:0}
.viec li{padding:10px 14px;border-radius:6px;border:1px solid var(--canh-vien);background:var(--canh-nen);color:var(--canh)}
.viec li.loi{border-color:var(--loi-vien);background:var(--loi-nen);color:var(--loi)}
.ghi-chu{background:var(--the);border:1px solid var(--vien);border-radius:var(--bo);padding:12px 16px;color:var(--phu);font-size:13px}
.ghi-chu strong{color:var(--chu)}
.dong-ttin{display:grid;grid-template-columns:minmax(120px,180px) 1fr;gap:8px 16px;font-size:14px}
.dong-ttin dt{color:var(--phu)} .dong-ttin dd{margin:0}
.the-sap-co{border:1px dashed var(--vien-dam);border-radius:var(--bo);padding:14px 16px;background:var(--nen)}
.the-sap-co p{color:var(--phu);font-size:13px;margin-top:4px}
.cach-tren{margin-top:12px}

/* ---------------------------------------------------------------- icon (Material Symbols tự host, icons/icons.svg) */
.icon{width:20px;height:20px;flex:none;fill:currentColor;vertical-align:-5px}
.icon.nho{width:16px;height:16px;vertical-align:-3px}
.nhan-vai-tro .icon{width:16px;height:16px}
.tai-khoan .mo{width:18px;height:18px;color:var(--phu)}
.tai-khoan .menu a,.tai-khoan .menu button{display:flex;align-items:center;gap:10px}
.tai-khoan .menu .icon{color:var(--phu)}
.nut .icon{width:18px;height:18px}
.nut.nho .icon{width:16px;height:16px}
.thong-bao li{display:flex;align-items:center;gap:8px}

/* ---------------------------------------------------------------- menu trái kiểu bản mẫu */
.menu-trai{background:var(--the);border-right:1px solid var(--vien);align-self:stretch;min-height:calc(100vh - 60px);display:flex;flex-direction:column;gap:2px}
.menu-trai a{display:flex;align-items:center;gap:10px}
.menu-trai a .icon{color:var(--mo)}
.menu-trai a:hover{background:var(--nen)}
.menu-trai a[aria-current="page"] .icon{color:#fff}
.menu-trai .chan-menu{margin-top:auto;padding-top:16px;border-top:1px solid var(--vien)}
.menu-trai .chan-menu a{font-size:12px;line-height:16px;color:var(--phu);align-items:flex-start}

/* ---------------------------------------------------------------- thẻ số liệu có ô icon */
.the-so .dau-the{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}
.o-icon{width:36px;height:36px;border-radius:8px;display:flex;align-items:center;justify-content:center;background:var(--chinh-nhat);color:var(--chinh);flex:none}
.o-icon.xanh{background:var(--xanh-nen);color:var(--xanh)}
.o-icon.canh{background:var(--canh-nen);color:var(--canh)}
.o-icon.loi{background:var(--loi-nen);color:var(--loi)}
.khoi-dau h2{display:flex;align-items:center;gap:8px}
.khoi-dau h2 .icon{color:var(--chinh)}

/* ---------------------------------------------------------------- việc cần làm dạng thẻ */
.viec li{display:flex;align-items:flex-start;gap:10px;background:var(--the);color:var(--chu);border-color:var(--canh-vien)}
.viec li .icon{color:var(--canh);margin-top:2px}
.viec li.loi{background:var(--the);color:var(--chu)}
.viec li.loi .icon{color:var(--loi)}
.viec li strong{display:block}

/* ---------------------------------------------------------------- điện thoại: thanh tab dưới
   Menu trái có thể tới vài chục mục (quản trị HTX) — không nhồi vào một dải cuộn ngang: thanh tab chỉ giữ
   Trang chủ, Việc cần làm, trang đang mở và nút "Menu" mở đủ danh sách (details, không cần script). */
.tab-dt{display:none}
@media (max-width:820px){
  body{padding-bottom:72px}
  .menu-trai{display:none}
  .tab-dt{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));position:fixed;left:0;right:0;bottom:0;z-index:30;background:var(--the);border-top:1px solid var(--vien);padding:4px 4px calc(4px + env(safe-area-inset-bottom));box-shadow:0 -2px 12px rgba(0,0,0,.05)}
  .tab-dt>a,.tab-dt summary .mo,.tab-dt summary .dong{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:56px;padding:6px 4px;border-radius:6px;color:var(--phu);text-decoration:none;font-size:11px;line-height:14px;text-align:center}
  .tab-dt>a span,.tab-dt summary span span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
  .tab-dt>a .icon,.tab-dt summary .icon{color:var(--mo)}
  .tab-dt>a[aria-current="page"]{background:var(--chinh-nhat);color:var(--chinh);font-weight:600}
  .tab-dt>a[aria-current="page"] .icon{color:var(--chinh)}
  .tab-dt summary{list-style:none;cursor:pointer}
  .tab-dt summary::-webkit-details-marker{display:none}
  .tab-dt summary .dong,.tab-dt-them[open] summary .mo{display:none}
  .tab-dt-them[open] summary .dong{display:flex;color:var(--chinh)}
  /* nền mờ phía sau bảng menu — chạm vào là đóng (thuộc summary) */
  .tab-dt-them[open] summary::before{content:"";position:fixed;inset:0;background:rgba(27,36,33,.4)}
  .tab-dt-bang{position:fixed;left:0;right:0;bottom:calc(64px + env(safe-area-inset-bottom));max-height:calc(100vh - 140px);max-height:calc(100dvh - 140px);overflow-y:auto;overscroll-behavior:contain;background:var(--the);border-radius:12px 12px 0 0;box-shadow:0 -6px 24px rgba(0,0,0,.12);padding:8px 8px 12px}
  .tab-dt-bang .nhom{font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--mo);padding:10px 12px 4px}
  .tab-dt-bang a{display:flex;align-items:center;gap:12px;min-height:44px;padding:8px 12px;border-radius:6px;color:var(--chu);text-decoration:none}
  .tab-dt-bang a .icon{color:var(--mo)}
  .tab-dt-bang a small{display:block;font-size:12px;line-height:16px;font-weight:400;color:var(--phu)}
  .tab-dt-bang a[aria-current="page"]{background:var(--chinh-nhat);color:var(--chinh);font-weight:600}
  .tab-dt-bang a[aria-current="page"] .icon{color:var(--chinh)}
  .tab-dt-bang .chan{margin:8px 12px 0;padding-top:10px;border-top:1px solid var(--vien);font-size:12px;line-height:16px;color:var(--phu)}
}
@media print{.tab-dt{display:none}}

/* thanh trên trên điện thoại: một dòng, bỏ phụ đề */
@media (max-width:600px){
  .thanh-tren{gap:8px;padding:0 12px}
  .thuong-hieu small{display:none}
  .thanh-tren .phai{flex-wrap:nowrap;gap:6px}
  .thuong-hieu{min-width:0}
  .thuong-hieu .logo{flex:none}
  .thuong-hieu>span{min-width:0}
  .thuong-hieu b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .nhan-vai-tro{font-size:11px;padding:2px 8px;min-width:0;max-width:38vw}
  .nhan-vai-tro span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .nhan-vai-tro .icon{display:none}
  .the-so .so{font-size:24px;line-height:30px}
}

/* ---------------------------------------------------------------- thiết lập chung */
img.logo{object-fit:contain;background:var(--the)}
.chan-trang{margin-top:auto;padding-top:16px;border-top:1px solid var(--vien);color:var(--mo);font-size:12px}
/* Danh mục dùng chung */
.form-dong{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.form-dong label{margin:0}
.form-dong input{width:auto;min-width:0;flex:1 1 150px}
td code,.tieu-de code,.phu code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12.5px}
.ds-loi,.ds-canh{margin:0;padding:10px 14px 10px 30px;border-radius:6px;font-size:13px;display:flex;flex-direction:column;gap:4px}
.ds-loi{border:1px solid var(--loi-vien);background:var(--loi-nen);color:var(--loi)}
.ds-canh{border:1px solid var(--canh-vien);background:var(--canh-nen);color:var(--canh)}
.thong-tin{display:grid;grid-template-columns:minmax(120px,max-content) minmax(0,1fr);gap:6px 16px;margin:0;font-size:13px}
.thong-tin dt{color:var(--phu)}
.thong-tin dd{margin:0;overflow-wrap:anywhere}
.chon-so-sanh .hang{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.o-chon{display:flex;align-items:flex-start;gap:8px;font-weight:400}
.o-chon input{width:auto;min-height:0;margin-top:3px}

/* ---------------------------------------------------------------- trợ giúp (/tro-giup/) */
.nut-tro-giup{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:6px 10px;border-radius:6px;color:var(--phu);text-decoration:none;font-size:13px;font-weight:500}
.nut-tro-giup:hover,.nut-tro-giup:focus-visible{background:var(--nen);color:var(--chinh)}
@media (max-width:600px){.nut-tro-giup span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}}
.ds-bai{list-style:none;margin:0;padding:0}
.ds-bai li{border-top:1px solid var(--vien)} .ds-bai li:first-child{border-top:0}
.ds-bai a{display:block;padding:12px 16px;text-decoration:none;color:var(--chu)}
.ds-bai a:hover{background:var(--nen)}
.ds-bai b{display:block;color:var(--chinh);font-weight:600}
.ds-bai span{display:block;color:var(--phu);font-size:13px;margin-top:2px}
.bai-tro-giup,.rong-bai{max-width:760px}
.bai-tro-giup{padding:20px 24px;font-size:15px;line-height:1.65}
.bai-tro-giup h1{font-size:24px;line-height:1.3;margin:0 0 12px}
.bai-tro-giup h2{font-size:18px;margin:28px 0 8px;padding-top:12px;border-top:1px solid var(--vien)}
.bai-tro-giup h3{font-size:16px;margin:20px 0 6px}
.bai-tro-giup p,.bai-tro-giup ul,.bai-tro-giup ol{margin:0 0 12px}
.bai-tro-giup ul,.bai-tro-giup ol{padding-left:24px}
.bai-tro-giup li{margin:4px 0}
.bai-tro-giup img{display:block;max-width:100%;height:auto;margin:12px 0;border:1px solid var(--vien);border-radius:6px}
.bai-tro-giup code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:13px;background:var(--nen);padding:1px 4px;border-radius:4px}
.bai-tro-giup a[href]{color:var(--chinh)}
.bai-tro-giup blockquote{margin:0 0 12px;padding:8px 14px;border-left:4px solid var(--chinh-vien);background:var(--chinh-nhat)}
.bai-tro-giup table{margin:0 0 12px}
@media (max-width:600px){.bai-tro-giup{padding:16px;font-size:16px}}

/* ---------------------------------------------------------------- trang chủ tổ chức (bản Stitch 19/10/2026) */
.bang-canh{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:var(--bo);border:1px solid var(--canh-vien);background:var(--canh-nen);color:var(--canh)}
.bang-canh p{margin:0;flex:1;min-width:0}
.bang-canh a{color:var(--canh);font-weight:600;white-space:nowrap}
.the-so .so small{font-size:15px;font-weight:400;color:var(--phu)}
.tq-hang{display:grid;gap:20px;align-items:start}
.tq-8-4{grid-template-columns:minmax(0,2fr) minmax(280px,1fr)}
.tq-6-6{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
@media (max-width:1180px){.tq-8-4,.tq-6-6{grid-template-columns:minmax(0,1fr)}}
.tq-viec{list-style:none;margin:0;padding:0}
.tq-viec li+li{border-top:1px solid var(--vien)}
.tq-viec a{display:flex;align-items:center;gap:12px;min-height:48px;padding:8px 16px;color:var(--chu);text-decoration:none}
.tq-viec a:hover{background:var(--nen)} .tq-viec a:hover .tq-viec-ten{color:var(--chinh)}
.tq-viec-ten{flex:1;min-width:0;font-weight:500}
.tq-chan{padding:10px 16px;border-top:1px solid var(--vien);text-align:right}
.tq-chan a{color:var(--chinh);font-weight:600;font-size:13px;text-decoration:none}
.tq-chan a:hover{text-decoration:underline}
.tq-cot{display:flex;align-items:flex-end;gap:8px;height:180px;padding:16px 16px 0}
.tq-cot-1{flex:1;display:flex;flex-direction:column;align-items:center;height:100%;justify-content:flex-end;min-width:0}
.tq-so{font-size:11px;color:var(--phu);margin-bottom:4px;white-space:nowrap}
.tq-thanh{width:100%;max-width:36px;flex:1;display:flex;align-items:flex-end;background:var(--chinh-nhat);border-radius:4px 4px 0 0;max-height:120px}
.tq-thanh span{display:block;width:100%;background:#7FB89A;border-radius:4px 4px 0 0;min-height:2px}
.tq-cot-1.hn .tq-thanh span{background:var(--chinh)} .tq-cot-1.hn .tq-so,.tq-cot-1.hn .tq-thu{color:var(--chinh);font-weight:700}
.tq-thu{font-size:12px;color:var(--phu);margin-top:6px}
.tq-tong{margin:12px 16px 16px;padding:8px;border-radius:6px;background:var(--nen);text-align:center;font-size:13px;font-weight:500}
th.so-phai,td.so-phai{text-align:right}
.tq-thoi-tiet{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;padding:16px 16px 0}
.tq-ngay{display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 2px;border-radius:6px;border:1px solid var(--vien);background:var(--nen);font-size:12px}
.tq-ngay.db{border-style:dashed;background:var(--the)}
.tq-ngay.hn{border-color:var(--chinh-vien);background:var(--chinh-nhat);color:var(--chinh);font-weight:600}
.tq-d{font-size:11px;color:var(--phu)} .tq-ngay.hn .tq-d{color:var(--chinh)}
.tq-mua{font-weight:600}
.tq-thoi-tiet+.goi-y{padding:0 16px}
.tq-muc{display:flex;flex-wrap:wrap;gap:8px;padding:12px 16px 16px}
.tq-dong-thoi-gian{list-style:none;margin:0;padding:8px 16px 16px 34px;position:relative}
.tq-dong-thoi-gian::before{content:"";position:absolute;left:21px;top:16px;bottom:20px;width:2px;background:var(--vien)}
.tq-dong-thoi-gian li{position:relative;display:flex;flex-direction:column;gap:2px;padding:8px 0}
.tq-dong-thoi-gian li::before{content:"";position:absolute;left:-18px;top:13px;width:10px;height:10px;border-radius:50%;background:var(--chinh);box-shadow:0 0 0 3px var(--chinh-nhat)}
.tq-luc{font-size:12px;color:var(--phu)}
@media (max-width:600px){
  .tq-the{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .tq-the .the-so{padding:12px} .tq-the .the-so .so{font-size:20px;line-height:26px}
  .dau-trang .nhom-nut{display:grid;grid-template-columns:1fr 1fr;width:100%} .dau-trang .nhom-nut .nut{min-height:44px}
  .tq-cot{gap:4px;height:160px;padding:12px 12px 0} .tq-so{font-size:10px}
  .tq-thoi-tiet{gap:3px;padding:12px 12px 0} .tq-ngay{padding:6px 0;font-size:11px}
}
.tq-thao-tac{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.tq-o{display:flex;align-items:center;gap:12px;min-height:64px;padding:12px 14px;border-radius:var(--bo);border:1px solid var(--vien);background:var(--the);color:var(--chu);text-decoration:none}
.tq-o:hover{border-color:var(--chinh-vien);background:var(--chinh-nhat)}
.tq-o .icon{width:28px;height:28px;color:var(--chinh);flex:0 0 28px}
.tq-o span{display:flex;flex-direction:column} .tq-o small{color:var(--phu);font-size:12px}
.tq-o.chinh{background:var(--chinh);border-color:var(--chinh);color:#fff} .tq-o.chinh .icon,.tq-o.chinh small{color:#fff}
.tq-o.chinh:hover{background:var(--chinh-dam)}
.tq-phu{display:block;color:var(--phu);font-size:12px;font-weight:400}
@media (max-width:600px){.tq-thao-tac{grid-template-columns:1fr 1fr;gap:8px}.tq-o.chinh{grid-column:1/-1;min-height:72px}.tq-o{flex-direction:column;align-items:flex-start;gap:6px}.tq-o.chinh{flex-direction:row;align-items:center}}
.tq-cot-doc{display:flex;flex-direction:column;gap:20px;min-width:0}
td.an-o{color:var(--mo);font-style:italic}
tr.tong td{background:var(--nen)}
.tq-ghi-chu{display:flex;align-items:flex-start;gap:8px;margin:0;padding:10px 16px;border-top:1px solid var(--vien);background:var(--nen);color:var(--phu);font-size:12px}
.tq-ghi-chu .icon{width:16px;height:16px;flex:0 0 16px}
.tq-dong-tc{display:flex;padding:10px 16px}

/* ---------------------------------------------------------------- trang nghiệp vụ (bộ chuẩn Stitch, docs/thiet-ke) */
/* chip tóm tắt cạnh tiêu đề trang */
.chip-tt{display:flex;flex-wrap:wrap;gap:8px}
.chip-tt span{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;border:1px solid var(--vien-dam);background:var(--the);font-size:13px;font-weight:600;white-space:nowrap}
.chip-tt .icon{width:16px;height:16px}
.chip-tt .canh{background:var(--canh-nen);border-color:var(--canh-vien);color:var(--canh)}
.chip-tt .loi{background:var(--loi-nen);border-color:var(--loi-vien);color:var(--loi)}
.chip-tt .tot{background:var(--chinh-nhat);border-color:var(--chinh-vien);color:var(--chinh)}
/* thanh lọc trên đầu danh sách */
.thanh-loc{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px;padding:14px 16px}
.thanh-loc>label{flex:1 1 170px;margin:0;font-size:12px;color:var(--phu)}
.thanh-loc>label input,.thanh-loc>label select{margin-top:4px}
.thanh-loc .nhom-nut{flex:0 0 auto}
.dang-loc{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:0 16px 12px;font-size:12px;color:var(--phu)}
.dang-loc b{display:inline-flex;padding:2px 8px;border-radius:4px;background:var(--nen);border:1px solid var(--vien);color:var(--chu);font-weight:600}
/* mã (hộ, vườn, lô) dạng ô nhỏ chữ đều */
.ma{display:inline-block;padding:1px 6px;border-radius:4px;background:var(--nen);border:1px solid var(--vien);font:500 12px/18px ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--chu);white-space:nowrap}
a .ma,a.ma{color:var(--xanh);background:var(--xanh-nen);border-color:#CFE3F1;text-decoration:none}
td.so,th.so{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
td.so b{font-weight:600}
tr.dong-loi td{background:var(--loi-nen)} tr.dong-canh td{background:#FFFBF3}
.xem{display:inline-flex;align-items:center;gap:2px;font-weight:600;text-decoration:none;white-space:nowrap}
.xem .icon{width:16px;height:16px}
/* phân trang */
.phan-trang{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;padding:12px 16px;border-top:1px solid var(--vien);background:var(--nen);font-size:13px;color:var(--phu)}
.phan-trang .nhom-nut a,.phan-trang .nhom-nut span{min-width:36px}
.phan-trang .hien{background:var(--chinh);border-color:var(--chinh);color:#fff}
/* ô số liệu trong thẻ chi tiết */
.o-luoi{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px}
.o-so{background:var(--nen);border-radius:var(--bo);padding:12px 14px;min-width:0}
.o-so .nhan-o{display:block;font-size:12px;color:var(--phu)}
.o-so .gia-tri{display:block;font-size:15px;font-weight:600;margin-top:2px;overflow-wrap:anywhere}
.o-so .gia-tri.lon{font-size:22px;line-height:30px;font-weight:700}
.o-so .ghi{display:block;font-size:12px;color:var(--mo);margin-top:2px}
.o-so.nhan-manh{background:var(--chinh-nhat)} .o-so.nhan-manh .gia-tri{color:var(--chinh)}
.o-so.rong{grid-column:1/-1}
/* danh sách bước kiểm tra (cổng tiếp nhận…) */
.buoc-kiem{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.buoc-kiem li{display:flex;gap:10px;padding:10px 12px;border-radius:var(--bo)}
.buoc-kiem .dau{flex:0 0 26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--chinh-nhat);color:var(--chinh)}
.buoc-kiem .dau .icon{width:16px;height:16px}
.buoc-kiem b{display:block;font-size:13px}
.buoc-kiem small{display:block;color:var(--phu);font-size:12px;margin-top:2px}
.buoc-kiem li.canh{background:var(--canh-nen)} .buoc-kiem li.canh .dau{background:#fff;color:var(--canh)} .buoc-kiem li.canh b{color:var(--canh)}
.buoc-kiem li.loi{background:var(--loi-nen)} .buoc-kiem li.loi .dau{background:#fff;color:var(--loi)} .buoc-kiem li.loi b{color:var(--loi)}
/* dòng thời gian (điều chỉnh, sự kiện, nhật ký vụ) */
.dong-tg{list-style:none;margin:0;padding:0 0 0 18px;border-left:2px solid var(--vien);display:flex;flex-direction:column;gap:12px}
.dong-tg li{position:relative;background:var(--nen);border-radius:var(--bo);padding:10px 14px}
.dong-tg li::before{content:"";position:absolute;left:-25px;top:14px;width:10px;height:10px;border-radius:50%;background:var(--chinh);box-shadow:0 0 0 3px var(--the)}
.dong-tg .tg{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px;font-size:12px;color:var(--phu)}
.dong-tg .cu{text-decoration:line-through;color:var(--mo)}
.phu.pv-ngoai{color:var(--mo)}
/* liên kết nổi bật sang bản ghi khác */
.lien-ket-the{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:var(--bo);background:var(--xanh-nen);color:var(--xanh);text-decoration:none}
.lien-ket-the small{display:block;font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--phu)}
.lien-ket-the b{display:block;font-size:14px}
.lien-ket-the .icon:last-child{margin-left:auto}
/* tiêu đề trang có liên kết quay lại */
.quay-lai{display:inline-flex;align-items:center;gap:4px;font-size:13px;font-weight:500;text-decoration:none;margin-bottom:4px}
.quay-lai .icon{width:16px;height:16px}
.cot-phai{display:flex;flex-direction:column;gap:20px}
/* ô chọn dạng thẻ (chấp nhận / từ chối) */
fieldset.chon-the{border:0;margin:0;padding:0;min-width:0}
.chon-the{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:8px}
.chon-the label{display:flex;align-items:center;gap:8px;margin:0;padding:10px 12px;border:1px solid var(--vien-dam);border-radius:var(--bo);background:var(--the);cursor:pointer}
.chon-the label:has(input:checked){border-color:var(--chinh);background:var(--chinh-nhat)}
@media (max-width:720px){.thanh-loc>label{flex-basis:100%}}
/* thanh tab lọc theo loại (lô, chế biến…) */
.tab-loc{display:flex;gap:4px;overflow-x:auto;padding:0 16px;border-top:1px solid var(--vien);border-bottom:1px solid var(--vien)}
.tab-loc a{flex:0 0 auto;padding:10px 12px;font-size:13px;font-weight:500;color:var(--phu);text-decoration:none;border-bottom:2px solid transparent}
.tab-loc a:hover{color:var(--chu)}
.tab-loc a[aria-current=page]{color:var(--chinh);border-bottom-color:var(--chinh);font-weight:600}
/* cây nguồn gốc (lô): mỗi cấp một cột, nguồn xa nhất bên trái */
.cay-nguon{display:flex;align-items:stretch;gap:8px;overflow-x:auto;padding-bottom:4px}
.cay-cap{display:flex;flex-direction:column;gap:8px;flex:0 0 190px}
.cay-ten{font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--mo)}
.cay-nut{display:flex;flex-direction:column;gap:2px;padding:10px 12px;border:1px solid var(--vien);border-radius:var(--bo);background:var(--the)}
.cay-nut b{font-size:13px} .cay-nut small{font-size:11px;color:var(--phu)}
.cay-nut.hien{border-color:var(--chinh);background:var(--chinh-nhat)}
.cay-mui{display:flex;align-items:center;color:var(--mo);flex:0 0 auto}
/* đường nối nguồn → đích do lot/so-do-nguon.js vẽ; có đường thì ẩn dấu › giữa cột, giãn cột cho đủ chỗ */
.cay-nguon{position:relative} h3 + .cay-nguon{margin-top:12px}
.cay-nguon .cay-cap{position:relative;z-index:1}
.cay-duong{position:absolute;left:0;top:0;z-index:0;pointer-events:none;overflow:visible}
.cay-duong .duong{fill:none;stroke:var(--chinh);stroke-width:1.5;stroke-opacity:.55}
.cay-duong .mui{fill:var(--chinh);fill-opacity:.8}
.cay-nguon.co-duong{gap:48px}
.cay-nguon.co-duong .cay-mui{display:none}
/* thẻ sọt/bao gắn với lô */
.the-gan{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;padding:10px 0;border-bottom:1px solid var(--vien)}
.the-gan small{flex-basis:100%;font-size:12px;color:var(--phu)}
.the-gan.dang .ma{border-color:var(--chinh-vien);background:var(--chinh-nhat);color:var(--chinh)}
/* thanh so với dải định mức (chế biến) */
.dai-dm-thanh{position:relative;height:14px;border-radius:999px;background:var(--nen);border:1px solid var(--vien)}
.dai-dm-dai{position:absolute;top:0;bottom:0;background:var(--chinh-vien);border-radius:999px}
.dai-dm-diem{position:absolute;top:-5px;width:4px;height:22px;margin-left:-2px;border-radius:2px;background:var(--chinh)}
.dai-dm-diem.ngoai{background:var(--canh)}
.dai-dm-chu{display:flex;justify-content:space-between;gap:8px;margin-top:6px;font-size:12px;color:var(--phu)}
td.khong-xuong{white-space:nowrap}
/* lưới ô nhập (form nhiều trường trên một hàng), khung nền nhạt, hộp lỗi, ghi chú nhỏ */
.o-form{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px 12px}
.o-form>label{margin:0}
.o-form>label input,.o-form>label select{margin-top:4px}
.o-nen{background:var(--nen);border:1px solid var(--vien);border-radius:var(--bo);padding:14px}
.o-nen h3{display:flex;align-items:center;gap:6px;margin-bottom:10px;font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--phu)}
.o-nen.nho{padding:10px;gap:8px;min-width:220px}
.bang-loi{border:1px solid var(--loi-vien);background:var(--loi-nen);border-radius:var(--bo);padding:12px 14px}
.bang-loi h3{display:flex;align-items:center;gap:6px;color:var(--loi)}
.bang-loi p{font-size:13px;color:var(--phu);margin:4px 0 10px}
.bang-loi table{background:var(--the);border-radius:6px}
.ghi-chu-nho{display:flex;gap:6px;align-items:flex-start;font-size:12px;color:var(--phu);background:var(--nen);border-radius:6px;padding:8px 10px}
.ghi-chu-nho .icon{flex:0 0 16px;width:16px;height:16px}
.ghi-chu-nho.xanh{background:var(--xanh-nen);color:var(--xanh)}
/* chuỗi sự kiện nằm ngang (chuyến hàng) */
.chuoi-sk{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.chuoi-sk li{display:flex;flex-direction:column;padding:6px 10px;border-radius:6px;background:var(--the);border:1px solid var(--chinh-vien)}
.chuoi-sk li+li::before{content:"→";position:relative;left:-14px;top:0;height:0;color:var(--mo)}
.chuoi-sk b{font-size:12px;color:var(--chinh)} .chuoi-sk small{font-size:11px;color:var(--phu)}
/* truy vết: khung công bố, thanh tỷ lệ */
.o-cong-bo{border:1px solid var(--chinh-vien);background:var(--chinh-nhat);border-radius:var(--bo);padding:12px 14px}
.o-cong-bo h3,.o-nen h3{display:flex;align-items:center;gap:6px}
.o-cong-bo h3{color:var(--chinh);margin-bottom:6px}
.ds-ly-do{margin:6px 0 0;padding-left:18px;font-size:13px;color:var(--phu)}
.so-lon{font-size:20px;color:var(--chinh)}
.thanh-ty-le{height:10px;border-radius:999px;background:var(--canh-nen);border:1px solid var(--vien);overflow:hidden;margin-top:8px}
.thanh-ty-le span{display:block;height:100%;background:var(--chinh)}
.o-quet{padding:0}
.o-quet>label:first-child input{min-height:46px;font-size:16px}
.cot-thao-tac{display:flex;flex-direction:column;gap:6px;min-width:260px}
.o-icon{flex:0 0 36px;height:36px;border-radius:8px;display:flex;align-items:center;justify-content:center;background:var(--chinh-nhat);color:var(--chinh)}
.o-icon.loi{background:var(--loi-nen);color:var(--loi)}
.tq-viec-ten .phu{display:block;font-size:12px;color:var(--phu);font-weight:400}
th.cot-du-bao,td.cot-du-bao{background:var(--xanh-nen)}
.pheu{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.pheu .o-so{background:var(--the);border:1px solid var(--vien)}
.o-nen h3{text-transform:none;letter-spacing:0;font-size:14px;color:var(--chu)}
.o-nen>h3:first-child,.o-nen form>h3:first-child{text-transform:uppercase;letter-spacing:.04em;font-size:12px;color:var(--phu)}
details.mo-rong>summary{list-style:none;display:inline-flex;cursor:pointer}
details.mo-rong>summary::-webkit-details-marker{display:none}
details.mo-rong[open]>summary{background:var(--chinh-nhat);border-color:var(--chinh-vien)}
/* thanh bước trạng thái (mùa vụ) */
.buoc-tt{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.buoc-tt li{flex:1 1 140px;display:flex;align-items:center;gap:8px;padding:10px 12px;border-radius:var(--bo);background:var(--nen);color:var(--phu);font-weight:500;font-size:13px}
.buoc-tt span{flex:0 0 24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--the);border:1px solid var(--vien-dam);font-size:12px}
.buoc-tt li.xong{color:var(--chinh)} .buoc-tt li.xong span{background:var(--chinh-nhat);border-color:var(--chinh-vien)}
.buoc-tt li.hien{background:var(--chinh);color:#fff} .buoc-tt li.hien span{background:#fff;color:var(--chinh);border-color:#fff}
tr.dong-cu td{color:var(--phu)}
/* kết quả kiểm cách ly (nhật ký canh tác) */
.ket-cach-ly{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border-radius:var(--bo);border:1px solid}
.ket-cach-ly b{font-size:18px} .ket-cach-ly p{margin-top:2px;font-size:13px}
.ket-cach-ly.dat{background:var(--chinh-nhat);border-color:var(--chinh-vien);color:var(--chinh)}
.ket-cach-ly.vi-pham{background:var(--loi-nen);border-color:var(--loi-vien);color:var(--loi)}
.ket-cach-ly.vi-pham .o-icon{background:#fff;color:var(--loi)}
.ket-cach-ly.thieu{background:var(--canh-nen);border-color:var(--canh-vien);color:var(--canh)}
.ket-cach-ly.thieu .o-icon{background:#fff;color:var(--canh)}
.cay-vu .tq-6-6 table{min-width:0} .cay-vu .tq-6-6 th,.cay-vu .tq-6-6 td{min-width:0} .cay-vu .tq-6-6 td:first-child{min-width:90px}
/* ô ngày dd/mm/yyyy (identity/ngay.js) */
.o-ngay{position:relative;display:flex;align-items:stretch;gap:0;width:100%}
.o-ngay>input[type=text]{flex:1 1 auto;min-width:0;border-top-right-radius:0;border-bottom-right-radius:0}
.o-ngay.khong-nut>input[type=text]{border-radius:6px}
.o-ngay-nut{flex:0 0 38px;display:flex;align-items:center;justify-content:center;border:1px solid var(--vien-dam);border-left:0;border-radius:0 6px 6px 0;background:var(--nen);color:var(--phu);cursor:pointer;padding:0}
.o-ngay-nut:hover{color:var(--chinh);background:var(--chinh-nhat)}
.o-ngay-nut .icon{width:18px;height:18px}
.o-ngay-goc{position:absolute!important;left:0;bottom:0;width:1px!important;height:1px!important;min-height:0!important;padding:0!important;border:0!important;opacity:0;pointer-events:none}
.form-dong .o-ngay{width:auto}
.form-dong .o-ngay>input[type=text]{width:9.5em}
.goi-y-ma{display:block;margin-top:4px;padding:4px 8px;border-radius:4px;background:var(--xanh-nen);color:var(--xanh);font-size:12px;font-weight:400;line-height:16px}

/* ---------------------------------------------------------------- trợ lý kỹ thuật (nút tròn góc phải dưới) */
.tro-ly{position:fixed;right:20px;bottom:20px;z-index:40;font-size:14px}
.tro-ly-nut{width:56px;height:56px;border-radius:50%;border:0;background:var(--chinh);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 4px 16px rgba(0,0,0,.2)}
.tro-ly-nut:hover{background:var(--chinh-dam)}
.tro-ly-nut .icon{width:28px;height:28px}
.tro-ly.dang-mo .tro-ly-nut{display:none}
.tro-ly-nut{position:relative}
.tro-ly-dau{position:absolute;top:-2px;right:-2px;width:20px;height:20px;border-radius:50%;background:var(--canh);color:#fff;font-size:13px;font-weight:700;line-height:20px;text-align:center;border:2px solid var(--the)}
.tro-ly-dau[hidden],.tro-ly-han-muc[hidden]{display:none}
.tro-ly-han-muc{display:flex;gap:8px;align-items:flex-start;margin:0;padding:8px 12px;background:var(--canh-nen);border-bottom:1px solid var(--canh-vien);color:var(--canh);font-size:13px;line-height:18px}
.tro-ly-han-muc .icon{flex:0 0 18px;width:18px;height:18px}
.tro-ly-khung{position:absolute;right:0;bottom:0;width:min(420px,calc(100vw - 32px));height:min(620px,calc(100vh - 100px));display:flex;flex-direction:column;background:var(--the);border:1px solid var(--vien-dam);border-radius:12px;box-shadow:0 12px 40px rgba(0,0,0,.18);overflow:hidden}
.tro-ly-khung[hidden]{display:none}
.tro-ly-khung header{display:flex;align-items:center;gap:8px;padding:10px 12px;border-bottom:1px solid var(--vien);background:var(--chinh-nhat)}
.tro-ly-ten{display:flex;align-items:center;gap:6px;flex:1;min-width:0;color:var(--chinh-dam)}
.tro-ly-khung header button{border:0;background:none;color:var(--phu);cursor:pointer;border-radius:6px;padding:6px 8px;font:inherit;font-size:13px;display:flex;align-items:center}
.tro-ly-khung header button:hover{background:var(--the);color:var(--chinh)}
.tro-ly-tin{flex:1;overflow-y:auto;padding:12px;display:flex;flex-direction:column;gap:10px}
.tro-ly-chao{color:var(--phu)}
.tro-ly-chao[hidden]{display:none}
.tro-ly-goi-y{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:6px}
.tro-ly-goi-y button{width:100%;text-align:left;border:1px solid var(--chinh-vien);background:var(--the);color:var(--chinh-dam);border-radius:8px;padding:8px 10px;font:inherit;cursor:pointer}
.tro-ly-goi-y button:hover{background:var(--chinh-nhat)}
.tro-ly-dong-tin{max-width:92%;padding:8px 12px;border-radius:10px;overflow-wrap:anywhere}
.tro-ly-dong-tin.nguoi{align-self:flex-end;background:var(--chinh);color:#fff;white-space:pre-wrap}
.tro-ly-dong-tin.tro_ly{align-self:flex-start;background:var(--nen);border:1px solid var(--vien)}
.tro-ly-dong-tin.loi{align-self:flex-start;background:var(--loi-nen);border:1px solid var(--loi-vien);color:var(--loi)}
.tro-ly-dong-tin.cho{color:var(--mo);font-style:italic}
.tro-ly-dong-tin.dang-viet{white-space:pre-wrap}
.tro-ly-md>*+*{margin-top:8px}
.tro-ly-md p,.tro-ly-md ul,.tro-ly-md ol{margin:0}
.tro-ly-md ul,.tro-ly-md ol{padding-left:20px}
.tro-ly-md h1,.tro-ly-md h2,.tro-ly-md h3,.tro-ly-md h4{font-size:14px;line-height:20px;font-weight:600}
.tro-ly-md table{display:block;overflow-x:auto;border-collapse:collapse;font-size:13px}
.tro-ly-md th,.tro-ly-md td{border:1px solid var(--vien);padding:4px 6px;text-align:left;vertical-align:top}
.tro-ly-md code{background:var(--the);border:1px solid var(--vien);border-radius:4px;padding:0 3px;font-size:12px}
.tro-ly-md pre{overflow-x:auto;background:var(--the);border:1px solid var(--vien);border-radius:6px;padding:8px}
.tro-ly-md pre code{border:0;padding:0}
.tro-ly-danh-gia{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.tro-ly-danh-gia button{border:1px solid var(--vien-dam);background:var(--the);color:var(--phu);border-radius:6px;padding:4px 10px;font:inherit;font-size:12px;cursor:pointer}
.tro-ly-danh-gia button:hover{border-color:var(--chinh);color:var(--chinh)}
.tro-ly-danh-gia textarea{flex:1 0 100%;border:1px solid var(--vien-dam);border-radius:6px;padding:6px 8px;font:inherit;font-size:13px;resize:vertical}
.tro-ly-danh-gia.xong{font-size:12px;color:var(--mo)}
.tro-ly-nguon{margin-top:8px;padding-top:6px;border-top:1px dashed var(--vien-dam);font-size:12px;color:var(--mo)}
.tro-ly-hoi{display:flex;gap:8px;padding:10px 12px;border-top:1px solid var(--vien)}
.tro-ly-hoi textarea{flex:1;min-width:0;resize:none;border:1px solid var(--vien-dam);border-radius:8px;padding:8px 10px;font:inherit;min-height:44px}
.tro-ly-hoi button{flex:0 0 44px;border:0;border-radius:8px;background:var(--chinh);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center}
.tro-ly-hoi button:disabled{opacity:.5;cursor:wait}
.tro-ly-nhac{margin:0;padding:0 12px 10px;font-size:11px;line-height:15px;color:var(--mo)}
@media (max-width:820px){.tro-ly{right:12px;bottom:84px}.tro-ly-khung{height:min(560px,calc(100vh - 150px))}}
@media print{.tro-ly{display:none}}
/* QR tem đã kích hoạt trên trang dải tem: ảnh nhỏ, bấm để phóng to giữa màn hình (CSS :target, không cần script) */
.qr-nho{display:inline-block;line-height:0;border:1px solid var(--vien);border-radius:6px;background:#fff;padding:2px}
.qr-nho img{display:block;width:56px;height:56px}
.qr-phong{display:none;position:fixed;inset:0;z-index:60;align-items:center;justify-content:center;padding:16px}
.qr-phong:target{display:flex}
.qr-phong .qr-nen{position:absolute;inset:0;background:rgba(0,0,0,.6)}
.qr-phong figure{position:relative;margin:0;background:#fff;border-radius:10px;padding:16px;text-align:center;max-width:100%}
.qr-phong figure img{display:block;width:min(420px,80vw,70vh);height:auto;margin:0 auto}
.qr-phong figcaption{margin-top:10px;font-size:14px;line-height:22px}
@media print{.qr-phong{display:none!important}}
@media print{.khong-in{display:none!important}}
/* Số việc đang chờ: mục "Việc cần làm" ở menu, thanh tab điện thoại, nút trên thanh trên */
.so-dem{display:inline-block;min-width:20px;padding:0 6px;margin-left:auto;border-radius:10px;background:var(--loi);color:#fff;font-size:12px;line-height:20px;font-weight:600;text-align:center}
.tab-dt .so-dem{position:absolute;top:2px;right:calc(50% - 22px);margin:0;min-width:18px;line-height:18px;font-size:11px}
.tab-dt a{position:relative}
.nut-viec{display:inline-flex;align-items:center;gap:4px;padding:6px 8px;border-radius:8px;color:inherit;text-decoration:none}
.nut-viec:hover{background:var(--chinh-nhat)}
.nut-viec .so-dem{margin-left:0}
.chon-loai{border:0;margin:0;padding:0;min-width:0;display:grid;gap:6px}
.chon-loai legend{font-weight:600;margin-bottom:4px}

/* ---------------------------------------------------------------- điện thoại ngoài hiện trường (bộ Stitch điện thoại 24/10/2026)
   Đọc được dưới nắng, bấm một tay: chữ ô nhập 16px (Safari không tự phóng to), ô bấm ≥ 44px, biểu mẫu một cột, bảng
   đánh dấu `the-dt` thành thẻ (nhãn cột do identity/dien-thoai.js chép vào data-nhan). Chỉ đổi hình thức. */
.mat-mang{display:flex;align-items:flex-start;gap:10px;margin:0;padding:12px 14px;border-radius:var(--bo);border:1px solid #B0BEC5;background:#ECEFF1;color:#37474F;font-weight:500}
.mat-mang[hidden]{display:none}
.mat-mang .icon{flex:0 0 20px;margin-top:1px}
.dau-trang>div{min-width:0}
.dau-trang .phu-de{overflow-wrap:anywhere}
@media (max-width:600px){
  .noi-dung{padding:16px 12px 32px;gap:16px}
  h1{font-size:22px;line-height:28px}
  .dau-trang .phu-de{font-size:14px;line-height:20px}
  .dau-trang .nhan,.ghi-chu .nhan{white-space:normal}
  .khoi-dau{padding:12px 14px} .khoi-than{padding:14px}
  .khoi-dau p{font-size:14px;line-height:20px}
  /* ô bấm */
  .nut{min-height:44px;padding:10px 16px;font-size:15px;line-height:20px}
  .nut.nho{min-height:40px;padding:8px 12px;font-size:14px}
  .nut .icon{width:20px;height:20px}
  .dau-trang .nhom-nut>.nut,.dau-trang .tieu-de>.nut{flex:1 1 auto}
  td .xem,a.quay-lai{display:inline-flex;align-items:center;min-height:40px}
  /* ô nhập */
  label{font-size:14px}
  input,select{min-height:48px;font-size:16px}
  textarea{font-size:16px}
  .o-ngay-nut{flex-basis:48px}
  .form .hang,.o-form{grid-template-columns:minmax(0,1fr)}
  .form-dong{align-items:stretch}
  .form-dong input,.form-dong select,.form-dong .nut{flex:1 1 100%}
  .thanh-loc{gap:10px 8px;padding:12px}
  .thanh-loc>label{flex:1 1 100%;font-size:13px}
  .thanh-loc .nhom-nut{flex:1 1 100%;display:grid;grid-template-columns:1fr 1fr}
  /* thẻ số liệu: hai cột */
  .luoi-the{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .luoi-the .the-so{padding:12px} .luoi-the .the-so .so{font-size:24px;line-height:30px}
  .chip-tt span{white-space:normal}
  /* danh sách việc: biểu tượng | nội dung (tổ chức ở dòng dưới) | mũi tên */
  .tq-viec a{display:grid;grid-template-columns:auto minmax(0,1fr) auto;column-gap:12px;row-gap:4px;align-items:center;padding:12px 14px;min-height:56px}
  .tq-viec a>.o-icon{grid-column:1;grid-row:1/span 2;align-self:start}
  .tq-viec a>.nhan{grid-column:1/3;grid-row:1;justify-self:start;white-space:normal}
  .tq-viec a>.nhan~.tq-viec-ten{grid-column:1/3;grid-row:2}
  .tq-viec a>.o-icon~.tq-viec-ten{grid-column:2;grid-row:1}
  .tq-viec a>.o-icon~.phu{grid-column:2;grid-row:2;font-size:13px;color:var(--phu)}
  .tq-viec a>:last-child{grid-column:3;grid-row:1/span 2}
  .tq-viec-ten .phu{display:block;font-weight:400;font-size:14px;color:var(--phu)}
  /* bảng thành thẻ */
  table.the-dt,.the-dt>tbody,.the-dt>tbody>tr,.the-dt>tbody>tr>td{display:block;width:100%}
  .the-dt>thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .the-dt>tbody>tr{padding:12px 14px;border-bottom:1px solid var(--vien)}
  .the-dt>tbody>tr:last-child{border-bottom:0}
  /* nhãn cột nằm bên trái (vị trí tuyệt đối) để nội dung ô — số, đơn vị, chú thích — vẫn chảy như dòng chữ thường */
  .the-dt>tbody>tr>td{position:relative;padding:4px 0 4px calc(36% + 10px);min-height:28px;border:0;font-size:14px;line-height:20px;text-align:left;overflow-wrap:anywhere}
  .the-dt>tbody>tr>td::before{content:attr(data-nhan);position:absolute;left:0;top:4px;width:36%;color:var(--phu);font-size:13px;line-height:20px}
  .the-dt>tbody>tr>td:first-child{padding:0 0 4px;font-size:16px;line-height:22px;font-weight:600}
  .the-dt>tbody>tr>td:first-child::before,.the-dt>tbody>tr>td[colspan]::before,.the-dt>tbody>tr>td[data-nhan=""]::before,.the-dt>tbody>tr>td.thao-tac::before{display:none}
  .the-dt>tbody>tr>td[data-nhan=""],.the-dt>tbody>tr>td[colspan]{padding-left:0}
  .the-dt>tbody>tr>td.thao-tac{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-start;padding:8px 0 0;white-space:normal}
  .the-dt>tbody>tr>td.trong{padding:16px 0;text-align:center;font-size:14px}
  .the-dt td .phu{font-size:13px}
  .the-dt td:empty{display:none}
  .the-dt td .nhan{white-space:normal}
  .the-dt tr.dong-loi{border-left:4px solid var(--loi);background:var(--loi-nen)}
  .the-dt tr.dong-canh{border-left:4px solid var(--canh);background:#FFFBF3}
  .cuon-ngang:has(>table.the-dt){overflow-x:visible}
  /* thanh trên: không để số việc, vai trò đè lên logo */
  .thanh-tren .phai{min-width:0;flex:0 1 auto}
  .thuong-hieu{flex:1 1 auto;overflow:hidden}
  .nut-viec{flex:none}
  .tai-khoan summary{padding:4px}
  .tai-khoan .mo{display:none}
}
@media (max-width:400px){
  .nhan-vai-tro{max-width:28vw}
  .thanh-tren .phai{gap:2px}
}

/* ---------------------------------------------------------------- nguồn thời tiết (trang tọa độ thời tiết xã) */
.luoi-nguon{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:16px}
.the-nguon{border:1px solid var(--vien);border-radius:var(--bo);padding:16px;display:flex;flex-direction:column;gap:10px;min-width:0}
.the-nguon.dang-dung{border-color:var(--chinh-vien);box-shadow:inset 4px 0 0 var(--chinh)}
.the-nguon-dau{display:flex;align-items:center;justify-content:space-between;gap:8px}
.the-nguon-dau h3{font-size:16px;font-weight:600}
.the-nguon-tt{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:4px 12px;font-size:13px}
.the-nguon-tt dt{color:var(--phu)}
.the-nguon-ghi{font-size:13px}
.the-nguon details summary,.tinh-huong summary{cursor:pointer;font-weight:500;font-size:13px;min-height:32px;display:flex;align-items:center}
.the-nguon details p{font-size:13px;margin-top:6px}
.phu-trong{color:var(--phu);font-size:12px}
.tinh-huong{margin-top:16px;border-top:1px solid var(--vien);padding-top:10px}
.tinh-huong ul{margin:6px 0 0 18px;display:flex;flex-direction:column;gap:6px;font-size:13px}
#chon-nguon{margin-top:16px;border-top:1px solid var(--vien);padding-top:14px}
.tieu-de-nho{font-size:15px;font-weight:600;margin-bottom:8px}
.bang-chon-nguon select{min-width:180px}
@media (max-width:600px){.bang-chon-nguon select{min-width:0;width:100%}}
/* ô tìm của ô chọn dài (identity/tim-o-chon.js) */
.tim-o-chon{display:block;width:100%;margin:0 0 4px}
.tim-o-chon-dem{display:block;min-height:0;font-size:12px;color:var(--phu);font-weight:400}
/* ô đánh dấu xác nhận trong biểu mẫu; danh sách nguyên tắc trong khung cảnh báo */
label.o-kiem{display:flex;gap:8px;align-items:flex-start;font-weight:400}
label.o-kiem input{flex:0 0 18px;width:18px;height:18px;min-height:0;margin-top:2px;padding:0}
.bang-canh ol{margin:6px 0 0;padding-left:20px}
.bang-canh ol li{margin:3px 0}
/* bước đọc lại trước khi gộp (hộ, vườn) */
.xac-nhan-gop{border:2px solid var(--canh-vien)}