:root {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #16324f;
  background: #eef7fb;
  font-synthesis: none;
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; }
/* Bề ngang khung ứng dụng. Phần mềm dùng trên màn hình ngang tiêu chuẩn (1440–
   1920px), mà khung 1240px cũ bỏ phí hai bên tới vài trăm pixel — đúng chỗ mà sơ
   đồ MDC và bảng danh mục đang thiếu. Vẫn có trần để dòng chữ không dài quá tầm
   mắt trên màn hình siêu rộng. */
:root { --app-width: 1640px; }
header, main, footer { max-width: min(var(--app-width), 98vw); margin: auto; }

/* Sơ đồ MDC là thứ rộng nhất trong phần mềm: cho nó dùng gần hết bề ngang màn
   hình, vì mỗi trăm pixel thêm là một mức phóng đỡ phải bấm. */
#diagram-view { max-width: none; }
header {
  display: flex; justify-content: space-between; gap: 32px; align-items: center;
  padding: 9px 20px 7px;
}
.brand-lockup { display: flex; align-items: center; gap: 9px; min-width: 0; }
.ministry-logo { width: 48px; height: 38px; object-fit: contain; flex: 0 0 auto; }
h1 { margin: 0; color: #075985; font-size: clamp(1.2rem, 2vw, 1.55rem); line-height: 1.1; }
h2, h3 { color: #164e63; }
h2 { margin: 0; font-size: 1.15rem; }
h3 { margin-top: 28px; }
.eyebrow, .step { color: #0e7490; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; font-size: .78rem; margin: 0; }
.subtitle { display: none; }
.package-badge { background: #fff7ed; border: 1px solid #fdba74; border-radius: 9px; padding: 7px 10px; display: grid; gap: 1px; color: #9a3412; font-size: .75rem; }
.package-badge span { font-size: .62rem; font-weight: 800; }
main { padding: 0 20px 20px; display: grid; gap: 10px; }
.card { background: white; border: 1px solid #cde6ef; border-radius: 15px; padding: 16px 18px; box-shadow: 0 8px 24px rgba(14, 116, 144, .07); }
.section-heading { display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.section-heading.compact { margin-top: 0; }
.form-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px 10px; margin: 12px 0; }
.date-time { display: grid; grid-template-columns: 1.35fr 1fr; gap: 6px; }
label { display: grid; gap: 4px; font-weight: 700; font-size: .76rem; color: #31566d; }
input, select { width: 100%; min-width: 0; border: 1px solid #abcbd8; border-radius: 8px; padding: 7px 9px; font: inherit; color: #173b4d; background: white; }
input::placeholder { color: #91a6b2; opacity: 1; }
input:focus, select:focus { outline: 3px solid #bae6fd; border-color: #0284c7; }
input[readonly] { color: #6b7f8c; background: #f6fafc; }
.diagnosis-row { display: grid; grid-template-columns: 1fr; gap: 7px; margin-bottom: 6px; }
.secondary-row { grid-template-columns: 24px minmax(0, 1fr) 88px; align-items: center; }
.procedure-row { grid-template-columns: 24px minmax(0, 1fr) 28px; align-items: center; }
.code-lookup { grid-column: 2 / -1; margin: -2px 0 8px; color: #607d8e; font-size: .8rem; }
.secondary-row .code-lookup { grid-column: 2 / -1; }
.code-lookup.found { color: #166534; }
.code-lookup.missing { color: #b45309; }
.order-number { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; background: #e0f2fe; color: #0369a1; font-size: .72rem; font-weight: 800; }
.row-actions { display: flex; gap: 5px; }
.row-actions button { border: 1px solid #b8d5df; background: white; color: #075985; border-radius: 7px; width: 25px; height: 29px; padding: 0; font-weight: 800; cursor: pointer; }
.row-actions button:disabled { opacity: .3; cursor: default; }
.button { border: 0; border-radius: 8px; padding: 8px 12px; font-weight: 800; cursor: pointer; }
.button:disabled { opacity: .45; cursor: not-allowed; }
.button.primary { margin-top: 0; padding: 10px 20px; background: #0284c7; color: white; font-size: .9rem; }
.button.primary.compact-button { margin-top: 0; padding: 11px 17px; }
.button.secondary { background: #e0f2fe; color: #075985; }
.add-diagnosis-button { margin-top: 4px; }
.coding-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; align-items: stretch; border-top: 1px solid #dbeaf0; }
.coding-panel { min-width: 0; padding: 10px 16px 4px 0; }
.coding-panel + .coding-panel { border-left: 1px solid #dbeaf0; padding: 10px 0 4px 16px; }
.coding-panel h3 { margin: 0; font-size: 1rem; }
.coding-panel h4 { color: #31566d; font-size: .78rem; margin: 10px 0 5px; }
.count-badge { color: #075985; background: #e0f2fe; border-radius: 999px; padding: 5px 8px; font-size: .72rem; font-weight: 800; white-space: nowrap; }
.service-input, .procedure-input { margin-top: 0; max-width: 100%; }
.service-input span { color: #648093; font-weight: 400; font-size: .82rem; }
.service-mapping-list { margin-top: 5px; display: grid; gap: 4px; }
.service-mapping-item { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 8px; padding: 5px 7px; border-radius: 7px; background: #f0f9ff; }
.service-mapping-item strong { color: #075985; font-size: .76rem; }
.service-mapping-item span { overflow-wrap: anywhere; }
.hint { color: #648093; font-size: .88rem; }
.validation { margin-top: 20px; border: 1px solid #fca5a5; background: #fef2f2; color: #991b1b; padding: 14px 18px; border-radius: 10px; }
.validation.notice { border-color: #7dd3fc; background: #f0f9ff; color: #0c4a6e; }
.validation p { margin: 8px 0; }
.run-steps { margin: 10px 0 0; padding-left: 20px; display: grid; gap: 5px; }
.result-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; margin: 12px 0 4px; }
.result-grid div { padding: 10px; border-radius: 9px; background: #eff9fc; display: grid; gap: 4px; }
.result-grid span { color: #587589; font-size: .78rem; font-weight: 700; }
.result-grid strong { color: #075985; font-size: 1.15rem; }
.result-grid .drg { background: #cffafe; border: 1px solid #67e8f9; }
.result-drg-name { margin: 0 0 14px; padding: 10px 12px; border-left: 4px solid #06b6d4; border-radius: 6px; background: #ecfeff; color: #164e63; font-weight: 700; }
.success-badge { color: #166534; background: #dcfce7; border-radius: 999px; padding: 8px 13px; font-weight: 800; font-size: .8rem; }
.result-steps { margin-top: 18px; }
.result-steps .explanation-heading { margin-top: 0; }
.trace-list { list-style: none; counter-reset: trace 2; padding: 0; display: grid; gap: 8px; }
.trace-list li { counter-increment: trace; position: relative; padding: 15px 16px 15px 54px; border-left: 3px solid #22d3ee; background: #f1fbfd; border-radius: 10px; }
.trace-list li::before { content: counter(trace); position: absolute; left: 14px; top: 14px; width: 26px; height: 26px; display: grid; place-items: center; background: #0891b2; color: white; border-radius: 50%; font-weight: 800; }
.trace-list p { margin: 5px 0 0; color: #587589; }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: .9rem; }
th, td { text-align: left; padding: 12px 10px; border-bottom: 1px solid #dbeaf0; vertical-align: top; }
th { color: #446679; background: #f4fafc; }
td span { color: #6a8595; }
.status { display: inline-block; border-radius: 999px; padding: 5px 9px; font-size: .76rem; font-weight: 800; white-space: nowrap; }
.status.retained { color: #166534; background: #dcfce7; }
.status.principal-excluded, .status.sequential-excluded { color: #9a3412; background: #ffedd5; }
.status.discarded { color: #4b5563; background: #e5e7eb; }
.diagnosis-ccl-summary { margin: 10px 0 0; padding: 9px 11px; border-left: 3px solid #22d3ee; border-radius: 7px; background: #f1fbfd; color: #31566d; font-size: .82rem; }
footer { padding: 0 24px 32px; color: #647f90; text-align: center; font-size: .82rem; }
.batch-summary { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-top: 20px; }
.batch-summary div { padding: 15px; border-radius: 12px; background: #eff9fc; display: grid; gap: 6px; }
.batch-summary span { color: #587589; font-size: .78rem; font-weight: 700; }
.batch-summary strong { color: #075985; font-size: 1.4rem; }
.batch-summary .ok { background: #dcfce7; }
.batch-summary .warning { background: #ffedd5; }
.batch-summary .error { background: #fee2e2; }
.batch-summary p { grid-column: 1 / -1; color: #587589; margin: 4px 0 0; }
.batch-suite-picker { max-width: 560px; grid-template-columns: 64px minmax(0, 1fr); align-items: center; margin-top: 14px; }
.batch-table-wrap { margin-top: 14px; max-height: 560px; border: 1px solid #dbeaf0; border-radius: 10px; }
.batch-table-wrap thead { position: sticky; top: 0; z-index: 1; }
.batch-status { display: inline-block; border-radius: 999px; padding: 5px 8px; font-size: .74rem; font-weight: 800; white-space: nowrap; }
.batch-status.pass { color: #166534; background: #dcfce7; }
.batch-status.fail { color: #991b1b; background: #fee2e2; }
.batch-status.pending { color: #92400e; background: #fef3c7; }
.reference-load { margin-top: 12px; border-radius: 10px; padding: 10px 12px; background: #f6fafc; color: #527086; display: grid; gap: 3px; font-size: .82rem; }
.reference-load.ready { background: #ecfdf5; color: #166534; border: 1px solid #a7f3d0; }
.reference-load.error { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }
.reference-status-toggle { width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid #abcbd8; border-radius: 50%; background: white; color: #527086; font-size: 1.1rem; cursor: pointer; }
.reference-status-toggle.ready { color: #166534; border-color: #86efac; background: #f0fdf4; }
.reference-status-toggle:hover { border-color: #0284c7; color: #075985; }
.reference-search { max-width: 500px; margin-top: 22px; }
.drg-lookup-result { margin-top: 14px; border: 1px solid #cde6ef; border-radius: 14px; padding: 18px; background: #f8fcfd; }
.reference-result-title span { display: block; color: #0e7490; font-weight: 800; font-size: .78rem; letter-spacing: .04em; }
.reference-result-title strong { display: block; margin-top: 6px; color: #164e63; font-size: 1.05rem; }
.reference-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 16px; }
.reference-metrics div { padding: 13px; border-radius: 10px; background: white; border: 1px solid #dbeaf0; display: grid; gap: 5px; }
.reference-metrics span { color: #648093; font-size: .76rem; font-weight: 700; }
.reference-metrics strong { color: #075985; font-size: 1.25rem; }
.source-note, .empty { color: #648093; font-size: .82rem; margin: 12px 0 0; }
.test-picker-row { display: grid; grid-template-columns: minmax(250px, .75fr) minmax(420px, 1.25fr); gap: 10px; margin: 8px 0 3px; }
.test-case-picker { margin: 0; max-width: none; grid-template-columns: 116px minmax(0, 1fr); align-items: center; white-space: nowrap; }
.test-case-note { margin: 3px 0 8px; color: #648093; font-size: .75rem; min-height: 1em; }
.test-case-picker span { color: #648093; font-weight: 400; }
.sample-case-preview { display: none !important; }
.sample-case-preview { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 16px; }
.sample-case-preview div { padding: 13px; border-radius: 10px; background: #f6fafc; display: grid; gap: 5px; }
.sample-case-preview span { color: #648093; font-size: .76rem; font-weight: 700; }
.sample-case-preview strong { color: #164e63; overflow-wrap: anywhere; }
.sample-case-preview p { grid-column: 1 / -1; color: #527086; margin: 2px 0; }
.sample-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.sample-case-result { margin-top: 16px; padding: 16px 18px; border-radius: 12px; }
.sample-case-result.ok { color: #166534; background: #ecfdf5; border: 1px solid #a7f3d0; }
.sample-case-result.warning { color: #92400e; background: #fffbeb; border: 1px solid #fde68a; }
.sample-case-result p { margin-bottom: 0; }

[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.app-tabs { display: flex; gap: 4px; border-bottom: 1px solid #cde6ef; }
.app-tab { border: 0; border-radius: 9px 9px 0 0; padding: 8px 14px; background: transparent; color: #527086; font-weight: 800; cursor: pointer; }
.app-tab.active { color: #075985; background: white; box-shadow: inset 0 -3px #0284c7; }
.tab-view { min-width: 0; }
.tab-view#workspace-view { display: grid; gap: 10px; }
.list-toolbar { min-height: 37px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.list-toolbar h4 { margin: 8px 0 5px; }
.add-diagnosis-button { margin-top: 0; padding: 6px 9px; font-size: .72rem; }
.form-actions { display: flex; align-items: center; gap: 16px; margin-top: 10px; }
.checkbox-option { display: flex; grid-template-columns: none; align-items: center; gap: 7px; font-size: .8rem; cursor: pointer; }
.checkbox-option input { width: 17px; height: 17px; accent-color: #0284c7; }
.section-description { color: #648093; margin: 4px 0 0; font-size: .84rem; }
.catalog-toolbar { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; margin: 14px 0 8px; }
.catalog-summary { margin: 8px 0; color: #527086; font-size: .82rem; }
.catalog-table-wrap { max-height: 590px; border: 1px solid #dbeaf0; border-radius: 10px; }
.catalog-table thead { position: sticky; top: 0; z-index: 1; }
.catalog-table td:first-child { width: 180px; color: #075985; }
.catalog-table td:nth-child(3) { width: 300px; color: #648093; }
.catalog-table th:last-child, .catalog-table td:last-child { width: 86px; }
.draft-marker { display: inline-block; margin-left: 5px; padding: 2px 5px; border-radius: 999px; background: #fef3c7; color: #92400e; font-size: .65rem; font-weight: 800; }
.catalog-edit-button { border: 1px solid #b8d5df; border-radius: 7px; padding: 5px 8px; background: white; color: #075985; font-weight: 800; cursor: pointer; }
.catalog-pagination { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 10px; }
.catalog-pagination > label { display: flex; grid-template-columns: none; align-items: center; gap: 7px; }
.catalog-pagination select { width: 76px; }
.pagination-buttons { display: flex; align-items: center; justify-content: flex-end; gap: 6px; }
.pagination-buttons button { min-width: 38px; height: 32px; border: 1px solid #b8d5df; border-radius: 7px; background: white; color: #075985; font-weight: 800; cursor: pointer; }
.pagination-buttons button:disabled { opacity: .35; cursor: default; }
.pagination-buttons label { display: flex; grid-template-columns: none; align-items: center; gap: 5px; }
.pagination-buttons input { width: 64px; height: 32px; text-align: center; }
.pagination-buttons span { min-width: 120px; color: #527086; font-size: .8rem; }
.catalog-editor { margin-top: 14px; padding: 14px; border: 1px solid #9fc5d4; border-radius: 12px; background: #f8fcfd; }
.catalog-editor h3 { margin: 0; font-size: 1rem; }
.draft-badge { color: #92400e; background: #fef3c7; border-radius: 999px; padding: 6px 9px; font-size: .72rem; font-weight: 800; }
.catalog-editor-grid { margin-top: 12px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px 12px; }
.catalog-editor-grid .editor-wide { grid-column: 1 / -1; }
.catalog-editor textarea { width: 100%; resize: vertical; border: 1px solid #abcbd8; border-radius: 8px; padding: 8px 9px; color: #173b4d; background: white; font: inherit; }
.catalog-edit-status { min-height: 1em; color: #527086; font-size: .8rem; }
.editor-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.form-card { padding-bottom: 14px; }
.result-card { padding-top: 14px; }
.result-card .section-heading h2 { font-size: 1rem; }
.result-card .step { display: none; }
.explanation-heading { margin-top: 18px; }
.autocomplete-menu {
  position: fixed;
  z-index: 1000;
  max-height: 310px;
  overflow-y: auto;
  padding: 5px;
  border: 1px solid #9fc5d4;
  border-radius: 10px;
  background: white;
  box-shadow: 0 14px 32px rgba(14, 70, 96, .2);
}
.autocomplete-menu button {
  width: 100%;
  display: grid;
  grid-template-columns: 105px minmax(0, 1fr);
  gap: 3px 8px;
  padding: 8px 9px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: #173b4d;
  text-align: left;
  cursor: pointer;
}
.autocomplete-menu button:hover, .autocomplete-menu button.active { background: #e7f6fb; }
.autocomplete-menu strong { color: #075985; }
.autocomplete-menu span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.autocomplete-menu small { grid-column: 2; color: #648093; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (max-width: 900px) {
  header { align-items: flex-start; flex-direction: column; }
  .form-grid, .result-grid, .batch-summary, .reference-metrics, .sample-case-preview { grid-template-columns: repeat(2, 1fr); }
  .coding-columns { grid-template-columns: 1fr; }
  .coding-panel + .coding-panel { border-left: 0; border-top: 1px solid #dbeaf0; padding-left: 0; padding-top: 12px; }
  .catalog-toolbar { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .card { padding: 18px; }
  .form-grid, .result-grid, .batch-summary, .reference-metrics, .sample-case-preview { grid-template-columns: 1fr; }
  .diagnosis-row, .secondary-row, .procedure-row { grid-template-columns: 1fr; }
  .order-number { display: none; }
  .code-lookup, .secondary-row .code-lookup { grid-column: 1; }
  .section-heading { align-items: flex-start; flex-direction: column; }
  .test-picker-row, .catalog-editor-grid { grid-template-columns: 1fr; }
  .catalog-editor-grid .editor-wide { grid-column: 1; }
  .catalog-pagination { align-items: flex-start; flex-direction: column; }
  .pagination-buttons { flex-wrap: wrap; justify-content: flex-start; }
}

/* ── Tab Đào tạo DRG ─────────────────────────────────────────────────────── */
/* Bốn trạng thái node dùng chung một bảng màu: đường đi đã chọn nổi bật nhất,
   nhánh khớp nhưng không được chọn ở mức trung bình, nhánh trượt để mờ, nhánh
   chưa đánh giá được dùng nét đứt để không bị nhầm với "đã kết luận sai". */
.training-card { --tt-selected: #0e7490; --tt-matched: #0891b2; --tt-missed: #94a3b8; --tt-unknown: #b45309; }
.form-actions-card { padding: 12px 18px; }
.training-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; align-items: start; margin-top: 12px; }
.training-detail { position: sticky; top: 12px; background: #f8fdff; border: 1px solid #cde6ef; border-radius: 12px; padding: 12px 14px; font-size: .88rem; }
.training-detail h4 { margin: 0 0 6px; font-size: .95rem; }
.training-detail h5 { margin: 14px 0 5px; font-size: .8rem; color: #0e7490; text-transform: uppercase; letter-spacing: .05em; }
.training-layer { border-top: 1px solid #e2eef3; padding-top: 14px; margin-top: 14px; }
.training-layer:first-child { border-top: 0; margin-top: 0; padding-top: 0; }
.training-layer h3 { margin: 0 0 4px; font-size: 1rem; display: flex; align-items: center; gap: 8px; }
.training-layer-index { background: #0e7490; color: white; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: .78rem; }
.training-layer-note { color: #648093; font-size: .84rem; margin: 0 0 10px; }
.training-empty { color: #648093; font-size: .86rem; }
.training-partition { margin: 12px 0 4px; font-size: .82rem; color: #0e7490; text-transform: uppercase; letter-spacing: .06em; }
/* overflow-x: auto một mình sẽ bị CSS nâng overflow-y từ visible lên auto, biến
   khung sơ đồ thành hộp cuộn dọc và nuốt thao tác cuộn trang khi người dùng
   phóng to. Ghi rõ overflow-y để chỉ cuộn ngang; chiều cao vẫn tự giãn theo sơ
   đồ nên không cắt mất phần nào. */
.training-svg-wrap { overflow-x: auto; overflow-y: hidden; }
.training-svg { max-width: 100%; height: auto; min-width: 740px; }
.training-toggle { margin-top: 10px; }

.training-table { font-size: .86rem; }
.training-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.training-step { border-left: 3px solid #cbd5e1; padding: 6px 10px; background: #f8fafc; border-radius: 0 8px 8px 0; font-size: .86rem; }
.training-step--matched, .training-step--route { border-left-color: #0891b2; }
.training-step--terminal, .training-step--blocked { border-left-color: #b91c1c; background: #fef2f2; }
.training-step-label { font-weight: 700; margin-right: 8px; }
.training-step-detail { color: #475569; }
.training-step-meta { display: block; margin-top: 3px; color: #64748b; font-size: .8rem; }

.training-chips { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.training-chip { border-radius: 999px; padding: 4px 11px; font-size: .82rem; display: flex; gap: 7px; align-items: center; }
.training-chip--kept { background: #dcfce7; color: #166534; }
.training-chip--dropped { background: #f1f5f9; color: #64748b; text-decoration-line: line-through; }
.training-chip-note { font-size: .74rem; opacity: .8; }
.training-outcome { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; }
.training-outcome div { background: #f0f9ff; border-radius: 10px; padding: 8px 10px; display: grid; gap: 2px; }
.training-outcome span { font-size: .72rem; color: #0e7490; font-weight: 800; text-transform: uppercase; }
.training-outcome strong { font-size: 1.05rem; }
.training-outcome .drg { background: #ecfdf5; }
.training-drg-name { font-weight: 600; margin: 8px 0 0; }

.training-condition { background: #0f172a; color: #e2e8f0; padding: 8px 10px; border-radius: 8px; font-size: .78rem; white-space: pre-wrap; overflow-x: auto; }
.training-terms { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.training-term { display: flex; justify-content: space-between; gap: 8px; align-items: center; font-size: .8rem; border-radius: 7px; padding: 4px 8px; }
.training-term--matched { background: #ecfeff; }
.training-term--not-matched { background: #fef2f2; color: #991b1b; }
.training-term--unknown { background: #fffbeb; color: #92400e; }
.training-detail-status { font-weight: 700; margin: 0 0 8px; }
.training-detail-status--selected { color: #0e7490; }
.training-detail-status--not-matched { color: #991b1b; }
.training-detail-status--unknown { color: #92400e; }
.training-source { color: #648093; font-size: .78rem; margin-top: 10px; }
.training-error { background: #fef2f2; color: #991b1b; border-radius: 10px; padding: 12px 14px; }

/* Node trong SVG */
.training-svg text { font-size: 12px; fill: #16324f; }
.training-svg .tt-sub { font-size: 10.5px; fill: #64748b; }
.training-svg .tt-code { font-weight: 800; }
.training-svg rect { fill: white; stroke-width: 1.5; }
.training-svg [data-node] { cursor: pointer; }
.training-svg [data-node]:focus { outline: none; }
.training-svg [data-node]:focus rect, .training-svg [data-node]:hover rect { stroke-width: 2.5; }
.training-svg .tt-link { fill: none; stroke-width: 1.5; }

.training-svg .tt-selected rect { stroke: var(--tt-selected); fill: #ecfeff; }
.training-svg .tt-selected.tt-link, .training-svg path.tt-selected { stroke: var(--tt-selected); fill: var(--tt-selected); stroke-width: 2.5; }
.training-svg .tt-matched rect { stroke: var(--tt-matched); }
.training-svg .tt-matched.tt-link, .training-svg path.tt-matched { stroke: var(--tt-matched); fill: var(--tt-matched); }
.training-svg .tt-missed rect { stroke: var(--tt-missed); opacity: .55; }
.training-svg .tt-missed text { opacity: .55; }
.training-svg .tt-missed.tt-link, .training-svg path.tt-missed { stroke: var(--tt-missed); fill: var(--tt-missed); opacity: .5; }
.training-svg .tt-unknown rect { stroke: var(--tt-unknown); stroke-dasharray: 4 3; }
.training-svg .tt-unknown.tt-link, .training-svg path.tt-unknown { stroke: var(--tt-unknown); fill: var(--tt-unknown); stroke-dasharray: 4 3; }
.training-svg .tt-active rect { stroke: #0f172a; stroke-width: 3; }

@media (max-width: 980px) {
  .training-layout { grid-template-columns: minmax(0, 1fr); }
  .training-detail { position: static; }
}
.training-outranked { background: #fffbeb; border-left: 3px solid #f59e0b; padding: 7px 10px; border-radius: 0 7px 7px 0; font-size: .82rem; margin: 0; }

/* ─── Tab rà soát danh mục ────────────────────────────────────────────────── */
.review-body { margin-top: 12px; }
.review-summary { background: #f0fdfa; border: 1px solid #99f6e4; border-radius: 12px; padding: 12px 14px; }
.review-summary--clean { background: #f0fdf4; border-color: #bbf7d0; }
.review-summary-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.review-summary-grid div { display: grid; gap: 2px; }
.review-summary-grid span { color: #648093; font-size: .78rem; }
.review-summary-grid strong { color: #0f766e; font-size: 1.35rem; line-height: 1; }
.review-summary-note { margin: 10px 0 0; color: #4b6b7d; font-size: .84rem; }

.review-concepts { display: grid; gap: 12px; margin-top: 12px; }
.review-concept { border: 1px solid #cde6ef; border-radius: 12px; padding: 13px 15px; background: white; }
.review-concept--decided { border-color: #86efac; background: #f7fefa; }
.review-concept-head h3 { margin: 0; font-size: 1rem; }
.review-concept-head code { background: #ecfeff; border-radius: 6px; padding: 1px 6px; }
.review-concept-meta { margin: 3px 0 0; color: #648093; font-size: .82rem; }
.review-badge { background: #dcfce7; color: #166534; border-radius: 999px; padding: 1px 8px; font-weight: 800; font-size: .72rem; margin-left: 6px; }

.review-recommendation { margin: 10px 0; padding: 8px 11px; border-radius: 0 8px 8px 0; font-size: .85rem; }
.review-recommendation strong { display: block; margin-bottom: 2px; }
.review-recommendation--remove { background: #fef2f2; border-left: 3px solid #f87171; }
.review-recommendation--amend { background: #fffbeb; border-left: 3px solid #f59e0b; }
.review-recommendation--keep { background: #f0fdf4; border-left: 3px solid #4ade80; }

.review-codes { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.review-code { border: 1px solid #e2eef3; border-radius: 9px; overflow: hidden; }
.review-code-head { width: 100%; display: flex; align-items: center; gap: 10px; background: #f8fbfd; border: 0; padding: 7px 11px; cursor: pointer; font: inherit; color: inherit; text-align: left; }
.review-code-head:hover { background: #eff8fb; }
.review-code-head code { font-weight: 700; }
.review-code-meta { color: #648093; font-size: .8rem; flex: 1; }
.review-code-body { padding: 9px 11px; border-top: 1px solid #e2eef3; }
.review-code-note { margin: 0 0 5px; font-size: .82rem; color: #4b6b7d; }
.review-partners { margin: 0 0 9px; display: flex; flex-wrap: wrap; gap: 4px; }
.review-partners code { background: #f1f5f9; border-radius: 5px; padding: 1px 5px; font-size: .78rem; }
.review-table { width: 100%; border-collapse: collapse; font-size: .83rem; }
.review-table th { text-align: left; color: #648093; font-weight: 700; border-bottom: 1px solid #e2eef3; padding: 5px 7px; }
.review-table td { padding: 5px 7px; border-bottom: 1px solid #f1f5f9; }
.review-row--stale { opacity: .55; }

.review-decision { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; margin-top: 11px; padding-top: 11px; border-top: 1px dashed #dbeafe; }
.review-choices { display: flex; gap: 5px; }
.review-choice { display: flex; align-items: center; gap: 5px; border: 1px solid #cde6ef; border-radius: 999px; padding: 5px 12px; cursor: pointer; font-size: .84rem; }
.review-choice--on { border-color: #0e7490; background: #ecfeff; font-weight: 700; }
.review-replacement, .review-note { display: grid; gap: 3px; font-size: .78rem; color: #648093; }
.review-note { flex: 1; min-width: 200px; }
.review-replacement input, .review-note input { border: 1px solid #cde6ef; border-radius: 8px; padding: 6px 9px; font: inherit; font-size: .85rem; color: #16324f; }

.review-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 14px; padding-top: 12px; border-top: 1px solid #e2eef3; }
.review-empty { color: #648093; font-size: .87rem; margin: 12px 0; }
.review-error { background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; border-radius: 9px; padding: 10px 12px; font-size: .87rem; }

/* ─── Sơ đồ tuyến kiểu Volume 2 ───────────────────────────────────────────── */
.rt-svg .rt-root path { fill: white; stroke: #0f172a; stroke-width: 1.5; }
.rt-svg .rt-root text { fill: #0f172a; font-size: .8rem; font-weight: 700; }
.rt-svg .rt-test rect { fill: white; stroke-width: 1.5; }
.rt-svg .rt-dc rect { fill: white; stroke-width: 1.5; }
.rt-svg text { font-size: .78rem; fill: #16324f; }
.rt-svg .rt-sub { font-size: .68rem; fill: #648093; }
.rt-svg .rt-code { font-weight: 700; }
.rt-svg .rt-edge { font-size: .66rem; fill: #94a3b8; }
.rt-svg .rt-link { fill: none; stroke-width: 1.5; }

.rt-svg .rt-selected rect { stroke: var(--tt-selected); fill: #ecfeff; }
.rt-svg path.rt-selected, .rt-svg .rt-selected.rt-link { stroke: var(--tt-selected); fill: none; stroke-width: 2.5; }
.rt-svg marker path.rt-selected { fill: var(--tt-selected); stroke: none; }
.rt-svg .rt-matched rect { stroke: var(--tt-matched); }
.rt-svg path.rt-matched, .rt-svg .rt-matched.rt-link { stroke: var(--tt-matched); fill: none; }
.rt-svg marker path.rt-matched { fill: var(--tt-matched); stroke: none; }
.rt-svg .rt-missed rect { stroke: var(--tt-missed); opacity: .6; }
.rt-svg .rt-missed text { opacity: .6; }
.rt-svg path.rt-missed, .rt-svg .rt-missed.rt-link { stroke: var(--tt-missed); fill: none; opacity: .5; }
.rt-svg marker path.rt-missed { fill: var(--tt-missed); stroke: none; }
.rt-svg .rt-unknown rect { stroke: var(--tt-unknown); stroke-dasharray: 4 3; }
.rt-svg path.rt-unknown, .rt-svg .rt-unknown.rt-link { stroke: var(--tt-unknown); fill: none; stroke-dasharray: 4 3; }
.rt-svg marker path.rt-unknown { fill: var(--tt-unknown); stroke: none; }
.rt-svg [data-node]:focus { outline: none; }
.rt-svg [data-node]:focus rect, .rt-svg [data-node]:hover rect { stroke-width: 2.5; }
.rt-svg .tt-active rect { stroke: #0f172a; stroke-width: 3; }
.training-browse { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 11px; padding-top: 11px; border-top: 1px dashed #dbeafe; }
.training-browse label { display: grid; gap: 3px; font-size: .78rem; color: #648093; }
.training-browse select { border: 1px solid #cde6ef; border-radius: 8px; padding: 7px 10px; font: inherit; font-size: .86rem; color: #16324f; min-width: 380px; max-width: 100%; }
.rt-svg .rt-neutral rect { stroke: #64748b; }
.rt-svg path.rt-neutral, .rt-svg .rt-neutral.rt-link { stroke: #94a3b8; fill: none; }
.rt-svg marker path.rt-neutral { fill: #94a3b8; stroke: none; }

/* ─── Tab Sơ đồ MDC ───────────────────────────────────────────────────────── */
.diagram-layout { display: grid; grid-template-columns: 264px minmax(0, 1fr); gap: 16px; margin-top: 12px; }
.mdc-menu { border: 1px solid #cde6ef; border-radius: 12px; padding: 8px; background: #f8fbfd; max-height: 720px; overflow-y: auto; position: sticky; top: 12px; align-self: start; }
.mdc-menu-loading { margin: 8px; color: #648093; font-size: .84rem; }
.mdc-menu-group { margin: 10px 8px 5px; font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; color: #0e7490; }
.mdc-menu-item { display: grid; grid-template-columns: auto 1fr; grid-template-areas: "code count" "name name"; gap: 1px 8px; width: 100%; text-align: left; background: none; border: 0; border-radius: 8px; padding: 7px 9px; cursor: pointer; font: inherit; color: inherit; }
.mdc-menu-item:hover { background: #eff8fb; }
.mdc-menu-item.active { background: #ecfeff; box-shadow: inset 3px 0 0 #0e7490; }
.mdc-menu-code { grid-area: code; font-weight: 800; font-size: .78rem; color: #0f766e; }
.mdc-menu-count { grid-area: count; justify-self: end; font-size: .7rem; color: #94a3b8; }
.mdc-menu-name { grid-area: name; font-size: .8rem; color: #4b6b7d; line-height: 1.25; }
.mdc-diagram { min-width: 0; }
.mdc-diagram-head h3 { margin: 0; font-size: 1.05rem; }
.mdc-diagram-head p { margin: 3px 0 0; color: #648093; font-size: .82rem; }
.mdc-diagram .training-layer { border-top: 0; margin-top: 8px; padding-top: 0; }
.mdc-diagram .training-layer h3 { display: none; }
@media (max-width: 900px) {
  .diagram-layout { grid-template-columns: minmax(0, 1fr); }
  .mdc-menu { position: static; max-height: none; }
}
.rt-svg .rt-stats { font-size: .66rem; fill: #0f766e; font-weight: 600; }
.rt-svg .rt-partition { font-size: .72rem; font-weight: 800; fill: #0e7490; text-transform: uppercase; letter-spacing: .05em; }

/* Sơ đồ lớn bị co vừa bề ngang thì chữ nhỏ không đọc nổi, nên có mức phóng riêng.
   Phóng to làm sơ đồ rộng hơn khung và cuộn ngang, không đụng tới cuộn trang. */
.mdc-zoom { display: flex; align-items: center; gap: 6px; margin: 8px 0 0; }
.mdc-zoom button { border: 1px solid #cde6ef; background: white; border-radius: 8px; padding: 4px 10px; font: inherit; font-size: .8rem; cursor: pointer; color: #16324f; }
.mdc-zoom button:hover { background: #eff8fb; }
.mdc-zoom button.active { border-color: #0e7490; background: #ecfeff; font-weight: 700; }
.mdc-zoom span { color: #648093; font-size: .78rem; }
.mdc-diagram--zoomed .training-svg { max-width: none; }

/* Màn hình rất rộng: menu MDC nới thêm cho tên nhóm bệnh đỡ xuống dòng. */
@media (min-width: 1500px) {
  .diagram-layout { grid-template-columns: 300px minmax(0, 1fr); }
  .form-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

/* ─── Tab Biên tập luật ───────────────────────────────────────────────────── */
.rules-toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; margin-top: 12px; }
.rules-toolbar label { display: grid; gap: 3px; font-size: .78rem; color: #648093; }
.rules-toolbar select { border: 1px solid #cde6ef; border-radius: 8px; padding: 7px 10px; font: inherit; font-size: .86rem; color: #16324f; min-width: 340px; }
.draft-badge { background: #fef3c7; color: #92400e; border-radius: 999px; padding: 7px 13px; font-weight: 800; font-size: .8rem; }
.rules-gate { margin-top: 12px; }
.gate { border-radius: 10px; padding: 10px 13px; border: 1px solid #cde6ef; }
.gate--passed { background: #f0fdf4; border-color: #bbf7d0; }
.gate--failed { background: #fef2f2; border-color: #fecaca; }
.gate-head { margin: 0 0 7px; font-weight: 800; font-size: .87rem; }
.gate-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.gate-check { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 10px; font-size: .83rem; }
.gate-check-name::before { content: "✓ "; font-weight: 800; }
.gate-check--bad .gate-check-name::before { content: "✕ "; }
.gate-check--ok .gate-check-name { color: #166534; font-weight: 700; }
.gate-check--bad .gate-check-name { color: #991b1b; font-weight: 700; }
.gate-check-detail { color: #4b6b7d; }

.rules-layout { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 16px; margin-top: 12px; }
.rule-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; max-height: 660px; overflow-y: auto; }
.rule-row { display: grid; grid-template-columns: 86px minmax(0, 1fr) 60px; grid-template-areas: "code name drg" "cond cond cond"; gap: 2px 8px; width: 100%; text-align: left; background: white; border: 1px solid #e2eef3; border-radius: 9px; padding: 7px 10px; cursor: pointer; font: inherit; color: inherit; }
.rule-row:hover { background: #f8fbfd; }
.rule-row--active { border-color: #0e7490; background: #ecfeff; }
.rule-row--changed { box-shadow: inset 3px 0 0 #f59e0b; }
.rule-row--added { box-shadow: inset 3px 0 0 #16a34a; }
.rule-row-code { grid-area: code; font-weight: 800; font-size: .8rem; color: #0f766e; }
.rule-row-name { grid-area: name; font-size: .84rem; }
.rule-row-drg { grid-area: drg; text-align: right; font-size: .72rem; color: #94a3b8; }
/* Mệnh đề nay là câu tiếng Việt chứ không còn là mã, nên đọc bằng font chữ thường. */
.rule-row-cond { grid-area: cond; font-size: .76rem; color: #5b7a8d; line-height: 1.45; }

.rules-form { border: 1px solid #cde6ef; border-radius: 12px; padding: 13px 15px; background: #f8fbfd; align-self: start; }
.rule-field { margin-bottom: 12px; }
.rule-field label, .rule-field-label { display: grid; gap: 3px; font-size: .78rem; color: #648093; font-weight: 600; }
.rule-field input, .rule-field textarea, .rule-cond-row select { border: 1px solid #cde6ef; border-radius: 8px; padding: 6px 9px; font: inherit; font-size: .85rem; color: #16324f; background: white; width: 100%; }
.rule-field textarea, .rule-raw { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .8rem; }
.rule-raw { margin-top: 6px; }
.rule-cond-rows { display: grid; gap: 6px; margin-top: 5px; }
.rule-cond-row { display: grid; grid-template-columns: 34px minmax(0, 1fr) 46px minmax(0, 1.4fr) 26px; gap: 6px; align-items: center; }
.rule-cond-and, .rule-cond-as { font-size: .78rem; color: #648093; }
.rule-cond-drop { border: 1px solid #cde6ef; background: white; border-radius: 8px; cursor: pointer; font: inherit; color: #991b1b; }
.rule-note { margin: 5px 0 0; font-size: .8rem; color: #92400e; background: #fffbeb; border-left: 3px solid #f59e0b; padding: 7px 10px; border-radius: 0 7px 7px 0; }
.rule-issue { margin: 4px 0 0; font-size: .79rem; color: #991b1b; }
.rule-actions { display: flex; gap: 8px; flex-wrap: wrap; }
@media (max-width: 1100px) { .rules-layout { grid-template-columns: minmax(0, 1fr); } }
.rule-cond-row { grid-template-columns: 34px minmax(0, 1fr) minmax(0, 2fr) 26px; grid-template-areas: "and type inputs drop" ". say say say" ". mods mods mods"; }
.rule-cond-row > [data-action="row-type"] { grid-area: type; }
.rule-cond-inputs { grid-area: inputs; display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.rule-cond-inputs select, .rule-cond-inputs input[type="text"] { min-width: 0; flex: 1 1 120px; }
.rule-cond-drop { grid-area: drop; }
.rule-cond-say { grid-area: say; font-size: .78rem; color: #0f766e; }
.rule-cond-mods { grid-area: mods; font-size: .75rem; color: #92400e; }
.rule-cond-checks { display: flex; flex-wrap: wrap; gap: 4px 10px; }
.rule-cond-check { display: inline-flex; align-items: center; gap: 4px; font-size: .76rem; color: #4b6b7d; font-weight: 400; }
.rule-narrative { margin: 0 0 12px; padding: 10px 12px; background: #ecfeff; border-left: 3px solid #0e7490; border-radius: 0 8px 8px 0; font-size: .86rem; line-height: 1.5; color: #16324f; }

/* ─── Ô nhập phẫu thuật, thủ thuật theo DMKT ──────────────────────────────── */
.procedure-head, .procedure-row4 { display: grid; grid-template-columns: 26px minmax(0, 1fr) minmax(0, 1fr) 28px; gap: 6px; align-items: center; }
.procedure-head { font-size: .7rem; font-weight: 700; color: #648093; text-transform: uppercase; letter-spacing: .04em; padding: 6px 0 3px; }
.procedure-row4 { padding: 3px 0; }
.procedure-row4 input { border: 1px solid #cde6ef; border-radius: 8px; padding: 6px 8px; font: inherit; font-size: .84rem; color: #16324f; width: 100%; }
.procedure-row4 input[readonly] { background: #f8fbfd; color: #4b6b7d; }
.procedure-row4 .order-number { font-size: .78rem; color: #94a3b8; text-align: center; }
.procedure-row4 button { border: 1px solid #cde6ef; background: white; border-radius: 8px; cursor: pointer; font: inherit; color: #991b1b; padding: 5px 0; }
.procedure-row4--unmapped input { border-color: #fbbf24; background: #fffbeb; }
.procedure-notice { margin: 8px 0 0; padding: 8px 11px; background: #fffbeb; border-left: 3px solid #f59e0b; border-radius: 0 7px 7px 0; font-size: .8rem; color: #92400e; }
.gate-deviations { margin-top: 11px; padding-top: 10px; border-top: 1px dashed #fecaca; }
.gate-deviations-head { margin: 0 0 7px; font-size: .82rem; color: #92400e; }
.gate-deviations ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.gate-deviation { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 10px; align-items: center; }
.gate-deviation-case { display: grid; font-size: .8rem; }
.gate-deviation-case span { color: #648093; font-size: .75rem; }
.gate-deviation input { border: 1px solid #cde6ef; border-radius: 8px; padding: 6px 9px; font: inherit; font-size: .82rem; color: #16324f; }

/* ─── Lưới chẩn đoán: dòng đầu là bệnh chính ──────────────────────────────── */
.diagnosis-head, .diagnosis-row4 { display: grid; grid-template-columns: 34px minmax(0, 1fr) 84px; gap: 6px; align-items: center; }
.diagnosis-head { font-size: .7rem; font-weight: 700; color: #648093; text-transform: uppercase; letter-spacing: .04em; padding: 6px 0 3px; }
.diagnosis-row4 { padding: 3px 0; }
.diagnosis-row4 input { border: 1px solid #cde6ef; border-radius: 8px; padding: 6px 9px; font: inherit; font-size: .85rem; color: #16324f; width: 100%; }
.diagnosis-row4 .order-number { font-size: .72rem; color: #94a3b8; text-align: center; }
.diagnosis-row4--principal input { border-color: #0e7490; background: #f8feff; font-weight: 600; }
.diagnosis-row4--principal .order-number { color: #0f766e; font-weight: 800; }

/* Danh mục dấu kiếm† – sao găm* trong tab Danh mục & tra cứu */
.dagger-asterisk-panel .pair-code { display: flex; flex-direction: column; line-height: 1.3; }
.dagger-asterisk-panel .pair-code span { color: #527086; font-size: .78rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 34ch; }
.pair-tag { display: inline-block; padding: 2px 8px; border-radius: 999px; background: #eef3f7; color: #43617a; font-size: .72rem; white-space: nowrap; }
.pair-tag--tt06 { background: #e4f1e6; color: #2c6b3a; }
.pair-tag--pending { background: #fdf0d8; color: #8a5b12; }
.pair-actions { display: flex; gap: 6px; white-space: nowrap; }
.pair-actions .button { white-space: nowrap; }
.dagger-asterisk-panel .catalog-table th:last-child, .dagger-asterisk-panel .catalog-table td:last-child { width: 1%; }
.pair-add { display: flex; gap: 6px; align-items: center; }
.pair-add input { text-transform: uppercase; }
.pair-pending { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin: 8px 0; padding: 10px 14px; border-radius: 8px; background: #fdf0d8; color: #6d4a0f; font-size: .85rem; }
.pair-message { margin: 8px 0; padding: 8px 12px; border-radius: 8px; background: #eef3f7; color: #33546c; font-size: .85rem; }

/* Đăng nhập và phiên làm việc */
.header-right { display: flex; align-items: center; gap: 12px; }
.session-box { display: flex; align-items: center; gap: 8px; font-size: .82rem; color: #35566d; }
.session-box .role-tag { padding: 2px 8px; border-radius: 999px; background: #e4f1e6; color: #2c6b3a; font-size: .72rem; }
.login-screen { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; background: #eef4f8; }
.login-card { width: min(380px, 92vw); display: flex; flex-direction: column; gap: 10px; padding: 26px 28px; border-radius: 14px; background: #fff; box-shadow: 0 18px 44px rgba(20, 60, 90, .16); }
.login-card h2 { margin: 0; }
.login-card label { display: flex; flex-direction: column; gap: 4px; font-size: .85rem; color: #35566d; }
.login-card input { padding: 9px 11px; border: 1px solid #cde6ef; border-radius: 8px; font-size: .95rem; }
.login-error { margin: 0; padding: 8px 11px; border-radius: 8px; background: #fdecec; color: #8a2020; font-size: .84rem; }
/* Người dùng thường vẫn tra cứu được danh mục sao găm, chỉ không biên tập. */
.readonly-pairs .pair-actions,
.readonly-pairs .pair-add,
.readonly-pairs .pair-pending { display: none; }

/* Phân hệ tài khoản: ô chọn vai trò tự giãn hết cột sẽ đẩy cột thao tác ra ngoài. */
#users-panel .catalog-table select { width: auto; min-width: 150px; }
#users-panel .catalog-table th:first-child,
#users-panel .catalog-table td:first-child { width: 30%; }
#users-panel .catalog-table th:last-child,
#users-panel .catalog-table td:last-child { width: 1%; white-space: nowrap; }

/* Tên trục AX: cột tiếng Anh chiếm hết chỗ sẽ bóp cột đang sửa còn vài ký tự. */
#ax-names-panel .catalog-table { table-layout: fixed; width: 100%; }
#ax-names-panel .catalog-table th:nth-child(1), #ax-names-panel .catalog-table td:nth-child(1) { width: 12%; }
#ax-names-panel .catalog-table th:nth-child(2), #ax-names-panel .catalog-table td:nth-child(2) { width: 40%; }
#ax-names-panel .catalog-table th:nth-child(3), #ax-names-panel .catalog-table td:nth-child(3) { width: 48%; }
#ax-names-panel .catalog-table td:nth-child(2) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ax-name-input { width: 100%; padding: 6px 9px; border: 1px solid #cde6ef; border-radius: 7px; font-size: .86rem; background: #fff; }
.ax-name-input:focus { border-color: #0e7490; outline: none; }