/* ═══════════════════════════════════════════════════════════════════════════
   CHUẨN UI ADMIN PNE — component dùng chung (chép từ PNE-corp public/css/admin-ui.css,
   chỉ giữ phần class đang dùng). MỌI class SCOPE dưới `.aui` (layout bọc nội dung trang).
   ⛔ Không mã màu ở đây: biến --aui-* khai trong tokens.css bằng token brand.
   ═══════════════════════════════════════════════════════════════════════════ */
.aui { color: var(--aui-ink); font-size: 14px; }

/* ═══ 1. NÚT ═══ */
.aui .btn { font-family: inherit; font-weight: 700; font-size: 13.5px; padding: 9px 15px; border-radius: var(--aui-r-sm); border: 1px solid var(--aui-line); background: var(--aui-surface); color: var(--aui-ink); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 7px; white-space: nowrap; text-decoration: none; }
.aui .btn:hover { background: var(--aui-hover); }
.aui .btn-primary { background: var(--aui-red); border-color: var(--aui-red); color: var(--aui-surface); }
.aui .btn-primary:hover, .aui .btn-primary:focus { background: var(--aui-red-dark); border-color: var(--aui-red-dark); color: var(--aui-surface); }
.aui .btn:disabled { opacity: .45; cursor: not-allowed; }
/* Nhóm nút chọn 1 (radio .btn-check): mục đang chọn nền đỏ nhạt chữ đỏ */
.aui .btn-group > .btn { font-weight: 600; }
.aui .btn-check:checked + .btn { background: var(--aui-red-soft); border-color: var(--aui-red); color: var(--aui-red); position: relative; z-index: 1; }
.aui .btn-check:focus-visible + .btn { box-shadow: 0 0 0 3px var(--aui-focus); }

/* ═══ 2. BADGE / CHIP ═══ */
.aui .bg { font-weight: 700; font-size: 12px; padding: 4px 10px; border-radius: 999px; white-space: nowrap; display: inline-flex; align-items: center; gap: 4px; }
.aui .bg-dg { background: var(--aui-red-soft); color: var(--aui-red); }
.aui .bg-mute { background: var(--aui-mute-bg); color: var(--aui-mute-ink); }

/* ═══ 3. CARD / TRANG ═══ */
.aui .card { background: var(--aui-surface); border: 1px solid var(--aui-line); border-radius: var(--aui-r); box-shadow: var(--aui-sh); overflow: hidden; }
.aui .card-header { padding: 13px 16px; border-bottom: 1px solid var(--aui-line); background: var(--aui-surface); }
.aui .card-title { font-weight: 800; font-size: 14.5px; color: var(--aui-ink); margin: 0; line-height: 1.4; }
.aui .card-footer { background: var(--aui-hover); border-top: 1px solid var(--aui-line); color: var(--aui-muted); font-size: 13px; }
.aui .page-sub { color: var(--aui-muted); font-size: 13px; }

/* ═══ 4. THANH PILL (chọn nhóm) ═══ */
/* KHÔNG ép chia đều — mỗi pill giữ đúng bề ngang chữ, cả hàng cuộn ngang khi hẹp. */
.aui .tabs { display: flex; gap: 6px; flex-wrap: nowrap; overflow-x: auto; max-width: 100%; -webkit-overflow-scrolling: touch; padding-bottom: 2px; }
.aui .tab { flex: 0 0 auto; white-space: nowrap; min-height: 34px; border: 1px solid var(--aui-line); border-radius: 999px; padding: 7px 13px; font-size: 13px; font-weight: 700; color: var(--aui-muted); background: var(--aui-surface); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; text-decoration: none; }
.aui .tab:hover { background: var(--aui-hover); color: var(--aui-ink); }
.aui .tab.on { background: var(--aui-red); border-color: var(--aui-red); color: var(--aui-surface); }

/* ═══ 5. BẢNG ═══ */
/* Nhãn cột chữ thường (bỏ IN HOA giãn chữ mặc định của Tabler). */
.aui .table thead th { text-align: left; font-size: 12.5px; font-weight: 700; letter-spacing: normal; text-transform: none; color: var(--aui-muted); padding: 11px 16px; border-bottom: 1px solid var(--aui-line); background: var(--aui-hover); line-height: 1.4; }
.aui .table td { padding: 12px 16px; border-bottom: 1px solid var(--aui-line-soft); vertical-align: middle; color: var(--aui-ink); }
.aui .table tr:last-child td { border-bottom: none; }
.aui .table tbody tr:hover td { background: var(--aui-hover); }

/* ═══ 6. FORM ═══ */
.aui .form-label { font-size: 13px; font-weight: 700; color: var(--aui-ink); }
.aui .form-control, .aui .form-select { border-radius: var(--aui-r-sm); border-color: var(--n80); font-family: inherit; }
.aui .form-hint { color: var(--aui-muted); }

/* Bảng trên mobile: thẻ chứa bảng CUỘN NGANG, bảng giữ bề rộng tối thiểu (không bóp méo). */
@media (max-width: 768px) {
    .aui .card:has(table) { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}