/* =====================================================================
   components.css — Bộ COMPONENT nội dung, kiểu dáng theo DESIGN SYSTEM CỤC DTNN v2.0
   (skill design-system-cuc-dtnn — references 02 component). Tên lớp giữ nguyên từ bộ mockup
   C.DTNN cũ (CDTNN/Giao diện/Mock_up/…/assets/app.css) để mọi màn không phải sửa markup.

   design.css = TOKEN + vỏ ứng dụng (header/sidebar/breadcrumb) — đã bám mockup.
   app.css    = pattern riêng của AIeReport (lưới nhập biểu, canvas quy trình…).
   FILE NÀY   = các component NỘI DUNG của mockup mà 2 file trên còn thiếu:
                bảng danh sách, chip trạng thái, tab viên thuốc, phân trang,
                stepper duyệt, thẻ card, hộp gợi ý…

   Quy ước port:
   • Mọi màu lấy từ token của design.css (KHÔNG hardcode) → chạy được cả nền tối.
     #fff → var(--bg-container) · --shadow-sm → --sh-1 · --shadow-lg → --sh-4
     --bg-surface → --bg-container · --text-muted → --text-tertiary
   • Tên nào đã tồn tại trong design.css/app.css thì KHÔNG định nghĩa lại. Cụ thể:
       .tag        → dùng .tag-plain (mockup .tag = chip xám phẳng)
       .pagination → dùng .pagination.in-table (biến thể mockup, nằm trong .table-wrap)
       .input      → giữ .input của design.css; ở đây chỉ chỉnh trong ngữ cảnh
       .stat       → dùng .stat-tile của app.css (đã khớp mockup)
       .flex/.mt-4/.gap-2… → dùng utility của Tailwind
   ===================================================================== */

:root {
  --r-pill: 999px;
}

/* ============ breadcrumb trong nội dung (mockup đặt ở đầu .content) ============ */
.breadcrumb { display: flex; align-items: center; gap: 8px; color: var(--text-secondary); font-size: 14px; margin-bottom: 12px; flex-wrap: wrap; }
.breadcrumb a { color: inherit; }
.breadcrumb a:hover { color: var(--c-primary); }
.breadcrumb .sep { color: var(--gray-500); }
.breadcrumb .home { color: var(--text-secondary); }
.breadcrumb .current { color: var(--text); font-weight: 500; }

/* ============ Tab group (DS D6 — Underline 44, như màn mẫu "Chi tiết tài sản") ============
   Chữ 16 Medium tab/inactive → rê tab/hover → chọn: chữ tab/active-text SemiBold + gạch 2px tab/indicator.
   Số đếm = Badge Count Neutral; tab đang chọn: Badge nền brand/90 chữ brand/40. */
.tabs { display: flex; gap: 0; margin-bottom: 16px; flex-wrap: wrap; border-bottom: 1px solid var(--ds-border-subtle); }
.tab { display: inline-flex; align-items: center; gap: 6px; height: 44px; padding: 0 16px; margin-bottom: -1px; border: 0;
  border-bottom: 2px solid transparent; border-radius: 0; background: transparent; cursor: pointer;
  color: var(--ds-tab-inactive); font-size: 16px; line-height: 24px; font-weight: 500; transition: color .13s, background .13s; }
.tab:hover { background: var(--ds-tab-hover-bg); color: var(--ds-tab-hover-text); }
.tab.active { color: var(--ds-tab-active-text); font-weight: 600; border-bottom-color: var(--ds-tab-indicator); background: transparent; }
.tab:focus-visible { outline: none; box-shadow: inset var(--ring); }
.tab .tab-count { margin-left: 0; min-width: 20px; padding: 2px 6px; border-radius: 999px; text-align: center;
  font-size: 12px; line-height: 16px; font-weight: 600; background: var(--ds-badge-neutral-bg); color: var(--ds-badge-neutral-text); }
.tab.active .tab-count { background: var(--ds-tag-brand-bg); color: var(--ds-tag-brand-text); }
/* Tab chưa mở được (vd: phải chọn bản ghi cha trước) — mockup không có trạng thái này. */
.tab:disabled, .tab.is-disabled { color: var(--text-disabled); cursor: not-allowed; }
.tab:disabled:hover, .tab.is-disabled:hover { background: transparent; color: var(--text-disabled); }

/* ============ card / panel kiểu mockup ============ */
/* Card nội dung (DS C11): nền trắng, viền 1px border/subtle, r12, KHÔNG bóng (level 0), đệm 20.
   Tiêu đề thẻ = Title 18 SemiBold; tiêu đề khối nhỏ = Subtitle 16 SemiBold. */
.card { background: var(--ds-surface-default); border: 1px solid var(--ds-border-subtle); border-radius: var(--ds-radius-lg); box-shadow: none; }
.card-pad { padding: 20px; }
.card-head { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--ds-border-subtle); }
.card-head h3 { font-size: 18px; line-height: 23.4px; font-weight: 600; color: var(--ds-text-primary); }
.card-head .card-actions { margin-left: auto; display: flex; gap: 12px; }
.section-title { font-size: 16px; line-height: 21.6px; font-weight: 600; color: var(--ds-text-primary); margin: 0 0 12px; }
.divider { height: 1px; background: var(--border); margin: 16px 0; }

/* ============ lưới cột đều (KHÔNG định nghĩa .grid — Tailwind đã có) ============ */
.grid-2, .grid-3, .grid-4 { display: grid; gap: 16px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1100px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
}

/* ============ trường nhập (bổ sung cho .field/.input đã có) ============ */
.field > label { font-size: 14px; line-height: 19.6px; font-weight: 500; color: var(--ds-text-primary); }
.field > label .req { color: var(--ds-support-error); }
.input-group { position: relative; display: flex; align-items: center; }
.input-group .ig-icon { position: absolute; left: 10px; color: var(--ds-icon-secondary); width: 20px; height: 20px;
  pointer-events: none; display: grid; place-items: center; }
.input-group .ig-icon svg { width: 20px; height: 20px; }
.input-group > .input { padding-left: 38px; width: 100%; }
/* Ô tìm theo tên ở đầu màn danh sách (màn mẫu): 300×40, viền nhạt border/subtle, icon search-normal 20 */
.input-group.search { width: 300px; max-width: 100%; }
.input-group.search > .input { height: 40px; border-color: var(--ds-border-subtle); }
.input-group.search > .input:hover { border-color: var(--ds-input-border-hover); }
.input-group.search > .input:focus { border-color: var(--ds-input-border-focus); }
/* Dropdown field (DS B2) Size 36: pad 8/12, r8, chevron 16 (Iconsax arrow-down), placeholder "-Chọn-" */
.select { height: 36px; padding: 0 36px 0 12px; border: 1px solid var(--ds-input-border-default); border-radius: var(--ds-radius-md);
  background-color: var(--ds-input-bg); color: var(--ds-input-text); width: 100%; outline: none; font-size: 14px; font-family: inherit;
  appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%234F607D' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19.92 8.95l-6.52 6.52c-.77.77-2.03.77-2.8 0L4.08 8.95'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; transition: border-color .12s, box-shadow .12s; }
.select:hover:not(:disabled) { border-color: var(--ds-input-border-hover); }
.select:focus { border-color: var(--ds-input-border-focus); box-shadow: var(--ring); }
.select:disabled { background-color: var(--ds-input-bg-disabled); border-color: var(--ds-input-border-disabled); color: var(--ds-text-disabled); cursor: not-allowed; }
/* Menu xổ của .select (DS B3 Dropdown menu) — khớp menu el-select ở ds-system.css: r8, elevation 3, mục 40 pad 10/12 r8;
   rê container-low, chọn brand/95. Menu gốc của <select> do hệ điều hành vẽ (nền xanh) nên phải bật base-select;
   trình duyệt chưa hỗ trợ (ngoài Chromium ≥ 135) giữ menu gốc.
   Trừ ô co theo nội dung — ô lọc trong th của bảng, ô chọn kỳ width:auto ở page-head: base-select đo bề rộng theo lựa chọn
   đang chọn chứ không theo lựa chọn dài nhất như select gốc, đổi lựa chọn là cột bảng / thanh công cụ nhảy. */
@supports (appearance: base-select) {
  .select:not([multiple], [size], th *, .page-head *),
  .select:not([multiple], [size], th *, .page-head *)::picker(select) { appearance: base-select; }
  /* canh giữa dọc cho mọi cỡ (36/40); chữ dài cắt ở mép nội dung, không đè lên chevron như select gốc */
  .select:not([multiple], [size], th *, .page-head *) { display: inline-flex; align-items: center; line-height: 20px;
    white-space: nowrap; overflow: clip; overflow-clip-margin: content-box; }
  .select:not([multiple], [size], th *, .page-head *)::picker-icon { display: none; } /* chevron Iconsax vẽ bằng background-image */
  .select:not([multiple], [size], th *, .page-head *):open { border-color: var(--ds-input-border-focus); box-shadow: var(--ring); }
  .select:not([multiple], [size], th *, .page-head *)::picker(select) {
    /* UA mặc định most-block-size: phía trên rộng hơn vài px là mở lên, đè ô phía trên → luôn mở xuống, hết chỗ mới lật */
    position-try-order: normal;
    margin-block: 4px; padding: 4px; max-block-size: 320px; overflow-y: auto;
    border: 1px solid var(--ds-border-subtle); border-radius: var(--ds-radius-md);
    background: var(--ds-surface-default); box-shadow: var(--ds-shadow-3-lg); color: var(--ds-text-primary);
  }
  .select:not([multiple], [size], th *, .page-head *) option {
    min-block-size: 40px; padding: 10px 12px; border-radius: var(--ds-radius-md);
    font-size: 14px; line-height: 20px; color: var(--ds-text-primary); cursor: pointer;
  }
  .select:not([multiple], [size], th *, .page-head *) option::checkmark { display: none; }
  .select:not([multiple], [size], th *, .page-head *) option:is(:hover, :focus-visible) {
    background-color: var(--ds-surface-container-low); outline: none; }
  .select:not([multiple], [size], th *, .page-head *) option:checked {
    background-color: var(--ds-brand-95); color: var(--ds-interactive-primary); font-weight: 600; }
  .select:not([multiple], [size], th *, .page-head *) option:disabled {
    color: var(--ds-text-disabled); background: none; cursor: not-allowed; }
}

/* ============ biến thể nút còn thiếu (base .btn nằm ở design.css) ============ */
/* Secondary (outline đỏ) · Neutral Ghost · Button Icon vuông (DS A1/A2) */
.btn-outline { background: var(--ds-surface-default); border-color: var(--ds-button-primary-outlined-border); color: var(--ds-button-primary-outlined-text); }
.btn-outline:hover { background: var(--ds-button-primary-outlined-bg-hover); }
.btn-outline:active { background: var(--ds-button-primary-outlined-bg-active); }
.btn-ghost { background: transparent; color: var(--ds-button-neutral-ghost-text); }
.btn-ghost:hover { background: var(--ds-button-neutral-ghost-bg-hover); color: var(--ds-interactive-secondary-hover); }
.btn-ghost:disabled, .btn-ghost.is-disabled { background: transparent; }
.btn-icon { width: 40px; padding: 0; justify-content: center; }
.btn-icon.btn-sm { width: 36px; }

/* ============ BẢNG DANH SÁCH — khuôn chuẩn của mockup ============
   <div class="table-wrap">
     <table class="data-table">
       <thead><tr>…</tr><tr class="filter-row">…</tr></thead>
       <tbody><tr><td class="col-idx">1</td>…</tr></tbody>
     </table>
     <div class="pagination in-table">…</div>
   </div>                                                                        */
/* DS C1 (Figma 27/10, user chốt theo DS mới 27/10): khối bảng r12 viền border/subtle, tiêu đề cao 48 nền KEM
   table/header-bg sand/97 #FDF6F0, chữ 14 SemiBold text/primary;
   GIỮ kẻ dọc mảnh giữa các cột; rê hàng table/row-hover #F2F0F4 (27/10, như hệ thống Họp); chọn brand/95; cột STT 64. */
/* Khổ hẹp (≤ Tablet DS 1194–1439) bảng rộng CUỘN NGANG trong khối (03 §8) thay vì bị cắt cụt ở mép phải */
.table-wrap { background: var(--ds-surface-default); border: 1px solid var(--ds-border-subtle); border-radius: var(--ds-radius-lg);
  overflow-x: auto; overflow-y: hidden; box-shadow: none; }
.data-table { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 21px; }
.data-table thead th { background: var(--ds-table-header-bg); color: var(--ds-text-primary); font-weight: 600; text-align: left;
  height: 48px; padding: 12px; border-bottom: 1px solid var(--ds-border-subtle); border-right: 1px solid var(--ds-border-subtle);
  white-space: nowrap; position: relative; }
.data-table th:last-child, .data-table td:last-child { border-right: 0; }
.data-table thead th .th-in { display: flex; align-items: center; gap: 6px; }
.data-table thead th .sort { color: var(--ds-icon-secondary); cursor: pointer; display: grid; place-items: center; }
.data-table thead th .sort:hover { color: var(--ds-icon-primary); }
.data-table thead th .sort.on { color: var(--ds-icon-interactive); }
/* hàng lọc nằm NGAY trong thead — đặc trưng dễ nhận nhất của mockup */
/* Hàng lọc trong thead: ô 36 như Textinput DS Size 36 */
.data-table .filter-row th { background: var(--ds-surface-default); height: auto; padding: 8px; border-bottom: 1px solid var(--ds-border-subtle); }
.data-table .filter-row .input,
.data-table .filter-row .select { height: 36px; font-size: 14px; width: 100%; font-weight: 400; }
.data-table .filter-row .select { padding: 0 32px 0 12px; }
.data-table tbody td { padding: 12px; border-bottom: 1px solid var(--ds-border-subtle); border-right: 1px solid var(--ds-border-subtle);
  color: var(--ds-text-primary); vertical-align: middle; }
.data-table tbody tr { transition: background .12s; }
.data-table tbody tr:hover { background: var(--ds-table-row-hover); }
.data-table tbody tr:last-child td { border-bottom: 0; }
.data-table tbody tr.row-sel { background: var(--ds-table-row-selected); }
.data-table .col-check,
.data-table .col-idx,
.data-table .col-act { width: 1%; white-space: nowrap; color: var(--ds-text-primary); }
.data-table th.col-idx, .data-table td.col-idx { width: 64px; min-width: 64px; text-align: center; }
.data-table th.col-check, .data-table td.col-check { width: 44px; min-width: 44px; text-align: center; }
.data-table td.col-act { text-align: center; }
.data-table td.num,
.data-table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.data-table .cell-strong { font-weight: 500; color: var(--ds-text-primary); }
/* Cột Thao tác (màn mẫu): Button Icon không nền, icon 20 icon/primary #1F2937 — icon xoá màu icon/error */
.kebab { color: var(--ds-icon-primary); width: 36px; height: 36px; border-radius: var(--ds-radius-md); display: inline-grid;
  place-items: center; background: none; border: 0; cursor: pointer; }
.kebab:hover { background: var(--ds-button-neutral-ghost-bg-hover); color: var(--ds-icon-primary); }
.kebab:focus-visible { outline: none; box-shadow: var(--ring); }
.kebab svg { width: 20px; height: 20px; }
/* Ô trống (DS C12 Empty state): minh hoạ "Không có dữ liệu" + chữ text/secondary */
.data-table .empty-cell { padding: 24px 12px; text-align: center; color: var(--ds-text-secondary); font-style: normal; }
.data-table .empty-cell::before { content: ''; display: block; width: 140px; height: 112px; margin: 0 auto 8px;
  background: url('/ds/illustrations/khong-co-du-lieu.svg') center / contain no-repeat; }
.data-table tbody tr.grp td,
.data-table tbody tr.group-row td { background: var(--ds-surface-container-low); font-weight: 600; color: var(--ds-text-primary); text-align: left; }
.data-table tbody tr.grp:hover td,
.data-table tbody tr.group-row:hover td { background: var(--ds-surface-container-low); }
/* Liên kết trong bảng = text/link (DS: brand/40) */
.linkish { color: var(--ds-text-link); font-weight: 500; cursor: pointer; }
.linkish:hover { text-decoration: underline; }

/* freeze tiêu đề + cột định danh khi danh sách dài/rộng (mockup tra-cuu-khai-thac) */
.tbl-scroll { max-height: 60vh; overflow: auto; }
.data-table.frz thead th { position: sticky; top: 0; z-index: 3; background: var(--ds-table-header-bg); }
.data-table.frz tbody .col-idx,
.data-table.frz tbody .cfz { background: var(--bg-container); }
.data-table.frz .col-idx { position: sticky; left: 0; z-index: 2; }
.data-table.frz .cfz { position: sticky; left: var(--fz-off, 44px); z-index: 2; border-right: 1px solid var(--border); }
.data-table.frz thead .col-idx,
.data-table.frz thead .cfz { z-index: 4; }

/* ô tick tự vẽ (mockup dùng <span class="checkbox">, không phải <input>) */
/* Checkbox DS (B4): ô 20 r4, viền checkbox/border-default, chọn nền checked-fill đỏ dấu trắng */
.checkbox { width: 20px; height: 20px; border: 1.5px solid var(--ds-checkbox-border-default); border-radius: var(--ds-radius-xs); display: inline-block;
  vertical-align: middle; position: relative; background: var(--ds-surface-default); cursor: pointer; flex-shrink: 0; }
.checkbox:hover { border-color: var(--ds-checkbox-border-hover); }
.checkbox.on { background: var(--ds-checkbox-checked-fill); border-color: var(--ds-checkbox-checked-fill); }
.checkbox.on::after { content: ''; position: absolute; left: 5.5px; top: 1.5px; width: 5px; height: 10px;
  border: solid var(--ds-checkbox-checkmark-icon); border-width: 0 2px 2px 0; transform: rotate(45deg); }

/* ============ CHIP TRẠNG THÁI (badge có chấm màu) ============
   <span class="badge badge-approved"><span class="bd"></span>Đã duyệt</span>     */
/* Tag DS (C2) Medium: cao 24, pad 4/8, r4, chữ 12 Medium, chấm 6 — màu theo trạng thái nghiệp vụ (01 §3.5):
   Nháp = Neutral · Chờ duyệt = Amber · Đã duyệt = Moss · Từ chối = Rose · Đang xử lý = Info xanh dương (Figma 27/10)
   · Đã gửi = Purple. Luôn kèm chữ. */
.badge { display: inline-flex; align-items: center; gap: 6px; height: 24px; font-size: 12px; line-height: 16px; font-weight: 500; padding: 4px 8px;
  border-radius: var(--ds-radius-xs); white-space: nowrap; border: 1px solid transparent; }
.badge .bd { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.badge-draft { background: var(--ds-tag-neutral-bg); color: var(--ds-tag-neutral-text); border-color: var(--ds-tag-neutral-border); }
.badge-draft .bd { background: var(--ds-tag-neutral-dot); }
.badge-wait { background: var(--ds-tag-warning-bg); color: var(--ds-tag-warning-text); border-color: var(--ds-tag-warning-border); }
.badge-wait .bd { background: var(--ds-tag-amber-dot); }
.badge-approved { background: var(--ds-tag-moss-bg); color: var(--ds-tag-moss-text); border-color: var(--ds-tag-moss-border); }
.badge-approved .bd { background: var(--ds-tag-moss-dot); }
.badge-reject { background: var(--ds-tag-rose-bg); color: var(--ds-tag-rose-text); border-color: var(--ds-tag-rose-border); }
.badge-reject .bd { background: var(--ds-tag-rose-dot); }
.badge-info { background: var(--ds-tag-info-bg); color: var(--ds-tag-info-text); border-color: var(--ds-tag-info-border); }
.badge-info .bd { background: var(--ds-icon-info); }
.badge-sent { background: var(--ds-tag-purple-subtle-bg); color: var(--ds-tag-purple-subtle-text); border-color: var(--ds-tag-purple-subtle-border); }
.badge-sent .bd { background: var(--ds-tag-purple-dot-color); }

/* chip xám phẳng — mockup gọi là .tag; đổi tên vì .tag đã có nghĩa khác trong design.css */
.tag-plain { display: inline-flex; align-items: center; gap: 6px; height: 24px; background: var(--ds-tag-neutral-bg); border: 1px solid var(--ds-tag-neutral-border);
  border-radius: var(--ds-radius-xs); padding: 4px 8px; font-size: 12px; line-height: 16px; font-weight: 500; color: var(--ds-tag-neutral-text); white-space: nowrap; }

/* ============ PHÂN TRANG kiểu mockup (nút TRÒN, nằm trong .table-wrap) ============
   Dùng modifier .in-table để không đụng .pagination sẵn có của design.css.        */
/* Thanh phân trang (DS D7, ảnh 24-pagination): đáy khối bảng, pad 12/16, kẻ trên border/subtle · trái "Tất cả N …"
   chữ 12 + ô số dòng 64×40 · phải nút trang 32×32 r8 gap 4 (trang chọn nền interactive/primary chữ trắng) + "Đi đến trang". */
.pagination.in-table { display: flex; align-items: center; gap: 8px 16px; padding: 12px 16px; margin-top: 0;
  justify-content: flex-start; flex-wrap: wrap; border-top: 1px solid var(--ds-border-subtle); }
.pagination.in-table .total { color: var(--ds-text-secondary); font-size: 12px; }
.pagination.in-table .per-page { display: flex; align-items: center; gap: 8px; color: var(--ds-text-secondary); font-size: 12px; }
.pagination.in-table .per-page .select { height: 40px; width: 72px; padding: 0 32px 0 12px; font-size: 14px; }
/* .pager LỒNG trong .pagination.in-table: 4 màn cũ (BieuMau, MigrationLog, TraCuu,
   QuyTrinhList) đang dùng .pager làm vỏ bọc <el-pagination> — nếu để global thì
   rule `.pager button` sẽ bo tròn cả nút của Element Plus. */
.pagination.in-table .pager { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.pagination.in-table .pager button { min-width: 32px; height: 32px; padding: 0 4px; border: 1px solid transparent; background: none; border-radius: var(--ds-radius-md);
  color: var(--ds-text-primary); font-size: 12px; font-variant-numeric: tabular-nums; display: grid; place-items: center; cursor: pointer; }
.pagination.in-table .pager button:hover:not(:disabled):not(.active) { background: var(--ds-surface-container); border-color: var(--ds-border-subtle); }
.pagination.in-table .pager button.active { background: var(--ds-interactive-primary); color: var(--ds-text-white); font-weight: 600; }
.pagination.in-table .pager button.active:hover { background: var(--ds-interactive-primary-hover); }
.pagination.in-table .pager button.pg-nav { border-color: var(--ds-border-subtle); background: var(--ds-surface-default); color: var(--ds-icon-primary); }
.pagination.in-table .pager button:disabled { color: var(--ds-icon-disabled); cursor: not-allowed; }
.pagination.in-table .goto { display: flex; align-items: center; gap: 8px; color: var(--ds-text-secondary); font-size: 12px; margin-left: 8px; }
.pagination.in-table .goto .input { width: 48px; height: 36px; text-align: center; padding: 0; }

/* ============ STEPPER luồng duyệt (mockup duyet-bao-cao) ============ */
.steps { display: flex; align-items: flex-start; gap: 0; }
.steps .step { flex: 1; display: flex; flex-direction: column; align-items: center; text-align: center; position: relative; padding: 0 8px; }
.steps .step::before { content: ''; position: absolute; top: 15px; left: -50%; width: 100%; height: 2px; background: var(--border); }
.steps .step:first-child::before { display: none; }
.steps .step.done::before,
.steps .step.active::before { background: var(--primary-500); }
.steps .dot { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--bg-container);
  border: 2px solid var(--border); color: var(--text-tertiary); font-weight: 600; font-size: 14px; z-index: 1; }
.steps .step.done .dot { background: var(--c-primary); border-color: var(--c-primary); color: #fff; }
.steps .step.active .dot { border-color: var(--c-primary); color: var(--primary-700); box-shadow: 0 0 0 4px var(--primary-000); }
.steps .st-name { font-size: 12px; margin-top: 8px; color: var(--text-secondary); max-width: 120px; }
.steps .step.active .st-name { color: var(--primary-700); font-weight: 600; }

/* ============ hộp gợi ý / điểm cần xác nhận ============ */
/* Hộp gợi ý = Messages DS (E2): r8, pad 12/16, gạch trái 4px theo mức độ. Gợi ý thường = severity Infor — từ Figma
   27/10 là xanh dương riêng (trước trùng đỏ brand nên tạm dùng trung tính), như hệ thống Họp. */
.hint { background: var(--ds-message-infor-background-4); border: 0; border-left: 4px solid var(--ds-message-infor-border-left-4);
  color: var(--ds-message-infor-description-text-4); border-radius: var(--ds-radius-md);
  padding: 12px 16px; font-size: 14px; display: flex; gap: 8px; align-items: flex-start; line-height: 21px; }
.hint.warn { background: var(--ds-message-warning-background-3); border-left-color: var(--ds-message-warning-border-left-3); color: var(--ds-message-warning-description-text-3); }
.hint.err { background: var(--ds-message-danger-background-2); border-left-color: var(--ds-message-danger-border-left-2); color: var(--ds-message-danger-description-text-2); }
.assumption { background: var(--ds-tag-warning-bg); border: 1px dashed var(--ds-tag-warning-border); color: var(--ds-tag-warning-text); border-radius: var(--ds-radius-xs);
  padding: 2px 8px; font-size: 12px; font-weight: 600; display: inline-flex; gap: 6px; align-items: center; }

/* ============ thanh nút DÍNH ĐÁY cho màn nhiều thông tin ============ */
.form-actions { position: sticky; bottom: 0; z-index: 20; display: flex; align-items: center; gap: 12px;
  padding: 16px 20px; margin: 20px -20px -20px;
  background: var(--ds-surface-default);
  border-top: 1px solid var(--ds-border-subtle); box-shadow: var(--ds-shadow-action-floating); }
.form-actions .fa-info { font-size: 12px; color: var(--text-secondary); }
.form-actions .fa-info b { color: var(--text); font-variant-numeric: tabular-nums; }
.form-actions .fa-spacer { margin-left: auto; }
/* Biến thể KHÔNG dính đáy: dùng khi dưới thanh nút còn nội dung khác (bảng kết quả,
   danh sách…) — thanh dính sẽ che mất phần đó khi cuộn. */
.form-actions.static { position: static; backdrop-filter: none; }

/* ============ danh sách cấu hình (mockup giao-bao-cao — tần suất báo cáo) ============
   .cfg-row LỒNG trong .cfg-list để không đụng .cfg-row scoped của GiaoBaoCaoView.   */
.cfg-list { border: 1px solid var(--ds-border-subtle); border-radius: var(--ds-radius-lg); overflow: hidden; background: var(--ds-surface-default); }
.cfg-list .cfg-row { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; align-items: center;
  padding: 12px 14px; border-bottom: 1px solid var(--border); }
.cfg-list .cfg-row:last-child { border-bottom: 0; }
.cfg-list .cfg-label { grid-column: 1; grid-row: 1; color: var(--text); font-weight: 500; font-size: 14px; }
.cfg-list .cfg-val { grid-column: 1; grid-row: 2; color: var(--text-secondary); font-size: 12px; line-height: 1.5; }
.cfg-list .cfg-edit { grid-column: 2; grid-row: 1 / span 2; align-self: center; width: 36px; height: 36px;
  border-radius: var(--ds-radius-md); border: 1px solid var(--ds-button-neutral-outlined-border); background: var(--ds-surface-default);
  color: var(--ds-button-neutral-outlined-text); display: grid; place-items: center; }
.cfg-list .cfg-edit:hover { background: var(--ds-button-neutral-outlined-bg-hover); color: var(--ds-interactive-secondary-hover); }

/* Huy hiệu số mốc lịch kỳ (1·2·3). Trước dùng ký tự Unicode ①②③ — nét quá mảnh
   nên chìm; nay là vòng tròn tô nền, rõ ở cả hai theme và không phụ thuộc font. */
.moc-so { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 999px;
  background: var(--ds-brand-90); color: var(--ds-brand-40);
  font-size: 12px; font-weight: 600; line-height: 1; flex-shrink: 0; vertical-align: -4px; }
.moc-so.nho { width: 16px; height: 16px; font-size: 10px; vertical-align: -2px; }

/* ============ cây (mục lục / danh mục / cây đơn vị) kiểu mockup ============ */
.tree { font-size: 14px; }
.tree .tnode { display: flex; align-items: center; gap: 8px; min-height: 36px; padding: 4px 8px; border-radius: var(--ds-radius-sm); color: var(--ds-text-primary); cursor: pointer; }
.tree .tnode:hover { background: var(--ds-surface-container-low); }
.tree .tnode.sel { background: var(--ds-interactive-primary); color: var(--ds-text-white); }
.tree .tw { width: 16px; color: var(--ds-icon-secondary); text-align: center; flex: 0 0 16px; }
.tree .tico { color: var(--ds-icon-secondary); width: 20px; height: 20px; flex: 0 0 20px; display: grid; place-items: center; }
.tree .tnode.sel .tw, .tree .tnode.sel .tico { color: currentColor; }
.tree .children { padding-left: 16px; border-left: 1px solid var(--ds-border-subtle); margin-left: 16px; }

/* ============ chiều biến động của thẻ chỉ số (mockup dashboard.html) ============
   .st-delta của app.css là màu chữ phụ; hai biến thể này tô theo chiều tăng/giảm.
   Nạp SAU app.css nên cùng độ ưu tiên vẫn thắng.                                */
.st-delta.up { color: var(--success-600); }
.st-delta.down { color: var(--error-500); }

/* ============ THẺ PHỄU KPI (mockup giam-sat-nhap-lieu.html) ============
   Danh sách "nhãn ← → số" trong một thẻ, số nằm trong viên thuốc màu.
   Dùng cho phân bố đơn vị theo mức độ hoàn thành.                             */
.fcard { background: var(--ds-surface-default); border: 1px solid var(--ds-border-subtle); border-radius: var(--ds-radius-lg);
  box-shadow: none; padding: 16px 20px; display: flex; flex-direction: column; gap: 2px; }
.fcard .fc-head { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 600;
  color: var(--text); margin-bottom: 8px; }
.fcard .fc-head .fdot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.fcard .fr { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 6px 0; font-size: 14px; color: var(--text-secondary); }
.fcard .fr + .fr { border-top: 1px dashed var(--border); }
.fcard .fr.total { color: var(--text); font-weight: 600; }
/* Số trong thẻ phễu = Tag Solid DS (r4, chữ trắng) */
.fpill { min-width: 44px; text-align: center; font-weight: 600; font-size: 14px; padding: 2px 8px;
  border-radius: var(--ds-radius-xs); color: var(--ds-text-white); font-variant-numeric: tabular-nums; }
.fpill.teal { background: var(--ds-tag-teal-solid-bg); }
.fpill.amber { background: var(--ds-warning-50); }
.fpill.purple { background: var(--ds-tag-purple-solid-bg); }
.fpill.blue { background: var(--ds-support-info); }
.fpill.gray { background: var(--ds-warmgray-60); }
.fc-foot { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border); text-align: right; }

/* ============ ĐỒNG HỒ TRÒN (donut) — mockup giam-sat-nhap-lieu.html ============
   Một vòng: đặt --v (phần trăm). Ba phần (.two): đặt --a và --b (phần trăm hai
   phần đầu, phần còn lại tự lấp).                                             */
.donut-wrap { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 8px 0 4px; }
.donut { --v: 0; width: 150px; height: 150px; border-radius: 50%; display: grid; place-items: center;
  position: relative; flex-shrink: 0;
  background: conic-gradient(var(--ds-chart-series-5) calc(var(--v) * 1%), var(--ds-surface-container-high) 0); }
.donut::after { content: ''; width: 96px; height: 96px; border-radius: 50%; background: var(--bg-container); }
.donut .dn-c { position: absolute; text-align: center; line-height: 1.1; z-index: 1; }
.donut .dn-c b { font-size: 24px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.donut .dn-c small { display: block; font-size: 12px; color: var(--text-secondary); }
.donut.two { --a: 0; --b: 0;
  background: conic-gradient(var(--ds-success-60) 0 calc(var(--a) * 1%),
                             var(--ds-chart-series-6) 0 calc((var(--a) + var(--b)) * 1%),
                             var(--ds-chart-series-3) 0); }

/* ============ chú giải biểu đồ (bổ sung .lg/.sw của mockup) ============ */
.legend .lg { display: inline-flex; align-items: center; gap: 6px; }
.legend .sw { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }

/* ============ bí danh theo tên lớp của mockup ============
   Mockup gọi cụm nút bên phải tiêu đề màn là `.toolbar` (đặt trong `.page-head`);
   hệ thống đặt tên `.page-head-r`. Khai báo cả hai để markup port thẳng từ mockup
   vẫn đúng, và bổ sung `flex-wrap` như mockup. KHÔNG định nghĩa lại `.toolbar`
   đứng độc lập — design.css đã dùng tên đó cho hàng công cụ (space-between). */
.page-head .toolbar,
.page-head-r { display: flex; align-items: center; justify-content: flex-end; gap: 12px; flex-wrap: wrap; margin-left: auto; }
/* Nút trên đầu màn cao 40 (DS Default) kể cả nút .btn-sm; mọi icon nút 20 */
.page-head .btn, .page-head .btn-sm { height: 40px; }
.page-head .btn-icon.btn-sm { width: 40px; }
.page-head .select { height: 40px; }

/* ============ dải gán thành viên (phong-ban.html) ============ */
.assign-bar { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 14px; }
.assign-bar .field { flex: 0 0 200px; gap: 0; }
.assign-bar .field.grow { flex: 1 1 260px; }
.primary-star { display: inline-flex; align-items: center; gap: 6px; color: var(--success-600); font-weight: 600; font-size: 14px; }
.primary-star svg { width: 15px; height: 15px; fill: var(--success-500); stroke: var(--success-600); }
/* Nút xoá trong hàng = Button Icon Danger Ghost (DS 02 A2): không viền, icon 20 icon/error */
.del-btn { border: 0; background: transparent; color: var(--ds-icon-error);
  width: 36px; height: 36px; border-radius: var(--ds-radius-md); display: inline-grid; place-items: center; cursor: pointer; }
.del-btn:hover:not(:disabled) { background: var(--ds-button-danger-ghost-bg-hover); }
.del-btn:disabled { color: var(--text-disabled); cursor: not-allowed; }
.del-btn svg { width: 20px; height: 20px; }

/* ============ chú giải phân đoạn (giam-sat-nhap-lieu.html) ============ */
.seg-legend { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; font-size: 12px; color: var(--text-secondary); }
.seg-legend .sg { display: flex; align-items: center; gap: 6px; }
.seg-legend .sw { width: 12px; height: 12px; border-radius: 2px; display: inline-block; }

/* ============ ma trận quyền + hàng đang chọn (vai-tro.html) ============ */
/* `.rowsel` là tên của mockup; `.row-sel` là tên đang dùng trong hệ thống — giữ cả hai. */
.data-table tbody tr.rowsel { background: var(--c-primary-bg); }
.data-table tbody tr.rowsel td.cell-strong { color: var(--primary-700); }
.data-table.pmx th, .data-table.pmx td { font-size: 12px; }
.data-table.pmx th.chk, .data-table.pmx td.chk { text-align: center; width: 64px; }
.data-table.pmx .checkbox { cursor: pointer; }
/* Bảng nằm LỒNG trong `.card` thì bỏ viền/bo/bóng riêng để không thành hai khung. */
.tw-flush { border: 0; border-radius: 0; box-shadow: none; }

/* ============ khối mục trong form + bộ chọn vai trò (nguoi-dung.html) ============ */
.form-sec { border: 1px solid var(--ds-border-subtle); border-radius: var(--ds-radius-lg); padding: 16px 20px; margin-bottom: 16px; }
.form-sec > .section-title { margin-bottom: 12px; }
.role-pick { display: flex; flex-direction: column; gap: 8px; }
.role-pick .role-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px;
  border: 1px solid var(--border); border-radius: var(--r-md); }
.role-pick .role-row .rp-meta small { display: block; color: var(--text-secondary); font-size: 12px; }

/* ============ icon cấu hình đầu dòng + vùng tab (danh-muc-chi-tieu.html) ============ */
.cfg-ico { display: inline-flex; align-items: center; justify-content: center;
  color: var(--ds-icon-primary); cursor: pointer; }
.cfg-ico:hover { color: var(--ds-icon-interactive); }
.cfg-ico svg { width: 20px; height: 20px; }
/* Mockup chỉ đặt một icon mỗi ô thao tác; hệ thống có sửa + xoá nên cần khoảng cách. */
.data-table .col-act .cfg-ico + .cfg-ico { margin-left: 8px; }

.tabpanel { display: none; }
.tabpanel.on { display: block; }

/* Mũi tên xổ nhánh của cây danh mục. */
.tree .tw.toggle { cursor: pointer; }

/* ============ ô nhập nhiều thẻ (giao-bao-cao.html) ============
   `design.css` đã dùng `.chips`/`.chip` cho HÀNG NÚT LỌC (chip rỗng, `.chip.on`
   nền primary) — nhiều màn đang dùng kiểu đó, không được đè. Mockup còn một biến
   thể thứ hai: KHUNG Ô NHẬP chứa các thẻ đã chọn ("Lựa chọn kỳ dữ liệu", tệp đính
   kèm). Chỉ áp khi `.chips` nằm trực tiếp trong `.field`. */
.field > .chips { gap: 8px; align-items: center; border: 1px solid var(--border);
  border-radius: var(--r-md); padding: 8px 10px; min-height: 42px; background: var(--bg-container); }
.field > .chips > .chip { display: inline-flex; align-items: center; gap: 6px; height: 28px;
  background: var(--ds-chip-selected-bg); color: var(--ds-chip-selected-text); border: 1px solid var(--ds-chip-selected-border);
  border-radius: 999px; padding: 4px 10px; font-size: 14px; font-weight: 400; }
.field > .chips > .chip .cx { cursor: pointer; color: var(--primary-600); font-weight: 700; line-height: 1; }

/* ============ dải siêu dữ liệu + menu phụ (thiet-ke-so-lieu / thiet-ke-thuyet-minh) ============
   Hai màn thiết kế đều dùng, nên đưa lên đây làm một nguồn duy nhất. */
.meta-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; background: var(--ds-surface-default);
  border: 1px solid var(--ds-border-subtle); border-radius: var(--ds-radius-lg); padding: 12px 16px; box-shadow: none; }
.meta-bar .db { display: inline-flex; align-items: center; gap: 8px; font-family: var(--ds-font-mono);
  font-size: 12px; background: var(--ds-surface-container-low); border: 1px solid var(--ds-border-subtle);
  border-radius: var(--ds-radius-md); padding: 4px 8px; }

.moremenu { position: relative; display: inline-block; }
/* Dropdown menu DS (B3): r8, elevation 3, mục 40 pad 10/12 r8, rê surface/container-low */
.moremenu .mm-list { position: absolute; right: 0; top: 44px; background: var(--ds-surface-default);
  border: 1px solid var(--ds-border-subtle); border-radius: var(--ds-radius-md); box-shadow: var(--ds-shadow-3-lg);
  min-width: 244px; padding: 4px; display: none; z-index: 50; }
.moremenu .mm-list.open { display: block; }
.moremenu .mm-list button { display: flex; width: 100%; align-items: center; gap: 8px; background: none;
  border: 0; min-height: 40px; padding: 10px 12px; border-radius: var(--ds-radius-md); text-align: left;
  color: var(--ds-text-primary); font-size: 14px; cursor: pointer; }
.moremenu .mm-list button:hover { background: var(--ds-surface-container-low); }
.moremenu .mm-list .dv { height: 1px; background: var(--ds-border-subtle); margin: 4px 0; }

/* ============ xem chi tiết báo cáo (xem-chi-tiet-bao-cao.html) ============
   Các lớp dưới đây dùng ở cả NhapLieuView lẫn XemBaoCaoLienDonViView nên đặt chung. */
/* Cặp nhãn – giá trị (Textinput Type=View DS): nhãn 12 text/secondary, giá trị 14 Medium text/primary */
.kv { display: flex; gap: 24px; flex-wrap: wrap; }
.kv .k { font-size: 12px; color: var(--ds-text-secondary); }
.kv .v { font-size: 14px; color: var(--ds-text-primary); font-weight: 500; margin-top: 2px; }

.legend-cells { display: flex; gap: 16px; flex-wrap: wrap; font-size: 12px;
  color: var(--text-secondary); align-items: center; }
.legend-cells .lc { display: inline-flex; align-items: center; gap: 8px; }
.legend-cells .sw { width: 22px; height: 16px; border-radius: 4px;
  border: 1px solid var(--border-strong); display: inline-block; }

.diff-legend { display: flex; gap: 14px; font-size: 12px; color: var(--text-secondary); flex-wrap: wrap; }
.diff-legend .lg { display: inline-flex; align-items: center; gap: 6px; }
.diff-legend .sw { width: 12px; height: 12px; border-radius: 2px; border: 1px solid var(--border-strong); }
.cmp-tbl td.chg { background: var(--ds-warning-95); box-shadow: inset 0 0 0 1px var(--warning-300); }
.cmp-tbl td.add { background: var(--success-bg); }

.split { display: grid; grid-template-columns: 1fr 300px; gap: 0; }
.split .pmain { min-width: 0; padding-right: 16px; }
.split .pside { padding-left: 16px; border-left: 1px solid var(--border); max-height: 66vh; overflow: auto; }

.ver { padding: 8px 12px; border-radius: var(--r-md); border: 1px solid transparent; cursor: pointer; margin-bottom: 2px; }
.ver:hover { background: var(--gray-100); }
.ver.cur { background: var(--primary-000); border-color: var(--primary-100); }
.ver .vt { font-weight: 600; font-size: 14px; display: flex; align-items: center; justify-content: space-between; }
.ver .vw { font-size: 12px; color: var(--text-secondary); margin-top: 4px; display: flex; align-items: center; gap: 8px; }
.ver .vw .bd { width: 7px; height: 7px; border-radius: 50%; background: var(--primary-600); flex: 0 0 auto; }

.unit-row { display: flex; align-items: center; gap: 12px; padding: 8px;
  border-radius: var(--r-md); border-bottom: 1px solid var(--gray-200); }
.unit-row .un { flex: 1; font-size: 14px; font-weight: 500; }
.unit-row .un small { display: block; color: var(--text-secondary); font-weight: 400; font-size: 12px; margin-top: 2px; }

/* dòng nhóm / dòng tổng / dòng chi tiết trong lưới số liệu */
.data-table tbody tr.row-group td { background: var(--ds-surface-container-low); font-weight: 600; }
.data-table tbody tr.row-total td { background: var(--ds-surface-container); font-weight: 700; color: var(--ds-text-primary); }
.data-table tbody tr.r-det .c-name { padding-left: 24px; font-weight: 400; }

/* design system chưa có trạng thái khoá cho công tắc viên thuốc */
.pill-toggle button[disabled] { opacity: .45; cursor: not-allowed; }

/* ============ MẪU MÀN TẠO / SỬA / CHI TIẾT theo DS Cục DTNN v2.0 ============
   Ảnh concept-7--chi-tiet-tai-san / them-moi-loai-danh-muc (03 §3):
   <div class="page-head ds-form-head">
     <button class="ds-back" title="Quay lại …"><AioIcon name="chevronLeft"/></button>
     <div class="page-head-l"><div class="page-title">…</div><div class="page-sub">…</div></div>
     <div class="page-head-r"><button class="btn btn-default">Hủy</button><button class="btn btn-primary">Lưu</button></div>
   </div>
   • Nút ở GÓC TRÊN PHẢI, nút chính đứng CUỐI; không còn thanh nút bám đáy (.form-actions).
   • Đầu mục: số trong ô tròn 28 (nền brand/90, số brand/40) + tiêu đề Title 18 SemiBold.
   • Trường xếp lưới 4 cột (.ds-grid-4; ô dài .ds-span-2 / cả hàng .ds-span-4). */
.ds-back { width: 36px; height: 36px; flex: none; display: inline-grid; place-items: center; padding: 0; cursor: pointer;
  border-radius: var(--ds-radius-md); border: 1px solid var(--ds-button-neutral-outlined-border);
  background: var(--ds-surface-default); color: var(--ds-button-neutral-outlined-text); text-decoration: none; }
.ds-back:hover { background: var(--ds-button-neutral-outlined-bg-hover); color: var(--ds-interactive-secondary-hover); border-color: var(--ds-interactive-secondary-hover); }
.ds-back:focus-visible { outline: none; box-shadow: var(--ring); }
.ds-back .aio-ic svg { width: 20px; height: 20px; }
/* Đầu màn form/chi tiết: tiêu đề Heading 24 Bold như màn danh sách (Figma 27/10: token heading = 24/30 Bold, trước 22 SemiBold) */
.page-head.ds-form-head { flex-wrap: wrap; }
.page-head.ds-form-head > .ds-back { align-self: flex-start; margin-top: 2px; }
.page-head.ds-form-head .page-head-l { flex: 1 1 280px; }
.page-head.ds-form-head .page-title { font-size: 24px; line-height: 30px; font-weight: 700; }
/* Đầu mục có số tròn */
.ds-muc { display: flex; align-items: center; gap: 12px; margin: 0; font-size: 18px; line-height: 23.4px; font-weight: 600; color: var(--ds-text-primary); }
.ds-muc-so { flex: none; width: 28px; height: 28px; border-radius: 50%; display: inline-grid; place-items: center;
  background: var(--ds-brand-90); color: var(--ds-brand-40); font-size: 16px; line-height: 1; font-weight: 600; font-variant-numeric: tabular-nums; }
.card-head > .ds-muc, .card-head > h3.ds-muc { font-size: 18px; }
/* Lưới trường 4 cột (lưới 12 cột DS × 3), gutter 20 / hàng 16; ≤1279: 2 cột · ≤760: 1 cột */
.ds-grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px 20px; }
.ds-grid-4 > .ds-span-2 { grid-column: span 2; }
.ds-grid-4 > .ds-span-4 { grid-column: 1 / -1; }
@media (max-width: 1279px) { .ds-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ds-grid-4 > .ds-span-2 { grid-column: 1 / -1; } }
@media (max-width: 760px) { .ds-grid-4 { grid-template-columns: 1fr; } }
/* Dòng ghi chú trước đây nằm trong thanh nút đáy — nay đứng riêng, chữ caption */
.ds-note { margin-top: 12px; font-size: 12px; line-height: 16.8px; color: var(--ds-text-secondary); }

/* ============ BỘ LỌC NÂNG CAO (DS 03 §2): 4 ô/hàng cách 20, nhãn cách ô 4; hàng nút "Đặt lại · Tìm kiếm"
   căn PHẢI cách 16; kẻ ngăn border/subtle với bảng ============ */
.ds-loc { padding: 0 0 16px; margin-bottom: 16px; border-bottom: 1px solid var(--ds-border-subtle); }
.ds-loc-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 20px; }
@media (max-width: 1200px) { .ds-loc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .ds-loc-grid { grid-template-columns: 1fr; } }
.ds-loc-acts { display: flex; justify-content: flex-end; gap: 16px; margin-top: 16px; }

/* ============ Tab trạng thái nhiều mục: KHÔNG rớt dòng — cuộn ngang trong dải tab ============ */
.tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; }
.tab { flex: none; padding: 0 12px; }
/* Phân trang: dấu … giữa các nút trang */
.pagination.in-table .pg-ellipsis { min-width: 32px; text-align: center; color: var(--ds-text-secondary); font-size: 12px; }
/* Ô tick trong tiêu đề bảng giữ đúng cao 48 */
.data-table thead th.col-check { line-height: 0; padding-top: 12px; padding-bottom: 14px; }
/* Cột Thao tác dùng .btn-icon (màn mẫu): Button Icon không nền, icon 20 icon/primary; biến thể xoá icon/error */
.data-table .col-act .btn-icon { background: transparent; border-color: transparent; color: var(--ds-icon-primary); }
.data-table .col-act .btn-icon:hover { background: var(--ds-button-neutral-ghost-bg-hover); color: var(--ds-icon-primary); }
.data-table .col-act .btn-icon.danger, .data-table .col-act .btn-icon.is-xoa { color: var(--ds-icon-error); }
.data-table .col-act .btn-icon.danger:hover, .data-table .col-act .btn-icon.is-xoa:hover { background: var(--ds-button-danger-ghost-bg-hover); }
/* Card bọc bảng sát mép (.table-wrap.tw-flush bo 0): card cắt góc để giữ bo 12 */
.card:has(> .table-wrap.tw-flush) { overflow: hidden; }
/* Icon thao tác dạng <button> (Button Icon No padding DS): bỏ nền/viền mặc định của trình duyệt */
button.cfg-ico { border: 0; background: transparent; padding: 4px; border-radius: var(--ds-radius-md); }
button.cfg-ico:hover { background: var(--ds-button-neutral-ghost-bg-hover); }
button.cfg-ico:focus-visible { outline: none; box-shadow: var(--ring); }
/* Biến thể xoá (icon/error) cho mọi Button Icon trong hàng/khối */
.cfg-ico.is-xoa, .icon-btn.is-xoa { color: var(--ds-icon-error); }
.cfg-ico.is-xoa:hover, .icon-btn.is-xoa:hover { color: var(--ds-icon-error); background: var(--ds-button-danger-ghost-bg-hover); }
.icon-btn:disabled, button.cfg-ico:disabled { color: var(--ds-icon-disabled); background: transparent; cursor: not-allowed; }
/* Gợi ý dạng đoạn văn (<p class="hint">…<b>…</b>…</p>): chữ chạy liền, không xếp cột flex */
p.hint { display: block; }
/* Button Icon trong hàng (DS A2 No padding/Ghost): 32, không nền, icon 20 icon/primary; xoá = icon/error */
.nut-ic { width: 32px; height: 32px; display: inline-grid; place-items: center; padding: 0; border: 0; background: transparent; cursor: pointer;
  border-radius: var(--ds-radius-md); color: var(--ds-icon-primary); }
.nut-ic:hover { background: var(--ds-button-neutral-ghost-bg-hover); }
.nut-ic:focus-visible { outline: none; box-shadow: var(--ring); }
.nut-ic svg { width: 20px; height: 20px; }
.nut-ic.is-xoa { color: var(--ds-icon-error); }
.nut-ic.is-xoa:hover { background: var(--ds-button-danger-ghost-bg-hover); }
.nut-ic:disabled { color: var(--ds-icon-disabled); background: transparent; cursor: not-allowed; }
/* Nhãn cặp nhãn – giá trị ở màn nhập liệu / xem báo cáo (style scoped của màn còn IN HOA): theo Textinput Type=View
   của DS — chữ thường đầu câu, 12 text/secondary. Ghi đè ở đây để không đụng tệp màn đang được phiên khác sửa. */
.aio-body .nhap-lieu-view .kv .k, .aio-body .xem-bao-cao-lien-don-vi-view .kv .k {
  text-transform: none; letter-spacing: 0; font-size: 12px; color: var(--ds-text-secondary); }
/* Tag PHÂN LOẠI (DS 01 §3.5 — nhóm/loại, không phải trạng thái): Teal · Lime · Purple · Orchid, nền subtle */
.tag-plain.tag-teal { background: var(--ds-tag-teal-subtle-bg); color: var(--ds-tag-teal-subtle-text); border-color: var(--ds-tag-teal-subtle-border); }
.tag-plain.tag-lime { background: var(--ds-tag-lime-subtle-bg); color: var(--ds-tag-lime-subtle-text); border-color: var(--ds-tag-lime-subtle-border); }
.tag-plain.tag-purple { background: var(--ds-tag-purple-subtle-bg); color: var(--ds-tag-purple-subtle-text); border-color: var(--ds-tag-purple-subtle-border); }
.tag-plain.tag-orchid { background: var(--ds-tag-orchid-subtle-bg); color: var(--ds-tag-orchid-subtle-text); border-color: var(--ds-tag-orchid-subtle-border); }
/* Bảng cuộn ngang (khổ hẹp — DS 03 §8): cột Thao tác dính phải, nền đặc theo hàng (không bóng thường trực để khổ rộng không lộ vạch) */
.table-wrap .data-table th.col-act, .table-wrap .data-table td.col-act,
.ds-scroll .data-table th.col-act, .ds-scroll .data-table td.col-act { position: sticky; right: 0; z-index: 1; }
.table-wrap .data-table td.col-act, .ds-scroll .data-table td.col-act { background: var(--ds-surface-default); }
.table-wrap .data-table tbody tr:hover td.col-act, .ds-scroll .data-table tbody tr:hover td.col-act { background: var(--ds-table-row-hover); }
.table-wrap .data-table tbody tr.row-sel td.col-act, .ds-scroll .data-table tbody tr.row-sel td.col-act { background: var(--ds-table-row-selected); }
.table-wrap .data-table thead th.col-act, .ds-scroll .data-table thead th.col-act { background: var(--ds-table-header-bg); }
/* Bảng nằm sát mép thẻ (lồng trong .card): không viền/bo riêng để khỏi thành hai khung */
.table-wrap.tw-flush { border: 0; border-radius: 0; box-shadow: none; }
/* Nút chữ phá huỷ trong chân popup/khối (Button Error ghost DS): không nền, chữ đỏ; rê nền danger-ghost */
.btn-danger-ghost { background: transparent; color: var(--ds-button-danger-ghost-text); }
.btn-danger-ghost:hover { background: var(--ds-button-danger-ghost-bg-hover); color: var(--ds-button-danger-ghost-text); }
.btn-danger-ghost:disabled, .btn-danger-ghost.is-disabled { background: transparent; }
/* Radio tự vẽ (DS B4): vòng 20, viền radio/border-default; chọn: viền + chấm 10 interactive/primary */
.radio { width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--ds-radio-border-default); background: var(--ds-surface-default);
  display: inline-grid; place-items: center; flex-shrink: 0; cursor: pointer; vertical-align: middle; }
.radio.on { border-color: var(--ds-radio-border-checked); }
.radio.on::after { content: ''; width: 10px; height: 10px; border-radius: 50%; background: var(--ds-radio-dot-fill); }
/* Ô trống khi LỌC không ra kết quả: minh hoạ "Không có kết quả" của DS (C12) */
.data-table .empty-cell.is-loc::before { background-image: url('/ds/illustrations/khong-co-ket-qua.svg'); }
/* Button Error outline (DS A1): viền + chữ danger, nền trong; rê nền danger-ghost */
.btn-danger-outline { background: var(--ds-surface-default); color: var(--ds-button-danger-outlined-text); border-color: var(--ds-button-danger-outlined-border); }
.btn-danger-outline:hover { background: var(--ds-button-danger-ghost-bg-hover); }
/* Lỗi nhập tại ô (DS B1 State=Error, UX_19): viền 1.5px border/error + dòng hỗ trợ support/error dưới ô */
.field.has-err .input, .field.has-err .select, .field.has-err textarea.input { border: 1.5px solid var(--ds-input-border-error); }
/* lớp nhân đôi để thắng luật :deep(.el-select__wrapper) riêng của từng màn */
.field.has-err .el-input__wrapper.el-input__wrapper, .field.has-err .el-select__wrapper.el-select__wrapper { box-shadow: 0 0 0 1.5px var(--ds-input-border-error) inset; }
.field-err, .field .field-err { font-size: 12px; line-height: 16.8px; color: var(--ds-support-error); }