/* App Công nhân kiểu Metro (#264, mockup đã chốt 13/10/2026): dùng lại toàn bộ khối .wm-metro của app Thủ kho
   (warehouse-mobile-metro.css), ở đây chỉ có phần riêng của xưởng. */

body.worker-mode .app-shell,
body.worker-mode .floating-actions-container,
body.worker-mode .business-cache-readonly-banner { display: none !important; }
/* Chat nội bộ / POP Nexus mở từ nút góc trên phải (như app thủ kho): chỉ hiện cửa sổ đang mở, đè lên app; ẩn các bong bóng mở. */
body.worker-mode .floating-actions-container:has(.internal-chat-root.is-open, .pop-nexus-launcher.is-open) { display: flex !important; z-index: 2147482600; }
body.worker-mode .floating-actions-container :is(.internal-chat-launcher, .pop-nexus-launcher) { display: none !important; }
body.worker-mode .floating-actions-container .internal-chat-root:not(.is-open),
body.worker-mode .floating-actions-container .pop-nexus-root:not(:has(.pop-nexus-launcher.is-open)) { display: none !important; }
.wm-root.wk-metro .wk-native-file { display: none; }
.wm-root.wk-metro .wm-tile.wide .wm-tile-name small { font-size: clamp(12px, calc(var(--wm-sq) * .075), 15px); }
.wm-root.wk-metro .wm-q > .wm-i { width: 30px; height: 30px; stroke-width: 2.6; }
.wm-root.wk-metro .wm-q em { white-space: nowrap; }
.wm-root.wk-metro .wm-mrow.off { opacity: .55; }
.wm-root.wk-metro .wk-step-row .wm-q { flex-basis: 64px; }
.wm-root.wk-metro .wk-step-row .wm-q b { font-size: 28px; }
.wm-root.wk-metro .wm-q.none { --k: var(--wm-k-none); }
.wm-root.wk-metro .wk-reply { color: var(--wm-k-rec-t) !important; font-weight: 600; }
/* Nhãn trạng thái vuông (Metro không bo góc) */
.wm-root.wk-metro .wk-pill { display: inline-block; padding: 2px 8px; color: #fff; font-size: 13px; font-weight: 700; background: var(--wm-k-done); }
.wm-root.wk-metro .wm-dhead .wk-pill { margin-bottom: 8px; }
.wm-root.wk-metro .wk-pill.ok { background: var(--wm-k-rec); }
.wm-root.wk-metro .wk-pill.wait { background: var(--wm-k-qc); }
.wm-root.wk-metro .wk-pill.no { background: var(--wm-k-adv); }
.wm-root.wk-metro .wk-pill.info { background: var(--wm-k-int); }
/* Ba ô số của lệnh: Đã đạt | Còn phải làm | Lỗi/hỏng */
.wm-root.wk-metro .wk-qty3 .good { --k: var(--wm-k-rec-t); }
.wm-root.wk-metro .wk-qty3 .left { --k: var(--wm-k-find); }
.wm-root.wk-metro .wk-qty3 .bad { --k: var(--wm-k-adv-t); }
.wm-root.wk-metro .wk-qty3 .bad.none { --k: var(--wm-k-none); }
.wm-root.wk-metro .wk-bar { position: relative; height: 28px; margin-top: 6px; background: var(--bms-surface); }
.wm-root.wk-metro .wk-bar i { position: absolute; inset: 0 auto 0 0; background: color-mix(in srgb, var(--wm-k-rec) 30%, var(--bms-surface)); }
.wm-root.wk-metro .wk-bar span { position: relative; display: block; padding: 0 10px; font-size: 15px; font-weight: 700; line-height: 28px; color: var(--bms-text); }
/* Bộ đếm số lượng lớn */
.wm-root.wk-metro .wk-count { margin-top: 6px; }
.wm-root.wk-metro .wk-count .wm-qset { display: grid; grid-template-columns: 56px minmax(0, 1fr) 56px; gap: 4px; margin-top: 6px; }
.wm-root.wk-metro .wk-count .wm-qset button { width: auto; height: 56px; font-size: 28px; }
.wm-root.wk-metro .wk-count .wm-qset input { width: 100%; height: 56px; font-size: 26px; }
.wm-root.wk-metro .wk-count.big .wm-qset { grid-template-columns: 76px minmax(0, 1fr) 76px; }
.wm-root.wk-metro .wk-count.big .wm-qset button { height: 76px; font-size: 36px; background: var(--k); color: var(--wm-on-k); }
.wm-root.wk-metro .wk-count.big .wm-qset input { height: 76px; font: 300 44px/1 var(--bms-font-ui); }
.wm-root.wk-metro .wk-two { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.wm-root.wk-metro .wk-two .wk-count .wm-qset { grid-template-columns: 44px minmax(0, 1fr) 44px; }
/* Ô chọn (lý do, loại, mức độ, ngày) */
.wm-root.wk-metro .wk-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 6px; }
.wm-root.wk-metro .wk-choices.three { grid-template-columns: repeat(3, 1fr); }
.wm-root.wk-metro .wk-choices.four { grid-template-columns: repeat(4, 1fr); }
.wm-root.wk-metro .wk-choices.four .wk-choice { text-align: center; }
.wm-root.wk-metro .wk-choices.col { grid-template-columns: 1fr; }
.wm-root.wk-metro .wk-choice { min-height: 56px; padding: 8px 10px; border: 2px solid var(--bms-border); border-radius: 0; background: var(--bms-surface); color: var(--bms-text); font-size: 16px; font-weight: 600; text-align: left; white-space: pre-line; line-height: 1.25; }
.wm-root.wk-metro .wk-choice.on { border-color: var(--k); background: var(--k); color: var(--wm-on-k); }
.wm-root.wk-metro .wk-choices.red .wk-choice.on { --k: var(--wm-k-adv); }
.wm-root.wk-metro .wk-photo-tile { width: 100%; min-height: 64px; display: flex; align-items: center; gap: 12px; margin-top: 12px; padding: 0 14px; border: 2px dashed var(--bms-border-strong, #9aa3b2); border-radius: 0; background: var(--bms-surface); color: var(--bms-text); font-size: 16px; font-weight: 600; text-align: left; }
.wm-root.wk-metro .wk-photo-tile .wm-i { width: 28px; height: 28px; }
.wm-root.wk-metro .wk-photo-tile.on { border-style: solid; border-color: var(--wm-k-find); background: var(--wm-k-find); color: #fff; }
.wm-root.wk-metro .wm-toast.ok { background: var(--wm-k-rec-t); color: #fff; }
.wm-root.wk-metro .wm-wide .wm-i { width: 22px; height: 22px; vertical-align: -4px; stroke-width: 2.6; }
/* Việc của tôi v6: một việc, nút ngay trong ô (không mở màn bên trong) */
.wm-root.wk-metro .wm-tile.wide.wk-jobtile { display: flex; flex-direction: column; justify-content: space-between; align-items: stretch; gap: 8px; padding: 12px 14px; }
.wm-root.wk-metro .wk-jobtile.paused { background: var(--wm-k-adv); }
.wm-root.wk-metro .wk-jt-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.wm-root.wk-metro .wk-jt-label { display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 700; opacity: .95; }
.wm-root.wk-metro .wk-jt-label .wm-i { width: 20px; height: 20px; stroke-width: 2; }
.wm-root.wk-metro .wk-jt-step { font: 400 clamp(26px, calc(var(--wm-sq) * .2), 34px)/1.1 var(--bms-font-ui); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wm-root.wk-metro .wk-jt-sub { font-size: 14.5px; font-weight: 600; opacity: .92; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wm-root.wk-metro .wk-jt-btn { border-left: 0; width: 100%; min-height: 52px; display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 19px; box-shadow: inset 0 0 0 2px rgba(255,255,255,.55); }
.wm-root.wk-metro .wk-jt-btn .wm-i { width: 22px; height: 22px; stroke-width: 2.2; }
.wm-root.wk-metro .wk-jt-picks { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; flex: 1 1 auto; }
.wm-root.wk-metro .wk-jt-picks button { min-height: 40px; border: 0; border-radius: 0; background: #fff; color: var(--wm-k-adv); font: 700 15px/1.1 var(--bms-font-ui); }
.wm-root.wk-metro .wk-jt-cancel { min-height: 32px; border: 0; background: transparent; color: #fff; font: 600 14px/1 var(--bms-font-ui); text-decoration: underline; }
/* Cập nhật sự kiện (v6): cùng loại với form "✎ Cập nhật" tab Sản xuất */
.wm-root.wk-metro .wk-choice:disabled { opacity: .45; cursor: not-allowed; }
/* Hoàn tác ngay trên nút chính (v8) */
.wm-root.wk-metro .wk-undo-main { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.wm-root.wk-metro .wk-jt-actions { display: grid; gap: 6px; }
.wm-root.wk-metro .wk-stick { position: sticky; bottom: -74px; z-index: 1; display: grid; gap: 6px; margin-top: 10px; background: var(--bms-canvas); box-shadow: 0 0 0 6px var(--bms-canvas), 0 18px 0 6px var(--bms-canvas); }
.wm-root.wk-metro .wk-stick .wm-wide[data-wm-stick] { position: static; margin-top: 0; box-shadow: none; }
.wm-root.wk-metro .wk-jobtile .wk-jt-btn:disabled { opacity: .8; }
.wm-root.wk-metro .wk-jt-actions { min-width: 0; grid-template-columns: minmax(0, 1fr); }

/* Cập nhật sự kiện gọn (v11): một hàng tab, ô phụ gập, ảnh cạnh ô nội dung */
.wm-root.wk-metro .wk-evtabs { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; margin-top: 4px; }
.wm-root.wk-metro .wk-evtabs .wk-choice { min-height: 68px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 6px 4px; text-align: center; font: 700 13px/1.15 var(--bms-font-ui); }
.wm-root.wk-metro .wk-evtabs .wk-choice .wm-i { width: 22px; height: 22px; stroke-width: 2.2; }
.wm-root.wk-metro .wk-evtabs .wk-choice:not(.on) .wm-i { color: var(--kt); }
.wm-root.wk-metro .wk-evtabs .wk-choice.on { background: var(--k); border-color: var(--k); color: #fff; }
.wm-root.wk-metro .wk-compose { display: grid; grid-template-columns: minmax(0, 1fr) 72px; gap: 6px; margin-top: 12px; align-items: stretch; }
.wm-root.wk-metro .wk-compose.solo { grid-template-columns: minmax(0, 1fr); }
.wm-root.wk-metro .wk-compose .wm-fin { margin-top: 0; }
.wm-root.wk-metro .wk-compose .wk-photo-tile { width: auto; min-height: 0; margin-top: 0; flex-direction: column; justify-content: center; gap: 4px; padding: 6px 4px; font-size: 13px; text-align: center; }
.wm-root.wk-metro .wk-more { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 14px; text-align: left; font-size: 16px; }
.wm-root.wk-metro .wk-more .wm-i { width: 20px; height: 20px; vertical-align: -4px; }
.wm-root.wk-metro .wk-check { width: 100%; min-height: 56px; margin-top: 8px; border: 0; text-align: left; color: inherit; }
.wm-root.wk-metro .wk-picked { width: 100%; border: 0; text-align: left; margin-top: 6px; }


/* v17 · Hoàn tác nằm trên chính nút vừa bấm: nút đổi màu tối, đếm ngược, cùng chỗ cùng cỡ */
.wm-root.wk-metro button.wk-undo-btn[data-wk-undo] { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 14px; border: 0; border-radius: 0; background: var(--bms-text); color: var(--bms-surface); text-align: left; font: 700 18px/1.1 var(--bms-font-ui); opacity: 1; cursor: pointer; }
.wm-root.wk-metro button.wk-undo-btn.small[data-wk-undo] { justify-content: center; gap: 4px; padding: 0 6px; font-size: 14px; white-space: nowrap; }
.wm-root.wk-metro .wk-undo-btn .wk-undo-main { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.wm-root.wk-metro .wk-undo-btn .wk-undo-n { display: inline-block; min-width: 1.4em; padding: 2px 5px; background: var(--bms-surface); color: var(--bms-text); text-align: center; font-weight: 800; line-height: 1.2; }
.wm-root.wk-metro .wk-undo-btn.small .wk-undo-main { gap: 5px; }
.wm-root.wk-metro .wk-undo-btn .wm-i { width: 22px; height: 22px; stroke-width: 2.4; }
.wm-root.wk-metro .wk-undo-btn.small .wm-i { width: 18px; height: 18px; }
.wm-root.wk-metro .wk-undo-btn small { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 600; opacity: .8; }
.wm-root.wk-metro .wm-mrow > .wm-act[data-wk-act^="take"], .wm-root.wk-metro .wm-mrow > .wm-act.wk-choose, .wm-root.wk-metro .wm-mrow > button.wk-undo-btn.small[data-wk-undo] { flex: 0 0 112px; min-width: 112px; padding: 0 6px; border-left: 2px solid var(--bms-surface); }

/* v17 · Máy thấp (ô Việc của tôi thấp hơn 206px, tức lưới thấp hơn 848px): nút chính sang phải tên việc để không bị cắt.
   Truy vấn theo lưới .wm-tiles (đã là container). Ô cao = (cao lưới − 24) / 4. */
@container (max-height: 847px) {
  .wm-root.wk-metro .wm-tile.wide.wk-jobtile:not(.picking):not(.zero) { display: grid; grid-template-columns: minmax(0, 1fr) 128px; grid-template-rows: auto auto auto minmax(0, 1fr) auto; column-gap: 10px; row-gap: 2px; padding: 10px 12px; align-content: stretch; }
  .wm-root.wk-metro .wk-jobtile:not(.picking) .wk-jt-text { display: contents; }
  .wm-root.wk-metro .wk-jobtile .wk-jt-label { grid-column: 1 / -1; grid-row: 1; margin-bottom: 2px; }
  .wm-root.wk-metro .wk-jobtile .wk-jt-step { grid-column: 1; grid-row: 2; font-size: clamp(24px, calc(var(--wm-sq) * .17), 30px); }
  .wm-root.wk-metro .wk-jobtile .wk-jt-sub { grid-column: 1; grid-row: 3; font-size: 13.5px; }
  .wm-root.wk-metro .wk-jobtile:not(.picking) .wk-jt-actions { grid-column: 2; grid-row: 2 / 5; align-self: stretch; }
  .wm-root.wk-metro .wk-jobtile .wk-jt-btn { min-height: 0; height: 100%; padding: 0 8px; font-size: 17px; }
  .wm-root.wk-metro .wk-jobtile button.wk-undo-btn.wk-jt-btn[data-wk-undo] { flex-direction: column; justify-content: center; align-items: stretch; gap: 3px; padding: 0 8px; font-size: 16px; text-align: center; }
  .wm-root.wk-metro .wk-jobtile .wk-undo-btn .wk-undo-main { justify-content: center; gap: 5px; }
  .wm-root.wk-metro .wk-jobtile .wk-undo-btn .wm-i { width: 18px; height: 18px; }
  .wm-root.wk-metro .wk-jobtile .wk-undo-btn small { font-size: 12px; }
  .wm-root.wk-metro .wk-jobtile.picking { gap: 6px; padding: 10px 12px; }
  .wm-root.wk-metro .wk-jobtile.picking .wk-jt-picks { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; flex: 0 0 auto; }
  .wm-root.wk-metro .wk-jobtile.picking .wk-jt-picks button { min-height: 48px; padding: 2px 3px; font-size: 13.5px; line-height: 1.15; }
}

/* v18 · Nút Hoàn tác: thanh sáng chạy dần từ trái sang phải trong 5 giây, chạy hết thì ghi nhận. */
.wm-root.wk-metro button.wk-undo-btn[data-wk-undo] { overflow: hidden; isolation: isolate; }
.wm-root.wk-metro button.wk-undo-btn[data-wk-undo]:not([data-wm-stick]) { position: relative; }
.wm-root.wk-metro button.wk-undo-btn[data-wk-undo]::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(255, 255, 255, .26); transform: scaleX(0); transform-origin: left center; animation: wk-undo-fill var(--wk-undo-ms, 5000ms) linear var(--wk-undo-at, 0ms) forwards; }
@keyframes wk-undo-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* v19 · Nút "Đã xong việc" trong hàng lý do dừng: màu xanh, mở Cập nhật sự kiện › Xong công đoạn */
.wm-root.wk-metro .wk-jt-picks button.done { display: inline-flex; align-items: center; justify-content: center; gap: 6px; background: var(--wm-k-rec); color: #fff; box-shadow: inset 0 0 0 2px #fff; }
.wm-root.wk-metro .wk-jt-picks button.done .wm-i { width: 18px; height: 18px; stroke-width: 2.6; flex: none; }
@container (max-height: 847px) {
  .wm-root.wk-metro .wk-jobtile.picking .wk-jt-picks button.done .wm-i { display: none; }
}

/* v21 · Việc chung là chỗ đổi việc: nút Chọn (cùng cỡ nút Nhận cũ) và nhãn "Đang chọn" cho việc đang hiện ở ô Việc của tôi */
.wm-root.wk-metro .wm-mrow > .wk-here { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; gap: 4px; align-self: stretch; padding: 0 12px; white-space: nowrap; color: var(--bms-text-muted); font: 700 15px/1.2 var(--bms-font-ui); }
.wm-root.wk-metro .wm-mrow > .wk-here .wm-i { width: 18px; height: 18px; stroke-width: 2.6; }
/* Tổ trưởng giao việc trong tổ (Việc chung): dải chọn người ngay dưới dòng công đoạn. */
.wm-root.wk-metro .wk-assign-picks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; margin: -2px 0 8px; padding: 6px; background: var(--wm-k-int); }
.wm-root.wk-metro .wk-assign-picks button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 48px; padding: 4px 8px; border: 0; border-radius: 0; background: #fff; color: var(--bms-text); font: 700 15px/1.15 var(--bms-font-ui); text-align: center; }
.wm-root.wk-metro .wk-assign-picks button.on { background: var(--bms-text); color: #fff; }
.wm-root.wk-metro .wk-assign-picks .wm-i { width: 18px; height: 18px; stroke-width: 2.6; }
/* Máy thấp: chữ dưới "Hoàn tác N" trên nút chính được 2 dòng, không bị cắt mất tên việc */
@container (max-height: 847px) {
  .wm-root.wk-metro .wk-jobtile .wk-undo-btn small { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; white-space: normal; text-overflow: clip; line-height: 1.2; overflow-wrap: anywhere; }
}

/* Ô của phần làm ở bước sau (Bản vẽ, Báo cáo 5S, Báo cơm, Xin nghỉ): hiện đúng chỗ trong lưới nhưng mờ, chưa mở được. */
.wm-root.wk-metro .wm-tile.wk-soon, .wm-root.wk-metro .wm-mini.wk-soon { opacity: .55; }

/* Chấm công bằng vị trí (mockup v29, chốt 14/10/2026): Thông báo lên ô vuông đầu trang chủ (cột 6), tên xưởng cột 2–5. */
.wm-root.wk-metro .wm-mhead.home .wm-who { grid-column: 2 / span 4; }
.wm-root.wk-metro .wm-mhead.home .wm-sq.news { grid-column: 6; position: relative; background: var(--wm-k-iss); }
.wm-root.wk-metro .wk-sq-badge { position: absolute; top: 2px; right: 2px; min-width: 16px; height: 16px; padding: 0 3px; box-sizing: border-box; border-radius: 8px; background: #fff; color: var(--wm-k-iss); font: 800 11px/16px var(--bms-font-ui); text-align: center; }
.wm-root.wk-metro .wk-att-tile b { font-variant-numeric: tabular-nums; }
.wm-root.wk-metro .wk-att-loc { display: flex; align-items: center; gap: 12px; margin: 0 0 8px; padding: 12px 12px 12px 14px; background: var(--bms-surface); border-left: 6px solid var(--wm-k-done); }
.wm-root.wk-metro .wk-att-loc.ok { border-left-color: var(--wm-k-rec); }
.wm-root.wk-metro .wk-att-loc.away { border-left-color: #E8A33D; }
.wm-root.wk-metro .wk-att-loc > .wm-i { flex: 0 0 28px; width: 28px; height: 28px; stroke-width: 2.4; color: var(--wm-k-done); }
.wm-root.wk-metro .wk-att-loc.ok > .wm-i { color: var(--wm-k-rec); }
.wm-root.wk-metro .wk-att-loc.away > .wm-i { color: #B87514; }
.wm-root.wk-metro .wk-att-loc span { flex: 1; min-width: 0; }
.wm-root.wk-metro .wk-att-loc b { display: block; font: 700 18px/1.2 var(--bms-font-ui); color: var(--bms-text); }
.wm-root.wk-metro .wk-att-loc small { display: block; margin-top: 2px; font-size: 14px; color: var(--bms-text-muted); }
.wm-root.wk-metro .wk-att-again { flex: 0 0 auto; min-height: 48px; padding: 0 14px; background: var(--wm-k-done); color: #fff; }
.wm-root.wk-metro .wk-att-today { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 8px; }
.wm-root.wk-metro .wk-att-cell { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; background: var(--bms-surface); }
.wm-root.wk-metro .wk-att-cell small { font-size: 14px; color: var(--bms-text-muted); }
.wm-root.wk-metro .wk-att-cell b { font: 300 40px/1.05 var(--bms-font-ui); color: var(--wm-k-att-t); font-variant-numeric: tabular-nums; }
.wm-root.wk-metro .wk-att-cell.empty b { color: var(--bms-text-muted); }
.wm-root.wk-metro .wk-att-cell em { align-self: flex-start; padding: 2px 8px; font: 700 13px/1.3 var(--bms-font-ui); font-style: normal; color: #fff; background: #B87514; }
.wm-root.wk-metro .wk-att-act { margin: 8px 0 4px; }
.wm-root.wk-metro .wk-att-act .wm-act.wide, .wm-root.wk-metro .wk-att-act .wk-undo-btn { width: 100%; min-height: 64px; font-size: 20px; }
/* Nút Vào ca / Tan ca nằm đúng chỗ dưới ô giờ, không ghim đáy màn như nút chính của các trang khác. */
.wm-root.wk-metro .wk-att-act .wm-act.wide, .wm-root.wk-metro .wk-att-act .wk-undo-btn { position: static; margin-top: 0; box-shadow: none; }
.wm-root.wk-metro .wk-att-closed { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 64px; margin: 0; background: var(--bms-surface); font: 700 17px/1.2 var(--bms-font-ui); color: var(--wm-k-rec); }
.wm-root.wk-metro .wk-att-closed .wm-i { width: 22px; height: 22px; stroke-width: 2.6; }
.wm-root.wk-metro .wk-att-review { flex-wrap: wrap; }
.wm-root.wk-metro .wk-att-decide { display: flex; gap: 6px; margin-left: auto; }
.wm-root.wk-metro .wk-att-decide .wm-act { min-height: 44px; padding: 0 12px; background: var(--k); color: #fff; }

/* 14/10 (anh Hiệp): không ô nào trùng màu. Bản vẽ tím (khác xanh dương Việc của tôi), Chấm công vàng (chữ tối cho dễ đọc),
   Đã làm hồng đất (khác xanh lá Cập nhật sự kiện), Báo cơm xanh tím than (khác xanh lá). */
.wm-root.wk-metro { --wm-k-drw: #7B3FC4; --wm-k-drw-t: #6430A6; --wm-k-att: #F2B705; --wm-k-att-t: #8A6500; --wm-k-dn: #C2577A; --wm-k-dn-t: #A23F61; --wm-k-meal: #1E3A8A; --wm-k-meal-t: #1E3A8A; }
.wm-root.wk-metro .wm-k-drw { --k: var(--wm-k-drw); --kt: var(--wm-k-drw-t); }
.wm-root.wk-metro .wm-k-att { --k: var(--wm-k-att); --kt: var(--wm-k-att-t); }
.wm-root.wk-metro .wm-k-meal { --k: var(--wm-k-meal); --kt: var(--wm-k-meal-t); }
.wm-root.wk-metro .wm-k-dn { --k: var(--wm-k-dn); --kt: var(--wm-k-dn-t); }
.wm-root.wk-metro .wm-k-att .wk-att-act .wm-act.wide:not(.wk-undo-btn) { background: var(--wm-k-att); }
/* Ô vàng: chữ và biểu tượng màu tối để đủ tương phản. */
.wm-root.wk-metro .wm-tile.wm-k-att, .wm-root.wk-metro .wm-k-att .wk-att-act .wm-act.wide:not(.wk-undo-btn), .wm-root.wk-metro .wm-k-att .wm-sq.back, .wm-root.wk-metro .wm-q.wm-k-att { color: #2A2200; --wm-on-k: #2A2200; }
.wm-root.wk-metro .wm-tile.wm-k-att * { color: inherit; }
.wm-root.wk-metro .wm-k-att .wm-subh, .wm-root.wk-metro .wm-mhead.page.wm-k-att .wm-who b { color: var(--wm-k-att-t); }