/* ============================================================================
   HSSE Field · CSS các trang QUẢN TRỊ (/admin/*) — Đợt 8 UI v2.
   Tách khỏi <style> nội tuyến trong từng trang (UX-29): không render lại mỗi lần điều hướng,
   dùng token v2 của app.css, responsive theo CONTAINER QUERY (khối tự co theo bề rộng thật của nó).
   Tiền tố: .ahm- Bản đồ nhiệt · .ast- Dashboard · .arl- Danh sách · .ard- Chi tiết.
   ============================================================================ */

/* ---------------------------------------------------------------- Chung */
.adm-page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: .6rem 1rem; margin-bottom: var(--space-4); }
.adm-page-head > :first-child { min-width: 0; flex: 1 1 320px; }
.adm-page-head .adm-sub { margin-bottom: 0; }
.adm-tools { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; min-width: 0; }
.adm-page-head .segmented { flex: 0 1 auto; }

/* ================================================================ BẢN ĐỒ NHIỆT (.ahm-) */
/* LƯU Ý: KHÔNG đặt container-type lên .ahm-wrap / .arl-wrap — container có layout containment làm
   position:fixed của con (bottom-sheet thẻ khu vực, drawer bộ lọc) bị neo vào khối thay vì màn hình.
   Hai trang này dùng media query (bề rộng nội dung = màn hình − sidebar 0/84/240px − lề). */
.ahm-wrap { display: block; }
.ahm-head { display: flex; align-items: flex-end; justify-content: space-between; gap: .6rem 1rem; flex-wrap: wrap; margin-bottom: var(--space-4); }
.ahm-head > div:first-child { min-width: 0; flex: 1 1 300px; }
.ahm-head .adm-sub { margin-bottom: 0; }
.ahm-tools { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
/* Thanh trạng thái tự làm mới — KHÁC hẳn .segmented (không nền xanh đặc) để không nhầm với nút chọn */
.ahm-live { display: inline-flex; align-items: center; gap: .55rem; min-height: 44px; padding: 3px 4px 3px .8rem; border-radius: var(--radius-md);
    border: var(--border-w) dashed var(--border); background: transparent; }
.ahm-live-dot { flex: 0 0 auto; width: 10px; height: 10px; border-radius: 50%; background: var(--text-3, #94A3B8); }
.ahm-live.is-live .ahm-live-dot { background: var(--success); box-shadow: 0 0 0 0 var(--success); animation: ahm-pulse 1.8s ease-out infinite; }
@keyframes ahm-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--success) 55%, transparent); } 100% { box-shadow: 0 0 0 8px transparent; } }
@media (prefers-reduced-motion: reduce) { .ahm-live.is-live .ahm-live-dot { animation: none; } }
.ahm-live-t { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; margin-right: .2rem; }
.ahm-live-t b { font-size: var(--text-sm); font-weight: 700; color: var(--text-1); }
.ahm-live.is-live .ahm-live-t b { color: var(--success); }
.ahm-live-t span { font-size: var(--text-xs); color: var(--text-2); font-variant-numeric: tabular-nums; }
.ahm-live-btn { display: grid; place-items: center; flex: 0 0 auto; width: 36px; height: 36px; padding: 0; border-radius: 50%;
    border: var(--border-w) solid var(--border); background: var(--surface-1); color: var(--text-2); cursor: pointer;
    transition: background var(--dur-1), color var(--dur-1), border-color var(--dur-1); }
.ahm-live-btn:hover { color: var(--primary-strong); border-color: var(--primary); background: var(--surface-3); }
.ahm-live-btn:focus-visible { outline: 3px solid var(--focus-color); outline-offset: 1px; }
@media (pointer: coarse) { .ahm-live-btn { width: var(--tap-min); height: var(--tap-min); } }
.ahm-mode .lbl-s, .ahm-live .lbl-s { display: none; }
/* Điện thoại: thanh điều khiển GỌN 2 hàng (trước 3 hàng ~180px):
   hàng 1 = [2D|3D] nhãn ngắn + [7|30|90 ngày] chiếm phần còn lại; hàng 2 = thanh "Trực tiếp" mỏng, chữ một dòng. */
@media (max-width: 599px) {
    .ahm-tools { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .45rem; width: 100%; }
    .ahm-tools .segmented { display: grid; width: 100%; padding: 2px; }
    .ahm-tools .segmented > button { min-height: 34px; padding: .2rem .55rem; gap: .3rem; font-size: .8125rem; }
    .ahm-mode .lbl-l, .ahm-live .lbl-l { display: none; }
    .ahm-mode .lbl-s, .ahm-live .lbl-s { display: inline; }
    .ahm-live { grid-column: 1 / -1; display: flex; width: 100%; min-height: 0; gap: .45rem; padding: 2px 3px 2px .7rem; }
    .ahm-live-t { flex: 1 1 auto; flex-direction: row; align-items: baseline; gap: .4rem; white-space: nowrap; overflow: hidden; }
    .ahm-live-t b { font-size: .8125rem; }
    .ahm-live-t span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .ahm-tools .ahm-live-btn { width: 34px; height: 34px; }
}
.ahm-note { display: flex; align-items: flex-start; gap: .45rem; margin: 0 0 var(--space-4); padding: .6rem .8rem; border-radius: var(--radius-md); font-size: var(--text-sm); background: var(--info-bg); color: var(--text-1); }
.ahm-note.warn { background: var(--warning-bg); color: var(--warning); }

/* KPI: dải cuộn ngang snap trên hẹp → 3 cột → 5 cột theo bề rộng khối */
/* Điện thoại: lưới GỌN 2 hàng (3 + 2 ô) thay dải lướt ngang — trước chỉ thấy ~2,3/5 ô, dễ bỏ sót Vị trí thật/khu vực */
.ahm-kpis { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .5rem; margin-bottom: var(--space-4); }
.ahm-kpis > .ahm-kpi { grid-column: span 2; }
.ahm-kpis > .ahm-kpi:nth-child(n+4) { grid-column: span 3; }
.ahm-kpis .lbl-s { display: none; }
/* 29/09/2026: điện thoại — MỘT hàng 5 ô nhỏ (số + nhãn, bỏ icon) thay lưới 3+2 ô to chiếm nửa màn hình trước bản đồ */
@media (max-width: 599px) {
    /* 30/09/2026: 5 ô ĐỀU NHAU, nhãn MỘT DÒNG cỡ chữ cũ (.66rem) — dùng nhãn NGẮN (.lbl-s: Gemba · GPS thật · ước tính)
       thay nhãn dài (.lbl-l). Chỉ máy rất hẹp (< 360px) chữ mới co nhẹ theo bề rộng ô (cqw). */
    .ahm-kpis { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .25rem; margin-bottom: var(--space-3); }
    .ahm-kpis > .ahm-kpi, .ahm-kpis > .ahm-kpi:nth-child(n+4) { grid-column: auto; }
    .ahm-kpis .ahm-kpi { container-type: inline-size; padding: .35rem .2rem; border-left-width: 3px; border-radius: var(--radius-md); box-shadow: none; gap: 0; }
    .ahm-kpis .ahm-kpi svg { display: none; }
    .ahm-kpis .ahm-kpi b { font-size: 1.1rem; }
    .ahm-kpis .ahm-kpi span { font-size: clamp(.56rem, 21cqw, .66rem); line-height: 1.15; white-space: nowrap; }
    .ahm-kpis .lbl-l { display: none; }
    .ahm-kpis .lbl-s { display: inline; }
}
.ahm-kpi {
    scroll-snap-align: start; display: flex; flex-direction: column; align-items: flex-start; gap: .1rem; min-width: 0;
    background: var(--surface-1); border: var(--border-w) solid var(--border); border-left: 4px solid var(--kc, var(--border-strong));
    border-radius: var(--radius-lg); padding: .7rem .9rem; box-shadow: var(--elev-1); color: var(--kc, var(--text-1));
}
.ahm-kpi b { font-size: clamp(1.4rem, 1.1rem + .9vw, 1.9rem); font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
.ahm-kpi span { font-size: var(--text-xs); color: var(--text-2); font-weight: 700; }
.ahm-kpi span::first-letter { text-transform: uppercase; }   /* nhãn viết hoa chữ đầu (VI + EN): Sự cố · Incidents · Ước tính */
.ahm-kpi.inc { --kc: var(--kind-inc); }
.ahm-kpi.obs { --kc: var(--kind-obs); }
.ahm-kpi.zone { --kc: var(--text-1); }
.ahm-kpi.real { --kc: var(--success); }
.ahm-kpi.area { --kc: var(--warning); }
/* 600–1279px: giữ lưới 3 + 2 (hàng dưới 2 ô giãn đầy, không còn ô trống) */
@media (min-width: 1280px) { .ahm-kpis { grid-template-columns: repeat(5, minmax(0, 1fr)); } .ahm-kpis > .ahm-kpi, .ahm-kpis > .ahm-kpi:nth-child(n+4) { grid-column: auto; } }

/* Bản đồ + panel: 1 cột trên hẹp, chia đôi khi khối ≥ 900px */
.ahm-split { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--stack); align-items: start; }
@media (min-width: 1280px) { .ahm-split { grid-template-columns: minmax(0, 1fr) clamp(320px, 24vw, 440px); } }
.ahm-mapbox {
    position: relative; isolation: isolate; width: 100%; height: clamp(320px, calc(100dvh - 330px), 1100px);
    border-radius: var(--radius-lg); overflow: hidden; border: var(--border-w) solid var(--border); box-shadow: var(--elev-2); background: var(--surface-3);
}
@media (min-width: 1280px) { .ahm-mapbox { height: clamp(460px, calc(100dvh - 260px), 1200px); } }
.ahm-map { width: 100%; height: 100%; }
.ahm-mapbox > .ahm-map, .ahm-mapbox > .ahm-twin { position: absolute; inset: 0; }
.ahm-twin { width: 100%; height: 100%; border: 0; display: block; background: #0d1520; }
.ahm-mapbox.is-3d > .ahm-map { visibility: hidden; }
.ahm-mapbox.is-2d > .ahm-twin { display: none; }
.ahm-loading {
    position: absolute; inset: 0; z-index: 1000; display: grid; place-items: center; gap: .5rem; align-content: center;
    background: color-mix(in srgb, var(--surface-1) 72%, transparent); color: var(--text-1); font-weight: 700;
}
.ahm-loading.dark { background: #0d1520; color: #C9D3E3; }
.ahm-loading::before { content: ""; width: 26px; height: 26px; border-radius: 50%; border: 3px solid currentColor; border-top-color: transparent; }
@media (prefers-reduced-motion: no-preference) { .ahm-loading::before { animation: spin .8s linear infinite; } }

.ahm-side { display: flex; flex-direction: column; min-width: 0; }
.ahm-side > .adm-card { margin-bottom: var(--space-4); }
.ahm-side > .adm-card:last-child { margin-bottom: 0; }
.ahm-3d-n { display: flex; align-items: flex-start; gap: .35rem; margin-top: .6rem; font-size: var(--text-xs); color: var(--text-2); line-height: 1.45; }
.ahm-3d-n.warn { color: var(--warning); }

/* Chú giải thang nhiệt tuần tự + mức số */
.ahm-legend { display: grid; gap: .3rem; font-size: var(--text-xs); color: var(--text-2); }
.ahm-lg-t { font-weight: 800; color: var(--text-1); font-size: var(--text-sm); }
.ahm-lg-bar { height: 12px; border-radius: 6px; background: var(--heat-scale); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text-1) 12%, transparent); }
.ahm-lg-ticks { display: flex; justify-content: space-between; font-variant-numeric: tabular-nums; font-weight: 700; }
.ahm-lg-ends { display: flex; justify-content: space-between; }
.ahm-src { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .8rem; margin-top: .8rem; padding-top: .7rem; border-top: 1px solid var(--border-soft); font-size: var(--text-xs); color: var(--text-2); }
.ahm-src-i { display: inline-flex; align-items: center; gap: .25rem; font-weight: 700; }
.ahm-src-i.real { color: var(--success); }
.ahm-src-i.area { color: var(--warning); }
.ahm-src-i b { font-weight: 800; }
.ahm-src-n { flex: 1 1 100%; line-height: 1.45; }

/* Thẻ khu vực đang chọn — panel phải (rộng) / bottom-sheet nổi trên bản đồ (hẹp, UX-28) */
.ahm-sel-h { display: flex; align-items: center; gap: .45rem; margin-bottom: .6rem; color: var(--primary-strong); }
.ahm-sel-nm { font-weight: 800; font-size: var(--text-md); color: var(--text-1); flex: 1; min-width: 0; overflow-wrap: anywhere; }
.ahm-x { flex: 0 0 auto; border: 0; background: var(--surface-3); color: var(--text-2); border-radius: var(--radius-md); width: var(--tap-min); height: var(--tap-min); display: grid; place-items: center; }
.ahm-x:hover { color: var(--text-1); }
.ahm-sel-b { display: flex; flex-wrap: wrap; gap: .4rem; }
.ahm-pill { display: inline-flex; gap: .25rem; font-size: var(--text-xs); font-weight: 700; padding: .25rem .6rem; border-radius: var(--radius-full); background: var(--info-bg); color: var(--info); }
.ahm-pill.inc { background: var(--danger-bg); color: var(--kind-inc); }
.ahm-pill.obs { background: var(--info-bg); color: var(--kind-obs); }
.ahm-pill.lvl.lv-hi { background: var(--danger-bg); color: var(--lv-hi); }
.ahm-pill.lvl.lv-mid { background: var(--warning-bg); color: var(--lv-mid); }
.ahm-pill.lvl.lv-lo { background: var(--success-bg); color: var(--lv-lo); }
.ahm-sel-f { margin-top: .55rem; font-size: var(--text-sm); color: var(--text-2); }
.ahm-sel-src { display: flex; align-items: flex-start; gap: .35rem; margin-top: .35rem; font-size: var(--text-xs); color: var(--text-2); overflow-wrap: anywhere; }
.ahm-sel-src.real { color: var(--success); }
.ahm-sel-src.area { color: var(--warning); }
.ahm-sel-go { display: inline-flex; align-items: center; gap: .3rem; min-height: var(--tap-min); margin-top: .4rem; font-size: var(--text-sm); font-weight: 800; color: var(--primary-strong); text-decoration: none; }
.ahm-sel-go:hover { text-decoration: underline; }
/* Danh sách sự vụ của ĐIỂM vừa bấm trên bản đồ — mỗi dòng là liên kết sang trang chi tiết */
.ahm-sel-recs { margin-top: .6rem; padding-top: .55rem; border-top: 1px solid var(--border-soft); }
.ahm-sel-recs-h { font-size: var(--text-xs); font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--text-2); margin-bottom: .2rem; }
.ahm-sel-recs ul { list-style: none; margin: 0; padding: 0; }
.ahm-sel-recs a { display: flex; align-items: center; gap: .45rem; min-height: var(--tap-min); padding: .2rem .4rem; margin: 0 -.4rem; border-radius: var(--radius-sm); color: var(--text-1); text-decoration: none; font-size: var(--text-sm); }
.ahm-sel-recs a:hover { background: var(--surface-3); }
.ahm-sel-recs a b { color: var(--primary-strong); font-weight: 800; white-space: nowrap; }
.ahm-sel-recs a .d { margin-left: auto; font-size: var(--text-xs); color: var(--text-2); white-space: nowrap; }
.ahm-sel-recs a svg { flex: 0 0 auto; color: var(--text-2); }
@media (max-width: 1279px) {
    .ahm-side > .ahm-sel {
        position: fixed; z-index: 1150; margin: 0; max-height: 62dvh; overflow-y: auto; overscroll-behavior: contain;
        left: max(12px, env(safe-area-inset-left)); right: max(12px, env(safe-area-inset-right));
        bottom: calc(var(--tab-clear) + 10px); border-radius: var(--radius-xl); box-shadow: var(--elev-3);
    }
    @media (min-width: 768px) { .ahm-side > .ahm-sel { left: auto; width: min(440px, calc(100vw - 120px)); bottom: 16px; right: 16px; } }
    @media (prefers-reduced-motion: no-preference) { .ahm-side > .ahm-sel { animation: sheet-up var(--dur-3) var(--ease-standard); } }
}

.ahm-list-h { margin: 0 0 .25rem; font-weight: 800; font-size: var(--text-md); color: var(--text-1); }
.ahm-list-n { margin: 0 0 .4rem; font-size: var(--text-xs); color: var(--text-2); }
.ahm-empty { color: var(--text-2); font-size: var(--text-sm); margin: .3rem 0 0; }
.ahm-list { list-style: none; margin: 0; padding: 0; max-height: 44vh; overflow-y: auto; }
.ahm-list li { border-bottom: 1px solid var(--border-soft); }
.ahm-list li:last-child { border-bottom: none; }
.ahm-row {
    display: flex; align-items: center; gap: .5rem; width: 100%; min-height: var(--tap-min); padding: .45rem .25rem;
    background: none; border: none; border-radius: var(--radius-sm); color: var(--text-1); text-align: left; font-size: var(--text-sm);
}
.ahm-row:hover { background: var(--surface-3); }
.ahm-dot { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; background: var(--lv-none); }
.ahm-dot.lv-hi { background: var(--lv-hi); } .ahm-dot.lv-mid { background: var(--lv-mid); } .ahm-dot.lv-lo { background: var(--lv-lo); }
.ahm-row-nm { flex: 1; min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ahm-row-n { min-width: 28px; text-align: center; font-weight: 800; font-size: var(--text-xs); padding: .12rem .4rem; border-radius: var(--radius-full); font-variant-numeric: tabular-nums; }
.ahm-row-n.inc { background: var(--danger-bg); color: var(--kind-inc); }
.ahm-row-n.obs { background: var(--info-bg); color: var(--kind-obs); }

/* ================================================================ DASHBOARD (.ast-) */
/* Thẻ CUỐI trang Dashboard / Người dùng: bỏ margin-bottom 16px của .adm-card — khoảng cách tới thanh tab đã do padding-bottom của .adm-body lo */
.adm-shell .ast-wrap > .adm-card:last-child, .adm-shell .aus-wrap > .adm-card:last-child { margin-bottom: 0; }
.ast-wrap { display: block; font-variant-numeric: tabular-nums; container: ast / inline-size; }
.ast-head { display: flex; align-items: flex-end; justify-content: space-between; gap: .6rem 1rem; flex-wrap: wrap; margin-bottom: var(--space-4); }
.ast-head > div:first-child { min-width: 0; flex: 1 1 320px; }
.ast-head .adm-sub { margin-bottom: 0; }
.ast-ctrl { display: flex; align-items: flex-end; gap: .5rem; flex-wrap: wrap; min-width: 0; }
.ast-date { display: flex; flex-direction: column; justify-content: flex-end; min-width: 0; }
.ast-date span { font-size: var(--text-xs); font-weight: 700; color: var(--text-2); margin-bottom: .2rem; }
.ast-date input {
    min-height: var(--tap-min); min-width: 0; width: 100%; padding: .35rem .55rem; border: var(--border-w) solid var(--field-border);
    border-radius: var(--radius-md); background: var(--surface-1); color: var(--text-1); font-size: var(--text-sm);
}
/* iOS WebKit: ô date bỏ qua width:100% (giữ bề rộng nội tại) ⇒ tràn ra ngoài màn hình. Tắt giao diện gốc để ô co theo lưới. */
.ast-date input[type="date"] { -webkit-appearance: none; appearance: none; display: block; max-width: 100%; box-sizing: border-box; text-align: left; }
.ast-date input[type="date"]::-webkit-date-and-time-value { text-align: left; margin: 0; }
/* Ô ngày LUÔN 1 dòng dd/MM/yyyy: iOS hiển thị theo ngôn ngữ máy ("ngày 1 thg 10, 2026") làm ô cao 2 dòng + lệch hàng.
   Chỉ trên iOS: ẩn chữ gốc, phủ nhãn dd/MM/yyyy (không bắt cú chạm — chạm vẫn mở bộ chọn ngày gốc). */
.ast-date > .dt-box { position: relative; display: block; margin: 0; font-size: inherit; font-weight: inherit; color: inherit; }
.dt-show { display: none; }
@supports (-webkit-touch-callout: none) {
    /* Chữ gốc (ẩn) vẫn chiếm chỗ: trên máy hẹp (iPhone 13, 390px) "ngày 3 thg 10, 2026" xuống 2 dòng làm ô cao hơn ô bên cạnh
       và đẩy nhãn lệch ⇒ khoá 1 dòng + chiều cao cố định cho cả hai ô */
    .dt-box > input[type="date"] { color: transparent; height: var(--tap-min); min-height: var(--tap-min); white-space: nowrap; overflow: hidden; }
    .dt-box > input[type="date"]::-webkit-date-and-time-value { opacity: 0; white-space: nowrap; overflow: hidden; }
    .dt-box > .dt-show {
        position: absolute; inset: 0 2.3rem 0 0; display: flex; align-items: center; padding-left: calc(.55rem + var(--border-w));
        font-size: var(--text-sm); font-weight: 500; color: var(--text-1); white-space: nowrap; overflow: hidden; pointer-events: none;
        font-variant-numeric: tabular-nums;
    }
}
.ast-golist {
    display: inline-flex; align-items: center; justify-content: center; gap: .35rem; min-height: var(--tap-min); padding: .4rem .9rem;
    border-radius: var(--radius-md); background: var(--primary); color: var(--on-primary); font-weight: 800; font-size: var(--text-sm); text-decoration: none;
}
.ast-golist:hover { background: var(--primary-strong); }
@container ast (max-width: 620px) {
    .ast-ctrl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
    .ast-ctrl .segmented, .ast-ctrl .ast-golist { grid-column: 1 / -1; display: grid; width: 100%; }
    .ast-ctrl .ast-golist { display: inline-flex; }
}
/* Khoảng ngày + kỳ trước LUÔN một hàng: phần kỳ trước co lại "…" nếu thiếu chỗ; điện thoại dùng bản rút gọn */
.ast-period-n { display: flex; align-items: center; gap: .35rem; margin: 0 0 .8rem; font-size: var(--text-sm); font-weight: 700; color: var(--text-1s); flex-wrap: nowrap; white-space: nowrap; min-width: 0; }
.ast-period-n > svg { flex: 0 0 auto; }
.ast-period-n span { font-weight: 500; color: var(--text-2); min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ast-period-n .ast-prev-short { display: none; }
@media (max-width: 599px) {
    .ast-period-n { font-size: .8125rem; gap: .3rem; }
    .ast-period-n .ast-prev-long { display: none; }
    .ast-period-n .ast-prev-short { display: inline; }
}

.ast-sk-num { display: block; width: 56px; height: 30px; border-radius: 6px; margin: .35rem 0; }
.ast-sk-chart { height: 220px; border-radius: 10px; }

/* KPI bento: 2 cột → 4 cột (ô "Mức Cao" rộng gấp đôi) → 7 cột */
.ast-kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: .7rem; margin-bottom: var(--stack); }
/* Điện thoại: 8 ô chia đều 2 cột (4 hàng) — "Không phát hiện mối nguy" + "Mức Cao" chung 1 hàng */
/* 8 ô KPI (thêm "Không phát hiện mối nguy"): tablet / máy tính vừa 4 × 2 hàng; màn rộng 8 ô trên 1 hàng — không còn ô lẻ */
@container ast (min-width: 720px) { .ast-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@container ast (min-width: 1400px) { .ast-kpis { grid-template-columns: repeat(8, minmax(0, 1fr)); } }
.ast-kpi {
    position: relative; display: flex; flex-direction: column; gap: .12rem; min-width: 0; padding: .8rem .9rem .75rem .9rem;
    /* vạch màu = border-left (như .ahm-kpi bản đồ nhiệt) ⇒ uốn theo góc bo; KHÔNG dùng dải ::before bị overflow cắt thẳng */
    background: var(--surface-1); border: var(--border-w) solid var(--border); border-left: 4px solid var(--kc, var(--border-strong)); border-radius: var(--radius-lg); box-shadow: var(--elev-1);
    text-decoration: none; color: inherit; overflow: hidden; transition: transform var(--dur-1), box-shadow var(--dur-1);
}
a.ast-kpi:hover { transform: translateY(-2px); box-shadow: var(--elev-2); }
.ast-kh { display: flex; align-items: center; gap: .3rem; font-size: var(--text-xs); font-weight: 800; color: var(--text-2); line-height: 1.25; }
.ast-kpi b { font-size: var(--text-kpi); font-weight: 800; line-height: 1.1; color: var(--text-1); }
.ast-kpi b small { font-size: 1rem; font-weight: 700; margin-left: 1px; color: var(--text-2); }
.ast-ksub { font-size: var(--text-xs); color: var(--text-2); }
.ast-kpi.k-obs { --kc: var(--kind-obs); } .ast-kpi.k-obs .ast-kh { color: var(--kind-obs); }
.ast-kpi.k-inc { --kc: var(--kind-inc); } .ast-kpi.k-inc .ast-kh { color: var(--kind-inc); }
.ast-kpi.k-hi { --kc: var(--lv-hi); } .ast-kpi.k-hi b { color: var(--lv-hi); }
.ast-kpi.k-new { --kc: var(--info); }
.ast-kpi.k-done { --kc: var(--success); }
.ast-kpi.k-img, .ast-kpi.k-gps { --kc: var(--gold-600); }
.ast-delta { display: inline-flex; align-items: center; flex-wrap: wrap; gap: .2rem; margin-top: .15rem; font-size: var(--text-xs); font-weight: 800; }
.ast-delta i { font-style: normal; font-weight: 500; color: var(--text-2); }
.ast-delta.good { color: var(--success); } .ast-delta.bad { color: var(--danger); } .ast-delta.neu { color: var(--text-1s); }

.ast-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--stack); }
@container ast (min-width: 1100px) {
    .ast-row.r-21 { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
    .ast-row.r-111 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@container ast (min-width: 700px) and (max-width: 1099px) {
    .ast-row.r-111 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ast-row.r-111 > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}
.ast-row > .adm-card { min-width: 0; container-type: inline-size; }
.ast-ch { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .4rem .8rem; margin-bottom: .7rem; }
.ast-ch h3, .ast-ch h2 { margin: 0; font-size: var(--text-md); font-weight: 800; color: var(--text-1); }
.ast-legend { display: flex; flex-wrap: wrap; gap: .3rem .9rem; font-size: var(--text-sm); color: var(--text-1s); }
.ast-legend span { display: inline-flex; align-items: center; gap: .3rem; }
.ast-legend b { color: var(--text-1); }
.ast-legend .sw { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.ast-legend .sw.obs { background: var(--s-obs); } .ast-legend .sw.inc { background: var(--s-inc); }
.ast-more { display: inline-flex; align-items: center; gap: .2rem; min-height: var(--tap-min); font-size: var(--text-sm); font-weight: 800; color: var(--primary-strong); text-decoration: none; }

/* Xu hướng: vẽ cột bằng SVG co giãn (preserveAspectRatio=none), NHÃN TRỤC bằng HTML 12px thật
   → không còn chữ ~5px khi màn hẹp (UX-23). 90 ngày trên màn hẹp: cuộn ngang. */
.ast-trend-box { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 .4rem; }
.ast-trend-y { position: relative; width: 2.2em; font-size: var(--text-xs); color: var(--chart-axis); text-align: right; font-variant-numeric: tabular-nums; }
.ast-trend-y span { position: absolute; right: 0; transform: translateY(-50%); line-height: 1; }
.ast-trend-scroll { overflow-x: auto; overscroll-behavior-x: contain; }
.ast-trend-inner { position: relative; min-width: var(--trend-min, 0px); }
.ast-trend { display: block; width: 100%; height: 220px; overflow: visible; }
.ast-trend .grid { stroke: var(--chart-grid); stroke-width: 1; vector-effect: non-scaling-stroke; }
.ast-trend .base { stroke: var(--chart-grid-strong); stroke-width: 1; vector-effect: non-scaling-stroke; }
.ast-trend .b-obs { fill: var(--s-obs); }
.ast-trend .b-inc { fill: var(--s-inc); }
.ast-trend .hit { fill: transparent; cursor: pointer; outline: none; }
.ast-trend .hit:hover, .ast-trend .hit:focus-visible { fill: color-mix(in srgb, var(--primary) 14%, transparent); }
.ast-trend .hit:focus-visible { stroke: var(--focus-color); stroke-width: 2; vector-effect: non-scaling-stroke; }
.ast-trend-x { position: relative; height: 1.6em; font-size: var(--text-xs); color: var(--chart-axis); font-variant-numeric: tabular-nums; }
.ast-trend-x span { position: absolute; top: .3em; transform: translateX(-50%); white-space: nowrap; }
.ast-trend-x span:first-child { transform: none; }
.ast-trend-x span:last-child { transform: translateX(-100%); }
.ast-trend-n { margin-top: .3rem; font-size: var(--text-xs); color: var(--text-2); }
.ast-trend-tip { min-height: 1.4em; margin-top: .2rem; font-size: var(--text-sm); font-weight: 700; color: var(--text-1); }

/* Thanh ngang — nhãn xuống dòng riêng khi thẻ hẹp (<380px) */
.ast-stack { display: flex; gap: 2px; height: 14px; border-radius: var(--radius-full); overflow: hidden; background: var(--surface-3); margin-bottom: .7rem; }
.ast-stack .seg { display: block; height: 100%; flex-basis: 0; }
.ast-bars { list-style: none; margin: 0; padding: 0; }
.ast-bar {
    display: grid; grid-template-columns: minmax(0, 38%) minmax(0, 1fr) 2.6em 3.2em; grid-template-areas: "nm trk n pc";
    align-items: center; gap: .55rem; width: 100%; min-height: 40px; padding: .3rem .35rem; border: none; border-radius: var(--radius-sm);
    background: transparent; color: var(--text-1); font-size: var(--text-sm); text-align: left;
}
.ast-bar:hover { background: var(--surface-3); }
.ast-bar .nm { grid-area: nm; display: flex; align-items: center; gap: .35rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.ast-bar .trk { grid-area: trk; height: 10px; border-radius: 0 4px 4px 0; background: var(--surface-3); overflow: hidden; }
.ast-bar .fill { display: block; height: 100%; min-width: 2px; border-radius: 0 4px 4px 0; background: var(--s-obs); }
.ast-bar .n { grid-area: n; text-align: right; font-weight: 800; }
.ast-bar .pc { grid-area: pc; text-align: right; color: var(--text-2); font-size: var(--text-xs); }
@container (max-width: 380px) {
    .ast-bar { grid-template-columns: minmax(0, 1fr) 2.6em 3.2em; grid-template-areas: "nm nm nm" "trk n pc"; row-gap: .2rem; }
    .ast-bar .nm { white-space: normal; }
}
.ast-wrap .fill.lv-hi, .ast-wrap .seg.lv-hi, .ast-wrap .ast-dot.lv-hi { background: var(--lv-hi); }
.ast-wrap .fill.lv-mid, .ast-wrap .seg.lv-mid, .ast-wrap .ast-dot.lv-mid { background: var(--lv-mid); }
.ast-wrap .fill.lv-lo, .ast-wrap .seg.lv-lo, .ast-wrap .ast-dot.lv-lo { background: var(--lv-lo); }
.ast-wrap .fill.lv-none, .ast-wrap .seg.lv-none, .ast-wrap .ast-dot.lv-none { background: var(--chart-muted); }
.ast-wrap .fill.lv-safe, .ast-wrap .seg.lv-safe, .ast-wrap .ast-dot.lv-safe { background: var(--success); }   /* mức 0 — An toàn */
.ast-dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; display: inline-block; }
.ast-empty { color: var(--text-2); font-size: var(--text-sm); margin: .3rem 0; }
.ast-bmore { margin-top: .3rem; font-size: var(--text-xs); color: var(--text-2); text-align: right; }

/* Sự vụ mới nhất: bảng (rộng) → thẻ (hẹp); cả hàng bấm được qua "stretched link" (UX-24) */
.ast-recent { container-type: inline-size; }
/* Phân trang "Sự vụ mới nhất" — cùng kiểu ‹ Trang x/y › của app hiện trường (.fld-pager) */
.ast-pager { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-top: .6rem; padding-top: .6rem; border-top: 1px solid var(--border-soft); }
.ast-pager-t { font-size: var(--text-sm); font-weight: 700; color: var(--text-2); font-variant-numeric: tabular-nums; }
.ast-pager-btn { display: grid; place-items: center; width: var(--tap-min); height: var(--tap-min); padding: 0; border-radius: var(--radius-md);
    border: var(--border-w) solid var(--border); background: var(--surface-1); color: var(--primary-strong); cursor: pointer; }
.ast-pager-btn:hover:not(:disabled) { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 10%, var(--surface-1)); }
.ast-pager-btn:disabled { opacity: .4; cursor: default; }
.ast-pager-btn:focus-visible { outline: 3px solid var(--focus-color); outline-offset: 1px; }
.ast-tbl { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
/* 30/09/2026: bảng "Sự vụ mới nhất" CÙNG kiểu bảng Danh sách sự vụ (.arl-table): dải tiêu đề nền, cột Ảnh 76px, dòng phụ, cột UABC, GPS canh giữa */
.ast-tbl th { text-align: left; font-size: var(--text-xs); font-weight: 800; letter-spacing: .03em; text-transform: uppercase; color: var(--text-2); background: var(--surface-2); padding: .6rem .7rem; border-bottom: 1px solid var(--border); white-space: nowrap; }
.ast-tbl td { padding: .55rem .7rem; border-bottom: 1px solid var(--border-soft); color: var(--text-1); vertical-align: middle; }
.ast-tbl tbody tr { position: relative; }
.ast-tbl tbody tr:last-child td { border-bottom: 0; }   /* hàng cuối: chỉ còn 1 đường kẻ (viền trên của thanh phân trang) */
.ast-tbl tbody tr:hover td { background: var(--surface-3); }
.ast-tbl .nw { white-space: nowrap; }
.ast-tbl .c-img { width: 76px; }
.ast-tbl .c-gps { width: 56px; text-align: center; }
@container (max-width: 1180px) { .ast-tbl .c-uabc { display: none; } }
.ast-no { font-weight: 800; color: var(--primary-strong); text-decoration: none; white-space: nowrap; }
.ast-no::after { content: ""; position: absolute; inset: 0; }
.ast-no:focus-visible { outline: none; }
.ast-no:focus-visible::after { outline: 3px solid var(--focus-color); outline-offset: -3px; border-radius: 6px; }
.ast-thumb { position: relative; display: grid; place-items: center; width: 60px; height: 45px; border-radius: 8px; overflow: hidden; background: var(--surface-3); color: var(--text-2); border: 1px solid var(--border); }
.ast-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ast-tmore { position: absolute; right: 2px; bottom: 2px; font-size: .6875rem; font-weight: 800; color: #fff; background: rgba(15, 23, 42, .78); border-radius: 4px; padding: 0 .25rem; }
@container (max-width: 760px) {
    .ast-tbl thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    .ast-tbl, .ast-tbl tbody { display: block; }
    /* CÙNG bố cục thẻ với Danh sách sự vụ (.arl-table):
         [ảnh 76] Số phiếu [Loại]
                  Ngày giờ ……………… Mức
                  Khu vực ……… Người ghi nhận
                  Trạng thái ………………… CAPA   (📍 ghim GPS: sát phải hàng Số phiếu) */
    .ast-tbl tbody tr {
        display: grid; grid-template-columns: 76px minmax(0, max-content) minmax(0, 1fr) auto;
        grid-template-areas: "img no kd gps" "img at at lv" "img area area by" "img st st act";
        column-gap: .8rem; row-gap: .28rem; align-items: center;
        padding: .85rem .2rem; border-bottom: 1px solid var(--border-soft);
    }
    .ast-tbl tbody tr:last-child { border-bottom: 0; }
    .ast-tbl td { display: block; padding: 0; border: 0; min-width: 0; }
    .ast-tbl tbody tr:hover td { background: transparent; }
    .ast-tbl tbody tr:hover { background: var(--surface-2); }
    .ast-tbl td.c-img { grid-area: img; align-self: start; width: auto; }
    .ast-thumb { width: 76px; height: 76px; border-radius: 10px; }
    .ast-tbl td.c-no { display: contents; }
    .ast-tbl td.c-no .ast-no { grid-area: no; min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: var(--text-md); }
    .ast-tbl td.c-no .kind-tag { grid-area: kd; justify-self: start; margin-left: -.4rem; white-space: nowrap; }
    .ast-tbl td.c-at { grid-area: at; font-size: var(--text-xs); color: var(--text-2); font-variant-numeric: tabular-nums; }
    .ast-tbl td.c-lv { grid-area: lv; justify-self: end; }
    .ast-tbl td.c-area { grid-area: area; font-size: var(--text-xs); color: var(--text-1s); font-weight: 600; overflow-wrap: anywhere; }
    .ast-tbl td.c-by { grid-area: by; justify-self: end; max-width: 46vw; font-size: var(--text-xs); color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .ast-tbl td.c-st { grid-area: st; justify-self: start; margin-top: .15rem; }
    .ast-tbl td.c-gps { grid-area: gps; justify-self: end; white-space: nowrap; }
    .ast-tbl td.c-gps .arl-gps svg { width: 16px; height: 16px; }   /* 30/09/2026: chỉ icon ghim (bỏ chữ "GPS"), sát phải CÙNG HÀNG số phiếu */
    .ast-tbl td.c-act { grid-area: act; justify-self: end; margin-top: .15rem; }
    .ast-tbl td.c-risk, .ast-tbl td.c-uabc { display: none; }
    .ast-tbl td.c-at .arl-sub { display: inline; margin-left: .3rem; font-size: inherit; }
    .ast-tbl td.c-no .arl-sub, .ast-tbl td.c-by .arl-sub, .ast-tbl td.c-gps .arl-dim { display: none; }
    .ast-tbl td.c-gps { width: auto; text-align: right; }
}
@container (max-width: 330px) {
    .ast-tbl tbody tr { grid-template-columns: 60px minmax(0, max-content) minmax(0, 1fr) auto; column-gap: .6rem; }
    .ast-thumb { width: 60px; height: 60px; }
    .ast-tbl td.c-no .ast-no { font-size: var(--text-sm); }
}

/* ================================================================ DANH SÁCH SỰ VỤ (.arl-) */
.arl-wrap { display: block; font-variant-numeric: tabular-nums; }
.arl-head { display: flex; align-items: flex-end; justify-content: space-between; gap: .6rem 1rem; flex-wrap: wrap; margin-bottom: var(--space-4); }
.arl-head > div:first-child { min-width: 0; flex: 1 1 320px; }
.arl-head .adm-sub { margin-bottom: 0; }

.arl-filters { padding: .8rem; }
/* Hàng 1: [🔍 ô tìm bo tròn ……… Tìm] [⏷ Bộ lọc] */
.arl-quick { display: flex; align-items: center; gap: .5rem; }
.arl-search {
    display: flex; align-items: center; gap: .45rem; flex: 1 1 auto; min-width: 0; height: 46px;
    padding: 0 .8rem 0 .95rem; border: var(--border-w) solid var(--field-border); border-radius: var(--radius-md); background: var(--surface-2); color: var(--text-2);
    transition: border-color var(--dur-1), background var(--dur-1);
}
.arl-search:focus-within { border-color: var(--primary); background: var(--surface-1); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 22%, transparent); }
.arl-search input { flex: 1; min-width: 0; border: none; background: transparent; color: var(--text-1); font-size: var(--text-sm); padding: 0; outline: none; }
.arl-search input::-webkit-search-cancel-button { cursor: pointer; }
.arl-sbtn { flex: 0 0 auto; height: 36px; border: none; border-radius: var(--radius-full); background: var(--primary); color: var(--on-primary); font-size: var(--text-sm); font-weight: 800; padding: 0 1rem; cursor: pointer; }
.arl-sbtn:hover { background: var(--primary-strong); }
.arl-fbtn {
    position: relative; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: .4rem; height: 46px; padding: 0 1rem;
    border-radius: var(--radius-md); border: var(--border-w) solid var(--field-border); background: var(--surface-2); color: var(--text-1); font-weight: 800; font-size: var(--text-sm); cursor: pointer;
}
.arl-fbtn:hover, .arl-fbtn.has { border-color: var(--primary); color: var(--primary-strong); background: color-mix(in srgb, var(--primary) 10%, var(--surface-1)); }
.arl-fbtn b { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 .3rem; border-radius: var(--radius-full); background: var(--primary); color: var(--on-primary); font-size: .6875rem; }
/* Điện thoại: nút Bộ lọc chỉ còn icon tròn, số điều kiện thành chấm đếm góc trên */
@media (max-width: 599px) {
    .arl-fbtn { width: 46px; padding: 0; }
    .arl-fbtn-l { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
    .arl-fbtn b { position: absolute; top: -4px; right: -4px; box-shadow: 0 0 0 2px var(--surface-1); }
}

/* Hàng 2: kỳ [7 ngày][30 ngày][90 ngày] (điện thoại chia đều full ngang). Hàng 3: CAPA [Quá hạn][Chưa giao][Của tôi] */
/* Kỳ: MỘT khối liền bo góc (kiểu segmented), không còn 3 viên thuốc rời */
.arl-periods {
    display: inline-grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 3px; padding: 3px; margin-top: .7rem;
    border: var(--border-w) solid var(--border); border-radius: var(--radius-md); background: var(--surface-2);
}
.arl-periods .arl-pill { height: 34px; padding: 0 1.1rem; border: 0; border-radius: calc(var(--radius-md) - 3px); background: transparent; font-size: var(--text-sm); }
.arl-periods .arl-pill:hover:not(.on) { background: var(--surface-1); }
.arl-periods .arl-pill.on { box-shadow: var(--elev-1); }
@media (max-width: 599px) { .arl-periods { display: grid; } }
.arl-rail { display: flex; align-items: center; gap: .45rem; margin-top: .55rem; }
.arl-actq { display: flex; align-items: center; gap: .4rem; flex: 0 0 auto; }
.arl-pill {
    flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; height: 36px; padding: 0 .9rem;
    border: var(--border-w) solid var(--border); border-radius: var(--radius-sm); background: var(--surface-1);
    color: var(--text-2); font-size: var(--text-xs); font-weight: 800; white-space: nowrap; cursor: pointer;
    transition: background var(--dur-1), color var(--dur-1), border-color var(--dur-1);
}
@media (pointer: coarse) { .arl-pill { height: 40px; } }
.arl-pill:hover:not(.on) { border-color: var(--primary); color: var(--primary-strong); }
.arl-pill:focus-visible { outline: 3px solid var(--focus-color); outline-offset: 1px; }
.arl-pill.on { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
/* Nút lọc nhanh CAPA đang chọn: CÙNG định dạng huy hiệu CAPA trên thẻ (nền nhạt + chữ/viền màu) — đỏ · vàng · xanh */
.arl-pill.act-overdue.on { background: var(--danger-bg); border-color: var(--danger-line, var(--danger)); color: var(--danger); }
.arl-pill.act-mine.on { background: var(--success-bg); border-color: var(--success-line); color: var(--success); }
.arl-pill.act-unassigned.on { background: var(--warning-bg); border-color: var(--warning-line, var(--warning)); color: var(--warning); }   /* cùng màu huy hiệu "Chưa giao" (.arl-act.none) */
/* Điện thoại: hàng CAPA chiếm HẾT bề ngang — [CAPA][Quá hạn][Chưa giao][Của tôi] chia đều */
@media (max-width: 767px) {
    .arl-actq { display: grid; grid-template-columns: auto repeat(3, minmax(0, 1fr)); width: 100%; flex: 1 1 auto; }
    .arl-actq .arl-pill { min-width: 0; padding: 0 .4rem; overflow: hidden; text-overflow: ellipsis; }
}
.arl-fpanel-h, .arl-fpanel-f { display: none; }
.arl-fmore {
    display: none; align-items: center; gap: .35rem; height: 36px; padding: 0 .7rem; flex: 0 0 auto; cursor: pointer;
    border: var(--border-w) solid var(--border); border-radius: var(--radius-sm); background: var(--surface-1);
    color: var(--text-2); font-size: var(--text-xs); font-weight: 800; white-space: nowrap;
}
.arl-fmore:hover, .arl-fmore.on { border-color: var(--primary); color: var(--primary-strong); }
.arl-fmore:focus-visible { outline: 3px solid var(--focus-color); outline-offset: 1px; }
.arl-fmore b { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 .25rem; border-radius: var(--radius-full); background: var(--primary); color: var(--on-primary); font-size: .6875rem; }
.arl-fmore > svg:last-child { transition: transform var(--dur-1); }
.arl-fmore.on > svg:last-child { transform: rotate(180deg); }
.arl-fbackdrop { display: none; }
.arl-fgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 190px), 1fr)); gap: .6rem .7rem; }
.arl-f { display: flex; flex-direction: column; min-width: 0; }
.arl-f > span { font-size: var(--text-xs); font-weight: 700; color: var(--text-2); margin-bottom: .2rem; }
.arl-f select, .arl-f input {
    width: 100%; min-height: var(--tap-min); padding: .35rem .6rem; font-size: var(--text-sm); border: var(--border-w) solid var(--field-border);
    border-radius: var(--radius-md); background-color: var(--surface-1); color: var(--text-1);
}
.arl-f select { -webkit-appearance: none; appearance: none; padding-right: 2.2rem; background-image: var(--chevron); background-repeat: no-repeat; background-position: right .6rem center; background-size: 16px; text-overflow: ellipsis; }
/* Rộng (màn ≥1280px ~ nội dung ≥1000px): bảng lọc luôn hiện ngay dưới hàng nhanh */
@media (min-width: 1280px) {
    .arl-fbtn { display: none; }
    .arl-fpanel { margin-top: .7rem; padding-top: .7rem; border-top: 1px solid var(--border-soft); }
    /* Máy tính: tìm kiếm · kỳ · CAPA trên MỘT hàng; 12 ô lọc chia đều 6 cột × 2 hàng (không còn ô trống cuối hàng) */
    .arl-filters { display: grid; grid-template-columns: minmax(260px, 1fr) auto auto; align-items: center; column-gap: .9rem; }
    .arl-filters > .arl-periods, .arl-filters > .arl-rail { margin-top: 0; }
    .arl-filters > :is(.arl-fpanel, .arl-chips, .arl-fsum) { grid-column: 1 / -1; }
    /* Bảng dropdown lọc chi tiết mặc định thu gọn; bấm nút "Bộ lọc ⌄" cạnh hàng CAPA để mở */
    .arl-filters:not(.is-open) > .arl-fpanel { display: none; }
    .arl-fmore { display: inline-flex; }
    .arl-fgrid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
/* Hẹp: nút "Bộ lọc (n)" mở bottom-sheet (điện thoại) / drawer phải (tablet) — UX-26 */
@media (max-width: 1279px) {
    .arl-fpanel { display: none; }
    .arl-fpanel.open {
        display: flex; flex-direction: column; position: fixed; z-index: 1201; left: 0; right: 0; bottom: 0; max-height: 88dvh;
        background: var(--surface-1); color: var(--text-1); border-radius: var(--radius-xl) var(--radius-xl) 0 0; box-shadow: var(--elev-3);
        padding-bottom: env(safe-area-inset-bottom);
    }
    .arl-fpanel.open .arl-fpanel-h { display: flex; align-items: center; justify-content: space-between; gap: .6rem; padding: .9rem 1rem .6rem; border-bottom: 1px solid var(--border); }
    .arl-fpanel.open .arl-fpanel-h h2 { margin: 0; font-size: var(--text-lg); font-weight: 800; }
    .arl-fpanel.open .arl-fgrid { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; padding: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); }
    .arl-fpanel.open .arl-fpanel-f { display: flex; gap: .6rem; padding: .75rem 1rem; border-top: 1px solid var(--border); background: var(--surface-2); }
    .arl-fpanel.open .arl-fpanel-f > * { flex: 1 1 0; }
    .arl-fbackdrop.open { display: block; position: fixed; inset: 0; z-index: 1200; background: var(--overlay); }
    @media (min-width: 768px) {
        .arl-fpanel.open { left: auto; top: 0; width: min(440px, 92vw); max-height: none; border-radius: var(--radius-xl) 0 0 var(--radius-xl); padding-bottom: 0; }
    }
    @media (prefers-reduced-motion: no-preference) {
        .arl-fpanel.open { animation: sheet-up var(--dur-3) var(--ease-standard); }
        @media (min-width: 768px) { .arl-fpanel.open { animation-name: sheet-left; } }
    }
}
.arl-chips { display: flex; gap: .4rem; flex-wrap: wrap; margin-top: .6rem; }
.arl-fsum { display: flex; align-items: center; gap: .5rem .8rem; flex-wrap: wrap; margin-top: .6rem; padding-top: .55rem; font-size: var(--text-sm); color: var(--text-2); border-top: 1px solid var(--border-soft); }
.arl-range { display: inline-flex; align-items: center; gap: .3rem; font-weight: 600; }
.arl-total { font-weight: 800; color: var(--primary-strong); background: color-mix(in srgb, var(--primary) 10%, var(--surface-1)); border-radius: 6px; padding: .15rem .55rem; font-size: var(--text-xs); }
/* "Xóa tất cả": nút chữ nhỏ ở cuối hàng điều kiện đang áp dụng */
.arl-clear {
    display: inline-flex; align-items: center; min-height: 32px; padding: 0 .4rem; border: 0; background: none;
    color: var(--danger); font-size: var(--text-xs); font-weight: 800; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; white-space: nowrap;
}
.arl-clear:hover { text-decoration-thickness: 2px; }
.arl-chips { align-items: center; }

.arl-skel-row { display: flex; align-items: center; gap: 1rem; padding: .55rem 0; border-bottom: 1px solid var(--border-soft); }
.arl-skel-row .skeleton-line { flex: 1; }
.arl-sk-img { display: block; width: 56px; height: 42px; border-radius: 8px; flex: 0 0 auto; }

/* Bảng: cột Ảnh + Số phiếu dính trái (có bóng mép), cột phụ ẩn dần theo bề rộng, ≤720px → thẻ */
.arl-tcard { padding: 0; overflow: hidden; container-type: inline-size; }
.arl-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--text-sm); }
.arl-table th {
    text-align: left; font-size: var(--text-xs); font-weight: 800; letter-spacing: .03em; text-transform: uppercase; color: var(--text-2);
    background: var(--surface-2); padding: .6rem .7rem; border-bottom: 1px solid var(--border); white-space: nowrap;
}
.arl-table td { padding: .55rem .7rem; border-bottom: 1px solid var(--border-soft); color: var(--text-1); vertical-align: middle; }
.arl-table td.c-img, .arl-table td.c-no { background: var(--surface-1); }
.arl-table tbody tr { cursor: pointer; }
.arl-table tbody tr:hover td { background: var(--surface-3); }
.arl-table td.num { white-space: nowrap; }
.arl-table .c-img { width: 76px; min-width: 76px; }
.arl-table .c-gps { width: 56px; text-align: center; }
.arl-table th.c-img, .arl-table td.c-img { position: sticky; left: 0; z-index: 1; }
.arl-table th.c-no, .arl-table td.c-no { position: sticky; left: 76px; z-index: 1; }
.arl-thumb { position: relative; display: grid; place-items: center; width: 60px; height: 45px; border-radius: 8px; overflow: hidden; background: var(--surface-3); color: var(--text-2); border: 1px solid var(--border); }
.arl-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.arl-tmore { position: absolute; right: 2px; bottom: 2px; font-size: .6875rem; font-weight: 800; color: #fff; background: rgba(15, 23, 42, .78); border-radius: 5px; padding: 0 .28rem; }
.arl-no { font-weight: 800; color: var(--primary-strong); text-decoration: none; white-space: nowrap; }
.arl-no:hover { text-decoration: underline; }
.arl-sub { display: block; font-size: var(--text-xs); color: var(--text-2); }
.arl-dim { color: var(--text-2); }
.arl-code { font-weight: 800; font-size: var(--text-xs); color: var(--text-1s); }
.arl-gps { display: inline-flex; align-items: center; gap: .15rem; color: var(--success); font-size: var(--text-xs); font-weight: 800; }
@container (max-width: 1180px) { .arl-table .c-uabc, .arl-table .c-gps { display: none; } }
@container (max-width: 940px) { .arl-table .c-risk, .arl-table .c-by { display: none; } }
@container (max-width: 720px) {
    .arl-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    .arl-table, .arl-table tbody { display: block; }
    /* Mỗi sự vụ = 1 thẻ 4 hàng, ảnh vuông 76px bên trái:
         [ảnh] Số phiếu                   Mức
         [   ] Ngày giờ                   Loại
         [   ] Khu vực                  Người ghi nhận
         [   ] Trạng thái                 CAPA            */
    /* Mọi cỡ điện thoại, cỡ chữ như các trang khác (nhãn không bị cắt kể cả tiếng Anh):
         Hàng 1: Số phiếu [Loại]  · Hàng 2: Ngày giờ … Mức · Hàng 3: Khu vực … Người ghi nhận · Hàng 4: Trạng thái … 📍 GPS  CAPA */
    .arl-table tbody tr {
        position: relative; display: grid; grid-template-columns: 76px minmax(0, max-content) minmax(0, 1fr) auto;
        grid-template-areas: "img no kd gps" "img at at lv" "img area area by" "img st st act";
        column-gap: .8rem; row-gap: .28rem; align-items: center;
        padding: .85rem .9rem; border-bottom: 1px solid var(--border-soft); background: var(--surface-1);
    }
    .arl-table tbody tr:last-child { border-bottom: 0; }
    .arl-table tbody tr:hover { background: var(--surface-2); }
    .arl-table td { display: block; padding: 0; border: 0; background: transparent !important; min-width: 0; box-shadow: none !important; position: static !important; }
    .arl-table td.c-img { grid-area: img; align-self: start; width: auto; min-width: 0; }
    .arl-table td.c-no { display: contents; }   /* số phiếu và nhãn loại thành 2 ô riêng của lưới */
    .arl-table td.c-no .arl-no { grid-area: no; min-width: 0; }
    .arl-table td.c-no .kind-tag { grid-area: kd; justify-self: start; margin-left: -.4rem; white-space: nowrap; }   /* sát bên phải số phiếu */
    .arl-table td.c-lv { grid-area: lv; justify-self: end; }
    .arl-table td.c-at { grid-area: at; font-size: var(--text-xs); color: var(--text-2); font-variant-numeric: tabular-nums; }
    .arl-table td.c-at .arl-sub { display: inline; margin-left: .3rem; font-size: inherit; }
    .arl-table td.c-area { grid-area: area; font-size: var(--text-xs); color: var(--text-1s); font-weight: 600; overflow-wrap: anywhere; }   /* tên khu vực dài được xuống dòng — hiện đủ */
    .arl-table td.c-by { display: block; grid-area: by; justify-self: end; max-width: 46vw; font-size: var(--text-xs); color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .arl-table td.c-st { grid-area: st; justify-self: start; margin-top: .15rem; }
    .arl-table td.c-by .arl-sub { display: none; }
    .arl-table td.c-no .arl-sub { display: none; }
    .arl-no { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: var(--text-md); }
    .arl-no::after { content: ""; position: absolute; inset: 0; }   /* cả thẻ bấm được */
    .arl-thumb { width: 76px; height: 76px; border-radius: 10px; }
    /* Icon ghim GPS ở hàng SỐ PHIẾU, sát phải (cột GPS của bảng vốn bị ẩn khi hẹp) */
    .arl-table td.c-gps { display: block; grid-area: gps; justify-self: end; width: auto; text-align: right; white-space: nowrap; }
    .arl-table td.c-gps .arl-dim { display: none; }
    .arl-table td.c-gps .arl-gps svg { width: 16px; height: 16px; }   /* 30/09/2026: chỉ icon ghim (bỏ chữ "GPS"), sát phải CÙNG HÀNG số phiếu */
}
/* Máy rất nhỏ (~320px): ảnh 60px + số phiếu chữ nhỏ hơn để không bị cắt */
@container (max-width: 330px) {
    .arl-table tbody tr { grid-template-columns: 60px minmax(0, max-content) minmax(0, 1fr) auto; column-gap: .6rem; padding: .75rem .7rem; }
    .arl-thumb { width: 60px; height: 60px; }
    .arl-no { font-size: var(--text-sm); }
}

/* Lưới ảnh */
/* Lưới ảnh: điện thoại/tablet 2 ô mỗi hàng; máy tính (≥1280px) 4 ô mỗi hàng, 8 ô/trang = 2 hàng đủ */
.arl-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem; max-width: 820px; margin-bottom: var(--stack); }
@media (min-width: 1280px) { .arl-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: none; } }
@media (max-width: 479px) { .arl-grid { gap: .6rem; } .arl-cmeta.opt { display: none; } }
.arl-card {
    display: flex; flex-direction: column; min-width: 0; text-decoration: none; color: inherit; background: var(--surface-1);
    border: var(--border-w) solid var(--border); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--elev-1);
    transition: transform var(--dur-1), box-shadow var(--dur-1);
}
.arl-card:hover { transform: translateY(-2px); box-shadow: var(--elev-2); }
/* Khung ảnh CỐ ĐỊNH 4:3 cho mọi thẻ: ảnh dọc/ngang/vỡ đều không kéo giãn khung (trước: thẻ là flex cột nên
   kích thước gốc của ảnh dọc đẩy khung cao ra ⇒ các thẻ lệch nhau). Ảnh nằm tuyệt đối, cắt vừa khung. */
.arl-cover { position: relative; display: block; flex: 0 0 auto; aspect-ratio: 4 / 3; min-height: 0; overflow: hidden; background: var(--surface-3); }
.arl-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; color: transparent; font-size: 0; }
.arl-noimg { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .3rem; color: var(--text-2); }
.arl-noimg i { font-style: normal; font-size: var(--text-xs); font-weight: 600; }
.arl-more { position: absolute; right: 8px; bottom: 8px; font-size: var(--text-xs); font-weight: 800; color: #fff; background: rgba(15, 23, 42, .78); border-radius: var(--radius-full); padding: .12rem .5rem; }
.arl-kind { position: absolute; left: 8px; top: 8px; font-size: var(--text-xs); font-weight: 800; color: #fff; border-radius: 6px; padding: .12rem .45rem; background: rgba(30, 58, 110, .92); }
.arl-kind.inc { background: rgba(158, 31, 31, .92); }
.arl-cpill { position: absolute; right: 8px; top: 8px; }
/* Nhãn mức nằm ĐÈ LÊN ẢNH: nền màu bán trong suốt + làm mờ phần ảnh phía sau + chữ trắng — không đổ bóng.
   (Nền nhạt mặc định của .pill gần như trong suốt ở giao diện tối nên chữ chìm vào ảnh.) Màu cố định cho cả Sáng / Tối. */
.pill.arl-cpill { color: #fff; border-color: rgba(255, 255, 255, .28); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.pill.arl-cpill.lv-hi   { background: rgba(198, 40, 40, .7); }
.pill.arl-cpill.lv-mid  { background: rgba(180, 83, 9, .7); }
.pill.arl-cpill.lv-lo,
.pill.arl-cpill.lv-safe { background: rgba(30, 122, 70, .7); }
.pill.arl-cpill.lv-none { background: rgba(71, 85, 105, .68); }
.arl-cbody { display: flex; flex-direction: column; gap: .2rem; min-width: 0; padding: .7rem .8rem .75rem; }
.arl-cno { font-weight: 800; color: var(--primary-strong); font-size: var(--text-md); overflow-wrap: anywhere; }
.arl-cdesc { font-size: var(--text-sm); color: var(--text-1s); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.8em; }
.arl-cmeta { display: flex; align-items: center; gap: .3rem; min-width: 0; font-size: var(--text-xs); color: var(--text-2); }
.arl-cmeta > :last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Chân thẻ: Trạng thái · CAPA · GPS LUÔN một hàng — nhãn co lại (…) chứ không xuống dòng; GPS dạt phải */
.arl-cfoot { display: flex; align-items: center; flex-wrap: nowrap; gap: .3rem; margin-top: .3rem; min-width: 0; }
.arl-cfoot > * { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 479px) {
    .arl-cfoot { gap: .2rem; }
    .arl-cfoot .status, .arl-cfoot .arl-act { font-size: .6875rem; padding-inline: .4rem; }
}
/* Nhãn "📍 GPS" cùng hàng số phiếu, SÁT PHẢI (nhường chỗ cho 2 nhãn ở chân thẻ) */
.arl-cno { display: flex; align-items: center; gap: .3rem; min-width: 0; }
.arl-cno > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }   /* số phiếu KHÔNG xuống dòng */
@media (max-width: 420px) {
    .arl-cno { font-size: var(--text-sm); gap: .25rem; }
    .arl-cno .arl-gps { font-size: .625rem; gap: .1rem; }
    .arl-cno .arl-gps svg { width: 11px; height: 11px; }
}
@media (max-width: 340px) { .arl-cno .arl-gps svg { display: none; } }   /* máy rất nhỏ: chỉ còn chữ "GPS" */
.arl-cno .arl-gps { flex: 0 0 auto; margin-left: auto; font-size: .6875rem; line-height: 1.4; }   /* chỉ icon + chữ, không nền */

/* Phân trang: nút 44px, ≤480px chỉ còn ‹ Trang x/y › */
.arl-pager { display: flex; align-items: center; justify-content: space-between; gap: .6rem 1rem; flex-wrap: wrap; margin-top: .9rem; font-size: var(--text-sm); color: var(--text-2); }
.arl-pbtns { display: flex; align-items: center; gap: .25rem; flex-wrap: wrap; }
.arl-pb {
    display: inline-grid; place-items: center; min-width: var(--tap-min); height: var(--tap-min); padding: 0 .4rem;
    border: var(--border-w) solid var(--border); border-radius: var(--radius-md); background: var(--surface-1); color: var(--text-1); font-weight: 800;
}
.arl-pb.on { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.arl-pb:disabled { opacity: .45; cursor: default; }
.arl-pgap { padding: 0 .3rem; }
.arl-pcur { display: none; font-weight: 800; color: var(--text-1); padding: 0 .4rem; }
.arl-psize { display: inline-flex; align-items: center; gap: .4rem; }
.arl-psize select { min-height: var(--tap-min); border: var(--border-w) solid var(--field-border); border-radius: var(--radius-md); background: var(--surface-1); color: var(--text-1); padding: 0 .5rem; }
@media (max-width: 480px) {
    .arl-pager { justify-content: center; }
    .arl-pinfo { flex: 1 1 100%; text-align: center; }
    .arl-pbtns .arl-pnum, .arl-pgap { display: none; }
    .arl-pcur { display: inline-block; }
}

/* ================================================================ CHI TIẾT SỰ VỤ (.ard-) */
.ard-wrap { display: block; font-variant-numeric: tabular-nums; container: ard / inline-size; }
.ard-bar { display: flex; align-items: center; justify-content: space-between; gap: .6rem 1rem; flex-wrap: wrap; margin-bottom: .9rem; }
.ard-back { display: inline-flex; align-items: center; gap: .3rem; min-height: var(--tap-min); color: var(--primary-strong); font-weight: 800; text-decoration: none; font-size: var(--text-sm); }
.ard-back svg { transform: rotate(180deg); }
.ard-back:hover { text-decoration: underline; }
.ard-bar-r { display: flex; gap: .45rem; }
.ard-tool {
    display: inline-flex; align-items: center; justify-content: center; gap: .35rem; min-height: var(--tap-min); min-width: var(--tap-min); padding: .35rem .8rem;
    border: var(--border-w) solid var(--border); border-radius: var(--radius-md); background: var(--surface-1); color: var(--text-1s);
    font-size: var(--text-sm); font-weight: 800; text-decoration: none; cursor: pointer;
}
.ard-tool:hover { color: var(--primary-strong); background: var(--surface-3); }
.ard-tool-s { display: none; }
@container ard (max-width: 479px) {
    .ard-tool .ard-tool-t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .ard-tool { padding: 0; }
    .ard-tool:has(.ard-tool-s) { padding: 0 .8rem; }   /* điện thoại: nút phiếu in = icon + chữ ngắn "PDF" */
    .ard-tool-s { display: inline; }
}

.ard-head-top { display: flex; align-items: center; gap: .85rem; flex-wrap: wrap; }
.ard-ic { width: 48px; height: 48px; border-radius: 12px; display: grid; place-items: center; background: var(--info-bg); color: var(--kind-obs); flex: 0 0 auto; }
.ard-ic.inc { background: var(--danger-bg); color: var(--kind-inc); }
.ard-title { min-width: 0; flex: 1 1 200px; }
.ard-no { margin: 0; font-size: var(--text-2xl); font-weight: 800; color: var(--text-1); line-height: 1.15; overflow-wrap: anywhere; }
.ard-kind { font-size: var(--text-sm); color: var(--text-2); font-weight: 600; }
.ard-badges { display: flex; gap: .4rem; flex-wrap: wrap; }
.ard-headline { margin-top: .6rem; font-size: var(--text-lg); font-weight: 700; color: var(--text-1); overflow-wrap: anywhere; }
/* Thông tin chính: mỗi dòng [icon] Nhãn ……… Giá trị (căn phải); rộng thì 2–3 cột dòng */
.ard-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); column-gap: 1.6rem; margin-top: .9rem; padding-top: .3rem; border-top: 1px solid var(--border-soft); }
.ard-m { display: grid; grid-template-columns: 18px auto minmax(0, 1fr); align-items: start; gap: .55rem; padding: .6rem 0; border-bottom: 1px dashed var(--border-soft); min-width: 0; }
.ard-m > svg { color: var(--text-2); margin-top: .1rem; }
.ard-m span { font-size: var(--text-sm); color: var(--text-2); white-space: nowrap; }
.ard-m b { text-align: right; font-size: var(--text-sm); font-weight: 700; color: var(--text-1); overflow-wrap: anywhere; }
.ard-m i { display: block; font-style: normal; font-weight: 500; font-size: var(--text-xs); color: var(--text-2); overflow-wrap: anywhere; }
.ard-gps { align-self: center; font-size: var(--text-xs); }
/* Tiêu đề thẻ đầu: số phiếu + loại, nhãn trạng thái/mức/GPS xuống hàng dưới trên điện thoại */
@container ard (max-width: 560px) {
    .ard-head-top { align-items: flex-start; }
    .ard-ic { width: 44px; height: 44px; }
    .ard-no { font-size: var(--text-xl); }
    .ard-badges { flex-basis: 100%; }
    .ard-wrap .ard-none { padding: .6rem .5rem; flex-direction: row; justify-content: center; }   /* .ard-wrap: thắng rule gốc khai báo sau */
}

.ard-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--stack); align-items: start; }
@container ard (min-width: 1080px) {
    .ard-grid { grid-template-columns: minmax(0, 1fr) clamp(340px, 32cqi, 440px); }
    /* Máy tính: thông tin chính = 5 cột đều, nhãn (icon + chữ) ở trên, giá trị canh trái ngay dưới — không còn nhãn trái / giá trị dạt phải cách xa nhau */
    .ard-meta { grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: 1.4rem; padding-top: .9rem; }
    .ard-m { grid-template-columns: 18px minmax(0, 1fr); gap: .25rem .5rem; padding: 0; border-bottom: 0; }
    .ard-m b { grid-column: 2; text-align: left; font-size: var(--text-md); }
    /* Thẻ "không có ảnh" gọn 1 hàng thay vì khối cao trống */
    .ard-wrap .ard-none { padding: .4rem .5rem; flex-direction: row; justify-content: flex-start; }
}
.ard-main, .ard-side { min-width: 0; }
.ard-main > .adm-card, .ard-side > .adm-card { container-type: inline-size; }
.ard-h { display: flex; align-items: center; gap: .45rem; margin: 0 0 .8rem; font-size: var(--text-md); font-weight: 800; color: var(--text-1); }
.ard-h svg { color: var(--primary-strong); }
.ard-h small { margin-left: auto; font-size: var(--text-xs); color: var(--text-2); font-weight: 800; }
.ard-none { display: flex; flex-direction: column; align-items: center; gap: .4rem; padding: 1.4rem .5rem; color: var(--text-2); font-size: var(--text-sm); text-align: center; }
.ard-sk-img { height: 280px; border-radius: 10px; }
.ard-dim { color: var(--text-2); }
.ard-note { margin: 0; font-size: var(--text-sm); line-height: 1.55; }
.ard-sub { display: block; font-size: var(--text-xs); color: var(--text-2); overflow-wrap: anywhere; }
.ard-nw { white-space: nowrap; }
.ard-code { display: inline-block; font-size: var(--text-xs); font-weight: 800; color: var(--text-1s); background: var(--surface-2); border: 1px solid var(--border); border-radius: 5px; padding: 0 .3rem; margin-left: .2rem; }

.ard-hero { display: block; width: 100%; padding: 0; border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; background: #0f172a; cursor: zoom-in; }
.ard-hero img { display: block; width: 100%; max-height: 460px; object-fit: contain; }
@container (max-width: 479px) { .ard-hero img { aspect-ratio: 4 / 3; object-fit: cover; max-height: none; } }
/* 01/10/2026: tối đa 4 ô chia đều bề ngang (không cuộn ngang); ô thứ 4 phủ mờ "+n" khi còn nhiều ảnh hơn */
.ard-thumbs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .45rem; margin-top: .6rem; }
.ard-th { position: relative; width: 100%; height: auto; aspect-ratio: 4 / 3; padding: 0; border: 2px solid transparent; border-radius: 8px; overflow: hidden; cursor: pointer; background: var(--surface-3); scroll-snap-align: start; }
.ard-th.on { border-color: var(--accent); }
.ard-th img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ard-th-more { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(15, 23, 42, .58); color: #fff; font-size: var(--text-lg); font-weight: 800; letter-spacing: .02em; }
.ard-th.more:hover .ard-th-more { background: rgba(15, 23, 42, .7); }
.ard-imgmeta { display: flex; align-items: center; gap: .3rem .8rem; flex-wrap: wrap; margin-top: .55rem; font-size: var(--text-xs); color: var(--text-2); }
.ard-imgmeta span { min-width: 0; overflow-wrap: anywhere; }
.ard-imgmeta span:first-child { font-weight: 700; color: var(--text-1); }
.ard-dl { margin-left: auto; display: inline-flex; align-items: center; gap: .25rem; min-height: var(--tap-min); color: var(--primary-strong); font-weight: 800; text-decoration: none; }
.ard-files { list-style: none; margin: .8rem 0 0; padding: .6rem 0 0; border-top: 1px solid var(--border-soft); }
.ard-files li { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; font-size: var(--text-sm); padding: .2rem 0; min-width: 0; }
.ard-files a { color: var(--primary-strong); font-weight: 700; overflow-wrap: anywhere; min-width: 0; }
.ard-files span { color: var(--text-2); font-size: var(--text-xs); }

.ard-txt-l { margin: .8rem 0 .25rem; font-size: var(--text-xs); font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--text-2); }
.ard-txt-l:first-of-type { margin-top: 0; }
.ard-txt { white-space: pre-wrap; font-size: var(--text-sm); line-height: 1.6; color: var(--text-1); overflow-wrap: anywhere; }

.ard-kv { display: grid; grid-template-columns: minmax(120px, 32%) minmax(0, 1fr); gap: .5rem 1rem; margin: 0; }
.ard-kv dt { font-size: var(--text-sm); color: var(--text-2); }
.ard-kv dd { margin: 0; font-size: var(--text-sm); font-weight: 600; color: var(--text-1); overflow-wrap: anywhere; }
@container (max-width: 420px) { .ard-kv { grid-template-columns: minmax(0, 1fr); gap: .1rem; } .ard-kv dd { margin-bottom: .55rem; } }
/* Thẻ rộng (máy tính): 2 cặp nhãn–giá trị mỗi hàng, nhãn sát giá trị */
@container (min-width: 700px) { .ard-kv { grid-template-columns: minmax(130px, max-content) minmax(0, 1fr) minmax(130px, max-content) minmax(0, 1fr); gap: .65rem 1.2rem; } }

.ard-tscroll { margin: 0 calc(-1 * clamp(.9rem, .8rem + .4vw, 1.2rem)); padding: 0 clamp(.9rem, .8rem + .4vw, 1.2rem); }
.ard-tbl { width: 100%; min-width: 560px; border-collapse: collapse; font-size: var(--text-sm); }
.ard-tbl th { text-align: left; font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .03em; color: var(--text-2); padding: .45rem .5rem; border-bottom: 1px solid var(--border); background: var(--surface-2); white-space: nowrap; }
.ard-tbl td { padding: .45rem .5rem; border-bottom: 1px solid var(--border-soft); vertical-align: top; color: var(--text-1); overflow-wrap: anywhere; }
.ard-wit { list-style: none; margin: 0; padding: 0; }
.ard-wit li { padding: .45rem 0; border-bottom: 1px solid var(--border-soft); }

/* ---- Timeline dọc dùng chung (Quy trình xử lý + Track & Trace) — kiểu MUI Timeline / Ant Design Timeline:
   cột trái = thời điểm <time> (TimelineOppositeContent), giữa = chấm + đường nối (dừng ở chấm cuối), phải = nội dung.
   Màu giữ như cũ: quy trình = xanh lá (xong) / xám (chưa); Track & Trace = chấm xanh dương, đường xám. ---- */
.tl { list-style: none; margin: 0 0 .4rem; padding: 0; }
.tl-item { display: grid; grid-template-columns: 78px 16px minmax(0, 1fr); column-gap: .6rem; }
.tl-opp { padding-top: 1px; text-align: right; font-size: var(--text-xs); line-height: 1.35; color: var(--text-2); font-variant-numeric: tabular-nums; }
.tl-opp time { display: flex; flex-direction: column; }
.tl-opp time span:last-child { font-weight: 700; color: var(--text-1); }
.tl-none { color: var(--text-3, var(--text-2)); }
.tl-sep { display: flex; flex-direction: column; align-items: center; }
.tl-dot { flex: 0 0 auto; width: 14px; height: 14px; margin-top: 2px; border-radius: 50%; border: 2px solid var(--border-strong); background: var(--surface-1); }
.tl-conn { flex: 1 1 auto; width: 2px; min-height: 14px; margin: 3px 0; border-radius: 1px; background: var(--border); }
.tl-body { min-width: 0; padding-bottom: 1rem; }
.tl-item:last-child .tl-body { padding-bottom: 0; }
.tl-body > b { display: block; font-size: var(--text-sm); color: var(--text-1); }
/* Quy trình xử lý */
.tl-steps .is-done .tl-dot { border-color: var(--success); background: var(--success); }
.tl-steps .is-done .tl-conn { background: var(--success-line); }
.tl-steps .is-current .tl-dot { border-color: var(--success); border-top-color: transparent; background: transparent; animation: tl-spin .9s linear infinite; }
.tl-steps .is-current .tl-body > b { color: var(--success); }
.tl-steps .is-pending .tl-body > b, .tl-steps .is-skipped .tl-body > b { color: var(--text-2); }
.tl-steps .is-skipped .tl-dot { border-style: dashed; }
.tl-steps .is-skipped .tl-conn { background: var(--success-line); }   /* dòng chảy vẫn đi tiếp tới bước đã xong phía sau */
@keyframes tl-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .tl-steps .is-current .tl-dot { animation: none; border-top-color: var(--success); border-style: dashed; } }
/* Track & Trace */
.tl-trace { margin: 0; }
.tl-trace .tl-dot { width: 12px; height: 12px; margin-top: 3px; border: 0; background: var(--primary); }
@media (max-width: 359px) { .tl-item { grid-template-columns: 66px 14px minmax(0, 1fr); column-gap: .45rem; } }

/* 30/09/2026: 2 mức (AI đánh giá · đã lưu) thành 2 ô đều nhau; dòng thời điểm/liên kết là chú thích nhỏ, không còn khung màu */
.ard-ai-top { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: .6rem; margin-bottom: .7rem; }
.ard-ai-lv { display: flex; flex-direction: column; justify-content: space-between; gap: .4rem; padding: .6rem .7rem; background: var(--surface-2); border: 1px solid var(--border-soft); border-radius: var(--radius-md); }
.ard-ai-lv > b { align-self: flex-start; }
.ard-ai-lv > span { font-size: var(--text-xs); font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--text-2); }
.ard-ai-when { margin: 0 0 .3rem; font-size: var(--text-xs); color: var(--text-2); }
.ard-ai-err { display: block; color: var(--danger); font-size: var(--text-xs); overflow-wrap: anywhere; }
.ard-ai-inf { display: flex; gap: .35rem; margin: 0 0 .6rem; font-size: var(--text-xs); color: var(--warning); background: var(--warning-bg); border-radius: var(--radius-sm); padding: .45rem .6rem; }
.ard-cmp { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.ard-cmp th { text-align: left; font-size: var(--text-xs); text-transform: uppercase; color: var(--text-2); padding: .35rem .3rem; border-bottom: 1px solid var(--border); }
.ard-cmp td { padding: .4rem .3rem; border-bottom: 1px solid var(--border-soft); color: var(--text-1); vertical-align: top; overflow-wrap: anywhere; }
.ard-cmp td.k { color: var(--text-2); white-space: nowrap; padding-right: .7rem; }   /* nhãn trường 1 dòng (không gãy "Nhóm rủi / ro") */
.ard-cmp tbody tr:last-child td { border-bottom: 0; }
.ard-cmp td.m { width: 26px; text-align: center; font-weight: 800; }
.ard-cmp td.m.same { color: var(--success); }
.ard-cmp td.m.diff { color: var(--warning); }
@container (max-width: 360px) {
    .ard-cmp thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    .ard-cmp, .ard-cmp tbody { display: block; }
    .ard-cmp tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 26px; gap: .1rem .5rem; padding: .45rem 0; border-bottom: 1px solid var(--border-soft); }
    .ard-cmp td { border: 0; padding: 0; }
    .ard-cmp td.k { grid-column: 1 / -1; font-weight: 800; font-size: var(--text-xs); text-transform: uppercase; }
}
.ard-ai-desc { font-size: var(--text-sm); background: var(--surface-2); border: 1px solid var(--border-soft); border-radius: var(--radius-sm); padding: .5rem .6rem; }
.ard-ailog { list-style: none; margin: 0; padding: 0; font-size: var(--text-xs); }
.ard-ailog li { display: flex; gap: .5rem; align-items: center; padding: .25rem 0; color: var(--text-2); flex-wrap: wrap; }
.ard-ailog .ok { color: var(--success); font-weight: 800; }
.ard-ailog .err { color: var(--danger); font-weight: 800; }

.ard-loc { display: flex; align-items: flex-start; gap: .35rem; font-size: var(--text-sm); border-radius: var(--radius-sm); padding: .45rem .6rem; margin-bottom: .6rem; overflow-wrap: anywhere; }
.ard-loc.exact { background: var(--success-bg); color: var(--success); }
.ard-loc.approx { background: var(--warning-bg); color: var(--warning); }
.ard-map { position: relative; isolation: isolate; height: clamp(220px, 40vw, 300px); border-radius: var(--radius-md); overflow: hidden; border: 1px solid var(--border); background: var(--surface-3); }

.ard-tl-t { font-size: var(--text-sm); color: var(--text-1s); overflow-wrap: anywhere; }

/* Lightbox = dialog (role=dialog, aria-modal, Esc/←/→, focus nút Đóng) — UX-25 */
.ard-lb {
    position: fixed; inset: 0; z-index: 1500; display: flex; align-items: center; justify-content: center;
    padding: max(1rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right)) max(1rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left));
    background: rgba(5, 10, 20, .55);   /* nhìn xuyên được trang phía sau */
    -webkit-backdrop-filter: blur(6px) saturate(1.1); backdrop-filter: blur(6px) saturate(1.1);
}
.ard-lb-box { display: flex; flex-direction: column; width: 100%; max-width: 1200px; max-height: 100%; background: transparent; border-radius: var(--radius-lg); overflow: hidden; outline: none; }   /* khung trong suốt — chỉ ảnh + thanh nút nổi trên nền mờ */
/* Ảnh chỉ chiếm đúng kích thước hình (không phủ vùng tối xung quanh) ⇒ bấm vùng tối là đóng được; margin:auto canh giữa */
.ard-lb-box > img { display: block; width: auto; height: auto; max-width: 100%; min-height: 0; flex: 0 1 auto; margin: auto; max-height: calc(100dvh - 120px); object-fit: contain; touch-action: pinch-zoom; cursor: default; }
.ard-lb { cursor: zoom-out; }
.ard-lb-bar { cursor: default; }
.ard-lb-bar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .5rem 1rem; padding: .55rem .8rem; color: #e2e8f0; font-size: var(--text-sm);
    background: rgba(15, 23, 42, .72); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.ard-lb-box > img { filter: drop-shadow(0 10px 30px rgba(0, 0, 0, .45)); }
/* Người dùng bật "giảm trong suốt" ⇒ nền đặc như cũ */
@media (prefers-reduced-transparency: reduce) {
    .ard-lb { background: rgba(5, 10, 20, .92); -webkit-backdrop-filter: none; backdrop-filter: none; }
    .ard-lb-bar { background: #0f172a; }
}
.ard-lb-bar > span { min-width: 0; overflow-wrap: anywhere; }
.ard-lb-act { display: flex; flex-wrap: wrap; gap: .35rem; margin-left: auto; }
.ard-lb-act button, .ard-lb-act a {
    display: inline-flex; align-items: center; justify-content: center; gap: .3rem; min-width: var(--tap-min); height: var(--tap-min); padding: 0 .7rem;
    border: none; border-radius: var(--radius-md); background: rgba(255, 255, 255, .14); color: #fff; font-weight: 800; text-decoration: none; cursor: pointer;
}
.ard-lb-act button:hover, .ard-lb-act a:hover { background: rgba(255, 255, 255, .26); }
.ard-lb-act :focus-visible { outline: 3px solid var(--gold-400); outline-offset: 2px; }
/* Máy tính/tablet: khung ôm sát ảnh — thanh nút rộng ĐÚNG bằng ảnh (ảnh dọc không còn thanh dài thò ra 2 bên) */
@media (min-width: 768px) {
    .ard-lb-box { width: fit-content; min-width: min(100%, 360px); }
    .ard-lb-box > img { margin: 0 auto; }
}
@media (max-width: 767px) {
    .ard-lb { padding: 0; }
    .ard-lb-box { height: 100%; max-height: none; border-radius: 0; }
    .ard-lb-box > img { max-height: calc(100dvh - 72px - env(safe-area-inset-bottom)); }
    .ard-lb-bar { padding-bottom: calc(.55rem + env(safe-area-inset-bottom)); }
    .ard-lb-act button, .ard-lb-act a { height: 48px; min-width: 48px; }
}

/* In: bỏ khung quản trị, nút, bóng đổ; giữ nội dung một cột */
@media print {
    .adm-shell .adm-side, .adm-shell .adm-top, .adm-shell .adm-bnav, .ard-noprint, .ard-lb, .ard-map, #components-reconnect-modal { display: none !important; }
    .adm-shell, .adm-shell .adm-body { background: #fff !important; padding: 0 !important; max-width: none !important; }
    .ard-grid { grid-template-columns: minmax(0, 1fr) !important; }
    .ard-side { position: static !important; }
    .adm-shell .adm-card { box-shadow: none !important; break-inside: avoid; border-color: #ccc; }
    .ard-hero { background: #fff; border: none; }
    .ard-hero img { max-height: 320px; }
}

/* ============================================================================
   Đợt 9 — GIAO XỬ LÝ (CAPA) + XUẤT PDF/EXCEL
   Tiền tố: .rcp- khối CAPA trong chi tiết sự vụ · .ast-capa KPI CAPA dashboard · .arl-act* cột/lọc CAPA danh sách ·
   .rpt- phiếu in A4 · .fma- "Việc được giao" (mobile, trong .field-shell). Chỉ token v2 của app.css (sáng/tối/
   ngoài trời/ca đêm tự đổi); lưới auto-fit + container query — 360px → 1920px không tràn ngang.
   ============================================================================ */
.adm-shell .adm-btn:disabled { opacity: .55; cursor: default; }
.adm-shell .adm-btn.danger { background: var(--danger); color: #fff; }
.adm-shell .adm-btn.danger:hover { filter: brightness(.94); }
:root[data-theme="dark"] .adm-shell .adm-btn.danger { color: #1a0a08; }

/* ---------- Chi tiết sự vụ: trạng thái liên kết AI + chất lượng GPS ---------- */
.ard-ai-ok { display: flex; align-items: center; gap: .35rem; margin: 0 0 .7rem; font-size: var(--text-xs); color: var(--success); }
.ard-gpsq { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr)); gap: .5rem .9rem; margin: .7rem 0 0; padding-top: .6rem; border-top: 1px solid var(--border-soft); }
.ard-gpsq > div { min-width: 0; }
.ard-gpsq > div.w { grid-column: 1 / -1; }
.ard-gpsq dt { font-size: var(--text-xs); font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--text-2); }
.ard-gpsq dd { margin: 0; font-size: var(--text-sm); font-weight: 600; color: var(--text-1); overflow-wrap: anywhere; }
.ard-gps-st { display: inline-block; padding: .05rem .5rem; border-radius: var(--radius-full); font-size: var(--text-xs); font-weight: 800; background: var(--surface-2); color: var(--text-1s); }
.ard-gps-st.ok { background: var(--success-bg); color: var(--success); }
.ard-gps-st.warn { background: var(--warning-bg); color: var(--warning); }

/* ---------- Khối CAPA (.rcp-) ---------- */
.rcp { container-type: inline-size; }
.rcp-head { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem .8rem; margin-bottom: .6rem; }
.rcp-head .ard-h { margin: 0; flex: 1 1 220px; min-width: 0; }
.rcp-head .ard-h small { margin-left: .35rem; }
.rcp-sum { display: flex; flex-wrap: wrap; gap: .35rem; }
.rcp-sum-i { font-size: var(--text-xs); font-weight: 700; color: var(--text-1s); background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-full); padding: .15rem .6rem; white-space: nowrap; }
.rcp-sum-i.over { color: var(--danger); background: var(--danger-bg); border-color: var(--danger-line); }
.rcp-sum-i.done { color: var(--success); background: var(--success-bg); border-color: var(--success-line); }
.rcp-add { flex: 0 0 auto; }
.rcp-msg { margin: 0 0 .7rem; padding: .55rem .75rem; border-radius: var(--radius-md); font-size: var(--text-sm); border: 1px solid transparent; overflow-wrap: anywhere; }
.rcp-msg.ok { background: var(--success-bg); color: var(--success); border-color: var(--success-line); }
.rcp-msg.err { background: var(--danger-bg); color: var(--danger); border-color: var(--danger-line); }

.rcp-form, .rcp-panel { margin: 0 0 .9rem; padding: .8rem; border: 1px dashed var(--border-strong); border-radius: var(--radius-md); background: var(--surface-2); }
.rcp-form-t { margin: 0 0 .6rem; font-weight: 800; font-size: var(--text-sm); color: var(--text-1); }
.rcp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: .6rem .75rem; }
.rcp-f { display: flex; flex-direction: column; min-width: 0; }
.rcp-f-wide { grid-column: 1 / -1; }
.rcp-f > span { font-size: var(--text-xs); font-weight: 700; color: var(--text-2); margin-bottom: .2rem; }
.rcp-f > span i { font-style: normal; color: var(--danger); }
.rcp-f select, .rcp-f input, .rcp-f textarea {
    width: 100%; min-height: var(--tap-min); padding: .45rem .6rem; font: inherit; font-size: max(16px, var(--text-sm));
    border: var(--border-w) solid var(--field-border); border-radius: var(--radius-md); background-color: var(--surface-1); color: var(--text-1);
}
.rcp-f select { -webkit-appearance: none; appearance: none; padding-right: 2.2rem; background-image: var(--chevron); background-repeat: no-repeat; background-position: right .6rem center; background-size: 16px; text-overflow: ellipsis; }
.rcp-f textarea { resize: vertical; min-height: 72px; field-sizing: content; max-height: 40vh; }
.rcp-f [aria-invalid="true"] { border-color: var(--danger); outline: 2px solid var(--danger-line); }
/* Dưới ô Mô tả hành động: lỗi cụ thể (trái) + bộ đếm ký tự (phải) trên cùng một hàng */
.rcp-fmeta { display: flex; align-items: baseline; gap: .75rem; margin-top: .3rem; }
.rcp-err { flex: 1 1 auto; min-width: 0; font-size: var(--text-xs); font-weight: 700; color: var(--danger); }
.rcp-count { margin-left: auto; flex: 0 0 auto; white-space: nowrap; font-size: var(--text-xs); font-weight: 700; color: var(--text-2); font-variant-numeric: tabular-nums; }
.rcp-count.ok { color: var(--success); }
.rcp-f select:focus-visible, .rcp-f input:focus-visible, .rcp-f textarea:focus-visible { outline: 3px solid var(--focus-color); outline-offset: 1px; }
@media (min-width: 1024px) { .rcp-f select, .rcp-f input, .rcp-f textarea { font-size: var(--text-sm); } }
.rcp-form-act { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .5rem; margin-top: .7rem; }
.rcp-check { display: flex; align-items: flex-start; gap: .5rem; margin: .6rem 0; font-size: var(--text-sm); color: var(--text-1); min-height: var(--tap-min); }
.rcp-check input { width: 20px; height: 20px; margin-top: 2px; flex: 0 0 auto; accent-color: var(--danger); }
.rcp-warn { display: flex; gap: .4rem; align-items: flex-start; margin-top: .6rem; padding: .5rem .65rem; border-radius: var(--radius-sm); background: var(--warning-bg); color: var(--warning); font-size: var(--text-sm); }

.rcp-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: .7rem; }
@container (min-width: 900px) { .rcp-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Máy tính: số thẻ LẺ thì thẻ cuối (hoặc thẻ duy nhất) trải hết bề ngang — không còn thẻ nửa khung bên trái + nửa trống bên phải */
.rcp-list > .rcp-card:last-child:nth-child(odd) { grid-column: 1 / -1; }
/* Vạch màu hạn = border-left (uốn theo góc bo như thẻ KPI) — trước là dải ::before cắt thẳng ở góc */
.rcp-card { position: relative; min-width: 0; padding: .75rem .85rem .75rem .9rem; border: 1px solid var(--border); border-left: 4px solid var(--kc, var(--info)); border-radius: var(--radius-md); background: var(--surface-1); }
.rcp-card.due-over, .rcp-card.due-late { --kc: var(--danger); }
.rcp-card.due-soon { --kc: var(--warning); }
.rcp-card.due-done { --kc: var(--success); }
.rcp-top { display: flex; align-items: center; flex-wrap: wrap; gap: .35rem .45rem; }
.rcp-no { font-weight: 800; color: var(--primary-strong); margin-right: .2rem; overflow-wrap: anywhere; }
.rcp-due { display: inline-flex; align-items: center; gap: .25rem; font-size: var(--text-xs); font-weight: 800; color: var(--text-1s); }
.rcp-due.over, .rcp-due.late { color: var(--danger); }
.rcp-due.soon { color: var(--warning); }
.rcp-due.done { color: var(--success); }
.rcp-desc { margin: .45rem 0 .35rem; font-size: var(--text-sm); line-height: 1.5; color: var(--text-1); white-space: pre-wrap; overflow-wrap: anywhere; }
.rcp-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 130px), 1fr)); gap: .3rem .8rem; margin: 0; }
.rcp-meta > div { min-width: 0; }
.rcp-meta dt { font-size: var(--text-xs); color: var(--text-2); font-weight: 700; }
.rcp-meta dd { margin: 0; font-size: var(--text-sm); font-weight: 600; color: var(--text-1); overflow-wrap: anywhere; }
.rcp-note { margin-top: .5rem; padding: .45rem .6rem; border-radius: var(--radius-sm); background: var(--success-bg); color: var(--text-1); font-size: var(--text-sm); overflow-wrap: anywhere; white-space: pre-wrap; }
.rcp-ev { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: .4rem; margin-top: .55rem; }
.rcp-ev a { display: block; aspect-ratio: 1; border-radius: var(--radius-sm); overflow: hidden; border: 1px solid var(--border); background: var(--surface-3); color: var(--primary-strong); text-decoration: none; }
.rcp-ev img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rcp-ev-f { display: flex; align-items: center; justify-content: center; gap: .2rem; height: 100%; padding: .2rem; font-size: var(--text-xs); overflow-wrap: anywhere; text-align: center; }
.rcp-log { margin-top: .55rem; font-size: var(--text-sm); }
.rcp-log summary { cursor: pointer; min-height: 32px; display: flex; align-items: center; gap: .35rem; font-weight: 800; color: var(--primary-strong); font-size: var(--text-xs); list-style: none; user-select: none; }
.rcp-log summary::-webkit-details-marker { display: none; }
/* Mũi tên dropdown: xuống khi đóng, xoay lên khi mở */
.rcp-log-chev { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--surface-2); transition: transform .2s ease; }
.rcp-log[open] .rcp-log-chev { transform: rotate(180deg); }
/* Nhật ký dùng chung timeline .tl.tl-trace (như "Quy trình xử lý") */
.rcp-log .tl { margin: .5rem 0 .2rem; }
.rcp-log .tl-body { padding-bottom: .8rem; }
.rcp-log .tl-item:last-child .tl-body { padding-bottom: 0; }
@media (prefers-reduced-motion: reduce) { .rcp-log-chev { transition: none; } }
.rcp-log-t { color: var(--text-1s); overflow-wrap: anywhere; }
.rcp-act { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .6rem; }
.rcp-btn {
    display: inline-flex; align-items: center; gap: .3rem; min-height: var(--tap-min); padding: .3rem .75rem; border: 1px solid var(--border-strong);
    border-radius: var(--radius-md); background: var(--surface-2); color: var(--text-1); font-size: var(--text-sm); font-weight: 700; cursor: pointer;
}
.rcp-btn:hover { background: var(--surface-3); color: var(--primary-strong); }
.rcp-close { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem .8rem; margin-top: .9rem; padding-top: .8rem; border-top: 1px solid var(--border-soft); }
.rcp-close > .rcp-panel { flex: 1 1 100%; margin: 0; }
.rcp-close-h { font-size: var(--text-sm); color: var(--text-2); min-width: 0; flex: 1 1 220px; }
.rcp-closed { display: inline-flex; align-items: center; gap: .35rem; margin: 0; color: var(--success); font-weight: 800; font-size: var(--text-sm); }
@container (max-width: 420px) {
    .rcp-add, .rcp-form-act > *, .rcp-close > .adm-btn { flex: 1 1 100%; }
    .rcp-act .rcp-btn { flex: 1 1 calc(50% - .4rem); justify-content: center; }
}

/* ---------- Dashboard: KPI CAPA ---------- */
.ast-capa { margin-bottom: var(--stack); }
.ast-capa-h { display: flex; align-items: center; gap: .35rem; margin: 0 0 .5rem; font-size: var(--text-sm); font-weight: 800; color: var(--text-1s); }
.ast-capa-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: .7rem; }
.ast-kpi.k-over { --kc: var(--warning); }
.ast-kpi.k-over.is-bad { --kc: var(--danger); }
.ast-kpi.k-over.is-bad b { color: var(--danger); }
.ast-kpi.k-ontime { --kc: var(--success); }
.ast-kpi.k-unassigned { --kc: var(--gold-600); }

/* ---------- Danh sách: xuất Excel + lọc nhanh CAPA + cột CAPA ---------- */
.arl-htools { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; min-width: 0; }
/* Hàng công cụ — các Ô VUÔNG BO GÓC cùng một kiểu (điện thoại + máy tính):
   [☰][▦] kiểu xem … [⬇ Excel] [🖼 Kèm ảnh]. Cao 44px, bo var(--radius-md). */
.arl-htools { flex-wrap: nowrap; }
.arl-views { order: -1; height: 44px; padding: 3px; gap: 3px; }
.arl-views > button { min-height: 0; height: 100%; width: 38px; padding: 0; }
.arl-vl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.arl-exp { display: inline-flex; align-items: center; gap: .4rem; min-width: 0; }
.arl-export, .arl-exp-opt {
    display: inline-flex; align-items: center; justify-content: center; gap: .4rem; height: 44px; min-width: 44px; padding: 0 .85rem;
    border: var(--border-w) solid var(--border); border-radius: var(--radius-md); background: var(--surface-1);
    color: var(--text-1); font-weight: 800; font-size: var(--text-sm); white-space: nowrap; text-decoration: none; cursor: pointer;
    transition: background var(--dur-1), color var(--dur-1), border-color var(--dur-1);
}
.arl-export:hover, .arl-exp-opt:hover { border-color: var(--primary); color: var(--primary-strong); }
/* "☑ Kèm ảnh": ô tick vẽ tay trong ô bo góc — bật = viền + nền xanh nhạt, tick xanh đặc */
.arl-exp-opt { color: var(--text-2); padding: 0 .75rem; gap: .45rem; font-size: var(--text-xs); }
.arl-ph-ck {
    display: grid; place-items: center; flex: 0 0 auto; width: 18px; height: 18px; border-radius: 5px;
    border: 2px solid var(--border-strong); background: var(--surface-1); color: transparent; transition: background var(--dur-1), border-color var(--dur-1);
}
.arl-exp-opt:has(input:checked) { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 10%, var(--surface-1)); color: var(--primary-strong); }
.arl-exp-opt:has(input:checked) .arl-ph-ck { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
/* Excel + Kèm ảnh là MỘT khối liền (chung viền, vạch ngăn) ⇒ người dùng hiểu "Kèm ảnh" là tuỳ chọn của nút Excel */
.arl-exp { gap: 0; height: 44px; border: var(--border-w) solid var(--border-strong); border-radius: var(--radius-md); overflow: hidden; background: var(--surface-1); }
.arl-exp .arl-export, .arl-exp .arl-exp-opt { height: 100%; border: 0; border-radius: 0; }
.arl-exp .arl-exp-opt { border-left: 1px solid var(--border); background: var(--surface-2); }
.arl-exp .arl-exp-opt:has(input:checked) { background: color-mix(in srgb, var(--primary) 10%, var(--surface-1)); }
.arl-exp .arl-export:hover { background: color-mix(in srgb, var(--primary) 8%, var(--surface-1)); }
.arl-exp-opt:has(input:focus-visible) { outline: 3px solid var(--focus-color); outline-offset: 1px; }
.arl-actq-l { flex: 0 0 auto; display: inline-flex; align-items: center; gap: .25rem; font-size: var(--text-xs); font-weight: 800; color: var(--text-2); text-transform: uppercase; letter-spacing: .04em; }
.arl-act { display: inline-flex; align-items: center; gap: .2rem; font-size: var(--text-xs); font-weight: 800; border-radius: var(--radius-full); padding: .1rem .5rem; white-space: nowrap; }
.arl-act.none { background: var(--warning-bg); color: var(--warning); }
.arl-act.over { background: var(--danger-bg); color: var(--danger); }
.arl-act.open { background: var(--info-bg); color: var(--info); }
.arl-act.done { background: var(--success-bg); color: var(--success); }
.arl-table .c-act { width: 1%; white-space: nowrap; }
@container (max-width: 720px) {
    .arl-table td.c-act { display: block; grid-area: act; justify-self: end; width: auto; margin-top: .15rem; }   /* width:auto — bỏ width:1% của bảng (làm nhãn tràn phải) */
    .arl-table td.c-act .arl-dim { display: none; }
}
@media (max-width: 479px) { .arl-htools { width: 100%; } .arl-htools > * { flex: 1 1 auto; } }

/* ---------- Danh sách sự vụ — gọn trên điện thoại ---------- */
/* Thẻ bảng không đệm (trước: .adm-shell .adm-card đè padding:0 ⇒ mỗi dòng thụt vào 2 lớp, vạch ngăn không chạm mép) */
.adm-shell .arl-tcard { padding: 0; }
@media (max-width: 767px) {
    /* MỘT hàng: [☰][▦] bên trái … [⬇ Excel][🖼] bên phải; ô ảnh chỉ còn icon vuông */
    .arl-htools { width: 100%; justify-content: space-between; }
    .arl-htools > * { flex: 0 0 auto !important; }
    .arl-export { padding: 0 .7rem; }
}
.arl-xl-s { display: none; }
@media (max-width: 767px) {
    .arl-xl-l { display: none; }
    .arl-xl-s { display: inline; }
}
@media (max-width: 480px) {
    /* Phân trang cùng kiểu "‹ Trang x/y ›" của Sự vụ mới nhất; tổng số đã có ở dòng tóm tắt bộ lọc */
    .arl-pager { justify-content: space-between; flex-wrap: nowrap; margin-top: 0; padding: .6rem .85rem; background: var(--surface-1);
                 border: var(--border-w) solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--elev-1); }
    .arl-pinfo, .arl-psize { display: none; }
    .arl-pbtns { flex: 1 1 auto; justify-content: space-between; flex-wrap: nowrap; }
    .arl-pcur { font-size: var(--text-sm); color: var(--text-2); }
    .arl-pb { border-color: var(--border-strong); }
}

/* ---------- Phiếu in A4 (.rpt-) — giấy luôn trắng/chữ đen, không phụ thuộc chế độ hiển thị ---------- */
.rpt-page { min-height: 100dvh; padding: clamp(8px, 3vw, 32px) clamp(8px, 3vw, 32px) 48px; background: #E9EDF3; color: #0F1B2E; color-scheme: light; font-family: var(--font-sans, 'Barlow', system-ui, sans-serif); }
.rpt-toolbar { max-width: 210mm; margin: 0 auto 12px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }
.rpt-tb-r { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.rpt-tb-btn {
    display: inline-flex; align-items: center; gap: .4rem; min-height: 44px; padding: .45rem 1rem; border: 0; border-radius: 12px;
    background: #1E3A6E; color: #fff; font-weight: 800; font-size: .9375rem; text-decoration: none; cursor: pointer;
}
.rpt-tb-btn.ghost { background: #fff; color: #1E3A6E; border: 1px solid #C9D3E2; }
.rpt-tb-btn:disabled { opacity: .55; }
.rpt-tb-hint { flex: 1 1 100%; margin: 0; font-size: .8125rem; color: #5B6B82; }
/* Điện thoại: [‹ Quay lại] [VI|EN] [In / Lưu PDF] trên CÙNG một hàng, đẩy xuống dưới tai thỏ / Dynamic Island
   (cách mép trên tối thiểu 60px, hoặc bằng safe-area nếu lớn hơn) */
@media (max-width: 560px) {
    .rpt-page { padding-top: max(60px, env(safe-area-inset-top)); }   /* iPhone có Dynamic Island: vùng an toàn ~59px */
    .rpt-toolbar { flex-wrap: wrap; gap: 8px 6px; }
    .rpt-tb-btn { padding: .4rem .7rem; gap: .3rem; font-size: .875rem; }
    .rpt-tb-back { flex: 0 0 auto; }
    .rpt-tb-r { flex: 1 1 0; min-width: 0; flex-wrap: nowrap; gap: 6px; }
    .rpt-tb-r > .rpt-tb-btn { flex: 1 1 auto; min-width: 0; justify-content: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}
.rpt-sheet {
    width: 100%; max-width: 210mm; min-height: 60vh; margin: 0 auto; padding: clamp(14px, 4vw, 16mm) clamp(12px, 4vw, 14mm);
    background: #fff; color: #0F1B2E; border-radius: 6px; box-shadow: 0 8px 28px rgba(15, 27, 46, .18); font-size: 10.5pt; line-height: 1.45;
}
.rpt-err { color: #C62828; font-weight: 700; }
.rpt-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px 16px; padding-bottom: 10px; border-bottom: 3px solid #1E3A6E; position: relative; }
.rpt-head::after { content: ""; position: absolute; left: 0; bottom: -6px; width: 72px; height: 3px; background: #E7CF7F; }
.rpt-logo { height: 40px; width: auto; }
.rpt-head-t { min-width: 0; }
.rpt-org { margin: 0; font-size: 8.5pt; font-weight: 800; letter-spacing: .08em; color: #436AB3; }
.rpt-head h1 { margin: 0; font-size: 15pt; font-weight: 800; color: #1E3A6E; text-transform: uppercase; line-height: 1.2; }
.rpt-kind { margin: 0; color: #2A3A52; font-weight: 600; }
.rpt-no { display: flex; flex-direction: column; align-items: flex-end; text-align: right; gap: 1px; font-size: 9pt; color: #2A3A52; }
.rpt-no b { font-size: 13pt; color: #0F1B2E; overflow-wrap: anywhere; }
.rpt-sec { margin-top: 14px; break-inside: auto; }
.rpt-sec h2 { margin: 0 0 6px; padding: 3px 8px; font-size: 10.5pt; font-weight: 800; color: #fff; background: #1E3A6E; border-radius: 3px; -webkit-print-color-adjust: exact; print-color-adjust: exact; break-after: avoid; }
.rpt-sec h2 small { font-weight: 600; opacity: .85; margin-left: 4px; }
.rpt-kv { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 62mm), 1fr)); gap: 0 14px; margin: 0; }
.rpt-kv > div { display: grid; grid-template-columns: minmax(0, 42%) minmax(0, 1fr); gap: 6px; padding: 3px 0; border-bottom: 1px dotted #C9D3E2; min-width: 0; break-inside: avoid; }
.rpt-kv dt { color: #5B6B82; font-size: 9pt; }
.rpt-kv dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.rpt-lbl { margin: 8px 0 2px; font-size: 8.5pt; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: #5B6B82; }
.rpt-txt { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.rpt-note { margin: 4px 0 0; color: #5B6B82; font-size: 9pt; }
.rpt-imgs { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 38mm), 1fr)); gap: 6px; }
.rpt-imgs figure { margin: 0; break-inside: avoid; }
.rpt-imgs img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border: 1px solid #C9D3E2; border-radius: 3px; }
.rpt-imgs figcaption { font-size: 7.5pt; color: #5B6B82; text-align: center; }
.rpt-tbl { width: 100%; border-collapse: collapse; font-size: 9pt; table-layout: auto; }
.rpt-tbl th { text-align: left; background: #EDF2FA; color: #1E3A6E; font-weight: 800; padding: 4px 5px; border: 1px solid #C9D3E2; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.rpt-tbl td { padding: 4px 5px; border: 1px solid #DDE3EC; vertical-align: top; overflow-wrap: anywhere; }
.rpt-tbl tr { break-inside: avoid; }
.rpt-tbl .nw { white-space: nowrap; }
.rpt-sub { display: block; font-size: 8pt; color: #5B6B82; }
.rpt-sub.over, .rpt-sub.late { color: #C62828; font-weight: 700; }
.rpt-sub.done { color: #1E7A46; font-weight: 700; }
.rpt-sign { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 60mm), 1fr)); gap: 16px; margin-top: 22px; text-align: center; break-inside: avoid; }
.rpt-sign span { display: block; font-weight: 800; }
.rpt-sign i { display: block; height: 20mm; }
.rpt-sign small { color: #5B6B82; }
.rpt-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; margin-top: 16px; padding-top: 6px; border-top: 1px solid #C9D3E2; font-size: 8pt; color: #5B6B82; }
/* Màn hẹp hơn tờ A4 (điện thoại/tablet dọc): KHÔNG dồn bố cục thành 1 cột nữa — tờ phiếu giữ đúng khổ A4 210mm
   (2 cột thông tin, số phiếu bên phải, 2 ô ký ngang hàng) và được THU NHỎ vừa bề ngang màn bằng zoom.
   Trình duyệt không hiểu tan(atan2()) thì bỏ qua dòng zoom → tờ A4 giữ cỡ thật, vuốt ngang để xem. */
@media screen and (max-width: 840px) {
    .rpt-page { padding-left: 12px; padding-right: 12px; overflow-x: auto; }
    .rpt-sheet { width: 210mm; max-width: none; padding: 16mm 14mm; zoom: tan(atan2(100vw - 24px, 210mm)); }
}
@page { size: A4; margin: 12mm 11mm 14mm; }
@media print {
    html:has(.rpt-page), body:has(.rpt-page) { background: #fff !important; }
    .rpt-page { padding: 0; background: #fff; min-height: 0; }
    .rpt-toolbar, #components-reconnect-modal, .skip-link { display: none !important; }
    .rpt-sheet { width: 100%; max-width: none; padding: 0; box-shadow: none; border-radius: 0; min-height: 0; zoom: var(--rpt-fit, 1); }   /* js/print-fit.js: vừa 1 trang A4 */
}

/* ---------- Việc được giao — mobile (.fma-, trong .field-shell) ---------- */
.field-shell .fma-home { display: grid; grid-template-columns: auto minmax(0, 1fr) auto;   /* bỏ vòng số (số đã có ở dòng mô tả + huy hiệu tab Việc) */ align-items: center; gap: .75rem; text-decoration: none; color: var(--text-1); border-left: 4px solid var(--info); }
.field-shell .fma-home.is-soon { border-left-color: var(--warning); }
.field-shell .fma-home.is-over { border-left-color: var(--danger); }
.fma-home-ic { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: var(--info-bg); color: var(--primary-strong); }
.is-over .fma-home-ic { background: var(--danger-bg); color: var(--danger); }
.fma-home-main { min-width: 0; }
.fma-home-t { display: block; font-weight: 800; font-size: var(--text-lg); }
.fma-home-d { display: block; font-size: var(--text-sm); color: var(--text-2); overflow-wrap: anywhere; }
.fma-over { color: var(--danger); font-weight: 800; }
.fma-soon { color: var(--warning); font-weight: 800; }
/* Thẻ "Việc được giao": 3 ô số liệu chia đều, ngăn bằng vạch mảnh — số to, nhãn nhỏ 1 dòng */
.fma-home-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: .4rem; }
.fma-stat { display: flex; flex-direction: column; min-width: 0; padding-right: .5rem; }
.fma-stat + .fma-stat { padding-left: .6rem; border-left: 1px solid var(--border); }
.fma-stat b { font-size: var(--text-lg); font-weight: 800; line-height: 1.15; color: var(--text-1); font-variant-numeric: tabular-nums; }
.fma-stat i { font-style: normal; font-size: .6875rem; font-weight: 600; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fma-stat.soon b { color: var(--warning); }
.fma-stat.over b { color: var(--danger); }
.fma-stat.zero b { color: var(--text-3); font-weight: 700; }
.fma-home-slim { display: flex; align-items: center; gap: .4rem; min-height: var(--tap-min); margin: 0 0 var(--space-4); padding: 0 .25rem; color: var(--text-2); font-size: var(--text-sm); font-weight: 700; text-decoration: none; }
.fma-home-slim:hover { color: var(--primary-strong); }
@container (max-width: 340px) { .field-shell .fma-home { grid-template-columns: auto minmax(0, 1fr) auto; } .fma-home-n { display: none; } }

.fma { min-width: 0; }
.fma-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: .6rem; }
/* Luôn 1 việc / hàng ở mọi kích thước (trước: 2 cột từ 768px — thẻ cao lệch nhau, khó đọc) */
.fma-row {
    position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: .65rem; min-height: 72px; padding: .75rem .8rem .75rem .9rem;
    border: var(--border-w) solid var(--border); border-left: 4px solid var(--kc, var(--info)); border-radius: var(--radius-lg); background: var(--surface-1); color: var(--text-1); text-decoration: none; box-shadow: var(--elev-1);
    -webkit-tap-highlight-color: transparent;
}
/* Vạch màu = HẠN (border-left, uốn theo góc bo): xanh biển còn hạn (mặc định --info) · cam sắp đến hạn · đỏ quá hạn / xong trễ · xanh lá xong đúng hạn */
.fma-row.due-soon { --kc: var(--warning); }
.fma-row.due-over, .fma-row.due-late { --kc: var(--danger); }
.fma-row.due-done { --kc: var(--success); }
.fma-row:active, .fma-row:hover { background: var(--surface-3); }
.fma-row-ic { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--info-bg); color: var(--kind-obs); }
.fma-row-ic.inc { background: var(--danger-bg); color: var(--kind-inc); }
.fma-row-main { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.fma-row-top { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .5rem; }
.fma-row-top b { font-size: var(--text-sm); overflow-wrap: anywhere; }
.fma-due { font-size: var(--text-xs); font-weight: 800; color: var(--text-1s); }
.fma-due.over, .fma-due.late { color: var(--danger); }
.fma-due.soon { color: var(--warning); }
.fma-due.done { color: var(--success); }
.fma-row-desc { font-size: var(--text-sm); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
/* Số phiếu nguồn + 2 nhãn (mức 3/5 · ưu tiên) LUÔN một hàng: nhãn giữ nguyên, số phiếu co lại "…" nếu thiếu chỗ */
.fma-row-meta { display: flex; flex-wrap: nowrap; align-items: center; gap: .3rem; min-width: 0; font-size: var(--text-xs); color: var(--text-2); white-space: nowrap; }
.fma-row-meta > .pill { flex: 0 0 auto; }
/* Thẻ việc: cột trái icon · giữa nội dung (2 hàng) · phải: nhãn trạng thái (hàng 1) + nhãn mức độ / ưu tiên SÁT MÉP PHẢI (hàng 2, đáy) */
.fma-row > .fma-row-ic { grid-row: 1; }
.fma-row > .fma-row-main { grid-column: 2; grid-row: 1 / span 2; }
.fma-row > .status { grid-column: 3; grid-row: 1; justify-self: end; }
.fma-row-tags { grid-column: 3; grid-row: 2; align-self: end; justify-self: end; display: flex; gap: .3rem; white-space: nowrap; }
.fma-row-meta-no { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* Điện thoại (khung ≤ 360px — vd iPhone SE): GIỮ một hàng icon · nội dung · nhãn trạng thái, chỉ thu gọn */
@container (max-width: 360px) {
    .fma-row { gap: .5rem; padding-right: .6rem; }
    .fma-row-ic { width: 32px; height: 32px; }
    .fma-row > .status { font-size: .6875rem; padding: .15rem .45rem; white-space: nowrap; }
    .fma-row-meta { gap: .25rem; }
    .fma-row-meta > .pill, .fma-row-tags > .pill { font-size: .6875rem; padding: .1rem .4rem; }
}
/* Chỉ khung cực hẹp (≤ 240px) mới đẩy nhãn trạng thái xuống dưới */
@container (max-width: 240px) { .fma-row { grid-template-columns: auto minmax(0, 1fr); } .fma-row > .status { grid-column: 2; grid-row: auto; justify-self: start; } .fma-row > .fma-row-main { grid-row: 1; } .fma-row-tags { grid-column: 2; grid-row: auto; justify-self: start; } }
.fma-list { container-type: inline-size; }

.field-shell .fma-head { border-left: 4px solid var(--info); }
.field-shell .fma-head.due-over, .field-shell .fma-head.due-late { border-left-color: var(--danger); }
.field-shell .fma-head.due-soon { border-left-color: var(--warning); }
.field-shell .fma-head.due-done { border-left-color: var(--success); }
.fma-head-top { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .4rem .7rem; }
.fma-head-top .fld-h1 { margin: 0; overflow-wrap: anywhere; }
.fma-desc { margin: 0 0 .7rem; font-size: var(--text-md); line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
/* Nhãn nhỏ "Mô tả" phía trên đoạn mô tả (việc + sự vụ nguồn) */
.fma-lbl { margin: .65rem 0 .15rem; font-size: var(--text-xs); font-weight: 700; color: var(--text-2); }
.fma-lbl + .fma-desc, .fma-lbl + .fma-rec-d { margin-top: 0 !important; }
/* ---- Khung hạn (trang chi tiết việc) ---- */
.fma-due-box { --tc: var(--info); display: flex; align-items: flex-start; gap: .6rem; margin: .6rem 0; padding: .6rem .75rem; border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--tc) 9%, var(--surface-1)); border: var(--border-w) solid color-mix(in srgb, var(--tc) 28%, var(--border)); }
.fma-due-box.soon { --tc: var(--warning); } .fma-due-box.over, .fma-due-box.late { --tc: var(--danger); } .fma-due-box.done { --tc: var(--success); }
.fma-due-ic { flex: 0 0 auto; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: color-mix(in srgb, var(--tc) 16%, var(--surface-1)); color: var(--tc); }
.fma-due-t { display: flex; flex-direction: column; min-width: 0; line-height: 1.35; }
.fma-due-t b { font-size: var(--text-sm); font-weight: 800; color: var(--tc); overflow-wrap: anywhere; }
.fma-due-t span { font-size: var(--text-xs); font-weight: 700; color: var(--text-2); }
/* ---- Sự vụ nguồn ---- */
.field-shell .fma-src { --kc: var(--kind-obs); border-top: 4px solid var(--kc); }   /* .field-shell để thắng .field-shell .fld-card */
.field-shell .fma-src.k-inc { --kc: var(--kind-inc); }
.fma-src-h { display: flex; align-items: center; gap: .4rem; margin: 0 0 .6rem; font-size: var(--text-sm); font-weight: 800; color: var(--primary-strong); }
.fma-src-top { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .65rem; }
.fma-src-ic { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; color: var(--kc); background: color-mix(in srgb, var(--kc) 12%, var(--surface-1)); }
.fma-src-main { display: flex; flex-direction: column; min-width: 0; }
.fma-src-kind { font-size: var(--text-xs); font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--kc); }
.fma-src-no { font-size: 1.05rem; font-weight: 800; color: var(--text-1); overflow-wrap: anywhere; }
.fma-src-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .8rem; margin-top: .6rem; padding-top: .55rem; border-top: 1px solid var(--border-soft); font-size: var(--text-xs); color: var(--text-2); }
.fma-src-meta > span:first-child { display: inline-flex; align-items: center; gap: .3rem; }
.fma-src-meta > .pill { margin-left: auto; }   /* nhãn mức độ sự vụ nguồn SÁT MÉP PHẢI, cùng hàng ngày giờ */
.fma-src .fma-rec-d { margin-top: .55rem; font-size: var(--text-sm); line-height: 1.55; color: var(--text-1); display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.fma-gal { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .4rem; margin-top: .7rem; }
.fma-gal-it { position: relative; display: block; aspect-ratio: 1; padding: 0; border: var(--border-w) solid var(--border); border-radius: var(--radius-md); overflow: hidden; background: var(--surface-2); cursor: zoom-in; }
.fma-gal-it img { display: block; width: 100%; height: 100%; object-fit: cover; }
.fma-gal-it:focus-visible { outline: 3px solid var(--focus-color); outline-offset: 2px; }
.fma-gal-more { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(5, 10, 20, .55); color: #fff; font-size: 1.25rem; font-weight: 800; }
.fma-rec { display: flex; align-items: flex-start; gap: .6rem; margin-top: .4rem; min-width: 0; }
.fma-rec > div { min-width: 0; overflow-wrap: anywhere; }
.fma-sub { display: block; font-size: var(--text-xs); color: var(--text-2); }
.fma-rec-t { margin: .5rem 0 0; font-weight: 700; overflow-wrap: anywhere; }
.fma-rec-d { margin: .35rem 0 0; font-size: var(--text-sm); color: var(--text-1s); white-space: pre-wrap; overflow-wrap: anywhere; }
.field-shell .fma-imgs { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: .5rem; margin-top: .6rem; }
.field-shell .fma-imgs .fld-att-img { width: auto; height: auto; aspect-ratio: 1; }
.field-shell .fma-imgs .fld-att-img img { width: 100%; height: 100%; object-fit: cover; }
.fma-h2 { font-size: var(--text-lg) !important; }
.field-shell .fma-form .fld-actionbar { flex-wrap: wrap; }
.field-shell .fma-form .fld-actionbar .fld-btn { flex: 1 1 140px; min-height: 52px; }
/* Nút giữ icon + chữ trên 1 dòng (tiếng Anh "Save progress" dài hơn "Lưu tiến độ" từng bị đẩy chữ xuống dưới icon);
   máy quá hẹp thì cả nút xuống hàng (2 nút xếp chồng, mỗi nút full ngang) thay vì gãy bên trong nút */
.field-shell .fma-form .fld-actionbar .fld-btn { flex-wrap: nowrap; white-space: nowrap; gap: .4rem; padding-inline: .7rem; font-size: 1rem; }
/* Nhật ký việc (Field): dùng timeline .tl.tl-trace; tiêu đề có icon */
.fma-log-h { display: flex; align-items: center; gap: .4rem; }
.fma-log { margin-top: .5rem; }
.fma-log-t { font-size: var(--text-sm); color: var(--text-1s); overflow-wrap: anywhere; white-space: pre-wrap; }

/* ============================================================================
   Đợt 10 — QUẢN TRỊ NGƯỜI DÙNG & PHÂN QUYỀN (.aus-)
   /admin/users (danh sách + hộp thoại) và /admin/users/access (ma trận quyền).
   Bảng chuyển THẺ ở ≤720px qua data-th (quy ước 03-uiux.md). Chỉ dùng token của app.css
   nên tự hợp Sáng / Tối / Ngoài trời / Ca đêm. KHÔNG sửa phần CSS phía trên.
   ========================================================================= */
.aus-wrap { min-width: 0; }

/* ---- Băng thông báo + cảnh báo mật khẩu khởi tạo ---- */
.aus-flash {
    display: flex; align-items: flex-start; gap: .55rem; margin-bottom: var(--space-4);
    padding: .7rem .9rem; border-radius: var(--radius-md); font-size: var(--text-sm); font-weight: 700;
    border: var(--border-w) solid transparent; min-width: 0;
}
.aus-flash > span { min-width: 0; overflow-wrap: anywhere; flex: 1 1 auto; }
.aus-flash.ok { background: var(--success-bg); border-color: var(--success-line); color: var(--success); }
.aus-flash.err { background: var(--danger-bg); border-color: var(--danger-line); color: var(--danger); }
.aus-flash-x { display: grid; place-items: center; min-width: 28px; min-height: 28px; border: 0; border-radius: 6px; background: transparent; color: inherit; cursor: pointer; }
.aus-warn {
    display: flex; flex-wrap: wrap; align-items: flex-start; gap: .6rem .9rem; margin-bottom: var(--space-4);
    padding: .85rem 1rem; border-radius: var(--radius-lg); background: var(--warning-bg);
    border: var(--border-w) solid var(--warning-line); color: var(--text-1);
}
.aus-warn > :nth-child(2) { flex: 1 1 220px; min-width: 0; }
.aus-warn > svg:first-child { flex: 0 0 auto; margin-top: .1rem; color: var(--warning); }
.aus-warn b { display: block; color: var(--warning); font-size: var(--text-sm); }
.aus-warn p { margin: .2rem 0 0; font-size: var(--text-xs); color: var(--text-2); line-height: 1.5; }

/* ---- Bộ lọc ---- */
/* Cùng kiểu bộ lọc trang Sự vụ: ô tìm bo góc có icon · 3 ô chọn bo góc chia đều một hàng · dòng tóm tắt */
.adm-shell .aus-filters { display: grid; gap: .6rem; grid-template-columns: minmax(0, 1fr); }
.aus-search {
    display: flex; align-items: center; gap: .45rem; height: 46px; padding: 0 .8rem 0 .95rem; min-width: 0;
    border: var(--border-w) solid var(--field-border); border-radius: var(--radius-md); background: var(--surface-2); color: var(--text-2);
    transition: border-color var(--dur-1), background var(--dur-1);
}
.aus-search:focus-within { border-color: var(--primary); background: var(--surface-1); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 22%, transparent); }
.aus-search input { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--text-1); font-size: var(--text-sm); outline: none; padding: 0; }
.aus-fsel { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .4rem; }
.aus-fsel select {
    -webkit-appearance: none; appearance: none; width: 100%; min-width: 0; height: 40px; padding: 0 1.7rem 0 .7rem;
    border: var(--border-w) solid var(--border); border-radius: var(--radius-sm); background-color: var(--surface-1);
    background-image: var(--chevron); background-repeat: no-repeat; background-position: right .45rem center; background-size: 14px;
    color: var(--text-2); font-size: var(--text-xs); font-weight: 800; text-overflow: ellipsis; white-space: nowrap; cursor: pointer;
}
.aus-fsel select:hover { border-color: var(--primary); }
.aus-fsel select:focus-visible { outline: 3px solid var(--focus-color); outline-offset: 1px; }
.aus-fsel select.on { border-color: var(--primary); background-color: color-mix(in srgb, var(--primary) 10%, var(--surface-1)); color: var(--primary-strong); }
/* Điện thoại: ô chọn giữ chữ ≥16px (chống iOS tự zoom) ⇒ 3 ô một hàng bị cắt chữ; chia 2 cột, Trạng thái full hàng dưới */
@media (max-width: 767px) {
    .aus-fsel { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .aus-fsel select:nth-child(3) { grid-column: 1 / -1; }
    .aus-fsel select { height: 44px; }
}
@media (min-width: 1100px) {
    .adm-shell .aus-filters { grid-template-columns: minmax(260px, 1fr) minmax(0, 560px); align-items: center; }
    .aus-fsel select { height: 46px; font-size: var(--text-sm); }
    .aus-fbtns { grid-column: 1 / -1; }
}
.aus-fbtns { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .8rem; padding-top: .55rem; border-top: 1px solid var(--border-soft); }
.aus-total { display: inline-flex; align-items: center; gap: .3rem; padding: .15rem .55rem; border-radius: 6px; background: color-mix(in srgb, var(--primary) 10%, var(--surface-1)); color: var(--primary-strong); font-size: var(--text-xs); font-weight: 800; white-space: nowrap; }
/* Hàng tìm kiếm: [🔍 ô tìm ……] [⟳ ô vuông đặt lại bộ lọc] */
.aus-srow { display: flex; align-items: center; gap: .5rem; min-width: 0; }
.aus-srow .aus-search { flex: 1 1 auto; }
.aus-reset {
    flex: 0 0 auto; display: grid; place-items: center; width: 46px; height: 46px; padding: 0;
    border: var(--border-w) solid var(--field-border); border-radius: var(--radius-md); background: var(--surface-2); color: var(--text-1); cursor: pointer;
    transition: border-color var(--dur-1), color var(--dur-1), background var(--dur-1);
}
.aus-reset:hover:not(:disabled) { border-color: var(--primary); color: var(--primary-strong); background: color-mix(in srgb, var(--primary) 10%, var(--surface-1)); }
.aus-reset:disabled { opacity: .45; cursor: default; }
.aus-reset:focus-visible { outline: 3px solid var(--focus-color); outline-offset: 1px; }
/* Nút đầu trang (Ma trận quyền · Thêm người dùng): điện thoại chia đôi hết bề ngang */
@media (max-width: 599px) {
    .aus-wrap .adm-page-head .adm-tools { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
    .aus-wrap .adm-page-head .adm-tools > * { justify-content: center; }
}

/* ---- Bảng người dùng ---- */
.adm-shell .aus-tcard { padding: 0; overflow: hidden; container-type: inline-size; }
.aus-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.aus-table th, .aus-table td { padding: .6rem .75rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--border); }
.aus-table thead th { position: sticky; top: 0; z-index: 1; background: var(--surface-2); color: var(--text-2); font-size: var(--text-xs); font-weight: 800; text-transform: uppercase; letter-spacing: .03em; white-space: nowrap; }
.aus-table tbody tr:last-child td { border-bottom: 0; }
.aus-table tbody tr:hover { background: var(--surface-2); }
.aus-uid { color: var(--text-1); font-weight: 800; overflow-wrap: anywhere; }
.aus-me { display: inline-block; margin-left: .35rem; padding: 0 .35rem; border-radius: 999px; background: var(--info-bg); color: var(--info); font-size: var(--text-xs); font-weight: 800; }
.aus-mail { overflow-wrap: anywhere; }
.aus-dim { color: var(--text-2); }
.aus-sub { display: block; font-size: var(--text-xs); color: var(--text-2); overflow-wrap: anywhere; }
.aus-grp { display: inline-block; padding: .05rem .4rem; border-radius: 6px; background: var(--info-bg); color: var(--info); font-weight: 800; font-size: var(--text-xs); }
.aus-states { display: flex; flex-wrap: wrap; gap: .3rem; }
.aus-num { white-space: nowrap; font-variant-numeric: tabular-nums; }
.aus-acts { display: flex; flex-wrap: nowrap; gap: .3rem; } /* các nút thao tác luôn NGANG HÀNG */
.aus-a {
    display: inline-flex; align-items: center; gap: .3rem; min-height: 34px; padding: 0 .55rem;
    border: var(--border-w) solid var(--border-strong); border-radius: var(--radius-md);
    background: var(--surface-1); color: var(--text-1); font-size: var(--text-xs); font-weight: 700; cursor: pointer; white-space: nowrap;
}
.aus-a:hover { background: var(--surface-2); }
.aus-a:disabled { opacity: .5; cursor: default; }
.aus-a.danger { color: var(--danger); border-color: var(--danger-line); }
.aus-a.ok { color: var(--success); border-color: var(--success-line); }   /* Mở hoạt động — xanh, đối xứng nút Vô hiệu hoá (đỏ) */
@media (pointer: coarse) { .aus-a { min-height: var(--tap-min); } }
/* Bảng rộng vừa (721–1399px): không đủ chỗ cho 3 nút có chữ trên một hàng ⇒ chỉ icon (nhãn ẩn cho trình đọc màn hình, tooltip qua title) */
@container (min-width: 721px) and (max-width: 1399px) {
    .aus-a { justify-content: center; min-width: 36px; padding: 0 .5rem; }
    .aus-a-l { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

/* Bảng → THẺ khi khối hẹp (≤720px): mỗi hàng là một thẻ, nhãn cột lấy từ data-th. */
@container (max-width: 720px) {
    .aus-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
    .aus-table, .aus-table tbody, .aus-table tr, .aus-table td { display: block; width: auto; }
    .aus-table tr { padding: .7rem .85rem; border-bottom: 1px solid var(--border); }
    .aus-table tr:hover { background: transparent; }
    .aus-table td { border: 0; padding: .2rem 0; display: grid; grid-template-columns: minmax(96px, 38%) minmax(0, 1fr); gap: .5rem; align-items: start; }
    .aus-table td::before { content: attr(data-th); font-size: var(--text-xs); font-weight: 800; color: var(--text-2); }
    .aus-table td[data-th=""] { grid-template-columns: minmax(0, 1fr); }
    .aus-table td[data-th=""]::before { content: none; }
    .aus-table td.aus-cact { margin-top: .4rem; }
    /* nội dung ô luôn ở cột phải, không kéo giãn (pill/tag "bạn" không dài ra, dòng phụ nhóm quyền không rơi sang cột nhãn) */
    .aus-table td > * { grid-column: 2; justify-self: start; min-width: 0; }
    /* Thao tác: bỏ nhãn, các nút NGANG HÀNG chia đều bề rộng thẻ — icon trên, chữ dưới */
    .aus-table td.aus-cact { grid-template-columns: minmax(0, 1fr); padding-top: .55rem; border-top: 1px dashed var(--border); margin-top: .5rem; }
    .aus-table td.aus-cact::before { content: none; }
    .aus-table td.aus-cact > * { grid-column: 1; justify-self: stretch; }
    .aus-acts { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: .4rem; }
    .aus-a { flex-direction: column; justify-content: center; gap: .2rem; min-height: 52px; padding: .35rem .25rem; white-space: normal; text-align: center; line-height: 1.15; }
}

/* ---- Phân trang: dùng chung kiểu .ast-pager "‹ Trang x/y ›" (khối Sự vụ mới nhất), đặt trong thẻ bảng ---- */
.aus-pager.ast-pager { margin-top: 0; padding: .6rem .85rem; }

/* ---- Nhật ký thao tác ---- */
.adm-shell .aus-audit > summary { cursor: pointer; font-weight: 800; font-size: var(--text-sm); color: var(--text-1); min-height: var(--tap-min); display: flex; align-items: center; gap: .5rem; list-style: none; user-select: none; }
.adm-shell .aus-audit > summary::-webkit-details-marker { display: none; }
/* Mũi tên dropdown cố định: xuống khi đóng, xoay lên khi mở (chỉ xoay, không nảy) */
.aus-audit-chev { display: grid; place-items: center; width: 32px; height: 32px; margin-left: auto; flex: 0 0 auto; border-radius: 50%; background: var(--surface-2); color: var(--text-2); transition: transform .25s ease, background .2s, color .2s; }
.aus-audit[open] .aus-audit-chev { transform: rotate(180deg); background: color-mix(in srgb, var(--primary) 14%, var(--surface-1)); color: var(--primary); }
.aus-audit[open] .aus-log { animation: aus-drop .22s ease-out; }
@keyframes aus-drop { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .aus-audit-chev { transition: none; } .aus-audit[open] .aus-log { animation: none; } }
.aus-log { list-style: none; margin: .6rem 0 0; padding: 0; display: grid; gap: .45rem; }
.aus-log li { display: grid; gap: .1rem .6rem; padding-bottom: .45rem; border-bottom: 1px solid var(--border); font-size: var(--text-xs); min-width: 0; }
@media (min-width: 900px) { .aus-log li { grid-template-columns: 130px 130px minmax(0, 1fr); align-items: baseline; } }
.aus-log-more { display: inline-flex; align-items: center; min-height: var(--tap-min); margin-top: .2rem; padding: 0 .2rem; border: 0; background: none; font: inherit; font-size: var(--text-sm); font-weight: 700; color: var(--text-2); cursor: pointer; }
.aus-log-more:hover { color: var(--primary-strong); text-decoration: underline; }
.aus-log-more:disabled { opacity: .6; cursor: progress; }
.aus-log-t { color: var(--text-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.aus-log-a { font-weight: 800; color: var(--text-1); overflow-wrap: anywhere; }
.aus-log-x { color: var(--text-1s); overflow-wrap: anywhere; }

/* ---- Hộp thoại ---- */
.aus-backdrop { position: fixed; inset: 0; z-index: 90; background: rgba(6, 14, 28, .55); }
.aus-modal {
    position: fixed; z-index: 91; left: 50%; top: 50%; transform: translate(-50%, -50%);
    width: min(560px, calc(100vw - 2rem)); max-height: min(88dvh, 900px); display: flex; flex-direction: column;
    background: var(--surface-1); border: var(--border-w) solid var(--border); border-radius: var(--radius-xl);
    box-shadow: var(--elev-3); overflow: hidden;
}
.aus-modal.aus-sm { width: min(460px, calc(100vw - 2rem)); }
.aus-mhead { display: flex; align-items: center; justify-content: space-between; gap: .6rem; padding: .85rem 1rem; border-bottom: 1px solid var(--border); background: var(--surface-2); }
.aus-mhead h2 { margin: 0; font-size: var(--text-lg); font-weight: 800; color: var(--text-1); min-width: 0; overflow-wrap: anywhere; }
.aus-mx { display: grid; place-items: center; min-width: var(--tap-min); min-height: var(--tap-min); border: 0; border-radius: var(--radius-md); background: transparent; color: var(--text-2); cursor: pointer; }
.aus-mx:hover { background: var(--surface-3); color: var(--text-1); }
.aus-mbody { padding: 1rem; overflow-y: auto; display: grid; gap: .8rem; min-width: 0; }
.aus-mbody p { margin: 0; font-size: var(--text-sm); color: var(--text-1); line-height: 1.55; overflow-wrap: anywhere; }
.aus-mfoot { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .5rem; padding: .8rem 1rem; border-top: 1px solid var(--border); background: var(--surface-2); }
.aus-mfoot > * { flex: 1 1 auto; }
@media (min-width: 480px) { .aus-mfoot > * { flex: 0 0 auto; } }
.aus-check { display: flex; align-items: flex-start; gap: .55rem; font-size: var(--text-sm); color: var(--text-1); line-height: 1.45; cursor: pointer; }
.aus-check input { width: 20px; height: 20px; flex: 0 0 auto; margin-top: .1rem; }
.aus-hint { display: block; margin: .2rem 0 0; font-size: var(--text-xs); color: var(--text-2); line-height: 1.5; }
.aus-hint.bad { color: var(--danger); font-weight: 700; }
.aus-hint.good { color: var(--success); font-weight: 700; }
.aus-pwbox { display: grid; gap: .55rem; padding: .75rem; border: 1px dashed var(--border-strong); border-radius: var(--radius-md); background: var(--surface-2); }
.aus-pwbox .auth-meter { margin-top: .3rem; }
.aus-pwshow { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.aus-pwshow input {
    flex: 1 1 220px; min-width: 0; min-height: var(--tap-min); padding: .5rem .7rem;
    border: var(--border-w) solid var(--field-border); border-radius: var(--radius-md);
    background: var(--surface-2); color: var(--text-1); font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-size: max(16px, 1rem); font-weight: 700; letter-spacing: .04em;
}
.aus-bullets { margin: 0; padding-left: 1.1rem; display: grid; gap: .25rem; font-size: var(--text-xs); color: var(--text-2); line-height: 1.5; }

/* ---- Ma trận quyền ---- */
.adm-shell .aus-mbar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .7rem .9rem; container-type: inline-size; }
.aus-mpick { flex: 1 1 280px; min-width: 0; }
.aus-macts { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.aus-dirty { font-size: var(--text-xs); font-weight: 800; color: var(--warning); white-space: nowrap; }
/* Điện thoại: chọn nhóm full ngang; [Chọn tất cả][Bỏ tất cả] chia đôi; Hoàn tác + Lưu full ngang */
@container (max-width: 520px) {
    .aus-mpick { flex-basis: 100%; }
    .aus-macts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
    .aus-macts .adm-btn { justify-content: center; width: 100%; }
    .aus-macts .aus-dirty { grid-column: 1 / -1; }
    .aus-macts .adm-btn:last-child { grid-column: 1 / -1; }
    .aus-macts .aus-undo + .adm-btn:last-child { grid-column: auto; }   /* có thay đổi: [Hoàn tác][Lưu] chia đôi */
}
/* chỉ cột checkbox (KHÔNG áp vào dòng tiêu đề nhóm — trước đây th của nhóm bị ép 44px ⇒ chữ "CH UN G" gãy dọc) */
.aus-matrix td.aus-ck, .aus-matrix thead th.aus-ck { width: 44px; }
.aus-ck input { width: 20px; height: 20px; margin: 0; accent-color: var(--primary); cursor: pointer; }
.aus-matrix .aus-ghdr th { background: var(--surface-3); color: var(--text-1); font-size: var(--text-xs); font-weight: 800; text-transform: uppercase; letter-spacing: .05em; position: static; }
.aus-matrix label { cursor: pointer; display: inline-block; min-height: 24px; }
.aus-code { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: var(--text-xs); color: var(--text-2); overflow-wrap: anywhere; }
/* Mã quyền của hệ thống chính: chip gọn, xuống dòng tự nhiên */
.aus-codes { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .45rem; }
.aus-codes .aus-code { padding: .1rem .4rem; border-radius: 6px; background: color-mix(in srgb, var(--warning) 10%, var(--surface-1)); border: 1px solid var(--warning-line); }
/* Ma trận trên khối hẹp: mỗi quyền là 1 dòng [☐ | Tên chức năng / mã quyền], tiêu đề nhóm là dải full ngang */
@container (max-width: 720px) {
    .aus-matrix tr { display: block; }
    .aus-matrix .aus-ghdr { padding: 0; border-bottom: 1px solid var(--border); }
    .aus-matrix .aus-ghdr th { display: block; width: auto; padding: .55rem .85rem; }
    .aus-matrix tbody tr:not(.aus-ghdr) { display: grid; grid-template-columns: 24px minmax(0, 1fr); column-gap: .75rem; row-gap: .15rem; align-items: center; padding: .65rem .85rem; }
    .aus-matrix tbody td { display: block; width: auto; padding: 0; }
    .aus-matrix tbody td::before { content: none; }
    .aus-matrix tbody td > * { grid-column: auto; }
    .aus-matrix td.aus-ck { grid-row: 1 / span 2; width: auto; }
    .aus-matrix td.aus-ck ~ td { grid-column: 2; }
    .aus-matrix label { display: block; min-height: 0; font-weight: 600; color: var(--text-1); }
}

/* ---------- Khung xem ảnh lớn PhotoSwipe (wwwroot/js/photo-viewer.js) — chú thích tên ảnh ở chân ---------- */
.pswp__hsse-caption {
    position: absolute; left: 50%; bottom: max(14px, env(safe-area-inset-bottom)); transform: translateX(-50%);
    max-width: calc(100% - 32px); padding: .35rem .8rem; border-radius: 999px; background: rgba(15, 23, 42, .72); color: #e2e8f0;
    font-size: .8125rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none;
    transition: opacity var(--dur-2, .2s);
}
.pswp:not(.pswp--ui-visible) .pswp__hsse-caption { opacity: 0; }
.pswp__counter { font-weight: 700; }
/* Thanh nút (bộ đếm · phóng to · tải về · đóng) hạ xuống dưới tai thỏ / Dynamic Island của iPhone */
.pswp__top-bar { top: env(safe-area-inset-top, 0px); }
@media (max-width: 767px) { .pswp__top-bar { top: max(60px, env(safe-area-inset-top, 0px)); } }   /* điện thoại: luôn cách mép trên ≥ 60px */