, không phải ô, nên mục 9 không với tới. */
.table > tbody > tr,
.table > thead > tr { background: transparent !important; }
.table td[colspan] { color: var(--muted-foreground) !important; }
/* ── 26. Link hành động cuối hàng thành chip ───────────── */
/* Trong khu account chúng nằm ở
; trước đây viết dạng
"[ Withdraw ]", nay đã bỏ ngoặc trong template nên style lại cho gọn. */
td[align="right"] a {
display: inline-flex; align-items: center;
height: 26px; padding: 0 10px;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
font-size: 12px; font-weight: 500;
color: var(--muted-foreground) !important;
white-space: nowrap;
transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
td[align="right"] a:hover {
background: var(--primary-soft);
border-color: transparent;
color: var(--primary) !important;
}
td[align="right"] a + a { margin-left: 6px; }
/* ── 27. Bỏ kẻ sọc bảng (phải trùng selector) ──────────── */
/* style.css có `.table-striped tbody tr:nth-of-type(odd){...!important}`.
Độ đặc hiệu cao hơn mục 25 nên phải lặp đúng selector; file này nạp sau
nên cùng độ đặc hiệu thì rule dưới đây thắng. Phong cách này phân tách
hàng bằng đường kẻ mảnh, không bằng nền xen kẽ. */
.table-striped tbody tr:nth-of-type(odd) { background: transparent !important; }
/* ══════════════════════════════════════════════════════════
28. VIẾT LẠI TRẠNG THÁI ACTIVE CỦA NAV
style.css dựng sẵn một bộ rule riêng kèm !important, chồng lên
theme này: navbar có chấm tròn ::after, dropdown có viền trên 2px,
sidebar active bị cả border-left LẪN thanh ::before rồi lại đổi
padding khi hover nên chữ nhảy. Dưới đây gỡ hết và dựng lại một
cách duy nhất: nền mờ + chữ nhấn + một thanh chỉ vị trí.
Selector phải trùng đúng bản gốc mới thắng được !important.
══════════════════════════════════════════════════════════ */
/* ── Navbar ───────────────────────────────────────────── */
.navbar-light .navbar-nav .nav-link:hover {
color: var(--foreground) !important;
background: var(--muted) !important;
}
.navbar-light .navbar-nav .active > .nav-link,
.navbar-light .navbar-nav .nav-link.active,
.navbar-light .navbar-nav .nav-link.show {
color: var(--primary) !important;
background: var(--primary-soft) !important;
}
.navbar-light .navbar-nav .nav-link:focus { color: var(--foreground) !important; }
/* Bỏ chấm tròn chỉ báo dưới mục active */
.navbar-light .navbar-nav .active > .nav-link::after { display: none !important; }
/* Trả lại mũi tên cho dropdown-toggle (dùng ::after của Bootstrap) */
.navbar-light .navbar-nav .dropdown-toggle::after {
display: inline-block !important;
position: static !important;
transform: none !important;
width: 0 !important; height: 0 !important;
border-radius: 0 !important;
background: none !important;
margin-left: 6px;
vertical-align: middle;
border-top: .3em solid; border-right: .3em solid transparent;
border-bottom: 0; border-left: .3em solid transparent;
opacity: .75;
}
/* ── Dropdown: bỏ viền trên đậm, bo đều 4 góc ─────────── */
.navbar .dropdown-menu {
background: var(--popover) !important;
border: 1px solid var(--hairline) !important;
border-top: 1px solid var(--hairline) !important;
border-radius: var(--radius) !important;
box-shadow: var(--shadow-lg) !important;
padding: 5px !important;
margin-top: 6px !important;
}
.navbar .dropdown-menu .dropdown-item {
border-radius: var(--radius-sm) !important;
padding: 8px 10px !important;
font-size: 13px !important; font-weight: 500 !important;
color: var(--muted-foreground) !important;
background: transparent !important;
}
.navbar .dropdown-menu .dropdown-item:hover,
.navbar .dropdown-menu .dropdown-item:focus {
background: var(--muted) !important;
color: var(--foreground) !important;
}
/* ── Sidebar khu tài khoản ────────────────────────────── */
nav.sidenav .nav-link {
position: relative;
padding-left: 10px !important;
border-left: 0 !important;
}
nav.sidenav .nav-link:hover {
color: var(--foreground) !important;
background: var(--muted) !important;
padding-left: 10px !important; /* không để chữ nhảy khi hover */
}
nav.sidenav .nav-item.active > .nav-link,
nav.sidenav .nav-link.active {
color: var(--primary) !important;
background: var(--primary-soft) !important;
border-left: 0 !important;
padding-left: 10px !important;
font-weight: 600 !important;
}
/* Một thanh chỉ vị trí duy nhất, thay cho border-left + ::before chồng nhau */
nav.sidenav .nav-item.active > .nav-link::before {
content: '' !important;
position: absolute !important;
left: 0; top: 7px; bottom: 7px;
width: 3px !important;
background: var(--primary) !important;
border-radius: 0 3px 3px 0 !important;
}
/* Icon đi theo màu chữ */
nav.sidenav .nav-icon { stroke: currentColor !important; }
nav.sidenav .nav-link:hover .nav-icon,
nav.sidenav .nav-item.active .nav-icon { stroke: currentColor !important; }
/* Đường kẻ ngăn nhóm: dùng hairline */
nav.sidenav ul.list-unstyled { border-bottom-color: var(--hairline) !important; }
nav.sidenav ul.list-unstyled:last-child { border-bottom: 0 !important; }
/* ══════════════════════════════════════════════════════════
29. THEME SÁNG
Mặc định là tối (mục 1). Khối này đè khi .
Độ đặc hiệu html[data-theme] (0,1,1) thắng :root/html ở mục 1.
Indigo tối lại và tăng bão hoà để giữ nguyên lực nhấn trên nền trắng —
không phải đảo ngược máy móc bảng màu tối.
══════════════════════════════════════════════════════════ */
html[data-theme="light"] {
--background: oklch(99.4% .002 275);
--surface-sunken: oklch(96.5% .005 275);
--card: oklch(100% 0 0);
--popover: oklch(100% 0 0);
--muted: oklch(96.8% .004 275);
--foreground: oklch(18.1% .017 275);
--muted-foreground: oklch(53% .016 275);
--border: oklch(91.8% .006 275);
--hairline: oklch(93.8% .005 275);
--input: oklch(91.8% .006 275);
--primary: oklch(55.6% .226 274);
--primary-foreground: oklch(99% .002 275);
--primary-soft: oklch(94.5% .032 274);
--primary-hover: oklch(50% .23 274);
--ring: oklch(55.6% .226 274);
--success: oklch(52% .15 152); --success-soft: oklch(94.5% .045 152);
--warning: oklch(56% .13 78); --warning-soft: oklch(95% .05 80);
--destructive: oklch(55% .2 25); --destructive-soft: oklch(95% .04 25);
--info: oklch(52% .16 244); --info-soft: oklch(94.5% .04 244);
--money: oklch(56% .13 78); --money-soft: oklch(95% .05 80);
--earning: oklch(52% .15 152);
--shadow-md: 0 4px 12px -2px hsl(275 30% 40%/.10), 0 2px 6px -2px hsl(275 30% 40%/.06);
--shadow-lg: 0 12px 32px -8px hsl(275 30% 40%/.14), 0 4px 12px -4px hsl(275 30% 40%/.08);
--shadow-glow: 0 0 0 1px oklch(55.6% .226 274/.18), 0 8px 32px -10px oklch(55.6% .226 274/.28);
--c-border-r: oklch(55.6% .226 274 / .3);
--bs-primary: oklch(55.6% .226 274);
}
/* Quầng sáng nền: dịu hơn hẳn ở theme sáng */
html[data-theme="light"] body::before {
background:
radial-gradient(60% 50% at 8% 88%, oklch(72.2% .168 152 / .07), transparent 70%),
radial-gradient(50% 45% at 92% 42%, oklch(67.2% .198 274 / .07), transparent 70%);
}
/* Navbar mờ nền trắng thay vì đen */
html[data-theme="light"] .navbar,
html[data-theme="light"] .navbar.bg-light,
html[data-theme="light"] .navbar-light {
background: oklch(100% 0 0 / .85) !important;
}
/* style.css đặt color:#fff !important ở nhiều chỗ (chữ trên nền tối).
Ở theme sáng những chỗ đó phải đổi lại, nếu không chữ trắng trên nền trắng. */
html[data-theme="light"] .navbar-light .navbar-nav .nav-link:hover,
html[data-theme="light"] .navbar-light .navbar-nav .nav-link:focus,
html[data-theme="light"] nav.sidenav .nav-link:hover {
color: var(--foreground) !important;
}
html[data-theme="light"] .navbar-light .navbar-nav .active > .nav-link,
html[data-theme="light"] .navbar-light .navbar-nav .nav-link.active,
html[data-theme="light"] .navbar-light .navbar-nav .nav-link.show,
html[data-theme="light"] nav.sidenav .nav-item.active > .nav-link,
html[data-theme="light"] nav.sidenav .nav-link.active {
color: var(--primary) !important;
}
/* ── Nút chuyển sáng/tối ───────────────────────────────── */
.cb-theme-toggle {
display: inline-flex; align-items: center; justify-content: center;
width: 34px; height: 34px; padding: 0; margin: 0 4px;
border: 1px solid transparent; border-radius: 9999px;
background: transparent; color: var(--muted-foreground);
cursor: pointer;
transition: background-color .15s ease, color .15s ease;
}
.cb-theme-toggle:hover { background: var(--muted); color: var(--foreground); }
.cb-theme-toggle svg { width: 17px; height: 17px; }
/* Tối: hiện mặt trăng. Sáng: hiện mặt trời. */
.cb-theme-toggle .cb-icon-sun { display: none; }
.cb-theme-toggle .cb-icon-moon { display: block; }
html[data-theme="light"] .cb-theme-toggle .cb-icon-sun { display: block; }
html[data-theme="light"] .cb-theme-toggle .cb-icon-moon { display: none; }
/* ── 30. Sửa: màu chữ mục sidebar đang chọn ────────────── */
/* dark-blue.css có `.sidenav.navbar .navbar-nav .active > .nav-link`
với color !important ở độ đặc hiệu (0,5,0) — cao hơn rule mục 28
(0,4,1), nên nó thắng và trả chữ về màu link xanh mặc định của
Bootstrap, gần như không đọc được trên nền primary-soft.
Selector dưới đây đạt (0,6,1) nên giành lại. */
nav.sidenav.navbar .navbar-nav .nav-item.active > .nav-link,
nav.sidenav.navbar .navbar-nav .nav-link.active,
nav.sidenav.navbar .navbar-nav .active > .nav-link {
color: var(--primary) !important;
background: var(--primary-soft) !important;
}
nav.sidenav.navbar .navbar-nav .nav-item .nav-link:hover {
color: var(--foreground) !important;
}
/* ══════════════════════════════════════════════════════════
31. ICON: giữ chỗ sẵn
feather.js thay thành