/* ============================================================================
 * desktop.css — Màn hình máy tính GIẢ LẬP của VNACCS Practice Desk
 * Toàn bộ hình khối tự vẽ bằng CSS/SVG. KHÔNG dùng logo, ảnh hay nhãn hiệu
 * của Windows, ECUS, Thái Sơn hay bất kỳ cơ quan nhà nước nào.
 * ========================================================================== */

:root {
  --tb-h: 42px;          /* chiều cao thanh tác vụ */
  --winbar-h: 30px;      /* chiều cao thanh tiêu đề cửa sổ */
  /* Ba biến dưới do màn "Cài đặt" (cai-dat.js) đặt lại. Để mặc định ở đây
     để màn hình vẫn đúng khi chưa có cài đặt nào được lưu. */
  --accent-1: #3f83b5;
  --accent-2: #2f6b96;
  --desk-font: 13px;
  --desk-icon: 44px;
  --desk-wallpaper:
    radial-gradient(1200px 700px at 18% 12%, rgba(120, 200, 235, .28), transparent 62%),
    radial-gradient(900px 620px at 84% 82%, rgba(40, 120, 160, .35), transparent 60%),
    linear-gradient(160deg, #0e3c56 0%, #0a2b3f 45%, #07202f 100%);
}

body.desk-mode { margin: 0; overflow: hidden; background: #0d2b3e; }

/* ------------------------------------------------------------- Nền desktop */
#desk {
  position: fixed; inset: 0 0 var(--tb-h) 0;
  background: var(--desk-wallpaper);
  background-size: cover;
  overflow: hidden;
}
/* Vệt sáng mềm cho đỡ phẳng */
#desk::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, .05) 50%, transparent 62%);
}
/* Dòng chữ nhắc đây là bản thực tập — luôn hiện ở góc phải dưới nền */
#desk-mark {
  position: absolute; right: 16px; bottom: 12px; z-index: 1;
  color: rgba(255, 255, 255, .34); font: 600 11px 'Segoe UI', sans-serif;
  letter-spacing: .4px; text-align: right; line-height: 1.5; user-select: none;
}
#desk-mark b { display: block; font-size: 13px; color: rgba(255, 255, 255, .5); }

/* ------------------------------------------------------------ Biểu tượng */
#desk-icons {
  position: absolute; inset: 10px auto 10px 10px; z-index: 2;
  display: flex; flex-direction: column; flex-wrap: wrap;
  align-content: flex-start; gap: 2px; max-height: calc(100% - 20px);
}
.dicon {
  width: 92px; padding: 8px 4px 6px; border-radius: 4px; cursor: default;
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  border: 1px solid transparent; user-select: none;
}
.dicon:hover { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .18); }
.dicon.sel { background: rgba(80, 160, 215, .35); border-color: rgba(150, 205, 240, .6); }
.dicon .gl { width: var(--desk-icon); height: var(--desk-icon); filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .45)); }
.dicon .nm {
  color: #fff; font: 12px 'Segoe UI', sans-serif; text-align: center; line-height: 1.25;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .85); word-break: break-word; white-space: pre-line;
}

/* --------------------------------------------------------------- Cửa sổ */
.win {
  position: absolute; z-index: 10; display: flex; flex-direction: column;
  background: #f0f0f0; border: 1px solid #5b7c99; border-radius: 5px 5px 2px 2px;
  box-shadow: 0 10px 34px rgba(0, 0, 0, .5), 0 0 0 1px rgba(255, 255, 255, .25) inset;
  min-width: 340px; min-height: 180px; overflow: hidden;
}
.win.max { border-radius: 0; border-width: 0 0 1px 0; }
.win.hid { display: none; }
.win.front { z-index: 40; }
.win-bar {
  height: var(--winbar-h); flex: 0 0 auto; display: flex; align-items: center; gap: 6px;
  padding: 0 4px 0 7px; cursor: default; user-select: none;
  background: linear-gradient(180deg, #e9f2fa 0%, #cddef0 48%, #bcd2e8 52%, #d5e6f5 100%);
  border-bottom: 1px solid #8fa9c0;
}
.win.front .win-bar { background: linear-gradient(180deg, #dcecfa 0%, #a9cbe8 48%, #8fbbe0 52%, #bcdaf2 100%); }
.win-bar .gl { width: 16px; height: 16px; flex: 0 0 auto; }
.win-bar .ttl {
  flex: 1 1 auto; font: 600 12px 'Segoe UI', sans-serif; color: #1a3a55;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.win-bar .wb {
  width: 30px; height: 20px; border: 1px solid #8fa9c0; border-radius: 3px;
  background: linear-gradient(180deg, #fbfdff, #dbe8f4); color: #234; cursor: pointer;
  font: 12px 'Segoe UI', sans-serif; line-height: 16px; padding: 0;
}
.win-bar .wb:hover { background: linear-gradient(180deg, #ffffff, #cfe3f6); }
.win-bar .wb.x:hover { background: linear-gradient(180deg, #f3a0a0, #d34b4b); color: #fff; border-color: #a33; }
.win-body { flex: 1 1 auto; overflow: auto; background: #f4f4f4; position: relative; }
.win-body.pad { padding: 12px; }
/* Cửa sổ ECUS: phần thân không cuộn riêng, để giao diện ECUS tự lo */
.win-body.host { overflow: hidden; background: #ece9d8; }
.win-grip {
  position: absolute; right: 0; bottom: 0; width: 14px; height: 14px; cursor: nwse-resize;
  background: repeating-linear-gradient(135deg, transparent 0 2px, #9ab 2px 3px);
}

/* --------------------------------------------------------- Thanh tác vụ */
#taskbar {
  position: fixed; left: 0; right: 0; bottom: 0; height: var(--tb-h); z-index: 60;
  display: flex; align-items: center; gap: 6px; padding: 0 8px;
  background: linear-gradient(180deg, #1c4257 0%, #102d3e 60%, #0a2231 100%);
  border-top: 1px solid rgba(255, 255, 255, .22);
  box-shadow: 0 -2px 10px rgba(0, 0, 0, .45);
}
#tb-start {
  height: 32px; padding: 0 14px 0 10px; border-radius: 4px; cursor: pointer;
  display: flex; align-items: center; gap: 7px; border: 1px solid rgba(255, 255, 255, .25);
  background: linear-gradient(180deg, #3d7fa3, #1d4e6b); color: #fff;
  font: 600 12px 'Segoe UI', sans-serif;
}
#tb-start:hover { background: linear-gradient(180deg, #4a93ba, #24607f); }
#tb-start .gl { width: 16px; height: 16px; }
#tb-tasks { flex: 1 1 auto; display: flex; align-items: center; gap: 5px; overflow: hidden; }
.tb-task {
  height: 32px; max-width: 210px; padding: 0 10px; border-radius: 4px; cursor: pointer;
  display: flex; align-items: center; gap: 6px; border: 1px solid rgba(255, 255, 255, .16);
  background: rgba(255, 255, 255, .07); color: #dceaf4; font: 12px 'Segoe UI', sans-serif;
  white-space: nowrap; overflow: hidden;
}
.tb-task:hover { background: rgba(255, 255, 255, .16); }
.tb-task.on { background: rgba(120, 190, 230, .3); border-color: rgba(160, 215, 245, .55); color: #fff; }
.tb-task .gl { width: 15px; height: 15px; flex: 0 0 auto; }
.tb-task .t { overflow: hidden; text-overflow: ellipsis; }
#tb-right {
  display: flex; align-items: center; gap: 10px; color: #cfe3f2;
  font: 12px 'Segoe UI', sans-serif; padding-left: 8px;
}
#tb-sim {
  border: 1px solid rgba(255, 200, 120, .55); color: #ffd79a; border-radius: 3px;
  padding: 2px 7px; font: 600 10.5px 'Segoe UI', sans-serif; letter-spacing: .3px;
}
#tb-clock { text-align: right; line-height: 1.2; font-variant-numeric: tabular-nums; }
#tb-clock small { display: block; font-size: 10.5px; opacity: .8; }

/* -------------------------------------------------------- Menu Bắt đầu */
#startmenu {
  position: fixed; left: 8px; bottom: calc(var(--tb-h) + 6px); z-index: 70; width: 330px;
  background: #f7fafc; border: 1px solid #5b7c99; border-radius: 6px;
  box-shadow: 0 12px 38px rgba(0, 0, 0, .55); overflow: hidden;
}
#startmenu.hid { display: none; }
#startmenu .sm-h {
  padding: 9px 12px; background: linear-gradient(180deg, #2f6f92, #1b4a66); color: #fff;
  font: 600 12px 'Segoe UI', sans-serif;
}
#startmenu .sm-h small { display: block; font-weight: 400; opacity: .82; font-size: 11px; margin-top: 2px; }
#startmenu .sm-i {
  display: flex; align-items: center; gap: 10px; padding: 8px 12px; cursor: pointer;
  font: 12px 'Segoe UI', sans-serif; color: #17303f; border-top: 1px solid #e3ebf1;
}
#startmenu .sm-i:hover { background: #dceaf6; }
#startmenu .sm-i .gl { width: 22px; height: 22px; flex: 0 0 auto; }
#startmenu .sm-i .d { font-size: 11px; color: #5a6c78; }
#startmenu .sm-f { padding: 7px 12px; background: #eaf1f6; border-top: 1px solid #d5e2eb; }

/* ------------------------------------------------------ Trình quản lý tệp */
.fm { display: flex; height: 100%; background: #fff; font: 12px 'Segoe UI', sans-serif; }
.fm-side {
  width: 186px; flex: 0 0 auto; background: #eef3f7; border-right: 1px solid #cfdae3;
  padding: 8px 0; overflow: auto;
}
.fm-side .h { padding: 4px 12px; font-weight: 600; color: #5a6c78; font-size: 11px; }
.fm-side .f {
  display: flex; align-items: center; gap: 7px; padding: 6px 12px; cursor: pointer; color: #1b3243;
}
.fm-side .f:hover { background: #dce8f2; }
.fm-side .f.on { background: #c9dff0; font-weight: 600; }
.fm-side .f .gl { width: 16px; height: 16px; }
.fm-main { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; }
.fm-bar {
  flex: 0 0 auto; display: flex; align-items: center; gap: 6px; padding: 7px 9px;
  background: #f7fafc; border-bottom: 1px solid #d7e2ea;
}
.fm-bar .path { flex: 1 1 auto; color: #35505f; font-size: 11.5px; }
.fm-list { flex: 1 1 auto; overflow: auto; padding: 6px; }
.fm-list table { width: 100%; border-collapse: collapse; }
.fm-list th {
  text-align: left; font-size: 11px; color: #5a6c78; font-weight: 600;
  border-bottom: 1px solid #d7e2ea; padding: 4px 6px; position: sticky; top: 0; background: #f7fafc;
}
.fm-list td { padding: 4px 6px; border-bottom: 1px solid #eef3f7; color: #17303f; }
.fm-list tr { cursor: default; }
.fm-list tr:hover td { background: #eef6fd; }
.fm-list tr.sel td { background: #cfe4f6; }
.fm-list td.n { display: flex; align-items: center; gap: 7px; }
.fm-list td.n .gl { width: 16px; height: 16px; flex: 0 0 auto; }
.fm-empty { padding: 26px; text-align: center; color: #7b8b96; }
.fm-foot {
  flex: 0 0 auto; padding: 5px 10px; background: #f0f5f9; border-top: 1px solid #d7e2ea;
  color: #5a6c78; font-size: 11px;
}

/* --------------------------------------------- Khung "đang dựng" tạm thời */
.soon { max-width: 560px; margin: 26px auto; font: 13px 'Segoe UI', sans-serif; color: #223; }
.soon h3 { margin: 0 0 8px; font-size: 15px; color: #10405c; }
.soon ul { margin: 8px 0 0 18px; padding: 0; line-height: 1.75; }
.soon .note {
  margin-top: 14px; padding: 9px 11px; background: #fff7e6; border: 1px solid #e8cf99;
  border-radius: 4px; color: #6b4b12; font-size: 12px;
}

/* ---------------------------------------------------- Xưởng chứng từ */
.dg-head { font: 12px 'Segoe UI', sans-serif; }
.dg-note {
  margin-top: 8px; padding: 7px 10px; background: #fff7e6; border: 1px solid #e8cf99;
  border-radius: 4px; color: #6b4b12; font-size: 11.5px; line-height: 1.5;
}
.dg-note.sm { font-size: 11px; margin-top: 6px; }
.dg-body { margin-top: 10px; font: 12px 'Segoe UI', sans-serif; }
.dg-empty { padding: 34px; text-align: center; color: #6c7c88; }
.dg-cols { display: flex; gap: 12px; align-items: flex-start; }
.dg-cols > * { flex: 1 1 0; min-width: 0; }
.dg-kv { display: flex; gap: 8px; padding: 2px 0; line-height: 1.4; }
.dg-kv .k { flex: 0 0 104px; color: #5a6c78; }
.dg-kv .v { flex: 1 1 auto; color: #16303f; word-break: break-word; }
.dg-doc {
  display: flex; align-items: center; gap: 8px; padding: 4px 2px;
  border-bottom: 1px solid #e8eef3;
}
.dg-doc .n { flex: 1 1 auto; color: #16303f; }

/* ================================================= Trình duyệt thực tập */
.wb-bar {
  display: flex; align-items: center; gap: 5px; padding: 6px 8px;
  background: linear-gradient(180deg, #f6f9fb, #e6eef4); border-bottom: 1px solid #c8d6e0;
  font: 12px 'Segoe UI', sans-serif;
}
.wb-nav {
  width: 26px; height: 24px; border: 1px solid #b6c7d4; border-radius: 3px; cursor: pointer;
  background: #fff; color: #2b4a5e; font-size: 11px; padding: 0;
}
.wb-nav:hover:not(:disabled) { background: #e3eef7; }
.wb-nav:disabled { opacity: .4; cursor: default; }
.wb-addr {
  flex: 1 1 auto; height: 24px; border: 1px solid #b6c7d4; border-radius: 3px; padding: 0 8px;
  font: 12px Consolas, 'Segoe UI', monospace; color: #17303f; background: #fff; min-width: 0;
}
.wb-off {
  border: 1px solid #d0a96a; color: #8a5a10; background: #fff6e6; border-radius: 3px;
  padding: 2px 6px; font: 600 10px 'Segoe UI', sans-serif; white-space: nowrap;
}
.wb-content { position: absolute; inset: 37px 0 0 0; overflow: auto; background: #fff; }
.wb-page { max-width: 880px; margin: 0 auto; padding: 16px 20px 40px; font: 13px 'Segoe UI', sans-serif; color: #1b2c38; }

.wb-sim {
  display: flex; gap: 10px; align-items: baseline; padding: 8px 12px; margin-bottom: 14px;
  background: #fff4e0; border: 1px solid #e2bd7a; border-radius: 4px; color: #6b4b12; font-size: 11.5px;
}
.wb-sim b { white-space: nowrap; letter-spacing: .3px; }
.wb-h1 { margin-bottom: 12px; }
.wb-h1 .t { font-size: 19px; font-weight: 600; color: #0f4a6b; }
.wb-h1 .s { font-size: 12px; color: #667c89; margin-top: 2px; }
.wb-sub { margin: 14px 0 6px; font-weight: 600; color: #0f4a6b; border-bottom: 1px solid #dde7ee; padding-bottom: 3px; }
.wb-note { padding: 8px 11px; background: #eef5fb; border-left: 3px solid #6aa3c8; color: #24505f; font-size: 11.5px; line-height: 1.55; margin: 8px 0; }
.wb-note.sm { font-size: 11px; }
.wb-warn { padding: 9px 12px; background: #fdeeee; border: 1px solid #e0a8a8; border-radius: 4px; color: #7d2626; }
.wb-dim { color: #788a96; }
.wb-dim.sm, .sm { font-size: 11px; }
.wb-empty { padding: 26px; text-align: center; color: #7b8b96; background: #f7fafc; border-radius: 4px; }

.wb-form { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; margin: 10px 0; }
.wb-form3 { display: flex; gap: 10px; flex-wrap: wrap; }
.wb-form3 > .wb-f { flex: 1 1 180px; }
.wb-f { display: flex; flex-direction: column; gap: 3px; }
.wb-f label { font-size: 11px; color: #5f7482; }
.wb-i {
  height: 26px; border: 1px solid #bcccd8; border-radius: 3px; padding: 0 7px; min-width: 150px;
  font: 12px 'Segoe UI', sans-serif; color: #17303f; background: #fff;
}
.wb-i.w60 { min-width: 54px; width: 54px; }
.wb-i.num { text-align: right; }
.wb-b {
  height: 26px; padding: 0 12px; border: 1px solid #a9bfcf; border-radius: 3px; cursor: pointer;
  background: linear-gradient(180deg, #fff, #eaf1f7); color: #1c4054; font: 12px 'Segoe UI', sans-serif;
}
.wb-b:hover { background: linear-gradient(180deg, #fff, #d9e8f4); }
.wb-b.primary { background: linear-gradient(180deg, #4b93bd, #2d6f96); border-color: #24607f; color: #fff; font-weight: 600; }
.wb-b.primary:hover { background: linear-gradient(180deg, #5aa5cf, #35809f); }
.wb-b.sm { height: 21px; padding: 0 8px; font-size: 11px; }
.wb-btns { display: flex; gap: 8px; align-items: flex-end; margin: 10px 0; flex-wrap: wrap; }

.wb-t { width: 100%; border-collapse: collapse; margin-top: 4px; }
.wb-t th, .wb-t td { padding: 4px 8px; text-align: left; vertical-align: top; font-size: 12px; }
.wb-t tbody th { width: 190px; color: #5f7482; font-weight: 400; }
.wb-t.grid th, .wb-t.grid td { border: 1px solid #dbe5ec; }
.wb-t.grid thead th { background: #eef4f9; font-weight: 600; color: #2b4a5e; }
.wb-t td.num, .wb-t th.num { text-align: right; }
.wb-t .mono { font-family: Consolas, monospace; }

.wb-card { border: 1px solid #dbe5ec; border-radius: 5px; padding: 10px 12px; margin: 10px 0; background: #fcfdfe; }
.wb-card-h { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 6px; }
.wb-card-h .no { font: 700 15px Consolas, monospace; color: #0f4a6b; }
.wb-card-h .tag { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 10px; background: #e6ecf0; color: #4a5c68; }
.wb-card-h .tag.g { background: #e2f4e4; color: #206b2c; }
.wb-card-h .tag.y { background: #fdf2d8; color: #7d5d12; }
.wb-card-h .tag.r { background: #fbe4e4; color: #8b2020; }
.wb-desc { color: #1b2c38; margin: 2px 0; }
.wb-ul { margin: 4px 0 0 18px; padding: 0; line-height: 1.7; }
.wb-res { margin-top: 10px; }
.wb-sum { margin: 10px 0; padding: 8px 11px; background: #f3f8fc; border: 1px solid #d5e4ef; border-radius: 4px; line-height: 1.7; }
.wb-sum .b { font-weight: 700; color: #0f4a6b; }

.wb-home { text-align: center; padding: 26px 0 8px; }
.wb-logo { font: 700 34px 'Segoe UI', sans-serif; color: #0f4a6b; letter-spacing: 3px; }
.wb-logo small { display: block; font: 400 12px 'Segoe UI', sans-serif; letter-spacing: 1px; color: #6b8494; margin-top: 2px; }
.wb-searchbox { display: flex; gap: 8px; justify-content: center; margin-top: 16px; }
.wb-searchbox .wb-i { width: 420px; max-width: 70%; height: 32px; border-radius: 16px; padding: 0 14px; }
.wb-hit { padding: 9px 0; border-bottom: 1px solid #eef3f7; }
.wb-hit .u { color: #15629b; font-size: 15px; cursor: pointer; }
.wb-hit .u:hover { text-decoration: underline; }
.wb-hit .l { color: #3a7d3a; font-size: 11.5px; font-family: Consolas, monospace; }
.wb-hit .d { color: #4f6472; font-size: 12px; margin-top: 2px; }
.wb-404 { padding: 40px; text-align: center; color: #4f6472; }
.wb-404 h3 { color: #0f4a6b; margin: 0 0 8px; }
.wb-tabs { display: flex; gap: 4px; border-bottom: 1px solid #d5e0e8; margin: 12px 0 10px; }
.wb-tab {
  padding: 6px 14px; cursor: pointer; border: 1px solid transparent; border-bottom: 0;
  border-radius: 4px 4px 0 0; color: #4f6472; font-size: 12.5px;
}
.wb-tab:hover { background: #f0f6fa; }
.wb-tab.on { background: #fff; border-color: #d5e0e8; color: #0f4a6b; font-weight: 600; margin-bottom: -1px; }

/* -------------------------------------- Bảng chuyển cửa sổ (Ctrl+Tab) */
#winswitch {
  position: fixed; left: 50%; top: 46%; transform: translate(-50%, -50%); z-index: 90;
  min-width: 340px; max-width: 70vw; padding: 10px 12px 12px;
  background: rgba(16, 38, 52, .93); border: 1px solid rgba(160, 205, 235, .4);
  border-radius: 8px; box-shadow: 0 16px 48px rgba(0, 0, 0, .6);
  font: 12px 'Segoe UI', sans-serif; color: #dceaf4;
}
#winswitch.hid { display: none; }
#winswitch .ws-h { font-size: 11px; opacity: .7; margin-bottom: 8px; }
#winswitch .ws-list { display: flex; flex-direction: column; gap: 3px; }
#winswitch .ws-i {
  display: flex; align-items: center; gap: 9px; padding: 7px 10px; border-radius: 4px;
  border: 1px solid transparent; cursor: pointer;
}
#winswitch .ws-i .gl { width: 20px; height: 20px; flex: 0 0 auto; }
#winswitch .ws-i .t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#winswitch .ws-i.on { background: rgba(110, 185, 230, .3); border-color: rgba(170, 220, 250, .6); color: #fff; }


/* ============================ Bảng nhiệm vụ "Các bước khai tờ khai trên ECUS"
   Thẻ nhỏ ở GÓC PHẢI DƯỚI màn hình giả lập, bật/tắt và thu gọn được. */
.nv-dock {
  position: absolute; right: 12px; bottom: 12px; width: 392px; max-height: calc(100% - 24px);
  /* Luôn nổi trên mọi cửa sổ (cửa sổ bị chặn ở 45), dưới thanh tác vụ (60). */
  z-index: 55; display: flex; flex-direction: column;
  background: #f7f9fb; border: 1px solid #5b7c99; border-radius: 6px;
  box-shadow: 0 12px 34px rgba(0, 0, 0, .5);
  font: 12px 'Segoe UI', sans-serif; color: #17303f; overflow: hidden;
}
.nv-dock.min { width: auto; border-radius: 18px;
  background: linear-gradient(var(--accent-1), var(--accent-2)); border-color: var(--accent-2); }
.nv-minbar { display: flex; align-items: center; gap: 7px; padding: 7px 14px; color: #fff;
  font-weight: 600; cursor: default; white-space: nowrap; }
.nv-minbar:hover { filter: brightness(1.08); }
.nv-minbar .ic { font-size: 15px; }

.nv-head { display: flex; align-items: center; gap: 4px; padding: 7px 10px;
  background: linear-gradient(var(--accent-1), var(--accent-2)); color: #fff; }
/* Nhấn giữ thanh tiêu đề (hoặc thẻ thu gọn) để kéo bảng đi chỗ khác. */
.nv-grab { cursor: grab; touch-action: none; user-select: none; }
.nv-dock.dragging { cursor: grabbing; box-shadow: 0 18px 44px rgba(0, 0, 0, .6); opacity: .97; }
.nv-dock.dragging .nv-grab { cursor: grabbing; }
/* Kéo được thì bảng không còn bám cứng góc phải dưới nữa. */
.nv-dock[style*="left"] { right: auto; bottom: auto; }
.nv-title { font-weight: 700; font-size: 13px; flex: 1; }
.nv-x { background: transparent; border: 0; color: #fff; cursor: default; font-size: 14px;
  padding: 0 7px; line-height: 1.2; }
.nv-x:hover { background: rgba(255, 255, 255, .25); }
.nv-x:last-child:hover { background: #c0392b; }

.nv-empty { padding: 14px 12px; text-align: center; }
.nv-empty .ic { font-size: 30px; }
.nv-empty .h { font-weight: 700; margin: 4px 0; }
.nv-empty .d { color: #4b6478; line-height: 1.6; margin-bottom: 8px; }

.nv-prog { padding: 8px 10px 4px; }
.nv-bar { height: 8px; background: #dde5ed; border-radius: 5px; overflow: hidden; }
.nv-bar i { display: block; height: 100%; background: linear-gradient(90deg, #4c9f5e, #7dc48c); }
.nv-progtext { margin-top: 4px; color: #45607a; }
.nv-link { margin: 4px 10px 0; padding: 5px 8px; background: #eef4fb; border: 1px solid #c3d8ee;
  border-radius: 4px; line-height: 1.6; }

.nv-card { margin: 6px 10px; padding: 9px 10px; background: #fff; border: 1px solid #8fb2cd;
  border-left: 4px solid var(--accent-1); border-radius: 4px; }
.nv-card-h { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.nv-step { font-weight: 700; color: #2f6b96; }
.nv-auto { margin-left: auto; background: #eaf7ed; color: #1f5a2e; border: 1px solid #9fd0ac;
  border-radius: 9px; padding: 0 7px; font-size: 11px; }
.nv-card-t { font-weight: 700; font-size: 13px; line-height: 1.45; margin-bottom: 6px; }
.nv-kv { display: flex; gap: 6px; line-height: 1.55; margin-bottom: 3px; }
.nv-kv b { flex: 0 0 106px; font-weight: 600; color: #4b6478; }
.nv-kv span { flex: 1; min-width: 0; }
.nv-basis { margin-top: 6px; color: #5a7286; font-style: italic; line-height: 1.5; }
.nv-note { margin-top: 6px; padding: 5px 7px; background: #fff8e6; border: 1px solid #e6cf95;
  border-radius: 3px; line-height: 1.55; }
.nv-btns { display: flex; gap: 6px; margin-top: 8px; }
.nv-b { border: 1px solid #a8bccf; background: linear-gradient(#fdfefe, #e7eef5);
  padding: 4px 10px; font: inherit; cursor: default; border-radius: 3px; }
.nv-b:hover { background: #e2edf7; }
.nv-b.primary { background: linear-gradient(color-mix(in srgb, var(--accent-1) 85%, #fff), var(--accent-2));
  color: #fff; border-color: var(--accent-2); font-weight: 600; }

.nv-docs { margin-top: 7px; border: 1px solid #a9c4dd; border-radius: 3px; background: #fbfdff; }
.nv-doc { padding: 4px 8px; border-bottom: 1px solid #e4ecf4; cursor: default; line-height: 1.4; }
.nv-doc:last-child { border-bottom: 0; }
.nv-doc:hover { background: #e4eff9; }
.nv-doc.seen { color: #1f5a2e; }

.nv-list { flex: 1; overflow: auto; padding: 4px 10px 10px; }
.nv-gh { margin: 8px 0 3px; font-weight: 700; color: #2f6b96; border-bottom: 1px solid #cfdae6;
  padding-bottom: 2px; }
.nv-row { display: flex; align-items: center; gap: 6px; padding: 4px 5px; border-radius: 3px;
  cursor: default; line-height: 1.4; }
.nv-row:hover { background: #eef4fb; }
.nv-row.on { background: #dceaf7; }
.nv-row.locked { opacity: .5; }
.nv-mark { flex: 0 0 16px; text-align: center; }
.nv-t { flex: 1; min-width: 0; }
.nv-pill { flex: 0 0 auto; border-radius: 9px; padding: 0 7px; font-size: 11px; border: 1px solid;
  white-space: nowrap; }
.nv-pill.todo { background: #fff4e5; color: #8a5a00; border-color: #e7c58b; }
.nv-pill.lock { background: #f2f4f7; color: #5a7286; border-color: #cfd8e2; }
.nv-pill.done { background: #eaf7ed; color: #1f5a2e; border-color: #9fd0ac; }
.nv-pill.na { background: #efeff1; color: #7a7a82; border-color: #d4d4da; }
.nv-done-all { margin: 6px 10px; padding: 8px; background: #eaf7ed; border: 1px solid #9fd0ac;
  border-radius: 4px; color: #1f5a2e; font-weight: 600; }

.nv-congrats { text-align: center; padding: 6px 4px; }
.nv-congrats .ic { font-size: 46px; line-height: 1.2; }
.nv-congrats h3 { margin: 4px 0 6px; }
.nv-congrats .sub { color: #4b6478; line-height: 1.6; margin-top: 6px; }
.nv-congrats .note { margin-top: 10px; padding: 6px 8px; background: #fff8e6;
  border: 1px solid #e6cf95; border-radius: 3px; }

@media (max-width: 900px) { .nv-dock { width: 320px; } }

/* ------------------------------------------- Tùy chọn của màn hình Cài đặt */
body.no-desk-mark #desk-mark { display: none; }
body.no-desk-clock #tb-clock { display: none; }
.win-bar .ttl, #startmenu, .nv-dock, #tb-tasks, #tb-right { font-size: var(--desk-font); }
#taskbar { background: linear-gradient(180deg,
  color-mix(in srgb, var(--accent-2) 55%, #0a2231) 0%,
  color-mix(in srgb, var(--accent-2) 30%, #0a2231) 60%, #0a2231 100%); }
#tb-start { background: linear-gradient(180deg, var(--accent-1), var(--accent-2)); }
.win.front .win-bar { background: linear-gradient(180deg,
  color-mix(in srgb, var(--accent-1) 22%, #ffffff) 0%,
  color-mix(in srgb, var(--accent-1) 48%, #ffffff) 48%,
  color-mix(in srgb, var(--accent-1) 62%, #ffffff) 52%,
  color-mix(in srgb, var(--accent-1) 30%, #ffffff) 100%); }
.pq-title { background: linear-gradient(var(--accent-1), var(--accent-2)); }

/* ---------------------------------------------------- Màn hình "Cài đặt" */
.st-wrap { max-height: 62vh; overflow: auto; padding-right: 4px; }
.st-sec { font-weight: 700; color: #22405c; margin: 10px 0 5px; }
.st-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.st-row { flex-wrap: wrap; }
.st-cell { border: 2px solid transparent; border-radius: 5px; padding: 3px; cursor: default; }
.st-cell:hover { background: #eef4fb; }
.st-cell.on { border-color: var(--accent-1); background: #e4eff9; }
.st-cell .sw { height: 54px; border-radius: 4px; border: 1px solid #9fb6cc; background-size: cover; }
.st-cell .nm { font-size: 11.5px; text-align: center; margin-top: 3px; }
.st-row { display: flex; gap: 10px; }
.st-dot { width: 30px; height: 30px; border-radius: 50%; border: 2px solid transparent; cursor: default; }
.st-dot.on { border-color: #17303f; box-shadow: 0 0 0 2px #fff inset; }
.st-two { display: flex; gap: 18px; }
.st-two > div { flex: 1; }
.st-sel { width: 100%; border: 1px solid #9fb6cc; padding: 4px 6px; font: inherit; background: #fff; }
.st-chk { display: flex; align-items: center; gap: 6px; margin: 4px 0; }
.st-prev { height: 120px; border-radius: 5px; border: 1px solid #9fb6cc; position: relative;
  display: flex; align-items: center; justify-content: center; }
.st-prev-win { width: 78%; background: #f0f0f0; border: 1px solid #5b7c99; border-radius: 4px;
  overflow: hidden; box-shadow: 0 6px 18px rgba(0, 0, 0, .4); }
.st-prev-bar { background: linear-gradient(var(--accent-1), var(--accent-2)); color: #fff;
  padding: 4px 8px; font-size: var(--desk-font); font-weight: 600; }
.st-prev-body { padding: 10px 8px; font-size: var(--desk-font); }
.st-note { margin-top: 10px; padding: 6px 8px; background: #fff8e6; border: 1px solid #e6cf95;
  border-radius: 3px; line-height: 1.55; }

/* Dải "Chứng từ lô hàng" trên bảng nhiệm vụ — tra nhanh, không tính tiến độ */
.nv-strip { margin: 5px 10px 0; border: 1px solid #a9c4dd; border-radius: 4px; background: #fbfdff;
  overflow: hidden; }
.nv-strip-h { padding: 4px 8px; background: #eef4fb; font-weight: 600; color: #22405c;
  cursor: default; }
.nv-strip-h:hover { background: #e2edf7; }
.nv-strip .nv-docs { margin: 0; border: 0; max-height: 132px; overflow: auto; }
.st-cell.empty .sw { border-style: dashed; }
.st-hint { color: #5a7286; align-self: center; line-height: 1.5; flex: 1; }
/* Desktop interactions: scoped to the simulated desktop. */
#desk-icons.movable-icons { inset:10px; display:block; max-height:none; pointer-events:none; }
.movable-icons .dicon { position:absolute; pointer-events:auto; touch-action:none; }
.movable-icons .dicon[hidden] { display:none; }
.tb-task { touch-action:none; }
.tb-task.dragging { opacity:.65; outline:2px solid #70b8ee; }
.desktop-context { position:fixed; z-index:9000; min-width:210px; background:#fafafa; border:1px solid #8e9ca8; box-shadow:2px 4px 12px #0005; padding:4px; }
.desktop-context button { display:block; width:100%; text-align:left; border:0; background:transparent; padding:8px 12px; }
.desktop-context button:hover,.desktop-context button:focus { background:#dceefa; }
.desktop-selection { position:absolute; z-index:3; border:1px solid #84c4ff; background:#63adf133; pointer-events:none; }
.trash-row { display:flex; align-items:center; gap:8px; border-bottom:1px solid #ddd; padding:8px 0; }
.trash-row span { flex:1; overflow-wrap:anywhere; }
.customer-chat-app { display:flex; background:#edf2f7; height:100%; min-height:0; }
.customer-chat-side { width:235px; flex-shrink:0; background:white; border-right:1px solid #d9e2eb; padding:20px 14px; }
.customer-chat-brand { color:#1675ca; font-size:20px; font-weight:600; margin-bottom:6px; }
.customer-contact { display:flex; gap:10px; padding:14px 8px; margin-top:25px; background:#e8f3ff; border-radius:6px; }
.customer-contact>b { background:#408fd3; color:white; width:36px; height:36px; border-radius:50%; display:grid; place-items:center; }
.customer-contact small { display:block; margin-top:5px; color:#667; }
.customer-chat-panel { min-width:0; display:flex; flex-direction:column; }
.customer-chat-app>.customer-chat-panel { flex:1; width:auto; border:0; height:100%; }
.customer-chat-app .uv-chat-h { background:white; padding:18px; color:#24384b; font-size:16px; }
.customer-chat-app .customer-messages { flex:1; max-height:none; background:#edf2f7; }
.customer-chat-app .uv-msg { max-width:85%; background:white; border-radius:10px; padding:10px 12px; }
.customer-chat-app .uv-msg.me { margin-left:auto; background:#d6ebff; }
.customer-quick { display:flex; flex-wrap:wrap; gap:5px; padding:8px; border-top:1px solid #dbe4ed; background:#f9fbfd; }
.customer-chat-app .uv-chat-f { padding:12px; background:white; }
.customer-contact-search { width:100%; margin-top:14px; padding:7px; }
.customer-contact-results { overflow:auto; flex:1; min-height:0; }
.customer-chat-side { display:flex; flex-direction:column; }
button.customer-contact { width:100%; text-align:left; margin-top:8px; border:1px solid transparent; white-space:normal; }
button.customer-contact.selected { border-color:#74aae0; background:#d8ebff; }
button.customer-contact b { overflow-wrap:anywhere; }

/* Allow copying message contents without changing desktop drag behavior. */
.customer-chat-panel .uv-msg .t { -webkit-user-select:text; user-select:text; cursor:text; }

.docgen-copy .dg-body, .docgen-copy .dg-body * { -webkit-user-select:text; user-select:text; }

.fm-context-menu {position:fixed;z-index:100000;background:#fff;border:1px solid #aab5c0;box-shadow:2px 3px 10px #0003;padding:4px;min-width:220px;}
.fm-context-menu button {display:block;width:100%;text-align:left;padding:7px 12px;border:0;background:transparent;color:#203040;}
.fm-context-menu button:hover:not(:disabled) {background:#deedfc;}
.fm-context-menu button:disabled {color:#999;}

.file-drop-target {outline:2px solid #176bc2;background:#d8ecff!important;}

/* ===== Trang mô phỏng "In bản kê mã vạch" (ContainerBarcode) ===== */
/* Cổng thật in khối hướng dẫn chữ xanh, căn giữa, ngay trên khung nhập. */
.bc-intro { text-align: center; color: #1a4e8a; font-size: 12.5px; line-height: 1.7; margin: 10px 0 4px; }
.bc-intro div:first-child, .bc-intro div:nth-child(2) { font-weight: 600; }
.bc-req { color: #c0392b; }
/* Bốn ô nhập xếp dọc, nhãn canh phải như cổng thật thay vì nằm ngang. */
.bc-form { flex-direction: column; align-items: center; gap: 6px; }
.bc-form .wb-f { flex-direction: row; align-items: center; gap: 8px; }
.bc-form .wb-f label { width: 160px; text-align: right; font-size: 12px; color: #333; }
.bc-form .wb-i { width: 270px; }

/* ===================== App "Hướng dẫn" (huong-dan.js) ===================== */
.hd-host { display: flex; min-height: 0; background: #fff; }
.hd-nav {
  width: 232px; flex: 0 0 232px; overflow: auto; padding: 8px 0 14px;
  background: #f3f6f9; border-right: 1px solid #c8d4de;
}
.hd-brand { padding: 8px 12px 10px; border-bottom: 1px solid #dde6ed; margin-bottom: 6px; }
.hd-brand b { display: block; font-size: 14px; color: #1d4f72; }
.hd-brand span { display: block; font-size: 11px; color: #6b7f8e; margin-top: 1px; }
.hd-i {
  padding: 7px 12px; font-size: 12.5px; cursor: pointer; line-height: 1.35;
  border-left: 3px solid transparent; color: #2a3b48;
}
.hd-i:hover { background: #e7eef4; }
.hd-i.on { background: #fff; border-left-color: #2f7fb5; font-weight: 600; color: #15486c; }

.hd-doc { flex: 1 1 auto; min-width: 0; overflow: auto; padding: 14px 20px 40px; }
.hd-doc .hd-h {
  margin: 0 0 10px; font-size: 16px; color: #15486c;
  border-bottom: 2px solid #e2ebf2; padding-bottom: 6px;
}
.hd-doc h4 { margin: 16px 0 5px; font-size: 13px; color: #1d4f72; }
.hd-doc p { margin: 7px 0; line-height: 1.6; font-size: 13px; }
.hd-doc ul { margin: 6px 0 6px 20px; padding: 0; }
.hd-doc li { margin: 3px 0; line-height: 1.55; font-size: 13px; }
.hd-doc .mono { font-family: Consolas, 'Courier New', monospace; }

.hd-shot { margin: 10px 0 14px; padding: 0; }
.hd-shot img {
  display: block; max-width: 100%; border: 1px solid #c3d0db; border-radius: 3px;
  background: #fbfcfd; box-shadow: 0 1px 4px rgba(20, 50, 70, .12);
}
.hd-shot figcaption { margin-top: 5px; font-size: 11.5px; color: #6b7f8e; font-style: italic; }
.hd-noimg {
  display: grid; place-items: center; gap: 4px; min-height: 120px; padding: 16px;
  border: 1px dashed #bcc9d4; border-radius: 3px; background: #f7f9fb; color: #8295a3; font-size: 12px;
}

.hd-warn, .hd-tip, .hd-note {
  margin: 9px 0; padding: 8px 11px; border-radius: 3px; font-size: 12.5px; line-height: 1.55;
}
.hd-warn { background: #fff6f4; border: 1px solid #f0c3b8; border-left: 3px solid #cf5033; }
.hd-tip  { background: #f2faf4; border: 1px solid #bfdfc6; border-left: 3px solid #3f9a53; }
.hd-note { background: #f5f8fb; border: 1px solid #d3deea; color: #4a5c6b; }

/* ===================== Điều khoản sử dụng (dieu-khoan.js) ===================== */
.dk-doc { max-height: 62vh; overflow: auto; padding-right: 6px; }
.dk-top {
  padding: 8px 10px; margin-bottom: 8px; border-radius: 3px;
  background: #f1f6fa; border: 1px solid #d3e0ea;
}
.dk-top b { display: block; font-size: 13.5px; color: #15486c; }
.dk-top span { font-size: 11.5px; color: #6b7f8e; }
.dk-doc h4 { margin: 13px 0 4px; font-size: 13px; color: #1d4f72; }
.dk-doc p { margin: 5px 0; line-height: 1.6; font-size: 12.5px; text-align: justify; }
.dk-note {
  margin-top: 12px; padding: 8px 11px; border-radius: 3px; font-size: 12px; line-height: 1.5;
  background: #f5f8fb; border: 1px solid #d3deea; color: #4a5c6b;
}
.dk-agree {
  display: flex; gap: 8px; align-items: flex-start; margin-top: 10px; padding: 9px 11px;
  border: 1px solid #bfdfc6; border-left: 3px solid #3f9a53; border-radius: 3px;
  background: #f2faf4; font-size: 12.5px; line-height: 1.5; cursor: pointer;
}
.dk-agree input { margin-top: 2px; }

/* --- Chương "Bắt đầu từ đâu" trong app Hướng dẫn (07/11/2026) -------------
   Mỗi bước là một khối: số thứ tự bên trái, việc phải làm và ảnh CẮT CẬN bên
   phải. Ảnh đã khoanh đỏ sẵn đúng chỗ phải bấm nên để nguyên cỡ thật, không
   co lại — co nhỏ là mất đúng cái lợi của việc cắt cận. */
.hd-buoc { display: flex; gap: 12px; margin: 18px 0 22px; align-items: flex-start; }
.hd-buoc-so {
  flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%;
  background: #2284cf; color: #fff; font-weight: 700; font-size: 14px;
  display: grid; place-items: center; margin-top: 1px;
}
.hd-buoc-than { flex: 1 1 auto; min-width: 0; }
.hd-buoc-td { font-weight: 700; font-size: 13.5px; color: #15486c; margin-bottom: 2px; }
.hd-buoc .hd-shot { margin: 8px 0 0; }
.hd-buoc .hd-shot img {
  max-width: 100%; height: auto; border: 1px solid #c9d8e4; border-radius: 4px;
  background: #fff;
}