/*
 * Shared styling for every TBD module.
 *
 * The design language is taken from the LSCV apps, which have been in daily
 * use and are what Harry wants TBD to look like: a paper-coloured page with
 * white cards on it, generous corner radii, small bold type, and a tile grid
 * on the home screen. Their navy and red are replaced throughout by the two
 * colours measured from the TBD logo.
 *
 * Two widths, as SPEC 9.3 requires and as LSCV does in practice:
 *   .wrap       820px  - home screen, tiles, reading
 *   .wrap.rong 1500px  - inside a module, dense tables
 */

:root {
  /* From the TBD logo, measured off the original artwork. */
  --xanh: #244F9C;          /* Xanh TBD - the primary */
  --xanh-2: #1B3B75;        /* pressed / hover */
  --xanh-mo: #E8EDF7;       /* tint behind selected things */
  --xanh-the: #3E5A94;      /* the filled card at the top of the home screen */
  --do: #ED1C24;            /* Do TBD - warnings only, used sparingly */
  --do-mo: #FDEBEC;

  --muc: #111827;           /* body text */
  --xam: #6B7280;           /* secondary */
  --nhat: #98A2B3;          /* hints, empty states */
  --giay: #F2F4F8;          /* page */
  --the: #FFFFFF;           /* card */
  --ke: #DCE1EB;            /* border */
  --ke-2: #EEF1F6;          /* inner rules in tables */
  --tang: #EDF1F8;          /* table header band */

  --tot: #1E8E5A;
  --tot-mo: #DEF3E6;
  --luu-y: #B8860B;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--giay);
  color: var(--muc);
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  /* Never Malgun Gothic: no Vietnamese glyphs, breaks mid-word. */
  font-size: 14px;
  line-height: 1.55;
  min-height: 100vh;
}

a { color: var(--xanh); }

.wrap { max-width: 820px; margin: 0 auto; padding: 18px 18px 40px; }
.wrap.rong { max-width: 1500px; padding: 18px 22px 70px; }

/* ---- top bar ---------------------------------------------------------- */

header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 18px;
}

header .logo img { display: block; height: 28px; width: auto; }
.nut-icon-hang { display: flex; align-items: center; gap: 8px; }

.nut-icon {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: var(--the);
  border: 1px solid var(--ke);
  color: var(--xanh);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 19px;
  cursor: pointer;
  padding: 0;
}

.nut-icon:hover { background: var(--xanh-mo); }

/* ---- module navigation (inside a module, not on the home screen) ------ */

.dieu-huong { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 16px; }

.dieu-huong a {
  padding: 7px 12px;
  border-radius: 999px;
  background: var(--the);
  border: 1px solid var(--ke);
  color: var(--xam);
  text-decoration: none;
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
}

.dieu-huong a:hover { color: var(--muc); }
.dieu-huong a.dang-o { background: var(--xanh); border-color: var(--xanh); color: #fff; }

/* ---- the filled card that opens the home screen ----------------------- */

.the-nguoi-dung {
  background: var(--xanh-the);
  color: #fff;
  border-radius: 18px;
  padding: 20px;
  margin-bottom: 22px;
  display: flex;
  align-items: center;
  gap: 14px;
}

.the-nguoi-dung .chu-cai {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: rgba(255, 255, 255, .18);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 16px;
  flex: none;
}

.the-nguoi-dung .ten { font-weight: 800; font-size: 15px; line-height: 1.25; }
.the-nguoi-dung .vai { font-size: 12px; opacity: .82; }

/* ---- sections --------------------------------------------------------- */

.tieu-de-muc {
  font-size: 13px;
  font-weight: 800;
  margin: 0 0 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.muc { margin-bottom: 26px; }

/* ---- numbers at a glance ---------------------------------------------- */

.o-so { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }

.o-so > div {
  background: var(--the);
  border: 1px solid var(--ke);
  border-radius: 14px;
  padding: 14px 16px;
}

.o-so .nhan { font-size: 11.5px; font-weight: 600; color: var(--xam); line-height: 1.3; }
.o-so .so { font-size: 24px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.3; }
.o-so .so.canh-bao { color: var(--do); }

/* ---- app tiles, three across like the LSCV home screen ---------------- */

.luoi-app { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px 10px; }

.the-app {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  text-decoration: none;
  color: inherit;
}

.the-app .o-icon {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: var(--the);
  border: 1px solid var(--ke);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  color: var(--xanh);
}

.the-app:hover .o-icon { border-color: var(--xanh); background: var(--xanh-mo); }
.the-app .ten { font-size: 12px; font-weight: 700; line-height: 1.3; }

/* Not built yet. The icon keeps Xanh TBD like every other tile - LSCV shows
   its app icons in full colour - and the dashed edge alone says it is not
   ready, so the grid reads as one set rather than two. */
.the-app.chua-lam { pointer-events: none; }
.the-app.chua-lam .o-icon { border-style: dashed; }
.the-app.chua-lam .ten { color: var(--xam); }

/* ---- list rows and tables --------------------------------------------- */

.dong {
  background: var(--the);
  border: 1px solid var(--ke);
  border-radius: 12px;
  padding: 11px 14px;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.dong .chinh { flex: 1; min-width: 0; }
.dong .ma { font-weight: 700; font-size: 12.5px; }
.dong .phu { color: var(--xam); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dong .so-phai { text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; flex: none; }
.dong .so-phai small { display: block; font-weight: 500; color: var(--xam); }

.bang-cuon { overflow-x: auto; background: var(--the); border: 1px solid var(--ke); border-radius: 14px; }
table { border-collapse: separate; border-spacing: 0; width: 100%; font-size: 12.5px; }

thead th {
  position: sticky;
  top: 0;
  background: var(--tang);
  text-align: left;
  font-weight: 700;
  color: var(--xam);
  padding: 9px 12px;
  white-space: nowrap;
  border-bottom: 1px solid var(--ke);
}

tbody td { padding: 8px 12px; border-bottom: 1px solid var(--ke-2); }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: var(--xanh-mo); }
.phai { text-align: right; font-variant-numeric: tabular-nums; }
.ma-hang { font-weight: 700; }

.vien-rong {
  text-align: center;
  padding: 22px 20px;
  color: var(--xam);
  font-size: 13px;
  border: 1px dashed var(--ke);
  border-radius: 14px;
  background: var(--the);
}

/* ---- controls ---------------------------------------------------------- */

button {
  font: inherit;
  font-size: 13.5px;
  font-weight: 700;
  padding: 11px 16px;
  border-radius: 10px;
  border: none;
  background: var(--xanh);
  color: #fff;
  cursor: pointer;
}

button:hover { background: var(--xanh-2); }
button:disabled { opacity: .5; cursor: default; }

button.phu {
  background: var(--the);
  border: 1px solid var(--ke);
  color: var(--xanh);
}

button.phu:hover { background: var(--xanh-mo); }

input {
  font: inherit;
  font-size: 14px;
  padding: 11px 12px;
  border: 1px solid var(--ke);
  border-radius: 10px;
  width: 100%;
  background: var(--the);
  color: var(--muc);
}

input:focus { outline: none; border-color: var(--xanh); box-shadow: 0 0 0 3px var(--xanh-mo); }

/* ---- sign-in ----------------------------------------------------------- */

.man-dang-nhap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.the-dang-nhap {
  background: var(--the);
  border: 1px solid var(--ke);
  border-radius: 18px;
  padding: 26px 22px;
  width: 100%;
  max-width: 380px;
}

.the-dang-nhap img { height: 30px; width: auto; display: block; }
.the-dang-nhap h1 { font-size: 18px; font-weight: 800; margin: 18px 0 4px; }
.the-dang-nhap p { color: var(--xam); font-size: 12.5px; margin: 0 0 18px; }
.the-dang-nhap label { display: block; font-size: 11.5px; font-weight: 700; color: var(--xam); margin-bottom: 6px; }
.the-dang-nhap button { width: 100%; margin-top: 12px; }

.loi { color: var(--do); background: var(--do-mo); border-radius: 10px;
       padding: 10px 12px; font-size: 12.5px; font-weight: 600; margin-top: 12px; }
.bao { color: var(--xanh); background: var(--xanh-mo); border-radius: 10px;
       padding: 10px 12px; font-size: 12.5px; font-weight: 600; margin-top: 12px; }
.an { display: none !important; }

@media (max-width: 420px) {
  .o-so { grid-template-columns: 1fr; }
}

/* ---- inside a module: tabs, toolbar, dialog --------------------------- */

.tabs { display: flex; gap: 6px; margin-bottom: 14px; }

.tabs button {
  background: var(--the);
  border: 1px solid var(--ke);
  color: var(--xam);
  border-radius: 999px;
  padding: 7px 14px;
  font-size: 12.5px;
}

.tabs button.dang-o { background: var(--xanh); border-color: var(--xanh); color: #fff; }
.tabs button .dem { opacity: .7; font-weight: 600; }

.thanh-cong-cu {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.thanh-cong-cu input[type=search] { flex: 1; min-width: 200px; max-width: 320px; }
.thanh-cong-cu .day { margin-left: auto; display: flex; gap: 8px; }

select {
  font: inherit;
  font-size: 13px;
  padding: 10px 11px;
  border: 1px solid var(--ke);
  border-radius: 10px;
  background: var(--the);
  color: var(--muc);
  cursor: pointer;
}

select:focus { outline: none; border-color: var(--xanh); box-shadow: 0 0 0 3px var(--xanh-mo); }

/* Sortable column headers */
thead th.sap { cursor: pointer; user-select: none; }
thead th.sap:hover { color: var(--muc); }
thead th .mui { opacity: .45; font-weight: 400; }

/* A row that is no longer in use stays visible but reads as retired. */
tbody tr.ngung td { color: var(--nhat); }

.nhan-loai {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--xanh-mo);
  color: var(--xanh);
  white-space: nowrap;
}

.nhan-loai.bao-bi { background: #FFF4E0; color: #8A5A00; }
.nhan-loai.thanh-pham { background: var(--tot-mo); color: var(--tot); }
.nhan-loai.tem { background: var(--do-mo); color: var(--do); }

/* ---- dialog ------------------------------------------------------------ */

.man-che {
  position: fixed;
  inset: 0;
  background: rgba(17, 24, 39, .45);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 30px 16px;
  overflow-y: auto;
  z-index: 50;
}

.hop-thoai {
  background: var(--the);
  border-radius: 18px;
  width: 100%;
  max-width: 640px;
  padding: 22px 24px 24px;
}

.hop-thoai h2 { font-size: 16px; font-weight: 800; margin: 0 0 16px; }
.luoi-o { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 14px; }
.luoi-o .rong-ca-hang { grid-column: 1 / -1; }
.o-nhap label { display: block; font-size: 11.5px; font-weight: 700; color: var(--xam); margin-bottom: 5px; }
.o-nhap select { width: 100%; }
.o-nhap .goi-y { font-size: 11px; color: var(--nhat); margin-top: 4px; }

.hang-danh-dau { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; }
.hang-danh-dau input { width: auto; }

.chan-hop-thoai { display: flex; gap: 8px; justify-content: flex-end; margin-top: 20px; }
.chan-hop-thoai .trai { margin-right: auto; }

@media (max-width: 560px) {
  .luoi-o { grid-template-columns: 1fr; }
}

/* ---- multi-line entry inside a dialog --------------------------------- */

.hop-thoai.rong { max-width: 860px; }

.dong-nhap {
  display: grid;
  grid-template-columns: 1fr 130px 34px;
  gap: 8px;
  align-items: start;
  margin-bottom: 8px;
}

.dong-nhap select, .dong-nhap input { width: 100%; }
.dong-nhap .ton-hien { font-size: 11px; color: var(--xam); margin-top: 4px; }
.dong-nhap .ton-hien b { color: var(--muc); }

.nut-bo {
  width: 34px;
  height: 40px;
  padding: 0;
  background: var(--the);
  border: 1px solid var(--ke);
  color: var(--do);
  border-radius: 10px;
  font-size: 17px;
}

.nut-bo:hover { background: var(--do-mo); }

.ghi-chu-o {
  font-size: 12px;
  color: var(--xam);
  background: var(--xanh-mo);
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 14px;
}

.nhan-loai.nhap { background: var(--tot-mo); color: var(--tot); }
.nhan-loai.xuat { background: var(--do-mo); color: var(--do); }
.nhan-loai.dieu-chinh { background: #FFF4E0; color: #8A5A00; }
.nhan-loai.kiem-ke { background: var(--xanh-mo); color: var(--xanh); }

td.am { color: var(--do); }
tbody tr.thieu td.ton-so { color: var(--do); font-weight: 700; }

/* ---- configuration picker --------------------------------------------- */

.ch-ket-qua {
  background: var(--xanh-mo);
  border-radius: 12px;
  padding: 14px 16px;
  margin-top: 16px;
  /*
   * Measured, not guessed: 150px is exactly the fullest state - code, name,
   * price and the note about a computed length - at the 640px dialog width. The
   * loading state is 73px, so without this the footer jumped 77px, nearly twice
   * the height of the button somebody was aiming at.
   */
  min-height: 150px;
}

.ket-qua-ma {
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 15px;
  font-weight: 700;
  color: var(--xanh);
  word-break: break-all;
}

.ket-qua-ten { font-size: 12.5px; color: var(--muc); margin-top: 5px; }

.ket-qua-gia {
  font-size: 15px;
  font-weight: 800;
  margin-top: 8px;
}

.ket-qua-gia .nhan-tra,
.ket-qua-gia .nhan-tinh {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  margin-left: 6px;
  vertical-align: middle;
}

.ket-qua-gia .nhan-tra  { background: var(--the); color: var(--xam); }
/* A computed length can sit ~10 dong off the listed ladder, so it is flagged
   rather than shown as if it came straight from the price list. */
.ket-qua-gia .nhan-tinh { background: var(--do-mo); color: var(--do); }

/* Two buttons under the entry lines, side by side. */
.hang-nut-dong { display: flex; gap: 8px; margin-top: 4px; }

/* ---- quotations -------------------------------------------------------- */

/*
 * A document header reads as a block, not as a form: by the time it is on the
 * screen the figures are settled, and the part that still changes - the lines -
 * is below it.
 */
.the-chung-tu {
  background: var(--the);
  border: 1px solid var(--ke);
  border-radius: 14px;
  padding: 16px 18px;
  margin-bottom: 18px;
}

.ct-tren {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--ke-2);
}

.ct-so    { font-size: 16px; font-weight: 800; color: var(--xanh); }
.ct-khach { font-size: 13px; color: var(--xam); margin-top: 3px; }

.ct-luoi {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px;
  padding-top: 12px;
}

.o-xem label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: var(--nhat);
  text-transform: uppercase;
  letter-spacing: .3px;
  margin-bottom: 3px;
}

.o-xem > div { font-size: 13.5px; color: var(--muc); }

.nhan-tt {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
  white-space: nowrap;
  background: var(--xanh-mo);
  color: var(--xanh);
}

.nhan-tt.nhap   { background: var(--tang);   color: var(--xam); }
.nhan-tt.da-gui { background: var(--xanh-mo); color: var(--xanh); }
.nhan-tt.thang  { background: var(--tot-mo); color: var(--tot); }
.nhan-tt.thua   { background: var(--do-mo);  color: var(--do); }
.nhan-tt.huy    { background: var(--tang);   color: var(--nhat); }

/* Quantity and unit price stay editable in place; the line total is worked out
   beside them so a hand edit shows its effect without a redraw. */
.dong-bao-gia {
  display: grid;
  grid-template-columns: 1fr 110px 140px 130px 78px;
  gap: 10px;
  align-items: start;
  background: var(--the);
  border: 1px solid var(--ke);
  border-radius: 12px;
  padding: 10px 12px;
  margin-bottom: 8px;
}

.dong-bao-gia input { width: 100%; }
.dong-bao-gia input.phai { text-align: right; }

.dong-bao-gia.dau {
  background: var(--tang);
  border-color: var(--ke);
  font-size: 11px;
  font-weight: 700;
  color: var(--xam);
  text-transform: uppercase;
  letter-spacing: .3px;
  padding: 8px 12px;
}

.dong-mo-ta { font-size: 12px; color: var(--xam); margin-top: 3px; }
.dong-lech  { font-size: 11px; color: var(--do); margin-top: 3px; font-weight: 600; }
.dvt-dong   { font-size: 11px; color: var(--nhat); text-align: right; margin-top: 4px; }

.dong-bao-gia .thanh-tien { font-weight: 700; padding-top: 11px; }
.dong-bao-gia .o-khoa     { padding-top: 11px; }

/*
 * Third row grid to get the same treatment, and the last of them. Five fixed
 * columns come to 458px plus gaps against a 375px screen, so the code column
 * was left with what nothing fits in.
 *
 * Two buttons share the last cell here rather than one, so they sit side by
 * side on the first row instead of stacking.
 */
@media (max-width: 700px) {
  .dong-bao-gia.dau { display: none; }

  .dong-bao-gia:not(.dau) {
    grid-template-columns: 1fr 1fr 74px;
    gap: 10px 8px;
    align-items: end;
  }

  /* row 1: the code and its description, and the buttons that act on it */
  .dong-bao-gia:not(.dau) > :nth-child(1) { grid-area: 1 / 1 / 2 / 3; }
  .dong-bao-gia:not(.dau) > .o-bo         { grid-area: 1 / 3 / 2 / 4; }
  /* row 2: how many, at what price */
  .dong-bao-gia:not(.dau) > :nth-child(2) { grid-area: 2 / 1 / 3 / 2; }
  .dong-bao-gia:not(.dau) > :nth-child(3) { grid-area: 2 / 2 / 3 / 4; }
  /* row 3: what it comes to */
  .dong-bao-gia:not(.dau) > :nth-child(4) { grid-area: 3 / 1 / 4 / 4; }

  .dong-bao-gia:not(.dau) .o-khoa,
  .dong-bao-gia:not(.dau) .thanh-tien { padding-top: 0; }
  .dong-bao-gia:not(.dau) .dvt-dong { text-align: left; }
  .dong-bao-gia:not(.dau) > .o-bo {
    display: flex;
    gap: 6px;
    justify-content: flex-end;
  }

  .dong-bao-gia:not(.dau) > [data-nhan]::before {
    content: attr(data-nhan);
    display: block;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .3px;
    color: var(--xam);
    white-space: nowrap;
    margin-bottom: 3px;
  }
}

.nut-doi-ma {
  width: 34px;
  height: 40px;
  padding: 0;
  background: var(--the);
  border: 1px solid var(--ke);
  color: var(--xanh);
  border-radius: 10px;
}

.nut-doi-ma:hover { background: var(--xanh-mo); }

.tong-chung-tu {
  text-align: right;
  font-size: 14px;
  color: var(--xam);
  margin: 10px 2px 14px;
}

.tong-chung-tu b { font-size: 17px; color: var(--muc); margin-left: 8px; }

button.nho { padding: 6px 12px; font-size: 12px; }
button.phu.nguy-hiem { color: var(--do); }
button.phu.nguy-hiem:hover { background: var(--do-mo); }

tr.bam-duoc { cursor: pointer; }
tr.bam-duoc:hover td { background: var(--xanh-mo); }

/* ---- sales orders ------------------------------------------------------ */

/* Same shape as a quotation line plus a delivery date, and no remove button:
   an order line comes from the quotation, it is not added or dropped here. */
.dong-don-ban {
  display: grid;
  /* Six now: an order line can be taken off, so it carries a remove button. */
  grid-template-columns: 1fr 110px 140px 160px 130px 34px;
  gap: 10px;
  align-items: start;
  background: var(--the);
  border: 1px solid var(--ke);
  border-radius: 12px;
  padding: 10px 12px;
  margin-bottom: 8px;
}

.dong-don-ban input { width: 100%; }
.dong-don-ban input.phai { text-align: right; }

.dong-don-ban.dau {
  background: var(--tang);
  font-size: 11px;
  font-weight: 700;
  color: var(--xam);
  text-transform: uppercase;
  letter-spacing: .3px;
  padding: 8px 12px;
}

.dong-don-ban .thanh-tien { font-weight: 700; padding-top: 11px; }
.dong-don-ban .o-khoa     { padding-top: 11px; }

/*
 * Same treatment as the material rows: six fixed columns come to 574px plus
 * gaps, so on a 375px screen the code column collapsed to one letter per line
 * and "Ngày giao" ran off the right edge entirely. Three rows instead, with
 * every value carrying its own heading.
 */
@media (max-width: 700px) {
  .dong-don-ban.dau { display: none; }

  .dong-don-ban:not(.dau) {
    grid-template-columns: 1fr 1fr 30px;
    gap: 10px 8px;
    align-items: end;
  }

  /* row 1: the code and its description, and the button that drops the line */
  .dong-don-ban:not(.dau) > :nth-child(1) { grid-area: 1 / 1 / 2 / 3; }
  .dong-don-ban:not(.dau) > .o-bo         { grid-area: 1 / 3 / 2 / 4; }
  /* row 2: how many, at what price */
  .dong-don-ban:not(.dau) > :nth-child(2) { grid-area: 2 / 1 / 3 / 2; }
  .dong-don-ban:not(.dau) > :nth-child(3) { grid-area: 2 / 2 / 3 / 4; }
  /* row 3: when, and what it comes to */
  .dong-don-ban:not(.dau) > :nth-child(4) { grid-area: 3 / 1 / 4 / 2; }
  .dong-don-ban:not(.dau) > :nth-child(5) { grid-area: 3 / 2 / 4 / 4; }

  .dong-don-ban:not(.dau) .o-khoa,
  .dong-don-ban:not(.dau) .thanh-tien { padding-top: 0; }
  .dong-don-ban:not(.dau) .dvt-dong { text-align: left; }
  .dong-don-ban:not(.dau) input[type="date"] { width: 100%; }

  .dong-don-ban:not(.dau) > [data-nhan]::before {
    content: attr(data-nhan);
    display: block;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .3px;
    color: var(--xam);
    white-space: nowrap;
    margin-bottom: 3px;
  }
}

/* Where a search result came from. A class of its own rather than borrowing a
   status colour: recolouring "won" one day should not recolour the catalogue. */
.nhan-tt.nguon-bg { background: var(--xanh-mo); color: var(--xanh); }
.nhan-tt.nguon-dm { background: var(--tot-mo);  color: var(--tot); }

.nhan-tt.don-moi      { background: var(--xanh-mo); color: var(--xanh); }
.nhan-tt.don-dang-lam { background: #FFF4E0;        color: #8A5A00; }
.nhan-tt.don-da-giao  { background: var(--tot-mo);  color: var(--tot); }
.nhan-tt.don-huy      { background: var(--tang);    color: var(--nhat); }

/* Materials on a production order: enough / short but on order / short
   and nobody has ordered it. Own names rather than reusing the sheet
   status colours - two different things wearing one class is the sort
   of thing that gets "fixed" later by changing the wrong one. */
.nhan-tt.nvl-du       { background: var(--tot-mo);  color: var(--tot); }
.nhan-tt.nvl-dang-mua { background: #FFF4E0;        color: #8A5A00; }
.nhan-tt.nvl-chua-mua { background: var(--do-mo);   color: var(--do); }

/* The footer note sits beside buttons, so centre it against them. */
.chan-hop-thoai .nhan-nvl { display: flex; align-items: center; gap: 6px;
                            font-size: 13px; color: var(--xam); }


/* Editing the generated code into a variant, inside the picker's result panel. */
.ch-sua-o {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--ke);
  display: grid;
  gap: 8px;
}

/* One supplier per row inside the catalogue dialog. */
.dong-ncc {
  display: grid;
  grid-template-columns: 1fr 150px 96px 96px 66px 34px;
  gap: 8px;
  align-items: center;
  margin-bottom: 8px;
}

.dong-ncc select, .dong-ncc input { width: 100%; }
.dong-ncc input.phai { text-align: right; }
.dong-ncc .giua { text-align: center; }

.dong-ncc.dau {
  font-size: 11px;
  font-weight: 700;
  color: var(--xam);
  text-transform: uppercase;
  letter-spacing: .3px;
  margin-bottom: 4px;
}

/* "+2" beside a supplier name: this item is bought from more than one place. */
.them-ncc {
  font-size: 11px;
  font-weight: 700;
  color: var(--xanh);
  background: var(--xanh-mo);
  border-radius: 999px;
  padding: 1px 6px;
  margin-left: 4px;
}

/* One material on the exploded bill: what the formula said, what it was
   changed to, and what is on the shelf, side by side. */
.dong-vat-tu {
  display: grid;
  grid-template-columns: 1fr 96px 100px 84px 84px 84px 34px;
  gap: 10px;
  align-items: start;
  background: var(--the);
  border: 1px solid var(--ke);
  border-radius: 12px;
  padding: 9px 12px;
  margin-bottom: 8px;
}

.dong-vat-tu input { width: 100%; }
.dong-vat-tu input.phai { text-align: right; }
.dong-vat-tu .o-khoa { padding-top: 11px; }

.dong-vat-tu.dau {
  background: var(--tang);
  font-size: 11px;
  font-weight: 700;
  color: var(--xam);
  text-transform: uppercase;
  letter-spacing: .3px;
  padding: 8px 12px;
}

/* A quantity the operator moved away from what the formula produced. */
.dong-vat-tu.lech { border-color: var(--xanh); background: var(--xanh-mo); }

/*
 * On a phone the seven columns become three rows.
 *
 * They never fitted: 482px of fixed columns plus gaps against a 375px screen
 * squeezed the material name down to 25px, one letter per line, and nobody
 * could read the code they were about to change. So the heading band goes
 * away and every number carries its own name - data-nhan on the cell.
 */
@media (max-width: 700px) {
  .dong-vat-tu.dau { display: none; }

  .dong-vat-tu:not(.dau) {
    grid-template-columns: 1fr 1fr 1fr 30px;
    gap: 8px;
    align-items: end;
  }

  /* row 1: the material, and the button that drops it */
  .dong-vat-tu:not(.dau) > :nth-child(1) { grid-area: 1 / 1 / 2 / 4; }
  .dong-vat-tu:not(.dau) > .o-bo         { grid-area: 1 / 4 / 2 / 5; }
  /* row 2: what it is for */
  .dong-vat-tu:not(.dau) > :nth-child(2) { grid-area: 2 / 1 / 3 / 5; }
  /* row 3: the four numbers, side by side so they can be compared */
  .dong-vat-tu:not(.dau) > :nth-child(3) { grid-area: 3 / 1 / 4 / 2; }
  .dong-vat-tu:not(.dau) > :nth-child(4) { grid-area: 3 / 2 / 4 / 3; }
  .dong-vat-tu:not(.dau) > :nth-child(5) { grid-area: 3 / 3 / 4 / 4; }
  .dong-vat-tu:not(.dau) > :nth-child(6) { grid-area: 3 / 4 / 4 / 5; }

  /* That padding existed to line a value up with the heading band. */
  .dong-vat-tu:not(.dau) .o-khoa { padding-top: 0; }

  /* Left-aligned under its own label reads better than right-aligned. */
  .dong-vat-tu:not(.dau) > [data-nhan],
  .dong-vat-tu:not(.dau) > [data-nhan].phai { text-align: left; }
  .dong-vat-tu:not(.dau) input.phai { text-align: left; }

  .dong-vat-tu:not(.dau) > [data-nhan]::before {
    content: attr(data-nhan);
    display: block;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .3px;
    color: var(--xam);
    white-space: nowrap;
    margin-bottom: 3px;
  }

  /* "Vai trò" on its own line needs no label - the value says it. */
  .dong-vat-tu:not(.dau) > :nth-child(2)::before { display: none; }
  .dong-vat-tu:not(.dau) > :nth-child(2) {
    font-size: 12px;
    color: var(--xam);
  }
}

/*
 * A product code is one long unbreakable token, and a dialog is as wide as its
 * widest one. Left alone, TBD-VIET-FIBER-Purchase#26-001/N2 in a heading made
 * the box 452px on a 375px screen - 24/08/2026.
 */
.hop-thoai h2,
.hop-thoai .ma-hang { overflow-wrap: anywhere; }

/* Codes whose materials were typed rather than derived, and the way back in. */
.kt-khai {
  margin: 12px 0;
  padding: 10px 12px;
  background: var(--xanh-mo);
  border: 1px solid var(--ke);
  border-radius: 12px;
}
.kt-khai-dau { font-weight: 700; color: var(--xanh); margin-bottom: 4px; }
.kt-khai-dong {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 6px 0;
  border-top: 1px dashed var(--ke);
  margin-top: 6px;
}

@media (max-width: 700px) {
  .kt-khai-dong { grid-template-columns: 1fr; }
  .kt-khai-dong button { justify-self: start; }
}

/* Making a catalogue item without leaving the declaration dialog. */
.kdm-tao-o {
  margin: 4px 0 14px;
  padding: 12px 14px;
  background: var(--xanh-mo);
  border: 1px solid var(--ke);
  border-radius: 12px;
}

.kdm-tick {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 4px 0 2px;
  font-size: 13px;
}

/* ---- VAT beside the purchase order total ------------------------------- */

/*
 * Three figures, and only the middle one is typed. Laid out as rows rather
 * than a table so the last line can be given the weight it deserves: it is the
 * number that has to match the supplier's invoice.
 */
.khoi-thue {
  max-width: 460px;
  margin: 14px 0 14px auto;
  padding: 12px 14px;
  background: var(--the);
  border: 1px solid var(--ke);
  border-radius: 12px;
}

.kt-hang {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 6px 0;
  font-size: 14px;
}

.kt-hang input { width: 150px; }
.kt-hang input.phai { text-align: right; }
.kt-hang input[type="date"] { width: 140px; }
.kt-hang #thue-ct { width: 130px; }

.kt-goi-y { font-size: 12px; color: var(--xam); margin-top: 3px; }
.kt-goi-y button { margin-left: 4px; padding: 2px 8px; font-size: 11px; }

.kt-ai { font-size: 13px; color: var(--xam); }
.kt-ai label { margin-left: 10px; white-space: nowrap; }
.kt-ai input[type="radio"] { margin-right: 4px; }

.kt-tong {
  border-top: 1px solid var(--ke);
  margin-top: 4px;
  padding-top: 10px;
  font-weight: 800;
  font-size: 17px;
}

/* What the three numbers mean for money, in one sentence. */
.kt-vi {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px dashed var(--ke);
  font-size: 12px;
  color: var(--xam);
}

@media (max-width: 700px) {
  .khoi-thue { max-width: none; margin-left: 0; }
  .kt-hang { grid-template-columns: 1fr; gap: 4px; }
  .kt-hang > .phai { text-align: left; }
  .kt-hang input { width: 100%; }
  /* Two radios side by side do not fit 375px once the labels are spelled out,
     so they stack. white-space: nowrap on the label is what pushed them off
     the edge rather than letting them wrap. */
  .kt-ai > .phai { display: flex; flex-direction: column; gap: 4px; }
  .kt-ai label { margin-left: 0; margin-right: 0; }
}

/* One un-explodable line inside the red box, with its way out beside it. */
.kb-dong {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 8px 0;
  border-top: 1px solid rgba(237, 28, 36, .22);
  margin-top: 6px;
}
.kb-vi { font-size: 12px; font-weight: 400; margin-top: 2px; }

@media (max-width: 700px) {
  .kb-dong { grid-template-columns: 1fr; }
  .kb-dong button { justify-self: start; }
}

/* ---- declaring a bill of materials by hand ----------------------------- */

/*
 * The dialog that exists because LS-ODS-SC-SM-016-SP cannot be decoded: the
 * connector is two letters where the generator writes three, so "SC" could be
 * PC, UPC or APC and only Harry knows which.
 */
.kdm-ma {
  padding: 10px 12px;
  margin-bottom: 12px;
  background: var(--tang);
  border-radius: 10px;
}

.kdm-muc {
  font-size: 11px;
  font-weight: 800;
  color: var(--xam);
  text-transform: uppercase;
  letter-spacing: .3px;
  margin: 16px 0 8px;
}

/* Two attributes to a row on a desktop, one on a phone. */
.kdm-luoi {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 12px;
}
.kdm-luoi .o-nhap { margin-bottom: 10px; }

.kdm-dong,
.kdm-dau {
  display: grid;
  grid-template-columns: 1fr 130px 90px 34px;
  gap: 8px;
  align-items: center;
  padding: 6px 0;
}

.kdm-dau {
  font-size: 11px;
  font-weight: 700;
  color: var(--xam);
  text-transform: uppercase;
  letter-spacing: .3px;
  border-bottom: 1px solid var(--ke);
  padding-bottom: 6px;
}

.kdm-dong select,
.kdm-dong input { width: 100%; }
.kdm-dong input.phai { text-align: right; }

.kdm-dg .o-nhap { margin-bottom: 10px; }

@media (max-width: 700px) {
  .kdm-luoi { grid-template-columns: 1fr; }
  .kdm-dau { display: none; }
  .kdm-dong {
    grid-template-columns: 1fr 90px 34px;
    align-items: end;
    padding: 8px 0;
    border-bottom: 1px dashed var(--ke-2);
  }
  /* The code needs the whole width; role and quantity share the next line. */
  .kdm-dong > :nth-child(1) { grid-area: 1 / 1 / 2 / 4; }
  .kdm-dong > :nth-child(2) { grid-area: 2 / 1 / 3 / 2; }
  .kdm-dong > :nth-child(3) { grid-area: 2 / 2 / 3 / 3; }
  .kdm-dong > :nth-child(4) { grid-area: 2 / 3 / 3 / 4; }
}

/* ---- the explosion, shown as a tree ------------------------------------ */

/*
 * Two views of one explosion: material-first with the products underneath,
 * and product-first with the packing chain and its labels.
 *
 * Children are deliberately quieter than parents. A parent row is a figure
 * somebody edits and freezes; a child row explains where that figure came
 * from, and looking equally important would invite editing the wrong one.
 */
.cay-nhanh {
  margin: -4px 0 10px 20px;
  padding-left: 12px;
  border-left: 2px solid var(--ke);
}

.cay-con {
  display: grid;
  grid-template-columns: 1fr auto 90px;
  gap: 10px;
  align-items: baseline;
  padding: 5px 2px;
  font-size: 13px;
  border-bottom: 1px dashed var(--ke-2);
}
.cay-con:last-child { border-bottom: 0; }
.cay-vi { color: var(--xam); font-size: 12px; }

/* Quantities line up down the column, so two of them can be compared. */
.cay-so { font-variant-numeric: tabular-nums; font-weight: 700; }

.cay-mh {
  background: var(--the);
  border: 1px solid var(--ke);
  border-radius: 12px;
  padding: 10px 12px;
  margin-bottom: 8px;
}

.cay-dau {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: baseline;
}

summary.cay-dau { cursor: pointer; list-style: none; }
summary.cay-dau::-webkit-details-marker { display: none; }
summary.cay-dau::marker { content: ''; }

.cay-tang {
  margin: 8px 0 0 12px;
  padding-left: 12px;
  border-left: 2px solid var(--xanh-mo);
}

.cay-tang-dau {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: baseline;
  padding: 4px 0;
}

.cay-cap {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .3px;
  color: var(--xanh);
  background: var(--xanh-mo);
  border-radius: 5px;
  padding: 2px 6px;
  margin-right: 7px;
}

.cay-tem {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: baseline;
  margin-left: 8px;
  padding: 5px 0 5px 12px;
  border-left: 2px dashed var(--ke);
  font-size: 13px;
}
.cay-tem .ti { color: var(--xanh); }
.cay-tem.cay-khong { color: var(--nhat); font-size: 12px; }

/* A product whose boxes were never counted. Loud on purpose. */
.cay-thieu {
  margin: 8px 0 0 12px;
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--do-mo);
  color: var(--do);
  font-size: 13px;
}

@media (max-width: 700px) {
  .cay-nhanh { margin-left: 6px; padding-left: 10px; }
  .cay-con { grid-template-columns: 1fr 72px; }
  .cay-con .cay-vi { grid-column: 1 / -1; order: 3; }
  .cay-tang { margin-left: 4px; padding-left: 10px; }
  .cay-tem { margin-left: 2px; padding-left: 10px; }
}

/* ---- printable documents ----------------------------------------------- */

/*
 * One sheet, two lives: on screen inside a preview overlay so the sender can
 * check it before the customer does, on paper the only thing left.
 *
 * Two rules shape the look. Everything is in millimetres, because a document
 * that has to line up with a 36 mm seal cannot be described in pixels. And no
 * text ever depends on a background printing: the Chrome print dialog leaves
 * "Background graphics" off by default, so white-on-blue would come out
 * white-on-white and simply vanish. Dark text on a light tint survives either
 * way, and is the quieter look anyway.
 */

#khung-in { display: none; }

body.dang-xem-in { overflow: hidden; }
body.dang-xem-in #khung-in {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 60;
  background: #55606F;
  overflow: auto;
}

.in-thanh {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 18px;
  background: var(--the);
  border-bottom: 1px solid var(--ke);
}

.in-nhac { flex: 1; font-size: 12.5px; color: var(--xam); }
.in-giay { padding: 24px 16px 40px; display: flex; justify-content: center; }

.ct-trang {
  position: relative;
  /* A sheet of A4 is A4. Inside the centring flex box it would otherwise
     shrink to fit a narrow window, and every millimetre on the page - the
     36 mm seal above all - would come out wrong. Let the overlay scroll
     sideways instead. */
  flex: none;
  width: 210mm;
  min-height: 297mm;
  padding: 11mm 15mm 9mm;
  background: #fff;
  color: #1A2231;
  font-size: 9.5pt;
  line-height: 1.4;
  box-shadow: 0 10px 34px rgba(0, 0, 0, .35);
  /* Digits line up in columns instead of drifting - the single clearest
     difference between a spreadsheet printout and a quotation. */
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

/* A band of brand colour along the top edge. Decoration only: if the printer
   drops it, nothing is lost. */
.ct-vach {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4mm;
  background: var(--xanh);
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

/* ---- letterhead ---- */

.ct-dau-trang {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10mm;
  padding: 3mm 0 2.5mm;
  border-bottom: 0.6pt solid #C9D2E2;
}

.ct-logo img { display: block; }

.ct-cty { text-align: right; }
/* The legal name reads as one line or not at all - broken across two it looks
   like a wrapped paragraph rather than a letterhead. Sized to fit the widest
   the name can be beside the logo. */
.ct-cty-ten {
  font-size: 9pt;
  font-weight: 800;
  color: var(--xanh);
  line-height: 1.2;
  letter-spacing: .1px;
  white-space: nowrap;
}
.ct-cty-en { font-size: 7.5pt; color: #7A879C; font-style: italic; margin-top: .8mm; }
.ct-cty-lh { font-size: 7.8pt; color: #4A5567; margin-top: 1.2mm; line-height: 1.4; }

/* ---- title and document data ---- */

.ct-dinh {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12mm;
  margin: 4mm 0 3.5mm;
}

.ct-ten-ct {
  font-size: 19pt;
  font-weight: 800;
  letter-spacing: 1.4px;
  color: var(--xanh);
  line-height: 1;
}
.ct-ten-ct-en {
  font-size: 8pt;
  letter-spacing: 2.6px;
  text-transform: uppercase;
  color: #9AA6B8;
  margin-top: 1.4mm;
}

/* The reference block reads as a small data table, the way an order
   acknowledgement from a large supplier does. */
.ct-meta { min-width: 74mm; }
.ct-meta > div {
  display: flex;
  justify-content: space-between;
  gap: 6mm;
  padding: 1.1mm 0;
  border-bottom: 0.5pt solid #E4E9F1;
}
.ct-meta > div:first-child { border-top: 0.5pt solid #E4E9F1; }
.ct-meta .nh { color: #6B7788; font-size: 8pt; }
.ct-meta .gt { font-weight: 700; font-size: 8.6pt; }

/* ---- product labels ---- */

/*
 * Tiled on A4 at their true size with a cut line, because the Godex G530 still
 * needs its own template file. When that lands the sheet goes away and each
 * label becomes its own page.
 */
.tem-to {
  display: flex;
  flex-wrap: wrap;
  gap: 4mm;
  align-content: flex-start;
}

.tem {
  border: 0.4pt dashed #9AA6B8;
  padding: 2mm 2.5mm;
  box-sizing: border-box;
  overflow: hidden;
  font-size: 7pt;
  line-height: 1.32;
  color: #000;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.tem-d { white-space: normal; }
.tem-hieu { font-weight: 800; font-size: 8pt; }
.tem-vi { font-size: 6.2pt; line-height: 1.26; justify-content: flex-start; }
.tem-vi .tem-d { margin-bottom: .2mm; }

@media print {
  .tem { border-color: #C7CDD8; }
}

/* ---- who it is addressed to ---- */

.ct-toi {
  border-left: 1.2mm solid var(--xanh);
  background: #F6F8FC;
  padding: 2.5mm 4mm;
  margin-bottom: 3mm;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

.ct-nhan {
  font-size: 7.2pt;
  font-weight: 700;
  letter-spacing: .8px;
  text-transform: uppercase;
  color: #8E9AAC;
  margin-bottom: 1.2mm;
}

.ct-kh-ten { font-weight: 800; font-size: 10.5pt; line-height: 1.25; }
.ct-kh-dong { font-size: 8.6pt; color: #3D4757; margin-top: .6mm; }

.ct-mo-dau { margin: 0 0 2.5mm; font-size: 9pt; color: #3D4757; }

/* ---- the lines ---- */

.ct-bang { width: 100%; border-collapse: collapse; font-size: 8.6pt; table-layout: fixed; }
/* Widths follow the headings, not the numbers: "SỐ LƯỢNG" and "THÀNH TIỀN"
   are wider than the figures beneath them, and a fixed layout clips whatever
   does not fit instead of pushing the column open. */
.ct-bang col.c-stt { width: 8mm; }
.ct-bang col.c-ma  { width: 31mm; }
.ct-bang col.c-dvt { width: 11mm; }
.ct-bang col.c-sl  { width: 19mm; }
.ct-bang col.c-gia { width: 25mm; }
.ct-bang col.c-tt  { width: 30mm; }
/* ---- picking list only ---- */
.ct-bang col.c-ncc   { width: 34mm; }
.ct-bang col.c-giao  { width: 16mm; }
.ct-vi-sao { font-size: 7pt; color: #8E9AAC; margin-top: .3mm; font-weight: 400; }
.ct-bang td.dam .ct-vi-sao { font-weight: 400; }
.ct-bang col.c-vai   { width: 20mm; }
.ct-bang col.c-ton   { width: 20mm; }
.ct-bang col.c-thieu { width: 16mm; }
/* Written in by hand, so it is sized for handwriting rather than for the
   nothing it contains. canDoiCot leaves it alone for the same reason. */
.ct-bang col.c-lay   { width: 22mm; }

/*
 * Tinted header with dark text and a rule beneath, rather than white on solid
 * blue: if the tint never prints, the heading is still perfectly readable.
 */
.ct-bang th {
  background: #EDF1F8;
  color: #1A2231;
  font-weight: 700;
  font-size: 7pt;
  letter-spacing: 0;
  text-transform: uppercase;
  padding: 2mm 1.6mm 1.6mm;
  text-align: left;
  /*
   * The app-wide "thead th" rule pins headers to the top of a scrolling table
   * and stops them wrapping. Neither belongs on a sheet of paper: sticky is
   * meaningless in print, and nowrap kept "SỐ LƯỢNG" on one line so the column
   * could never be narrower than the words above it.
   */
  position: static;
  white-space: normal;
  overflow-wrap: normal;
  border-bottom: 1.2pt solid var(--xanh);
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

.ct-bang th .en {
  display: block;
  font-size: 6.4pt;
  font-weight: 500;
  letter-spacing: .1px;
  text-transform: none;
  color: #8593A8;
  margin-top: .3mm;
}

.ct-bang td {
  padding: 1.9mm 1.6mm;
  border-bottom: 0.5pt solid #E4E9F1;
  vertical-align: top;
  overflow-wrap: anywhere;
}

.ct-bang .giua, .ct-bang th.giua { text-align: center; }
.ct-bang .phai, .ct-bang th.phai { text-align: right; }

/*
 * A figure never breaks across two lines. Reading 1.219.325.432.114 as
 * "1.219.325.432." above "114" is worse than any amount of white space, and
 * the eye cannot tell a wrapped number from two numbers. The columns are sized
 * for the widest figure they can hold; only the description and the part
 * number are allowed to wrap at all.
 */
.ct-bang td.phai, .ct-bang td.giua { white-space: nowrap; overflow-wrap: normal; }
.ct-bang .ct-ma { font-weight: 700; font-size: 8.2pt; }
.ct-bang .ct-mo-ta-en { color: #7A879C; font-size: 7.6pt; margin-top: .4mm; }
.ct-bang tbody tr:last-child td { border-bottom: 0.8pt solid #C9D2E2; }

/* ---- totals ---- */

/*
 * A block hugging the right edge rather than a full-width footer row: it keeps
 * the eye on the one number that matters and leaves the width for the words.
 */
.ct-cong { display: flex; justify-content: flex-end; margin-top: 2.5mm; }
.ct-cong-hop { width: 86mm; font-size: 8.8pt; }

.ct-cong-hop > div {
  display: flex;
  justify-content: space-between;
  gap: 6mm;
  padding: 1.3mm 2mm;
}

.ct-cong-hop .nh { color: #5B6879; }
.ct-cong-hop .nh small { color: #9AA6B8; font-size: 7.2pt; }

.ct-cong-tong {
  border-top: 1.2pt solid var(--xanh);
  margin-top: 1mm;
  padding-top: 1.6mm !important;
  background: #F6F8FC;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}
.ct-cong-tong .nh { color: #1A2231; font-weight: 800; font-size: 9pt; }
.ct-cong-tong .gt { font-size: 12.5pt; font-weight: 800; color: var(--xanh); }

.ct-bang-chu {
  margin-top: 2.5mm;
  font-size: 8.6pt;
  padding: 1.5mm 0;
  border-top: 0.5pt solid #E4E9F1;
  border-bottom: 0.5pt solid #E4E9F1;
}
.ct-bang-chu i { color: #2C3646; }

/* ---- terms and signature, side by side ---- */

.ct-ky {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10mm;
  margin-top: 4mm;
}

.ct-ky-trai { flex: 1; }
.ct-ky-phai { width: 72mm; flex: none; text-align: center; }

.ct-dieu-khoan { font-size: 8.2pt; color: #3D4757; }
.ct-dieu-khoan ul { margin: 0; padding-left: 4.5mm; }
.ct-dieu-khoan li { margin-bottom: .9mm; }

/* Place and date above the title, as the order of the markup now has them. */
.ct-ky-ngay { font-size: 7.8pt; color: #8E9AAC; }
.ct-ky-chuc {
  font-size: 9.5pt;
  font-weight: 800;
  letter-spacing: 1.2px;
  margin-top: .8mm;
}

/* Tall enough for the artwork itself: at 58 mm wide it is 37.7 mm high, and a
   shorter box let it spill over the words above and below. */
.ct-ky-anh { height: 38mm; display: flex; align-items: center; justify-content: center; }
/*
 * The seal artwork is a red stamp on a WHITE rectangle, and that rectangle
 * covered the words it overlapped - the date above it and the printed name
 * below, which the -4mm on .ct-ky-ten deliberately tucks underneath.
 *
 * multiply drops white to nothing against white paper while leaving the red
 * and the blue ink untouched: white multiplied by anything is that thing.
 * It costs no change to the artwork, which lives in a private bucket and must
 * never come into the repo - SPEC 9.
 *
 * A seal saved with real transparency would need none of this and would be
 * safer against a print engine that ignores blend modes, so it stays worth
 * doing to the file itself one day.
 */
.ct-ky-anh img {
  mix-blend-mode: multiply;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

/* The signed / unsigned switch on the print toolbar. Screen only - the
   toolbar itself is hidden when printing. */
.in-che-do {
  display: flex;
  border: 1px solid #C9D2E2;
  border-radius: 7px;
  overflow: hidden;
  flex: none;
}

.in-che-do button {
  background: #fff;
  color: #3D4757;
  border: 0;
  border-radius: 0;
  padding: 7px 14px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}

.in-che-do button + button { border-left: 1px solid #C9D2E2; }
.in-che-do button:hover { background: #F0F4FB; }

.in-che-do button.chon {
  background: var(--xanh);
  color: #fff;
}

.ct-ky-trong {
  width: 56mm;
  height: 30mm;
  border: 0.8pt dashed #C7CDD8;
  border-radius: 3mm;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 4mm;
  font-size: 7.6pt;
  color: #9AA6B8;
}

/* The signature crosses the printed name, the way it does on paper. */
.ct-ky-ten { font-weight: 800; font-size: 10pt; margin-top: -4mm; }

/* ---- footer ---- */

/* Red text rather than a red band: Chrome prints backgrounds only when the
   person printing has ticked "Background graphics", and a shortage nobody can
   see on the paper is worse than one shown in plain black. */
.ct-thieu-so { color: var(--do); }
.ct-bang td.dam { font-weight: 700; }

.ct-tom-luoc {
  margin-top: 2.5mm;
  padding: 2mm 3mm;
  border: 0.6pt solid #C9D2E2;
  border-left: 1.6pt solid var(--xanh);
  font-size: 8.6pt;
}
.ct-tom-nho { font-size: 7.6pt; color: #6B7788; margin-top: .8mm; }

.ct-tem { margin-top: 4mm; }
.ct-bang-tem {
  width: 100%;
  border-collapse: collapse;
  font-size: 8.4pt;
  margin-top: 1.5mm;
}
.ct-bang-tem th {
  background: #F4F7FC;
  border: 0.5pt solid #C9D2E2;
  padding: 1mm 2mm;
  text-align: left;
  font-size: 7.6pt;
  text-transform: uppercase;
  letter-spacing: .3px;
  color: #4A5567;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}
.ct-bang-tem td { border: 0.5pt solid #DDE4EF; padding: 1mm 2mm; }
.ct-bang-tem .phai { text-align: right; white-space: nowrap; }
.ct-bang-tem td.dam { font-weight: 700; }
.ct-bang-tem .ct-ma { font-weight: 700; white-space: nowrap; }

/* Filter chips: a small catalogue is browsed, not searched blind. */
.hang-chip { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 12px; }
.chip {
  border: 1px solid var(--ke);
  background: var(--the);
  color: var(--muc);
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  line-height: 1.4;
}
.chip span { color: var(--nhat); font-weight: 600; }
.chip:hover { border-color: var(--xanh); }
.chip.dang-chon { background: var(--xanh); border-color: var(--xanh); color: #fff; }
.chip.dang-chon span { color: rgba(255,255,255,.75); }

/* ---- cartons ---- */

.the-thung {
  border: 1px solid var(--ke);
  border-left: 3px solid var(--xanh);
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 10px;
  background: var(--the);
}
.the-thung.dong { border-left-color: var(--tot); background: var(--tot-mo); }
.the-thung-dau {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 8px;
}
/* UTP and OFC go to different workshops, so they are told apart at a glance
   rather than by reading. */
.nhan-xuong {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .4px;
  color: #fff;
}
.nhan-xuong.UTP { background: var(--xanh); }
.nhan-xuong.OFC { background: var(--luu-y); }

.ct-phan-xuong { margin-top: 4mm; }
.ct-phan-xuong .ct-bang-tem td[rowspan] { vertical-align: top; }

/* ---- production progress ---- */

/*
 * One card per product, and the card is the work instruction: what goes into
 * one, what it is packed in, what is stuck on the pack. It used to be three
 * counters and nothing else - a lot of screen saying only how far along the
 * count was, and not one word about the job.
 *
 * A finished product collapses. On a phone the whole order is then a short
 * list, and the one thing still being worked on is open.
 */
.the-sp {
  border: 1px solid var(--ke);
  border-radius: 12px;
  margin-bottom: 10px;
  background: var(--the);
  overflow: hidden;
}

.the-sp-dau {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: start;
  padding: 12px 14px;
  cursor: pointer;
  list-style: none;
}
.the-sp-dau::-webkit-details-marker { display: none; }
.the-sp-dau::marker { content: ''; }
.the-sp[open] .the-sp-dau { border-bottom: 1px solid var(--ke); }
.the-sp .so-lon { font-size: 20px; font-weight: 800; line-height: 1.2; }

/* Segments, not one bar: the three stages are true at the same time. */
.sx-thanh {
  display: flex;
  height: 6px;
  border-radius: 3px;
  background: var(--tang);
  overflow: hidden;
  margin: 8px 0 4px;
}
.sx-thanh > div { background: var(--xanh); }
.sx-thanh > div + div { border-left: 1px solid var(--the); }
.sx-thanh.nho { height: 5px; }

.sx-tom {
  padding: 10px 12px;
  border: 1px solid var(--ke);
  border-radius: 12px;
  background: var(--the);
  margin-bottom: 12px;
}
.sx-tom .sx-thanh { margin-top: 0; }
.sx-tom-chu { font-size: 13px; color: var(--xam); }

/* ---- one stage ---- */

.sx-cd {
  border-left: 3px solid var(--luu-y);
  padding: 10px 14px 12px;
  border-bottom: 1px dashed var(--ke-2);
}
.sx-cd:last-child { border-bottom: 0; }
.sx-cd.xong { border-left-color: var(--tot); background: var(--tot-mo); }

.sx-cd-dau {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: baseline;
}
.sx-cd-ten { font-weight: 700; font-size: 14px; }
.sx-cd-so { font-size: 18px; font-weight: 800; font-variant-numeric: tabular-nums; }
.sx-cd-so .tren { font-size: 13px; font-weight: 600; color: var(--nhat); }

.sx-so-tt {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--xanh);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
}

.sx-vt-nhan {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .3px;
  color: var(--xam);
  margin: 8px 0 3px;
}
/* Column headings, so the two numbers on each row are never guessed at. */
.sx-vt-cot { display: flex; gap: 8px; font-weight: 700; flex: 0 0 auto; }
.sx-vt-cot i { font-style: normal; display: inline-block; min-width: 46px;
               text-align: right; }
.sx-vt { border-left: 2px solid var(--ke); padding-left: 10px; }
.sx-vt-dong {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  gap: 8px;
  align-items: baseline;
  padding: 3px 0;
  font-size: 13px;
}
.sx-vt-dong .goi-y { font-size: 12px; }
.sx-vt-so { font-weight: 800; font-variant-numeric: tabular-nums; }
/* For the whole order. Lighter than the per-unit figure on purpose: the bench
   works from "one takes four", the storeman from "the order takes 160". */
.sx-vt-tong {
  min-width: 46px;
  text-align: right;
  font-weight: 700;
  color: var(--xam);
  font-variant-numeric: tabular-nums;
}
.sx-tem .goi-y { font-size: 11.5px; }
/* Outer packing, named here but done elsewhere. */
.sx-mo { opacity: .62; }

.sx-thieu {
  margin-top: 6px;
  font-size: 12px;
  color: var(--do);
  font-weight: 600;
}

/*
 * Three figures side by side, each with its name over it - Harry, 25/08/2026.
 * Two are typed and tied together, the third is what the customer ordered and
 * cannot be typed, so it is drawn flat rather than as a disabled box: a greyed
 * input still invites a tap.
 */
.sx-ghi {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 8px;
  margin-top: 10px;
}
.sx-o { display: flex; flex-direction: column; gap: 3px; min-width: 92px; }
.sx-o label {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .3px;
  color: var(--xam);
}
.sx-o input {
  width: 100%;
  min-height: 38px;
  padding: 6px 8px;
  font-size: 16px;             /* under 16px, iOS zooms the page on focus */
  font-weight: 700;
  text-align: right;
  font-variant-numeric: tabular-nums;
  border: 1px solid var(--ke);
  border-radius: 8px;
  background: var(--nen);
  color: inherit;
}
.sx-o input:focus { outline: 2px solid var(--chinh); outline-offset: -1px; }
.sx-o-so {
  min-height: 38px;
  padding: 6px 8px;
  font-size: 16px;
  font-weight: 800;
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--xam);
}
.sx-o-mo { min-width: 78px; }
.sx-ghi button { min-height: 38px; min-width: 44px; }
.sx-canh { flex: 1 0 100%; font-size: 12px; }

@media (max-width: 560px) {
  .sx-o { flex: 1 1 30%; min-width: 0; }
  .sx-ghi button { flex: 1 1 auto; }
}

@media (max-width: 560px) {
  .the-sp-dau { padding: 10px 12px; }
  .sx-cd { padding: 10px 12px 12px; }
  .sx-vt-dong { grid-template-columns: 1fr auto auto; }
  .sx-vt-dong .goi-y { grid-column: 1 / -1; order: 3; }
}

/* A bordered group inside a dialog: one supplier's worth of a purchase. */
/* One level of a packing chain being written out by hand. */
.kdm-chuoi { margin-top: 8px; }
.kdm-tang {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  margin-bottom: 6px;
  border: 1px solid var(--ke);
  border-left: 3px solid var(--xanh);
  border-radius: 0 8px 8px 0;
  background: var(--the);
}
.kdm-cap {
  font-size: 10.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .3px;
  color: var(--xam);
  min-width: 52px;
}
.kdm-tang select { min-width: 130px; }
.kdm-tang input[data-o="chua"] {
  width: 72px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.kdm-tem-tang {
  flex: 1 0 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding-left: 52px;
}
.kdm-tem-mot { display: inline-flex; align-items: center; gap: 4px; }
.kdm-tem-mot select { min-width: 92px; font-size: 12px; }

@media (max-width: 560px) {
  .kdm-cap { flex: 1 0 100%; min-width: 0; }
  .kdm-tem-tang { padding-left: 0; }
  .kdm-tang select { min-width: 0; flex: 1 1 auto; }
}

/* A bill row that points at the product itself - a trading good bought whole. */
.ttp-tu-minh td { background: var(--tot-mo); }

/* The four steps across the top of the new-product dialog. Always visible,
   so nothing is a surprise when Save stays grey. */
.ttp-buoc { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 14px; }
.ttp-mot {
  flex: 1 1 auto;
  padding: 7px 10px;
  font-size: 12.5px;
  font-weight: 600;
  border: 1px solid var(--ke);
  border-radius: 8px;
  background: var(--the);
  color: inherit;
  cursor: pointer;
}
.ttp-mot.dang-o { border-color: var(--chinh); box-shadow: inset 0 -2px 0 var(--chinh); }
.ttp-xem {
  border: 1px dashed var(--ke);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 13px;
  line-height: 1.5;
  background: var(--giay);
}

/* The four readiness marks on /thanh-pham. Green tick, red cross, nothing in
   between - a code is either sellable or it is not. */
.tc-co    { color: var(--tot); font-weight: 800; }
.tc-khong { color: var(--do);  font-weight: 800; }
td.giua, th.giua { text-align: center; }

/* A typed code that no longer matches the configuration behind it. Amber,
   not red: it is often exactly what somebody meant to do. */
.ch-lech {
  margin-top: 10px;
  padding: 8px 10px;
  border-left: 3px solid var(--luu-y);
  background: #FFF7E6;
  border-radius: 0 6px 6px 0;
  font-size: 12.5px;
  line-height: 1.45;
}

/* Held stock: a figure that EXPLAINS the one beside it rather than competing
   with it, so it is toned down instead of bold. */
.cm-giu { color: var(--tot); font-weight: 700; }

/* The material summary on /san-xuat. Same card shell as a product so the page
   reads as one stack, but no progress bar - nothing here is worked on. */
.vt-khoi .the-sp-dau { cursor: pointer; }
.vt-khoi .bang-cuon { padding: 0 14px 4px; }
.bang-gon {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.bang-gon th {
  text-align: left;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .3px;
  color: var(--xam);
  padding: 6px 8px 4px;
  border-bottom: 1px solid var(--ke);
  white-space: nowrap;
}
.bang-gon td {
  padding: 6px 8px;
  border-bottom: 1px solid var(--ke-2);
  vertical-align: top;
}
.bang-gon tr:last-child td { border-bottom: 0; }
.bang-gon .phai { text-align: right; font-variant-numeric: tabular-nums; }
.vt-khoi .sx-thieu { padding: 0 14px 12px; margin-top: 0; }

.khoi-nhom {
  border: 1px solid var(--ke);
  border-left: 3px solid var(--xanh);
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 12px;
  background: var(--the);
}
.khoi-nhom-dau { display: flex; align-items: flex-end; gap: 10px; }
.khoi-nhom-dau .o-nhap { flex: 1; margin: 0; }
@media (max-width: 700px) { .khoi-nhom-dau { flex-wrap: wrap; } }

/* A tick with its label on the same line, big enough to hit on a phone. */
.o-tick {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 10px 0 4px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.o-tick input { width: 18px; height: 18px; margin: 0; accent-color: var(--xanh); }

/* A purchase line: code, quantity, price, amount, remove. Narrower than the
   sales line because there is no delivery date per line to carry. */
.dong-mua {
  display: grid;
  grid-template-columns: 1fr 7em 8em 9em 2.2em;
  gap: 8px;
  align-items: center;
  padding: 8px 10px;
  border: 1px solid var(--ke);
  border-radius: 8px;
  margin-bottom: 6px;
  background: var(--the);
}
.dong-mua.dau {
  background: var(--tang);
  border-color: var(--ke);
  font-size: 11.5px;
  font-weight: 700;
  color: var(--xam);
  text-transform: uppercase;
  letter-spacing: .3px;
  padding: 6px 10px;
}
.dong-mua input { margin: 0; }
.dong-mua .o-khoa { font-weight: 700; }

@media (max-width: 700px) {
  .dong-mua { grid-template-columns: 1fr 1fr auto; }
  .dong-mua > div:nth-child(1) { grid-column: 1 / -1; }
  .dong-mua.dau { display: none; }
}

/* ---- packing chain editor ---- */

.qc-tang {
  border: 1px solid var(--ke);
  border-left: 3px solid var(--xanh);
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 10px;
  background: var(--the);
}
.qc-tang-dau {
  display: flex;
  align-items: flex-end;
  gap: 10px;
}
.qc-tang-dau .o-nhap { flex: 1; margin: 0; }
.qc-cap {
  font-weight: 700;
  font-size: 13px;
  color: var(--xanh);
  white-space: nowrap;
  padding-bottom: 9px;
}
.qc-tang > .o-nhap { margin: 8px 0 0; }
.qc-tem {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed var(--ke);
}
/* Size, language, count, template, remove - in that order, because that is
   the order somebody reads a label spec aloud. */
.qc-mot-tem {
  display: grid;
  grid-template-columns: 6.5em 8em 4.5em 1fr auto;
  gap: 6px;
  align-items: center;
  margin-bottom: 6px;
}
.qc-mot-tem input, .qc-mot-tem select { margin: 0; }

@media (max-width: 700px) {
  .qc-tang-dau { flex-wrap: wrap; }
  .qc-mot-tem { grid-template-columns: 1fr 1fr auto; }
  .qc-mot-tem input[data-o="mau"] { grid-column: 1 / -1; }
}

/* Three blank boxes: the picking list is signed on the floor, in pen. */
.ct-ky-kho {
  display: flex;
  gap: 8mm;
  margin-top: 8mm;
  text-align: center;
}
.ct-ky-kho > div { flex: 1; }
.ct-ky-kho-vt { font-size: 9.5pt; font-weight: 800; }
.ct-ky-kho-nh { font-size: 7.4pt; color: #8E9AAC; font-style: italic; margin-top: .6mm; }
.ct-ky-kho-cho {
  height: 24mm;
  margin-top: 1.5mm;
  border-bottom: 0.6pt dotted #9AA6B8;
}

/* Stacked, not spread across the width: name, address, tax code, one per
   line. Harry 25/08/2026. As a flex row the three ran to both margins and
   the address in the middle had to wrap to fit, which read as one long
   sentence broken in an arbitrary place. */
.ct-chan {
  margin-top: 3.5mm;
  padding-top: 1.8mm;
  border-top: 0.6pt solid #C9D2E2;
  font-size: 6.8pt;
  color: #8E9AAC;
  line-height: 1.5;
}

@media print {
  @page { size: A4; margin: 0; }
  html, body { background: #fff; }
  body > *:not(#khung-in) { display: none !important; }
  body.dang-xem-in { overflow: visible; }
  body.dang-xem-in #khung-in {
    display: block;
    position: static;
    background: none;
    overflow: visible;
  }
  .in-thanh { display: none; }
  .in-giay { display: block; padding: 0; }
  .ct-trang { width: auto; min-height: 0; box-shadow: none; }
  /* A row split across a page break, or a signature stranded on its own, is
     what makes a printout look homemade. */
  .ct-bang tr { page-break-inside: avoid; }
  .ct-bang thead { display: table-header-group; }
  .ct-cong, .ct-ky, .ct-bang-chu { page-break-inside: avoid; }
  .ct-tom-luoc, .ct-ky-kho, .ct-tem { page-break-inside: avoid; }
}