/*
 * cms.css — lớp giao diện GameCms đè lên Sneat (vendor/css/core.css), nạp NGAY SAU core.css.
 * Spec: docs/superpowers/specs/2026-10-05-gamecms-giao-dien-design.md
 * Chỉ chế độ sáng; mọi màu khai bằng biến để sau này thêm chế độ tối không phải làm lại.
 * Không đụng .jx-* (tooltip vật phẩm / ô túi đồ có kiểu riêng trong jx-item.css).
 */

/* ===== 1. Biến ===== */
:root,
[data-bs-theme=light] {
  /* Chủ đạo: xanh dương trầm */
  --cms-primary: #2f5bd3;
  --cms-primary-hover: #274bb0;
  --cms-primary-soft: #eaf0fc;

  /* Nền / khung */
  --cms-page-bg: #f4f6f9;
  --cms-paper: #ffffff;
  --cms-border: #e3e7ee;
  --cms-border-strong: #cfd5df;
  --cms-row-line: #edf0f4;
  --cms-head-bg: #f7f8fb;
  --cms-hover-bg: #f6f9ff;
  --cms-detail-bg: #f9fafc;

  /* Chữ */
  --cms-heading: #1f2a37;
  --cms-text: #3d4a5c;
  --cms-muted: #6b7686;
  --cms-head-text: #5b6676;

  /* Trạng thái: chữ đậm / nền nhạt (badge, thông báo) và màu đặc (chấm, vạch, nút) */
  --cms-success-text: #18804a; --cms-success-bg: #e6f4ec; --cms-success: #18804a;
  --cms-warning-text: #9a5b00; --cms-warning-bg: #fff4dc; --cms-warning: #e08a00;
  --cms-danger-text: #c4262e;  --cms-danger-bg: #fde8e8;  --cms-danger: #d9363e;
  --cms-info-text: #1e6aa8;    --cms-info-bg: #e5f0fa;    --cms-info: #1e6aa8;
  --cms-neutral-text: #4b5563; --cms-neutral-bg: #eef0f3; --cms-neutral: #8a94a3;

  --cms-radius: 10px;
  --cms-radius-sm: 8px;
  --cms-control-h: 2.25rem;     /* 36px */
  --cms-control-h-sm: 1.875rem; /* 30px */
  --cms-font: "Inter", -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Bootstrap / Sneat dùng lại các biến này */
  --bs-primary: var(--cms-primary);
  --bs-primary-rgb: 47, 91, 211;
  --bs-primary-bg-subtle: var(--cms-primary-soft);
  --bs-primary-border-subtle: #c9d7f5;
  --bs-primary-text-emphasis: #1b3a8f;
  --bs-purple: var(--cms-primary);
  --bs-secondary: #6b7686;
  --bs-secondary-rgb: 107, 118, 134;
  --bs-success: var(--cms-success);
  --bs-success-rgb: 24, 128, 74;
  --bs-success-bg-subtle: var(--cms-success-bg);
  --bs-success-text-emphasis: var(--cms-success-text);
  --bs-warning: var(--cms-warning);
  --bs-warning-rgb: 224, 138, 0;
  --bs-warning-bg-subtle: var(--cms-warning-bg);
  --bs-warning-text-emphasis: var(--cms-warning-text);
  --bs-danger: var(--cms-danger);
  --bs-danger-rgb: 217, 54, 62;
  --bs-danger-bg-subtle: var(--cms-danger-bg);
  --bs-danger-text-emphasis: var(--cms-danger-text);
  --bs-info: var(--cms-info);
  --bs-info-rgb: 30, 106, 168;
  --bs-info-bg-subtle: var(--cms-info-bg);
  --bs-info-text-emphasis: var(--cms-info-text);

  --bs-font-sans-serif: var(--cms-font);
  --bs-body-font-family: var(--cms-font);
  --bs-body-font-size: 0.875rem;
  --bs-body-line-height: 1.45;
  --bs-body-color: var(--cms-text);
  --bs-body-color-rgb: 61, 74, 92;
  --bs-body-bg: var(--cms-page-bg);
  --bs-body-bg-rgb: 244, 246, 249;
  --bs-heading-color: var(--cms-heading);
  --bs-secondary-color: var(--cms-muted);
  --bs-link-color: var(--cms-primary);
  --bs-link-color-rgb: 47, 91, 211;
  --bs-link-hover-color: var(--cms-primary-hover);
  --bs-link-hover-color-rgb: 39, 75, 176;
  --bs-custom-link-color: var(--cms-primary);
  --bs-border-color: var(--cms-border);
  --bs-border-radius: var(--cms-radius-sm);
  --bs-border-radius-lg: var(--cms-radius);
  --bs-box-shadow: 0 1px 2px rgba(31, 42, 55, 0.04);
  --bs-box-shadow-sm: 0 1px 2px rgba(31, 42, 55, 0.04);
  --bs-paper-bg: var(--cms-paper);
  --bs-form-valid-color: var(--cms-success);
  --bs-form-valid-border-color: var(--cms-success);
  --bs-form-invalid-color: var(--cms-danger);
  --bs-form-invalid-border-color: var(--cms-danger);

  /* Menu */
  --bs-menu-color: var(--cms-text);
  --bs-menu-hover-bg: #f1f4f9;
  --bs-menu-hover-color: var(--cms-heading);
  --bs-menu-active-bg: var(--cms-primary-soft);
  --bs-menu-active-color: var(--cms-primary);
  --bs-menu-box-shadow: none;
  --bs-menu-vertical-link-padding-y: 0.4375rem;
  --bs-menu-item-spacer: 0.0625rem;
}

/* ===== 2. Nền tảng ===== */
body {
  font-family: var(--cms-font);
  font-feature-settings: "cv11", "ss01";
  color: var(--cms-text);
  background-color: var(--cms-page-bg);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { color: var(--cms-heading); letter-spacing: -0.01em; }
h5, .h5 { font-size: 1rem; font-weight: 600; }
h6, .h6 { font-size: 0.875rem; font-weight: 600; }
small, .small { font-size: 0.8125rem; }
.text-body-secondary, .text-muted { color: var(--cms-muted) !important; }
.text-success { color: var(--cms-success-text) !important; }
.text-warning { color: var(--cms-warning-text) !important; }
.text-danger { color: var(--cms-danger-text) !important; }
.text-info { color: var(--cms-info-text) !important; }
/* Mã / ID / tên cấu hình: chip xám trung tính (Sneat để chữ hồng, trông như lỗi). */
code { color: var(--cms-heading); background: #f1f3f7; font-size: 0.78rem; padding: 0.0625rem 0.3125rem; border-radius: 4px; overflow-wrap: anywhere; }
.alert code { background: rgba(255, 255, 255, 0.6); }
.num, .tabular { font-variant-numeric: tabular-nums; }
.num { text-align: end; white-space: nowrap; }
.code {
  font-family: ui-monospace, "Cascadia Mono", Consolas, "Liberation Mono", monospace;
  font-size: 0.78rem;
  letter-spacing: 0;
  color: var(--cms-heading);
}

/* ===== 3. Khung trang ===== */
/* Menu trái */
.layout-menu.menu-vertical { border-inline-end: 1px solid var(--cms-border); }
.menu .app-brand.demo { height: 56px; margin-top: 0; padding-inline: 1.25rem; }
.app-brand-text.demo { font-size: 1.125rem; font-weight: 700; letter-spacing: -0.02em; white-space: nowrap; color: var(--cms-heading); }
.app-brand-logo.demo svg { width: 18px; height: 30px; }
.menu-vertical .menu-inner > .menu-item .menu-link { margin-inline: 0.75rem; border-radius: var(--cms-radius-sm); font-size: 0.875rem; }
/* Vạch chỉ mục đang chọn: mép TRÁI của chính mục (Sneat vẽ ::before ở mép phải menu, tách rời khỏi mục). */
.layout-wrapper:not(.layout-horizontal) .menu-vertical .menu-inner > .menu-item.active::before { display: none; }
.menu-vertical .menu-inner > .menu-item.active > .menu-link:not(.menu-toggle) {
  font-weight: 600;
  box-shadow: inset 3px 0 0 var(--cms-primary);
}
.menu-vertical .menu-inner > .menu-header { margin-block: 1rem 0.25rem; padding-inline: 1.5rem; }
.menu-header .menu-header-text { color: #98a1ae; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.08em; }
.menu-vertical .menu-icon { font-size: 1.125rem; margin-inline-end: 0.625rem; }
.menu-inner-shadow { display: none !important; }

/* Thanh trên cùng: dính mép trên, nền trắng, viền dưới */
.layout-navbar.cms-topbar {
  position: sticky;
  top: 0;
  z-index: 9;
  block-size: 3.5rem;
  padding-block: 0;
  background-color: rgba(255, 255, 255, 0.96);
  backdrop-filter: saturate(1.4) blur(6px);
  border-bottom: 1px solid var(--cms-border);
  box-shadow: none;
}
.cms-topbar > .container-fluid { padding-inline: 1.5rem; }
.cms-crumb { display: flex; align-items: baseline; gap: 0.375rem; min-width: 0; }
.cms-crumb-section { color: var(--cms-muted); font-size: 0.875rem; white-space: nowrap; }
.cms-crumb-section::after { content: "/"; margin-inline-start: 0.375rem; color: #b6bdc8; }
.cms-crumb-title { margin: 0; font-size: 1rem; font-weight: 600; color: var(--cms-heading); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cms-user-name { color: var(--cms-heading); font-weight: 500; font-size: 0.875rem; }

/* Nội dung + chân trang */
.layout-wide .content-wrapper > .container-fluid.container-p-y { padding: 1.5rem !important; }
.content-footer .footer-container { padding-block: 1rem !important; font-size: 0.8125rem; color: var(--cms-muted); }

/* Tab trong trang (gạch chân). .jx-tabs giữ kiểu game riêng. */
.nav-tabs .nav-link, .nav-pills .nav-link { text-transform: none; }
.nav-pills:not(.jx-tabs) {
  gap: 0.25rem !important;
  border-bottom: 1px solid var(--cms-border);
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
}
.nav-pills:not(.jx-tabs) .nav-link {
  inline-size: auto;
  border-radius: 0;
  padding: 0.625rem 0.875rem;
  margin-bottom: -1px;
  color: var(--cms-muted);
  font-weight: 500;
  background: transparent !important;
  box-shadow: none !important;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.nav-pills:not(.jx-tabs) .nav-link:hover { color: var(--cms-heading); }
.nav-pills:not(.jx-tabs) .nav-link.active {
  color: var(--cms-primary) !important;
  border-bottom-color: var(--cms-primary);
  font-weight: 600;
}

/* ===== 4. Thẻ ===== */
.card {
  --bs-card-border-width: 1px;
  --bs-card-border-color: var(--cms-border);
  --bs-card-border-radius: var(--cms-radius);
  --bs-card-inner-border-radius: calc(var(--cms-radius) - 1px);
  --bs-card-box-shadow: none;
  --bs-card-spacer-y: 1.125rem;
  --bs-card-spacer-x: 1.25rem;
  --bs-card-cap-padding-y: 0.875rem;
  --bs-card-cap-padding-x: 1.25rem;
  box-shadow: none;
}
.card-header { border-bottom: 1px solid var(--cms-border); }
.card-header + .table-responsive, .card-header + .table { border-top: 0; }
.card-header .card-title, .card-header h5 { margin-bottom: 0; }
.card-footer { border-top: 1px solid var(--cms-border); background: transparent; }
.card-subtitle, .card-header small { color: var(--cms-muted); }

/* ===== 5. Bảng ===== */
.table {
  --bs-table-color: var(--cms-text);
  --bs-table-border-color: var(--cms-row-line);
  --bs-table-hover-bg: var(--cms-hover-bg);
  --bs-table-hover-color: var(--cms-text);
  --bs-table-striped-bg: #fafbfc;
  font-size: 0.84375rem; /* 13.5px */
  font-variant-numeric: tabular-nums;
}
.table > :not(caption) > * > * { padding: 0.6875rem 0.75rem; vertical-align: middle; }
.table > :not(caption) > * > *:first-child { padding-inline-start: 1.25rem; }
.table > :not(caption) > * > *:last-child { padding-inline-end: 1.25rem; }
.table.table-sm > :not(caption) > * > * { padding-block: 0.5rem; }
.table th,
.table thead tr th {
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.78125rem; /* 12.5px */
  font-weight: 600;
  color: var(--cms-head-text);
  white-space: nowrap;
  padding-block: 0.625rem;
}
.table > thead > tr > * { background-color: var(--cms-head-bg); border-bottom: 1px solid var(--cms-border); }
.table:not(.table-borderless):not(.table-without-card, .dataTable) thead th { border-block-start-width: 0; }
.table > tfoot > tr > * { background-color: var(--cms-head-bg); border-top: 1px solid var(--cms-border); font-weight: 600; color: var(--cms-heading); }
.table > tbody > tr:last-child > * { border-bottom-width: 0; }
.table td small, .table td .small { font-size: 0.78125rem; }
.cell-sub { display: block; color: var(--cms-muted); font-size: 0.78125rem; line-height: 1.35; margin-top: 1px; }
a.cell-sub { color: var(--bs-link-color); }
a.cell-sub:hover { color: var(--bs-link-hover-color); }
.cell-truncate { display: block; max-width: 30rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cell-main { display: block; color: var(--cms-heading); font-weight: 500; }
.table-empty { text-align: center; color: var(--cms-muted); padding-block: 2.5rem !important; }
.table-empty::before { content: ""; display: block; width: 28px; height: 28px; margin: 0 auto 0.5rem; border-radius: 50%; background: var(--cms-neutral-bg); }

/* Dòng cần chú ý: vạch 3px mép trái thay vì tô cả dòng */
.table > tbody > tr[class*="row-flag-"] > *:first-child { box-shadow: inset 3px 0 0 var(--cms-flag, transparent); }
.row-flag-warning { --cms-flag: var(--cms-warning); }
.row-flag-danger { --cms-flag: var(--cms-danger); }
.row-flag-info { --cms-flag: var(--cms-info); }
.row-flag-success { --cms-flag: var(--cms-success); }

/* Sneat: tô cả dòng table-warning/danger rất chói - dịu lại cho các trang chưa chuyển sang row-flag-* */
.table-warning { --bs-table-bg: #fffaf0; --bs-table-color: var(--cms-text); --bs-table-border-color: #f6e7c8; --bs-table-hover-bg: #fff4dc; }
.table-danger { --bs-table-bg: #fff6f6; --bs-table-color: var(--cms-text); --bs-table-border-color: #f6d4d4; --bs-table-hover-bg: #fde8e8; }

/* Dòng mở rộng (cms.js) */
.table > tbody > tr[data-expand] { cursor: pointer; }
.table > tbody > tr[data-expand]:focus-visible { outline: 2px solid var(--cms-primary); outline-offset: -2px; }
.table > tbody > tr[data-expand].is-open > * { background-color: var(--cms-hover-bg); border-bottom-color: transparent; }
.expand-cell { width: 2.25rem; text-align: center; color: var(--cms-muted); }
.expand-caret { display: inline-block; transition: transform 0.15s ease; font-size: 1.125rem; line-height: 1; }
tr.is-open .expand-caret { transform: rotate(90deg); color: var(--cms-primary); }
.table > tbody > tr.row-detail > td { background-color: var(--cms-detail-bg); padding: 0.875rem 1.25rem 1rem 1.25rem; border-bottom: 1px solid var(--cms-border); }
.table > tbody > tr.row-detail:not(.is-open) { display: none; }
.table.table-hover > tbody > tr.row-detail:hover > * { --bs-table-bg-state: transparent; }
.detail-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: 0.75rem 1.5rem; margin: 0; }
.detail-grid > div { min-width: 0; }
.detail-grid dt { font-size: 0.75rem; font-weight: 500; color: var(--cms-muted); margin-bottom: 0.125rem; }
.detail-grid dd { margin: 0; color: var(--cms-heading); overflow-wrap: anywhere; }
.detail-grid .detail-wide { grid-column: 1 / -1; }
.table-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1rem; }
.table-tools > div:first-child { flex: 1 1 22rem; min-width: 0; }
.table-count { color: var(--cms-muted); font-size: 0.8125rem; }
.table-count strong { color: var(--cms-heading); font-weight: 600; }

/* Phân trang */
.pager-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1rem; }
.pager-info { color: var(--cms-muted); font-size: 0.8125rem; }
.pagination { --bs-pagination-border-radius: var(--cms-radius-sm); --bs-pagination-active-bg: var(--cms-primary); --bs-pagination-active-border-color: var(--cms-primary); gap: 0.25rem; }
.pagination .page-link { border-radius: var(--cms-radius-sm) !important; min-width: 2rem; text-align: center; }
.pagination { flex-wrap: wrap; }

/* ===== 6. Badge trạng thái ===== */
.status {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.1875rem 0.5625rem 0.1875rem 0.5rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.25;
  white-space: nowrap;
  vertical-align: middle;
  color: var(--cms-st-text);
  background-color: var(--cms-st-bg);
}
.status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background-color: var(--cms-st-dot); flex: none; }
.status-neutral { --cms-st-text: var(--cms-neutral-text); --cms-st-bg: var(--cms-neutral-bg); --cms-st-dot: var(--cms-neutral); }
.status-info { --cms-st-text: var(--cms-info-text); --cms-st-bg: var(--cms-info-bg); --cms-st-dot: var(--cms-info); }
.status-success { --cms-st-text: var(--cms-success-text); --cms-st-bg: var(--cms-success-bg); --cms-st-dot: var(--cms-success); }
.status-warning { --cms-st-text: var(--cms-warning-text); --cms-st-bg: var(--cms-warning-bg); --cms-st-dot: var(--cms-warning); }
.status-danger { --cms-st-text: var(--cms-danger-text); --cms-st-bg: var(--cms-danger-bg); --cms-st-dot: var(--cms-danger); }
.status + .status { margin-inline-start: 0.25rem; }
.status-stack { display: flex; flex-wrap: wrap; gap: 0.25rem; }
.status-stack > .status + .status { margin-inline-start: 0; }

/* Badge Sneat cũ (.bg-label-*): chữ màu đặc trên nền nhạt khó đọc - đổi sang cặp chữ đậm / nền nhạt */
.badge { font-weight: 600; font-size: 0.75rem; letter-spacing: 0; border-radius: 6px; padding: 0.3125rem 0.5rem; }
.bg-label-primary { background-color: var(--cms-primary-soft) !important; color: #1b3a8f !important; }
.bg-label-secondary { background-color: var(--cms-neutral-bg) !important; color: var(--cms-neutral-text) !important; }
.bg-label-success { background-color: var(--cms-success-bg) !important; color: var(--cms-success-text) !important; }
.bg-label-warning { background-color: var(--cms-warning-bg) !important; color: var(--cms-warning-text) !important; }
.bg-label-danger { background-color: var(--cms-danger-bg) !important; color: var(--cms-danger-text) !important; }
.bg-label-info { background-color: var(--cms-info-bg) !important; color: var(--cms-info-text) !important; }
.bg-warning { color: #3d2a00 !important; }

/* ===== 7. Ô nhập, nút ===== */
.form-label { font-size: 0.78125rem; font-weight: 500; color: var(--cms-head-text); margin-bottom: 0.3125rem; text-transform: none; letter-spacing: 0; }
.form-control, .form-select {
  min-height: var(--cms-control-h);
  font-size: 0.84375rem;
  border-radius: var(--cms-radius-sm);
  border-color: var(--cms-border-strong);
  color: var(--cms-heading);
  padding-block: 0.375rem;
}
.form-control { padding-inline: 0.75rem; }
.form-select { padding-inline: 0.75rem 2.25rem; }
textarea.form-control { min-height: 4.5rem; }
.form-control:focus, .form-select:focus { border-color: var(--cms-primary); box-shadow: 0 0 0 3px rgba(47, 91, 211, 0.15); }
.form-control::placeholder { color: #9aa3b0; }
.form-control-sm, .form-select-sm { min-height: var(--cms-control-h-sm); font-size: 0.8125rem; padding-block: 0.25rem; }
.form-text { color: var(--cms-muted); font-size: 0.78125rem; }
.input-search { position: relative; }
.input-search > .bx { position: absolute; inset-inline-start: 0.625rem; top: 50%; transform: translateY(-50%); color: var(--cms-muted); pointer-events: none; font-size: 1rem; }
.input-search > .form-control { padding-inline-start: 2rem; }
.input-search.search-wide > .form-control { min-width: 18rem; }
@media (max-width: 575.98px) { .input-search.search-wide { flex: 1 1 auto; } .input-search.search-wide > .form-control { min-width: 0; } }

.btn {
  --bs-btn-font-size: 0.84375rem;
  --bs-btn-font-weight: 500;
  --bs-btn-border-radius: var(--cms-radius-sm);
  --bs-btn-padding-y: 0.375rem;
  --bs-btn-padding-x: 0.875rem;
  min-height: var(--cms-control-h);
  gap: 0.25rem;
  text-transform: none;
  letter-spacing: 0;
}
.btn:not(:focus, :active) { box-shadow: none; }
.btn-sm, .btn-group-sm > .btn { --bs-btn-font-size: 0.8125rem; --bs-btn-padding-y: 0.1875rem; --bs-btn-padding-x: 0.625rem; min-height: var(--cms-control-h-sm); }
.btn-primary { --bs-btn-hover-bg: var(--cms-primary-hover); --bs-btn-active-bg: var(--cms-primary-hover); }
.btn-outline-secondary {
  --bs-btn-color: var(--cms-heading);
  --bs-btn-border-color: var(--cms-border-strong);
  --bs-btn-hover-color: var(--cms-heading);
  --bs-btn-hover-bg: #f1f4f9;
  --bs-btn-hover-border-color: var(--cms-border-strong);
  --bs-btn-active-color: var(--cms-heading);
  --bs-btn-active-bg: #e8edf5;
  --bs-btn-active-border-color: var(--cms-border-strong);
  background-color: var(--cms-paper);
}
.btn-outline-primary { --bs-btn-hover-bg: var(--cms-primary); --bs-btn-active-bg: var(--cms-primary-hover); background-color: var(--cms-paper); }
/* Nút chìm trong dòng bảng: không viền, chỉ hiện nền khi rê chuột */
.btn-ghost {
  --bs-btn-color: var(--cms-text);
  --bs-btn-border-color: transparent;
  --bs-btn-hover-color: var(--cms-heading);
  --bs-btn-hover-bg: #eef2f8;
  --bs-btn-hover-border-color: transparent;
  --bs-btn-active-bg: #e3e9f3;
  --bs-btn-active-border-color: transparent;
  background: transparent;
}
.btn-ghost.text-danger:hover { background-color: var(--cms-danger-bg); }
.table .btn { white-space: nowrap; }
/* Nhóm nút chọn nhanh (Tháng này | Tháng trước | 7 ngày) */
.btn-segment { display: inline-flex; border: 1px solid var(--cms-border-strong); border-radius: var(--cms-radius-sm); background: var(--cms-paper); overflow: hidden; }
.btn-segment > a, .btn-segment > button {
  display: inline-flex; align-items: center; min-height: calc(var(--cms-control-h) - 2px); padding: 0 0.75rem;
  font-size: 0.8125rem; font-weight: 500; color: var(--cms-text); text-decoration: none; border: 0; background: transparent; white-space: nowrap;
}
.btn-segment > * + * { border-inline-start: 1px solid var(--cms-border) !important; }
.btn-segment > button { cursor: pointer; }
.btn-segment > a:hover, .btn-segment > button:hover { background: #f1f4f9; color: var(--cms-heading); }
.btn-segment > .active, .btn-segment > .active:hover { background: var(--cms-primary-soft); color: var(--cms-primary); font-weight: 600; }

/* ===== 8. Thanh lọc ===== */
.filter-bar .row { --bs-gutter-y: 0.75rem; }
.filter-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.filter-reset { font-size: 0.8125rem; color: var(--cms-muted); }
.filter-reset:hover { color: var(--cms-primary); }
.filter-hint { display: block; margin-top: 0.625rem; color: var(--cms-muted); font-size: 0.78125rem; }

/* ===== 9. Thẻ số liệu ===== */
.kpi { position: relative; height: 100%; display: flex; flex-direction: column; gap: 0.25rem; padding: 1rem 1.125rem; }
.kpi-label { color: var(--cms-muted); font-size: 0.8125rem; font-weight: 500; }
.kpi-value { color: var(--cms-heading); font-size: 1.5rem; font-weight: 700; line-height: 1.2; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.kpi-unit { font-size: 0.875rem; font-weight: 600; color: var(--cms-muted); margin-inline-start: 0.125rem; letter-spacing: 0; }
.kpi-sub { color: var(--cms-muted); font-size: 0.78125rem; }
a.card.kpi-link { color: inherit; transition: border-color 0.15s ease; }
a.card.kpi-link:hover { border-color: var(--cms-primary); }
a.card.kpi-link .kpi::after { content: "→"; position: absolute; top: 0.875rem; right: 1rem; color: var(--cms-muted); }
.card.kpi-warning { box-shadow: inset 3px 0 0 var(--cms-warning); }
.card.kpi-danger { box-shadow: inset 3px 0 0 var(--cms-danger); }

/* ===== 10. Thông báo ===== */
.alert {
  border: 1px solid transparent;
  border-inline-start-width: 3px;
  border-radius: var(--cms-radius-sm);
  font-size: 0.84375rem;
  padding: 0.75rem 1rem;
}
.alert-primary { --bs-alert-color: #1b3a8f; --bs-alert-bg: var(--cms-primary-soft); --bs-alert-border-color: #c9d7f5; border-inline-start-color: var(--cms-primary); }
.alert-secondary { --bs-alert-color: var(--cms-neutral-text); --bs-alert-bg: var(--cms-neutral-bg); --bs-alert-border-color: #dde1e7; border-inline-start-color: var(--cms-neutral); }
.alert-success { --bs-alert-color: var(--cms-success-text); --bs-alert-bg: var(--cms-success-bg); --bs-alert-border-color: #c4e5d2; border-inline-start-color: var(--cms-success); }
.alert-warning { --bs-alert-color: #6e4200; --bs-alert-bg: var(--cms-warning-bg); --bs-alert-border-color: #f6dfab; border-inline-start-color: var(--cms-warning); }
.alert-danger { --bs-alert-color: #9b1c23; --bs-alert-bg: var(--cms-danger-bg); --bs-alert-border-color: #f6c9cb; border-inline-start-color: var(--cms-danger); }
.alert-info { --bs-alert-color: #17507f; --bs-alert-bg: var(--cms-info-bg); --bs-alert-border-color: #c6dcef; border-inline-start-color: var(--cms-info); }
.alert[class*=alert-] { color: var(--bs-alert-color); background-color: var(--bs-alert-bg); border-color: var(--bs-alert-border-color); }
.alert .alert-heading { color: inherit; }
.alert .btn-close { opacity: 0.6; }

/* ===== 11. Form nhập liệu ===== */
.form-narrow { max-width: 45rem; }
.form-section-title { font-size: 0.8125rem; font-weight: 600; color: var(--cms-heading); margin: 1.25rem 0 0.75rem; padding-bottom: 0.375rem; border-bottom: 1px solid var(--cms-border); }
.form-section-title:first-child { margin-top: 0; }
.form-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.25rem; }

/* ===== 12. Khác ===== */
.dropdown-menu { border: 1px solid var(--cms-border); border-radius: var(--cms-radius-sm); box-shadow: 0 8px 24px rgba(31, 42, 55, 0.1); font-size: 0.84375rem; }
.avatar-initial.bg-label-primary { font-weight: 600; }
.modal-content { border-radius: var(--cms-radius); border: 1px solid var(--cms-border); }
.list-group-item { border-color: var(--cms-border); }
.activity-list .list-group-item { padding: 0.75rem 1.25rem; }
.activity-dot { flex: none; width: 8px; height: 8px; margin-top: 0.4rem; border-radius: 50%; background: var(--cms-neutral); }
.activity-dot-success { background: var(--cms-success); }
.activity-dot-danger { background: var(--cms-danger); }
.min-w-0 { min-width: 0; }
.tooltip { --bs-tooltip-font-size: 0.78125rem; --bs-tooltip-bg: #1f2a37; }

/* ===== 13. Vùng kiểu game (jx-item.css) - lớp chung ở trên không được làm sáng nền tối của chúng ===== */
.jx-modal .modal-title { color: inherit; }
.jx-panel .btn, .jx-modal .btn { min-height: 0; }
.jx-panel .btn-outline-primary { background-color: transparent; }
.jx-modal .btn-outline-secondary,
.jx-panel .btn-outline-secondary {
  --bs-btn-color: #d9d9d9;
  --bs-btn-border-color: #3a3f55;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #2a2e40;
  --bs-btn-hover-border-color: #4a5070;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #2a2e40;
  background-color: transparent;
}

@media (max-width: 767.98px) {
  .layout-wide .content-wrapper > .container-fluid.container-p-y { padding: 1rem !important; }
  .cms-topbar > .container-fluid { padding-inline: 1rem; }
  .table > :not(caption) > * > *:first-child { padding-inline-start: 1rem; }
  .table > :not(caption) > * > *:last-child { padding-inline-end: 1rem; }
}