/* ============================================================
   VNACCS PRACTICE DESK — desktop-density stylesheet
   Mô phỏng mật độ/hành vi phần mềm khai hải quan trên Windows.
   Không dùng logo, icon hay tài sản đồ hoạ của ECUS.
   ============================================================ */

:root {
  --font-ui: "Segoe UI", Tahoma, "Helvetica Neue", Arial, sans-serif;
  --fs: 12.5px;
  --win-bg: #f0f0f0;
  --panel-bg: #ffffff;
  --panel-border: #a0a4ab;
  --group-border: #b9bdc4;
  --menu-bg: #f5f6f7;
  --menu-hover: #d9e6f7;
  --menu-active: #cfe0f5;
  --title-bg: #1f4e79;
  --title-fg: #ffffff;
  --field-bg: #ffffff;
  --field-ro-bg: #d9d9d9;
  --field-disabled-bg: #e8e8e8;
  --field-border: #7a7f87;
  --focus: #0a66c2;
  --req: #c00000;
  --link: #0b5cab;
  --grid-head: #eef1f5;
  --grid-line: #c6cad1;
  --row-alt: #fafbfc;
  --status-bg: #e9ecef;
  --green: #1a7f37;
  --yellow: #b58105;
  --red: #c62828;
  --shadow: 0 6px 24px rgba(0, 0, 0, .28);
}

* { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
  font-family: var(--font-ui);
  font-size: var(--fs);
  color: #16191d;
  background: var(--win-bg);
  overflow: hidden;
  user-select: none;
}

input, select, textarea, button { font-family: inherit; font-size: inherit; color: inherit; }
input, textarea { user-select: text; }

/* ---------- App shell ---------- */
#app { display: flex; flex-direction: column; height: var(--vh, 100vh); }

.titlebar {
  display: flex; align-items: center; gap: 8px;
  background: linear-gradient(#2a5f8f, var(--title-bg));
  color: var(--title-fg);
  padding: 3px 10px; font-size: 12px; line-height: 18px;
  border-bottom: 1px solid #163a5a;
}
.titlebar .brand { font-weight: 700; letter-spacing: .3px; }
.titlebar .sep { opacity: .55; }
.titlebar .sim-badge {
  margin-left: auto; background: #b32020; color: #fff; font-weight: 700;
  padding: 1px 8px; border-radius: 2px; font-size: 10.5px; letter-spacing: .6px;
}

/* ---------- Menubar ---------- */
.menubar {
  display: flex; background: var(--menu-bg);
  border-bottom: 1px solid #d2d5da; padding: 0 4px; position: relative; z-index: 60;
}
.menubar > .menu-item {
  padding: 4px 9px; cursor: default; white-space: nowrap; border: 1px solid transparent;
}
.menubar > .menu-item:hover { background: var(--menu-hover); }
.menubar > .menu-item.open { background: var(--menu-active); border-color: #9fbfe3; }
.menubar > .menu-item u { text-decoration: underline; }

.dropdown {
  position: absolute; top: 100%; min-width: 260px; background: #fff;
  border: 1px solid var(--panel-border); box-shadow: var(--shadow); padding: 3px 0; z-index: 70;
}
.dropdown .mi { padding: 4px 14px; display: flex; gap: 14px; align-items: center; cursor: default; }
.dropdown .mi:hover:not(.disabled) { background: var(--menu-hover); }
.dropdown .mi.disabled { color: #9aa0a6; }
.dropdown .mi .hint { margin-left: auto; color: #7c828a; font-size: 11px; }
.dropdown .divider { height: 1px; background: #e2e5e9; margin: 3px 6px; }
/* Menu con kiểu ECUS (mục có mũi tên ▸) */
.dropdown .mi.has-sub { position: relative; }
.dropdown .mi.has-sub > .arrow { margin-left: auto; color: #5a6069; }
.dropdown .dropdown.sub { display: none; position: absolute; left: 100%; top: -4px; }
.dropdown .mi.has-sub:hover > .dropdown.sub { display: block; }

/* ---------- Toolbar ---------- */
.toolbar {
  display: flex; align-items: center; gap: 2px; padding: 3px 6px;
  background: #fbfbfc; border-bottom: 1px solid #d2d5da;
}
.tbtn {
  width: 34px; height: 30px; display: grid; place-items: center;
  border: 1px solid transparent; border-radius: 3px; cursor: default; background: none;
}
.tbtn:hover:not(:disabled) { background: var(--menu-hover); border-color: #9fbfe3; }
.tbtn:active:not(:disabled) { background: #bcd6f2; }
.tbtn:disabled { opacity: .4; }
.tbtn svg { width: 20px; height: 20px; }
.toolbar .tb-sep { width: 1px; height: 22px; background: #d6d9de; margin: 0 5px; }
.toolbar .conn {
  margin-left: auto; display: flex; align-items: center; gap: 6px;
  font-size: 11.5px; color: #444; padding-right: 6px;
}
.dot { width: 8px; height: 8px; border-radius: 50%; background: #b0b4ba; }
.dot.sim { background: #e08b00; }

/* ---------- Body 3 vùng ---------- */
.body { flex: 1; display: flex; min-height: 0; }

.left {
  width: 300px; flex: 0 0 300px; display: flex; flex-direction: column;
  border-right: 1px solid var(--panel-border); background: var(--win-bg); min-height: 0;
}
.left .status-block { padding: 7px 9px 6px; }
.left .status-row { display: flex; gap: 8px; align-items: baseline; margin-bottom: 4px; }
.left .status-row .lbl { color: #333; }
.left .status-row .val { font-weight: 700; }
.channel { display: flex; gap: 12px; align-items: center; }
.channel label { display: inline-flex; gap: 4px; align-items: center; color: #9aa0a6; }
.channel label.on.xanh { color: var(--green); font-weight: 700; }
.channel label.on.vang { color: var(--yellow); font-weight: 700; }
.channel label.on.do { color: var(--red); font-weight: 700; }
.channel input { pointer-events: none; }

.op-list { padding: 0 8px 6px; display: flex; flex-direction: column; gap: 4px; }
.op-btn {
  text-align: left; padding: 5px 8px; border: 1px solid #b6bcc4; background: #fdfdfd;
  cursor: default; border-radius: 2px; line-height: 1.25;
}
.op-btn:hover:not(:disabled) { background: #eaf2fc; border-color: #7aa7db; }
.op-btn:disabled { color: #a4a9b0; background: #f3f4f5; border-color: #d7dade; }
.op-btn.spacer-top { margin-top: 6px; }
.op-btn:not(:disabled) { color: #10243a; }
.op-btn.next:not(:disabled) { border-color: #2f7bd0; background: #eaf3fd; font-weight: 600; box-shadow: inset 3px 0 0 #2f7bd0; }
table.tax-sum { width: 100%; border-collapse: collapse; font-size: 12px; }
table.tax-sum td { border-bottom: 1px dotted #d5d9de; padding: 3px 2px; }
table.tax-sum td.k { color: #4c525a; }
table.tax-sum td.v { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
table.tax-sum tr.total td { border-top: 1px solid #9aa0a7; border-bottom: none; font-weight: 700; color: #0b3d75; padding-top: 5px; }

.left .help-tabs { display: flex; border-bottom: 1px solid var(--panel-border); margin: 4px 8px 0; }
.left .help-tabs .t {
  flex: 1 1 0; min-width: 0; text-align: center; font-size: 11.5px; line-height: 1.2;
  padding: 3px 4px; border: 1px solid var(--panel-border); border-bottom: none;
  background: #e6e8eb; margin-right: 2px; cursor: default; border-radius: 2px 2px 0 0;
}
.left .help-tabs .t:last-child { margin-right: 0; }
.left .help-tabs .t.active { background: #fff; font-weight: 600; }
.help-body {
  flex: 1; margin: 0 8px 8px; border: 1px solid var(--panel-border); background: #fff;
  padding: 7px 8px; overflow: auto; min-height: 0; line-height: 1.42; user-select: text;
}
.help-body h4 { margin: 0 0 4px; font-size: 12.5px; }
.help-body .k { color: #5a6069; }
.help-body .row { margin-bottom: 3px; }
.help-body .tagline { display: inline-block; background: #fff3cd; border: 1px solid #e5cf7a; padding: 0 4px; }
.msg-line { border-bottom: 1px dotted #dcdfe3; padding: 3px 0; }
.msg-line .code { font-family: Consolas, monospace; color: #0b5cab; }
.msg-line.err .code { color: var(--red); }

/* ---------- Vùng giữa ---------- */
.center { flex: 1; display: flex; flex-direction: column; min-width: 0; background: var(--win-bg); }

.tabstrip {
  display: flex; align-items: flex-end; gap: 2px; padding: 4px 8px 0;
  border-bottom: 1px solid var(--panel-border);
}
.tabstrip .tab {
  padding: 4px 10px; border: 1px solid var(--panel-border); border-bottom: none;
  background: #e6e8eb; cursor: default; border-radius: 3px 3px 0 0; white-space: nowrap;
}
.tabstrip .tab.active { background: #fff; font-weight: 600; position: relative; top: 1px; }
.tabstrip .tab.ro::after { content: " ⦿"; color: #8a8f96; font-size: 9px; }
.tabstrip .spacer { flex: 1; }
.tabstrip .help-link { color: var(--link); padding: 4px 6px; cursor: default; text-decoration: underline; }

.form-scroll { flex: 1; overflow: auto; padding: 8px; min-height: 0; }
.form-card {
  /* Rộng theo nội dung của group box rộng nhất → không group box nào tràn ra ngoài khung */
  /* và không bao giờ rộng hơn khung chứa — thừa một ô là cả tờ khai bị đẩy ra ngoài. */
  width: max-content; max-width: 100%; min-width: min(100%, 862px); background: var(--panel-bg);
  border: 1px solid var(--panel-border); padding: 8px 12px 12px;
}
.form-card > fieldset.gb { min-width: 0; }
.form-scroll > .form-card { min-width: calc(100% - 2px); }

/* ---------- Group box ---------- */
fieldset.gb { border: 1px solid var(--group-border); margin: 8px 0 10px; padding: 6px 10px 9px; }
fieldset.gb > legend { padding: 0 5px; font-weight: 700; color: #17324d; }

/* ---------- Field grid ---------- */
.frow { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; min-height: 22px; }
.frow.top { align-items: flex-start; }
.flabel { flex: 0 0 auto; width: 178px; text-align: left; color: #22262b; padding-top: 2px; white-space: nowrap; }
.flabel.w200 { width: 236px; }
.flabel .lock-badge { margin-left: 3px; }
.flabel.w220 { width: 220px; }
.flabel.w120 { width: 120px; }
.flabel.right { text-align: right; }
.req::after { content: " *"; color: var(--req); font-weight: 700; }
.fgap { flex: 1; }
/* Lưới 5 cột cho group box nhiều cặp nhãn–ô (thẳng hàng như ECUS) */
.g5 { display: grid; grid-template-columns: 178px max-content minmax(16px, 1fr) max-content 190px;
  column-gap: 6px; row-gap: 4px; align-items: center; margin-bottom: 4px; max-width: 1180px; }
.g5 > .flabel { width: auto; }
.g5 .g5-cell { display: flex; align-items: center; gap: 4px; min-height: 22px; }
.g5 .g5-rlab { text-align: right; padding-left: 12px; }
.g5 .g5-full { grid-column: 1 / -1; margin: 0; }
.g5 .g5-rctl, .g5 .g5-cell > select { width: 190px; }
/* ECUS: các chỉ tiêu mã ngắn hiển thị combo hẹp chỉ có mã */
.g5 .g5-cell > select.g5-code { width: 74px; }

input[type=text], input[type=number], input[type=date], select, textarea {
  border: 1px solid var(--field-border); background: var(--field-bg);
  padding: 1px 4px; height: 21px; border-radius: 0; outline: none;
}
textarea { height: auto; padding: 2px 4px; resize: vertical; line-height: 1.35; }
input:focus, select:focus, textarea:focus { border-color: var(--focus); box-shadow: inset 0 0 0 1px #cde0f6; }
input[readonly], input:disabled, select:disabled, textarea[readonly], textarea:disabled {
  background: var(--field-ro-bg); color: #3a3f45;
}
input.sys { background: var(--field-ro-bg); }
input.num { text-align: right; font-variant-numeric: tabular-nums; }
input.err, select.err, textarea.err { border-color: var(--req); background: #fff3f3; }
.w40 { width: 40px; } .w56 { width: 56px; } .w70 { width: 70px; } .w90 { width: 90px; }
.w110 { width: 110px; } .w130 { width: 130px; } .w160 { width: 160px; }
.w200 { width: 200px; } .w240 { width: 240px; } .w300 { width: 300px; } .w360 { width: 360px; }
/* Phải khai đủ mọi bề ngang đang dùng trong mã: thiếu một lớp thì ô ăn theo nội dung —
   riêng thẻ <select> lấy theo dòng dài nhất của danh sách — và kéo tràn cả khung tờ khai. */
.w50 { width: 50px; } .w60 { width: 60px; } .w86 { width: 86px; }
.w100 { width: 100px; } .w140 { width: 140px; } .w150 { width: 150px; }
.w170 { width: 170px; } .w180 { width: 180px; } .w190 { width: 190px; } .w210 { width: 210px; }
.w230 { width: 230px; } .w260 { width: 260px; } .w280 { width: 280px; }
.w320 { width: 320px; } .w380 { width: 380px; } .w400 { width: 400px; } .w480 { width: 480px; }
.w520 { width: 520px; }
/* Trong hàng co giãn, ô nhập không được tự nở theo nội dung của nó. */
.frow select, .frow input, .g5 select, .g5 input, .g5-cell select, .g5-cell input { min-width: 0; }
.grow { flex: 1; min-width: 0; }

.btn-ellipsis {
  width: 26px; height: 21px; border: 1px solid #9aa0a7; background: linear-gradient(#fdfdfd, #eceef1);
  cursor: default; line-height: 1; padding: 0;
}
.btn-ellipsis:hover:not(:disabled) { background: #e2ecf8; border-color: #7aa7db; }
.btn-ellipsis:disabled { opacity: .45; }
.btn-mini {
  height: 21px; padding: 0 8px; border: 1px solid #9aa0a7;
  background: linear-gradient(#fdfdfd, #eceef1); cursor: default;
}
.btn-mini:hover:not(:disabled) { background: #e2ecf8; border-color: #7aa7db; }
.btn-mini:disabled { opacity: .45; }
a.inline-link { color: var(--link); text-decoration: underline; cursor: default; }

.radio-row { display: flex; gap: 18px; align-items: center; }
.radio-row label { display: inline-flex; gap: 5px; align-items: center; }
.chk-row { display: flex; gap: 7px; align-items: flex-start; margin-bottom: 3px; }
.chk-row label { line-height: 1.3; }
.chk-row.muted label { color: #8b9097; }

/* ---------- Bảng/Grid ---------- */
.grid-wrap { border: 1px solid var(--panel-border); background: #fff; overflow: auto; }
table.grid { border-collapse: collapse; width: 100%; font-size: 12px; }
table.grid th {
  background: var(--grid-head); border: 1px solid var(--grid-line); padding: 3px 5px;
  font-weight: 600; position: sticky; top: 0; z-index: 2; white-space: nowrap;
}
table.grid td { border: 1px solid var(--grid-line); padding: 2px 5px; vertical-align: top; }
table.grid tbody tr:nth-child(even) { background: var(--row-alt); }
table.grid tbody tr.sel { background: #cfe3fb !important; }
table.grid td.num { text-align: right; font-variant-numeric: tabular-nums; }
table.grid td.ro { background: #ededed; }
table.grid .empty { color: #8a8f96; text-align: center; padding: 14px; }

.grid-toolbar { display: flex; gap: 4px; align-items: center; padding: 4px 2px; flex-wrap: wrap; }
/* Dòng chữ xanh nhắc phím tắt trên các lưới của ECUS. */
.grid-hint { color: #1a5fb4; font-size: 11px; padding: 2px 2px 4px; }
.shortcut-hint { color: var(--link); padding: 2px 2px 5px; font-size: 11.5px; }
.totals-row { display: flex; gap: 10px; align-items: center; padding: 6px 2px 0; flex-wrap: wrap; }
.totals-row .lbl { color: #333; }

/* ---------- Nút đáy ---------- */
.footer-bar {
  display: flex; gap: 6px; justify-content: flex-end; align-items: center;
  padding: 5px 10px; border-top: 1px solid var(--panel-border); background: #f6f7f8;
}
.fbtn {
  min-width: 84px; height: 26px; padding: 0 12px; border: 1px solid #8d939a;
  background: linear-gradient(#ffffff, #e9ebee); cursor: default; display: inline-flex;
  align-items: center; gap: 6px; justify-content: center;
}
.fbtn:hover:not(:disabled) { background: #e2ecf8; border-color: #7aa7db; }
.fbtn:disabled { opacity: .45; }
.fbtn .ic { width: 13px; height: 13px; border-radius: 2px; display: inline-block; }

.statusbar {
  display: flex; gap: 0; align-items: center; background: var(--status-bg);
  border-top: 1px solid #c9ccd1; font-size: 11.5px; color: #2c3036;
}
.statusbar .cell { padding: 3px 9px; border-right: 1px solid #cfd2d7; white-space: nowrap; }
.statusbar .cell:last-child { border-right: none; }
.statusbar .grow { flex: 1; overflow: hidden; text-overflow: ellipsis; }
.statusbar .save-idle { color: #4b5158; }
.statusbar .save-dirty { color: #b06000; font-weight: 600; }
.statusbar .save-ok { color: var(--green); font-weight: 600; }

/* ---------- Modal ---------- */
.modal-backdrop {
  position: fixed; inset: 0; background: rgba(20, 24, 30, .32);
  display: grid; place-items: center; z-index: 200;
}
.modal {
  background: #fff; border: 1px solid #5d666f; box-shadow: var(--shadow);
  display: flex; flex-direction: column; max-height: 88vh; max-width: 94vw;
}
.modal .m-head {
  background: linear-gradient(#2a5f8f, var(--title-bg)); color: #fff;
  padding: 4px 10px; font-weight: 600; display: flex; align-items: center; gap: 10px;
}
.modal .m-head .x { margin-left: auto; cursor: default; padding: 0 4px; }
.modal .m-body { padding: 9px 11px; overflow: auto; min-height: 0; }
.modal .m-foot {
  padding: 7px 11px; border-top: 1px solid #d7dade; display: flex; gap: 6px;
  justify-content: flex-end; background: #f6f7f8; flex-wrap: wrap;
}
/* Hộp thoại nằm TRONG một cửa sổ: bó theo cửa sổ đó, không theo cả màn hình,
   nếu không mép phải và hàng nút dưới cùng bị cửa sổ cắt mất. */
.modal.in-win { max-width: calc(100% - 12px); max-height: calc(100% - 12px); }
/* Bảng rộng hơn hộp thoại thì cuộn ngang trong khung, không tràn ra ngoài. */
.modal .grid-wrap { overflow: auto; max-width: 100%; }

.lookup-filters { display: flex; gap: 6px; align-items: center; margin-bottom: 6px; flex-wrap: wrap; }
.lookup-meta { font-size: 11px; color: #666; margin-top: 5px; display: flex; gap: 12px; flex-wrap: wrap; }
.lookup-table-wrap { height: 46vh; min-height: 240px; }

.notice {
  border: 1px solid #e5cf7a; background: #fff8e1; padding: 5px 8px; margin: 4px 0;
}
.notice.err { border-color: #e6a9a9; background: #fdeeee; }
.notice.ok { border-color: #a9d5b1; background: #eefaf0; }

.badge {
  display: inline-block; padding: 0 5px; border-radius: 2px; font-size: 10.5px;
  border: 1px solid #bfc4ca; background: #f1f3f5; color: #3a3f45;
}
.badge.unverified { border-color: #e0b95e; background: #fff4d6; color: #7a5600; }
.badge.notloaded { border-color: #d79a9a; background: #fdeaea; color: #8c2020; }
.badge.ok { border-color: #9fd0a9; background: #e9f8ec; color: #14612c; }

/* ---------- Toast ---------- */
#toasts { position: fixed; right: 14px; bottom: 44px; display: flex; flex-direction: column; gap: 6px; z-index: 300; }
.toast {
  background: #23282e; color: #fff; padding: 6px 12px; border-radius: 3px;
  box-shadow: var(--shadow); max-width: 420px;
}
.toast.err { background: #7a1f1f; }
.toast.ok { background: #1c5c33; }

/* ---------- Print ---------- */
.print-sheet {
  background: #fff; width: 780px; padding: 22px 26px; position: relative;
  font-size: 12px; line-height: 1.45;
}
.print-sheet .wm {
  position: absolute; inset: 0; display: grid; place-items: center;
  color: rgba(200, 30, 30, .12); font-size: 34px; font-weight: 800;
  transform: rotate(-22deg); pointer-events: none; text-align: center; letter-spacing: 2px;
}
.print-sheet h3 { text-align: center; margin: 0 0 10px; }
.print-sheet table { width: 100%; border-collapse: collapse; margin: 7px 0; }
.print-sheet th, .print-sheet td { border: 1px solid #999; padding: 3px 5px; }



.mono { font-family: Consolas, "Courier New", monospace; }
.small { font-size: 11px; }
.muted { color: #7a8087; }
.center-text { text-align: center; }
.nowrap { white-space: nowrap; }
.hidden { display: none !important; }

/* ============================================================
   TRỢ LÝ AI — panel dock bên phải, bật/tắt
   ============================================================ */
:root { --ai-w: 400px; }

#ai-tab-handle {
  position: fixed; right: 0; top: 46%; z-index: 150;
  background: linear-gradient(#2a5f8f, #1f4e79); color: #fff;
  writing-mode: vertical-rl; text-orientation: mixed;
  padding: 12px 5px; border-radius: 4px 0 0 4px; cursor: default;
  font-size: 11.5px; font-weight: 700; letter-spacing: 1px;
  box-shadow: -2px 0 8px rgba(0,0,0,.22); user-select: none;
}
#ai-tab-handle:hover { background: #2f6ca3; }
#ai-tab-handle.active { background: #b9500f; }
body.ai-open #ai-tab-handle { right: var(--ai-w); }

body.ai-open #app { width: calc(100vw - var(--ai-w)); }

#ai-panel {
  position: fixed; right: 0; top: 0; bottom: 0; width: var(--ai-w);
  background: #f7f8fa; border-left: 1px solid var(--panel-border);
  display: flex; flex-direction: column; z-index: 140;
  box-shadow: -3px 0 12px rgba(0,0,0,.14);
}
#ai-panel.hidden { display: none; }

.ai-head {
  display: flex; align-items: center; gap: 8px; padding: 5px 9px;
  background: linear-gradient(#2a5f8f, var(--title-bg)); color: #fff;
}
.ai-head .ai-title { font-weight: 700; }
.ai-head .ai-x { margin-left: auto; cursor: default; padding: 0 4px; }
.ai-badge {
  font-size: 10.5px; background: rgba(255,255,255,.18); padding: 1px 6px; border-radius: 2px;
}
.ai-badge.ok { background: #1c6b36; }
.ai-badge.err { background: #8c2020; }

.ai-toolbar { display: flex; gap: 4px; padding: 5px 8px 3px; align-items: center; }
.ai-scope { flex: 1; height: 22px; border: 1px solid var(--field-border); background: #fff; }
.ai-mini {
  border: 1px solid #9aa0a7; background: linear-gradient(#fff, #eceef1);
  padding: 1px 7px; cursor: default; border-radius: 2px; font-size: 11.5px;
}
.ai-mini:hover:not(:disabled) { background: #e2ecf8; border-color: #7aa7db; }

.ai-quick { display: flex; flex-wrap: wrap; gap: 4px; padding: 3px 8px 6px; }
.ai-q {
  border: 1px solid #b9c2cc; background: #fff; border-radius: 11px;
  padding: 2px 9px; font-size: 11.5px; cursor: default;
}
.ai-q:hover { background: #e8f1fb; border-color: #7aa7db; }

.ai-chat { flex: 1; overflow: auto; padding: 6px 8px; min-height: 0; }
.ai-msg { margin-bottom: 8px; line-height: 1.45; user-select: text; }
.ai-msg.user {
  background: #dce9f8; border: 1px solid #b6cfea; padding: 5px 9px;
  border-radius: 9px 9px 2px 9px; margin-left: 34px; white-space: pre-wrap;
}
.ai-msg.bot {
  background: #fff; border: 1px solid #dfe3e8; padding: 7px 9px;
  border-radius: 9px 9px 9px 2px;
}
.ai-thinking { color: #7a8087; font-style: italic; }
.ai-empty { color: #4c545c; }
.ai-ex { margin: 4px 0 0; padding-left: 18px; }
.ai-ex li { color: var(--link); text-decoration: underline; cursor: default; margin-bottom: 2px; }

.ai-h { font-weight: 700; margin: 7px 0 3px; color: #17324d; }
.ai-p { margin-bottom: 4px; }
.ai-ul { margin: 3px 0 5px; padding-left: 18px; }
.ai-ul li { margin-bottom: 2px; }
.ai-kv { margin: 3px 0 5px; }
.ai-kv-row { display: flex; gap: 6px; margin-bottom: 1px; }
.ai-kv-row .k { color: #5a6069; min-width: 118px; flex: 0 0 auto; }
.ai-link { color: var(--link); text-decoration: underline; cursor: default; }
.ai-card { border: 1px solid #dfe3e8; border-radius: 4px; padding: 6px 8px; margin: 5px 0; background: #fcfdfe; }
.ai-card-h { font-weight: 600; margin-bottom: 2px; }
.ai-actions { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 5px; }
.ai-apply {
  border: 1px solid #1c6b36; background: linear-gradient(#2f9152, #1c6b36); color: #fff;
  padding: 3px 10px; border-radius: 3px; cursor: default;
}
.ai-apply:hover { background: #2f9152; }

.ai-table-wrap { overflow-x: auto; border: 1px solid var(--grid-line); background: #fff; }
table.ai-table { border-collapse: collapse; width: 100%; font-size: 11.5px; }
table.ai-table th {
  background: var(--grid-head); border: 1px solid var(--grid-line); padding: 2px 5px;
  text-align: left; white-space: nowrap;
}
table.ai-table td { border: 1px solid var(--grid-line); padding: 2px 5px; vertical-align: top; }
table.ai-table tr.dim td { color: #9aa0a6; background: #f7f7f8; }
table.ai-table tr.maybe td { background: #f2f9f3; }
table.ai-table tr.noteRow td { background: #fffdf3; border-top: none; }

.ai-tag {
  display: inline-block; font-size: 10px; padding: 0 5px; border-radius: 2px;
  border: 1px solid #bfc4ca; background: #eef1f4; margin-right: 4px;
}
.ai-tag.maybe { border-color: #9fd0a9; background: #e9f8ec; color: #14612c; }
.ai-tag.dim { border-color: #cfd3d8; background: #f1f3f5; color: #70767c; }
.ai-tag.warn { border-color: #e0b95e; background: #fff4d6; color: #7a5600; }
.ai-tag.err { border-color: #d79a9a; background: #fdeaea; color: #8c2020; }

.ai-src { margin-top: 8px; border-top: 1px dashed #cfd4da; padding-top: 5px; }
.ai-src-h { font-weight: 700; font-size: 11.5px; margin-bottom: 3px; }
.ai-src-row { font-size: 11px; margin-bottom: 2px; }
.ai-src-row .n { color: #7a8087; margin-right: 4px; }

.ai-input-row { display: flex; gap: 5px; padding: 6px 8px; border-top: 1px solid #dfe3e8; background: #fff; }
.ai-input-row textarea {
  flex: 1; resize: none; border: 1px solid var(--field-border); padding: 4px 6px; font-size: 12.5px;
}
.ai-send {
  border: 1px solid #1f4e79; background: linear-gradient(#2a6ea8, #1f4e79); color: #fff;
  padding: 0 14px; border-radius: 3px; cursor: default; font-weight: 600;
}
.ai-send:hover { background: #2a6ea8; }
.ai-foot { padding: 3px 9px 5px; font-size: 10.5px; color: #7a8087; background: #fff; }

@media (max-width: 1280px) { :root { --ai-w: 340px; } }

/* ------------------------------------------- Chứng từ số hóa / trợ lý đọc */
.icon-btn {
  border: 1px solid #b6bcc4; background: linear-gradient(#fff, #eef1f4);
  border-radius: 3px; width: 24px; height: 20px; line-height: 1;
  font-size: 11px; cursor: pointer; padding: 0;
}
.icon-btn:hover:not(:disabled) { background: linear-gradient(#fff, #dce6f2); border-color: #7a9ec4; }
.icon-btn:disabled { opacity: .4; cursor: default; }
.icon-btn.danger:hover:not(:disabled) { background: linear-gradient(#fff, #f7dede); border-color: #c48484; }

.undo-bar {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: 46px; z-index: 9000;
  display: flex; align-items: center; gap: 10px;
  background: #2f3439; color: #fff; border-radius: 4px;
  padding: 7px 12px; font-size: 12px; box-shadow: 0 4px 14px rgba(0, 0, 0, .28);
}
.undo-bar .btn-mini { background: #4a5158; color: #fff; border-color: #6a7178; }
.undo-bar .btn-mini:hover { background: #5c646c; }
.undo-bar .x { cursor: pointer; opacity: .7; padding: 0 2px; }
.undo-bar .x:hover { opacity: 1; }

/* ---------------------------------- Bước phân tích chứng từ (tiến trình) */
.prog-box { margin-top: 6px; }
.prog-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.prog-label { color: #1a5fb4; font-weight: 600; font-size: 12px; }
.prog-total { color: #a33; font-weight: 600; font-size: 12px; white-space: nowrap; }
.prog-track {
  height: 16px; margin-top: 4px; border: 1px solid #b6bcc4;
  background: #fff; border-radius: 2px; overflow: hidden;
}
.prog-fill {
  height: 100%; width: 0;
  background: linear-gradient(#5fbf5f, #2e9e2e);
  transition: width .18s linear;
}

/* ------------------------------------------ Khung "Thông tin lô hàng" */
.ship-cell { display: flex; align-items: center; gap: 4px; flex: 1 1 auto; min-width: 0; }
input.sys.blankv { background: #fbfbfb; border-style: dashed; }
input.sys.hl { background: #fff4d6; color: #8a4b00; font-weight: 600; }
.fbtn.primary { background: linear-gradient(#e8f1fb, #cfe0f5); border-color: #7a9ec4; font-weight: 600; }
.notice.info-note { background: #eaf3ff; border-color: #9dc0e8; color: #1a3f68; }

/* ------------------------------------- Cửa sổ xem chi tiết chứng từ số hóa */
.doc-view-cols { display: flex; gap: 8px; align-items: stretch; }
.doc-col-src { flex: 0 0 400px; min-width: 0; }
.doc-col-fields { flex: 1 1 auto; min-width: 0; }
.doc-col-conf { flex: 0 0 250px; }

.doc-src {
  height: 330px; overflow: auto; background: #fff;
  border: 1px solid var(--line); font-family: Consolas, "Courier New", monospace; font-size: 11px;
}
.doc-src-line { display: flex; gap: 6px; padding: 0 4px; white-space: pre; }
.doc-src-line .no { color: #9aa0a6; min-width: 28px; text-align: right; user-select: none; }
.doc-src-line .tx { flex: 1 1 auto; }
.doc-src-line.hit { background: #fff7d6; }
.doc-src-line.hit .no { color: #8a6d00; font-weight: 600; }

/* Tô màu theo độ tin cậy của việc ĐỌC — không phải kết luận nghiệp vụ. */
input.sys.conf-high { background: #e9f8ec; border-color: #9fd0a9; }
input.sys.conf-med { background: #fff4d6; border-color: #e0b95e; }
input.sys.conf-low { background: #fdeaea; border-color: #d79a9a; }
table.grid tbody tr.conf-low-row td { background: #fdeaea; }

.conf-legend {
  display: flex; align-items: center; gap: 6px;
  padding: 4px 6px; margin: 3px 2px; border: 1px solid transparent; border-radius: 3px;
  font-size: 12px; cursor: pointer;
}
.conf-legend.conf-high { background: #e9f8ec; border-color: #9fd0a9; color: #14612c; }
.conf-legend.conf-med { background: #fff4d6; border-color: #e0b95e; color: #7a5600; }
.conf-legend.conf-low { background: #fdeaea; border-color: #d79a9a; color: #8c2020; }

@media (max-width: 1200px) {
  .doc-view-cols { flex-wrap: wrap; }
  .doc-col-src, .doc-col-conf { flex: 1 1 100%; }
}

/* ------------------------------------ Màn hình khai chứng từ điện tử */
.docform-cols { display: flex; gap: 8px; align-items: stretch; }
.docform-rail { flex: 0 0 250px; }
.docform-rail .op-btn { margin: 3px 0; }
.docform-main { flex: 1 1 auto; min-width: 0; }
.docform-pane { max-height: 58vh; overflow: auto; padding-right: 4px; }
.docform-pane .sublabel { font-weight: 600; margin: 8px 0 3px; }
.docform-pane .ck { display: flex; align-items: center; gap: 6px; padding: 2px 0; font-size: 12px; cursor: pointer; }

.ai-field-wrap { display: inline-flex; align-items: center; gap: 3px; flex: 1 1 auto; min-width: 0; }
.ai-field-wrap > input, .ai-field-wrap > select { min-width: 0; }
input.ai-filled, select.ai-filled, textarea.ai-filled {
  background: #f2f8ff; border-color: #8fb4dd; box-shadow: inset 2px 0 0 #4a86c8;
}

/* --------------------------------------------- Bộ soi lỗi thực tế */
.lock-badge { margin-left: 4px; font-size: 11px; cursor: help; opacity: .85; }

.ai-h3 {
  font-weight: 600; color: var(--link);
  margin: 10px 0 4px; padding-bottom: 2px; border-bottom: 1px solid var(--line);
}
.audit-item {
  border: 1px solid var(--line); border-left: 3px solid #cfd3d8;
  border-radius: 3px; background: #fff; padding: 6px 8px; margin: 4px 0;
}
.audit-item:has(.ai-tag.err) { border-left-color: #c05353; }
.audit-item:has(.ai-tag.warn) { border-left-color: #e0b95e; }
.audit-item:has(.ai-tag.maybe) { border-left-color: #6aa77c; }
.audit-head { line-height: 1.45; }
.audit-body { margin-top: 3px; }
.audit-body .ai-mini { margin-top: 3px; }
.audit-lesson {
  margin-top: 5px; padding: 7px 9px; border-radius: 3px;
  background: #f6f8fa; border: 1px solid #dde2e7; line-height: 1.55; font-size: 12px;
}

/* ------------------------------------ Cửa sổ truyền tờ khai (giả lập) */
.tx-status { font-weight: 600; padding: 6px 8px; border-radius: 3px; background: #eef3f9; color: #1a3f68; margin-bottom: 6px; }
.tx-status.ok { background: #e9f8ec; color: #14612c; }
.tx-status.warn { background: #fff4d6; color: #7a5600; }
.tx-status.err { background: #fdeaea; color: #8c2020; }
.tx-log {
  max-height: 46vh; overflow: auto; background: #0f1419; color: #d6dde4;
  font-family: Consolas, "Courier New", monospace; font-size: 12px; padding: 8px 10px; border-radius: 3px;
}
.tx-line { white-space: pre-wrap; line-height: 1.55; }
.tx-line .ts { color: #7f8b96; }
.tx-line.ok { color: #9be3a8; }
.tx-line.warn { color: #f3d27a; }
.tx-line.err { color: #ff9b9b; }
.tx-error {
  margin-top: 8px; padding: 8px 10px; border-radius: 3px; line-height: 1.5;
  background: #fff; color: #222; font-family: "Segoe UI", system-ui, sans-serif; font-size: 12px;
  border-left: 4px solid #c05353;
}
.tx-error.warn { border-left-color: #e0b95e; }
table.grid tbody tr.msg-err td { color: #8c2020; background: #fff5f5; }

.sample-tag { display: inline-block; background: #fff3cd; border: 1px solid #d9b949; color: #7a5a00; font-size: 10.5px; font-weight: 700; padding: 0 4px; margin-right: 5px; border-radius: 2px; }
.branch-tag { color: #7a5a00; font-size: 11px; }
.warn-text { color: #9a5b00; font-weight: 600; }

/* Màn hình Thông tin doanh nghiệp (Hệ thống → 3) */
.ci .ci-row { display: grid; grid-template-columns: 210px minmax(0, 1fr) auto; gap: 6px; align-items: center; margin-bottom: 5px; }
.ci .ci-lab { text-align: right; color: #22262b; }
.ci .ci-hint { color: #6b7179; font-size: 11.5px; white-space: nowrap; }
.ci .ci-pair { display: flex; gap: 5px; align-items: center; min-width: 0; }
.ci .ci-pair > input[type=text] { min-width: 0; }
.ci .ci-chk { display: inline-flex; gap: 5px; align-items: center; white-space: nowrap; }
.ci .ci-chk.agent { color: #b3261e; }
.ci textarea { min-height: 42px; }
.ci .ci-warn { color: #b3261e; margin-top: 6px; line-height: 1.45; }

/* ---------- Cửa sổ "Kết quả" và "Lấy phản hồi từ Hải quan" kiểu ECUS ---------- */
fieldset.gb.ecus-box { margin: 0; }
.ecus-content {
  min-height: 150px; max-height: 44vh; overflow: auto; background: #fff;
  border: 1px solid var(--field-border); padding: 5px 7px; line-height: 1.55; user-select: text;
}
/* Chữ trong khung "Nội dung" của cửa sổ Kết quả là chữ XANH, như ECUS thật. */
.ecus-line { white-space: pre-wrap; color: #1a1acd; }
.ecus-line.muted { color: #666; }
.ecus-line.hl { background: #cfe3fb; }
.fr .fr-tabs, .cd .fr-tabs { display: flex; gap: 2px; margin-bottom: 6px; }
.fr .fr-tabs .t, .cd .fr-tabs .t {
  padding: 3px 10px; border: 1px solid var(--panel-border); border-bottom: none;
  background: #e6e8eb; border-radius: 2px 2px 0 0;
}
.fr .fr-tabs .t.active, .cd .fr-tabs .t.active { background: #fff; font-weight: 600; }
.fr .fr-head { line-height: 1.65; }
.fr .fr-row1 { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.fr .fr-row1 .ok { color: var(--green); font-weight: 700; }
.fr .fr-row1 .no { color: #c00; font-weight: 700; font-family: Consolas, monospace; }
.fr .fr-row1 .lbl { margin-left: 18px; }
.fr .fr-kind { color: #c00; font-weight: 700; }
.fr .fr-note { color: #0b4a8f; }
.fr .fr-foot { display: flex; justify-content: space-between; margin-top: 7px; }
.fr .fr-status { color: #c00; }
.fr .fr-status.new { color: #c00; font-weight: 600; }
.fr .fr-count { color: #c00; font-weight: 600; }
.fr .fr-bar { height: 12px; border: 1px solid #9aa0a7; background: #eef1f4; margin-top: 4px; overflow: hidden; }
.fr .fr-bar i { display: block; height: 100%; width: 100%; background: #2fa84f; }
.fr .fr-bar:not(.run) i { width: 100%; opacity: .45; }
.fr .fr-bar.run i { animation: frrun 1.1s linear infinite; }
@keyframes frrun { from { transform: translateX(-100%); } to { transform: translateX(0); } }
.fr .fr-auto { display: flex; gap: 26px; margin-top: 6px; }

/* Ô tên danh mục bên cạnh ô mã: ECUS vẽ như combobox có mũi tên */
.frow input[readonly].w300, .frow input[readonly].grow.desc, .ci input[readonly].grow {
  background-image: linear-gradient(#fdfdfd, #eceef1);
  background-repeat: no-repeat; background-position: right 2px center; background-size: 16px 100%;
}

/* ============================================================
   Khai báo danh sách container với tờ khai (dựng theo ECUS5)
   ============================================================ */
.cd .cd-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
.cd .cd-no { color: #c00; font-weight: 700; background: #ffe9ec !important; text-align: center; }
.cd .cd-st { color: #0a63b8; font-weight: 700; }
.cd .cd-legend { color: #1f4e79; font-weight: 600; font-size: 11.5px; margin: 8px 0 3px; }
.cd .cd-note { color: #1f4e79; font-size: 11px; margin-top: 6px; line-height: 1.4; }
.cd .flabel.w90 { width: 90px; }
.cd .flabel.w110 { width: 110px; }
.cd .flabel.w80 { width: 80px; }

/* Lấy phản hồi từ Hải quan — ô thời gian tự động như ECUS */
.fr-auto .fr-time { color: #0a63b8; font-weight: 800; font-size: 16px; letter-spacing: 1px; }

/* Khai báo file đính kèm HYS */
.hys .hys-grid { display: grid; grid-template-columns: 250px 1fr; gap: 0 12px; }
.hys .hys-side { border: 1px solid #b9bcc0; padding: 6px; background: #f4f6f8; }
.hys .hys-side .st { color: #c00; font-weight: 700; }
.hys .hys-rule { color: #1f4e79; font-size: 10.5px; line-height: 1.45; margin-top: 5px; }
.hys .hys-total { color: #0a7a3c; font-weight: 600; font-size: 11px; }

/* Chứng từ đính kèm điện tử (MSB) */
.at .at-size { color: #0a7a3c; font-weight: 600; font-size: 11px; margin: 0 8px; }
.at .at-size.over { color: #c00; }
/* Khối chữ đỏ của màn khai báo chứng từ đính kèm: chữ đỏ bên trái, hai nút
   "Xem file" / "File đính kèm" bên phải — đúng như phần mềm thật. */
.at .at-rule { color: #c00; font-size: 11px; line-height: 1.5; margin-top: 4px; }
.at .at-rule b { color: #c00; }
.at .at-foot { display: flex; align-items: flex-end; gap: 12px; margin-top: 4px; }
.at .at-foot .at-rule { flex: 1; min-width: 0; }
.at .at-btns { display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; }
.at .at-link { display: inline-block; margin-top: 3px; color: #1f4e79; font-weight: 600; text-decoration: none; }
.at .at-link:hover { text-decoration: underline; }
/* "? Hướng dẫn - F1" nằm góc trên bên phải khung "Thông tin khai báo". */
.at .gb { position: relative; }
.at .at-help { position: absolute; top: 2px; right: 8px; color: #1f6fb2; font-size: 11.5px; text-decoration: none; }
.at .at-help:hover { text-decoration: underline; }
.at .at-no { color: #c00; font-weight: 700; }
.at .at-new { color: #0a63b8; font-weight: 700; }
.grid td.ok { color: #1a7f37; font-weight: 600; }
.hys .hys-total.over { color: #c00; }
.hys .grid-toolbar { gap: 6px; }

/* ============================================================
   MÀN HÌNH MỞ ĐẦU (bố cục theo màn hình chính của ECUS5;
   nhận diện, hình vẽ và nội dung là của bản thực tập)
   ============================================================ */
.wc-wrap { flex: 1; display: grid; place-items: center; background: var(--win-bg); min-height: 0; overflow: auto; }
.wc-card { width: 760px; max-width: calc(100% - 40px); background: #fff; border: 1px solid #9aa0a7; box-shadow: 0 2px 10px rgba(0,0,0,.12); }
.wc-top { display: flex; align-items: center; gap: 10px; padding: 5px 10px; background: #fff; }
.wc-office { font-weight: 700; color: #123f6b; font-size: 12.5px; }
.wc-lic { margin-left: auto; font-size: 11.5px; color: #333; display: flex; gap: 6px; align-items: baseline; }
.wc-lic b { color: #c00; letter-spacing: .5px; }

.wc-body { position: relative; height: 372px; overflow: hidden; color: #fff; }
.wc-body .wc-art { position: absolute; inset: 0; width: 100%; height: 100%; }
.wc-brand { position: absolute; top: 12px; right: 16px; text-align: right; text-shadow: 0 1px 2px rgba(0,0,0,.35); }
.wc-brand-name { font-size: 30px; font-weight: 800; letter-spacing: 2px; line-height: 1; }
.wc-brand-sub { font-size: 13px; font-weight: 700; letter-spacing: 3px; opacity: .95; }
.wc-brand-ver { font-size: 11px; opacity: .85; margin-top: 2px; }

.wc-left { position: absolute; left: 18px; top: 40px; width: 292px; font-size: 11px; line-height: 1.35; text-shadow: 0 1px 2px rgba(0,0,0,.3); }
.wc-sec { font-weight: 800; letter-spacing: .6px; display: flex; gap: 6px; align-items: center; }
.wc-ic { display: inline-grid; place-items: center; width: 16px; height: 16px; background: rgba(255,255,255,.22); border-radius: 2px; font-size: 10px; }
.wc-note { font-style: italic; opacity: .9; margin: 0 0 4px 22px; font-size: 10.5px; }
.wc-links { display: flex; flex-direction: column; gap: 1px; margin-left: 22px; }
.wc-a { color: #ffd98a; cursor: default; }
.wc-a:hover { color: #fff; text-decoration: underline; }
.wc-row { display: flex; margin-left: 22px; }
.wc-row .wc-k { width: 140px; }
.wc-row .wc-v { color: #ffd98a; font-weight: 600; }
.wc-foot-links { display: flex; gap: 18px; margin: 8px 0 0 22px; }
.wc-a2 { color: #fff; cursor: default; }
.wc-a2:hover { text-decoration: underline; }

.wc-title {
  position: absolute; left: 0; right: 0; bottom: 56px; text-align: center;
  font-size: 26px; font-weight: 800; letter-spacing: 1px; text-shadow: 0 2px 4px rgba(0,0,0,.4);
}
.wc-company {
  position: absolute; right: 16px; bottom: 8px; text-align: right;
  font-size: 10.5px; font-weight: 700; line-height: 1.25; text-shadow: 0 1px 2px rgba(0,0,0,.4);
  max-width: 320px;
}
.wc-bottom { display: flex; gap: 6px; align-items: baseline; padding: 4px 10px; font-size: 11.5px; }
.wc-bottom b { color: #c00; }

/* Bảng giải nghĩa từng mã trong panel "Hướng dẫn nhập liệu" */
table.code-legend { width: 100%; border-collapse: collapse; margin: 3px 0 2px; font-size: 11.5px; }
table.code-legend td { border-bottom: 1px dotted #dfe3e8; padding: 2px 4px; vertical-align: top; }
table.code-legend td.c {
  width: 58px; font-family: Consolas, "Courier New", monospace; font-weight: 700;
  color: #0b5cab; white-space: nowrap;
}

/* ---- Hồ sơ hải quan (Hồ sơ nhập khẩu / xuất khẩu) — theo ECUS5 ---- */
.hs-wrap { display: flex; gap: 10px; align-items: flex-start; }
.hs-left { width: 300px; flex: 0 0 300px; }
.hs-right { flex: 1 1 auto; min-width: 0; border: 1px solid #c9d3de; padding: 8px; }
.hs-tab { display: inline-block; border: 1px solid #c9d3de; border-bottom: none;
  background: #eef3f8; padding: 3px 12px; font-size: 11px; margin: -14px 0 8px -2px; }
.hs-status { color: #1a5fb4; }
.hs-no { color: #c00; }
.hs-listbar { display: flex; align-items: center; justify-content: space-between; margin: 8px 0 3px; }
.hs-listtitle { color: #1a5fb4; font-size: 11px; }
.hs-addtype { color: #1a5fb4; font-size: 11px; cursor: pointer; }
.hs-addtype.off { color: #9aa5b1; cursor: default; }
.hs-act { cursor: pointer; font-size: 13px; }
.hs-act.del { color: #c00; }
.hs-file { font-size: 11px; }
.hs-help { font-size: 11px; line-height: 1.45; min-height: 120px; }
.hs-aibar { display: flex; justify-content: flex-end; margin-top: 6px; }

/* ---- Lưới "Danh sách hàng" — kích thước đo trên ECUS5-VNACCS 6.0.257 ----
   Bề rộng từng cột đặt trong <colgroup> (xem defaultGoodsColumns): cột chỉ dẫn 19px,
   STT 29, Mã hàng 96, Tên hàng 380, Mã HS 66, Xuất xứ 75, Lượng 77, Đơn vị tính 76…
   ECUS: dòng tiêu đề 21px (chữ nhỏ, xuống dòng trong ô), dòng dữ liệu 34px,
   nền trắng không kẻ sọc, dòng hiện tại đánh dấu ▶ ở cột ngoài cùng,
   ba cột STT / Mã hàng / Tên hàng đóng băng khi cuộn ngang. */
table.goods-grid { table-layout: fixed; width: max-content; min-width: 100%; font-size: 11.5px; }
table.goods-grid th {
  height: 21px; padding: 0 2px; font-weight: 600; font-size: 9.5px; line-height: 10px;
  white-space: normal; overflow-wrap: break-word; text-align: center; vertical-align: middle;
}
table.goods-grid td {
  height: 34px; padding: 1px 4px; vertical-align: middle; line-height: 1.2;
  overflow: hidden; text-overflow: ellipsis; background: #fff;
}
table.goods-grid td:not(.num) { white-space: normal; overflow-wrap: break-word; }
table.goods-grid tbody tr:nth-child(even) td { background: #fff; }
table.goods-grid tbody tr.sel td { background: #fff; }
table.goods-grid td.ro { background: #ededed !important; }
table.goods-grid td.ed { cursor: text; }
table.goods-grid td.editing { padding: 0; }
table.goods-grid td.ind { text-align: center; color: #333; padding: 0; font-size: 10px; }
table.goods-grid tr.newrow td { cursor: cell; height: 30px; }
table.goods-grid .cell-ed {
  width: 100%; height: 30px; box-sizing: border-box; border: 1px solid #3b7dd8;
  padding: 0 3px; font: inherit; background: #fff; outline: none;
}
table.goods-grid .cell-ed.num { text-align: right; }
/* Cột chỉ dẫn + ba cột đầu đóng băng khi cuộn ngang */
table.goods-grid .frz { position: sticky; z-index: 1; background: #fff; }
table.goods-grid thead .frz { z-index: 3; background: var(--grid-head); }
table.goods-grid .frzi { left: 0; background: var(--grid-head); }
table.goods-grid .frz0 { left: 19px; }
table.goods-grid .frz1 { left: 48px; }
table.goods-grid .frz2 { left: 144px; }
.goods-wrap { overflow: auto; height: calc(var(--vh, 100vh) - 330px); }

/* ---- Danh mục hàng (Thường dùng) — đo trên ECUS5-VNACCS 6.0.257 ----
   Cửa sổ ~900px, lưới gõ thẳng: chỉ 4 cột Mã / Tên / Đơn vị tính / Mã HS sửa được,
   các cột còn lại ECUS tô nền xám và không cho gõ. */
table.itemcat-grid { table-layout: fixed; width: max-content; min-width: 100%; font-size: 11.5px; }
table.itemcat-grid th {
  height: 24px; padding: 0 3px; font-weight: 600; font-size: 10px; line-height: 10.5px;
  white-space: normal; overflow-wrap: break-word; text-align: center; vertical-align: middle;
}
table.itemcat-grid td {
  height: 30px; padding: 1px 4px; vertical-align: middle; background: #fff;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
table.itemcat-grid tbody tr:nth-child(even) td { background: #fff; }
table.itemcat-grid tbody tr.sel td { background: #fff; }
table.itemcat-grid td.ro { background: #ededed !important; }
table.itemcat-grid td.ed { cursor: text; }
table.itemcat-grid td.editing { padding: 0; }
table.itemcat-grid td.ind { text-align: center; padding: 0; font-size: 10px; width: 19px; }
table.itemcat-grid tr.newrow td { cursor: cell; }
table.itemcat-grid .cell-ed {
  width: 100%; height: 26px; box-sizing: border-box; border: 1px solid #3b7dd8;
  padding: 0 3px; font: inherit; background: #fff; outline: none;
}
.itemcat-wrap { height: 415px; overflow: auto; }
.itemcat .grid-hint { margin-top: 2px; }
.fbtn.left { margin-right: auto; flex: 0 0 auto; }

/* Khung "Bước tiếp theo" ở cột trái — bám theo 4 giai đoạn khai báo của ECUS. */
.nextstep { border: 1px solid #c9d3de; background: #f4f8fd; padding: 5px 7px; margin: 6px 0 2px;
  font-size: 11px; line-height: 1.45; }
.nextstep .ns-h { font-weight: 700; color: #1a5fb4; margin-bottom: 2px; }
.nextstep .ns-l { margin-bottom: 3px; }
.nextstep .ns-src { color: #6b7480; font-size: 10px; margin-top: 2px; }

/* Tiêu đề nhóm nhỏ trong tab "Kết quả xử lý tờ khai" (ECUS kẻ một đường mảnh bên phải nhãn). */
.gb .sec-h { font-weight: 600; margin: 9px 0 4px; border-bottom: 1px solid #c9d3de; padding-bottom: 2px; }
.gb .sec-h.muted { color: #6b7480; font-weight: 500; }

/* Ô ngày kiểu ECUS: khuôn __/__/____ nên dùng phông đều chữ để dấu gạch chéo
   không nhảy chỗ khi gõ. */
input.date-mask { font-family: Consolas, 'Courier New', monospace; letter-spacing: .4px; }

/* Ô số giấy phép dòng 1 — ECUS để rộng hết bề ngang khối. */
.w420 { width: 420px; }

/* ================= Màn hình "Tìm tờ khai" (dựng theo ảnh ECUS5 25/09/2026) */
.dl-wrap { display: flex; flex-direction: column; gap: 6px; }
.dl-cond { border: 1px solid var(--panel-border); background: #f6f8fb; padding: 5px 7px; }
.dl-cond .r1, .dl-cond .r2 { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.dl-cond .r2 { margin-top: 5px; }
.dl-cond .lb { color: #22405c; }
.dl-cond .help { margin-left: auto; color: #1a6bb5; text-decoration: underline; cursor: default; }
.rd { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.rd input { margin: 0; }

.dl-main { display: flex; gap: 6px; align-items: stretch; }
.dl-left { width: 300px; flex: 0 0 300px; display: flex; flex-direction: column; }
.dl-tabs { display: flex; gap: 2px; }
.dl-tabs .tb { border: 1px solid var(--panel-border); border-bottom: 0; background: #e8edf3;
  padding: 3px 10px; cursor: default; }
.dl-tabs .tb.on { background: #fff; font-weight: 600; }
.dl-tree { border: 1px solid var(--panel-border); background: #fff; flex: 1;
  overflow: auto; padding: 4px 2px; min-height: 340px; max-height: 52vh; }
.dl-node { display: flex; align-items: center; gap: 4px; padding: 2px 6px; cursor: default; white-space: nowrap; }
.dl-node:hover { background: #eef4fb; }
.dl-node.on { background: #cde3f7; }
.dl-node.off { color: #8a97a5; }
.dl-node .ic { color: #c9902a; width: 12px; display: inline-block; }
.dl-node .cnt { margin-left: 5px; background: #e3ebf4; border: 1px solid #c3d2e2;
  border-radius: 8px; padding: 0 5px; font-size: 11px; color: #22405c; }
.dl-tree .lv1 { padding-left: 12px; }
.dl-tree .lv2 { padding-left: 16px; }

.dl-right { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.dl-grouprow { display: flex; align-items: center; gap: 10px; padding: 3px 6px;
  border: 1px solid var(--panel-border); border-bottom: 0; background: #f6f8fb; }
.dl-grouprow .lb { color: #1a6bb5; font-weight: 600; }
.dl-grouprow .sp { flex: 1; }
.dl-grid { flex: 1; min-height: 340px; max-height: 52vh; }
.dl-grid table.grid { min-width: 1240px; }
.dl-grid td.mk { color: #1a6bb5; text-align: center; }
.dl-grid td.st { color: #1a6bb5; }
.dl-grid tr.sel > td { background: #cde3f7; }

.dl-pager { display: flex; align-items: center; gap: 3px; padding: 3px 6px;
  border: 1px solid var(--panel-border); border-top: 0; background: #f6f8fb; }
.dl-pager .pg { border: 1px solid transparent; background: none; cursor: pointer; padding: 0 5px; }
.dl-pager .pg:hover { border-color: #9dbcd8; background: #e8f0f9; }
.dl-pager .pgbox { border: 1px solid var(--panel-border); background: #fff;
  min-width: 34px; text-align: center; padding: 0 5px; }
.dl-pager .dl-count { margin-left: 14px; color: #22405c; }

/* ============ Màn "Hóa đơn thương mại" (IVA) — dựng theo ECUS5 25/09/2026 */
.iva-wrap { display: flex; gap: 7px; align-items: stretch; }
.iva-left { width: 250px; flex: 0 0 250px; display: flex; flex-direction: column; gap: 5px; }
.iva-left .st-new { color: #1a6bb5; }
.iva-left .ops { display: flex; flex-direction: column; gap: 3px; }
.iva-left .op-btn { border: 1px solid var(--panel-border); background: #f2f6fa;
  padding: 5px 8px; cursor: pointer; }
.iva-left .op-btn:hover { background: #e2eefb; }
.iva-left .op-btn.off { color: #9aa6b2; background: #f6f7f8; cursor: default; }
.iva-guide-tabs { display: flex; gap: 2px; margin-top: 4px; }
.iva-guide-tabs .tb { border: 1px solid var(--panel-border); border-bottom: 0; background: #e8edf3;
  padding: 3px 8px; cursor: default; font-size: 12px; }
.iva-guide-tabs .tb.on { background: #fff; font-weight: 600; }
.iva-left .guide-box { border: 1px solid var(--panel-border); background: #fff;
  flex: 1; min-height: 200px; overflow: auto; padding: 6px 7px; font-size: 12px; line-height: 1.45; }

.iva-right { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.iva-tabs { display: flex; gap: 2px; }
.iva-tabs .tb { border: 1px solid var(--panel-border); border-bottom: 0; background: #e8edf3;
  padding: 3px 11px; cursor: pointer; }
.iva-tabs .tb.on { background: #fff; font-weight: 600; }
.iva-pane { border: 1px solid var(--panel-border); background: #fff; padding: 7px 9px;
  overflow: auto; max-height: 62vh; }
.iva-pane .sub { font-weight: 600; color: #22405c; margin: 4px 0 2px; }
.iva-pane .req { color: #c62828; font-weight: 700; }
.iva-pane .lk { display: inline-flex; align-items: center; gap: 3px; }
.iva-refs td { padding: 1px 2px; }
.gridhelp { color: #1a6bb5; padding: 3px 2px; }

/* ===== Cổng tra cứu hóa đơn điện tử (bố cục theo trang tra cứu thật, 25/09/2026)
   Chỉ mượn cách bố trí; không dùng tên, logo hay màu thương hiệu của nhà cung cấp nào. */
.wb-hero { background: linear-gradient(180deg, #2f6fae 0%, #3f82c3 100%); color: #fff;
  padding: 26px 18px 20px; text-align: center; border: 1px solid #27598c; }
.wb-hero-t { font-size: 24px; font-weight: 600; letter-spacing: .2px; }
.wb-hero-q { display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; margin-left: 10px; border: 1px solid #fff; border-radius: 50%;
  font-size: 13px; cursor: pointer; vertical-align: middle; }
.wb-hero-q:hover { background: rgba(255, 255, 255, .18); }
.wb-hero-row { display: flex; justify-content: center; align-items: center; gap: 10px; margin-top: 16px; }
.wb-hero-row .wb-mtc { width: 480px; max-width: 60vw; border-radius: 18px; border: 0;
  padding: 8px 16px; font-size: 14px; }
.wb-hero-btn { border-radius: 18px; padding: 8px 26px; background: #56b7c6; color: #fff;
  border: 0; font-size: 14px; cursor: pointer; }
.wb-hero-btn:hover { background: #45a3b1; }
.wb-hero-note { margin-top: 12px; font-size: 12px; opacity: .95; }
.wb-tchd-res { margin-top: 10px; }

.wb-tchd { border: 1px solid var(--panel-border); background: #fff; }
.wb-tchd-head { display: flex; align-items: center; padding: 7px 10px; border-bottom: 1px solid #e3e8ee; }
.wb-tchd-head .t { color: #1a6bb5; font-weight: 600; }
.wb-tchd-head .x { margin-left: auto; cursor: pointer; font-size: 15px; color: #55606b; }
.wb-tchd-sub { display: flex; align-items: center; gap: 4px; padding: 6px 10px;
  color: #7b8794; border-bottom: 1px solid #e3e8ee; }
.wb-tchd-sub .sp, .wb-tchd-bar .sp { flex: 1; }
.wb-tchd-sub .ic, .wb-tchd-bar .ic { cursor: pointer; padding: 0 7px; font-size: 15px; }
.wb-tchd-sub .ic { color: #1a6bb5; }
.wb-tchd-bar { display: flex; align-items: center; gap: 6px; background: #4a4a4a; color: #e8e8e8;
  padding: 5px 10px; }
.wb-tchd-bar .z { display: inline-flex; align-items: center; gap: 4px; }
.wb-tchd-bar .zb { width: 26px; border: 1px solid #6d6d6d; background: #5a5a5a; color: #fff;
  cursor: pointer; }
.wb-tchd-bar .zb:hover { background: #6d6d6d; }
.wb-tchd-bar .wb-zoom { background: #fff; color: #222; border: 1px solid #6d6d6d; }
.wb-tchd-body { background: #545454; padding: 10px; height: 60vh; overflow: auto; }
.wb-tchd-body .wb-doc { width: 100%; height: 100%; border: 0; background: #fff; display: block; }

/* ===== UltraViewer giả lập + ECUSSign Pro giả lập (trình ký từ xa 25/09/2026) */
.uv-note { border: 1px solid #e0c07a; background: #fdf6e3; padding: 6px 9px; margin-bottom: 8px; }
.uv-wrap, .uv-remote { display: flex; gap: 8px; align-items: stretch; }
.uv-left { flex: 1; min-width: 0; }
.uv-msgbar { margin-top: 5px; min-height: 18px; }
.uv-msgbar .err { color: #c62828; }
.uv-msgbar .ok { color: #1b6b2f; }

.uv-chat { width: 320px; flex: 0 0 320px; border: 1px solid var(--panel-border);
  background: #fff; display: flex; flex-direction: column; min-height: 330px; }
.uv-chat-h { background: #eef4fb; border-bottom: 1px solid var(--panel-border); padding: 5px 8px; font-weight: 600; }
.uv-chat-list { flex: 1; overflow: auto; padding: 7px; display: flex; flex-direction: column; gap: 6px; }
.uv-msg { max-width: 84%; border-radius: 8px; padding: 5px 8px; font-size: 12px; }
.uv-msg.them { background: #eef1f5; align-self: flex-start; }
.uv-msg.me { background: #d9ecff; align-self: flex-end; }
.uv-msg .w { font-weight: 600; font-size: 11px; color: #46586b; }
.uv-msg .t { white-space: pre-wrap; }
.uv-msg .h { font-size: 10px; color: #8a97a5; text-align: right; }
.uv-chat-f { display: flex; gap: 5px; padding: 6px; border-top: 1px solid var(--panel-border); }
.uv-chat-in { flex: 1; }

.uv-remote .uv-desktop { flex: 1; min-height: 360px; position: relative;
  background: linear-gradient(160deg, #1e3c5a 0%, #2b5c86 100%); border: 1px solid #16324d;
  padding: 14px; display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
.uv-icon { width: 92px; text-align: center; color: #fff; cursor: pointer; }
.uv-icon .ic { font-size: 30px; }
.uv-icon .t { white-space: pre-line; font-size: 12px; margin-top: 3px; text-shadow: 0 1px 2px rgba(0,0,0,.6); }
.uv-icon:hover { background: rgba(255,255,255,.12); border-radius: 4px; }
.uv-icon.off { opacity: .55; cursor: default; }
.uv-icon.off:hover { background: none; }
.uv-taskbar { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center;
  gap: 8px; background: rgba(0,0,0,.45); color: #dfe8f1; padding: 4px 10px; font-size: 12px; }
.uv-taskbar .sp { flex: 1; }

/* ------------------------------------------------- PQS (kiểm dịch thực vật)
   Bố cục dựng theo màn hình thật của phần mềm PQS (video hướng dẫn chính thức).
   Không sao chép biểu tượng/nhãn hiệu; chỉ dựng khung và tên chỉ tiêu. */
.pq-body { background: #eef2f6; }
.pq-root { display: flex; flex-direction: column; gap: 5px; padding: 6px; height: 100%;
  box-sizing: border-box; overflow: auto; font-size: 12px; }
.pq-top { display: flex; align-items: center; gap: 7px; background: #f4f7fa;
  border: 1px solid #c3d2e2; padding: 5px 7px; }
.pq-spacer { flex: 1; }
.pq-note { color: #8a3a3a; font-size: 11px; }
.pq-lb { color: #22405c; white-space: nowrap; }
.pq-i { border: 1px solid #9fb6cc; background: #fff; padding: 2px 4px; font-size: 12px;
  font-family: inherit; }
.pq-i.pq-n { text-align: right; }
.pq-i.pq-cell { width: 100%; border: 0; background: transparent; }
.pq-b { border: 1px solid #a8bccf; background: linear-gradient(#fdfefe, #e7eef5);
  padding: 2px 8px; font-size: 12px; font-family: inherit; cursor: default; }
.pq-b:hover { background: #e2edf7; }
.pq-b.pq-new { font-weight: 600; }
.pq-b.pq-ok { font-weight: 600; }
.pq-b.pq-ico { padding: 1px 5px; }
.pq-list { border: 1px solid #c3d2e2; background: #fff; max-height: 210px; overflow: auto; }
.pq-tb { border-collapse: collapse; width: 100%; font-size: 12px; }
.pq-tb th { background: #eef3f8; border: 1px solid #ccd8e4; padding: 4px 6px;
  font-weight: 600; color: #22405c; text-align: left; white-space: nowrap; }
.pq-tb td { border: 1px solid #dde5ed; padding: 2px 5px; white-space: nowrap; }
.pq-tb tbody tr:hover { background: #f2f8ff; }
.pq-tb tbody tr.on { background: #cde3f7; }
.pq-empty { text-align: center; color: #8a97a5; padding: 16px 0 !important; }
.pq-panel { border: 1px solid #7ea6c8; background: #cfe0f0; }
.pq-title { background: linear-gradient(#3f83b5, #2f6b96); color: #fff; padding: 4px 8px;
  display: flex; align-items: center; font-weight: 600; }
.pq-title-b { margin-left: auto; cursor: default; padding: 0 6px; }
.pq-title-b:hover { background: #c0392b; }
.pq-row { display: flex; align-items: center; gap: 6px; padding: 3px 8px; flex-wrap: wrap; }
.pq-row.pq-blue { background: #c4d9ec; }
.pq-row.pq-btns { justify-content: flex-start; }
.pq-two { display: flex; gap: 6px; align-items: stretch; }
.pq-two > .pq-blk { flex: 1; min-width: 0; background: #c4d9ec; border: 1px solid #a9c4dd;
  padding: 3px 0; }
.pq-link { color: #12518c; text-decoration: underline; cursor: default; font-weight: 600; }
.pq-link.pq-hint { font-weight: 400; }
.pq-goods, .pq-msg { border: 1px solid #a9c4dd; background: #fff; margin: 0 4px 4px;
  max-height: 180px; overflow: auto; }
.pq-foot { display: flex; align-items: center; gap: 6px; padding: 5px 8px; background: #eef3f8;
  border-top: 1px solid #a9c4dd; }
.pq-ctx { position: fixed; z-index: 9999; background: #fff; border: 1px solid #a8bccf;
  box-shadow: 0 3px 10px rgba(0,0,0,.2); min-width: 140px; font-size: 12px; }
.pq-ctx .it { padding: 4px 14px; cursor: default; }
.pq-ctx .it:hover { background: #cde3f7; }
.pq-permit .pq-row { padding: 3px 4px; }

/* Tài khoản khai báo VNACCS hiện ngay dưới khối doanh nghiệp Việt Nam trong Xưởng chứng từ */
.dg-acc { margin-top: 8px; padding: 6px 8px; background: #f2f7fb; border: 1px solid #b9d2e8;
  border-radius: 4px; }
.dg-acc .h { font-weight: 700; color: #1b5183; margin-bottom: 4px; }
.dg-acc .dg-kv .v { font-family: Consolas, 'Courier New', monospace; }
.dg-acc .n { margin-top: 5px; color: #5a7286; line-height: 1.5; font-size: 11.5px; }

/* ===================================================================== */
/* Cửa sổ "Thông tin tờ khai … đã đăng ký" (bản copy Hải quan trả về sau  */
/* nghiệp vụ 2 IDA/EDA) và hộp thoại Yes/No kiểu ECUS.                    */
/* Bố cục đọc từ video hướng dẫn chính thức Thái Sơn (youtu.be/myzXTb_H1bQ) */
/* ===================================================================== */
.ida-wrap { display: flex; gap: 10px; align-items: stretch; }
.ida-left { width: 310px; flex: 0 0 310px; display: flex; flex-direction: column; gap: 8px; }
.ida-left .gb { margin: 0; }
.ida-left .gb.grow { flex: 1 1 auto; }
.ida-left input.ro { background: #ededed; border: 1px solid #b8c2cc; height: 20px; padding: 0 5px; }
.ida-left input.ro.right-text { text-align: right; }
.ida-left input.ro.red { color: #c0392b; font-weight: 700; background: #f3f3f3; }
.ida-left .unit { margin-left: 4px; color: #4a5560; font-size: 11.5px; }
.ida-total { margin-top: 4px; padding-top: 5px; border-top: 1px solid #c9d3de; }
.ida-guide { font-size: 12px; line-height: 1.55; color: #1c2b3a; }
.ida-guide div + div { margin-top: 3px; }

.ida-right { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.ida-tabs { display: flex; gap: 2px; border-bottom: 1px solid #9fb3c8; }
.ida-tabs .t {
  padding: 4px 11px; font-size: 12px; cursor: pointer; background: #e4ebf2;
  border: 1px solid #9fb3c8; border-bottom: none; border-radius: 3px 3px 0 0; color: #33475b;
}
.ida-tabs .t.active { background: #fff; font-weight: 600; margin-bottom: -1px; padding-bottom: 5px; }
.ida-body { padding: 8px 4px 2px; overflow: auto; max-height: 46vh; }
.ida-body input.ro { background: #ededed; border: 1px solid #b8c2cc; height: 20px; padding: 0 5px; }
.ida-body input.ro.red { color: #c0392b; font-weight: 700; }
.ida-body input.ro.right-text { text-align: right; }
.ida-body .sep { margin: 0 4px; color: #4a5560; }
.ida-body .ins-line { padding: 3px 0; border-bottom: 1px dotted #d4dbe2; font-size: 12px; }

.ecus-ask { display: flex; gap: 12px; align-items: center; padding: 10px 6px; }
.ecus-ask .q {
  width: 34px; height: 34px; flex: 0 0 34px; border-radius: 50%; background: #dbeafe;
  color: #1b5183; font-size: 22px; font-weight: 700; display: flex; align-items: center;
  justify-content: center;
}
.ecus-ask .tx { font-size: 13px; line-height: 1.5; }
.fbtn.w90 { min-width: 90px; }

/* ECUS package-unit combo: compact code field and three-column popup. */
.package-unit { display:flex; flex:0 0 82px; width:82px; gap:0; align-items:stretch; }
.package-unit input { width:60px; min-width:0; flex:1; border-right:0; }
.package-unit button { width:22px; min-width:22px; padding:0; border:1px solid #999; background:#eee; color:#555; }
.package-unit-popup { position:fixed; width:394px; max-width:calc(100vw - 8px); overflow:auto; z-index:20000; background:#fff; border:1px solid #777; box-shadow:2px 3px 5px #0003; }
.package-unit-popup table { border-collapse:collapse; width:100%; table-layout:fixed; font-size:13px; }
.package-unit-popup th,.package-unit-popup td { padding:5px 3px; border-right:1px solid #ccc; text-align:left; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-weight:normal; }
.package-unit-popup th { position:sticky; top:0; background:#c9c9c9; border-bottom:1px solid #999; }
.package-unit-popup th:first-child { width:76px; }
.package-unit-popup th:nth-child(2) { width:120px; }
.package-unit-popup tbody tr:nth-child(even) { background:#eee; }
.package-unit-popup tbody tr.selected { background:#0078d7; color:white; cursor:default; }

/* Fields observed in ECUS 6.0.257 on 30 September 2026. */
.ecus-code-select { display:inline-block; position:relative; flex-shrink:0; height:21px; }
.ecus-code-select select { width:100%; height:100%; }
.ecus-code-select select option { color:#222; }
.ecus-code-caption { position:absolute; left:1px; right:16px; top:1px; bottom:1px; background:var(--field-bg); padding:0 3px; line-height:19px; pointer-events:none; overflow:hidden; white-space:nowrap; }
.ecus-code-select.disabled .ecus-code-caption { background:var(--field-ro-bg); color:#3a3f45; }
.ecus-code-select:has(select.err) .ecus-code-caption { background:#fff3f3; }
.invoice-ecus > .frow { display:grid; grid-template-columns:220px 200px 236px 220px; gap:6px; }
.invoice-ecus > .frow > .flabel { width:auto; text-align:left; }
.invoice-ecus > .frow > :nth-child(3) { padding-left:12px; }
.invoice-ecus > .frow > :nth-child(4) { justify-self:end; }

.g5 .g5-cell > .ecus-code-select.g5-code { width:74px; }

/* Match the supplied ECUS row without changing other form controls. */
.storage-location-row { gap:6px; flex-wrap:nowrap; }
.storage-location-row > .flabel { width:auto; white-space:nowrap; }
.storage-location-row > .frow { min-width:0; }
.storage-location-row .storage-code { width:80px; flex:0 0 80px; }
.storage-location-row .storage-name { flex:1 1 auto; min-width:0; background:#fff; }

/* ===================================================================== */
/* Thẻ "Thông tin Container" của TỜ KHAI XUẤT KHẨU — lưới 50 ô số container */
/* đúng như ECUS5-VNACCS 6.0.257 (đọc trên máy ông chủ 02/10/2026).        */
/* ===================================================================== */
.cont50 { display: grid; grid-template-columns: repeat(5, 1fr); gap: 3px 10px; margin-top: 6px; }
.cont50-cell { display: flex; align-items: center; gap: 5px; }
.cont50-cell .n { width: 22px; text-align: right; color: #5a7286; font-size: 11.5px; }
.cont50-in { flex: 1 1 auto; min-width: 0; height: 20px; padding: 0 5px;
  border: 1px solid #b8c2cc; font-family: Consolas, 'Courier New', monospace; text-transform: uppercase; }
.cont50-in[readonly] { background: #ededed; }
@media (max-width: 1100px) { .cont50 { grid-template-columns: repeat(3, 1fr); } }

/* ===================================================================== */
/* Màn "Đăng ký tờ khai sửa từ tờ khai" (khai bổ sung AMA) — bố cục đọc    */
/* trên video hướng dẫn chính thức Thái Sơn youtu.be/myzXTb_H1bQ (32:40).  */
/* ===================================================================== */
.ama-wrap { display: flex; gap: 10px; align-items: stretch; margin-top: 8px; }
.ama-ops { width: 290px; flex: 0 0 290px; display: flex; flex-direction: column; gap: 5px; }
.ama-ops .flabel { width: auto; margin-right: 6px; }
.ama-st { color: #1b5183; }
.ama-op {
  padding: 5px 9px; font-size: 12px; cursor: pointer; border: 1px solid #9fb3c8;
  border-radius: 3px; background: linear-gradient(#fdfdfe, #eef3f8); color: #1c2b3a;
}
.ama-op:hover { background: linear-gradient(#f4f9ff, #dfeaf5); }
.ama-op.off { color: #9aa5af; background: #f2f4f6; border-color: #d6dde4; cursor: default; }
.ama-right { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.ama-body { padding: 8px 4px 2px; overflow: auto; max-height: 48vh; }
.ama-body input.ro { background: #ededed; border: 1px solid #b8c2cc; height: 20px; padding: 0 5px; }
.ama-body input.ro.red { color: #c0392b; font-weight: 700; }
.ama-body .sep { margin: 0 4px; color: #4a5560; }

/* ===================================================================== */
/* ECUSSIGN_PRO giả lập — bố cục đọc trên máy khách qua UltraViewer       */
/* ngày 02/10/2026: thanh menu, khối Tìm kiếm, lưới 13 cột, thanh trạng   */
/* thái. Không chép ảnh nền, logo hay số tổng đài của phần mềm thật.      */
/* ===================================================================== */
.es-pro .es-menu {
  display: flex; align-items: center; gap: 2px; flex-wrap: wrap;
  padding: 3px 2px 6px; border-bottom: 1px solid #c9d3de; margin-bottom: 6px;
}
.es-pro .es-menu .sp { flex: 1 1 auto; }
.es-mi {
  display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 8px;
  font-size: 12px; color: #1c2b3a; background: none; border: 1px solid transparent;
  border-radius: 3px; cursor: pointer; white-space: nowrap;
}
.es-mi:hover { background: #e8f0f9; border-color: #b7cde6; }
.es-mi .ic { font-size: 13px; line-height: 1; }
.es-mi .cv { color: #6b7480; font-size: 10px; }
.es-mi.round { border: 1px solid #cfd8e2; border-radius: 13px; background: #fbfcfe; }
.es-drop { position: relative; display: inline-block; }
.es-drop-list {
  display: none; position: absolute; right: 0; top: 28px; z-index: 30; min-width: 220px;
  background: #fff; border: 1px solid #9aa7b4; box-shadow: 2px 3px 6px #0003;
}
.es-drop.on .es-drop-list { display: block; }
.es-drop-list .it {
  display: flex; justify-content: space-between; gap: 18px;
  padding: 6px 10px; font-size: 12px; cursor: pointer;
}
.es-drop-list .it:hover { background: #2a6fb5; color: #fff; }
.es-drop-list .it .hk { color: #6b7480; }
.es-drop-list .it:hover .hk { color: #dce8f5; }

.es-pro .es-find { margin: 0 0 6px; }
.es-pro .es-all { display: inline-flex; align-items: center; gap: 5px; margin: 5px 0 3px; }
.es-pro .es-grid th { white-space: nowrap; }
.es-pro .es-grid td.st { font-weight: 600; }
.es-pro .es-status {
  display: flex; align-items: center; gap: 10px; margin-top: 6px; padding-top: 5px;
  border-top: 1px solid #c9d3de; font-size: 11.5px; color: #43505c;
}
.es-pro .es-status .sp { flex: 1 1 auto; }
.es-pro .es-status .acc { font-weight: 600; color: #17324d; }

/* Màn "Thiết lập tài khoản được trình ký" */
.es-admin .gb { margin: 0 0 10px; }
.es-admin input.ro { background: var(--field-ro-bg); border: 1px solid #b8c2cc; height: 21px; padding: 0 5px; }
.es-admin .es-cert-no { color: #c0392b; font-weight: 700; }
.es-admin .grid td input.cell-ed, .es-admin .grid td select.cell-ed {
  width: 100%; height: 19px; border: 1px solid transparent; background: transparent; font-size: 12px;
}
.es-admin .grid tr.sel td input.cell-ed, .es-admin .grid tr.sel td select.cell-ed { background: #fff; border-color: #9fb3c8; }

/* ===================================================================== */
/* Màn F4 "Thông tin hàng tờ khai" — bố cục đọc trên ECUS 6.0.257 ngày    */
/* 03/10/2026. Ô nền vàng = chỉ tiêu hệ thống tính / Hải quan trả về.     */
/* ===================================================================== */
.gd-layout { display: grid; grid-template-columns: 210px minmax(700px, 1fr); gap: 10px; }
.goods-detail-help { border: 1px solid #aeb4bc; background: #fff; padding: 8px; overflow: auto; max-height: 56vh; }
.gd-help-title { font-weight: 600; margin-bottom: 8px; }
.goods-help-text { line-height: 1.45; overflow-wrap: anywhere; }
.goods-help-text p { margin: 6px 0; }
.gd-right { min-width: 0; display: flex; flex-direction: column; }

.gd-top { display: flex; align-items: center; gap: 4px; padding-bottom: 6px; border-bottom: 1px solid #c9d3de; }
.gd-top .sp { flex: 1 1 auto; }
.gd-nav { width: 22px; height: 20px; padding: 0; border: 1px solid #9aa0a7; background: linear-gradient(#fdfdfd, #eceef1); cursor: pointer; font-size: 10px; }
.gd-nav:disabled { opacity: .4; cursor: default; }
.gd-pos { min-width: 30px; height: 20px; border: 1px solid #b8c2cc; background: #fff; text-align: center; line-height: 20px; font-size: 12px; }
.gd-auto { margin-left: 14px; }

.gd-form { padding-top: 8px; overflow: auto; max-height: 52vh; }
.gd-row { display: grid; grid-template-columns: 238px minmax(258px, 1fr) 182px minmax(230px, 1fr); gap: 5px; align-items: center; margin-bottom: 5px; }
.gd-row.full { grid-template-columns: 238px minmax(0, 1fr); }
.gd-row.top { align-items: start; }
.gd-lab { line-height: 1.25; }
.gd-lab.b { font-weight: 600; }
.gd-lab.blue { color: #1b5183; }
.gd-lab.req::after, .gd-lab2.req::after { content: ' *'; color: var(--req); font-weight: 700; }
.gd-lab2 { line-height: 1.2; }
.gd-lab2 .sub { font-size: 11px; color: #5a6672; }
.gd-c { display: flex; align-items: center; gap: 4px; min-width: 0; flex-wrap: nowrap; }
.gd-c > button, .gd-c > a { white-space: nowrap; flex: 0 0 auto; }
.gd-c .gd-mid { margin-left: 14px; white-space: nowrap; }
.gd-c.wide { grid-column: 2 / -1; }
.gd-c.grow > textarea { width: 100%; }
/* Ô hệ thống tính — ECUS tô NỀN VÀNG */
.gd-system { background: #ffffcf !important; }
.gd-adj { display: inline-flex; gap: 6px; align-items: center; }
.gd-adj-c { display: inline-flex; align-items: center; gap: 3px; }
.gd-adj-c .n { color: #5a6672; font-size: 11px; }

.gd-taxes { border-collapse: collapse; margin: 2px 0 6px; }
.gd-taxes th { padding: 2px 6px; font-size: 11.5px; font-weight: 600; text-align: center; white-space: pre-line; color: #2b3a47; }
.gd-taxes td { padding: 2px 4px; }
.gd-taxes td.gd-no { color: #5a6672; font-size: 11.5px; padding-right: 2px; }
.gd-taxes td > * { vertical-align: middle; }

/* Hộp "Thiết lập cột dữ liệu trong danh sách hàng tờ khai" */
.gc-list { display: flex; flex-direction: column; gap: 7px; padding: 4px 2px; }
.gc-row { display: flex; align-items: center; gap: 7px; }
.gc-row .n { width: 16px; color: #5a6672; }
.gc-row .blue { color: #1b5183; }

/* ===================================================================== */
/* "Khai báo cơ sở sản xuất" và "Tờ khai nộp phí hạ tầng cảng biển"       */
/* — bố cục đọc trên ECUS 6.0.257 ngày 03/10/2026.                        */
/* ===================================================================== */
.cssx-wrap { display: flex; gap: 10px; align-items: stretch; }
.cssx-left { width: 250px; flex: 0 0 250px; display: flex; flex-direction: column; gap: 5px; }
.cssx-left .flabel { width: auto; margin-right: 6px; }
.cssx-st { color: #1b5183; font-weight: 700; }
.cssx-ops { display: flex; flex-direction: column; gap: 4px; }
.cssx-op {
  padding: 5px 9px; font-size: 12px; cursor: pointer; border: 1px solid #9fb3c8;
  border-radius: 3px; background: linear-gradient(#fdfdfe, #eef3f8); color: #1c2b3a;
}
.cssx-op:hover { background: linear-gradient(#f4f9ff, #dfeaf5); }
.cssx-op.off { color: #9aa5af; background: #f2f4f6; border-color: #d6dde4; cursor: default; }
.cssx-help-body {
  flex: 1 1 auto; min-height: 120px; border: 1px solid #aeb4bc; background: #fff;
  padding: 7px; font-size: 11.5px; line-height: 1.45; white-space: pre-line; overflow: auto;
}
.cssx-right { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.cssx-body { padding: 8px 4px 2px; overflow: auto; max-height: 56vh; }
.cssx-trades { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px 10px; }
.cssx-law { display: flex; flex-direction: column; gap: 4px; }
.cssx-trade2 { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 18px; }
.cssx-trade-row { display: flex; align-items: center; gap: 6px; }
.cssx-trade-row .n { width: 130px; text-align: right; }

.fee-wrap { display: flex; flex-direction: column; }
.fee-wrap .frow { flex-wrap: wrap; }
.fee-wrap .flabel { white-space: pre-line; line-height: 1.25; }
.cssx-right .dl-tabs .tb { padding: 4px 8px; font-size: 11.5px; }

/* ---- Cửa sổ truyền: thanh tiến trình chạy trong lúc chờ Hải quan ---------- */
.tx-bar { height: 14px; border: 1px solid #a9b6c6; background: #fff; border-radius: 2px; overflow: hidden; margin-bottom: 7px; }
.tx-bar > i { display: block; height: 100%; width: 0; background: linear-gradient(#5ec45e, #2f9e2f); transition: width .45s ease; }
.tx-bar.run > i { background-image: linear-gradient(90deg, rgba(255,255,255,.35) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.35) 50%, rgba(255,255,255,.35) 75%, transparent 75%); background-size: 22px 22px; background-color: #2f9e2f; animation: tx-stripe .8s linear infinite; }
.tx-bar.err > i { background: linear-gradient(#e08a8a, #c23b3b); }
@keyframes tx-stripe { from { background-position: 0 0; } to { background-position: 22px 0; } }
.tx-failhead { font-weight: 700; color: #8c2020; margin-bottom: 3px; }

/* ---- Hộp "Windows Security — Danh sách chữ ký số" ------------------------- */
.wsec { padding: 2px 4px; }
.wsec-h1 { color: #1763a8; font-size: 17px; margin: 2px 0 1px; }
.wsec-h2 { color: #333; font-size: 12px; margin-bottom: 10px; }
.wsec-list { border-top: 1px solid #dfe4ea; padding-top: 8px; max-height: 42vh; overflow: auto; }
.wsec-cert { display: flex; gap: 10px; align-items: flex-start; border: 1px solid transparent; background: #f3f8fd; padding: 9px 10px; margin-bottom: 6px; cursor: pointer; }
.wsec-cert.sel { border-color: #7aaedb; background: #e4f0fb; }
.wsec-ico { width: 40px; height: 30px; flex: 0 0 40px; border: 1px solid #b98f2a; border-radius: 3px; background: linear-gradient(#f7e5a8, #e8c969); position: relative; }
.wsec-ico::after { content: ''; position: absolute; left: 6px; top: 7px; width: 14px; height: 12px; border: 1px solid #9a7a28; background: #d8b24e; }
.wsec-txt { min-width: 0; }
.wsec-owner { font-size: 14px; color: #222; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wsec-sub { font-size: 11px; color: #555; }
.wsec-link { font-size: 11px; color: #1763a8; }

/* ---- Hộp "kiểm tra mật khẩu của USB token" -------------------------------- */
.pinbox .pin-note { margin: 6px 0 4px 36px; color: #333; font-size: 11px; line-height: 1.5; max-width: 420px; }
.w150 { width: 150px; }

/* ---- Thông báo nộp phí --------------------------------------------------- */
.fee-red { color: #c00; font-weight: 700; }
.w130 { width: 130px; }
.fee-print .grid th, .fee-print .grid td { font-size: 11px; }
.grid td.c, .grid th.c { text-align: center; }
.grid td.r, .grid th.r { text-align: right; }

/* ---- Lời tra biểu thuế dưới lưới hàng ------------------------------------ */
.tax-notes { margin-top: 7px; border: 1px solid #c9d7e6; background: #f4f9ff; border-radius: 3px; padding: 7px 9px; }
.tax-notes .tn-head { font-weight: 700; color: #1b5183; margin-bottom: 4px; }
.tax-notes .tn-line { font-size: 11.5px; line-height: 1.55; color: #243b52; margin-bottom: 3px; }
.tax-notes .tn-line:before { content: '• '; color: #7a93ad; }
.tax-notes .tn-cite { font-size: 11px; color: #5d6b7a; border-top: 1px dashed #c9d7e6; margin-top: 5px; padding-top: 4px; }

/* Cột trái màn khai chứng từ số hóa: hai thẻ "Hướng dẫn nhập liệu" /
   "Thông điệp nghiệp vụ" và ô nội dung, như ECUS. */
.docform-rail .rail-tabs { padding: 6px 0 0; }
.docform-rail .rail-box {
  border: 1px solid #c3c7cc; background: #fff; padding: 7px 8px;
  font-size: 11.5px; color: #203040; min-height: 150px; max-height: 320px; overflow: auto;
}

/* ===== Kho "Danh sách chứng từ số hóa" (Hồ sơ hải quan) =====
   Bố cục hai cột: cây trạng thái bên trái, lưới 11 cột bên phải —
   soi trực tiếp trên ECUS5-VNACCS ngày 10/10/2026. */
.at .store-cols { display: flex; gap: 8px; align-items: stretch; margin-top: 6px; }
.at .store-left { width: 232px; flex: 0 0 232px; min-width: 0; }
.at .store-right { flex: 1; min-width: 0; }
.store-tree { max-height: 352px; overflow: auto; padding: 2px 0; }
.store-node {
  padding: 3px 6px 3px 20px; font-size: 11.5px; color: #203040;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer;
}
.store-node.root { padding-left: 6px; font-weight: 600; }
.store-node:hover { background: #eaf2fb; }
.store-node.on { background: #cfe3f7; }

/* ===== Xưởng chứng từ — chế độ gài sai số giữa các tờ ===== */
.w330 { width: 330px; }
.notice.warn { border-color: #e8c98a; background: #fdf6e6; color: #5d4210; }
.ok-text { color: #1d6b32; font-weight: 600; }
.err-text { color: #a3242b; font-weight: 600; }
.dg-flaw { margin-bottom: 8px; }
/* Chỉ áp cho dòng khóa–giá trị trong hộp sai số và trong hộp đáp án,
   không đụng vào bảng tóm tắt lô hàng đang hiển thị tốt. */
.dg-flaw .dg-kv, .modal .dg-kv { display: flex; gap: 8px; padding: 1px 0; align-items: baseline; }
.dg-flaw .dg-kv .k, .modal .dg-kv .k { width: 118px; flex: 0 0 118px; color: #4a5565; font-size: 11.5px; }
.dg-flaw .dg-kv .v, .modal .dg-kv .v { flex: 1; min-width: 0; }

/* ===== Số định danh hàng hóa (ba nút cạnh ô "Số vận đơn" của tờ khai xuất) ===== */
.w20 { width: 20px; }
/* Ô tích / nút chọn trong các cửa sổ kiểu ECUS. */
.at .ck { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px 2px 0;
          font-size: 12px; cursor: pointer; white-space: nowrap; }
/* Dòng chữ xanh dẫn kế hoạch 4098/KH-TCHQ — ECUS in đúng kiểu này. */
.gid-note { color: #1a4e8a; font-size: 12px; line-height: 1.55; margin: 2px 0 10px; }