/* Xuân Thu · giao diện v3, các màn theo vai (brief thiết kế lại 02/11/2026 §4, mock-up design/reference/khung1..4.png).
   Chỉ bố cục màn ghép từ token --ds-* và mảnh .ds-* (assets/ds.css). Nạp sau khung.css. Một khối cho mỗi màn, ghi rõ màn nào. */

/* ================= Hường, Vy · Hôm nay (homNayCH, mock-up khung 1) ================= */
/* nền pastel liền một dải từ đầu màn tới hết ô tìm, bo dưới 28 (JS hnNen() đo chiều cao) */
#view:has(.hn3) { position: relative; }
#view:has(.hn3)::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: var(--hn-h, 260px); background: var(--ds-hero); border-radius: 0 0 28px 28px; pointer-events: none; }
#view:has(.hn3) > * { position: relative; }
.hn3 .bar { padding-bottom: 4px; }
/* lời chào (phần chung #chao) to hơn trên trang chủ cửa hàng */
#view:has(.hn3) .chao { gap: 10px; padding: 4px 0 0; align-items: flex-start; }
#view:has(.hn3) .chao-hinh { font-size: 26px; color: var(--ds-primary-text); margin-top: 2px; }
#view:has(.hn3) .chao-1 { font-size: var(--ds-fs-17); font-weight: 600; color: var(--ds-text); white-space: normal; }
#view:has(.hn3) .chao-2 { font-size: var(--ds-fs-15); color: var(--ds-text-2); }
#view:has(.hn3) .chao-2::before { content: none; }
.hn3 .hn-troi { display: flex; gap: 8px; align-items: flex-start; margin: 4px 0 12px; font-size: var(--ds-fs-15); color: var(--ds-text-2); }
.hn3 .hn-troi i { font-size: 22px; color: var(--ds-primary-text); }
/* chọn cửa hàng: viên trắng như ô chọn cửa hàng của mock-up */
.hn3 .cht-pick { gap: 8px; padding: 0 0 12px; }
.hn3 .cht-pick .stab { height: 36px; padding: 0 14px; border: 0; border-radius: var(--ds-r-pill); background: rgba(255, 255, 255, .7); color: var(--ds-text-2); font-weight: 600; font-size: var(--ds-fs-15); box-shadow: none; }
.hn3 .cht-pick .stab.on { background: var(--ds-surface); color: var(--ds-text); box-shadow: var(--ds-shadow), var(--ds-edge); }
.hn3 .cht-pick .stab.on::after { display: none; }
:root[data-theme="dark"] .hn3 .cht-pick .stab:not(.on) { background: rgba(255, 255, 255, .08); }
.hn3 .hn-tim { margin: 0 0 24px; }
.hn3 .hn-o { margin: 0 0 20px; }
/* hạn đặt hàng: đầu cam nhạt, nút chính */
.hn3 .hn-han { display: flex; align-items: center; gap: 12px; padding: 16px; margin: 0 0 24px; border: 0; border-radius: var(--ds-r-card); background: var(--ds-tint-soft); box-shadow: var(--ds-shadow), var(--ds-edge); }
.hn3 .hn-han > .hn-han-ic { width: 44px; height: 44px; border-radius: var(--ds-r-ctl); background: var(--ds-primary); color: var(--ds-on-primary); display: grid; place-items: center; font-size: 22px; flex: none; }
.hn3 .hn-han p { flex: 1; margin: 0; font-size: 16px; font-weight: 600; line-height: 1.4; color: var(--ds-text); }
.hn3 .hn-han .btn { min-height: 44px; border-radius: var(--ds-r-ctl); border: 0; background: var(--ds-primary); color: var(--ds-on-primary); font-weight: 600; padding: 0 18px; }
.hn3 .hn-han.da-gui { background: var(--ds-mint-bg); } .hn3 .hn-han.da-gui > .hn-han-ic { background: var(--ds-mint); color: #FFFFFF; }
.hn3 .hn-han.da-gui .btn { background: var(--ds-surface); color: var(--ds-text); }
.hn3 .hn-han.qua > .hn-han-ic { background: var(--ds-danger); }
/* Cần chị làm: mỗi việc một thẻ trắng, chấm màu theo nghĩa, nút viên bên phải */
.hn3 .hn-h2 { font-size: var(--ds-fs-20); font-weight: 700; line-height: 28px; margin: 0 0 12px; color: var(--ds-text); }
.hn3 .hn-ds { gap: 10px; }
.hn3 .hn-the { flex-wrap: nowrap; gap: 12px; padding: 14px 14px 14px 16px; border: 0; border-radius: var(--ds-r-card); background: var(--ds-surface); box-shadow: var(--ds-shadow), var(--ds-edge); }
.hn3 .hn-the::before { content: ""; width: 10px; height: 10px; border-radius: 50%; flex: none; background: var(--ds-text-3); }
.hn3 .hn-the p { font-size: 16px; font-weight: 600; line-height: 1.35; color: var(--ds-text); }
.hn3 .hn-the .btn, body.vt-order #view .hn3 .hn-the .btn { width: auto; flex: none; min-height: 36px; height: 36px; padding: 0 14px; border: 0; border-radius: var(--ds-r-pill); background: var(--ds-tint); color: var(--ds-on-tint); font-size: 14px; font-weight: 600; white-space: nowrap; }
.hn3 .hn-the .btn i { display: none; }
.hn3 .hn-the .btn:hover { background: var(--ds-tint-2); }
/* chấm: tím đặt may, vàng chờ người khác, xanh điều hàng, mint hàng về, đỏ hết hàng */
.hn3 .hn-the[data-ma^="dat_may"]::before { background: var(--ds-dot-purple); }
.hn3 .hn-the[data-ma="bich"]::before, .hn3 .hn-the[data-ma="mua"]::before, .hn3 .hn-the[data-ma="sale"]::before { background: var(--ds-dot-amber); }
.hn3 .hn-the[data-ma="dieu_goi_y"]::before { background: var(--ds-dot-sky); }
.hn3 .hn-the[data-ma="hang_ve"]::before, .hn3 .hn-the[data-ma="hang_sap_ve"]::before { background: var(--ds-mint); }
.hn3 .hn-the[data-ma="het"]::before { background: var(--ds-dot-red); }
.hn3 .hn-the[data-ma^="dat_may"] { border: 0; }
/* tin (hàng đang tới): thẻ trắng có chấm sống */
.hn3 .hn-tin { gap: 12px; padding: 14px 16px; border: 0; border-radius: var(--ds-r-card); background: var(--ds-surface); box-shadow: var(--ds-shadow), var(--ds-edge); align-items: center; }
.hn3 .hn-tin > i { width: 40px; height: 40px; border-radius: var(--ds-r-ctl); background: var(--ds-mint-bg); color: var(--ds-mint); display: grid; place-items: center; font-size: 20px; flex: none; }
.hn3 .hn-tin p { margin: 0; font-size: var(--ds-fs-15); color: var(--ds-text-body); line-height: 1.4; }
.hn3 .hn-trong { padding: 24px 16px; justify-content: center; border-radius: var(--ds-r-card); background: var(--ds-surface); box-shadow: var(--ds-shadow), var(--ds-edge); font-size: var(--ds-fs-15); }
.hn3 .hn-trong i { width: 40px; height: 40px; border-radius: 50%; background: var(--ds-mint-bg); color: var(--ds-mint); display: grid; place-items: center; }
/* dòng số: thẻ số liệu */
.hn3 .hn-so { margin-top: 24px; padding: 16px; border-radius: var(--ds-r-card); background: var(--ds-surface); box-shadow: var(--ds-shadow), var(--ds-edge); font-size: var(--ds-fs-15); color: var(--ds-text-body); }
.hn3 .hn-so > i { width: 40px; height: 40px; border-radius: var(--ds-r-ctl); background: var(--ds-sky-bg); color: var(--ds-sky); display: grid; place-items: center; font-size: 20px; flex: none; }
.hn3 .hn-so b { color: var(--ds-primary-text); white-space: nowrap; }
.hn3 .hn-luc { color: var(--ds-text-3); font-size: var(--ds-fs-13); }
/* máy tính: ô tắt và hạn đặt hàng cạnh nhau, việc bên trái, số bên phải */
@media (min-width: 1024px) {
  .hn3 .cht-pad { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: start; }
  .hn3 .cht-pad > * { grid-column: 1 / -1; }
  .hn3 .hn-tim { grid-column: 1 / span 7; }
  .hn3 #hn-troi { grid-column: 1 / span 7; }
  .hn3 .hn-o { grid-column: 1 / span 5; }
  .hn3 #hnwrap { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: start; }
  .hn3 #hnwrap > * { grid-column: 1 / span 7; }
  .hn3 #hnwrap > .hn-han { grid-column: 1 / -1; }
  .hn3 #hnwrap > .hn-so { grid-column: 8 / span 5; grid-row: 2 / span 2; margin-top: 40px; align-self: start; }
  .hn3 #hnwrap > .hn-luc { grid-column: 8 / span 5; }
}
@media (max-width: 767px) { .hn3 .hn-han { flex-wrap: wrap; } .hn3 .hn-han .btn { width: 100%; min-height: 48px; } }

/* ================= Xưởng: Hân, Liên, Thuận, Diễm (xuongHome trên nhánh nha-may, mock-up khung 4). Chưa áp cho chị Hằng (body.vt-kho): màn của chị dựng riêng, nút ≥ 56 px, chữ ≥ 20 px (test_hang_kho) ================= */
/* lời chào to trên trang chủ xưởng */
body.vt-xuong:not(.vt-kho) #view .chao { padding: 0 0 4px; }
body.vt-xuong:not(.vt-kho) #view .chao-1 { font-size: var(--ds-fs-24); font-weight: 700; line-height: 30px; color: var(--ds-text); white-space: normal; }
body.vt-xuong:not(.vt-kho) #view .chao-hinh { font-size: 26px; color: var(--ds-primary-text); }
/* ô tìm lô: thẻ trắng, BG- cố định, nút quét ô xám */
body.vt-xuong:not(.vt-kho) #view .nm-tim { gap: 8px; margin: 0 0 24px; }
body.vt-xuong:not(.vt-kho) #view .nm-tim-o { min-height: 56px; border: 0; border-radius: var(--ds-r-card); background: var(--ds-surface); box-shadow: var(--ds-shadow), var(--ds-edge); padding: 0 8px 0 16px; }
body.vt-xuong:not(.vt-kho) #view .nm-tim-o:focus-within { outline: 3px solid var(--ds-primary); outline-offset: 2px; }
body.vt-xuong:not(.vt-kho) #view .nm-tim-bg { font-size: var(--ds-fs-20); color: var(--ds-text-3); }
body.vt-xuong:not(.vt-kho) #view .nm-tim-o input { font-size: var(--ds-fs-20); }
body.vt-xuong:not(.vt-kho) #view .nm-tim-quet { width: 44px; height: 44px; border-radius: var(--ds-r-ctl); background: var(--ds-sunken); color: var(--ds-text-2); display: grid; place-items: center; font-size: 22px; flex: none; text-decoration: none; }
body.vt-xuong:not(.vt-kho) #view .nm-tim-nut { min-height: 56px; border: 0; border-radius: var(--ds-r-card); background: var(--ds-tint); color: var(--ds-on-tint); font-weight: 600; padding: 0 20px; }
/* tiêu đề mục: 20 đậm, số đếm xám bên phải; mục Đang … là chữ nhỏ in hoa cam (mock-up ĐANG CẮT) */
body.vt-xuong:not(.vt-kho) #view .xl-muc { margin: 0 0 24px; }
body.vt-xuong:not(.vt-kho) #view .xl-muc > h2 { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; font-size: var(--ds-fs-20); font-weight: 700; line-height: 28px; margin: 0 0 12px; color: var(--ds-text); }
body.vt-xuong:not(.vt-kho) #view .xl-muc > h2 .xl-dem { min-width: 0; height: auto; padding: 0; background: transparent; color: var(--ds-text-3); font-size: max(var(--ds-fs-15), var(--t-min, 15px)); font-weight: 600; }
body.vt-xuong:not(.vt-kho) #view .xl-muc[data-k="xm-dang"] > h2 { font-size: max(var(--ds-fs-13), var(--t-min, 13px)); line-height: 18px; letter-spacing: .04em; text-transform: uppercase; color: var(--ds-primary-text); margin-bottom: 8px; }
/* thẻ lô (LotCard dùng chung): thẻ trắng bo 16, bóng, không viền */
body.vt-xuong:not(.vt-kho) #view .xl-the.nm-the { display: grid; gap: 8px; margin: 0 0 12px; padding: 16px; border: 0; border-radius: var(--ds-r-card); background: var(--ds-surface); box-shadow: var(--ds-shadow), var(--ds-edge); }
body.vt-xuong:not(.vt-kho) #view .nm-the .xl-d1 { align-items: flex-start; gap: 12px; font-size: max(var(--ds-fs-15), var(--t-min, 15px)); }
body.vt-xuong:not(.vt-kho) #view .nm-the .nm-dau { flex: 1; min-width: 0; display: grid; gap: 2px; }
body.vt-xuong:not(.vt-kho) #view .nm-the .nm-ma { font-size: var(--ds-fs-24); font-weight: 700; line-height: 30px; letter-spacing: -.01em; color: var(--ds-text); font-variant-numeric: tabular-nums; }
body.vt-xuong:not(.vt-kho) #view .nm-the .nm-hang { font-size: max(var(--ds-fs-15), var(--t-min, 15px)); color: var(--ds-text-2); }
body.vt-xuong:not(.vt-kho) #view .nm-the .nm-hang .xl-mau { color: var(--ds-text-2); }
body.vt-xuong:not(.vt-kho) #view .nm-the .nm-sl { font-size: var(--ds-fs-24); font-weight: 700; line-height: 30px; color: var(--ds-text); }
body.vt-xuong:not(.vt-kho) #view .nm-the .nm-sl small { font-size: max(var(--ds-fs-15), var(--t-min, 15px)); font-weight: 600; color: var(--ds-text-3); }
body.vt-xuong:not(.vt-kho) #view .nm-the .xl-tt { font-size: var(--ds-fs-24); line-height: 30px; font-weight: 700; color: var(--ds-text-3); }
body.vt-xuong:not(.vt-kho) #view .nm-the .xl-tt.dau { color: var(--ds-primary-text); }
body.vt-xuong:not(.vt-kho) #view .nm-the .xl-mui { color: var(--ds-text-3); margin-top: 6px; }
body.vt-xuong:not(.vt-kho) #view .nm-d2 { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: max(var(--ds-fs-15), var(--t-min, 15px)); color: var(--ds-text-2); }
body.vt-xuong:not(.vt-kho) #view .nm-tag { height: 24px; padding: 0 10px; border: 0; border-radius: var(--ds-r-pill); font-size: max(var(--ds-fs-13), var(--t-min, 13px)); font-weight: 700; line-height: 24px; }
body.vt-xuong:not(.vt-kho) #view .nm-tag-khach { background: var(--ds-purple-bg); color: var(--ds-purple); }
body.vt-xuong:not(.vt-kho) #view .nm-tag-sx { background: var(--ds-sunken); color: var(--ds-text-2); }
body.vt-xuong:not(.vt-kho) #view .nm-tuoi { font-size: max(var(--ds-fs-15), var(--t-min, 15px)); font-weight: 600; color: var(--ds-text-3); }
body.vt-xuong:not(.vt-kho) #view .nm-tuoi-canh, body.vt-xuong:not(.vt-kho) #view .nm-tuoi-canh2 { color: var(--ds-dot-amber); }
body.vt-xuong:not(.vt-kho) #view .nm-tuoi-tre { color: var(--ds-danger); }
/* KHÁCH ĐẶT: nền tím rất nhạt, không vạch trái */
body.vt-xuong:not(.vt-kho) #view .xl-the.nm-the-khach { background: var(--ds-purple-soft); box-shadow: var(--ds-shadow), var(--ds-edge); }
body.vt-xuong:not(.vt-kho) #view .xl-the.nm-the-khach .nm-tuoi:not(.nm-tuoi-tre) { color: var(--ds-purple); }
/* chờ lâu / bị chặn: vạch hồng trái (chờ xưởng may, chờ người khác) */
body.vt-xuong:not(.vt-kho) #view .xl-the.nm-the.cho-lau { box-shadow: var(--ds-shadow), inset 4px 0 0 var(--ds-dot-amber); }
body.vt-xuong:not(.vt-kho) #view .nm-kl { display: flex; gap: 8px; align-items: flex-start; width: 100%; padding: 10px 12px; border-radius: var(--ds-r-ctl); background: var(--ds-pink-bg); color: var(--ds-text); font-size: max(var(--ds-fs-15), var(--t-min, 15px)); }
body.vt-xuong:not(.vt-kho) #view .nm-kl i { color: var(--ds-pink); font-size: 20px; }
/* nút trong thẻ: cả bề ngang, 52 px, nền cam nhạt (nút phụ) */
body.vt-xuong:not(.vt-kho) #view .nm-the .xl-nut2 { display: grid; gap: 8px; margin-top: 4px; }
body.vt-xuong:not(.vt-kho) #view .nm-the .xl-nut, body.vt-xuong:not(.vt-kho) #view .nm-the .nm-nut, body.vt-xuong:not(.vt-kho) #view .nm-hang .nm-nut { width: 100%; min-height: max(var(--ds-act-h), var(--t-btn-h, 52px)); margin: 0; border: 0; border-radius: var(--ds-r-ctl); background: var(--ds-tint); color: var(--ds-on-tint); font-size: max(var(--ds-fs-17), var(--t-btn-fs, 17px)); font-weight: 600; box-shadow: none; }
body.vt-xuong:not(.vt-kho) #view .nm-the .xl-nut.xl-khong { background: var(--ds-sunken); color: var(--ds-text-2); }
body.vt-xuong:not(.vt-kho) #view .nm-hang { margin: 0 0 12px; }
/* thẻ lô đang làm: cam đặc, chữ trắng, viên size, nút trắng cả bề ngang (mock-up ĐANG CẮT) */
body.vt-xuong:not(.vt-kho) #view .xl-the.nm-the.nm-job { position: relative; overflow: hidden; padding: 20px 16px 16px; border-radius: 20px; background: var(--ds-primary); color: var(--ds-on-primary); box-shadow: 0 8px 24px rgba(201, 72, 11, .3); }
body.vt-xuong:not(.vt-kho) #view .nm-job::after { content: ""; position: absolute; right: -40px; top: -40px; width: 160px; height: 160px; border-radius: 50%; background: rgba(255, 255, 255, .08); pointer-events: none; }
body.vt-xuong:not(.vt-kho) #view .nm-job .nm-ma, body.vt-xuong:not(.vt-kho) #view .nm-job .nm-sl, body.vt-xuong:not(.vt-kho) #view .nm-job .nm-sl small, body.vt-xuong:not(.vt-kho) #view .nm-job .nm-hang, body.vt-xuong:not(.vt-kho) #view .nm-job .nm-hang .xl-mau, body.vt-xuong:not(.vt-kho) #view .nm-job .nm-d2, body.vt-xuong:not(.vt-kho) #view .nm-job .nm-tuoi, body.vt-xuong:not(.vt-kho) #view .nm-job .xl-luc { color: var(--ds-on-primary); }
body.vt-xuong:not(.vt-kho) #view .nm-job .nm-sl { font-size: var(--ds-fs-30); }
body.vt-xuong:not(.vt-kho) #view .nm-job .nm-tag { background: rgba(255, 255, 255, .18); color: var(--ds-on-primary); }
body.vt-xuong:not(.vt-kho) #view .nm-sz { display: flex; flex-wrap: wrap; gap: 6px; }
body.vt-xuong:not(.vt-kho) #view .nm-sz span { height: 28px; padding: 0 10px; border-radius: 8px; background: rgba(255, 255, 255, .16); font-weight: 700; font-size: max(var(--ds-fs-15), var(--t-min, 15px)); line-height: 28px; font-variant-numeric: tabular-nums; }
body.vt-xuong:not(.vt-kho) #view .nm-job-nut .btn { width: 100%; min-height: max(var(--ds-act-h), var(--t-btn-h, 52px)); border: 0; border-radius: var(--ds-r-ctl); background: #FFFFFF; color: #9A3412; font-size: max(var(--ds-fs-17), var(--t-btn-fs, 17px)); font-weight: 600; display: flex; align-items: center; justify-content: center; }
:root[data-theme="dark"] body.vt-xuong:not(.vt-kho) #view .nm-job-nut .btn { background: #1A0F08; color: #FDBA8C; }
/* thẻ việc trên cùng (quá hạn xác nhận vải, lô đứng lâu) */
body.vt-xuong:not(.vt-kho) #view .xl-top { gap: 6px; padding: 16px; margin: 0 0 24px; border: 0; border-radius: var(--ds-r-card); background: var(--ds-surface); box-shadow: var(--ds-shadow), inset 4px 0 0 var(--ds-dot-amber); }
body.vt-xuong:not(.vt-kho) #view .xl-top.do { box-shadow: var(--ds-shadow), inset 4px 0 0 var(--ds-danger); }
body.vt-xuong:not(.vt-kho) #view .xl-top small { font-size: max(var(--ds-fs-13), var(--t-min, 13px)); color: var(--ds-dot-amber); } body.vt-xuong:not(.vt-kho) #view .xl-top.do small { color: var(--ds-danger); }
body.vt-xuong:not(.vt-kho) #view .xl-top b { font-size: var(--ds-fs-20); }
body.vt-xuong:not(.vt-kho) #view .xl-top-nut { min-height: max(var(--ds-act-h), var(--t-btn-h, 52px)); border: 0; border-radius: var(--ds-r-ctl); background: var(--ds-primary); color: var(--ds-on-primary); font-weight: 600; }
/* dòng lối sang (Đặt may, công cụ phòng cắt) */
body.vt-xuong:not(.vt-kho) #view .xl-dong { border: 0; border-radius: var(--ds-r-card); background: var(--ds-surface); box-shadow: var(--ds-shadow), var(--ds-edge); min-height: 56px; padding: 0 16px; }
/* máy tính: tìm và lô đang làm bên trái, hàng đợi bên phải */
@media (min-width: 1024px) {
  body.vt-xuong:not(.vt-kho) #view .pad.xl { display: grid; grid-template-columns: 5fr 7fr; column-gap: 24px; align-items: start; }
  body.vt-xuong:not(.vt-kho) #view .pad.xl > * { grid-column: 1 / -1; }
  body.vt-xuong:not(.vt-kho) #view .pad.xl > .nm-tim { grid-column: 1; }
  body.vt-xuong:not(.vt-kho) #view #xwrap { display: grid; grid-template-columns: 5fr 7fr; column-gap: 24px; align-items: start; }
  body.vt-xuong:not(.vt-kho) #view #xwrap > * { grid-column: 2; }
  body.vt-xuong:not(.vt-kho) #view #xwrap > .xl-muc[data-k="xm-dang"] { grid-column: 1; grid-row: 1 / span 6; }
}
/* thẻ việc xưởng (nmViecVe, thay chuông): thẻ trắng, vạch vàng trái = đang chờ chị làm; nút cả bề ngang 52 px, nút chính cam đặc, nút phụ cam nhạt */
body.vt-xuong:not(.vt-kho) #view .nm-viec .xl-the { display: grid; gap: 8px; margin: 0 0 12px; padding: 16px; border: 0; border-radius: var(--ds-r-card); background: var(--ds-surface); box-shadow: var(--ds-shadow), inset 4px 0 0 var(--ds-dot-amber); }
body.vt-xuong:not(.vt-kho) #view .nm-viec .xl-d1 { font-size: max(var(--ds-fs-17), var(--t-btn-fs, 17px)); line-height: 1.35; }
body.vt-xuong:not(.vt-kho) #view .nm-viec .xl-d2 { font-size: max(var(--ds-fs-15), var(--t-min, 15px)); color: var(--ds-text-2); }
body.vt-xuong:not(.vt-kho) #view .nm-viec .xl-nut2 { display: grid; gap: 8px; }
body.vt-xuong:not(.vt-kho) #view .nm-viec .btn, body.vt-xuong:not(.vt-kho) #view .nm-viec .nm-nut { width: 100%; min-height: max(var(--ds-act-h), var(--t-btn-h, 52px)); margin: 0; border: 0; border-radius: var(--ds-r-ctl); background: var(--ds-primary); color: var(--ds-on-primary); font-size: max(var(--ds-fs-17), var(--t-btn-fs, 17px)); font-weight: 600; box-shadow: none; }
body.vt-xuong:not(.vt-kho) #view .nm-viec .btn.ghost, body.vt-xuong:not(.vt-kho) #view .nm-viec .nm-nut.ghost { background: var(--ds-tint); color: var(--ds-on-tint); }
body.vt-xuong:not(.vt-kho) #view .nm-viec .xl-the.nm-lech { box-shadow: var(--ds-shadow), inset 4px 0 0 var(--ds-danger); }

/* ================= Văn phòng: dải pastel đầu trang chủ. Trang chủ = #view có lời chào #chao (chaoVe chỉ chèn ở trang chủ của vai); không áp cho xưởng, kho (mock-up khung 4 không có dải) ================= */
body:not(.vt-xuong) #view:has(> #chao, .vh, .v3-dau) { position: relative; }
body:not(.vt-xuong) #view:has(> #chao, .vh, .v3-dau)::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: var(--v3-dau-h, 190px); background: var(--ds-hero); border-radius: 0 0 28px 28px; pointer-events: none; }
body:not(.vt-xuong) #view:has(> #chao, .vh, .v3-dau) > * { position: relative; }
body:not(.vt-xuong) #view:has(> #chao, .vh, .v3-dau) > .bar { top: auto; }   /* điện thoại: .bar cũ dính (top 56) thành relative thì phải bỏ top, không thì đè lên khối dưới */
body:not(.vt-xuong) #view:has(> #chao, .vh, .v3-dau) .chao-1 { font-size: var(--ds-fs-17); color: var(--ds-text); }
body:not(.vt-xuong) #view:has(> #chao, .vh, .v3-dau) .chao-hinh { font-size: 24px; color: var(--ds-primary-text); }
@media (max-width: 767px) { body:not(.vt-xuong) #view:has(> #chao, .vh, .v3-dau)::before { height: var(--v3-dau-h, 330px); } }
@media (min-width: 1024px) { body:not(.vt-xuong) #view:has(> #chao, .vh, .v3-dau)::before { height: var(--v3-dau-h, 190px); } }

/* ================= Chị Bích · Việc hôm nay (viecHomNay) ================= */
/* Làm tiếp: một việc kế tiếp = thẻ cam đặc như "việc đang làm" của mock-up, nút trắng */
#view .vh .bv-lamtiep { position: relative; overflow: hidden; display: grid; gap: 8px; padding: 20px 16px 16px; margin: 0 0 16px; border: 0; border-radius: 20px; background: var(--ds-primary); color: var(--ds-on-primary); box-shadow: 0 8px 24px rgba(201, 72, 11, .3); }
#view .vh .bv-lamtiep::after { content: ""; position: absolute; right: -40px; top: -40px; width: 160px; height: 160px; border-radius: 50%; background: rgba(255, 255, 255, .08); pointer-events: none; }
#view .vh .bv-lamtiep small { color: var(--ds-on-primary); opacity: .9; font-size: var(--ds-fs-13); font-weight: 700; letter-spacing: .04em; }
#view .vh .bv-lamtiep .bv-lt-chu, #view .vh .bv-lamtiep .bv-lt-chu * { color: var(--ds-on-primary); }
#view .vh .bv-lamtiep .bv-lt-chu b, #view .vh .bv-lamtiep .bv-lt-chu strong { font-size: var(--ds-fs-20); }
#view .vh .bv-lamtiep .btn { width: 100%; min-height: max(52px, var(--t-btn-h, 52px)); background: #FFFFFF; color: #9A3412; border: 0; position: relative; z-index: 1; }
:root[data-theme="dark"] #view .vh .bv-lamtiep .btn { background: #1A0F08; color: #FDBA8C; }
#view .vh .bv-tong { font-size: var(--t-text, 17px); color: var(--ds-text-body); margin: 0 0 12px; }
/* bốn ô đếm: thẻ trắng, số to */
#view .vh .bv-dem { gap: 12px; margin: 0 0 24px; }
#view .vh .bv-o { padding: 14px 16px; border: 0; border-radius: var(--ds-r-card); background: var(--ds-surface); box-shadow: var(--ds-shadow), var(--ds-edge); text-align: left; }
#view .vh .bv-o:hover { box-shadow: var(--ds-shadow-lift), var(--ds-edge); }
#view .vh .bv-o b { font-size: var(--ds-fs-30); font-weight: 700; color: var(--ds-text); }
/* các khối việc: thẻ bo 16, tiêu đề 20 đậm, dòng cách bằng đường mảnh, nút viên */
#view .vh .bv-khoi { padding: 16px 16px 4px; margin: 0 0 16px; border: 0; border-radius: var(--ds-r-card); background: var(--ds-surface); box-shadow: var(--ds-shadow), var(--ds-edge); }
#view .vh .bv-khoi h2 { margin: 0 0 4px; font-size: var(--ds-fs-20); font-weight: 700; color: var(--ds-text); letter-spacing: 0; }
#view .vh .bv-khoi .bv-nhom { font-size: max(var(--ds-fs-15), var(--t-min, 15px)); color: var(--ds-text-2); }
#view .vh .bv-dong { padding: 14px 0; border-top: 1px solid var(--ds-hairline); }
#view .vh .bv-dong .btn { min-height: 40px; border-radius: var(--ds-r-pill); padding: 0 16px; }
#view .vh .bv-dong .btn:not(.ghost):not(.trong) { background: var(--ds-primary); }
#view .vh .vh-khac { border: 0; border-radius: var(--ds-r-card); background: var(--ds-surface); box-shadow: var(--ds-shadow), var(--ds-edge); padding: 12px 16px; margin: 0 0 12px; }
#view .vh .vh-khac summary { font-weight: 600; color: var(--ds-text-2); cursor: pointer; }
#view .vh .xg-1dong { padding: 12px 16px; border-radius: var(--ds-r-ctl); background: var(--ds-sky-bg); color: var(--ds-text); }
#view .vh .bv-tuan { box-shadow: var(--ds-shadow), var(--ds-edge); }

/* ================= Hường, Vy · Đặt hàng (datHangCH, mock-up khung 2) ================= */
/* ô tìm: nền xám, icon không đè chữ */
#view .cht-pad .dh-tim { position: relative; display: flex; align-items: center; margin: 0 0 16px; }
#view .cht-pad .dh-tim > i { position: absolute; left: 14px; font-size: 20px; color: var(--ds-text-3); pointer-events: none; z-index: 1; }
#view .cht-pad .dh-tim .linput { padding-left: 44px; min-height: 48px; }
/* chip lọc: viên, đang chọn nền cam nhạt chữ cam (App gợi ý 121) */
#view .cht-pad .cchip { min-height: 36px; padding: 0 14px; border: 0; border-radius: var(--ds-r-pill); background: var(--ds-surface); color: var(--ds-text); font-weight: 600; box-shadow: var(--ds-shadow), var(--ds-edge); }
#view .cht-pad .cchip.on { background: var(--ds-tint); color: var(--ds-primary-text); box-shadow: none; }
#view .cht-pad .dh-kieu { display: inline-flex; gap: 4px; padding: 4px; border-radius: var(--ds-r-ctl); background: var(--ds-sunken); }
#view .cht-pad .dh-kieu .cchip { box-shadow: none; background: transparent; color: var(--ds-text-2); border-radius: 9px; }
#view .cht-pad .dh-kieu .cchip.on { background: var(--ds-surface); color: var(--ds-text); box-shadow: var(--ds-shadow), var(--ds-edge); }
/* ba luồng: thẻ trắng, số to, icon trên nền pastel theo nghĩa (kho tổng mint, cửa hàng khác sky, xưởng may hồng) */
#view .cht-pad .dh-lgs { gap: 8px; }
#view .cht-pad .dh-lg { border: 0; border-radius: var(--ds-r-card); background: var(--ds-surface); box-shadow: var(--ds-shadow), var(--ds-edge); padding: 12px; }
#view .cht-pad .dh-lg .dh-lg-i, #view .cht-pad .dh-lg > i { color: var(--ds-text-2); }
#view .cht-pad .dh-lg.lg-kho { box-shadow: var(--ds-shadow), inset 0 3px 0 var(--ds-mint); }
#view .cht-pad .dh-lg.lg-ch { box-shadow: var(--ds-shadow), inset 0 3px 0 var(--ds-sky); }
#view .cht-pad .dh-lg.lg-xuong { box-shadow: var(--ds-shadow), inset 0 3px 0 var(--ds-pink); }
/* thẻ sản phẩm: thẻ trắng bo 16, ảnh sát mép trên trên nền pastel, mã đậm + màu thường, dòng tình hình có chấm, bước số trừ xám cộng cam */
#view .cht-pad .dh-luoi { gap: 12px; }
#view .cht-pad .dh-g { display: flex; flex-direction: column; gap: 6px; padding: 0 0 12px; border: 0; border-radius: var(--ds-r-card); background: var(--ds-surface); box-shadow: var(--ds-shadow), var(--ds-edge); overflow: hidden; }
#view .cht-pad .dh-g > .dh-anh { width: 100%; aspect-ratio: 4 / 5; height: auto; margin: 0; border: 0; border-radius: 0; }
#view .cht-pad .dh-g > .dh-anh img { object-fit: cover; }
#view .cht-pad .dh-g > :not(.dh-anh) { margin-left: 12px; margin-right: 12px; }
#view .cht-pad .dh-g-tt { text-align: left; padding: 4px 0 0; background: none; border: 0; }
#view .cht-pad .dh-g-tt b { font-size: var(--ds-fs-17); font-weight: 700; color: var(--ds-text); }
#view .cht-pad .dh-g-tt small { display: block; font-size: var(--ds-fs-15); font-weight: 400; color: var(--ds-text-2); }
#view .cht-pad .dh-ng { display: flex; gap: 6px; align-items: baseline; font-size: 14px; line-height: 20px; color: var(--ds-text-body); }
#view .cht-pad .dh-ng > i { display: none; }
#view .cht-pad .dh-ng::before { content: ""; width: 8px; height: 8px; border-radius: 50%; flex: none; transform: translateY(-1px); background: var(--ds-text-3); }
#view .cht-pad .dh-ng b { font-weight: 700; }
#view .cht-pad .dh-ng.ng-kho::before { background: var(--ds-mint); } #view .cht-pad .dh-ng.ng-kho b { color: var(--ds-mint); }
#view .cht-pad .dh-ng.ng-ch::before, #view .cht-pad .dh-ng.ng-diem::before { background: var(--ds-sky); } #view .cht-pad .dh-ng.ng-ch b, #view .cht-pad .dh-ng.ng-diem b { color: var(--ds-sky); }
#view .cht-pad .dh-ng.ng-xuong::before { background: var(--ds-pink); } #view .cht-pad .dh-ng.ng-xuong b { color: var(--ds-pink); }
#view .cht-pad .dh-ng.ng-mua::before { background: var(--ds-dot-amber); }
#view .cht-pad .dh-ng .btn { border-radius: var(--ds-r-ctl); }
#view .cht-pad .dh-step { display: flex; align-items: center; justify-content: space-between; gap: 4px; margin-top: auto; padding-top: 6px; border: 0; background: none; }
#view .cht-pad .dh-step .dh-b { min-width: 40px; width: auto; padding: 0 10px; height: 40px; min-height: 40px; border: 0; border-radius: var(--ds-r-ctl); background: var(--ds-sunken); color: var(--ds-text-2); font-size: 22px; font-weight: 600; }
#view .cht-pad .dh-step .dh-b:last-child { background: var(--ds-primary); color: var(--ds-on-primary); }
#view .cht-pad .dh-step .dh-n { flex: 1; min-height: 40px; border: 0; background: none; font-size: var(--ds-fs-20); font-weight: 700; color: var(--ds-text); font-variant-numeric: tabular-nums; }
#view .cht-pad .dh-step .dh-n.goi { color: var(--ds-text-3); }
/* Hay bán: cùng kiểu thẻ */
#view .cht-pad .dh-hay .dh-h2, #view .cht-pad .dh-h2 { font-size: var(--ds-fs-20); font-weight: 700; color: var(--ds-text); }
#view .cht-pad .dh-hay-ds > * { border: 0; border-radius: var(--ds-r-card); background: var(--ds-surface); box-shadow: var(--ds-shadow), var(--ds-edge); overflow: hidden; }
#view .cht-pad .dh-g .btn[onclick*="Dieu"], #view .cht-pad .dh-g .btn[onclick*="dieu"] { width: 100%; background: var(--ds-sky-bg); color: var(--ds-sky); box-shadow: inset 0 0 0 1.5px var(--ds-sky-line); }   /* điều hàng qua: viền sky như mock-up */

/* ================= Hường, Vy · Hàng về (hangVeCH, mock-up khung 3) ================= */
/* bốn trạng thái: nút chọn xám, ô đang chọn trắng */
#view .cht-pad .hv2-seg { display: flex; gap: 4px; padding: 4px; margin: 0 0 16px; border: 0; border-radius: var(--ds-r-ctl); background: var(--ds-sunken); overflow-x: auto; scrollbar-width: none; }
#view .cht-pad .hv2-seg .hv-c { flex: 1 0 auto; min-height: 40px; padding: 0 12px; border: 0; border-radius: 9px; background: transparent; color: var(--ds-text-2); font-weight: 600; white-space: nowrap; box-shadow: none; }
#view .cht-pad .hv2-seg .hv-c.on { background: var(--ds-surface); color: var(--ds-text); box-shadow: var(--ds-shadow), var(--ds-edge); }
/* mỗi ngày về là một thẻ: đầu cam nhạt (ngày, số mã, số sp), dòng mẫu cách bằng đường mảnh, số sp to bên phải */
#view .cht-pad .hv2-ngay { margin: 0 0 16px; border: 0; border-radius: var(--ds-r-card); background: var(--ds-surface); box-shadow: var(--ds-shadow), var(--ds-edge); overflow: hidden; }
#view .cht-pad .hv2-ngay > h3 { position: static; top: auto; display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin: 0; padding: 14px 16px; background: var(--ds-tint-soft); font-size: var(--ds-fs-20); font-weight: 700; color: var(--ds-text); }
#view .cht-pad .hv2-ngay > h3 small, #view .cht-pad .hv2-ngay > h3 span { font-size: var(--ds-fs-15); font-weight: 400; color: var(--ds-text-2); }
#view .cht-pad .hv2-r { margin: 0; padding: 14px 16px; border: 0; border-top: 1px solid var(--ds-hairline); border-radius: 0; background: transparent; box-shadow: none; }
#view .cht-pad .hv2-ngay > h3 + .hv2-r { border-top: 0; }
#view .cht-pad .hv2-tt { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
#view .cht-pad .hv2-tt > b { flex: 1 1 60%; font-size: var(--ds-fs-17); font-weight: 700; color: var(--ds-text); }
#view .cht-pad .hv2-tt > b span { font-weight: 400; color: var(--ds-text-2); }
#view .cht-pad .hv2-sl { margin-left: auto; font-size: var(--ds-fs-20); font-weight: 700; color: var(--ds-text); font-variant-numeric: tabular-nums; white-space: nowrap; }
#view .cht-pad .hv2-sz { margin: 4px 0 0; font-size: var(--ds-fs-15); color: var(--ds-text-2); font-variant-numeric: tabular-nums; }
#view .cht-pad .hv2-buoc { margin: 6px 0 0; display: flex; align-items: center; gap: 8px; font-size: var(--ds-fs-15); color: var(--ds-text-body); }
#view .cht-pad .hv2-buoc::before { content: ""; width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--ds-pink); }   /* đang ở xưởng: chờ xưởng may = hồng */
#view .cht-pad .hv2-buoc .chip { min-height: 22px; font-size: var(--ds-fs-13); }
#view .cht-pad .hv2-loc { display: flex; gap: 8px; margin: 0 0 16px; }

/* ================= Chị Hà · Trang chủ (chuHome, chỉ xem): dải pastel, ô tìm lớn trắng, bốn ô số thẻ bo 16 với ô icon pastel. Giữ chữ to của vai (body.vt-chu) ================= */
#view:has(.chu-home) { position: relative; }
#view:has(.chu-home)::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 220px; background: var(--ds-hero); border-radius: 0 0 28px 28px; pointer-events: none; }
#view:has(.chu-home) > * { position: relative; }
#view .chu-home .chu-chao h1 { font-size: 30px; font-weight: 700; letter-spacing: -.015em; color: var(--ds-text); }
#view .chu-home .chu-chao p { color: var(--ds-text-2); }
#view .chu-home .chu-tim input { border: 0; border-radius: var(--ds-r-card); background: var(--ds-surface); box-shadow: var(--ds-shadow), var(--ds-edge); }
#view .chu-home .chu-tim input:focus { box-shadow: 0 0 0 3px var(--ds-primary); }
#view .chu-home .chu-os { gap: 12px; margin-top: 24px; }
#view .chu-home .chu-o { border: 0; border-radius: var(--ds-r-card); background: var(--ds-surface); box-shadow: var(--ds-shadow), var(--ds-edge); color: var(--ds-text); text-decoration: none; }
#view .chu-home .chu-o:hover { box-shadow: var(--ds-shadow-lift), var(--ds-edge); }
#view .chu-home .chu-o > i { width: 52px; height: 52px; border-radius: var(--ds-r-card); display: grid; place-items: center; font-size: 26px; grid-row: 1 / span 2; background: var(--ds-tint); color: var(--ds-on-tint); }
#view .chu-home .chu-o:nth-child(2) > i { background: var(--ds-mint-bg); color: var(--ds-mint); }      /* sổ vải: tồn kho */
#view .chu-home .chu-o:nth-child(4) > i { background: var(--ds-pink-bg); color: var(--ds-pink); }      /* xưởng */
#view .chu-home .chu-o-so b { font-size: 28px; font-variant-numeric: tabular-nums; }
#view .chu-home .chu-ghi { color: var(--ds-text-3); }
@media (min-width: 1024px) { #view .chu-home .chu-os { grid-template-columns: repeat(4, minmax(0, 1fr)); } #view .chu-home .chu-o { grid-template-columns: 1fr; } #view .chu-home .chu-o > i { grid-row: auto; } }
/* Hường, Vy · Hàng về: mã nội bộ BG-, DH- không hiện trên thẻ (Anna 02/11 đồng ý; brief §3) */
#view .cht-pad .hv2-tt > small { display: none; }
/* Hôm nay cửa hàng: ba khối từ số thật (hàng đang tới, Hay bán sắp hết, doanh thu 8 tuần) */
.hn3 .hn-toi { margin: 0 0 24px; display: grid; gap: 12px; }
.hn3 .hn-toi > * + * { margin-top: 0; }
.hn3 .hn-toi-dau { display: flex; align-items: center; gap: 8px; }
.hn3 .hn-toi-ngay { font-size: var(--ds-fs-20); font-weight: 700; color: var(--ds-text); }
.hn3 .hn-toi .ds-btn-text { min-height: 24px; padding: 0; }
.hn3 .hn-hay { margin: 24px 0; }
.hn3 .hn-hay .ds-sec-h { margin: 0 0 12px; }
.hn3 .hn-hay .ds-pcard { text-decoration: none; min-width: 0; }
#view .hn3 .hn-hay .hn-hay-anh { flex: none; display: block; position: relative; width: 100%; aspect-ratio: 4 / 5; height: auto; min-height: 0; max-height: none; margin: 0; border: 0; border-radius: 0; pointer-events: none; overflow: hidden; }
#view .hn3 .hn-hay .hn-hay-anh img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hn3 .hn-hay .ds-pc-phu { font-size: var(--ds-fs-13); }
.hn3 .hn-8t { display: grid; gap: 8px; margin: 0 0 16px; text-decoration: none; color: var(--ds-text); }
.hn3 .hn-8t > * + * { margin-top: 0; }
.hn3 .ds-delta.giam { color: var(--ds-dot-amber); }
@media (min-width: 1024px) {
  .hn3 #hnwrap > .hn-toi { grid-column: 1 / span 7; }
  .hn3 #hnwrap > .hn-hay { grid-column: 1 / -1; }
  .hn3 #hnwrap > .hn-8t { grid-column: 8 / span 5; grid-row: 3 / span 2; margin-top: 40px; align-self: start; }
  .hn3 #hnwrap > .hn-so { grid-row: auto; margin-top: 0; }
}