:root {
  --bg: #f4f6fa; --surface: #ffffff; --surface-2: #eef2f8; --surface-3: #e3e9f2;
  --text: #0f1b2d; --muted: #5b6b81; --border: #dbe2ec;
  --navy: #0b2a4a; --primary: #0f4c8a; --primary-2: #1664b3; --gold: #c9a227; --gold-soft: #f6efd6;
  --ok: #138a63; --warn: #b86e00; --danger: #c0392b; --titan: #2b4a66;
  --shadow: 0 8px 24px rgba(11, 42, 74, .08); --radius: 14px;
  --mono: ui-monospace, "Cascadia Mono", Consolas, monospace;
}
:root[data-theme="dark"] {
  --bg: #0a111d; --surface: #111b2b; --surface-2: #172335; --surface-3: #1f2e44;
  --text: #e6edf7; --muted: #95a6bd; --border: #26364d;
  --navy: #07182b; --primary: #5aa2ef; --primary-2: #7ab6f5; --gold: #e0bb4a; --gold-soft: #2c2716;
  --ok: #37c28f; --warn: #f0a53a; --danger: #ef6b5b; --titan: #9db8d1;
  --shadow: 0 8px 24px rgba(0, 0, 0, .35);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body { font-family: "Be Vietnam Pro", system-ui, sans-serif; background: var(--bg); color: var(--text); line-height: 1.55; font-size: 15px; }
a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }
button, input, select, textarea { font: inherit; color: inherit; }
.mono { font-family: var(--mono); }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.hidden { display: none !important; }

/* ---------- Khung ứng dụng ---------- */
.app { display: grid; grid-template-columns: 250px 1fr; min-height: 100vh; }
.sidebar { background: var(--navy); color: #d7e2f0; display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; }
.brand { display: flex; align-items: center; gap: 10px; padding: 18px 18px 16px; border-bottom: 1px solid rgba(255,255,255,.08); }
.brand-mark { width: 38px; height: 38px; border-radius: 10px; background: linear-gradient(135deg, var(--gold), #f3d77a); color: #0b2a4a; display: grid; place-items: center; font-weight: 800; font-size: 15px; letter-spacing: .5px; }
.brand-name { font-weight: 800; font-size: 15px; color: #fff; line-height: 1.15; letter-spacing: .3px; }
.brand-sub { font-size: 11px; color: var(--gold); letter-spacing: 1.2px; }
.nav { padding: 12px 10px; display: flex; flex-direction: column; gap: 2px; flex: 1; overflow-y: auto; }
.nav a { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; color: #c5d3e6; font-weight: 500; font-size: 14px; }
.nav a:hover { background: rgba(255,255,255,.06); text-decoration: none; color: #fff; }
.nav a.active { background: rgba(201,162,39,.16); color: #fff; box-shadow: inset 3px 0 0 var(--gold); }
.nav .ico { width: 20px; text-align: center; }
.nav-sep { margin: 10px 12px 4px; font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: #7e93b0; }
.side-foot { padding: 14px 16px; border-top: 1px solid rgba(255,255,255,.08); font-size: 13px; }
.side-foot .user { color: #fff; font-weight: 600; }
.side-foot button { background: none; border: 0; color: #9fb3cf; cursor: pointer; padding: 0; margin-top: 4px; }
.side-foot button:hover { color: #fff; }

.main { min-width: 0; display: flex; flex-direction: column; }
.topbar { display: flex; align-items: center; gap: 12px; padding: 12px 24px; background: var(--surface); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 20; }
.topbar .quick { flex: 1; max-width: 560px; position: relative; }
.topbar .quick input { width: 100%; padding: 10px 14px 10px 38px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface-2); outline: none; }
.topbar .quick input:focus { border-color: var(--primary); background: var(--surface); }
.topbar .quick::before { content: "🔍"; position: absolute; left: 12px; top: 50%; transform: translateY(-50%); font-size: 14px; opacity: .6; }
.topbar .spacer { flex: 1; }
.icon-btn { width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface); cursor: pointer; display: grid; place-items: center; }
.menu-btn { display: none; }
.content { padding: 24px; max-width: 1280px; width: 100%; margin: 0 auto; }

/* ---------- Thành phần chung ---------- */
h1 { font-size: 26px; line-height: 1.25; margin-bottom: 6px; letter-spacing: -.01em; }
h2 { font-size: 19px; margin-bottom: 10px; }
h3 { font-size: 16px; margin-bottom: 8px; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; }
.card + .card { margin-top: 16px; }
.grid > .card + .card { margin-top: 0; } /* thẻ nằm trong lưới đã có khoảng cách của lưới: không cộng thêm lề làm lệch hàng */
.grid { display: grid; gap: 16px; }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.btn { display: inline-flex; align-items: center; gap: 7px; padding: 9px 16px; border-radius: 10px; border: 1px solid transparent; font-weight: 600; font-size: 14px; cursor: pointer; white-space: nowrap; }
.btn:hover { text-decoration: none; }
.btn-primary { background: var(--primary); color: #fff; }
.btn-primary:hover { background: var(--primary-2); }
.btn-gold { background: var(--gold); color: #0b2a4a; }
.btn-ghost { background: var(--surface); border-color: var(--border); color: var(--text); }
.btn-ghost:hover { border-color: var(--primary); }
.btn-danger { background: transparent; border-color: var(--danger); color: var(--danger); }
.btn-sm { padding: 6px 11px; font-size: 13px; }
.btn[disabled] { opacity: .55; cursor: not-allowed; }
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.field label { font-size: 13px; font-weight: 600; color: var(--muted); }
.input, select.input, textarea.input { width: 100%; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); outline: none; }
.input:focus { border-color: var(--primary); }
textarea.input { resize: vertical; min-height: 90px; }
.badge { display: inline-block; padding: 2px 8px; border-radius: 6px; font-size: 12px; font-weight: 600; margin: 2px 4px 2px 0; background: var(--surface-2); color: var(--muted); }
.badge.warn { background: color-mix(in srgb, var(--warn) 15%, transparent); color: var(--warn); }
.badge.ok { background: color-mix(in srgb, var(--ok) 15%, transparent); color: var(--ok); }
.badge.gold { background: var(--gold-soft); color: #8a6c0c; }
:root[data-theme="dark"] .badge.gold { color: var(--gold); }
.code { font-family: var(--mono); font-weight: 700; color: var(--primary); white-space: nowrap; }
.empty { padding: 36px; text-align: center; color: var(--muted); }
.notice { padding: 12px 14px; border-radius: 10px; background: var(--gold-soft); border: 1px solid color-mix(in srgb, var(--gold) 40%, transparent); font-size: 14px; }
.error { padding: 12px 14px; border-radius: 10px; background: color-mix(in srgb, var(--danger) 10%, transparent); color: var(--danger); }
.stat { padding: 18px; }
.stat .num { font-size: 26px; font-weight: 800; color: var(--primary); }
.stat .lbl { color: var(--muted); font-size: 13px; }
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 16px; overflow-x: auto; }
.tabs button { background: none; border: 0; padding: 10px 14px; cursor: pointer; font-weight: 600; color: var(--muted); border-bottom: 2px solid transparent; white-space: nowrap; }
.tabs button.active { color: var(--primary); border-bottom-color: var(--primary); }
.crumbs { font-size: 13px; color: var(--muted); margin-bottom: 10px; }
.crumbs a { color: var(--muted); }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.spin { display: inline-block; width: 14px; height: 14px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: sp .7s linear infinite; vertical-align: -2px; }
@keyframes sp { to { transform: rotate(360deg); } }

/* ---------- Bảng ---------- */
.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--border); vertical-align: top; }
th { background: var(--surface-2); font-size: 12.5px; font-weight: 600; color: var(--muted); position: sticky; top: 0; }
tr:last-child td { border-bottom: 0; }
tr.click { cursor: pointer; }
tr.click:hover td { background: var(--surface-2); }
td.num { text-align: right; white-space: nowrap; }
.path { font-size: 12.5px; color: var(--muted); }
mark { background: color-mix(in srgb, var(--gold) 35%, transparent); color: inherit; border-radius: 3px; padding: 0 1px; }

/* ---------- Trang tra cứu / tổng quan ---------- */
.hero { background: linear-gradient(135deg, var(--navy), #123f6d); color: #fff; border-radius: 18px; padding: 30px; position: relative; overflow: hidden; }
.hero::after { content: ""; position: absolute; right: -60px; top: -60px; width: 260px; height: 260px; border-radius: 50%; background: radial-gradient(circle, rgba(201,162,39,.35), transparent 70%); }
.hero h1 { color: #fff; font-size: 28px; }
.hero p { color: #c9d7ea; max-width: 640px; }
.big-search { display: flex; gap: 10px; margin-top: 18px; position: relative; z-index: 1; }
.big-search input { flex: 1; padding: 14px 16px; border-radius: 12px; border: 0; font-size: 16px; outline: none; color: #0f1b2d; background: #fff; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; position: relative; z-index: 1; }
.chip { padding: 5px 12px; border-radius: 999px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2); color: #fff; font-size: 13px; cursor: pointer; }
.chip:hover { background: rgba(255,255,255,.2); }
.feature { display: flex; gap: 14px; align-items: flex-start; }
.feature .fi { width: 42px; height: 42px; border-radius: 12px; background: var(--surface-2); display: grid; place-items: center; font-size: 20px; flex: none; }
.feature p { color: var(--muted); font-size: 14px; }
a.card:hover { border-color: var(--primary); text-decoration: none; }

/* ---------- Chi tiết mã ---------- */
.hs-head { display: flex; gap: 18px; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; }
.hs-code-big { font-family: var(--mono); font-size: 32px; font-weight: 800; color: var(--primary); letter-spacing: .5px; }
.rate-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
.rate { border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; background: var(--surface); }
.rate .k { font-size: 12px; color: var(--muted); }
.rate .v { font-size: 20px; font-weight: 800; }
.rate .s { font-size: 11px; color: var(--muted); }
.policy { padding: 12px 14px; border-left: 3px solid var(--gold); background: var(--surface-2); border-radius: 0 10px 10px 0; margin-bottom: 10px; white-space: pre-line; }
.note-text { white-space: pre-wrap; font-size: 14px; max-height: 520px; overflow: auto; background: var(--surface-2); border-radius: 10px; padding: 14px; }

/* ---------- AI tư vấn ---------- */
.chat-layout { display: grid; grid-template-columns: 260px 1fr; gap: 16px; height: calc(100vh - 110px); }
.conv-panel { padding: 12px; display: flex; flex-direction: column; min-height: 0; }
.conv-list { overflow-y: auto; display: flex; flex-direction: column; gap: 4px; }
.conv-item { padding: 10px 12px; border-radius: 10px; cursor: pointer; font-size: 14px; display: flex; justify-content: space-between; gap: 6px; }
.conv-item:hover { background: var(--surface-2); }
.conv-item.active { background: color-mix(in srgb, var(--primary) 12%, transparent); color: var(--primary); font-weight: 600; }
.conv-item .del { opacity: 0; background: none; border: 0; cursor: pointer; color: var(--muted); }
.conv-item:hover .del { opacity: 1; }
.chat-box { display: flex; flex-direction: column; min-height: 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.chat-scroll { flex: 1; overflow-y: auto; padding: 20px; display: flex; flex-direction: column; gap: 14px; }
.msg { max-width: 88%; padding: 12px 16px; border-radius: 14px; font-size: 14.5px; line-height: 1.6; }
.msg.user { align-self: flex-end; background: var(--primary); color: #fff; border-bottom-right-radius: 4px; white-space: pre-wrap; }
.msg.assistant { align-self: flex-start; background: var(--surface-2); border: 1px solid var(--border); border-bottom-left-radius: 4px; }
.msg.assistant h1, .msg.assistant h2, .msg.assistant h3 { font-size: 15.5px; margin: 10px 0 6px; }
.msg.assistant p { margin: 6px 0; }
.msg.assistant ul, .msg.assistant ol { margin: 6px 0 6px 22px; }
.msg.assistant table { margin: 8px 0; font-size: 13px; background: var(--surface); }
.msg.assistant code { font-family: var(--mono); background: var(--surface-3); padding: 1px 5px; border-radius: 5px; font-size: 13px; }
.msg.assistant a.hs-link { font-family: var(--mono); font-weight: 700; }
.tool-trace { font-size: 12.5px; color: var(--muted); display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.tool-trace span { background: var(--surface-3); padding: 2px 8px; border-radius: 6px; }
.chat-input { border-top: 1px solid var(--border); padding: 12px; }
.chat-input textarea { width: 100%; border: 1px solid var(--border); border-radius: 12px; padding: 12px; resize: none; height: 76px; background: var(--surface); outline: none; }
.chat-input textarea:focus { border-color: var(--primary); }
.attach-list { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.attach-list .badge { display: inline-flex; gap: 6px; align-items: center; }
.attach-list button { background: none; border: 0; cursor: pointer; color: var(--danger); }
.drop-hint { outline: 2px dashed var(--primary); outline-offset: -6px; }

/* ---------- Đăng nhập ---------- */
.login-wrap { min-height: 100vh; display: grid; grid-template-columns: 1.1fr 1fr; }
.login-art { background: linear-gradient(145deg, var(--navy), #164a80); color: #fff; padding: 48px; display: flex; flex-direction: column; justify-content: space-between; position: relative; overflow: hidden; }
.login-art::after { content: ""; position: absolute; right: -120px; bottom: -120px; width: 420px; height: 420px; border-radius: 50%; background: radial-gradient(circle, rgba(201,162,39,.35), transparent 70%); }
.login-art h1 { color: #fff; font-size: 34px; max-width: 520px; }
.login-art p { color: #c9d7ea; max-width: 480px; margin-top: 12px; }
.login-form { display: grid; place-items: center; padding: 32px; }
.login-form .card { width: 100%; max-width: 400px; padding: 30px; box-shadow: var(--shadow); }

/* ---------- Hướng dẫn ---------- */
.guide { padding: 28px 32px; }
.guide h1 { font-size: 26px; }
.guide h2 { font-size: 20px; margin: 28px 0 10px; padding-top: 14px; border-top: 1px solid var(--border); color: var(--navy); scroll-margin-top: 80px; }
:root[data-theme="dark"] .guide h2 { color: var(--gold); }
.guide h3 { font-size: 16px; margin: 18px 0 8px; }
.guide p { margin: 8px 0; }
.guide ul, .guide ol { margin: 8px 0 8px 24px; }
.guide li { margin: 3px 0; }
.guide .table-wrap { margin: 10px 0; }
.guide code { font-family: var(--mono); background: var(--surface-2); padding: 1px 6px; border-radius: 5px; font-size: 13px; }
.guide pre.note-text { max-height: none; }
.guide-toc { position: sticky; top: 80px; display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; }
.guide-toc a { color: var(--muted); }
.guide-toc a:hover { color: var(--primary); }
@media (max-width: 960px) { #gwrap { grid-template-columns: 1fr !important; } .guide-toc { display: none; } .guide { padding: 20px; } }
@media print { .guide { border: 0; padding: 0; } #gwrap { display: block !important; } .guide h2 { break-after: avoid; } .guide table { break-inside: avoid; } }

/* ---------- Hồ sơ / in ấn ---------- */
.dossier-print { background: #fff; color: #111; padding: 36px; border-radius: 8px; border: 1px solid var(--border); }
.dossier-print h1 { color: #0b2a4a; }
.dossier-print table { font-size: 13px; }
.dossier-print th { background: #eef2f8; color: #333; position: static; }
.dossier-print .sec { margin-top: 20px; }
.print-head { display: flex; justify-content: space-between; border-bottom: 2px solid #0b2a4a; padding-bottom: 12px; margin-bottom: 18px; }

@media print {
  .sidebar, .topbar, .no-print { display: none !important; }
  .app { display: block; }
  .content { padding: 0; max-width: none; }
  body { background: #fff; }
  .dossier-print { border: 0; padding: 0; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1100px) { .g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .chat-layout { grid-template-columns: 1fr; } .conv-panel { display: none; } }
@media (max-width: 860px) {
  .app { grid-template-columns: 1fr; }
  .sidebar { position: fixed; inset: 0 auto 0 0; width: 260px; z-index: 50; transform: translateX(-100%); transition: transform .2s; }
  .sidebar.open { transform: none; box-shadow: var(--shadow); }
  .menu-btn { display: grid; }
  .g2, .g3 { grid-template-columns: 1fr; }
  .content { padding: 16px; }
  .topbar { padding: 10px 16px; }
  .login-wrap { grid-template-columns: 1fr; }
  .login-art { display: none; }
  .msg { max-width: 96%; }
  .chat-layout { height: calc(100vh - 90px); }
}
@media (max-width: 520px) {
  .g4 { grid-template-columns: 1fr; } .big-search { flex-direction: column; } h1 { font-size: 22px; }
  .hide-sm, .topbar .quick { display: none; }
  th, td { padding: 8px; }
  .hs-code-big { font-size: 26px; }
}

/* ---------- Mảng Pháp lý thực phẩm ---------- */
.erp-modal { position: fixed; inset: 0; background: rgba(5, 15, 30, .55); z-index: 80; display: grid; place-items: center; padding: 16px; }
.erp-modal > form { width: 100%; max-height: 92vh; overflow: auto; }
.erp-modal h4, .card h4 { margin: 14px 0 8px; font-size: 14px; color: var(--primary); }
.erp-check { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; margin: 3px 12px 3px 0; cursor: pointer; }
.field.erp-check { flex-direction: row; align-self: end; }
.erp-checks { display: flex; flex-wrap: wrap; max-height: 180px; overflow: auto; border: 1px solid var(--border); border-radius: 10px; padding: 8px; }
.erp-testgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px 18px; }
.erp-testgrid > div { display: flex; flex-direction: column; }
.erp-testgrid details > label { display: flex; }
.erp-testgrid summary { cursor: pointer; margin-bottom: 2px; }
.erp-in { padding: 6px 8px; border-radius: 8px; font-size: 13px; }
.erp-in.saved { border-color: var(--ok); box-shadow: 0 0 0 2px color-mix(in srgb, var(--ok) 25%, transparent); }
table.erp-edit td { padding: 4px 6px; vertical-align: top; }
.erp-data { max-height: 70vh; }
.erp-data input { min-width: 120px; }
.erp-grp { border: 1px solid var(--border); border-radius: 12px; padding: 10px; margin-bottom: 12px; }
.erp-kv { border-collapse: collapse; width: 100%; font-size: 14px; }
.erp-kv th { text-align: left; font-weight: 600; color: var(--muted); padding: 3px 12px 3px 0; width: 230px; vertical-align: top; white-space: nowrap; }
.erp-kv td { padding: 3px 0; vertical-align: top; }
@media (max-width: 700px) { .erp-kv th { width: auto; white-space: normal; } }
.erp-steps { display: flex; gap: 4px; margin-top: 12px; overflow-x: auto; }
.erp-steps div { flex: 1; min-width: 108px; padding: 7px 8px; font-size: 12px; font-weight: 600; border-radius: 8px; background: var(--surface-2); color: var(--muted); text-align: center; }
.erp-steps div.done { background: color-mix(in srgb, var(--ok) 16%, transparent); color: var(--ok); }
.erp-steps div.cur { background: var(--primary); color: #fff; }
.erp-bulk { position: sticky; bottom: 0; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 12px; padding: 10px; border-radius: 12px; background: var(--gold-soft); border: 1px solid var(--gold); }
.erp-upload .input { padding: 7px 10px; }
.erp-q { position: relative; flex: 1; max-width: 420px; }
.erp-q input { width: 100%; padding: 9px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2); }
.erp-drop { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 70; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow); max-height: 70vh; overflow: auto; }
.erp-drop a { display: block; padding: 9px 12px; border-bottom: 1px solid var(--border); color: var(--text); }
.erp-drop a:hover { background: var(--surface-2); text-decoration: none; }
.erp-bell { position: relative; }
.erp-notes { left: auto; right: 0; width: 380px; }
.erp-notes a.unread { background: var(--gold-soft); }
.erp-count { position: absolute; top: -4px; right: -4px; background: var(--danger); color: #fff; border-radius: 10px; font-size: 11px; padding: 0 5px; min-width: 18px; text-align: center; }
@media (max-width: 760px) { .erp-q { display: none; } .erp-notes { width: 300px; } .g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.erp-alert { border-color: var(--danger); background: color-mix(in srgb, var(--danger) 6%, var(--surface)); }
.erp-alert h3 { color: var(--danger); }
.erp-focus { border: 2px solid var(--primary); background: color-mix(in srgb, var(--primary) 7%, var(--surface)); border-radius: 12px; padding: 10px 14px; margin: 12px 0; }
.erp-focus .row { align-items: center; gap: 6px; }
.erp-osub { margin-top: 4px; line-height: 1.45; max-width: 460px; }
.erp-subt { display: inline-block; margin: 1px 6px 1px 0; padding: 0 6px; border-radius: 6px; background: var(--surface-2); white-space: nowrap; }
.erp-osub details > summary { cursor: pointer; color: var(--primary); }
.erp-osub details .erp-subt { display: block; width: fit-content; margin: 3px 0; white-space: normal; }
a.erp-subt { color: inherit; text-decoration: none; }
a.erp-subt:hover { outline: 1px solid var(--primary); }
.erp-subt.late { background: color-mix(in srgb, var(--danger) 14%, transparent); }
.erp-crit { border: 2px solid var(--ok); background: color-mix(in srgb, var(--ok) 7%, var(--surface)); border-radius: 10px; padding: 10px 12px; margin: 8px 0; }
.erp-crit .erp-check { margin: 5px 0; gap: 8px; }
.erp-crit .vl-bad { outline: 2px solid var(--danger); }
.erp-guide { border: 1px solid var(--border); border-left: 4px solid var(--primary); border-radius: 10px; padding: 8px 14px; margin: 10px 0; background: var(--surface); }
.erp-guide summary { cursor: pointer; font-weight: 600; color: var(--primary); }
.erp-guide-b { padding: 8px 10px; margin-top: 8px; border-radius: 8px; background: var(--surface-2); }
.erp-guide-b.mine { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--primary) 35%, transparent); }
.erp-guide-b ol { margin: 6px 0 6px 20px; padding: 0; font-size: 14px; }
.erp-guide-b li { margin: 3px 0; }
.erp-igrp { border: 1px solid var(--border); border-radius: 10px; margin: 8px 0; background: var(--surface); }
.erp-igrp > summary { cursor: pointer; padding: 9px 12px; list-style-position: inside; }
.erp-igrp[open] > summary { border-bottom: 1px solid var(--border); background: var(--surface-2); border-radius: 10px 10px 0 0; }
.erp-igrp .erp-igbody { padding: 10px 12px; }
.erp-igrp.erp-igbad { border-color: var(--danger); box-shadow: 0 0 0 1px var(--danger); }
.erp-sh { margin: 10px 0 4px; font-size: 13px; color: var(--muted); text-transform: none; }
.erp-grp.erp-cur { border-color: var(--primary); box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 20%, transparent); }
.erp-chat { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; max-height: 60vh; overflow: auto; }
.erp-msg { padding: 8px 12px; border-radius: 12px; background: var(--surface-2); max-width: 820px; }
.erp-msg.me { background: color-mix(in srgb, var(--primary) 10%, var(--surface)); align-self: flex-end; }
.erp-chat-form { display: flex; flex-direction: column; gap: 8px; }

/* tra cứu tình trạng: danh sách vấn đề */
.erp-issues { margin: 4px 0 0; padding-left: 18px; font-size: .86em; }
.erp-issues li { margin: 1px 0; }
.erp-issues li.danger { color: var(--danger); }
.erp-issues li.warn { color: var(--warn); }
/* nhập nhiều sản phẩm */
.erp-prod { border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; margin: 0 0 10px; background: var(--surface-2); }
.erp-sugg { top: 100%; }
.erp-sugg a { cursor: pointer; }
/* logo góc trái: bấm để về Tổng quan */
a.brand-home { text-decoration: none; color: inherit; cursor: pointer; transition: background .15s; }
a.brand-home:hover { background: rgba(255,255,255,.06); text-decoration: none; }
a.brand-home:hover .brand-mark { box-shadow: 0 0 0 2px rgba(212,175,55,.45); }
.brand-mark { font-size: 13px; letter-spacing: .2px; }

/* thanh bên trái: nhấp vào mảng lớn để sổ ra / thu lại các mục con */
.nav-group { border-radius: 12px; }
.nav-head { display: flex; align-items: center; gap: 10px; width: 100%; padding: 11px 12px; border: 0; border-radius: 10px; background: transparent; color: #e6edf7; font: inherit; font-weight: 700; font-size: 14.5px; cursor: pointer; text-align: left; }
.nav-head:hover { background: rgba(255,255,255,.06); color: #fff; }
.nav-group.current > .nav-head { color: #fff; box-shadow: inset 3px 0 0 var(--gold); }
.nav-lbl { flex: 1; }
.nav-chev { font-size: 11px; color: #7e93b0; transition: transform .2s; }
.nav-sub { max-height: 0; overflow: hidden; padding-left: 10px; transition: max-height .25s ease; }
.nav-sub a { font-size: 13.5px; padding: 8px 12px; }
.nav-sub .nav-sep { margin: 8px 12px 2px; }
.nav-group.open .nav-sub { max-height: 900px; }
.nav-group.open .nav-chev { transform: rotate(90deg); }

/* Cảnh báo chữ đỏ nền vàng, trường bắt buộc đỏ đậm, cờ đỏ, khóa đơn (cập nhật 4 bước) */
#vl-toasts { position: fixed; right: 20px; bottom: 20px; z-index: 200; display: flex; flex-direction: column; gap: 8px; max-width: min(460px, calc(100vw - 32px)); }
.vl-toast { box-shadow: var(--shadow); cursor: pointer; margin: 0; }
.vl-warn { background: #fff3a8; color: #c00000; font-weight: 700; border: 2px solid #e0b000; border-left: 6px solid #d00000; border-radius: 10px; padding: 12px 14px; font-size: 14px; line-height: 1.45; }
.vl-warn-hint { font-weight: 500; font-size: 12px; color: #7a5a00; margin-top: 6px; text-decoration: underline; }
label.req, .req-label { color: #c00000 !important; font-weight: 700 !important; }
.vl-flash { outline: 3px solid #e0b000 !important; outline-offset: 2px; background: #fffbe0 !important; transition: outline .2s; }
.erp-flag { background: #ffe5e5; border: 2px solid #d00000; color: #a00000; border-radius: 10px; padding: 10px 14px; margin: 8px 0; }
.badge.flag { background: #d00000; color: #fff; }
.erp-lock { background: #eef1f6; border: 2px solid #5a6b85; border-radius: 10px; padding: 10px 14px; margin: 8px 0; }
.erp-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
@media (max-width: 860px) { .erp-cols { grid-template-columns: 1fr; } }
.erp-sub { border: 1px solid var(--line, #dde3ea); border-radius: 10px; padding: 10px 12px; margin: 8px 0; }
.erp-sub > h4 { margin: 0 0 8px; }
.erp-opt summary { cursor: pointer; font-weight: 600; color: var(--primary); padding: 4px 0; }
.erp-chip { display: inline-flex; align-items: center; gap: 4px; background: var(--surface-2, #eef3f8); border-radius: 999px; padding: 2px 10px; margin: 2px 4px 2px 0; font-size: 13px; }
.erp-chip button { border: 0; background: none; cursor: pointer; color: #a00; }
.erp-paste { border: 2px dashed #9aa9bd; border-radius: 10px; padding: 10px; text-align: center; color: #5a6b85; cursor: pointer; outline: none; }
.erp-paste:focus { border-color: var(--primary); background: #f3f8ff; }
.erp-thumbs img { max-height: 90px; border: 1px solid #ccd; border-radius: 6px; margin: 4px; }
tr.inactive td { opacity: .55; }
/* Ô lỗi: viền đỏ + biểu tượng ⚠ bên phải, nhãn của ô có ⚠ đứng trước; tự bỏ khi người dùng sửa ô */
.vl-bad { border: 2px solid #d00000 !important; background-color: #fff4f4 !important; box-shadow: 0 0 0 3px rgba(208, 0, 0, .12) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23d00000' d='M12 2 1 21h22L12 2zm0 5 7.5 13h-15L12 7zm-1 4v5h2v-5h-2zm0 6v2h2v-2h-2z'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important; background-position: right 8px top 8px !important; background-size: 18px 18px !important; padding-right: 32px !important; }
.vl-bad-field > label::before { content: "⚠ "; color: #d00000; }
.vl-bad-field > label { color: #c00000 !important; font-weight: 700 !important; }

/* Tra cứu phụ gia thực phẩm (TT 24/2019 + TT 17/2023) */
.pg-note { display: inline-block; padding: 0 5px; margin: 1px 0; border: 1px dotted var(--muted); border-radius: 6px; font-size: 12px; cursor: help; }
.pg-legend { max-height: 260px; overflow: auto; padding: 6px 0; }
.pg-tree { max-height: 560px; overflow: auto; border-top: 1px solid var(--border); margin-top: 6px; }
.pg-tree a { display: block; padding: 4px; color: inherit; text-decoration: none; border-bottom: 1px solid var(--border); font-size: 13px; }
.pg-tree a:hover, .pg-tree a.active { background: var(--surface-2); }
.pg-res tr.pg-l2 td:first-child { border-left: 3px solid var(--danger); }
.pg-res tr.pg-l1 td:first-child { border-left: 3px solid var(--warn); }
.pg-adv { margin-top: 4px; color: var(--danger); }
.pg-cols { columns: 3 220px; padding: 6px 0; }
.pg-two { display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: 12px; align-items: start; }
.pg-itbox { margin-top: 8px; padding: 8px 10px; border: 1px dashed var(--border); border-radius: 8px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
@media (max-width: 820px) { .pg-two { grid-template-columns: 1fr; } }

/* Đầu trang hồ sơ: tên sản phẩm + lưới ô thông tin (03/10) */
.ih-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 6px 0 16px; font-size: 19px; font-weight: 600; color: var(--text); }
.ih-chip { font-size: 12.5px; font-weight: 500; padding: 2px 10px; border-radius: 999px; background: var(--surface-2); color: var(--muted); border: 1px solid var(--border); }
.ih-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
.ih-tile.wide3 { grid-column: span 3; }
.ih-tile.full { grid-column: 1 / -1; }
@media (max-width: 1100px) { .ih-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: row dense; } .ih-tile.wide3 { grid-column: span 2; } .ih-tile.wide[data-ih="money"] { grid-column: auto; } }
.ih-tile { min-width: 0; padding: 11px 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-2); }
.ih-tile.wide { grid-column: span 2; }
.ih-tile.late { border-color: var(--danger); box-shadow: inset 3px 0 0 var(--danger); }
.ih-lbl { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-bottom: 5px; }
.ih-val { font-size: 15px; line-height: 1.4; overflow-wrap: anywhere; }
.ih-val strong { font-weight: 650; }
.ih-note { margin-top: 4px; font-size: 12.5px; line-height: 1.45; color: var(--muted); overflow-wrap: anywhere; }
.ih-note strong { color: var(--text); font-weight: 600; }
.ih-soft { color: var(--muted); font-weight: 400; font-size: 13.5px; }
.ih-code { font-weight: 650; letter-spacing: .01em; }
a.ih-code { color: var(--primary); text-decoration: none; }
a.ih-code:hover { text-decoration: underline; }
@media (max-width: 560px) { .ih-grid { grid-template-columns: 1fr; } .ih-tile.wide, .ih-tile.wide3 { grid-column: auto; } .ih-sub { font-size: 17px; } }
.ih-top { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 10px 16px; }
.ih-top h1 { min-width: 0; }
.ih-acts { flex-wrap: wrap; justify-content: flex-end; margin-left: auto; }

/* Bảng chỉ tiêu đã chọn / bảng combo ở khối IV tạo đơn (03/10) */
.tt-table td { vertical-align: top; }
.tt-table tr.tt-zero td { background: rgba(220, 38, 38, .07); }
.tt-table tr.tt-zero td:nth-child(3) { color: var(--danger); font-weight: 600; }
.tt-table tfoot th { padding-top: 8px; }
[data-tsum] a, [data-ivsum] a, .erp-chip a { color: var(--primary); text-decoration: underline dotted; text-underline-offset: 3px; cursor: pointer; }

/* ---------- 05/10: BI Dashboard (bảng màu biểu đồ đã kiểm bằng validate_palette: xanh #2a78d6 / cam #eb6834; nền tối #3987e5 / #d95926) ---------- */
:root { --bi-1: #2a78d6; --bi-2: #eb6834; --bi-bad: #d03b3b; --bi-warn: #b86e00; --bi-grid: #e3e9f2; }
[data-theme="dark"] { --bi-1: #3987e5; --bi-2: #d95926; --bi-bad: #ef6b5b; --bi-warn: #f0a53a; --bi-grid: #26364d; }
.bi-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin: 14px 0; }
.bi-tiles.bi-mini { margin: 4px 0 10px; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
.bi-tile { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; }
.bi-tile .bi-tl { font-size: 12.5px; color: var(--muted); }
.bi-tile .bi-tv { font-size: 26px; font-weight: 700; line-height: 1.25; color: var(--text); font-variant-numeric: tabular-nums; }
.bi-mini .bi-tile .bi-tv { font-size: 20px; }
.bi-tile .bi-ts { font-size: 12px; color: var(--muted); }
.bi-tile.bi-warn { border-color: var(--bi-warn); } .bi-tile.bi-bad { border-color: var(--bi-bad); }
.bi-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.bi-grid2 > .card + .card { margin-top: 0; }
.bi-card h3 { margin: 0 0 10px; font-size: 15.5px; } .bi-card.bi-wide { grid-column: 1 / -1; }
.bi-sub { font-size: 12.5px; color: var(--muted); margin-bottom: 4px; }
.bi-svg { width: 100%; height: auto; display: block; }
.bi-svg .bi-grid { stroke: var(--bi-grid); stroke-width: 1; } .bi-svg .bi-base { stroke: var(--muted); stroke-width: 1; }
.bi-svg .bi-ax { font-size: 11px; fill: var(--muted); font-family: inherit; }
.bi-svg .bi-col:hover rect { fill: rgba(127, 127, 127, .10); }
.bi-legend { display: flex; gap: 16px; font-size: 12.5px; color: var(--muted); margin-top: 4px; } .bi-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; }
.bi-hrow { display: grid; grid-template-columns: minmax(120px, 34%) 1fr auto; gap: 10px; align-items: center; padding: 3px 0; font-size: 13.5px; }
.bi-hl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .bi-ht { background: var(--surface-2); border-radius: 4px; height: 14px; overflow: hidden; }
.bi-hf { height: 100%; border-radius: 0 4px 4px 0; min-width: 0; } .bi-hv { font-variant-numeric: tabular-nums; font-weight: 600; min-width: 46px; text-align: right; }
.bi-badn { color: var(--bi-bad); font-weight: 600; font-size: 12px; }
.bi-tbl { margin-top: 8px; font-size: 13px; } .bi-tbl summary { cursor: pointer; color: var(--muted); }
.bi-tip { position: fixed; z-index: 60; background: var(--navy); color: #fff; padding: 6px 10px; border-radius: 8px; font-size: 12.5px; pointer-events: none; max-width: 360px; box-shadow: var(--shadow); }
.bi-filter .row { align-items: flex-end; gap: 10px; } .bi-filter .field { margin: 0; }
@media (max-width: 900px) { .bi-grid2 { grid-template-columns: 1fr; } }

/* 05/10: cảnh báo / nhắc quy tắc ghi nhãn ngay dưới từng ô của tab Thông tin sản phẩm */
.lr-hint { font-size: 12.5px; line-height: 1.45; margin-top: 4px; padding: 5px 8px; border-radius: 8px; border-left: 3px solid var(--border); background: var(--surface-2); color: var(--text); }
.lr-hint.lr-warn { border-left-color: var(--danger); background: color-mix(in srgb, var(--danger) 9%, var(--surface)); }
.lr-hint.lr-info { border-left-color: var(--primary); color: var(--muted); }
.lr-hint .lr-code { font-family: var(--mono); font-size: 11px; padding: 0 5px; border: 1px solid var(--border); border-radius: 5px; background: var(--surface); }
.lr-hint .lr-basis { color: var(--muted); font-size: 11.5px; }
.lr-gbadge { margin-left: 6px; }

/* 06/10: nhắc đối chiếu (ℹ) chỉ hiện biểu tượng, bấm vào mới hiện nội dung */
.lr-hint.lr-mini { display: inline-block; padding: 0; margin: 4px 6px 0 0; border: 0; background: none; vertical-align: top; }
.lr-hint.lr-mini .lr-i { width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--border); background: var(--surface); color: var(--titan); cursor: pointer; font-size: 13px; line-height: 1; padding: 0; }
.lr-hint.lr-mini .lr-i:hover, .lr-hint.lr-mini.lr-open .lr-i { border-color: var(--titan); background: var(--surface-2); }
.lr-hint.lr-mini.lr-open { display: block; padding: 5px 8px; border-left: 3px solid var(--primary); background: var(--surface-2); border-radius: 8px; }
.lr-hint.lr-mini.lr-open .lr-i { margin-right: 6px; }

/* Sơ đồ quy trình trong trang hướng dẫn (khối sodo) */
.flow { margin: 14px 0 18px; padding: 16px 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-2); display: flex; flex-direction: column; align-items: center; }
.fl-title { align-self: stretch; text-align: center; font-weight: 700; color: var(--navy); margin-bottom: 12px; }
:root[data-theme="dark"] .fl-title { color: var(--gold); }
.fl-step { --rc: #64748b; position: relative; width: min(100%, 560px); background: var(--surface, #fff); border: 1px solid var(--border); border-left: 5px solid var(--rc); border-radius: 10px; padding: 9px 12px; box-sizing: border-box; }
.fl-step[data-role="s"] { --rc: #2563eb; } .fl-step[data-role="g"] { --rc: #b45309; } .fl-step[data-role="t"] { --rc: #7c3aed; } .fl-step[data-role="c"] { --rc: #0f766e; }
.fl-step[data-role="k"] { --rc: #be185d; } .fl-step[data-role="kh"] { --rc: #0369a1; } .fl-step[data-role="h"] { --rc: #64748b; } .fl-step[data-role="o"] { --rc: #475569; }
.fl-role { display: inline-block; font-size: 11.5px; font-weight: 700; color: #fff; background: var(--rc); border-radius: 999px; padding: 1px 9px; margin-bottom: 4px; }
.fl-main { font-weight: 600; line-height: 1.4; }
.fl-note { font-size: 12.5px; color: var(--muted); margin-top: 3px; line-height: 1.4; }
.fl-arrow { width: 2px; height: 16px; background: var(--muted); position: relative; margin: 2px 0 7px; opacity: .75; }
.fl-arrow::after { content: ""; position: absolute; left: -4px; bottom: -6px; border: 5px solid transparent; border-top: 7px solid var(--muted); border-bottom: 0; }
.fl-end { border-left-width: 1px; border-radius: 999px; text-align: center; padding: 9px 22px; background: var(--navy); border-color: var(--navy); }
.fl-end .fl-main, .fl-end .fl-note { color: #fff; }
.fl-dec { border: 2px dashed var(--gold, #c9a227); border-left-width: 2px; text-align: center; background: transparent; }
.fl-decwrap, .fl-par { width: 100%; display: flex; flex-direction: column; align-items: center; }
.fl-row { display: flex; gap: 10px; justify-content: center; align-items: stretch; flex-wrap: wrap; width: 100%; }
.fl-row > .fl-step, .fl-branch { flex: 1 1 200px; max-width: 360px; width: auto; }
.fl-branches { margin-top: 8px; }
.fl-branch { display: flex; flex-direction: column; align-items: stretch; }
.fl-blabel { align-self: center; font-size: 12px; font-weight: 700; padding: 1px 10px; border-radius: 999px; margin-bottom: 4px; color: #fff; background: #64748b; }
.fl-yes .fl-blabel { background: #15803d; } .fl-no .fl-blabel { background: #c2410c; }
.fl-bstep { width: 100%; flex: 1; border-left-width: 1px; }
.fl-yes .fl-bstep { border-color: #15803d; } .fl-no .fl-bstep { border-color: #c2410c; }
.fl-bstep[data-role] { border-left-width: 5px; }
.fl-bstep .fl-main { font-weight: 500; }
.fl-par { border: 1px dashed var(--border); border-radius: 12px; padding: 6px 8px 10px; box-sizing: border-box; }
.fl-parlabel { font-size: 11.5px; color: var(--muted); margin-bottom: 5px; text-transform: uppercase; letter-spacing: .04em; }
/* 11/10: lưu đồ dài được ngắt trang giữa các bước (trước đây cả lưu đồ nhảy sang trang sau, để lại trang gần trống); tiêu đề lưu đồ và tiêu đề mục đi liền nội dung */
@media print { .flow { break-inside: auto; background: #fff; } .fl-step, .fl-par, .fl-decwrap { break-inside: avoid; } .fl-title, .guide h3 { break-after: avoid; } .fl-arrow { break-after: avoid; } .fl-end { background: #fff; } .fl-end .fl-main, .fl-end .fl-note { color: #000; } }
/* Bước 2 · Soạn thảo: 3 cách khai báo (AI đối soát / Excel / nhập tay), màu ô theo nguồn, hộp xem trước cạnh nhãn gốc */
.in-ways { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; padding: 8px 10px; margin: 0 0 8px; border: 1px dashed var(--border); border-radius: 10px; background: var(--surface-2); }
.in-legend { font-size: 12px; color: var(--muted); margin-left: 6px; }
.in-dot { display: inline-block; width: 11px; height: 11px; border-radius: 3px; border: 1.5px solid; margin: 0 4px 0 8px; vertical-align: -1px; }
.in-src-ai { border-color: #3247d8 !important; background: color-mix(in srgb, #3247d8 8%, var(--surface)) !important; }
.in-src-excel { border-color: #b45309 !important; background: color-mix(in srgb, #b45309 9%, var(--surface)) !important; }
.in-src-sua { border-color: #139566 !important; background: color-mix(in srgb, #139566 9%, var(--surface)) !important; }
.in-modal > .card { width: 97vw; max-width: 1500px; max-height: 95vh; overflow: auto; }
.in-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 12px; margin-top: 8px; }
.in-files { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 6px; }
.in-files .erp-chip { cursor: pointer; max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.in-files .erp-chip.on { outline: 2px solid var(--primary); }
.in-view { height: 66vh; overflow: auto; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2); }
.in-view img { display: block; width: 100%; cursor: zoom-in; }
.in-view img.zoom { width: 230%; max-width: none; cursor: zoom-out; }
.in-view iframe { width: 100%; height: 100%; border: 0; }
.in-right { max-height: 72vh; overflow: auto; padding-right: 4px; }
.in-tr { margin-top: 6px; border: 1px solid var(--border); border-radius: 10px; padding: 6px 10px; background: var(--surface); }
.in-tr > summary { cursor: pointer; font-weight: 600; }
.in-tr .table-wrap { max-height: 30vh; overflow: auto; margin-top: 6px; }
.in-modal:has(.in-tr[open]) .in-view { height: 38vh; }
.in-row { border: 1px solid var(--border); border-left: 4px solid var(--border); border-radius: 8px; padding: 8px 10px; margin-bottom: 8px; background: var(--surface); }
.in-row.in-moi { border-left-color: var(--ok); }
.in-row.in-lech { border-left-color: var(--danger); }
.in-row.in-trong, .in-row.in-chi_ho_so { border-left-color: var(--warn); }
.in-row .in-head { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 4px; }
.in-row textarea { width: 100%; }
.in-row .in-val { white-space: pre-wrap; font-size: 13.5px; }
.in-row .in-diff { margin-top: 4px; padding: 5px 8px; border-radius: 8px; background: color-mix(in srgb, var(--warn) 9%, var(--surface)); }
.in-row .in-quote { margin-top: 4px; color: var(--muted); font-style: italic; }
@media (max-width: 900px) { .in-grid { grid-template-columns: 1fr; } .in-view { height: 42vh; } .in-right { max-height: none; } }
/* Giao diện thoáng đợt 1 (07/10): nội dung phụ ẩn, bấm mới hiện; ô vừa với nội dung */
.ih-wrap .ih-sub { margin-bottom: 12px; }
.ih-more { margin-left: auto; font-weight: 500; }
#rvf [data-rvmore] { margin-left: 8px; font-weight: 500; vertical-align: middle; }
.ih-grid.ih-calm:not(.ih-all) .ih-extra { display: none; }
.ih-grid.ih-calm:not(.ih-all) { display: flex; flex-wrap: wrap; }
.ih-grid.ih-calm:not(.ih-all) > .ih-tile { flex: 1 1 170px; }
.ih-grid.ih-calm:not(.ih-all) > .ih-tile[data-ih="company"] { flex: 2.2 1 320px; }
.ih-grid.ih-calm:not(.ih-all) > .ih-tile[data-ih="missing"] { flex: 1 1 100%; }
.cu-i, .cu-dot { display: inline-flex; align-items: center; justify-content: center; border: 0; background: none; cursor: pointer; padding: 0 3px; margin-left: 4px; font: inherit; font-size: 13px; line-height: 1; vertical-align: baseline; }
/* Biểu tượng nhắc (ⓘ, ℹ) dùng chung màu xanh titan */
.cu-i { color: var(--titan); }
.cu-i::before { content: "ⓘ"; }
.cu-i:hover, .cu-i[aria-expanded="true"] { color: var(--primary); opacity: 1; }
.cu-dot { border-radius: 999px; padding: 1px 7px; font-size: 11.5px; font-weight: 600; }
/* Chấm cảnh báo ghi nhãn: to hơn chấm nhắc, nền vàng, khung đỏ, biểu tượng + số màu xanh titan */
.cu-dot.cu-warn { background: #ffe066; border: 1.5px solid #d92d20; color: #2b4a66; padding: 2px 9px; font-size: 13.5px; font-weight: 700; }
.cu-dot.cu-warn::before { content: "⚠ " attr(data-n); }
.cu-dot.cu-info { background: color-mix(in srgb, var(--titan) 15%, transparent); color: var(--titan); }
.cu-dot.cu-info::before { content: "ℹ " attr(data-n); }
.cu-hide { display: none !important; }
.cu-note { font-size: 12.5px; line-height: 1.45; color: var(--muted); background: var(--surface-2); border-radius: 8px; padding: 5px 9px; margin: 0 0 6px; }
.cu-bar { display: inline-flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: flex-end; }
.cu-menuwrap { position: relative; display: inline-block; }
.cu-menu { position: absolute; right: 0; top: calc(100% + 4px); z-index: 30; display: flex; flex-direction: column; gap: 4px; min-width: 250px; padding: 8px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow); }
.cu-menu .btn { justify-content: flex-start; border-color: transparent; font-weight: 500; white-space: normal; text-align: left; }
.cu-menu .btn:hover { background: var(--surface-2); }
.cu-kq.cu-kqbad { border-color: var(--danger); color: var(--danger); }
.cu-kqbox { margin: 8px 0; }
.cu-jump { display: flex; flex-direction: column; gap: 3px; margin-top: 6px; font-size: 13px; }
.cu-jump a { padding: 3px 8px; border-radius: 6px; }
.cu-jump a:hover { background: var(--surface-2); text-decoration: none; }
.cu-ways { border: 0; background: none; padding: 0; margin: 0 0 4px; min-height: 0; }
.cu-ways:empty { display: none; }
.cu-pgbox { margin-top: 2px; }
form.cu .erp-igbody { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 14px; }
form.cu .erp-igbody > .grid, form.cu .erp-igbody > [data-hs], form.cu .erp-igbody > [data-hs] > .grid { display: contents; }
form.cu .erp-igbody > [data-hs][hidden] { display: none; }
form.cu .erp-igbody > :not(.grid):not([data-hs]) { grid-column: 1 / -1; }
form.cu .erp-igbody textarea { grid-column: 1 / -1; }
@media (max-width: 1100px) { form.cu .erp-igbody { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { form.cu .erp-igbody { grid-template-columns: 1fr; } form.cu .erp-igbody .field { grid-column: auto !important; } }
.cu-kqbox [data-lrsum], .cu-kqbox .erp-flag > .muted { display: none; }
form.cu .erp-igbody .field { margin-bottom: 11px; gap: 4px; }
form.cu .field:has(> [name="product_name"]), form.cu .field:has(> [name="manufacturer_address"]), form.cu .field:has(> [name="name_en"]), form.cu .field:has(> [name="legal_note"]), form.cu .field:has(> [data-packs]), form.cu .field:has(> [name="missing_note"]) { grid-column: span 2; }
form.cu textarea.input { min-height: 40px; resize: vertical; overflow: hidden; }
form.cu .erp-igrp { margin: 6px 0; }
form.cu .erp-igrp .erp-igbody { padding: 12px 14px 4px; }
@media (max-width: 700px) { form.cu .field:has(> [name="product_name"]), form.cu .field:has(> [data-packs]) { grid-column: auto; } }
.in-row:not(.open) .in-det { display: none; }
.in-row .in-head { cursor: pointer; }
.in-more { margin-left: auto; border: 0; background: none; color: var(--muted); font: inherit; font-size: 12.5px; cursor: pointer; padding: 2px 4px; white-space: nowrap; }
.in-more:hover, .in-more[aria-expanded="true"] { color: var(--primary); }
.in-row textarea.input { min-height: 38px; overflow: hidden; }
.in-other { margin-top: 4px; }
.in-other > summary { cursor: pointer; padding: 8px 10px; border: 1px dashed var(--border); border-radius: 8px; color: var(--muted); font-size: 13.5px; margin-bottom: 8px; }
form.cu .field:has(> [data-packs]) > .muted.small, form.cu .cu-pgbox:has(> [data-pgsaved].muted) { display: none; }
/* Giao diện thoáng đợt 2: các tab còn lại của trang hồ sơ */
.cu-i-float { float: right; margin: 0 0 4px 8px; font-size: 15px; }
#itabs .erp-guide { border: 0; border-left: 0; background: none; padding: 0 2px; margin: 6px 0 8px; }
#itabs .erp-guide:not([open]) > summary { font-weight: 500; font-size: 13px; color: var(--muted); }
#itabs .erp-guide[open] { border: 1px solid var(--border); border-radius: 10px; padding: 8px 14px; background: var(--surface); }
#itabs h3 .cu-i, #itabs .field > label .cu-i { font-weight: 400; }
#itabs .card > .cu-note, #itabs form > .cu-note { margin-top: 6px; }
/* Giao diện thoáng đợt 3: trang chi tiết đơn + form tạo đơn Bước 1 */
.cu-ohead h1 + .ih-more, .cu-ohead .ih-more { margin-left: 10px; vertical-align: middle; }
.cu-menu.cu-menu-left { right: auto; left: 0; }
.cu-menu .btn-danger { border-color: transparent; }
#nf .erp-cols { grid-template-columns: 1fr; gap: 0; }
#nf .erp-prod .erp-cols > .erp-sub:first-child { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1fr); gap: 0 14px; }
#nf .erp-prod .erp-cols > .erp-sub:first-child > :not(.field), #nf .erp-prod .erp-cols > .erp-sub:first-child > .field:has(textarea) { grid-column: 1 / -1; }
#nf .erp-prod .erp-cols > .erp-sub:first-child > details { display: contents; }
#nf .erp-sub { margin: 6px 0; }
#nf .field { margin-bottom: 10px; gap: 4px; }
#nf textarea.input { min-height: 40px; overflow: hidden; }
#nf > .cu-note, #nf .card > .cu-note { margin-top: 4px; }
@media (max-width: 860px) { #nf .erp-prod .erp-cols > .erp-sub:first-child { grid-template-columns: 1fr; } }
#nf .erp-prod .erp-cols > .erp-sub:first-child > h4 { order: -1; }
#nf .erp-prod .erp-cols > .erp-sub:first-child > .field:has(textarea) { order: 2; }
.cu-barlbl { font-size: 13px; font-weight: 600; color: var(--muted); }
.btn.cu-off { color: var(--muted); border-style: dashed; }

/* ===== Bộ màu và phông chữ theo mẫu MISA AMIS · Trung tâm AI (Tiến chốt 07/10/2026) =====
   Chỉ đổi màu và phông; bố cục, cỡ chữ giữ nguyên. Muốn về bộ màu cũ (xanh navy + vàng gold): xóa cả khối này và dòng nạp phông Inter trong index.html.
   Màu mẫu: nền trắng, viền #E9EAEB, chữ #1F2229, xanh chàm #4262F0 (mục đang chọn nền #E7EBFD), liên kết #245FDF, dải màu AI #4262F0 → #9F73F1. */
:root {
  --bg: #f7f8fa; --surface: #ffffff; --surface-2: #f5f6f8; --surface-3: #e7ebfd;
  --text: #1f2229; --muted: #667085; --border: #e9eaeb;
  --navy: #1d2a6b; --primary: #4262f0; --primary-2: #245fdf; --gold: #7f56d9; --gold-soft: #efeafd;
  --ok: #079455; --warn: #b54708; --danger: #d92d20;
  --shadow: 0 4px 16px rgba(16, 24, 40, .07);
  --ai-grad: linear-gradient(61deg, #4262f0 13.36%, #9f73f1 88.41%);
}
:root[data-theme="dark"] { --navy: #0c1230; --primary: #8098f9; --primary-2: #a4b4fb; --gold: #b69df8; --gold-soft: #2b2545; --ai-grad: linear-gradient(61deg, #5b77f3 13.36%, #a98af5 88.41%); }
body { font-family: "Inter", "Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", sans-serif; }
h1, h2, h3 { letter-spacing: -.01em; }
a { color: var(--primary-2); }
:root[data-theme="dark"] a { color: var(--primary); }

/* thanh bên nền trắng như mẫu (chế độ tối giữ thanh bên tối) */
:root:not([data-theme="dark"]) .sidebar { background: #ffffff; color: var(--text); border-right: 1px solid var(--border); }
:root:not([data-theme="dark"]) .brand { border-bottom-color: var(--border); }
:root:not([data-theme="dark"]) .brand-name { color: var(--text); }
:root:not([data-theme="dark"]) .nav a { color: #414651; }
:root:not([data-theme="dark"]) .nav a:hover, :root:not([data-theme="dark"]) a.brand-home:hover, :root:not([data-theme="dark"]) .nav-head:hover { background: #f5f6f8; color: var(--text); }
:root:not([data-theme="dark"]) .nav a.active { background: #e7ebfd; color: #4262f0; font-weight: 600; box-shadow: none; }
:root:not([data-theme="dark"]) .nav-head { color: var(--text); }
:root:not([data-theme="dark"]) .nav-sep, :root:not([data-theme="dark"]) .nav-chev { color: #717680; }
:root:not([data-theme="dark"]) .side-foot { border-top-color: var(--border); }
:root:not([data-theme="dark"]) .side-foot .user { color: var(--text); }
:root:not([data-theme="dark"]) .side-foot, :root:not([data-theme="dark"]) .side-foot button { color: #717680; }
:root:not([data-theme="dark"]) .side-foot button:hover { color: var(--primary); }
.brand-mark { background: var(--ai-grad); color: #fff; }
.brand-sub { color: var(--primary); }
:root[data-theme="dark"] .nav a.active { background: rgba(128, 152, 249, .18); box-shadow: inset 3px 0 0 var(--primary); }

/* nút, huy hiệu, vùng nhấn */
.btn-primary { background: var(--primary); color: #fff; }
.btn-primary:hover { background: var(--primary-2); }
.btn-gold { background: var(--ai-grad); color: #fff; }
.btn-gold:hover { filter: brightness(1.06); }
.badge.gold { background: var(--gold-soft); color: #6941c6; }
:root[data-theme="dark"] .badge.gold { color: var(--gold); }
.hero { background: linear-gradient(120deg, #3350d8 0%, #6f58e6 60%, #9f73f1 100%); }
.hero p, .login-art p { color: #e4e7fb; }
.login-art { background: linear-gradient(145deg, #2f47c9 0%, #5b55e0 55%, #9f73f1 100%); }
.login-art::after { background: radial-gradient(circle, rgba(255, 255, 255, .22), transparent 65%); }
.guide h2, .fl-title { color: var(--text); }
:root[data-theme="dark"] .guide h2, :root[data-theme="dark"] .fl-title { color: var(--text); }
.dossier-print h1 { color: #1f2229; }
.print-head { border-bottom-color: #1f2229; }
.topbar .quick input { background: #ffffff; }
:root[data-theme="dark"] .topbar .quick input { background: var(--surface-2); }
.cu-menu .btn:hover, .erp-igrp[open] > summary { background: var(--surface-2); }
.login-art .brand-name { color: #fff; }
.login-art .brand-sub { color: #e4e7fb; }
:root[data-theme="dark"] .btn-gold { color: #fff; }
:root[data-theme="dark"] .btn-primary { color: #0c1230; }
/* Ô nhận diện đầu thanh bên (Tiến chốt 11/10): nền trắng, logo VLS và tên VIETLEGAL SOLUTION trên một dòng, chữ kiểu logo (Cinzel), màu đồng / xám đậm hơn logo */
.brand-mark { display: none; }
.sidebar .brand, :root:not([data-theme="dark"]) .sidebar .brand, :root[data-theme="dark"] .sidebar .brand { background: #ffffff; border-bottom: 2px solid #6e3d1f; gap: 8px; padding: 14px 10px; }
.sidebar .brand .brand-logo { height: 32px; width: auto; flex: none; }
.sidebar .brand .brand-name, :root:not([data-theme="dark"]) .sidebar .brand .brand-name { font-family: "Cinzel", "Times New Roman", serif; font-weight: 700; white-space: nowrap; font-size: 12.5px; letter-spacing: .6px; }
.sidebar .brand .bn-viet { color: #6e3d1f; }
.sidebar .brand .bn-sol { color: #3f4246; }
.sidebar .brand .brand-sub { color: #3f4246; font-weight: 700; }
a.brand-home:hover, :root:not([data-theme="dark"]) a.brand-home:hover, :root[data-theme="dark"] a.brand-home:hover { background: #faf6f2; }
:root .login-art .brand-name, :root:not([data-theme="dark"]) .login-art .brand-name { color: #fff; font-size: 18px; letter-spacing: 1.4px; }
:root .login-art .brand-sub { color: #f1e2d6; }
/* Mục cấp một không thuộc nhóm (Tổng quan, Tài khoản, Quản trị, Sửa dữ liệu): chữ đậm, cùng màu với tên nhóm (Tiến chốt 11/10) */
.nav > a { color: #e6edf7; font-weight: 700; font-size: 14.5px; }
:root:not([data-theme="dark"]) .nav > a, :root:not([data-theme="dark"]) .nav > a.active { color: var(--text); font-weight: 700; }
/* Hai mục Hướng dẫn: không in đậm (Tiến chốt 11/10) */
:root .nav > a[href^="#/huong-dan"], :root:not([data-theme="dark"]) .nav > a[href^="#/huong-dan"], :root:not([data-theme="dark"]) .nav > a[href^="#/huong-dan"].active { font-weight: 500; font-size: 14px; }
/* Mục Tổng quan: chữ xanh lá đậm, không phát quang, lớn hơn các mục khác một chút (Tiến chốt 11/10) */
:root .nav > a[href="#/"], :root:not([data-theme="dark"]) .nav > a[href="#/"], :root:not([data-theme="dark"]) .nav > a[href="#/"].active { color: #1a7a2a; font-size: 16px; font-weight: 800; letter-spacing: .2px; }
:root[data-theme="dark"] .nav > a[href="#/"] { color: #4fcf6a; }
/* Màn hình đăng nhập theo tông đồng của logo công ty (Tiến chốt 11/10) */
:root .login-art { background: linear-gradient(145deg, #4a2812 0%, #6e3d1f 45%, #a87550 100%); }
:root .login-art::after { background: radial-gradient(circle, rgba(255, 236, 219, .22), transparent 65%); }
.login-logo { align-self: center; position: relative; z-index: 1; width: min(440px, 100%); background: #ffffff; border-radius: 18px; padding: 22px 26px; box-shadow: 0 18px 40px rgba(40, 20, 8, .35); }
.login-logo img { display: block; width: 100%; height: auto; }
:root .login-art p, :root .login-art .small { color: #f1e2d6 !important; }
:root .login-form .btn-primary, :root[data-theme="dark"] .login-form .btn-primary { background: #6e3d1f; border-color: #6e3d1f; color: #fff; }
:root .login-form .btn-primary:hover { background: #57301a; border-color: #57301a; }
:root .login-form a { color: #6e3d1f; }
:root[data-theme="dark"] .login-form a { color: #d9a783; }
:root .login-form .input:focus { border-color: #a87550; box-shadow: 0 0 0 3px rgba(168, 117, 80, .22); outline: 0; }

/* Dữ liệu gốc > Phân quyền (08/10): danh sách tài khoản bên trái, bảng quyền bên phải */
.pq-wrap { display: grid; grid-template-columns: minmax(240px, 300px) minmax(0, 1fr); gap: 12px; align-items: start; }
.pq-users { display: flex; flex-direction: column; gap: 4px; max-height: 70vh; overflow: auto; }
.pq-user { display: block; padding: 8px 10px; border: 1px solid var(--border); border-radius: 10px; color: var(--text); text-decoration: none; }
.pq-user:hover { border-color: var(--primary); text-decoration: none; }
.pq-user.active { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 9%, var(--surface)); }
.pq-user.pq-off { opacity: .6; }
.pq-grp { border: 1px solid var(--border); border-radius: 10px; margin: 10px 0; }
.pq-grp > summary { cursor: pointer; padding: 9px 12px; background: var(--surface-2); border-radius: 10px; }
.pq-grp > summary .btn { margin-left: 6px; }
.pq-rows { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 14px; padding: 10px 12px; }
.pq-row { display: flex; align-items: flex-start; gap: 8px; padding: 6px 8px; border-radius: 8px; cursor: pointer; }
.pq-row:hover { background: var(--surface-2); }
.pq-row.pq-diff { background: #fff4c2; }
:root[data-theme="dark"] .pq-row.pq-diff { background: #4a3f12; }
.pq-row input { margin-top: 3px; }
.pq-name { flex: 1; min-width: 0; font-weight: 500; }
.pq-desc { display: block; font-weight: 400; font-size: 12.5px; color: var(--muted); }
.pq-def { font-size: 11.5px; color: var(--muted); white-space: nowrap; }
.pq-foot { font-size: 12.5px; color: var(--muted); margin-top: 6px; }
@media (max-width: 1000px) { .pq-wrap, .pq-rows { grid-template-columns: 1fr; } }

/* Đầu trang hồ sơ (08/10, Tiến yêu cầu): mã hồ sơ xanh cổ vịt, tên sản phẩm đỏ mận; các ô thông tin nền xanh nhạt chữ xanh đậm;
   ô Hạn chuyển bước, Hạn hồ sơ quá hạn thì chuyển màu cảnh báo */
.ih-codeg { color: #156082; } /* mã hồ sơ: xanh cổ vịt #156082 (Tiến gửi mẫu màu 08/10) */
:root[data-theme="dark"] .ih-codeg { color: #5fb3d6; }
.ih-wrap .ih-sub > span:first-child { color: #7f1337; } /* tên sản phẩm: đỏ mận #7F1337 (Tiến gửi mẫu màu 08/10) */
:root[data-theme="dark"] .ih-wrap .ih-sub > span:first-child { color: #e2799c; }
/* mọi ô ở đầu trang hồ sơ (Tên công ty, Hạn chuyển bước, Hạn hồ sơ và các ô trong Chi tiết hồ sơ): nền xanh nhạt #DAE9F7, chữ xanh đậm #002060 (Tiến gửi mẫu màu 08/10) */
.ih-wrap .ih-tile { background: #f8f8f8; border-color: #e3e5e8; color: #002060; } /* Hạn chuyển bước, Hạn hồ sơ và các ô trong Chi tiết hồ sơ: nền xám rất nhạt #F8F8F8 (Tiến đổi lại 08/10) */
.ih-wrap .ih-tile[data-ih="company"] { background: #dae9f7; border-color: #bdd6ee; } /* riêng ô Tên công ty giữ nền xanh nhạt #DAE9F7 */
.ih-wrap .ih-tile .ih-lbl, .ih-wrap .ih-tile .ih-note, .ih-wrap .ih-tile .ih-note strong, .ih-wrap .ih-tile .ih-val strong, .ih-wrap .ih-tile .ih-soft, .ih-wrap .ih-tile .ih-code, .ih-wrap .ih-tile a { color: #002060; }
.ih-wrap .ih-tile .ih-lbl { opacity: .78; }
:root[data-theme="dark"] .ih-wrap .ih-tile { background: var(--surface-2); border-color: var(--border); color: #dae9f7; }
:root[data-theme="dark"] .ih-wrap .ih-tile[data-ih="company"] { background: #16304f; border-color: #26507f; }
:root[data-theme="dark"] .ih-wrap .ih-tile .ih-lbl, :root[data-theme="dark"] .ih-wrap .ih-tile .ih-note, :root[data-theme="dark"] .ih-wrap .ih-tile .ih-note strong, :root[data-theme="dark"] .ih-wrap .ih-tile .ih-val strong, :root[data-theme="dark"] .ih-wrap .ih-tile .ih-soft, :root[data-theme="dark"] .ih-wrap .ih-tile .ih-code, :root[data-theme="dark"] .ih-wrap .ih-tile a { color: #dae9f7; }
/* ô hạn bị quá hạn: màu cảnh báo */
.ih-wrap .ih-tile.late[data-ih="step"], .ih-wrap .ih-tile.late[data-ih="due"] { background: color-mix(in srgb, var(--danger) 12%, var(--surface)); border-color: var(--danger); box-shadow: inset 4px 0 0 var(--danger); }
.ih-wrap .ih-tile.late[data-ih="step"] .ih-lbl, .ih-wrap .ih-tile.late[data-ih="due"] .ih-lbl, .ih-wrap .ih-tile.late[data-ih="step"] .ih-val > strong, .ih-wrap .ih-tile.late[data-ih="due"] .ih-val > strong { color: var(--danger); opacity: 1; }
/* Bước 1 · khối IV: màn hình bảng chỉ tiêu hai mảng (09/10): trái = tất cả chỉ tiêu theo nhóm, phải = chỉ tiêu đã chọn (giá cho đơn, kiểm lặp, bỏ chọn) */
.tp-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 12px; align-items: start; }
.tp-left, .tp-right { border: 1px solid var(--border); border-radius: 10px; padding: 8px 10px; background: var(--surface); }
.tp-right { background: var(--surface-2); }
.tp-head { display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; justify-content: space-between; margin-bottom: 6px; }
#tpl, #tpsel { max-height: 54vh; overflow: auto; }
#tpl tr[data-tid] > td:nth-child(5), #tpl tr[data-tid] > td:nth-child(6) { display: none; } /* ô giá / kiểm lặp của bảng trái: giữ làm nơi lưu, sửa ở bảng phải */
.tp-selgrp { margin-bottom: 8px; }
@media (max-width: 900px) { .tp-two { grid-template-columns: 1fr; } }
/* Bước 1 · khối IV: khung đề xuất chỉ tiêu theo bảng phân loại (09/10) */
.dx-box { border: 1px dashed var(--border); border-radius: 8px; padding: 6px 10px; margin: 6px 0; line-height: 1.9; }
.dx-box:empty { display: none; }
.erp-chip.dx-on { background: color-mix(in srgb, var(--ok) 14%, var(--surface)); color: var(--ok); }
.erp-chip.dx-miss { opacity: .6; }
/* ===== Bộ màu theo từng phần (Tiến duyệt 09/10, theo video mẫu + tệp SỬA MÀU.docx; phần kem – nâu chỉ áp dụng ở giao diện sáng, thanh bên giữ nguyên; xóa cả khối là về bộ màu cũ) ===== */

/* Đơn dịch vụ, danh sách + trang tổng quan của đơn: chỉ đổi nền trang sang kem; khung thông tin đơn, các dòng hồ sơ giữ nền trắng và màu chữ như cũ */
:root:not([data-theme="dark"])[data-page="don"]:not([data-sub="moi"]) .main { --bg: #f3ede5; background: #f3ede5; }
/* Hồ sơ sản phẩm + form tạo đơn Bước 1: nền kem, nâu làm màu chính, nhãn pastel; ký hiệu cảnh báo (đỏ, cam, xanh lá, chấm ⚠) giữ nguyên màu cũ */
:root:not([data-theme="dark"])[data-page="hsp"] .main, :root:not([data-theme="dark"])[data-page="don"][data-sub="moi"] .main {
  --bg: #f7f4ed; --surface: #ffffff; --surface-2: #f4f0e9; --surface-3: #ece4db; --border: #e7e2d8; --text: #2b211c; --muted: #156082;
  --navy: #3b2a21; --primary: #5a3a2c; --primary-2: #7b5d4e; --gold: #b8916e; --gold-soft: #f1e6da;
  --ai-grad: linear-gradient(61deg, #5a3a2c 13%, #b8916e 88%);
  background: var(--bg); color: var(--text);
}
:root:not([data-theme="dark"])[data-page="hsp"] .main a, :root:not([data-theme="dark"])[data-page="don"][data-sub="moi"] .main a { color: var(--primary-2); }
:root:not([data-theme="dark"])[data-page="hsp"] .main .btn-primary, :root:not([data-theme="dark"])[data-page="don"][data-sub="moi"] .main .btn-primary, :root:not([data-theme="dark"])[data-page="hsp"] .main .btn-gold, :root:not([data-theme="dark"])[data-page="don"][data-sub="moi"] .main .btn-gold { background: var(--act); color: #fff; }
:root:not([data-theme="dark"])[data-page="hsp"] .main thead th, :root:not([data-theme="dark"])[data-page="don"][data-sub="moi"] .main thead th { background: var(--surface-2); }
:root:not([data-theme="dark"])[data-page="hsp"] .main .badge.gold, :root:not([data-theme="dark"])[data-page="don"][data-sub="moi"] .main .badge.gold { background: #dde4f6; color: #2f4a8a; }
:root:not([data-theme="dark"])[data-page="hsp"] .main .erp-focus, :root:not([data-theme="dark"])[data-page="don"][data-sub="moi"] .main .erp-focus { background: #ecedf8; border-color: #c3c7ea; }
:root:not([data-theme="dark"])[data-page="hsp"] .main .erp-steps div.cur, :root:not([data-theme="dark"])[data-page="don"][data-sub="moi"] .main .erp-steps div.cur { background: var(--act-step); color: #fff; }
/* ô cần điền / cần soát: nền trắng */
:root:not([data-theme="dark"])[data-page="hsp"] .main input:not([type=checkbox]):not([type=radio]):not([type=file]), :root:not([data-theme="dark"])[data-page="don"][data-sub="moi"] .main input:not([type=checkbox]):not([type=radio]):not([type=file]), :root:not([data-theme="dark"])[data-page="hsp"] .main select, :root:not([data-theme="dark"])[data-page="don"][data-sub="moi"] .main select, :root:not([data-theme="dark"])[data-page="hsp"] .main textarea, :root:not([data-theme="dark"])[data-page="don"][data-sub="moi"] .main textarea { background-color: #ffffff; }
/* đầu trang hồ sơ: mã hồ sơ nâu đậm; tên sản phẩm cùng màu chữ của nhãn "Soạn thảo sơ bộ hồ sơ" (#2F4A8A, Tiến chọn); các ô nền kem, ô Tên công ty nền be */
:root:not([data-theme="dark"])[data-page="hsp"] .ih-codeg { color: #3b2a21; }
:root:not([data-theme="dark"])[data-page="hsp"] .ih-wrap .ih-sub > span:first-child { color: #2f4a8a; }
:root:not([data-theme="dark"])[data-page="hsp"] .ih-wrap .ih-tile { background: var(--surface-2); border-color: var(--border); color: var(--text); }
:root:not([data-theme="dark"])[data-page="hsp"] .ih-wrap .ih-tile[data-ih="company"] { background: var(--gold-soft); border-color: #e3d2bf; }
:root:not([data-theme="dark"])[data-page="hsp"] .ih-wrap .ih-tile .ih-lbl, :root:not([data-theme="dark"])[data-page="hsp"] .ih-wrap .ih-tile .ih-note, :root:not([data-theme="dark"])[data-page="hsp"] .ih-wrap .ih-tile .ih-soft { color: var(--muted); opacity: 1; }
:root:not([data-theme="dark"])[data-page="hsp"] .ih-wrap .ih-tile .ih-note strong, :root:not([data-theme="dark"])[data-page="hsp"] .ih-wrap .ih-tile .ih-val strong, :root:not([data-theme="dark"])[data-page="hsp"] .ih-wrap .ih-tile .ih-code, :root:not([data-theme="dark"])[data-page="hsp"] .ih-wrap .ih-tile a { color: var(--text); }
:root:not([data-theme="dark"])[data-page="hsp"] .ih-wrap .ih-tile.late[data-ih="step"] .ih-lbl, :root:not([data-theme="dark"])[data-page="hsp"] .ih-wrap .ih-tile.late[data-ih="due"] .ih-lbl, :root:not([data-theme="dark"])[data-page="hsp"] .ih-wrap .ih-tile.late[data-ih="step"] .ih-val > strong, :root:not([data-theme="dark"])[data-page="hsp"] .ih-wrap .ih-tile.late[data-ih="due"] .ih-val > strong { color: var(--danger); }
/* Báo cáo quản trị, BI Dashboard: nền tối, điểm nhấn cam (Tiến: OK) */
:root[data-page="bao-cao"] .main, :root[data-page="bi"] .main {
  --bg: #09141a; --surface: #121821; --surface-2: #18212b; --surface-3: #212c38; --border: #263340; --text: #e8edf2; --muted: #93a1af;
  --navy: #0b161c; --primary: #f08a24; --primary-2: #f5a451; --gold: #f08a24; --gold-soft: #2a1e14; --ok: #3cc28a; --warn: #f0a53a; --danger: #ef6b5b; --titan: #9db8d1;
  --ai-grad: linear-gradient(61deg, #f08a24 13%, #f5c06a 88%);
  background: var(--bg); color: var(--text);
}
:root[data-page="bao-cao"] .main .topbar .quick input, :root[data-page="bi"] .main .topbar .quick input { background: var(--surface-2); color: var(--text); }
:root[data-page="bao-cao"] .main a, :root[data-page="bi"] .main a { color: var(--primary-2); }
:root[data-page="bao-cao"] .main .btn-primary, :root[data-page="bi"] .main .btn-primary, :root[data-page="bao-cao"] .main .btn-gold, :root[data-page="bi"] .main .btn-gold { background: var(--primary); color: #1a1208; }
:root[data-page="bao-cao"] .main .btn-ghost, :root[data-page="bi"] .main .btn-ghost, :root[data-page="bao-cao"] .main .icon-btn, :root[data-page="bi"] .main .icon-btn { background: var(--surface-2); color: var(--text); border-color: var(--border); }
:root[data-page="bao-cao"] .main input, :root[data-page="bi"] .main input, :root[data-page="bao-cao"] .main select, :root[data-page="bi"] .main select { background: var(--surface-2); color: var(--text); border-color: var(--border); }
:root[data-page="bao-cao"] .main .badge.gold, :root[data-page="bi"] .main .badge.gold { background: var(--gold-soft); color: var(--primary-2); }
:root[data-page="bao-cao"] .main thead th, :root[data-page="bi"] .main thead th { background: var(--surface-2); color: var(--muted); }

/* biểu đồ ở Báo cáo, BI theo nền tối: cột chính cam, cột phụ xanh nhạt */
:root[data-page="bao-cao"] .main, :root[data-page="bi"] .main { --bi-1: #f08a24; --bi-2: #5fb3d6; --bi-bad: #ef6b5b; --bi-warn: #f0c25a; --bi-grid: #263340; }
/* dòng "n việc con đang chờ" của đơn: chữ nâu đỏ (Tiến chọn 09/10) */
:root:not([data-theme="dark"]) .erp-osub details > summary { color: #8a2c1c; }

/* Hộp ★ Đề xuất chỉ tiêu còn thiếu (Bước 2): chỉ tiêu xếp 2 cột */
.dm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 16px; margin-top: 4px; }
.dm-grid .erp-check { display: block; }
@media (max-width: 640px) { .dm-grid { grid-template-columns: 1fr; } }

/* Danh mục văn bản (Đợt 2): nhãn cảnh báo combo dẫn văn bản hết hiệu lực / tạm ngưng / chưa có hiệu lực */
.badge.doc-warn { background: #fff4d6; color: #8a2c1c; border: 1px solid #d9534f; font-weight: 600; white-space: nowrap; }
[data-vb] tr[data-vbst="het_hieu_luc"] td:nth-child(2) input { color: #b3261e; text-decoration: line-through; }
[data-vb] tr[data-vbst="tam_ngung"] td:nth-child(2) input, [data-vb] tr[data-vbst="chua_hieu_luc"] td:nth-child(2) input { color: #8a5a00; }

/* ===== Trang Tổng quan pháp lý (10/10) ===== */
.hm-hello { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 20px 24px; }
.hm-hello h1 { font-size: 24px; margin: 4px 0 6px; }
.hm-hello p { margin: 0; color: var(--muted); }
.hm-c-red { color: #b3261e; } .hm-c-warn { color: #a05a00; }
.hm-tile { display: block; text-decoration: none; color: inherit; }
.hm-tile:hover { border-color: var(--primary-2); }
.hm-tile.hm-bad { background: #fdecea; border-color: #f1b5ae; } .hm-tile.hm-bad .num { color: #b3261e; }
.hm-tile.hm-good .num { color: var(--ok); }
.hm-cols { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); gap: 16px; margin-top: 16px; align-items: start; }
.hm-col { display: flex; flex-direction: column; gap: 16px; }
.hm-col > .card { margin: 0; }
.hm-row { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid var(--border); text-decoration: none; color: var(--text) !important; }
.hm-row:first-of-type { margin-top: 8px; }
.hm-row:hover .hm-main > strong, .hm-row:hover .hm-go { color: var(--primary-2); }
.hm-main { flex: 1; min-width: 0; font-size: 14px; }
.hm-sub { display: block; font-size: 12.5px; color: var(--muted); }
.hm-go { color: var(--muted); font-size: 18px; }
.hm-tag { font-size: 12px; padding: 2px 9px; border-radius: 999px; background: var(--surface-2); color: var(--muted); white-space: nowrap; border: 1px solid var(--border); }
.hm-tag.hm-warn { background: #fff4d6; color: #8a5a00; border-color: #ecd9a0; }
.hm-tag.hm-red { background: #b3261e; color: #fff; border-color: #b3261e; font-weight: 700; }
.hm-kpi { background: var(--surface-2); border-radius: 12px; padding: 10px 12px; }
.hm-kn { font-size: 22px; font-weight: 800; color: var(--primary); } .hm-kl { font-size: 12.5px; color: var(--muted); }
/* Tab Kiểm tra nhãn sản phẩm: phiếu ba trạng thái */
.lb-sec { margin: 16px 0 6px; font-size: 14px; }
/* dòng Cần sửa: phần nội dung yêu cầu (dưới tên mục) chữ đỏ trầm, dễ đọc, không chói (Tiến yêu cầu 11/10) */
#pgres tr[data-lbrow="sua"] td:nth-child(3) > div { color: #b3261e; }
:root[data-theme="dark"] #pgres tr[data-lbrow="sua"] td:nth-child(3) > div { color: #f2958d; }
/* ô "Cần sửa" của phiếu kiểm tra nhãn: đỏ đậm như nhãn báo trễ (Tiến yêu cầu 11/10) */
.main .badge.lb-red { background: #b3261e; color: #fff; border-color: #b3261e; font-weight: 700; }
/* tiêu đề các nhóm ô nhập của tab Kiểm tra nhãn: nâu đậm cho rõ */
[data-lbform] details.erp-opt > summary { color: #3b2a21; font-weight: 700; }
:root[data-theme="dark"] [data-lbform] details.erp-opt > summary { color: var(--text); }
.lb-hide { border-top: 1px solid var(--border); padding-top: 8px; } .lb-hide > summary { cursor: pointer; } .lb-cnt { margin-left: 6px; font-weight: 400; } .lb-cnt .badge { margin-right: 2px; } .lb-hide[open] > summary { margin-bottom: 4px; }
.lb-ai { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 12px; align-items: start; } .lb-ai img { max-width: 100%; border: 1px solid var(--border); border-radius: 8px; margin-bottom: 6px; }
@media (max-width: 900px) { .lb-ai { grid-template-columns: 1fr; } }
.lb-man { display: flex; gap: 8px; align-items: flex-start; padding: 6px 0; border-top: 1px solid var(--border); font-size: 13.5px; cursor: pointer; } .lb-man input { margin-top: 3px; }
/* Khối Toàn công ty dạng bảng điều hành: 4 dải (kinh doanh, dòng tiền, vận hành theo 4 Bước, chờ lãnh đạo quyết) + phần phân tích ẩn sẵn */
.hm-sec { margin: 16px 0 6px; font-size: 14px; }
a.hm-kpi { display: block; text-decoration: none; } a.hm-kpi:hover { outline: 1px solid var(--border); }
.hm-kl span { font-weight: 600; } .hm-c-ok { color: #2f6b2a; }
.hm-stages { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.hm-stage { border: 1px solid var(--border); border-radius: 12px; padding: 8px 12px; } .hm-stage b { display: block; font-size: 20px; font-weight: 800; color: var(--primary); } .hm-stage span { display: block; font-size: 12.5px; color: var(--muted); } .hm-stage span.hm-c-red { color: #b3261e; font-weight: 600; }
.hm-more { margin-top: 10px; } .hm-more > summary { cursor: pointer; font-size: 13px; color: var(--muted); } .hm-more[open] > summary { color: var(--text); }
.hm-bk { display: grid; gap: 10px; }
@media (max-width: 700px) { .hm-stages { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.hm-bars { margin-top: 12px; display: flex; flex-direction: column; gap: 6px; }
.hm-bar { display: grid; grid-template-columns: minmax(0, 240px) minmax(0, 1fr) 90px; gap: 10px; align-items: center; font-size: 13px; text-decoration: none; color: var(--text) !important; }
.hm-bar i { display: block; height: 10px; border-radius: 6px; background: var(--gold); }
.hm-bar b { font-weight: 700; } .hm-bar em { font-style: normal; font-weight: 400; color: #b3261e; }
@media (max-width: 1000px) { .hm-cols { grid-template-columns: 1fr; } .hm-bar { grid-template-columns: minmax(0, 1fr) 80px 70px; } }

/* ===== Nền kem – nâu cho các mục còn lại (Tiến yêu cầu 10/10): mọi trang trừ Đơn dịch vụ (đã có nền kem riêng), Báo cáo quản trị, BI Dashboard (nền tối), Quản trị, Sửa dữ liệu ===== */
:root:not([data-theme="dark"]):not([data-page="don"]):not([data-page="hsp"]):not([data-page="bao-cao"]):not([data-page="bi"]):not([data-page="quan-tri"]):not([data-page="du-lieu"]) .main {
  --bg: #f7f4ed; --surface: #ffffff; --surface-2: #f4f0e9; --surface-3: #ece4db; --border: #e7e2d8; --text: #2b211c; --muted: #156082;
  --navy: #3b2a21; --primary: #5a3a2c; --primary-2: #7b5d4e; --gold: #b8916e; --gold-soft: #f1e6da;
  --ai-grad: linear-gradient(61deg, #5a3a2c 13%, #b8916e 88%);
  background: var(--bg); color: var(--text);
}
:root:not([data-theme="dark"]):not([data-page="don"]):not([data-page="hsp"]):not([data-page="bao-cao"]):not([data-page="bi"]):not([data-page="quan-tri"]):not([data-page="du-lieu"]) .main a { color: var(--primary-2); }
:root:not([data-theme="dark"]):not([data-page="don"]):not([data-page="hsp"]):not([data-page="bao-cao"]):not([data-page="bi"]):not([data-page="quan-tri"]):not([data-page="du-lieu"]) .main .btn-primary,
:root:not([data-theme="dark"]):not([data-page="don"]):not([data-page="hsp"]):not([data-page="bao-cao"]):not([data-page="bi"]):not([data-page="quan-tri"]):not([data-page="du-lieu"]) .main .btn-gold { background: var(--act); color: #fff; }
:root:not([data-theme="dark"]):not([data-page="don"]):not([data-page="hsp"]):not([data-page="bao-cao"]):not([data-page="bi"]):not([data-page="quan-tri"]):not([data-page="du-lieu"]) .main thead th { background: var(--surface-2); }
:root:not([data-theme="dark"]):not([data-page="don"]):not([data-page="hsp"]):not([data-page="bao-cao"]):not([data-page="bi"]):not([data-page="quan-tri"]):not([data-page="du-lieu"]) .main .badge.gold { background: #dde4f6; color: #2f4a8a; }
:root:not([data-theme="dark"]):not([data-page="don"]):not([data-page="hsp"]):not([data-page="bao-cao"]):not([data-page="bi"]):not([data-page="quan-tri"]):not([data-page="du-lieu"]) .main .hero { background: linear-gradient(120deg, #3b2a21 0%, #5a3a2c 55%, #b8916e 100%); }
:root:not([data-theme="dark"]):not([data-page="don"]):not([data-page="hsp"]):not([data-page="bao-cao"]):not([data-page="bi"]):not([data-page="quan-tri"]):not([data-page="du-lieu"]) .main .hero p { color: #f1e6da; }
/* lời chào: dải màu xanh lá từ xanh nõn tới xanh đậm (Tiến gửi ảnh mẫu 10/10) */
.hm-hello { background: linear-gradient(100deg, #eef5c8 0%, #f8fbe9 60%, #ffffff 100%); border-color: #cfe08f; }
.hm-hello h1 { background: linear-gradient(90deg, #9bc53d 0%, #7fb74a 28%, #5c9c3c 52%, #4e8a35 76%, #2f6b2a 100%); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; font-weight: 800; }
/* Lời chào chạy hiệu ứng Shape (kiểu PowerPoint: hình bầu dục, hướng Out: chữ hiện dần từ giữa ra ngoài) mỗi lần trang tổng quan mở */
@property --hm-shape { syntax: "<percentage>"; inherits: false; initial-value: 100%; }
@keyframes hm-shape { from { --hm-shape: 0%; } to { --hm-shape: 100%; } }
.hm-hello h1 { display: inline-block; animation: hm-shape 1.8s ease-in-out both;
  -webkit-mask-image: radial-gradient(ellipse farthest-corner at center, #000 var(--hm-shape), transparent var(--hm-shape)); mask-image: radial-gradient(ellipse farthest-corner at center, #000 var(--hm-shape), transparent var(--hm-shape)); }
/* Pháo hoa nhẹ ở góc phải khung lời chào: 4 chùm nhỏ sau khi chữ hiện, chạy một lượt rồi tắt */
.hm-hello { position: relative; overflow: hidden; }
.hm-hello::before, .hm-hello::after { content: ""; position: absolute; width: 5px; height: 5px; border-radius: 50%; opacity: 0; pointer-events: none; }
.hm-hello::before { right: 9%; top: 32%; animation: hm-fw1 1.3s ease-out 0.9s 2 both; }
.hm-hello::after { right: 21%; top: 64%; animation: hm-fw2 1.2s ease-out 1.5s 2 both; }
@keyframes hm-fw1 { 0% { opacity: 0; box-shadow: 0 0 0 0 #9bc53d, 0 0 0 0 #f5b83d, 0 0 0 0 #5c9c3c, 0 0 0 0 #ffd86b, 0 0 0 0 #9bc53d, 0 0 0 0 #f5b83d, 0 0 0 0 #5c9c3c, 0 0 0 0 #ffd86b, 0 0 0 0 #9bc53d, 0 0 0 0 #f5b83d, 0 0 0 0 #5c9c3c, 0 0 0 0 #ffd86b, 0 0 0 0 #9bc53d, 0 0 0 0 #f5b83d; } 8% { opacity: 1; } 65% { opacity: 1; } 100% { opacity: 0; box-shadow: 28px 12px 0 -1px #9bc53d, 37px 34px 0 -1px #f5b83d, 13px 31px 0 -1px #5c9c3c, 1px 52px 0 -1px #ffd86b, -12px 32px 0 -1px #9bc53d, -35px 36px 0 -1px #f5b83d, -28px 13px 0 -1px #5c9c3c, -45px -3px 0 -1px #ffd86b, -23px -11px 0 -1px #9bc53d, -21px -35px 0 -1px #f5b83d, -1px -23px 0 -1px #5c9c3c, 19px -36px 0 -1px #ffd86b, 22px -12px 0 -1px #9bc53d, 45px -5px 0 -1px #f5b83d; } }
@keyframes hm-fw2 { 0% { opacity: 0; box-shadow: 0 0 0 0 #f08a3c, 0 0 0 0 #9bc53d, 0 0 0 0 #ffd86b, 0 0 0 0 #e2574c, 0 0 0 0 #f08a3c, 0 0 0 0 #9bc53d, 0 0 0 0 #ffd86b, 0 0 0 0 #e2574c, 0 0 0 0 #f08a3c, 0 0 0 0 #9bc53d, 0 0 0 0 #ffd86b, 0 0 0 0 #e2574c; } 8% { opacity: 1; } 65% { opacity: 1; } 100% { opacity: 0; box-shadow: 20px 17px 0 -1px #f08a3c, 19px 37px 0 -1px #9bc53d, 1px 28px 0 -1px #ffd86b, -17px 38px 0 -1px #e2574c, -19px 18px 0 -1px #f08a3c, -36px 7px 0 -1px #9bc53d, -20px -5px 0 -1px #ffd86b, -19px -25px 0 -1px #e2574c, -1px -16px 0 -1px #f08a3c, 17px -26px 0 -1px #9bc53d, 19px -6px 0 -1px #ffd86b, 36px 5px 0 -1px #e2574c; } }
@media (prefers-reduced-motion: reduce) { .hm-hello h1, .hm-hello::before, .hm-hello::after { animation: none; } }
:root[data-theme="dark"] .hm-hello { background: var(--surface); border-color: var(--border); }
/* chữ phụ (nhãn ô, dòng mô tả dưới tên, ghi chú mờ) đổi sang xanh #156082 cho dễ đọc trên nền kem (Tiến chọn 10/10); Báo cáo, BI, Quản trị giữ nguyên */
:root:not([data-theme="dark"])[data-page="don"]:not([data-sub="moi"]) .main { --muted: #156082; }
/* nội dung điền trong ô: chữ đen, phông Arial (Tiến chọn 10/10); không áp cho Báo cáo, BI nền tối */
:root:not([data-theme="dark"]):not([data-page="bao-cao"]):not([data-page="bi"]) .main input:not([type=checkbox]):not([type=radio]):not([type=file]),
:root:not([data-theme="dark"]):not([data-page="bao-cao"]):not([data-page="bi"]) .main textarea,
:root:not([data-theme="dark"]):not([data-page="bao-cao"]):not([data-page="bi"]) .main select,
:root:not([data-theme="dark"]) .erp-modal input:not([type=checkbox]):not([type=radio]):not([type=file]), :root:not([data-theme="dark"]) .erp-modal textarea, :root:not([data-theme="dark"]) .erp-modal select { color: #000; font-family: Arial, Helvetica, sans-serif; }
/* nút chính màu xanh ở các phần nền kem – nâu: màu khi rê chuột */
:root:not([data-theme="dark"]):not([data-page="bao-cao"]):not([data-page="bi"]):not([data-page="quan-tri"]):not([data-page="du-lieu"]):not([data-page="x1"]):not([data-page="x2"]):not([data-page="x3"]) .main .btn-primary:hover,
:root:not([data-theme="dark"]):not([data-page="bao-cao"]):not([data-page="bi"]):not([data-page="quan-tri"]):not([data-page="du-lieu"]):not([data-page="x1"]):not([data-page="x2"]):not([data-page="x3"]) .main .btn-gold:hover { background: var(--act-2); }
/* Màu hành động (Tiến chốt 11/10): ở các phần nền kem – nâu, mọi nút chính, nút lưu, nút chuyển bước của hồ sơ và ô bước hiện tại
   dùng chung một màu xanh như nút trang Đơn dịch vụ. Đổi màu: sửa hai biến dưới đây */
:root { --act: #2f49c8; --act-2: #263da8; --act-step: #2f49c8; --act-step-2: #263da8; }
/* Ô khâu hiện tại và nút chuyển bước của hồ sơ (Hoàn thành bước, Kiểm tra chéo ĐẠT, Tiếp nhận đơn…): xanh đậm hơn một bậc, chữ trắng, để nổi hơn các nút lưu (Tiến chọn 11/10) */
:root:not([data-theme="dark"]):not([data-page="bao-cao"]):not([data-page="bi"]):not([data-page="quan-tri"]):not([data-page="du-lieu"]):not([data-page="x1"]):not([data-page="x2"]):not([data-page="x3"]) .main .btn-primary[data-act], :root:not([data-theme="dark"]):not([data-page="bao-cao"]):not([data-page="bi"]):not([data-page="quan-tri"]):not([data-page="du-lieu"]):not([data-page="x1"]):not([data-page="x2"]):not([data-page="x3"]) .main #rcvorder { background: var(--act-step); color: #fff; }
:root:not([data-theme="dark"]):not([data-page="bao-cao"]):not([data-page="bi"]):not([data-page="quan-tri"]):not([data-page="du-lieu"]):not([data-page="x1"]):not([data-page="x2"]):not([data-page="x3"]) .main .btn-primary[data-act]:hover, :root:not([data-theme="dark"]):not([data-page="bao-cao"]):not([data-page="bi"]):not([data-page="quan-tri"]):not([data-page="du-lieu"]):not([data-page="x1"]):not([data-page="x2"]):not([data-page="x3"]) .main #rcvorder:hover { background: var(--act-step-2); }
:root:not([data-theme="dark"]):not([data-page="don"]):not([data-page="hsp"]):not([data-page="bao-cao"]):not([data-page="bi"]):not([data-page="quan-tri"]):not([data-page="du-lieu"]) .main .erp-steps div.cur { background: var(--act-step); color: #fff; }
/* Tiến chốt 11/10: MỌI nút chính ở giao diện sáng (trừ Báo cáo quản trị, BI Dashboard có bộ màu riêng) dùng nền xanh đậm #2F49C8, chữ trắng (tương phản 7,2),
   kể cả trang Đơn dịch vụ, Dữ liệu gốc, Quản trị và các hộp thoại */
:root:not([data-theme="dark"]):not([data-page="bao-cao"]):not([data-page="bi"]) .main .btn-primary, :root:not([data-theme="dark"]):not([data-page="bao-cao"]):not([data-page="bi"]) .main .btn-gold, :root:not([data-theme="dark"]):not([data-page="bao-cao"]):not([data-page="bi"]) .erp-modal .btn-primary, :root:not([data-theme="dark"]):not([data-page="bao-cao"]):not([data-page="bi"]) .erp-modal .btn-gold { background: var(--act); color: #fff; }
:root:not([data-theme="dark"]):not([data-page="bao-cao"]):not([data-page="bi"]) .main .btn-primary:hover, :root:not([data-theme="dark"]):not([data-page="bao-cao"]):not([data-page="bi"]) .main .btn-gold:hover, :root:not([data-theme="dark"]):not([data-page="bao-cao"]):not([data-page="bi"]) .erp-modal .btn-primary:hover, :root:not([data-theme="dark"]):not([data-page="bao-cao"]):not([data-page="bi"]) .erp-modal .btn-gold:hover { background: var(--act-2); }
/* nút Đề xuất (★ Đề xuất chỉ tiêu còn thiếu, Đề xuất Mục QCVN 8-1 · 8-2 · 8-3): thêm viền vàng để phân biệt với nút thao tác thường */
.btn.btn-dx { box-shadow: 0 0 0 2px #ffd86b; }
/* ô Khách hàng của tab Kiểm tra nhãn: danh sách gợi ý tự dựng (lọc không dấu, tên viết tắt) */
.lb-cust { position: absolute; top: calc(100% + 4px); left: 0; z-index: 60; min-width: 100%; width: max-content; max-width: min(640px, 90vw); max-height: 320px; overflow: auto; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow); padding: 4px; }
.lb-cust-opt { padding: 6px 10px; border-radius: 7px; font-size: 13px; cursor: pointer; }
.lb-cust-opt[data-cid]:hover, .lb-cust-opt.on { background: rgba(47, 73, 200, .12); }
/* Dải tab (Tiến chốt 12/10): chữ mặc định nâu đậm; tab đang mở nền trắng, chữ xanh lá cây, viền màu đồng #B87333. Trừ Báo cáo quản trị, BI Dashboard có bộ màu riêng */
:root:not([data-theme="dark"]):not([data-page="bao-cao"]):not([data-page="bi"]) .main .tabs button { color: #5a3a2c; border: 2px solid transparent; border-radius: 9px; padding: 7px 13px; margin-bottom: 5px; }
:root:not([data-theme="dark"]):not([data-page="bao-cao"]):not([data-page="bi"]) .main .tabs button:hover { background: rgba(90, 58, 44, .08); }
:root:not([data-theme="dark"]):not([data-page="bao-cao"]):not([data-page="bi"]) .main .tabs button.active { background: #fff; color: #15803d; border-color: #b87333; }

/* 12/10: khung ghi chú / hướng dẫn trong trang (nút lập phiếu không thuộc quyền, việc còn lại của đơn, kết quả nhân bản) */
.erp-note { margin: 10px 0 0; padding: 10px 14px; border: 1px solid var(--line, #E9EAEB); border-left: 4px solid var(--titan, #4262F0); border-radius: 8px; background: color-mix(in srgb, var(--titan, #4262F0) 6%, transparent); font-size: 14px; line-height: 1.5; }
.erp-note .btn { margin-left: 6px; }
.cg-list { margin: 8px 0 10px; padding: 0; list-style: none; display: grid; gap: 6px; }
.cg-list li { display: flex; gap: 8px; align-items: flex-start; }
.cg-list .cg-ic { flex: 0 0 22px; text-align: center; }
.cg-list li.cg-ok { color: var(--muted, #6b7280); }
.cg-list li.cg-now { font-weight: 500; }
.cg .btn { margin-left: 0; }
.lab-res .input.hidden { display: none; }
/* 12/10: bảng chỉ tiêu công bố (mức tự tính, tên văn bản căn cứ), xem nhanh bảng chỉ tiêu trong hộp Tiếp nhận */
.sp-calc { margin-top: 2px; color: var(--ok, #1a7f4b); white-space: nowrap; }
.sp-calc.sp-own { color: var(--muted, #6b7280); }
.sp-miss { color: var(--bad, #c0392b); font-weight: 500; }
.sp-prev { margin: 6px 0 12px; }
.sp-prevt { width: 100%; margin-top: 4px; font-size: 13px; }
.sp-prevt th, .sp-prevt td { padding: 3px 8px; text-align: left; border-bottom: 1px solid var(--line, #E9EAEB); }

/* 12/10 (Tiến gửi ảnh thẻ "Lợi nhuận gộp" làm mẫu): các ô đầu trang hồ sơ (Tên công ty, Hạn chuyển bước, Hạn hồ sơ, Doanh thu · Chi phí…) nền xám trắng, viền xám nhạt, chữ than đậm.
   Màu lấy theo mắt từ ảnh mẫu: nền #F6F6F5, viền #DEDDDA, chữ chính #1F1F1F, chữ phụ #5F5E5A. Ô quá hạn vẫn giữ nền đỏ nhạt. Xóa khối này là về màu trước đó. */
:root:not([data-theme="dark"])[data-page="hsp"] .ih-wrap .ih-tile:not(.late),
:root:not([data-theme="dark"])[data-page="hsp"] .ih-wrap .ih-tile[data-ih="company"]:not(.late) { background: #f6f6f5; border-color: #deddda; color: #1f1f1f; box-shadow: 0 1px 2px rgba(0, 0, 0, .04); }
:root:not([data-theme="dark"])[data-page="hsp"] .ih-wrap .ih-tile:not(.late) .ih-lbl { color: #3a3a38; opacity: 1; }
:root:not([data-theme="dark"])[data-page="hsp"] .ih-wrap .ih-tile:not(.late) .ih-val, :root:not([data-theme="dark"])[data-page="hsp"] .ih-wrap .ih-tile:not(.late) .ih-val strong,
:root:not([data-theme="dark"])[data-page="hsp"] .ih-wrap .ih-tile:not(.late) .ih-note strong, :root:not([data-theme="dark"])[data-page="hsp"] .ih-wrap .ih-tile:not(.late) .ih-code { color: #1f1f1f; }
:root:not([data-theme="dark"])[data-page="hsp"] .ih-wrap .ih-tile:not(.late) .ih-note, :root:not([data-theme="dark"])[data-page="hsp"] .ih-wrap .ih-tile:not(.late) .ih-soft { color: #5f5e5a; }
/* Tên sản phẩm: to hơn một chút và nằm trong khung bo tròn như nhãn "Thực phẩm thường" */
.ih-wrap .ih-sub > span:first-child { font-size: 21px; padding: 4px 16px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); line-height: 1.35; }
@media (max-width: 560px) { .ih-wrap .ih-sub > span:first-child { font-size: 18px; border-radius: 14px; } }
/* 12/10: tên sản phẩm trong danh sách hồ sơ (trang Hồ sơ sản phẩm, tab Sản phẩm của đơn) đóng khung bo tròn, màu chữ như nhãn "Thực phẩm thường" */
.it-name { display: inline-block; padding: 3px 11px; border-radius: 13px; background: var(--surface-2); border: 1px solid var(--border); color: #24508f; font-weight: 600; line-height: 1.35; margin-bottom: 3px; }
:root[data-theme="dark"] .it-name { color: #9cc0f5; }
/* 12/10: ký hiệu tắt loại thủ tục cạnh mã hồ sơ (TCB, CVTĐ, HQ, MSMV…) */
.it-proc { display: inline-block; margin-left: 4px; padding: 0 7px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface-2); color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .03em; font-family: inherit; vertical-align: 1px; }
/* 12/10: tab Kiểm nghiệm, cột Chỉ tiêu: danh sách chỉ tiêu thu gọn, bấm ▸ để mở / thu */
.lab-tl > summary { cursor: pointer; white-space: nowrap; }
.lab-tl > ol { margin: 4px 0 0; padding-left: 18px; min-width: 220px; }
/* 12/10: số phiếu kết quả ở cột Phiếu của tab Kiểm nghiệm; quá 2 ngày chưa nhập thì tô đỏ */
.lab-no { margin-top: 6px; }
.lab-no label { display: block; }
.lab-no-late, .lab-no-late label { color: var(--danger, #c0392b); }
.lab-no-late input { border-color: var(--danger, #c0392b); background: color-mix(in srgb, var(--danger, #c0392b) 7%, transparent); }
/* 12/10 tối: nút thao tác của phiếu kiểm nghiệm gom vào "⋯ Thao tác"; nhãn việc của tôi; trang Việc của tôi gom theo loại việc */
.lab-act { position: relative; display: inline-block; }
.lab-act > summary { list-style: none; cursor: pointer; white-space: nowrap; }
.lab-act > summary::-webkit-details-marker { display: none; }
.lab-act-menu { position: absolute; right: 0; top: calc(100% + 4px); z-index: 20; display: flex; flex-direction: column; align-items: stretch; gap: 6px; min-width: 220px; padding: 10px; background: var(--surface, #fff); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 8px 24px rgba(0, 0, 0, .14); text-align: left; }
.lab-act-menu select { width: 100% !important; }
.my-task { display: block; width: fit-content; max-width: 260px; margin: 2px 0; padding: 2px 9px; border-radius: 999px; font-size: 12.5px; font-weight: 600; text-decoration: none; color: #7a4a12; background: #fdf0d8; border: 1px solid #f0d49b; }
:root[data-theme="dark"] .my-task { color: #f3d08a; background: #3a2c12; border-color: #5c4519; }
.my-grp { border: 1px solid var(--border); border-radius: 10px; margin: 8px 0; background: var(--surface, #fff); }
.my-grp > summary { cursor: pointer; padding: 9px 12px; }
.my-grp .table-wrap { margin: 0 8px 8px; }
.my-grp td { padding-top: 6px; padding-bottom: 6px; }
.my-tt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.my-all > summary { cursor: pointer; }
.my-all[open] > summary { margin-bottom: 10px; }

/* 12/10 tối (Tiến): bố cục đầu trang hồ sơ gồm 5 khung trên một hàng: Đơn vị tự công bố · Tên sản phẩm · Số hồ sơ · Chuyên viên / bước hiện tại · Hạn hồ sơ
   (thêm khung Doanh thu · Chi phí với vai trò được xem tiền). Mã hồ sơ và nhãn khâu ở dòng trên đã bỏ vì trùng với dòng đường dẫn. */
.ih-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ih-wrap.ih-v2 .ih-subbar { display: flex; justify-content: flex-end; margin: 0 0 6px; min-height: 0; }
.ih-wrap.ih-v2 .ih-subbar:empty { display: none; }
:root .ih-wrap.ih-v2 .ih-grid.ih-grid { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
:root .ih-wrap.ih-v2 .ih-grid.ih-grid > .ih-tile.ih-tile { flex: 1 1 170px; max-width: none; min-width: 0; padding: 9px 12px; border-radius: 10px; }
:root .ih-wrap.ih-v2 .ih-grid.ih-grid > .ih-tile[data-ih="company"] { flex: 1.7 1 190px; }
:root .ih-wrap.ih-v2 .ih-grid.ih-grid > .ih-tile[data-ih="product"] { flex: 2.1 1 220px; }
:root .ih-wrap.ih-v2 .ih-grid.ih-grid > .ih-tile[data-ih="dossier"] { flex: 1.15 1 150px; }
:root .ih-wrap.ih-v2 .ih-grid.ih-grid > .ih-tile[data-ih="step"] { flex: 1.9 1 215px; }
:root .ih-wrap.ih-v2 .ih-grid.ih-grid > .ih-tile[data-ih="due"] { flex: .85 1 115px; }
:root .ih-wrap.ih-v2 .ih-grid.ih-grid > .ih-tile[data-ih="money"] { flex: 1.1 1 145px; }
:root .ih-wrap.ih-v2 .ih-grid.ih-grid > .ih-tile[data-ih="missing"], :root .ih-wrap.ih-v2 .ih-grid.ih-grid > .ih-tile.full { flex: 1 1 100%; }
.ih-wrap.ih-v2 .ih-tile .ih-lbl { font-size: 10.5px; margin-bottom: 3px; }
.ih-wrap.ih-v2 .ih-tile .ih-val { font-size: 14px; line-height: 1.35; }
.ih-wrap.ih-v2 .ih-tile .ih-note { font-size: 12px; margin-top: 3px; line-height: 1.4; }
/* khung Tên sản phẩm: vạch nhấn và màu chữ riêng để nhận ra ngay */
:root:not([data-theme="dark"]) .ih-wrap.ih-v2 .ih-tile[data-ih="product"]:not(.late) { background: #f3f5fb; border-color: #d5dcef; box-shadow: inset 3px 0 0 #2f4a8a; }
:root:not([data-theme="dark"]) .ih-wrap.ih-v2 .ih-tile[data-ih="product"] .ih-pname { color: #2f4a8a; font-size: 15.5px; font-weight: 650; }
.ih-wrap.ih-v2 .ih-pgrp { font-weight: 600; opacity: .85; }
.ih-wrap.ih-v2 .ih-stepname .badge { font-size: 11.5px; vertical-align: 1px; }

/* 12/10 tối: Số hồ sơ · Số tự công bố không đóng khung, nằm góc trái hàng nút; khung gộp Đơn vị tự công bố + Tên sản phẩm */
.ih-nos { font-size: 14px; font-weight: 500; color: var(--text); margin-right: 8px; }
.ih-nos .ih-sep { color: var(--muted); margin: 0 4px; }
.ih-top h1 { font-size: 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ih-wrap.ih-v2 .ih-prod { margin-top: 6px; padding-top: 6px; border-top: 1px dashed var(--border); }
:root:not([data-theme="dark"]) .ih-wrap.ih-v2 .ih-prod .ih-pname { color: #2f4a8a; font-size: 16px; font-weight: 650; line-height: 1.35; }
:root .ih-wrap.ih-v2 .ih-grid.ih-grid > .ih-tile[data-ih="company"] { flex: 2.6 1 320px; }
/* 13/10: dòng "Bạn không có thao tác ở bước này" ở đầu trang hồ sơ: chữ đỏ nâu in đậm, nền vàng */
.ih-noact { display: inline-block; padding: 2px 10px; border-radius: 999px; background: #fde68a; border: 1px solid #f2c94c; color: #8a2c1c; font-weight: 700; font-size: 14px; line-height: 1.5; }
:root[data-theme="dark"] .ih-noact { background: #4a3a0c; border-color: #7a6014; color: #ffc9b8; }
/* 13/10: khung "Việc cần làm ngay" thu gọn sau mũi tên; bấm mới sổ nội dung chi tiết */
.erp-focus .fc-head { display: flex; align-items: center; gap: 6px; width: 100%; padding: 0; border: 0; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.erp-focus .fc-arrow { display: inline-block; width: 14px; }
.erp-focus .fc-body { margin-top: 8px; }
.erp-focus.fc-closed { padding-top: 7px; padding-bottom: 7px; }
.erp-focus.fc-closed .fc-body { max-height: 0; margin: 0; overflow: hidden; }

/* 13/10: nút xuất Bản tự công bố khi chưa chọn mẫu */
.btn.is-off { opacity: .5; cursor: not-allowed; }

/* 13/10: trang Kiến thức cho Trợ lý AI */
tr.kb-off td { opacity: .6; }
.kb-hit { border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; margin-bottom: 6px; background: #fff; }
.kb-body { white-space: pre-wrap; margin-top: 4px; color: #1f1f1f; }
.kb-modal { position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 1000; display: flex; align-items: flex-start; justify-content: center; padding: 4vh 16px; overflow: auto; }
.kb-box { width: min(860px, 100%); max-height: 90vh; overflow: auto; }

/* 14/10: nút tải PDF hướng dẫn theo vị trí */
.pdf-roles { position: relative; }
.pdf-roles > summary { list-style: none; cursor: pointer; }
.pdf-roles > summary::-webkit-details-marker { display: none; }
.pdf-roles-menu { position: absolute; right: 0; top: calc(100% + 4px); z-index: 30; min-width: 270px; padding: 6px; display: flex; flex-direction: column; }
.pdf-roles-menu a { padding: 7px 10px; border-radius: 6px; color: inherit; text-decoration: none; white-space: nowrap; }
.pdf-roles-menu a:hover { background: var(--hover, #f1f3f8); }

/* 14/10: thanh cuộn ngang đầu bảng (Dữ liệu gốc): thanh trên thay thanh dưới đáy bảng */
.top-scroll { overflow-x: auto; overflow-y: hidden; height: 14px; margin: 0 0 4px; position: sticky; top: 0; z-index: 5; background: var(--surface); }
.top-scroll > div { height: 1px; }
.table-wrap.ts-on::-webkit-scrollbar { height: 0; }

/* 14/10 (Tiến): Dữ liệu gốc "Freeze Panes": dòng tiêu đề bảng đứng yên, lăn chuột chỉ chạy phần dữ liệu bên dưới.
   Bảng cuộn trong khung cao tối đa bằng màn hình (trừ thanh trên cùng), tiêu đề dính đầu khung. Thanh cuộn dọc vẫn hiện, thanh ngang dưới đáy ẩn (đã có thanh ở đầu bảng). */
[data-ts-root] .table-wrap { max-height: calc(100vh - 150px); overflow: auto; }
[data-ts-root] .table-wrap thead th { position: sticky; top: 0; z-index: 4; box-shadow: inset 0 -1px 0 var(--border); }

/* 14/10: khung số ở Việc của tôi bấm được */
a.stat-link { display: block; color: inherit; text-decoration: none; cursor: pointer; transition: border-color .15s, box-shadow .15s; }
a.stat-link:hover { border-color: var(--gold, #c9a227); box-shadow: 0 2px 10px rgba(0,0,0,.06); }
.jump-hl { outline: 2px solid var(--gold, #c9a227); outline-offset: 2px; transition: outline-color .4s; }