/* Giao dien Hello Kitty - CHI co hieu luc khi . Toan bo style.css (giao dien goc) khong bi dong toi - bat/tat qua dropdown chon giao dien o navbar, luu trong localStorage, khong can tai lai trang. */ :root[data-theme="hellokitty"] { --hk-bg: #fff0f5; --hk-bg-deep: #ffd6e8; --hk-panel: #ffffff; --hk-panel-light: #fff5f9; --hk-pink: #ff6fa5; --hk-pink-deep: #e0417a; --hk-red: #ff3366; --hk-yellow: #ffd93d; --hk-text: #5a3d47; --hk-text-dim: #b98aa0; --hk-border: #ffc2d9; --hk-success: #4bc98a; } :root[data-theme="hellokitty"] body { background-color: var(--hk-bg); background-image: radial-gradient(circle, rgba(255, 111, 165, 0.13) 2px, transparent 2.5px), radial-gradient(ellipse at top, rgba(255, 217, 61, 0.18), transparent 55%), radial-gradient(ellipse at bottom, rgba(255, 111, 165, 0.16), transparent 55%); background-size: 26px 26px, auto, auto; color: var(--hk-text); font-family: "Quicksand", "IBM Plex Sans", sans-serif; } :root[data-theme="hellokitty"] h1, :root[data-theme="hellokitty"] h2, :root[data-theme="hellokitty"] h3, :root[data-theme="hellokitty"] h4, :root[data-theme="hellokitty"] h5, :root[data-theme="hellokitty"] h6, :root[data-theme="hellokitty"] .navbar-brand { font-family: "Baloo 2", "Inter", sans-serif; color: var(--hk-pink-deep); text-shadow: 0 1px 0 #fff; } :root[data-theme="hellokitty"] a { color: var(--hk-pink-deep); } :root[data-theme="hellokitty"] .text-muted { color: var(--hk-text-dim) !important; } /* ---------- Theme toggle dropdown ---------- */ .theme-toggle-btn { border-radius: var(--radius, 8px); } :root[data-theme="hellokitty"] .dropdown-menu { background-color: var(--hk-panel); border: 1px solid var(--hk-border); border-radius: 16px; box-shadow: 0 8px 24px rgba(224, 65, 122, 0.2); } :root[data-theme="hellokitty"] .dropdown-item { color: var(--hk-text); border-radius: 10px; } :root[data-theme="hellokitty"] .dropdown-item:hover, :root[data-theme="hellokitty"] .dropdown-item:focus { background-color: var(--hk-bg-deep); color: var(--hk-pink-deep); } :root[data-theme="hellokitty"] .dropdown-item.active { background-color: var(--hk-pink); color: #fff; } /* ---------- Header ---------- */ :root[data-theme="hellokitty"] .navbar.app-navbar { background-color: var(--hk-panel) !important; border-bottom: 3px solid var(--hk-pink); box-shadow: 0 4px 16px rgba(255, 111, 165, 0.25); } :root[data-theme="hellokitty"] .app-navbar .navbar-brand { color: var(--hk-pink-deep) !important; } :root[data-theme="hellokitty"] .app-navbar .nav-link { color: var(--hk-text) !important; } :root[data-theme="hellokitty"] .app-navbar .nav-link:hover { color: var(--hk-pink-deep) !important; } :root[data-theme="hellokitty"] .app-navbar .navbar-text { color: var(--hk-text-dim) !important; } :root[data-theme="hellokitty"] .navbar-toggler { border-color: var(--hk-border); } /* ---------- Buttons ---------- */ :root[data-theme="hellokitty"] .btn { border-radius: 999px; font-family: "Baloo 2", "Inter", sans-serif; font-weight: 600; } :root[data-theme="hellokitty"] .btn-primary { background-color: var(--hk-pink); border: none; color: #fff; box-shadow: 0 3px 0 var(--hk-pink-deep); } :root[data-theme="hellokitty"] .btn-primary:hover, :root[data-theme="hellokitty"] .btn-primary:focus { background-color: var(--hk-pink-deep); color: #fff; box-shadow: 0 2px 0 #a02c58; transform: translateY(1px); } :root[data-theme="hellokitty"] .btn-outline-secondary { background-color: #fff; border: 2px solid var(--hk-border); color: var(--hk-pink-deep); } :root[data-theme="hellokitty"] .btn-outline-secondary:hover { background-color: var(--hk-pink); border-color: var(--hk-pink); color: #fff; } :root[data-theme="hellokitty"] .btn-outline-danger { border: 2px solid var(--hk-red); color: var(--hk-red); } :root[data-theme="hellokitty"] .btn-outline-danger:hover { background-color: var(--hk-red); color: #fff; } :root[data-theme="hellokitty"] .btn-outline-primary { border: 2px solid var(--hk-pink); color: var(--hk-pink-deep); } :root[data-theme="hellokitty"] .btn-outline-primary:hover { background-color: var(--hk-pink); color: #fff; } /* ---------- Cards ---------- */ :root[data-theme="hellokitty"] .card { background-color: var(--hk-panel); border: 2px solid var(--hk-border); border-radius: 20px; box-shadow: 0 6px 18px rgba(255, 111, 165, 0.18); color: var(--hk-text); } :root[data-theme="hellokitty"] a.card-link-hover:hover { box-shadow: 0 10px 26px rgba(255, 111, 165, 0.3); } :root[data-theme="hellokitty"] .card-title { color: var(--hk-pink-deep); } /* ---------- Modal ---------- */ :root[data-theme="hellokitty"] .modal-content { background-color: var(--hk-panel); border: 2px solid var(--hk-border); border-radius: 24px; box-shadow: 0 12px 40px rgba(255, 111, 165, 0.3); } :root[data-theme="hellokitty"] .modal-header { border-bottom: 2px dashed var(--hk-border); } :root[data-theme="hellokitty"] .modal-title { color: var(--hk-pink-deep); font-family: "Baloo 2", "Inter", sans-serif; } :root[data-theme="hellokitty"] .modal-body { color: var(--hk-text); } /* ---------- Badges / status ---------- */ :root[data-theme="hellokitty"] .badge-status { background-color: var(--hk-bg-deep); color: var(--hk-pink-deep); border: 1px solid var(--hk-pink); border-radius: 999px; } :root[data-theme="hellokitty"] .badge-status.on-hero { background-color: rgba(255, 255, 255, 0.85); color: var(--hk-pink-deep); border: 1px solid #fff; } /* ---------- Back link ---------- */ :root[data-theme="hellokitty"] .back-link { background-color: #fff; border-color: var(--hk-border); color: var(--hk-pink-deep); } :root[data-theme="hellokitty"] .back-link:hover { color: #fff; border-color: var(--hk-pink); background-color: var(--hk-pink); } :root[data-theme="hellokitty"] .back-link-icon { background-color: var(--hk-bg-deep); color: var(--hk-pink-deep); } :root[data-theme="hellokitty"] .back-link:hover .back-link-icon { background-color: #fff; color: var(--hk-pink-deep); } /* ---------- Hero ---------- */ :root[data-theme="hellokitty"] .hero-cover { background-color: var(--hk-pink); } :root[data-theme="hellokitty"] .hero-cover::before { background: linear-gradient(180deg, rgba(255, 111, 165, 0.35) 0%, rgba(90, 61, 71, 0.82) 100%); } :root[data-theme="hellokitty"] .hero-eyebrow { color: var(--hk-yellow); } :root[data-theme="hellokitty"] .hero-cover h1 { color: #fff; text-shadow: 0 2px 10px rgba(90, 61, 71, 0.6); } :root[data-theme="hellokitty"] .hero-sub { color: rgba(255, 255, 255, 0.9); } /* ---------- Section icon badges ---------- */ :root[data-theme="hellokitty"] .section-icon { border-radius: 18px; box-shadow: 0 4px 14px rgba(255, 111, 165, 0.3); } :root[data-theme="hellokitty"] .section-icon.icon-thu-chi { background: linear-gradient(135deg, var(--hk-red), var(--hk-pink-deep)); } :root[data-theme="hellokitty"] .section-icon.icon-nhat-ky { background: linear-gradient(135deg, var(--hk-pink), #ff9ec4); } :root[data-theme="hellokitty"] .section-icon.icon-ho-so { background: linear-gradient(135deg, var(--hk-yellow), #ffb347); } /* ---------- Stat tiles ---------- */ :root[data-theme="hellokitty"] .stat-tile { background: var(--hk-panel-light); border: 2px solid var(--hk-border); border-radius: 18px; } :root[data-theme="hellokitty"] .stat-tile:hover { box-shadow: 0 8px 20px rgba(255, 111, 165, 0.25); } :root[data-theme="hellokitty"] .stat-tile .stat-value { font-family: "Baloo 2", sans-serif; color: var(--hk-pink-deep); } :root[data-theme="hellokitty"] .stat-tile.positive .stat-value { color: var(--hk-success); } :root[data-theme="hellokitty"] .stat-tile.negative .stat-value { color: var(--hk-red); } :root[data-theme="hellokitty"] .stat-tile .stat-label { color: var(--hk-text-dim); } /* ---------- Progress bar (ty le chi/thu) ---------- */ :root[data-theme="hellokitty"] .progress { background-color: var(--hk-bg-deep); border-radius: 999px; } :root[data-theme="hellokitty"] .progress-bar { background-color: var(--hk-pink); border-radius: 999px; } :root[data-theme="hellokitty"] .progress-bar.bg-danger { background-color: var(--hk-red) !important; } /* ---------- Tx card list (Thu-Chi mobile) ---------- */ :root[data-theme="hellokitty"] .tx-card { background-color: var(--hk-panel); border: 2px solid var(--hk-border); border-radius: 16px; } :root[data-theme="hellokitty"] .tx-card-date { color: var(--hk-text-dim); } :root[data-theme="hellokitty"] .tx-card-amount.text-success { color: var(--hk-success) !important; } :root[data-theme="hellokitty"] .tx-card-amount.text-danger { color: var(--hk-red) !important; } /* ---------- Forms ---------- */ :root[data-theme="hellokitty"] .form-control, :root[data-theme="hellokitty"] .form-select { background-color: #fff; border: 2px solid var(--hk-border); color: var(--hk-text); border-radius: 12px; } :root[data-theme="hellokitty"] .form-control:focus, :root[data-theme="hellokitty"] .form-select:focus { background-color: #fff; color: var(--hk-text); border-color: var(--hk-pink); box-shadow: 0 0 0 0.2rem rgba(255, 111, 165, 0.25); } :root[data-theme="hellokitty"] .form-control::placeholder { color: var(--hk-text-dim); opacity: 0.8; } :root[data-theme="hellokitty"] .form-label { color: var(--hk-pink-deep); font-weight: 600; } :root[data-theme="hellokitty"] .form-check-input { background-color: #fff; border-color: var(--hk-border); } :root[data-theme="hellokitty"] .form-check-input:checked { background-color: var(--hk-pink); border-color: var(--hk-pink); } /* ---------- Tables ---------- */ :root[data-theme="hellokitty"] .table { color: var(--hk-text); border-color: var(--hk-border); } :root[data-theme="hellokitty"] .table > :not(caption) > * > * { background-color: transparent; color: var(--hk-text); border-bottom-color: var(--hk-border); } :root[data-theme="hellokitty"] .table thead th { background-color: var(--hk-panel-light) !important; color: var(--hk-pink-deep); font-weight: 700; } /* ---------- Alerts ---------- */ :root[data-theme="hellokitty"] .alert-success { background-color: rgba(75, 201, 138, 0.15); border-color: var(--hk-success); color: #2c7a52; } :root[data-theme="hellokitty"] .alert-danger { background-color: rgba(255, 51, 102, 0.12); border-color: var(--hk-red); color: var(--hk-pink-deep); } :root[data-theme="hellokitty"] .alert-warning { background-color: rgba(255, 217, 61, 0.25); border-color: var(--hk-yellow); color: #8a6d00; } :root[data-theme="hellokitty"] .border-danger { border-color: var(--hk-red) !important; box-shadow: 0 0 0 3px rgba(255, 51, 102, 0.15); } /* ---------- Empty-state icons ---------- */ :root[data-theme="hellokitty"] .empty-state-msg::before { content: "🐾 "; } /* ---------- Cute button accent (nut chinh chua co emoji rieng) ---------- */ :root[data-theme="hellokitty"] .btn-cute::before { content: "🎀 "; } /* ---------- Misc ---------- */ :root[data-theme="hellokitty"] .card-img-top { filter: saturate(1.1) brightness(1.03); } :root[data-theme="hellokitty"] .progress-thumb, :root[data-theme="hellokitty"] .photo-preview-item .progress-thumb { border: 2px solid var(--hk-border); border-radius: 12px; } :root[data-theme="hellokitty"] .stat-summary-sticky { background-color: var(--hk-bg); } :root[data-theme="hellokitty"] .filter-active-dot { background: var(--hk-red); }