/* ══════════════════════════════════════════════════════════════════
   HỆ THỐNG NỘI BỘ CÂY ME — bộ màu và kích thước

   MÀU   : bộ nhận diện Bánh Ướt Cây Me (chị Xuân Anh gửi 08/10/2026)
   KHUÔN : kích thước và bố cục lấy từ MISA AMIS Kế toán, để đội đã quen
           tay với AMIS không phải học lại.

   Vì sao giữ phông Inter cho phần nhập liệu, không dùng Alfa Slab One
   của bộ nhận diện: Alfa Slab One là phông chữ dày có chân, đẹp cho logo
   nhưng đặt vào bảng số liệu dày đặc thì rất khó đọc, và nhìn sẽ khác
   hẳn AMIS — mất đúng cái lợi "đội đã quen tay".
   Alfa Slab One chỉ dùng cho tên thương hiệu trên đầu trang.
   ══════════════════════════════════════════════════════════════════ */
:root{
  /* màu thương hiệu Cây Me */
  --xanh-dam:#005335;       /* xanh lá đậm — màu chủ đạo */
  --xanh-chanh:#abc61f;     /* xanh chanh */
  --xanh-oliu:#5b6d0b;      /* xanh ô liu */
  --cam-thuong-hieu:#eb9906;
  --vang:#ecb427;
  --kem:#f4e3b9;
  --nau:#3b1c1b;
  --gach:#c25a35;

  --chu-chinh:#1F2420;      /* chữ chính, ngả theo nâu của bộ nhận diện */
  --chu-phu:#5d5f59;        /* xám của bộ nhận diện */
  --xanh:var(--xanh-dam);   /* màu chính — nút, mục đang mở */
  --xanh-nhat:#E4EFEA;
  --duong:#1570EF;          /* liên kết — giữ xanh dương cho dễ nhận ra */
  --cam:var(--cam-thuong-hieu);
  --cam-nhat:#FDF2DF;
  --do:#c25a35;             /* dùng màu gạch của bộ nhận diện */
  --do-nhat:#FBEDE7;
  --nen:#F5F5F2;            /* nền trang ngả kem rất nhẹ */
  --the:#FFFFFF;
  --vien:#D9DBD4;
  --vien-nhat:#ECEDE8;
  --goc:6px;                /* AMIS bo 6px ở gần như mọi chỗ */
  --chu:"Inter","Be Vietnam Pro",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --chu-hieu:"Alfa Slab One",Georgia,serif;   /* chỉ cho tên thương hiệu */
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --chu-chinh:#E8EAE4; --chu-phu:#9DA096;
  --xanh:#7FB800;                       /* xanh đậm quá tối trên nền tối */
  --xanh-nhat:#1B2615;
  --duong:#5EA2FF; --cam:#F2A93B; --cam-nhat:#2E2416;
  --do:#E0775A; --do-nhat:#30201B;
  --nen:#161814; --the:#1E211C; --vien:#353831; --vien-nhat:#282B25; color-scheme:dark;
}}
*{box-sizing:border-box}
html,body{margin:0;padding:0;height:100%}
body{background:var(--nen);color:var(--chu-chinh);font-family:var(--chu);
  font-size:13px;line-height:1.5;-webkit-text-size-adjust:100%}
a{color:var(--duong);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{margin:0;font-weight:600;letter-spacing:-.005em}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--xanh);outline-offset:1px}

/* ── thanh trên cùng ── */
.dinh{height:46px;background:var(--the);border-bottom:1px solid var(--vien);
  display:flex;align-items:center;gap:14px;padding:0 14px;position:sticky;
  top:env(safe-area-inset-top,0px);z-index:40}
.dinh .hieu{display:flex;align-items:center;gap:8px;color:inherit;text-decoration:none}
/* Logo đã tách nền, không kèm chữ — chị Xuân Anh chốt 08/10/2026 */
.dinh .dau{height:34px;width:auto;flex:none;display:block}
@media (max-width:520px){.dinh .dau{height:28px}}
.chip{display:inline-flex;align-items:center;gap:6px;background:var(--nen);
  border:1px solid var(--vien);border-radius:var(--goc);padding:4px 10px;
  font-size:12px;color:var(--chu-phu);white-space:nowrap}
.chip b{color:var(--chu-chinh);font-weight:500}
.dinh select{background:var(--the);border:1px solid var(--vien);border-radius:var(--goc);
  padding:5px 8px;font-size:12.5px;max-width:220px}
.dinh .cuoi{margin-left:auto;display:flex;align-items:center;gap:10px}
.ai{display:flex;align-items:center;gap:8px;color:inherit;text-decoration:none}
.ai .vong{width:28px;height:28px;border-radius:50%;background:var(--xanh);color:#fff;
  display:grid;place-items:center;font-size:11px;font-weight:600;flex:none}
.ai .ten{font-size:12.5px;line-height:1.25}
.ai .ten b{display:block;font-weight:500}
.ai .ten span{color:var(--chu-phu);font-size:11.5px}
.ai:hover{text-decoration:none}
@media (max-width:760px){.dinh{height:auto;flex-wrap:wrap;padding:8px 12px;gap:8px}
  .dinh .cuoi{margin-left:auto}.ai .ten{display:none}}

/* ── khung chính: cột trái + nội dung ── */
.khung{display:grid;grid-template-columns:192px minmax(0,1fr);min-height:calc(100vh - 46px)}
@media (max-width:860px){.khung{grid-template-columns:minmax(0,1fr)}}

.ben{background:var(--the);border-right:1px solid var(--vien);padding:10px 8px;
  position:sticky;top:46px;align-self:start;max-height:calc(100vh - 46px);overflow-y:auto}
@media (max-width:860px){.ben{position:static;max-height:none;border-right:0;
  border-bottom:1px solid var(--vien);display:flex;gap:6px;overflow-x:auto;padding:8px}}
.ben .nhom{font-size:10.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--chu-phu);padding:12px 8px 5px}
@media (max-width:860px){.ben .nhom{display:none}}
.ben a{display:flex;align-items:center;gap:9px;border-radius:var(--goc);padding:7px 9px;
  color:var(--chu-chinh);font-size:13px;white-space:nowrap}
.ben a:hover{background:var(--nen);text-decoration:none}
.ben a[aria-current]{background:var(--xanh-nhat);color:var(--xanh);font-weight:500}
.ben a .bt{width:18px;height:18px;border-radius:4px;background:var(--nen);
  display:grid;place-items:center;font-size:10px;font-weight:700;color:var(--chu-phu);flex:none}
.ben a[aria-current] .bt{background:var(--xanh);color:#fff}

.noi-dung{min-width:0;display:flex;flex-direction:column}

/* ── tab ngang ── */
.tab{background:var(--the);border-bottom:1px solid var(--vien);display:flex;gap:2px;
  padding:0 14px;overflow-x:auto;position:sticky;top:46px;z-index:20}
@media (max-width:860px){.tab{position:static}}
.tab a{padding:11px 12px;font-size:13px;color:var(--chu-phu);white-space:nowrap;
  border-bottom:2px solid transparent;margin-bottom:-1px}
.tab a:hover{color:var(--chu-chinh);text-decoration:none}
.tab a[aria-current]{color:var(--xanh);font-weight:500;border-bottom-color:var(--xanh)}

.trang{padding:16px 14px 48px;max-width:1400px;width:100%}

/* ── thẻ, bảng ── */
.the{background:var(--the);border:1px solid var(--vien);border-radius:var(--goc)}
.the+.the{margin-top:12px}
.the-dau{padding:11px 14px;border-bottom:1px solid var(--vien);display:flex;
  align-items:center;gap:10px;flex-wrap:wrap}
.the-dau h3{font-size:14px;font-weight:600}
.the-dau p{margin:0;font-size:12px;color:var(--chu-phu)}
.pad{padding:14px}
.dau-trang{margin-bottom:14px}
.dau-trang h2{font-size:16px;font-weight:600}
.dau-trang p{margin:3px 0 0;color:var(--chu-phu);font-size:12.5px;max-width:78ch}

table{border-collapse:collapse;width:100%;font-size:13px}
thead th{background:var(--nen);font-size:11.5px;font-weight:600;color:var(--chu-phu);
  text-align:left;padding:8px 10px;border-bottom:1px solid var(--vien);white-space:nowrap}
tbody td{padding:8px 10px;border-bottom:1px solid var(--vien-nhat);vertical-align:top}
tbody tr:hover{background:var(--nen)}
td.so,th.so{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
tr.tong td{font-weight:600;background:var(--nen);border-top:1px solid var(--vien)}
.cuon{overflow-x:auto}
.ma{font-size:12px;color:var(--chu-phu)}

/* ── ô số liệu ── */
.luoi{display:grid;gap:12px}
.l4{grid-template-columns:repeat(4,minmax(0,1fr))}
.l3{grid-template-columns:repeat(3,minmax(0,1fr))}
.l2{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:980px){.l4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:700px){.l4,.l3,.l2{grid-template-columns:minmax(0,1fr)}}
.o{background:var(--the);border:1px solid var(--vien);border-radius:var(--goc);
  padding:13px 14px;display:block;color:inherit}
a.o:hover{border-color:var(--xanh);text-decoration:none}
.o .ten{font-size:12px;color:var(--chu-phu)}
.o .gia{font-size:20px;font-weight:600;letter-spacing:-.02em;margin-top:2px;
  font-variant-numeric:tabular-nums}
.o .phu{font-size:11.5px;color:var(--chu-phu);margin-top:2px}

/* ── nhãn trạng thái ── */
.cu{display:inline-flex;align-items:center;font-size:11.5px;font-weight:500;
  padding:2px 8px;border-radius:var(--goc);white-space:nowrap}
.cu.xanh{background:var(--xanh-nhat);color:var(--xanh)}
.cu.cam{background:var(--cam-nhat);color:var(--cam)}
.cu.do{background:var(--do-nhat);color:var(--do)}
.cu.xam{background:var(--nen);color:var(--chu-phu);border:1px solid var(--vien)}

/* ── nút ── */
.nut{display:inline-flex;align-items:center;gap:6px;background:var(--xanh);color:#fff;
  border:1px solid var(--xanh);border-radius:var(--goc);padding:7px 14px;
  font-size:13px;font-weight:500;cursor:pointer}
.nut:hover{filter:brightness(1.06);text-decoration:none;color:#fff}
.nut.vien{background:var(--the);color:var(--chu-chinh);border-color:var(--vien)}
.nut.tron{background:transparent;color:var(--chu-phu);border-color:transparent}
.thanh-nut{display:flex;gap:8px;flex-wrap:wrap}

/* ── ô nhập, nhãn nằm trên như AMIS ── */
label.o-nhap{display:block;margin-bottom:12px}
label.o-nhap .nhan{display:block;font-size:12px;color:var(--chu-phu);margin-bottom:4px}
label.o-nhap input,label.o-nhap select,label.o-nhap textarea{width:100%;
  background:var(--the);border:1px solid var(--vien);border-radius:var(--goc);
  padding:7px 10px;font-size:13px}
label.o-nhap input:focus{border-color:var(--xanh)}

/* ── khối chú ý ── */
.canh{border-left:3px solid var(--cam);background:var(--cam-nhat);padding:10px 13px;
  border-radius:0 var(--goc) var(--goc) 0;font-size:12.5px}
.canh.xanh{border-left-color:var(--xanh);background:var(--xanh-nhat)}
.canh.do{border-left-color:var(--do);background:var(--do-nhat)}
.ghi{font-size:12px;color:var(--chu-phu);margin:10px 0 0}
.trong{text-align:center;padding:38px 16px;color:var(--chu-phu);font-size:13px}
hr.m{border:0;border-top:1px solid var(--vien);margin:14px 0}

/* ── thanh đáy cố định của màn nhập phiếu, giống AMIS ── */
.day{position:sticky;bottom:0;background:var(--the);border-top:1px solid var(--vien);
  padding:10px 14px;display:flex;align-items:center;gap:10px;
  padding-bottom:calc(10px + env(safe-area-inset-bottom,0px))}
.day .goi-y{font-size:12px;color:var(--chu-phu)}
.day .thanh-nut{margin-left:auto}

/* ── trang đăng nhập ── */
.cong{min-height:100vh;display:grid;place-items:center;padding:24px 16px}
.cong-hop{width:100%;max-width:360px}
.cong-the{background:var(--the);border:1px solid var(--vien);border-radius:var(--goc);padding:24px 20px}
.cong-the h1{font-size:16px;margin-bottom:3px}
.cong-the p.phu{color:var(--chu-phu);font-size:12.5px;margin:0 0 18px}
.cong .nut{width:100%;justify-content:center;padding:9px}
.loi-o{background:var(--do-nhat);color:var(--do);border-radius:var(--goc);
  padding:9px 11px;font-size:12.5px;margin-bottom:14px}

/* ══ THẺ KIỂM KÊ 10H ═══════════════════════════════════════════════
   Đếm hàng lúc 10h là làm trên điện thoại, một tay cầm máy một tay
   cầm hàng, trong bếp đang đông. Nên: thẻ to, ô nhập to, chạm được
   bằng ngón tay, không phải bảng Excel nhỏ li ti.                   */
.thebs { display:grid; gap:10px; grid-template-columns:1fr; }
@media (min-width:860px)  { .thebs { grid-template-columns:1fr 1fr; } }
@media (min-width:1280px) { .thebs { grid-template-columns:1fr 1fr 1fr; } }

article.bs { background:var(--the); border:1px solid var(--vien);
  border-radius:var(--goc); padding:12px 14px; }
article.bs header { display:flex; justify-content:space-between;
  align-items:flex-start; gap:10px; margin-bottom:10px; }
article.bs h4 { margin:0 0 3px; font-size:15px; font-weight:600;
  color:var(--chu-chinh); line-height:1.3; }
article.bs .dbien { text-align:right; white-space:nowrap; }
article.bs .dbien b { display:block; font-size:19px; color:var(--xanh);
  font-variant-numeric:tabular-nums; }

.o-nhap { display:grid; gap:8px; grid-template-columns:1fr 1fr; }
.o-nhap label { display:flex; flex-direction:column; gap:3px;
  font-size:12px; color:var(--chu-phu); }
.o-nhap label.chinh { grid-column:1 / -1; }
.o-nhap label.chinh input { font-size:20px; font-weight:600; padding:10px 12px; }
.o-nhap input[type=number] { width:100%; font-size:15px; padding:8px 10px;
  border:1px solid var(--vien); border-radius:var(--goc); background:var(--nen);
  color:var(--chu-chinh); font-variant-numeric:tabular-nums; }
.o-nhap input[type=number]:focus { outline:2px solid var(--xanh);
  outline-offset:-1px; background:var(--the); }
.o-nhap label.danh-dau { flex-direction:row; align-items:center; gap:7px;
  grid-column:1 / -1; font-size:13px; padding-top:2px; }
.o-nhap label.danh-dau input { width:18px; height:18px; }

article.bs .ket { margin-top:9px; font-size:12px; font-weight:500;
  padding:6px 9px; border-radius:var(--goc); background:var(--nen);
  color:var(--chu-phu); }
article.bs .ket.thieu { background:#fdeeee; color:#9b2222; }
article.bs .ket.du    { background:#eef6ec; color:var(--xanh-oliu); }

.hang-chon { display:flex; gap:14px; align-items:flex-end; flex-wrap:wrap;
  padding:12px 14px; }
.hang-chon label { display:flex; flex-direction:column; gap:3px;
  font-size:12px; color:var(--chu-phu); }
.hang-chon input, .hang-chon select { padding:7px 9px; font-size:14px;
  border:1px solid var(--vien); border-radius:var(--goc);
  background:var(--the); color:var(--chu-chinh); }

.chan-phieu { position:sticky; bottom:0; display:flex; gap:14px;
  align-items:center; justify-content:space-between; flex-wrap:wrap;
  margin-top:14px; padding:12px 14px; background:var(--the);
  border:1px solid var(--vien); border-radius:var(--goc);
  box-shadow:0 -2px 10px rgba(0,0,0,.06); }

.bang { padding:11px 14px; border-radius:var(--goc); font-size:13px;
  line-height:1.5; margin-bottom:14px; border:1px solid transparent; }
.bang.cam { background:#fff6e6; border-color:#f3d7a0; color:#6b4604; }
.bang.do  { background:#fdeeee; border-color:#f0c4c4; color:#8d2020; }
.luoi.l4 { display:grid; gap:12px; grid-template-columns:repeat(2,1fr); }
@media (min-width:920px) { .luoi.l4 { grid-template-columns:repeat(4,1fr); } }
.luoi .o.nhac { border-color:#f0c4c4; background:#fdeeee; }
.luoi .o.nhac .gia { color:#9b2222; }
.cu.do { background:#fdeeee; color:#9b2222; }

@media (prefers-color-scheme:dark) {
  :root:not([data-giao-dien="sang"]) article.bs .ket.thieu { background:#3a1c1c; color:#ffb4b4; }
  :root:not([data-giao-dien="sang"]) article.bs .ket.du    { background:#1e2a16; color:#b6d96a; }
  :root:not([data-giao-dien="sang"]) .bang.cam { background:#2e2410; border-color:#5c4a1c; color:#f0d79a; }
  :root:not([data-giao-dien="sang"]) .bang.do  { background:#331a1a; border-color:#5e2a2a; color:#ffb4b4; }
  :root:not([data-giao-dien="sang"]) .luoi .o.nhac { background:#331a1a; border-color:#5e2a2a; }
  :root:not([data-giao-dien="sang"]) .cu.do { background:#331a1a; color:#ffb4b4; }
}

/* Thanh gửi phiếu dính đáy che mất thẻ cuối cùng. Chừa chỗ cho nó.
   Trên điện thoại thẻ cuối hay là mã khó đếm nhất, bị che là bỏ sót. */
#phieu { padding-bottom:84px; }
@media (max-width:640px) {
  /* Đếm hàng là việc một tay, ngón cái phải với tới được nút gửi. */
  .chan-phieu { margin-left:-12px; margin-right:-12px; border-radius:0;
                border-left:0; border-right:0;
                padding-bottom:calc(12px + env(safe-area-inset-bottom)); }
  .chan-phieu .nut { flex:1; text-align:center; padding:12px 16px; font-size:15px; }
  article.bs header { flex-direction:column; align-items:stretch; gap:4px; }
  article.bs .dbien { text-align:left; display:flex; align-items:baseline; gap:6px; }
  article.bs .dbien b { display:inline; }
}