/* Giao dien Cyberpunk - CHI co hieu luc khi .
Toan bo style.css (giao dien goc) khong bi dong toi - bat/tat qua nut chuyen o navbar,
luu trong localStorage, khong can tai lai trang. */
:root[data-theme="cyberpunk"] {
--cp-bg: #0a0e27;
--cp-bg-deep: #05060f;
--cp-panel: #0d1330;
--cp-panel-light: #131a3d;
--cp-cyan: #00f0ff;
--cp-magenta: #ff2ec4;
--cp-purple: #b537f2;
--cp-yellow: #f4ff61;
--cp-text: #e8f4ff;
--cp-text-dim: #8896b8;
--cp-border: rgba(0, 240, 255, 0.35);
--cp-danger: #ff2ec4;
--cp-success: #39ffb0;
}
:root[data-theme="cyberpunk"] body {
background-color: var(--cp-bg);
background-image:
repeating-linear-gradient(0deg, rgba(0, 240, 255, 0.025) 0px, rgba(0, 240, 255, 0.025) 1px, transparent 1px, transparent 3px),
radial-gradient(ellipse at top, rgba(181, 55, 242, 0.15), transparent 55%),
radial-gradient(ellipse at bottom, rgba(0, 240, 255, 0.1), transparent 55%);
color: var(--cp-text);
font-family: "Share Tech Mono", "IBM Plex Sans", monospace;
}
:root[data-theme="cyberpunk"] h1,
:root[data-theme="cyberpunk"] h2,
:root[data-theme="cyberpunk"] h3,
:root[data-theme="cyberpunk"] h4,
:root[data-theme="cyberpunk"] h5,
:root[data-theme="cyberpunk"] h6,
:root[data-theme="cyberpunk"] .navbar-brand {
font-family: "Orbitron", "Inter", sans-serif;
color: var(--cp-text);
text-shadow: 0 0 6px rgba(0, 240, 255, 0.6), 0 0 18px rgba(0, 240, 255, 0.25);
}
:root[data-theme="cyberpunk"] a {
color: var(--cp-cyan);
}
:root[data-theme="cyberpunk"] .text-muted {
color: var(--cp-text-dim) !important;
}
/* ---------- Theme toggle dropdown ---------- */
.theme-toggle-btn {
border-radius: var(--radius, 8px);
}
:root[data-theme="cyberpunk"] .dropdown-menu {
background-color: var(--cp-panel);
border: 1px solid var(--cp-border);
border-radius: 2px;
box-shadow: 0 0 24px rgba(0, 240, 255, 0.2);
}
:root[data-theme="cyberpunk"] .dropdown-item {
color: var(--cp-text);
}
:root[data-theme="cyberpunk"] .dropdown-item:hover,
:root[data-theme="cyberpunk"] .dropdown-item:focus {
background-color: rgba(0, 240, 255, 0.1);
color: var(--cp-cyan);
}
:root[data-theme="cyberpunk"] .dropdown-item.active {
background-color: var(--cp-cyan);
color: var(--cp-bg-deep);
}
/* ---------- Header ---------- */
:root[data-theme="cyberpunk"] .navbar.app-navbar {
background-color: var(--cp-bg-deep) !important;
border-bottom: 1px solid var(--cp-border);
box-shadow: 0 1px 20px rgba(0, 240, 255, 0.15);
}
:root[data-theme="cyberpunk"] .app-navbar .navbar-brand {
color: var(--cp-cyan) !important;
}
:root[data-theme="cyberpunk"] .app-navbar .nav-link {
color: var(--cp-text) !important;
}
:root[data-theme="cyberpunk"] .app-navbar .nav-link:hover {
color: var(--cp-magenta) !important;
text-shadow: 0 0 8px rgba(255, 46, 196, 0.7);
}
:root[data-theme="cyberpunk"] .app-navbar .navbar-text {
color: var(--cp-text-dim) !important;
}
:root[data-theme="cyberpunk"] .navbar-toggler {
border-color: var(--cp-border);
filter: invert(1);
}
/* ---------- Buttons ---------- */
:root[data-theme="cyberpunk"] .btn {
border-radius: 2px;
clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
font-family: "Orbitron", "Inter", sans-serif;
letter-spacing: 0.05em;
}
:root[data-theme="cyberpunk"] .btn-primary {
background-color: transparent;
border: 1px solid var(--cp-magenta);
color: var(--cp-magenta);
text-shadow: 0 0 6px rgba(255, 46, 196, 0.6);
}
:root[data-theme="cyberpunk"] .btn-primary:hover,
:root[data-theme="cyberpunk"] .btn-primary:focus {
background-color: var(--cp-magenta);
color: var(--cp-bg-deep);
text-shadow: none;
box-shadow: 0 0 20px rgba(255, 46, 196, 0.7);
}
:root[data-theme="cyberpunk"] .btn-outline-secondary {
background-color: transparent;
border: 1px solid var(--cp-cyan);
color: var(--cp-cyan);
}
:root[data-theme="cyberpunk"] .btn-outline-secondary:hover {
background-color: var(--cp-cyan);
color: var(--cp-bg-deep);
box-shadow: 0 0 20px rgba(0, 240, 255, 0.7);
}
:root[data-theme="cyberpunk"] .btn-outline-danger {
border-color: var(--cp-magenta);
color: var(--cp-magenta);
}
:root[data-theme="cyberpunk"] .btn-outline-danger:hover {
background-color: var(--cp-magenta);
color: var(--cp-bg-deep);
}
:root[data-theme="cyberpunk"] .btn-outline-primary {
border-color: var(--cp-purple);
color: var(--cp-purple);
}
:root[data-theme="cyberpunk"] .btn-outline-primary:hover {
background-color: var(--cp-purple);
color: var(--cp-bg-deep);
}
/* ---------- Cards ---------- */
:root[data-theme="cyberpunk"] .card {
background-color: var(--cp-panel);
border: 1px solid var(--cp-border);
border-radius: 2px;
box-shadow: 0 0 0 1px rgba(0, 240, 255, 0.06), 0 8px 24px rgba(0, 0, 0, 0.5);
color: var(--cp-text);
}
:root[data-theme="cyberpunk"] a.card-link-hover:hover {
box-shadow: 0 0 24px rgba(0, 240, 255, 0.35);
}
:root[data-theme="cyberpunk"] .card-title {
color: var(--cp-text);
}
/* ---------- Modal ---------- */
:root[data-theme="cyberpunk"] .modal-content {
background-color: var(--cp-panel);
border: 1px solid var(--cp-border);
border-radius: 2px;
box-shadow: 0 0 40px rgba(0, 240, 255, 0.15);
}
:root[data-theme="cyberpunk"] .modal-header {
border-bottom: 1px solid var(--cp-border);
}
:root[data-theme="cyberpunk"] .modal-title {
color: var(--cp-cyan);
text-shadow: 0 0 6px rgba(0, 240, 255, 0.6);
}
:root[data-theme="cyberpunk"] .modal-body {
color: var(--cp-text);
}
:root[data-theme="cyberpunk"] .btn-close {
filter: invert(1);
}
/* ---------- Badges / status ---------- */
:root[data-theme="cyberpunk"] .badge-status {
background-color: rgba(0, 240, 255, 0.1);
color: var(--cp-cyan);
border: 1px solid var(--cp-cyan);
border-radius: 2px;
text-shadow: 0 0 4px rgba(0, 240, 255, 0.6);
}
:root[data-theme="cyberpunk"] .badge-status.on-hero {
background-color: rgba(255, 46, 196, 0.12);
color: var(--cp-magenta);
border: 1px solid var(--cp-magenta);
text-shadow: 0 0 4px rgba(255, 46, 196, 0.6);
}
/* ---------- Back link ---------- */
:root[data-theme="cyberpunk"] .back-link {
background-color: rgba(0, 240, 255, 0.05);
border-color: var(--cp-cyan);
color: var(--cp-cyan);
text-shadow: 0 0 4px rgba(0, 240, 255, 0.5);
}
:root[data-theme="cyberpunk"] .back-link:hover {
color: var(--cp-magenta);
border-color: var(--cp-magenta);
box-shadow: 0 0 12px rgba(255, 46, 196, 0.4);
text-shadow: 0 0 4px rgba(255, 46, 196, 0.6);
}
:root[data-theme="cyberpunk"] .back-link-icon {
background-color: rgba(0, 240, 255, 0.1);
color: var(--cp-cyan);
}
:root[data-theme="cyberpunk"] .back-link:hover .back-link-icon {
background-color: var(--cp-magenta);
color: var(--cp-bg-deep);
}
/* ---------- Hero ---------- */
:root[data-theme="cyberpunk"] .hero-cover {
background-color: var(--cp-bg-deep);
}
:root[data-theme="cyberpunk"] .hero-cover::before {
background: linear-gradient(180deg, rgba(181, 55, 242, 0.25) 0%, rgba(5, 6, 15, 0.92) 100%);
}
:root[data-theme="cyberpunk"] .hero-eyebrow {
color: var(--cp-magenta);
text-shadow: 0 0 6px rgba(255, 46, 196, 0.6);
}
:root[data-theme="cyberpunk"] .hero-cover h1 {
color: #fff;
text-shadow: 0 0 10px var(--cp-cyan), 0 0 30px rgba(0, 240, 255, 0.5);
}
:root[data-theme="cyberpunk"] .hero-sub {
color: rgba(232, 244, 255, 0.85);
}
/* ---------- Section icon badges ---------- */
:root[data-theme="cyberpunk"] .section-icon {
border-radius: 2px;
box-shadow: 0 0 16px rgba(0, 240, 255, 0.3);
}
:root[data-theme="cyberpunk"] .section-icon.icon-thu-chi {
background: linear-gradient(135deg, var(--cp-magenta), #7a0d5e);
}
:root[data-theme="cyberpunk"] .section-icon.icon-nhat-ky {
background: linear-gradient(135deg, var(--cp-cyan), #036c78);
}
:root[data-theme="cyberpunk"] .section-icon.icon-ho-so {
background: linear-gradient(135deg, var(--cp-purple), #4a1275);
}
/* ---------- Stat tiles ---------- */
:root[data-theme="cyberpunk"] .stat-tile {
background: var(--cp-panel-light);
border: 1px solid var(--cp-border);
border-radius: 2px;
}
:root[data-theme="cyberpunk"] .stat-tile:hover {
box-shadow: 0 0 20px rgba(0, 240, 255, 0.25);
}
:root[data-theme="cyberpunk"] .stat-tile .stat-value {
font-family: "Orbitron", sans-serif;
color: var(--cp-cyan);
text-shadow: 0 0 8px rgba(0, 240, 255, 0.6);
}
:root[data-theme="cyberpunk"] .stat-tile.positive .stat-value {
color: var(--cp-success);
text-shadow: 0 0 8px rgba(57, 255, 176, 0.6);
}
:root[data-theme="cyberpunk"] .stat-tile.negative .stat-value {
color: var(--cp-magenta);
text-shadow: 0 0 8px rgba(255, 46, 196, 0.6);
}
:root[data-theme="cyberpunk"] .stat-tile .stat-label {
color: var(--cp-text-dim);
}
/* ---------- Progress bar (ty le chi/thu) ---------- */
:root[data-theme="cyberpunk"] .progress {
background-color: var(--cp-panel-light);
border: 1px solid var(--cp-border);
border-radius: 2px;
}
:root[data-theme="cyberpunk"] .progress-bar {
background-color: var(--cp-magenta);
box-shadow: 0 0 10px rgba(255, 46, 196, 0.6);
}
:root[data-theme="cyberpunk"] .progress-bar.bg-danger {
background-color: var(--cp-yellow) !important;
box-shadow: 0 0 10px rgba(244, 255, 97, 0.6);
}
/* ---------- Tx card list (Thu-Chi mobile) ---------- */
:root[data-theme="cyberpunk"] .tx-card {
background-color: var(--cp-panel);
border: 1px solid var(--cp-border);
}
:root[data-theme="cyberpunk"] .tx-card-date {
color: var(--cp-text-dim);
}
:root[data-theme="cyberpunk"] .tx-card-amount.text-success {
color: var(--cp-cyan) !important;
text-shadow: 0 0 6px rgba(0, 240, 255, 0.5);
}
:root[data-theme="cyberpunk"] .tx-card-amount.text-danger {
color: var(--cp-magenta) !important;
text-shadow: 0 0 6px rgba(255, 46, 196, 0.5);
}
/* ---------- Forms ---------- */
:root[data-theme="cyberpunk"] .form-control,
:root[data-theme="cyberpunk"] .form-select {
background-color: var(--cp-panel);
border: 1px solid var(--cp-border);
color: var(--cp-text);
border-radius: 2px;
}
:root[data-theme="cyberpunk"] .form-control:focus,
:root[data-theme="cyberpunk"] .form-select:focus {
background-color: var(--cp-panel);
color: var(--cp-text);
border-color: var(--cp-cyan);
box-shadow: 0 0 0 0.2rem rgba(0, 240, 255, 0.25);
}
:root[data-theme="cyberpunk"] .form-control::placeholder {
color: var(--cp-text-dim);
opacity: 0.7;
}
:root[data-theme="cyberpunk"] .form-label {
color: var(--cp-text-dim);
}
:root[data-theme="cyberpunk"] .form-check-input {
background-color: var(--cp-panel);
border-color: var(--cp-border);
}
:root[data-theme="cyberpunk"] .form-check-input:checked {
background-color: var(--cp-cyan);
border-color: var(--cp-cyan);
}
/* ---------- Tables ---------- */
:root[data-theme="cyberpunk"] .table {
color: var(--cp-text);
border-color: var(--cp-border);
}
:root[data-theme="cyberpunk"] .table > :not(caption) > * > * {
background-color: transparent;
color: var(--cp-text);
border-bottom-color: var(--cp-border);
}
:root[data-theme="cyberpunk"] .table thead th {
background-color: var(--cp-panel-light) !important;
color: var(--cp-cyan);
font-weight: 700;
}
/* ---------- Alerts ---------- */
:root[data-theme="cyberpunk"] .alert-success {
background-color: rgba(57, 255, 176, 0.1);
border-color: var(--cp-success);
color: var(--cp-success);
}
:root[data-theme="cyberpunk"] .alert-danger {
background-color: rgba(255, 46, 196, 0.1);
border-color: var(--cp-magenta);
color: var(--cp-magenta);
}
:root[data-theme="cyberpunk"] .alert-warning {
background-color: rgba(244, 255, 97, 0.1);
border-color: var(--cp-yellow);
color: var(--cp-yellow);
}
:root[data-theme="cyberpunk"] .border-danger {
border-color: var(--cp-magenta) !important;
box-shadow: 0 0 12px rgba(255, 46, 196, 0.35);
}
/* ---------- Misc ---------- */
:root[data-theme="cyberpunk"] .card-img-top {
filter: saturate(1.3) contrast(1.05);
}
:root[data-theme="cyberpunk"] .progress-thumb,
:root[data-theme="cyberpunk"] .photo-preview-item .progress-thumb {
border: 1px solid var(--cp-border);
border-radius: 2px;
}
/* ---------- Lich tien do thi cong + moc thu tien (thay the ban Gantt truoc do) ---------- */
:root[data-theme="cyberpunk"] .progress-cal-legend {
color: var(--cp-text-dim);
}
:root[data-theme="cyberpunk"] .progress-cal-month-label {
color: var(--cp-text);
text-shadow: 0 0 6px rgba(0, 240, 255, 0.4);
}
:root[data-theme="cyberpunk"] .progress-cal-weekdays span {
color: var(--cp-text-dim);
}
:root[data-theme="cyberpunk"] .progress-cal-payment-icon {
color: var(--cp-cyan);
text-shadow: 0 0 6px rgba(0, 240, 255, 0.6);
}
:root[data-theme="cyberpunk"] .progress-cal-day {
background: var(--cp-panel-light);
border-color: var(--cp-border);
color: var(--cp-text);
}
:root[data-theme="cyberpunk"] .progress-cal-day.is-today {
outline-color: var(--cp-cyan);
}
:root[data-theme="cyberpunk"] .progress-cal-dot.is-done {
background: var(--cp-success);
box-shadow: 0 0 8px rgba(57, 255, 176, 0.5);
}
:root[data-theme="cyberpunk"] .progress-cal-day.is-done {
background: rgba(57, 255, 176, 0.14);
border-color: var(--cp-success);
color: var(--cp-success);
}
:root[data-theme="cyberpunk"] .progress-cal-dot.is-overdue {
background: var(--cp-magenta);
box-shadow: 0 0 8px rgba(255, 46, 196, 0.5);
}
:root[data-theme="cyberpunk"] .progress-cal-day.is-overdue {
background: rgba(255, 46, 196, 0.14);
border-color: var(--cp-magenta);
color: var(--cp-magenta);
}
:root[data-theme="cyberpunk"] .progress-cal-dot.is-pending {
background: var(--cp-yellow);
box-shadow: 0 0 8px rgba(244, 255, 97, 0.5);
}
:root[data-theme="cyberpunk"] .progress-notify-box {
background: var(--cp-panel-light);
}
:root[data-theme="cyberpunk"] .progress-notify-photo-btn {
background: transparent;
border-color: var(--cp-border);
color: var(--cp-text);
}
:root[data-theme="cyberpunk"] .progress-notify-photo-btn:hover {
background: rgba(0, 240, 255, 0.12);
}
:root[data-theme="cyberpunk"] .progress-cal-day.is-pending {
background: rgba(244, 255, 97, 0.14);
border-color: var(--cp-yellow);
color: var(--cp-yellow);
}
:root[data-theme="cyberpunk"] .progress-cal-summary-dot {
background: var(--cp-success);
box-shadow: 0 0 6px rgba(57, 255, 176, 0.6);
}
:root[data-theme="cyberpunk"] .stat-summary-sticky {
background-color: var(--cp-bg);
}
:root[data-theme="cyberpunk"] .filter-active-dot {
background: var(--cp-magenta);
}