:root {
  --bg: #ffffff;
  --fg: #0b0d0f;
  --muted: #6c757d;
  --border: #e5e7eb;
  --card: #f8f9fa;
  --link: #0d6efd;
  --btn-bg: #0d6efd;
  --btn-fg: #ffffff;
  --accent: #0d6efd;
  --container-max: 1140px;
}

:root[data-theme="dark"] {
  --bg: #0b0d0f;
  --fg: #e5e7eb;
  --muted: #9aa1a9;
  --border: #2b2f36;
  --card: #15181c;
  --link: #7ab8ff;
  --btn-bg: #2d6cdf;
  --btn-fg: #ffffff;
  --accent: #7ab8ff;
}

html, body {
  background: var(--bg);
  color: var(--fg);
}
a { color: var(--link); }

.container { max-width: var(--container-max); }
.navbar { background: var(--card) !important; }
.navbar .navbar-brand { letter-spacing: .2px; }
.border, .border-top, .border-bottom, .list-group-item { border-color: var(--border) !important; }
.bg-light { background-color: var(--card) !important; }
.btn-primary { background: var(--btn-bg); color: var(--btn-fg); border-color: var(--btn-bg); }
.btn-outline-primary { color: var(--btn-bg); border-color: var(--btn-bg); }
.btn-outline-primary:hover { background: var(--btn-bg); color: var(--btn-fg); }
.text-muted { color: var(--muted) !important; }
.ads-placeholder { background:var(--card); border:1px dashed var(--border); color:var(--muted); padding:16px; text-align:center; border-radius:.5rem; }

.theme-toggle {
  border: 1px solid var(--border);
  background: transparent;
  color: var(--fg);
  border-radius: 8px;
  padding: 6px 10px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.theme-toggle:hover { background: var(--card); }
.theme-toggle .icon { font-size: 16px; line-height: 1; }

/* Đồng bộ màu chữ/nền theo Bootstrap color mode */
[data-bs-theme="light"] {
  --bs-body-bg: #ffffff;
  --bs-body-color: #0b0d0f;
  --bs-border-color: #e5e7eb;
}

[data-bs-theme="dark"] {
  --bs-body-bg: #0b0d0f;
  --bs-body-color: #e5e7eb;
  --bs-border-color: #2b2f36;
}

/* Buộc nền/chữ toàn trang theo biến (tương phản rõ) */
html, body {
  background-color: var(--bs-body-bg) !important;
  color: var(--bs-body-color) !important;
}

/* Các khối thường dùng lấy màu nền theo theme */
.navbar, .card, .bg-light, .list-group-item {
  background-color: var(--bs-body-bg) !important;
  color: var(--bs-body-color) !important;
  border-color: var(--bs-border-color) !important;
}

/* Liên kết & nút theo theme (giữ accent xanh hiện đại) */
a { color: var(--link, #0d6efd); }
:root[data-theme="dark"] a { color: var(--link, #7ab8ff); }
.btn-primary { background-color: #0d6efd; border-color: #0d6efd; color: #fff; }
:root[data-theme="dark"] .btn-primary { background-color: #2d6cdf; border-color: #2d6cdf; color: #fff; }