/* FoxAI MES — phần bổ sung cho hệ thiết kế FOXAI UI.
 *
 * Chỉ viết ở đây những thứ `foxai-ui.css` không có sẵn. Mọi màu, cỡ chữ và khoảng cách đều
 * lấy từ token trong `:root` của kit — không hardcode, không tự đặt thang mới.
 */

/* Số thứ tự màn hình trên thanh bên, dùng đúng ô `.ic` của kit. */
#sb a .ic {
  font-size: 11px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

/* Khối người dùng ở chân thanh bên.
 *
 * `#eaf6fa` là màu chữ sáng của thanh bên trong chính bộ kit (`#sb a:hover`, `#sb .foot b`).
 * Bộ kit không đưa nó vào `:root`, nên ở đây dùng lại đúng giá trị đó thay vì tự chế màu mới.
 */
#sb .foot select {
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .14);
  color: #eaf6fa;
  border-radius: 7px;
  padding: 4px 6px;
  font-size: 10.5px;
  font-family: inherit;
  width: 100%;
  margin-top: 4px;
}
#sb .foot select option { color: var(--ink); }
#sb .foot .who { min-width: 0; flex: 1; }

/* Ô tìm trên thanh trên. */
#top .search { position: relative; width: 300px; flex: none; }
#top .search input {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 6px 10px 6px 28px;
  font-size: 12px;
  font-family: inherit;
  background: #fff;
  color: var(--ink);
}
#top .search input:focus { outline: none; border-color: var(--pr); box-shadow: 0 0 0 3px var(--pr-l); }
#top .search::before {
  content: "⌕";
  position: absolute;
  left: 9px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--ink3);
  font-size: 15px;
}

/* Bố cục danh sách bên trái · chi tiết bên phải. Kit chỉ có .grid2 chia đều. */
.grid-ld { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); gap: 15px; align-items: start; }
@media (max-width: 1050px) { .grid-ld { grid-template-columns: 1fr; } }

/* Thẻ chỉ có bảng: bỏ đệm để bảng chạm viền thẻ. */
.card.khit { padding: 15px 0 0; }
.card.khit h3 { padding: 0 17px; }

/*
 * Ô chỉ số không tính được.
 *
 * Quy tắc 8: thiếu dữ liệu thì nói rõ là thiếu, không bao giờ hiện 0. Một ô trống người dùng
 * còn nhìn thấy; một con số bịa thì không.
 */
.kpi .v.na { font-size: 12px; font-weight: 700; color: var(--amber); letter-spacing: 0; padding: 7px 0 6px; }

/* Dòng bảng chọn được, cho bố cục danh sách · chi tiết. */
table.t tbody tr.sel { cursor: pointer; }
table.t tbody tr[aria-selected="true"] td { background: var(--pr-l); }

/* Biểu đồ cột sản lượng theo giờ. Kit có .bar ngang nhưng không có cột dọc. */
.colchart { display: flex; align-items: flex-end; gap: 5px; height: 112px; }
.colchart .col { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; height: 100%; gap: 3px; }
.colchart .col i { display: block; border-radius: 3px 3px 0 0; min-height: 2px; background: var(--pr); }
.colchart .col i.bad { background: var(--red); border-radius: 3px 3px 0 0; }
.colchart .col b { font-size: 9px; font-weight: 700; color: var(--ink3); text-align: center; }
.legend2 { display: flex; gap: 12px; font-size: 10.5px; color: var(--ink3); margin-top: 8px; }
.legend2 span { display: inline-flex; align-items: center; gap: 5px; }
.legend2 i { width: 9px; height: 9px; border-radius: 3px; display: inline-block; }

/* Hàng nút lớn dùng tại chuyền. */
.btnrow { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 11px; }

.empty { font-size: 11.5px; color: var(--ink3); padding: 13px 17px; }
.card.khit .empty { padding: 0 17px 15px; }

/*
 * Tablet tại chuyền: thanh bên thành dải ngang cuộn được.
 *
 * Xếp dọc thì menu chiếm gần nửa màn hình và tổ trưởng phải cuộn qua nó mỗi lần nhập một con
 * số — mỗi giờ một lần, suốt ca.
 */
@media (max-width: 860px) {
  body { display: block; }
  #sb {
    width: 100%;
    height: auto;
    position: static;
    flex-direction: row;
    align-items: stretch;
    overflow-x: auto;
  }
  #sb .brand { border-bottom: 0; border-right: 1px solid rgba(255, 255, 255, .08); flex: none; padding: 10px 13px; }
  #sb .grp, #sb .foot { display: none; }
  /* `nav` chứa hai div bọc theo nhóm — phải cho cả hai thành flex, không thì ra hai cột. */
  #sb nav, #sb nav > div { display: flex; flex: none; overflow: visible; padding: 0; }
  #sb a { border-left: 0; border-bottom: 3px solid transparent; padding: 12px 13px 9px; white-space: nowrap; }
  #sb a.on { border-left: 0; border-bottom-color: var(--pr-bright); }
  #top { height: auto; padding: 9px 16px; flex-wrap: wrap; }
  #top .search { width: 100%; order: 9; }
  #main { padding: 14px 16px 60px; max-height: none; }
  .btn { font-size: 13px; padding: 9px 15px; }
}

/* ====================================================== màn đăng nhập (M20)
 *
 * Phần riêng của màn đăng nhập và hộp đổi mật khẩu. Mọi màu, cỡ chữ và khoảng cách lấy từ
 * token trong `:root` của bộ kit; thang khoảng cách giữ nguyên thang lẻ 5·6·7·9·10·11·12.
 */

/* `body` của bộ kit là flex (thanh bên + vùng làm việc). Trang đăng nhập không có thanh bên,
 * nên chỉ cần căn giữa chính cái flex đó — không dựng lại bố cục mới. */
body.trang-dn { align-items: center; justify-content: center; min-height: 100vh; padding: 24px; }
.dn-khung { width: 100%; max-width: 352px; }

/* Khối thương hiệu: dùng lại đúng gradient và cỡ chữ của `#sb .logo` / `#sb .brand`, nhưng
 * trên nền sáng nên chữ là `--ink` thay cho trắng. */
.dn-hieu { display: flex; gap: 11px; align-items: center; margin-bottom: 15px; }
.dn-logo {
  width: 38px;
  height: 38px;
  border-radius: 9px;
  background: linear-gradient(135deg, var(--pr-bright), var(--pr));
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  font-weight: 800;
  color: #fff;
  font-size: 13px;
  letter-spacing: -.3px;
}
.dn-hieu b { display: block; font-size: 15px; font-weight: 800; letter-spacing: -.2px; line-height: 1.1; }
.dn-hieu small { display: block; font-size: 9.5px; color: var(--ink3); letter-spacing: .2px; margin-top: 2px; }

.dn-nut { width: 100%; justify-content: center; margin: 2px 0 0; }
.dn-chu { font-size: 10.5px; color: var(--ink3); margin: 11px 0 0; line-height: 1.6; }
.dn-chan { font-size: 10px; color: var(--ink3); text-align: center; margin: 0; }

/* Hai nút phiên trên thanh trên. Để cạnh chuông cảnh báo, nên thấy được cả trên tablet —
 * ở bề rộng tablet bộ kit ẩn chân thanh bên, chỗ duy nhất còn lại để đăng xuất. */
#phien-nut { display: inline-flex; gap: 5px; flex: none; }

/* Hộp đổi mật khẩu. Bóng đậm chỉ dùng cho lớp nổi — đúng chỗ `--sh2` sinh ra.
 *
 * `rgba(14,40,50,.38)` là màu nền mờ của lớp phủ: bộ kit không có token cho nó, nên ở đây
 * dùng đúng tông ám xanh lục lam mà chính bộ kit dùng cho bóng (`--sh`, `--sh2`) thay vì một
 * màu đen trung tính. Chỉ dùng cho lớp phủ này. */
.dn-lop {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: rgba(14, 40, 50, .38);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.dn-lop[hidden] { display: none; }
.dn-hop { width: 100%; max-width: 336px; margin: 0; box-shadow: var(--sh2); }

/* --------------------------------------------------- nhóm A2 · M19 sửa và xoá bản ghi */

/*
 * Nút xoá trong bảng ghi nhận: viền và chữ đỏ trên nền panel.
 *
 * Bộ kit có `.btn.r` nền đỏ đặc, nhưng một bảng tám dòng thì thành tám khối đỏ — ngược hẳn
 * nguyên tắc "màu ngữ nghĩa dùng tiết kiệm" của mục 0. Giữ đúng cặp nền-nhạt / chữ-đậm mà
 * `.pill` đang dùng, nên hành động phá hoại vẫn đọc ra ngay mà bảng không bị đỏ rực.
 */
.btn.xoa { background: var(--panel); color: var(--red); border-color: var(--red); }

/* Hai nút trong một ô bảng: bỏ lề dọc của `.btn` để dòng không cao thêm.
 *
 * Giới hạn trong hai màn của nhóm A2: một rule `table.t td .btn` không giới hạn sẽ đổi luôn
 * bảng của nhóm khác, mà họ không thấy trước được. */
#tab-ke-hoach table.t td .btn,
#tab-chuyen table.t td .btn { margin: 0 2px 0 0; }

/* ------------------------------------------------- nhóm A1 · dữ liệu nền */

/*
 * Nút không bấm được.
 *
 * Bộ kit không có trạng thái này, mà `.btn` đặt nền đặc nên mặc định của trình duyệt không
 * làm nó nhạt đi. Một nút "Xác nhận ghi" trông bấm được nhưng không bấm được thì người dùng
 * bấm mãi rồi tưởng phần mềm treo — ở đây nó là nút ghi vào dữ liệu nền, nên phải nhìn ra
 * ngay là đang bị chặn vì file còn chỗ phải sửa.
 */
.btn:disabled { filter: grayscale(1); opacity: .5; cursor: not-allowed; }
.btn:disabled:hover { filter: grayscale(1); }

/* Hai nút trong một ô bảng: bỏ lề dọc của `.btn` để dòng không cao thêm.
 *
 * Giới hạn trong ba màn danh mục của nhóm A1, cùng lý do nhóm A2 đã ghi ở trên: một rule
 * `table.t td .btn` không giới hạn sẽ đổi luôn bảng của nhóm khác. */
#tab-may table.t td .btn,
#tab-ma table.t td .btn,
#tab-cong-nhan table.t td .btn { margin: 0 2px 0 0; }

/* --------------------------------- nhóm A3 · M14 nhịp trong ca, M16 báo cáo kỳ */

/*
 * Ô chọn gọn nằm ngay trong tiêu đề thẻ.
 *
 * Bộ kit chỉ có `.field select` dạng khối, chữ 13px và chiếm cả bề rộng — đặt nó vào dòng
 * `h3` thì dòng tiêu đề cao thêm và thẻ mất mật độ, đúng chỗ nguyên tắc "chữ nhỏ, đậm" của
 * mục 0 bị phá. Ở đây giữ thang chữ của `.pill` (10.5px) và bo 8px của `.chip`.
 */
.card h3 select.gon {
  font-size: 11px;
  font-weight: 700;
  font-family: inherit;
  color: var(--ink);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 3px 6px;
  margin-left: 5px;
  font-variant-numeric: tabular-nums;
}
.card h3 select.gon:focus { outline: none; border-color: var(--pr); box-shadow: 0 0 0 3px var(--pr-l); }

/* Panel tài khoản thử nghiệm ở màn đăng nhập — 12.7. Bộ kit không có kiểu "nút là cả một
   dòng danh sách", nên dựng ở đây bằng đúng token của kit: viền 1px, không đổ bóng. */
.dn-thu { margin-top: 11px; }
.dn-thu h3 { margin-bottom: 9px; }
.dn-vai-nut {
  display: block;
  width: 100%;
  text-align: left;
  padding: 7px 9px;
  margin-bottom: 5px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--panel);
  font-family: inherit;
  cursor: pointer;
}
.dn-vai-nut:hover { border-color: var(--pr); background: var(--pr-l); }
.dn-vai-nut:disabled { opacity: .55; cursor: default; }
.dn-vai-dong { display: flex; align-items: center; gap: 6px; }
.dn-vai-nut b { font-size: 12px; font-weight: 700; color: var(--ink); }
.dn-vai-nut small { display: block; font-size: 10px; color: var(--ink3); margin-top: 2px; }

/* ------------------------------------- nhóm B2 · N15 màn Kế hoạch sản xuất */

/*
 * Pill "đã phát một phần".
 *
 * Năm trạng thái kế hoạch cần năm màu phân biệt được, nhưng bộ kit chỉ có bốn class pill ngữ
 * nghĩa. Token `--violet` / `--violet-l` đã có trong `:root` của kit, chỉ thiếu class — nên ở
 * đây là khai class còn thiếu, không phải đặt màu mới.
 */
.p-violet { background: var(--violet-l); color: var(--violet); }

/*
 * Hàng lọc nằm ngay dưới tiêu đề cột.
 *
 * Bộ kit không có kiểu này: `.field input` là ô khối chữ 13px, đặt vào bảng 12.6px thì một
 * dòng lọc cao hơn hai dòng dữ liệu cộng lại và bảng mất hết mật độ. Nền và viền để nguyên
 * của `table.t th` nên hàng lọc đọc ra ngay là thuộc phần tiêu đề, không phải một dòng dữ liệu.
 */
 * Viền 2px của `table.t th` dồn xuống hàng lọc, hàng tiêu đề chỉ còn 1px: hai hàng khi đó
 * đọc ra là **một** khối tiêu đề, chứ không phải tiêu đề rồi một dòng dữ liệu lạ.
 */
#tab-ke-hoach-sx table.t thead tr:first-child th { border-bottom-width: 1px; }
#tab-ke-hoach-sx table.t thead tr.loc th { padding: 5px 10px 7px; }
/* `table.t th` IN HOA cả chữ bên trong, nên phải trả chữ của ô lọc và nút về chữ thường. */
#tab-ke-hoach-sx table.t thead tr.loc .btn { text-transform: none; letter-spacing: 0; }
#tab-ke-hoach-sx table.t thead tr.loc input,
#tab-ke-hoach-sx table.t thead tr.loc select {
  width: 100%;
  min-width: 68px;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 4px 6px;
  font-size: 11px;
  font-weight: 500;
  font-family: inherit;
  color: var(--ink);
  background: var(--panel);
  text-transform: none;
  letter-spacing: 0;
}
#tab-ke-hoach-sx table.t thead tr.loc input:focus,
#tab-ke-hoach-sx table.t thead tr.loc select:focus {
  outline: none;
  border-color: var(--pr);
  box-shadow: 0 0 0 3px var(--pr-l);
}
/* Hai ô ngày *từ* và *đến* của cùng một cột. */
#tab-ke-hoach-sx table.t thead tr.loc .doi { display: flex; gap: 5px; }

/* Tiêu đề cột sắp xếp được. Mũi ⇅ xám, đổi thành ↑ hoặc ↓ màu thương hiệu khi đang sắp theo cột đó. */
#tab-ke-hoach-sx table.t th.sx { cursor: pointer; user-select: none; }
#tab-ke-hoach-sx table.t th.sx .mui { font-style: normal; font-weight: 800; color: var(--ink3); }
#tab-ke-hoach-sx table.t th.sx .mui.on { color: var(--pr); }

/* Dòng phụ trong ô bảng: tên sản phẩm, ghi chú, lý do loại. */
#tab-ke-hoach-sx table.t td .phu { font-size: 10.5px; color: var(--ink3); margin-top: 2px; }

/* Cột thao tác: nhiều nút trên một dòng, bỏ lề dọc của `.btn` để dòng không cao thêm.
 * Giới hạn trong màn này, cùng lý do nhóm A2 và A1 đã ghi ở trên. */
#tab-ke-hoach-sx table.t td .btn { margin: 0 2px 0 0; }
#tab-ke-hoach-sx table.t td.viec { white-space: nowrap; }

/* ------------------------------------------------- nhóm B3 · màn Phát lệnh (2.9) */

/*
 * Ô nhập số ngay trong ô bảng.
 *
 * `.field input` của bộ kit là ô dạng khối, 13px và chiếm cả bề rộng — đặt nó vào một ô bảng
 * thì dòng cao gần gấp đôi và bảng mười dòng không còn vừa màn hình, đúng chỗ tiêu chí mật độ
 * của mục 6 bị phá. Ở đây giữ thang chữ của `table.t td` (12.6px) và bo 7px của ô nhỏ.
 */
#tab-phat-lenh table.t input.so {
  width: 82px;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 4px 7px;
  font-size: 12.6px;
  font-weight: 700;
  font-family: inherit;
  background: var(--panel);
  color: var(--ink);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
#tab-phat-lenh table.t input.so:focus { outline: none; border-color: var(--pr); box-shadow: 0 0 0 3px var(--pr-l); }

/* Cảnh báo của từng dòng, nằm ngay dưới ô nhập. Là thẻ riêng cạnh ô nhập chứ không bọc nó:
 * vẽ lại ô nhập mỗi lần gõ một chữ số thì mất con trỏ. Rỗng thì không chiếm chỗ. */
.pl-co { display: flex; justify-content: flex-end; gap: 5px; flex-wrap: wrap; margin-top: 4px; }
.pl-co:empty { display: none; }

/* Chân bảng nháp: tổng đề xuất so với SL còn lại. Viền trên 2px cho khớp viền dưới tiêu đề
 * cột của bộ kit, nên hai đầu bảng nặng bằng nhau. */
#tab-phat-lenh table.t tfoot td {
  border-top: 2px solid var(--line);
  border-bottom: 0;
  background: var(--bg);
  font-weight: 700;
  color: var(--ink2);
}
#tab-phat-lenh table.t tfoot td.r { color: var(--ink); }

/* Hai nút trong một ô bảng: bỏ lề dọc của `.btn` để dòng không cao thêm. Giới hạn trong màn
 * của nhóm B3, cùng lý do các nhóm trước đã ghi — một rule không giới hạn đổi luôn bảng của
 * nhóm khác mà họ không thấy trước. */
#tab-phat-lenh table.t td .btn { margin: 0 2px 0 0; }

/* ===================================== nhóm B4 · 2.11 Lịch nhà máy (màn hình 3)
 *
 * Bộ kit có `.gwrap`/`.gantt` cho kiểu "một dòng một thanh thời gian", nhưng không có lưới
 * hai chiều mà **mỗi ô là một ca**. Đó là lý do phần dưới đây phải viết mới thay vì dùng lại
 * `table.t`: lưới cần ô nhiều dòng, cột tên chuyền đứng yên khi cuộn ngang, và màu ngữ nghĩa
 * trên nền ô — ba thứ `table.t` không làm được mà không phá bảng của màn khác.
 *
 * Mọi màu lấy từ token `:root` của kit, cỡ chữ giữ thang 10–12.6px, khoảng cách giữ thang lẻ.
 * Tiền tố `.lich-` để hai nhóm giao diện khác cùng sửa file này không đụng nhau.
 */

/* Khung cuộn ngang của lưới. Giống `.tw` của kit nhưng không có `margin:0 -2px`: lưới nằm
 * sát viền thẻ `.card.khit`, nên lệch 2px là cột tên chuyền dính lệch khỏi mép thẻ. */
.lich-cuon { position: relative; overflow-x: auto; }

table.lich-luoi {
  border-collapse: separate;
  border-spacing: 0;
  min-width: 100%;
  font-size: 11.5px;
  background: var(--panel);
}

/* Tiêu đề cột: IN HOA 10px `--ink3`, viền dưới 2px — đúng ba điểm của `table.t` trong kit. */
table.lich-luoi th {
  font-size: 10px;
  font-weight: 700;
  color: var(--ink3);
  text-transform: uppercase;
  letter-spacing: .04em;
  text-align: left;
  white-space: nowrap;
  background: var(--bg);
  padding: 6px 9px;
  border-bottom: 2px solid var(--line);
}
table.lich-luoi th.lich-ngay {
  text-align: center;
  color: var(--ink);
  font-weight: 800;
  letter-spacing: 0;
  font-size: 11px;
  border-bottom: 1px solid var(--line2);
  border-left: 1px solid var(--line);
}
table.lich-luoi th.lich-ngay .lich-thu {
  color: var(--ink3);
  font-weight: 700;
  font-size: 9.5px;
  letter-spacing: .05em;
  margin-right: 5px;
}
table.lich-luoi th.lich-ca { text-align: center; min-width: 118px; }

/* Cột tên chuyền đứng yên: cuộn sang ngày thứ tư mà cột này chạy theo thì không còn biết
 * đang đọc dòng nào. `border-collapse:separate` ở trên là điều kiện để viền của ô dính này
 * không bị mất khi cuộn. */
table.lich-luoi th.lich-ten {
  position: sticky;
  left: 0;
  z-index: 2;
  width: 158px;
  min-width: 158px;
  background: var(--panel);
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line2);
  vertical-align: middle;
  text-transform: none;
  letter-spacing: 0;
  padding: 7px 10px;
}
table.lich-luoi th.lich-ten b { display: block; font-size: 12px; font-weight: 800; color: var(--ink); }
table.lich-luoi th.lich-ten small { display: block; font-size: 10px; font-weight: 500; color: var(--ink3); margin-top: 1px; }
table.lich-luoi thead th.lich-goc { z-index: 3; background: var(--bg); border-bottom: 2px solid var(--line); }

/* Một ô = một ca của một chuyền. Bốn thứ xếp dọc: mức lấp đầy · thanh · SL/năng lực · kế hoạch. */
table.lich-luoi td.lich-o {
  min-width: 118px;
  padding: 6px 9px 7px;
  border-left: 1px solid var(--line2);
  border-bottom: 1px solid var(--line2);
  vertical-align: top;
  cursor: pointer;
}
table.lich-luoi td.lich-o:hover { outline: 1px solid var(--pr); outline-offset: -1px; }
table.lich-luoi td.lich-o:focus-visible { outline: 2px solid var(--pr); outline-offset: -2px; }
table.lich-luoi td.lich-dang-chon { outline: 2px solid var(--pr); outline-offset: -2px; }

/* Ô máy chủ không trả ca nào. Không phải "ca trống" — trống là một mức lấp đầy, còn đây là
 * không có ca. Trộn hai thứ là đếm ra chỗ còn nhận việc nhiều hơn thực tế. */
table.lich-luoi td.lich-khong {
  color: var(--ink3);
  text-align: center;
  cursor: default;
  background: var(--bg);
}
table.lich-luoi td.lich-khong:hover { outline: none; }

.lich-d1 { display: flex; align-items: baseline; gap: 5px; flex-wrap: wrap; }
.lich-ty { font-size: 14px; font-weight: 800; letter-spacing: -.2px; font-variant-numeric: tabular-nums; }
.lich-nhan { font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
/* Quy tắc 8: chuyền chưa khai tốc độ thiết kế thì nói ra, không hiện 0%. */
.lich-thieu { font-size: 10px; font-weight: 700; color: var(--amber); line-height: 1.35; }
.lich-trong-nl { color: var(--amber); font-weight: 700; }

.lich-bar { height: 5px; border-radius: 5px; background: var(--line2); overflow: hidden; margin: 5px 0; }
.lich-bar i { display: block; height: 100%; border-radius: 5px; background: var(--ink3); }

.lich-d2 { font-size: 10.5px; color: var(--ink2); font-variant-numeric: tabular-nums; }
.lich-d2 b { font-weight: 800; color: var(--ink); }
.lich-d3 { margin-top: 5px; display: flex; flex-direction: column; gap: 2px; }
.lich-kh { font-size: 9.5px; color: var(--ink2); line-height: 1.4; }
.lich-kh b { font-weight: 700; color: var(--pr-d); }
.lich-kh.lich-them { color: var(--ink3); }

/* Bốn mức lấp đầy + mức "chưa tính được". Nền nhạt / chữ đậm cùng tông, đúng cặp màu mà
 * `.pill` của kit dùng — không màu nào tự chế. */
table.lich-luoi td.lich-m-trong { background: var(--slate-l); }
table.lich-luoi td.lich-m-trong .lich-ty, table.lich-luoi td.lich-m-trong .lich-nhan { color: var(--slate); }
table.lich-luoi td.lich-m-trong .lich-bar i { background: var(--slate); }

table.lich-luoi td.lich-m-con-cho { background: var(--green-l); }
table.lich-luoi td.lich-m-con-cho .lich-ty, table.lich-luoi td.lich-m-con-cho .lich-nhan { color: var(--green); }
table.lich-luoi td.lich-m-con-cho .lich-bar i { background: var(--green); }

table.lich-luoi td.lich-m-gan-day { background: var(--amber-l); }
table.lich-luoi td.lich-m-gan-day .lich-ty, table.lich-luoi td.lich-m-gan-day .lich-nhan { color: var(--amber); }
table.lich-luoi td.lich-m-gan-day .lich-bar i { background: var(--amber); }

table.lich-luoi td.lich-m-qua-tai { background: var(--red-l); }
table.lich-luoi td.lich-m-qua-tai .lich-ty, table.lich-luoi td.lich-m-qua-tai .lich-nhan { color: var(--red); }
table.lich-luoi td.lich-m-qua-tai .lich-bar i { background: var(--red); }

table.lich-luoi td.lich-m-thieu { background: var(--panel); border-left: 1px dashed var(--amber); }

/* Ô màu của chú giải — dùng lại `.legend2` đã có ở trên, chỉ thêm màu. */
.lich-sw-trong { background: var(--slate); }
.lich-sw-con-cho { background: var(--green); }
.lich-sw-gan-day { background: var(--amber); }
.lich-sw-qua-tai { background: var(--red); }
.lich-sw-thieu { background: var(--amber-l); border: 1px dashed var(--amber); }

/* Dải thông số của ô đang chọn, trên đầu bảng kế hoạch đã phát (quy tắc 10). */
.lich-ct { display: flex; flex-wrap: wrap; gap: 7px 21px; }
.lich-ct > span { display: flex; flex-direction: column; gap: 1px; font-size: 11.5px; color: var(--ink2); }
.lich-ct b { font-size: 13px; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }

/* Dòng phụ dưới mã sản phẩm trong bảng kế hoạch — tên sản phẩm. Dùng đúng thang nhãn 10.5px
 * của `.pill` thay vì gõ cỡ chữ thẳng vào HTML của màn hình. */
#tab-phat-lenh table.t .ph { font-size: 10.5px; color: var(--ink3); font-weight: 500; }

/* ===================================================================
   Bố cục đầu trang — theo mẫu phân hệ Mua sắm tập trung.

   Bộ kit đặt tiêu đề trang vào `#top`. MSTT thì không: thanh trên chỉ giữ việc của toàn hệ
   thống, còn tiêu đề và nút chức năng của trang nằm trong vùng nội dung. Nhồi cả hai vào một
   hàng là thứ làm thanh trên chen chúc và nút chức năng mất trọng lượng.
   =================================================================== */

#top { height: 62px; gap: 11px; }

/* Ô tìm đứng đầu thanh trên, rộng nhưng có trần — kéo hết chiều ngang thì nó át mọi thứ. */
#top .search { flex: 1; max-width: 420px; }

/* Khối người dùng: ảnh tắt tên + họ tên + vai, thay cho hai dòng chữ rời. */
#top .nd { display: flex; align-items: center; gap: 9px; padding-left: 11px; border-left: 1px solid var(--line); }
#top .nd .av {
  width: 30px; height: 30px; border-radius: 9px; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--pr-bright), var(--pr));
  color: #fff; font-weight: 800; font-size: 11px; letter-spacing: -.3px;
}
#top .nd .who b { display: block; font-size: 12px; font-weight: 700; line-height: 1.2; }
#top .nd .who small { display: block; font-size: 9.5px; color: var(--ink3); letter-spacing: .2px; }
#top #top-auth { display: flex; align-items: center; gap: 7px; }

/* Đầu trang trong vùng nội dung. */
#main .pg { display: flex; align-items: flex-start; gap: 11px; padding: 17px 0 13px; }
#main .pg .pg-t { min-width: 0; }
#main .pg .sub { margin: 5px 0 0; }
#main .pg h1 { margin: 2px 0 0; font-size: 19px; font-weight: 800; letter-spacing: -.3px; }
#main .pg .sp { flex: 1; }
#main .pg #trang-ca, #main .pg #trang-viec { display: flex; align-items: center; gap: 7px; margin-top: 6px; }

/* Badge số hiệu màn hình — chỗ bám để gọi tên màn khi trao đổi: "mở màn 3 giúp tôi". */
.pg-so {
  flex: none; margin-top: 5px;
  min-width: 27px; height: 23px; padding: 0 7px; border-radius: 7px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--pr-l); color: var(--pr); border: 1px solid var(--line);
  font-size: 11px; font-weight: 800; letter-spacing: -.2px;
}

/* Dải điều hướng ngang của tablet: thanh trên gọn lại, khối người dùng bỏ phần chữ. */
@media (max-width: 860px) {
  #top { height: auto; flex-wrap: wrap; padding: 9px 13px; }
  #top .search { order: 9; flex-basis: 100%; max-width: none; }
  #top .nd .who { display: none; }
  #main .pg { flex-wrap: wrap; }
}

/* ===================================================================
   Chiều rộng vùng nội dung.

   Bộ kit chặn `#main` ở 1300px. Trên màn 1920 thì phần dùng được là 1672px, nên nội dung
   dồn về trái và thừa một dải trống ~370px bên phải — trong khi thanh trên vẫn kéo hết
   chiều ngang. Hai phần lệch nhau là thứ nhìn thấy ngay.

   Phân hệ Mua sắm tập trung cho nội dung kéo tới sát mép phải, nên làm theo. Vẫn giữ một
   trần ở 1760px: bảng rộng quá thì mắt phải đi quãng đường dài giữa cột đầu và cột cuối.
   =================================================================== */
#main { max-width: 1760px; }

/* Khi màn rộng hơn cả trần thì căn giữa, để phần thừa chia đều hai bên thay vì dồn một phía. */
@media (min-width: 2060px) { #main { margin: 0 auto; } }

/* Thanh trên lùi vào đúng bằng lề trái của nội dung, để ô tìm thẳng hàng với tiêu đề trang. */
#top { padding-left: 24px; padding-right: 24px; }

/* Trạng thái rỗng: canh giữa và có chiều cao, thay vì một dòng chữ lạc lõng sát mép trái. */
.card .rong, #main .rong {
  padding: 34px 20px;
  text-align: center;
  color: var(--ink3);
  font-size: 12px;
}

/* Màn 13 · Định tuyến — danh sách chuyền chọn được cho một công đoạn. Bộ kit có `.chip`
   nhưng không có kiểu "chip bọc một ô tích", nên thêm ở đây bằng đúng token của kit. */
#tab-dinh-tuyen .chips { display: flex; flex-wrap: wrap; gap: 6px; }
#tab-dinh-tuyen .chips .chip { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font-weight: 600; }
#tab-dinh-tuyen .chips .chip input { margin: 0; cursor: pointer; }
#tab-dinh-tuyen .card.khit { background: var(--bg); }
#tab-dinh-tuyen td .chip { margin-right: 5px; }

/* ===================================================================
   Màn 15 · Kiểm tra chất lượng — nhóm C2, đợt 1a. Chỉ thêm, bám token của kit.

   Bộ kit không có ô nhập nằm trong bảng, nên lưới mẫu × hạng mục cần kiểu riêng. Ô ngoài
   khoảng tiêu chuẩn tô bằng cặp màu ngữ nghĩa đỏ của kit (--red / --red-l), không màu mới.
   =================================================================== */
#tab-kiem-tra .kt-loc { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 2px 11px; align-items: end; }
#tab-kiem-tra .kt-loc .field .btn { width: 100%; justify-content: center; padding: 8px 12px; }
#tab-kiem-tra .kt-bam { cursor: pointer; border-radius: var(--r); }
#tab-kiem-tra .kt-bam .kpi { height: 100%; transition: border-color .12s, box-shadow .12s; }
#tab-kiem-tra .kt-bam:hover .kpi { border-color: var(--pr); }
#tab-kiem-tra .kt-bam:focus-visible { outline: none; }
#tab-kiem-tra .kt-bam:focus-visible .kpi,
#tab-kiem-tra .kt-bam.on .kpi { border-color: var(--pr); box-shadow: 0 0 0 3px var(--pr-l); }
#tab-kiem-tra .kt-lien { color: var(--pr); font-weight: 700; cursor: pointer; }
#tab-kiem-tra .kt-dau { padding: 0 17px 11px; display: flex; gap: 6px; flex-wrap: wrap; }
#tab-kiem-tra .kt-dau.kt-dau-0 { padding: 0; }
#tab-kiem-tra .kt-chu { margin: 0 17px 13px; }
#tab-kiem-tra table.t th .kt-kh { display: block; margin-top: 2px; font-size: 10px; font-weight: 600; color: var(--ink2); text-transform: none; letter-spacing: 0; }
#tab-kiem-tra table.t .kt-o {
  width: 86px;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 4px 7px;
  font-size: 12.6px;
  font-weight: 700;
  font-family: inherit;
  background: var(--panel);
  color: var(--ink);
  transition: border-color .12s, background .12s;
}
#tab-kiem-tra table.t select.kt-o { width: 104px; font-weight: 600; }
#tab-kiem-tra table.t .kt-o.w { width: 190px; font-weight: 600; }
#tab-kiem-tra table.t .kt-o:focus { outline: none; border-color: var(--pr); box-shadow: 0 0 0 3px var(--pr-l); }
#tab-kiem-tra table.t .kt-o:disabled { background: var(--bg); color: var(--ink2); }
#tab-kiem-tra table.t .kt-o.bad { border-color: var(--red); background: var(--red-l); color: var(--red); }
#tab-kiem-tra table.t .kt-o.doi { border-color: var(--amber); background: var(--amber-l); }

/* ============================================ nhóm C1 · màn 14 Andon & nhịp chuyền (4.10 · 4.11)
 *
 * Tiền tố `#tab-andon`, `.ad-`, `.td-` để không đổi bảng hay thẻ của nhóm khác. Mọi màu lấy từ
 * token `:root` của bộ kit; khoảng cách giữ thang lẻ 5·6·7·9·10·11·12.
 */

/* Ô chỉ số bấm được — quy tắc 10: bấm vào con số là ra cuộc gọi đã tạo ra nó. */
#tab-andon .kpi.ad-bam { cursor: pointer; transition: border-color .12s; }
#tab-andon .kpi.ad-bam:hover { border-color: var(--pr); }
#tab-andon .kpi.ad-bam:focus { outline: none; box-shadow: 0 0 0 3px var(--pr-l); }

/* Dòng phụ trong ô bảng và trong ô công đoạn: người gọi, vai nhận, mục tiêu. */
#tab-andon .ad-phu { font-size: 10.5px; color: var(--ink3); margin-top: 2px; }
#tab-andon a.ad-so { color: var(--pr); font-weight: 800; cursor: pointer; text-decoration: underline; }
#tab-andon table.t td .btn { margin: 0 2px 0 0; }
#tab-andon h3 .rt .btn { margin: 0 0 0 5px; }

/*
 * Dải công đoạn theo tốc độ thiết kế.
 *
 * Bộ kit có `.bar` ngang nhưng không có "thanh kèm một vạch mốc": takt phải là một vạch đứng
 * cắt qua thanh chu kỳ, để nhìn là biết công đoạn nào vượt nhịp. Vạch dùng `--en` — đúng màu
 * bộ kit dùng cho vạch "hôm nay" của `.gtoday`, cùng nghĩa "mốc để so".
 */
.td-dai { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 9px; margin-top: 11px; }
.td-o { border: 1px solid var(--line); border-radius: 9px; padding: 10px 11px; background: var(--panel); }
.td-o.nut { border-color: var(--amber); background: var(--amber-l); }
.td-o.vuot { border-color: var(--red); background: var(--red-l); }
.td-o.thieu { border-style: dashed; background: var(--bg); }
.td-o.thieu .pill { margin-top: 6px; }
.td-dau { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12.6px; }
.td-so { font-size: 19px; font-weight: 800; letter-spacing: -.4px; font-variant-numeric: tabular-nums; margin: 3px 0 6px; }
.td-so small { font-size: 10.5px; font-weight: 600; color: var(--ink3); letter-spacing: 0; }
.td-ray { position: relative; overflow: visible; margin-bottom: 7px; }
.td-vach { position: absolute; top: -4px; bottom: -4px; width: 2px; margin-left: -1px; background: var(--en); border-radius: 1px; }

/* ================================================= nhóm C1 · màn hình lớn tại xưởng (4.12)
 *
 * **Ngoại lệ có chủ đích với thang chữ 12px của bộ kit.** Màn này treo trên tivi, đọc từ 5 mét
 * (đặc tả 09 mục 6): chữ 12px ở 5 mét là không đọc được. Giữ nguyên mọi thứ khác của hệ thiết
 * kế — token màu, viền 1px, bóng 6%, weight 700–800, letter-spacing âm cho chữ đậm lớn — và
 * chỉ phóng cỡ chữ. Cỡ chữ theo `vw` để cùng một trang vừa tivi 43" lẫn 65".
 */
body.xuong { display: block; min-height: 100vh; }
.xg-dau {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 24px;
  background: linear-gradient(178deg, var(--nav1), var(--nav2) 34%);
  color: #c3dae1;
}
.xg-dau .sp { flex: 1; }
.xg-hieu { display: flex; align-items: center; gap: 12px; min-width: 0; }
.xg-logo {
  width: 46px;
  height: 46px;
  border-radius: 10px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--pr-bright), var(--pr));
  color: #fff;
  font-weight: 800;
  font-size: 15px;
}
/* `#eaf6fa` là màu chữ sáng của thanh bên trong chính bộ kit — xem ghi chú ở đầu file. */
.xg-hieu b { display: block; color: #eaf6fa; font-size: clamp(20px, 2.1vw, 40px); font-weight: 800; letter-spacing: -.4px; line-height: 1.15; }
.xg-hieu small { display: block; font-size: clamp(13px, 1.15vw, 22px); font-weight: 600; }
.xg-gio { text-align: right; }
.xg-gio b { display: block; color: #eaf6fa; font-size: clamp(26px, 3vw, 56px); font-weight: 800; letter-spacing: -.6px; line-height: 1; font-variant-numeric: tabular-nums; }
.xg-gio small { font-size: clamp(11px, .9vw, 16px); }
.xg-dau select {
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .14);
  color: #eaf6fa;
  border-radius: 8px;
  padding: 6px 9px;
  font-family: inherit;
  font-size: 12px;
}
.xg-dau select option { color: var(--ink); }

.xg-than { padding: 20px 24px 24px; }
.xg-than .alert { font-size: clamp(14px, 1.25vw, 24px); }
.xg-kpis { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); margin-bottom: 12px; }
.xg-kpis .kpi { padding: 18px 20px; }
.xg-kpis .kpi .l { font-size: clamp(12px, 1.1vw, 20px); }
.xg-kpis .kpi .v { font-size: clamp(40px, 5.2vw, 104px); letter-spacing: -1.5px; }
/* Đơn vị (xe, %) do `kpi()` của core.js đặt cỡ 13px bằng style nội tuyến — chỉ `!important`
 * mới phóng được theo số, và core.js là file dùng chung không được sửa. */
.xg-kpis .kpi .v span { font-size: .32em !important; }
.xg-kpis .kpi .d { font-size: clamp(13px, 1.15vw, 22px); font-weight: 600; }
.xg-kpis .kpi::before { width: 6px; }
.xg-thanh { height: 14px; border-radius: 7px; margin-bottom: 15px; }

.xg-andon-the h3 { font-size: clamp(18px, 1.7vw, 32px); letter-spacing: -.4px; }
.xg-andon-the h3 .rt { font-size: clamp(13px, 1.15vw, 22px); font-weight: 700; }
.xg-ad {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 15px;
  border: 1px solid var(--line);
  border-radius: 10px;
  margin-bottom: 9px;
}
.xg-ad.qua-han { background: var(--red-l); border-color: var(--red); }
.xg-ad.qua-han .xg-ad-cho, .xg-ad.qua-han .xg-ad-cho b { color: var(--red); }
.xg-ad-ten { flex: 1; min-width: 0; }
.xg-ad-ten b { display: block; font-size: clamp(20px, 2.2vw, 44px); font-weight: 800; letter-spacing: -.4px; line-height: 1.15; }
.xg-ad small { display: block; font-size: clamp(12px, 1.05vw, 20px); color: var(--ink3); font-weight: 600; }
.xg-ad-cho { text-align: right; font-size: clamp(16px, 1.6vw, 30px); font-weight: 700; color: var(--ink2); }
.xg-ad-cho b { font-size: 1.5em; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }
.xg-ad .pill { font-size: clamp(12px, 1.1vw, 20px); padding: 4px 12px; }
.xg-chan { font-size: clamp(11px, .9vw, 16px); color: var(--ink3); text-align: center; margin: 12px 0 0; }

/* QC gộp đợt 1a — màn 14: bốn thẻ chỉ số Andon nằm một hàng; mặc định lưới tự rớt thành 3 + 1 ở 1440px. */
#tab-andon #ad-kpi { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* Đợt 1b · D4 — màn 20 Truy xuất. Mã bấm được (kế hoạch, ca, lô, phiếu) phải nhìn ra là bấm
 * được: truy xuất là đi từ mã này sang mã khác, một mã trông như chữ thường thì không ai bấm. */
#tab-truy-xuat a.tx-lk { color: var(--pr); font-weight: 700; cursor: pointer; text-decoration: none; }
#tab-truy-xuat a.tx-lk:hover { text-decoration: underline; }
#tab-truy-xuat small a.tx-lk { font-weight: 600; }
#tab-truy-xuat .tx-tim { display: flex; gap: 9px; align-items: flex-end; flex-wrap: wrap; }
#tab-truy-xuat .tx-tim .field { flex: 1; min-width: 220px; margin: 0; }
#tab-truy-xuat .tx-tim .btn { padding: 8px 15px; }
#tab-truy-xuat .grid2 .label { margin-bottom: 5px; }

/* ------------------------------------------------------------------------------------------
 * Đợt 1b · nhóm D1 — màn 17 Khắc phục & phòng ngừa. Thêm ở cuối, chỉ dùng token của bộ kit.
 * Ô chỉ số bấm được và con số bấm được cùng khuôn với màn kiểm tra chất lượng (quy tắc 10).
 * ---------------------------------------------------------------------------------------- */
#tab-capa .kp-loc { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 2px 11px; align-items: end; }
#tab-capa .kp-loc .field .btn { width: 100%; justify-content: center; padding: 8px 12px; }
#tab-capa .kp-bam { cursor: pointer; border-radius: var(--r); }
#tab-capa .kp-bam .kpi { height: 100%; transition: border-color .12s, box-shadow .12s; }
#tab-capa .kp-bam:hover .kpi { border-color: var(--pr); }
#tab-capa .kp-bam:focus-visible { outline: none; }
#tab-capa .kp-bam:focus-visible .kpi,
#tab-capa .kp-bam.on .kpi { border-color: var(--pr); box-shadow: 0 0 0 3px var(--pr-l); }
#tab-capa .kp-lien { color: var(--pr); font-weight: 800; cursor: pointer; }
#tab-capa .kp-lien:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--pr-l); border-radius: 5px; }
#tab-capa .kp-phu { font-size: 10.5px; color: var(--ink3); font-weight: 500; margin-top: 2px; }
#tab-capa .kp-thieu { font-size: 11px; font-weight: 700; color: var(--amber); }
#tab-capa .kp-chu { margin: 0 17px 13px; }
#tab-capa .kp-chu .alert { margin-top: 9px; }
#tab-capa .kp-nho { padding: 3px 9px; font-size: 10.5px; white-space: nowrap; }
#tab-capa .kp-nguon { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 11px; }
#tab-capa .field textarea { resize: vertical; font-size: 12.6px; }
#tab-capa .field textarea:focus { outline: none; border-color: var(--pr); box-shadow: 0 0 0 3px var(--pr-l); }
#tab-capa .field input:disabled,
#tab-capa .field select:disabled,
#tab-capa .field textarea:disabled { background: var(--bg); color: var(--ink2); }

/* Đợt 1b · D5 — màn 21: thẻ KPI có bản ghi phía sau thì bấm được để truy ngược (quy tắc 10).
 * Thẻ đang mở truy ngược viền màu thương hiệu, để người xem biết bảng bên dưới thuộc thẻ nào. */
.kpi.kpi-bam { cursor: pointer; transition: border-color .12s; }
.kpi.kpi-bam:hover { border-color: var(--pr); }
.kpi.kpi-bam:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--pr-l); }
.kpi.kpi-bam.on { border-color: var(--pr); background: var(--pr-l); }
#tab-kpi .card > .kpis { margin-bottom: 11px; }
#tab-kpi .card > .tw { margin-top: 2px; }
/* Đợt 1b · D5 — màn Báo cáo, khối hiệu suất 10.5: chip và ghi chú thẳng mép với tiêu đề thẻ `.card.khit`. */
#tab-bao-cao .bc-hs-chips { padding: 0 17px; margin-bottom: 9px; }
#tab-bao-cao .bc-hs-ghi { margin: 0 17px 15px; }
#tab-bao-cao #bc-hs-may { margin-top: 11px; }