/* ===================================================================== WebDayHoc - CSS riêng, bổ sung cho Bootstrap 5. QUY TẮC MÀU (09/2026): toàn bộ màu của giao diện nằm ở nhóm biến trong khối :root ngay bên dưới. Phần còn lại của file KHÔNG được viết thẳng mã màu nữa, chỉ dùng var(--...). Nhờ vậy đổi cả bộ mặt website chỉ là đổi một khối biến. Mười bảng màu nằm ở cuối file, dạng html[data-theme="..."]. Admin chọn bảng màu ở Quản trị → Cấu hình, giá trị lưu trong Settings["Site.Theme"], master page gắn vào thuộc tính data-theme của thẻ . Không chọn gì thì dùng :root, tức bảng "green". ===================================================================== */ :root { /* --- Màu thương hiệu --- */ --brand: #2c4a41; /* nút chính, chữ thương hiệu, link */ --brand-2: #25403a; /* đậm hơn, dùng cho hover */ --on-brand: #ffffff; /* chữ đặt trên nền brand */ --accent: #e0a940; /* màu nhấn: nút phụ, nhãn, mục đang chọn */ --accent-2: #c9922c; /* đậm hơn, dùng cho hover */ --on-accent: #2c2109; /* chữ đặt trên nền accent */ /* --- Mặt phẳng và chữ --- */ --page-bg: #f4f8f6; /* nền toàn trang */ --card: #ffffff; /* nền thẻ, panel, bong bóng chat */ --soft-bg: #f4f8f6; /* nền phụ nhạt: ô lịch, khung chat, khối hướng dẫn */ --border-soft: #eef2f0; /* viền panel, thẻ, kẻ ngang trong bảng */ --text-dark: #1e2e29; /* chữ chính */ --text-muted: #7c8e88; /* chữ phụ, ghi chú */ /* --- Banner đầu trang chủ --- */ --hero-bg: #2c4a41; --hero-title: #ffffff; --hero-text: #cdded8; --hero-border: transparent; /* chỉ bảng màu nền trắng mới cần viền */ --hero-btn-bg: #e0a940; /* nút "Xem khóa học" */ --hero-btn-text: #2c2109; --hero-outline: #cfe0d9; /* viền nút phụ trên banner */ --hero-blob: rgba(224, 169, 64, .85); /* đốm trang trí góc banner */ /* --- Thanh menu trên (khu vực công khai) --- */ --topbar-bg: #ffffff; --topbar-border: #dbe5e0; --topbar-brand: #2c4a41; --topbar-link: #4f6b62; --topbar-link-active: #2c4a41; /* --- Menu trái (khu vực đăng nhập) --- */ --sidebar-bg: #eaf4ef; --sidebar-link: #4f6b62; --sidebar-muted: #7c8e88; /* dòng vai trò, nhãn "LƯỢT TRUY CẬP" */ --sidebar-title: #2c4a41; /* tên người đăng nhập */ --sidebar-strong: #2c4a41; /* con số lượt truy cập */ --sidebar-hover-bg: #ffffff; --sidebar-active-bg: #e0a940; --sidebar-active-text: #2c2109; --sidebar-sep: #d6e4dc; --side-blob: rgba(224, 169, 64, .3); --avatar-bg: #1a2b26; /* vòng tròn chữ cái đầu ở menu trái */ /* --- Nền tối dùng cho thẻ số liệu tối, nhãn ngôn ngữ code --- */ --dark-surface: #25403a; --on-dark: #eaf3f0; /* --- Nhãn tròn (chip) --- */ --chip-grey-bg: #dfe8e5; --chip-mint: #7fae9e; --chip-teal: #3c6259; --chip-danger: #b94a48; --highlight-bg: #fff6e3; /* ô lịch hôm nay, thẻ giảng viên */ /* --- Hiệu ứng --- */ --focus-shadow: rgba(127, 174, 158, .3); --app-shadow: rgba(30, 50, 45, .12); --bubble-shadow: rgba(0, 0, 0, .05); /* --- Màu cố định, KHÔNG đổi theo bảng màu --- */ --danger-text: #dc3545; /* chữ báo lỗi form, chuẩn Bootstrap */ --zalo-blue: #0068ff; /* màu thương hiệu Zalo */ --fb-blue: #1877f2; /* màu thương hiệu Facebook */ --on-fixed: #ffffff; /* chữ đặt trên hai màu thương hiệu trên */ } body { font-family: 'Segoe UI', Arial, sans-serif; background: var(--page-bg); color: var(--text-dark); } a { color: var(--brand); } /* ---------- Ghi đè màu Bootstrap ---------- */ .btn-primary { --bs-btn-bg: var(--brand); --bs-btn-border-color: var(--brand); --bs-btn-color: var(--on-brand); --bs-btn-hover-bg: var(--brand-2); --bs-btn-hover-border-color: var(--brand-2); --bs-btn-hover-color: var(--on-brand); --bs-btn-active-bg: var(--brand-2); --bs-btn-active-border-color: var(--brand-2); } .btn-gold { background: var(--accent); color: var(--on-accent); font-weight: 600; border: none; } .btn-gold:hover { background: var(--accent-2); color: var(--on-accent); } .btn-outline-green { color: var(--brand); border-color: var(--brand); } .btn-outline-green:hover { background: var(--brand); border-color: var(--brand); color: var(--on-brand); } .form-control:focus, .form-select:focus { border-color: var(--chip-mint); box-shadow: 0 0 0 .2rem var(--focus-shadow); } .text-muted { color: var(--text-muted) !important; } /* ---------- Khu vực công khai: thanh menu trên ---------- */ form#form1 { display: flex; flex-direction: column; min-height: 100vh; } main.public { flex: 1 0 auto; } .topbar { background: var(--topbar-bg); border-bottom: 1px solid var(--topbar-border); } .topbar .navbar-brand { color: var(--topbar-brand); font-weight: 700; letter-spacing: .5px; } .topbar .navbar-brand .dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); margin-right: 8px; } .topbar .nav-link { color: var(--topbar-link); } .topbar .nav-link:hover, .topbar .nav-link.active { color: var(--topbar-link-active); } .topbar .dropdown-menu { border-radius: 14px; } .topbar .role-badge { background: var(--accent); color: var(--on-accent); font-weight: 600; } .hero { background: var(--hero-bg); color: var(--hero-text); border: 1px solid var(--hero-border); border-radius: 28px; padding: 48px; position: relative; overflow: hidden; } .hero .blob { position: absolute; top: -80px; right: -80px; width: 220px; height: 220px; border-radius: 50%; background: var(--hero-blob); } .hero h1 { color: var(--hero-title); position: relative; z-index: 2; } .hero .lead { color: var(--hero-text); position: relative; z-index: 2; } .hero .btn { position: relative; z-index: 2; } /* Hai nút trên banner phải đọc được cả khi banner nền tối lẫn nền sáng */ .btn-hero { background: var(--hero-btn-bg); color: var(--hero-btn-text); font-weight: 600; border: none; } .btn-hero:hover { background: var(--hero-btn-bg); color: var(--hero-btn-text); filter: brightness(.93); } .btn-hero-ghost { background: transparent; color: var(--hero-title); border: 1px solid var(--hero-outline); } .btn-hero-ghost:hover { background: var(--hero-outline); color: var(--hero-bg); border-color: var(--hero-outline); } footer.site-footer { color: var(--text-muted); font-size: 12.5px; } .visit-counter { display: inline-block; background: var(--chip-grey-bg); color: var(--brand); font-size: 11px; padding: 6px 12px; border-radius: 20px; } /* ---------- Thẻ số liệu (3 màu) ---------- */ .tcard { border-radius: 18px; padding: 20px; height: 100%; display: flex; align-items: center; justify-content: space-between; min-height: 88px; } .tcard.gold { background: var(--accent); color: var(--on-accent); } .tcard.white { background: var(--card); border: 1px solid var(--border-soft); } .tcard.white .label { color: var(--text-muted); } .tcard.dark { background: var(--dark-surface); color: var(--on-dark); } .tcard .label { font-size: 12.5px; font-weight: 600; opacity: .85; margin-bottom: 6px; } .tcard .value { font-size: 24px; font-weight: 700; line-height: 1; } .tcard .ic { font-size: 30px; } /* Dòng nhỏ tách người thật / bot dưới con số lớn */ .tcard .split { font-size: 10.5px; font-weight: 600; opacity: .7; margin-top: 5px; } /* ---------- Panel trắng ---------- */ .panel { background: var(--card); border-radius: 18px; padding: 22px; border: 1px solid var(--border-soft); } .panel h4 { font-size: 15px; margin-bottom: 2px; font-weight: 600; } .panel .sub { font-size: 11.5px; color: var(--text-muted); margin-bottom: 16px; } .panel table { width: 100%; border-collapse: collapse; font-size: 12.5px; } .panel th { text-align: left; color: var(--text-muted); font-weight: 600; font-size: 11px; padding-bottom: 10px; } .panel td { padding: 10px 6px 10px 0; border-top: 1px solid var(--border-soft); vertical-align: middle; } .panel .small-muted { font-size: 10.5px; color: var(--text-muted); } .chip { background: var(--accent); color: var(--on-accent); font-weight: 700; min-width: 24px; height: 24px; padding: 0 9px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; } .chip.dark { background: var(--dark-surface); color: var(--on-dark); } /* Nền mint nhạt nên chữ phải đậm, chữ trắng đọc không ra (lỗi có từ bản đầu) */ .chip.mint { background: var(--chip-mint); color: var(--text-dark); } .chip.grey { background: var(--chip-grey-bg); color: var(--text-dark); } .chip.green { background: var(--chip-teal); color: var(--on-brand); } .chip.red { background: var(--chip-danger); color: var(--on-brand); } /* Nội dung rich text do admin / giảng viên soạn */ .rich-text img { max-width: 100%; height: auto; } .rich-text p:last-child { margin-bottom: 0; } /* Ô honeypot chống spam: ẩn khỏi mắt người, bot điền vào sẽ bị bỏ qua */ .hp-field { position: absolute; left: -9999px; top: -9999px; width: 1px; height: 1px; opacity: 0; } /* Thẻ danh sách khóa học / tin tuyển dụng */ .panel h4 a { color: var(--text-dark); text-decoration: none; } .panel h4 a:hover { color: var(--brand); text-decoration: underline; } .form-panel { max-width: 640px; margin: 0 auto; } /* Khung đăng nhập / đổi mật khẩu */ .auth-card { max-width: 420px; margin: 2rem auto; } .field-validation-error { display: block; font-size: .875rem; color: var(--danger-text); margin-top: .25rem; } /* ---------- Biểu đồ cột (CSS thuần) ---------- */ .bars { display: flex; align-items: flex-end; gap: 10px; height: 130px; margin-top: 6px; } .bar-col { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 8px; flex: 1; height: 100%; } .bar { width: 14px; border-radius: 6px 6px 0 0; min-height: 2px; } .bar.d { background: var(--brand); } .bar.g { background: var(--accent); } .bar-col span { font-size: 10.5px; color: var(--text-muted); white-space: nowrap; } /* ---------- Biểu đồ tròn (CSS thuần) ---------- */ .donut-wrap { display: flex; align-items: center; gap: 20px; } .donut { width: 120px; height: 120px; border-radius: 50%; background: var(--chip-grey-bg); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .donut-inner { width: 70px; height: 70px; background: var(--card); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; text-align: center; font-weight: 600; color: var(--text-muted); } .legend div { display: flex; align-items: center; gap: 8px; font-size: 12px; margin-bottom: 8px; } .dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; } /* ---------- Bố cục dashboard: sidebar trái + nội dung phải ---------- */ .dash-wrap { padding: 28px; } .app { display: grid; grid-template-columns: 230px 1fr; gap: 22px; max-width: 1180px; margin: 0 auto; background: var(--card); border-radius: 28px; overflow: hidden; box-shadow: 0 20px 50px var(--app-shadow); min-height: calc(100vh - 56px); } .sidebar { background: var(--sidebar-bg); color: var(--sidebar-link); padding: 28px 20px; position: relative; overflow: hidden; } .sidebar .blob { position: absolute; top: -60px; left: -60px; width: 150px; height: 150px; border-radius: 50%; background: var(--side-blob); } .profile { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; text-align: center; margin-bottom: 30px; } .avatar { width: 64px; height: 64px; border-radius: 50%; background: var(--avatar-bg); border: 3px solid var(--accent); display: flex; align-items: center; justify-content: center; font-size: 22px; font-weight: 700; color: var(--accent); margin-bottom: 12px; } .profile h3 { color: var(--sidebar-title); font-size: 14px; letter-spacing: .5px; margin: 0; text-transform: uppercase; } .profile span { font-size: 11px; color: var(--sidebar-muted); margin-top: 2px; } .sidebar nav { position: relative; z-index: 2; } .snav-item { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-radius: 12px; font-size: 13.5px; color: var(--sidebar-link); margin-bottom: 6px; text-decoration: none; } a.snav-item:hover { background: var(--sidebar-hover-bg); color: var(--sidebar-title); } .snav-item .ic { width: 18px; text-align: center; } .snav-item.active { background: var(--sidebar-active-bg); color: var(--sidebar-active-text); font-weight: 600; } .snav-item.soon { opacity: .45; cursor: default; } .snav-item.soon small { margin-left: auto; font-size: 9px; letter-spacing: .5px; } .snav-sep { border: 0; border-top: 1px solid var(--sidebar-sep); margin: 12px 0; } .sidebar-bottom { margin-top: 28px; position: relative; z-index: 2; } .sidebar-bottom p { font-size: 10.5px; letter-spacing: 1px; color: var(--sidebar-muted); margin-bottom: 6px; } .sidebar-bottom .big { font-size: 26px; font-weight: 700; color: var(--sidebar-strong); line-height: 1; margin-bottom: 14px; } .app main { padding: 30px 30px 30px 0; } .page-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; gap: 12px; } .page-head h1 { font-size: 22px; font-weight: 700; margin: 0; } .page-head .sub { color: var(--text-muted); font-size: 12.5px; } .top-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-bottom: 22px; } .top-cards.four { grid-template-columns: repeat(4, 1fr); } .grid-mid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 18px; margin-bottom: 18px; } /* Phần tử trong lưới mặc định không co nhỏ hơn nội dung -> cho phép co để không tràn ngang */ .app main, .top-cards > *, .grid-mid > * { min-width: 0; } /* Thẻ số liệu đặt trực tiếp trong main (không nằm trong .top-cards) thì không kéo cao theo main */ .app main > .tcard { height: auto; } .bars { overflow: hidden; } @media (max-width: 900px) { .dash-wrap { padding: 12px; } .app { grid-template-columns: 1fr; min-height: 0; } .app main { padding: 24px; } .top-cards, .top-cards.four, .grid-mid { grid-template-columns: 1fr; } .hero { padding: 28px; } } /* ---------- Lịch tuần (học viên / giảng viên) ---------- */ .week-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; } .week-day { background: var(--soft-bg); border-radius: 12px; padding: 8px; min-height: 120px; min-width: 0; } .week-day.today { background: var(--highlight-bg); border: 1px solid var(--accent); } .week-day-head { display: flex; justify-content: space-between; align-items: baseline; font-size: 11px; color: var(--text-muted); margin-bottom: 6px; } .week-day-head strong { font-size: 13px; color: var(--text-dark); } .session-card { background: var(--card); border-left: 3px solid var(--brand); border-radius: 8px; padding: 6px 8px; margin-bottom: 6px; font-size: 11.5px; } .session-time { font-weight: 700; color: var(--brand); } .session-class { font-weight: 600; } .session-meta, .session-topic { color: var(--text-muted); font-size: 10.5px; } .session-topic { margin-top: 2px; } .session-empty { color: var(--text-muted); opacity: .65; text-align: center; padding-top: 20px; } @media (max-width: 900px) { .week-grid { grid-template-columns: repeat(2, 1fr); } } /* Danh sách bạn cùng lớp */ .mate-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; } .mate { display: flex; align-items: center; gap: 10px; background: var(--soft-bg); border-radius: 12px; padding: 8px 10px; } .mate .m-avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--brand); color: var(--accent); font-weight: 700; font-size: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .mate .m-name { font-weight: 600; font-size: 12.5px; } .mate .m-user { font-size: 10.5px; color: var(--text-muted); } .mate.teacher { background: var(--highlight-bg); } /* ---------- Nhắn tin ---------- */ .chat-wrap { display: grid; grid-template-columns: 280px 1fr; gap: 14px; } .chat-wrap > * { min-width: 0; } .chat-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; text-decoration: none; color: var(--text-dark); margin-bottom: 4px; } .chat-item:hover { background: var(--soft-bg); } .chat-item.active { background: var(--brand); color: var(--on-brand); } .chat-item.active .chat-sub { color: var(--on-brand); opacity: .75; } .chat-avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--chip-grey-bg); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .chat-item.active .chat-avatar { background: rgba(255, 255, 255, .15); } .chat-avatar.pf-zalo { background: var(--zalo-blue); color: var(--on-fixed); font-weight: 700; } .chat-avatar.pf-fb { background: var(--fb-blue); color: var(--on-fixed); font-weight: 700; } .chat-item-main { flex: 1; min-width: 0; } .chat-title { font-weight: 600; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .chat-sub { font-size: 11px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .chat-messages { height: 55vh; min-height: 320px; overflow-y: auto; background: var(--soft-bg); border-radius: 12px; padding: 12px; } .msg { display: flex; margin-bottom: 8px; } .msg.mine { justify-content: flex-end; } .msg-bubble { max-width: 75%; background: var(--card); border-radius: 12px; padding: 8px 10px; font-size: 13px; box-shadow: 0 1px 2px var(--bubble-shadow); } .msg.mine .msg-bubble { background: var(--accent); color: var(--on-accent); } .msg-sender { font-size: 11px; font-weight: 600; color: var(--brand); margin-bottom: 2px; } .msg-body { white-space: pre-wrap; word-wrap: break-word; } .msg-img { max-width: 240px; max-height: 240px; border-radius: 8px; display: block; margin-top: 4px; } .msg-deleted { font-style: italic; color: var(--text-muted); font-size: 12px; } .msg-time { font-size: 10px; color: var(--text-muted); text-align: right; margin-top: 2px; } .msg.mine .msg-time { color: var(--on-accent); opacity: .7; } .chat-composer { display: flex; gap: 6px; margin-top: 10px; align-items: flex-end; } .chat-composer textarea { flex: 1; resize: none; } @media (max-width: 900px) { .chat-wrap { grid-template-columns: 1fr; } .chat-messages { height: 45vh; } } /* ---------- Các khối nội dung trang chủ ---------- Mỗi khối là một
độc lập, tự chừa khoảng cách dưới. Khối bị tắt thì không render thẻ nào nên không để lại chỗ trống. */ .home-block { margin-bottom: 3rem; } .home-block:last-child { margin-bottom: 0; } .home-h2 { font-size: 20px; font-weight: 700; margin-bottom: 14px; } /* Lưới tự dàn đều: 4 ô hay 2 ô đều kín hàng, không lệch cột */ .auto-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 16px; } .feature, .step { display: flex; flex-direction: column; } .feature-ic { font-size: 26px; line-height: 1; margin-bottom: 8px; } .feature-title { font-weight: 600; font-size: 14px; margin-bottom: 4px; } .feature-body { font-size: 12.5px; color: var(--text-muted); } .step-no { width: 30px; height: 30px; border-radius: 50%; background: var(--accent); color: var(--on-accent); font-weight: 700; font-size: 14px; display: flex; align-items: center; justify-content: center; margin-bottom: 8px; } /* Giới thiệu giảng viên: ảnh trái, chữ phải; hết chỗ thì ảnh lên trên */ .about { display: grid; grid-template-columns: 170px 1fr; gap: 22px; align-items: start; } .about-photo img { width: 100%; border-radius: 16px; display: block; } .about-initials { width: 100%; aspect-ratio: 1 / 1; border-radius: 16px; background: var(--brand); color: var(--accent); font-size: 44px; font-weight: 700; display: flex; align-items: center; justify-content: center; } .about-name { font-size: 18px; font-weight: 700; } .about-role { font-size: 12.5px; color: var(--accent-2); font-weight: 600; } @media (max-width: 700px) { .about { grid-template-columns: 1fr; } .about-photo { max-width: 170px; } } /* Câu hỏi thường gặp */ details.faq { border-bottom: 1px solid var(--border-soft); padding: 10px 0; } details.faq:last-child { border-bottom: 0; padding-bottom: 0; } details.faq summary { cursor: pointer; font-weight: 600; font-size: 14px; } details.faq summary:hover { color: var(--brand); } .faq-answer { font-size: 13px; color: var(--text-muted); white-space: pre-line; margin-top: 6px; } /* Trang quản trị nội dung trang chủ */ .about-photo-admin img { width: 100%; border-radius: 12px; display: block; } .about-photo-admin .no-photo { width: 100%; aspect-ratio: 1 / 1; border-radius: 12px; background: var(--soft-bg); color: var(--text-muted); font-size: 12px; display: flex; align-items: center; justify-content: center; } .faq-edit { border: 1px solid var(--border-soft); border-radius: 12px; padding: 10px; margin-bottom: 10px; } /* Ô xem trước bảng màu ở trang Cấu hình */ .theme-preview { display: flex; align-items: center; gap: 8px; margin-top: 10px; } .theme-swatch { width: 26px; height: 26px; border-radius: 8px; border: 1px solid var(--border-soft); } /* ---------- Trang hướng dẫn sử dụng ---------- */ .help-toc a { display: inline-block; margin: 0 10px 6px 0; font-size: 13px; } .help h5 { font-size: 13.5px; font-weight: 700; color: var(--brand); margin: 14px 0 6px; } .help ul, .help ol { padding-left: 20px; font-size: 13.5px; } .help li { margin-bottom: 5px; } .help p { font-size: 13.5px; } .help table td, .help table th { font-size: 13px; padding: 8px 6px 8px 0; vertical-align: top; } .help-flow { background: var(--soft-bg); border-radius: 10px; padding: 12px 14px; font-size: 12.5px; white-space: pre-wrap; } .help code { background: var(--soft-bg); padding: 1px 5px; border-radius: 4px; color: var(--brand-2); } /* ---------- Khối code demo / bài giải / bài nộp ---------- */ .code-block { position: relative; margin-bottom: 12px; } .code-block pre { margin: 0; border-radius: 10px; overflow-x: auto; max-height: 520px; } .code-block pre code { font-size: 12.5px; line-height: 1.5; padding: 14px 16px !important; border-radius: 10px; } .code-block .copy-btn { position: absolute; top: 8px; right: 8px; font-size: 11px; padding: 2px 8px; opacity: .8; } .code-block .copy-btn:hover { opacity: 1; } .code-lang { display: inline-block; background: var(--dark-surface); color: var(--on-dark); font-size: 10.5px; padding: 3px 8px; border-radius: 10px; margin-bottom: 6px; } .code-input { font-family: Consolas, 'Courier New', monospace; font-size: 12.5px; } .submit-status .chip { font-size: 12px; } details.history summary { cursor: pointer; font-weight: 600; font-size: 12.5px; } details.history { border-top: 1px solid var(--border-soft); padding: 8px 0; } /* ===================================================================== MƯỜI BẢNG MÀU Admin chọn ở Quản trị → Cấu hình. Mỗi bảng chỉ ghi đè nhóm biến ở trên, không đụng tới một dòng bố cục nào. Dùng html[data-theme=...] để chắc chắn thắng :root về độ ưu tiên. ===================================================================== */ /* --- 1. Xanh dương tin cậy --- */ html[data-theme="blue"] { --brand: #1d4f91; --brand-2: #163d71; --accent: #f0a500; --accent-2: #d18f00; --on-accent: #4a3200; --page-bg: #f4f7fb; --soft-bg: #eef3fa; --border-soft: #e3ebf5; --text-dark: #1b2733; --text-muted: #6d7f93; --hero-bg: #e7f0fb; --hero-title: #12325f; --hero-text: #46607f; --hero-outline: #1d4f91; --hero-btn-bg: #1d4f91; --hero-btn-text: #ffffff; --hero-blob: rgba(240, 165, 0, .28); --topbar-border: #dbe5f2; --topbar-brand: #1d4f91; --topbar-link: #536b86; --topbar-link-active: #1d4f91; --sidebar-bg: #e9f1fb; --sidebar-link: #536b86; --sidebar-muted: #6d7f93; --sidebar-title: #1d4f91; --sidebar-strong: #1d4f91; --sidebar-active-bg: #1d4f91; --sidebar-active-text: #ffffff; --sidebar-sep: #d5e2f2; --side-blob: rgba(240, 165, 0, .25); --avatar-bg: #1d4f91; --dark-surface: #163d71; --on-dark: #e6eefa; --chip-grey-bg: #dfe8f3; --chip-mint: #7aa7d8; --chip-teal: #2f6ba8; --highlight-bg: #fff5dd; --focus-shadow: rgba(29, 79, 145, .25); --app-shadow: rgba(27, 39, 51, .12); } /* --- 2. Xanh ngọc và cam san hô --- */ html[data-theme="teal"] { --brand: #0f766e; --brand-2: #0b5b55; --accent: #ef6c3f; --accent-2: #d85a2e; --on-accent: #4a1505; --page-bg: #f3faf8; --soft-bg: #edf7f4; --border-soft: #dcece8; --text-dark: #17312d; --text-muted: #6d8a85; --hero-bg: #e0f4f0; --hero-title: #0a3b36; --hero-text: #45716b; --hero-outline: #0f766e; --hero-btn-bg: #0f766e; --hero-btn-text: #ffffff; --hero-blob: rgba(239, 108, 63, .25); --topbar-border: #d3e9e4; --topbar-brand: #0f766e; --topbar-link: #4d7f78; --topbar-link-active: #0f766e; --sidebar-bg: #e4f4f1; --sidebar-link: #3d6b64; --sidebar-muted: #6d8a85; --sidebar-title: #0f766e; --sidebar-strong: #0f766e; --sidebar-active-bg: #0f766e; --sidebar-active-text: #ffffff; --sidebar-sep: #cfe6e1; --side-blob: rgba(239, 108, 63, .22); --avatar-bg: #0f766e; --dark-surface: #0b5b55; --on-dark: #e2f4f1; --chip-grey-bg: #d9ebe7; --chip-mint: #64c3b5; --chip-teal: #0f766e; --highlight-bg: #ffeee7; --focus-shadow: rgba(15, 118, 110, .25); --app-shadow: rgba(23, 49, 45, .12); } /* --- 3. Tím lập trình --- */ html[data-theme="violet"] { --brand: #5b3fb5; --brand-2: #4a3196; --accent: #f5a524; --accent-2: #dc9013; --on-accent: #4a3200; --page-bg: #f7f5fd; --soft-bg: #f2eefb; --border-soft: #e7e2f7; --text-dark: #241d38; --text-muted: #7b7392; --hero-bg: #efebfb; --hero-title: #2b1d63; --hero-text: #5d5480; --hero-outline: #5b3fb5; --hero-btn-bg: #5b3fb5; --hero-btn-text: #ffffff; --hero-blob: rgba(245, 165, 36, .26); --topbar-border: #e2dbf5; --topbar-brand: #5b3fb5; --topbar-link: #6d63a0; --topbar-link-active: #5b3fb5; --sidebar-bg: #efeafb; --sidebar-link: #6d63a0; --sidebar-muted: #7b7392; --sidebar-title: #5b3fb5; --sidebar-strong: #5b3fb5; --sidebar-active-bg: #5b3fb5; --sidebar-active-text: #ffffff; --sidebar-sep: #ded6f3; --side-blob: rgba(245, 165, 36, .22); --avatar-bg: #5b3fb5; --dark-surface: #4a3196; --on-dark: #efeafb; --chip-grey-bg: #e4dff5; --chip-mint: #9b8ad6; --chip-teal: #4a3196; --highlight-bg: #fff3dc; --focus-shadow: rgba(91, 63, 181, .25); --app-shadow: rgba(36, 29, 56, .12); } /* --- 4. Xanh lá, banner đậm (mặc định, giống khối :root) --- */ html[data-theme="green"] { --brand: #2c4a41; --brand-2: #25403a; --accent: #e0a940; --accent-2: #c9922c; --on-accent: #2c2109; --page-bg: #f4f8f6; --soft-bg: #f4f8f6; --border-soft: #eef2f0; --text-dark: #1e2e29; --text-muted: #7c8e88; --hero-bg: #2c4a41; --hero-title: #ffffff; --hero-text: #cdded8; --hero-outline: #cfe0d9; --hero-btn-bg: #e0a940; --hero-btn-text: #2c2109; --hero-blob: rgba(224, 169, 64, .85); --topbar-border: #dbe5e0; --topbar-brand: #2c4a41; --topbar-link: #4f6b62; --topbar-link-active: #2c4a41; --sidebar-bg: #eaf4ef; --sidebar-link: #4f6b62; --sidebar-muted: #7c8e88; --sidebar-title: #2c4a41; --sidebar-strong: #2c4a41; --sidebar-active-bg: #e0a940; --sidebar-active-text: #2c2109; --sidebar-sep: #d6e4dc; --side-blob: rgba(224, 169, 64, .3); --avatar-bg: #1a2b26; --dark-surface: #25403a; --on-dark: #eaf3f0; --chip-grey-bg: #dfe8e5; --chip-mint: #7fae9e; --chip-teal: #3c6259; --highlight-bg: #fff6e3; --focus-shadow: rgba(127, 174, 158, .3); --app-shadow: rgba(30, 50, 45, .12); } /* --- 5. Đỏ đô học thuật --- */ html[data-theme="burgundy"] { --brand: #8c2f39; --brand-2: #71242d; --accent: #d9a441; --accent-2: #bf8c2d; --on-accent: #4a3200; --page-bg: #faf5f3; --soft-bg: #f7efec; --border-soft: #efe1dd; --text-dark: #2e1c1e; --text-muted: #8f6a68; --hero-bg: #f7ece9; --hero-title: #4a151c; --hero-text: #7d4f52; --hero-outline: #8c2f39; --hero-btn-bg: #8c2f39; --hero-btn-text: #ffffff; --hero-blob: rgba(217, 164, 65, .28); --topbar-border: #ecd9d5; --topbar-brand: #8c2f39; --topbar-link: #8f6a68; --topbar-link-active: #8c2f39; --sidebar-bg: #f5e8e6; --sidebar-link: #7a5350; --sidebar-muted: #8f6a68; --sidebar-title: #8c2f39; --sidebar-strong: #8c2f39; --sidebar-active-bg: #8c2f39; --sidebar-active-text: #ffffff; --sidebar-sep: #e8d3cf; --side-blob: rgba(217, 164, 65, .22); --avatar-bg: #8c2f39; --dark-surface: #71242d; --on-dark: #f7ece9; --chip-grey-bg: #ecdedb; --chip-mint: #c08a8d; --chip-teal: #71242d; --highlight-bg: #fdf0d8; --focus-shadow: rgba(140, 47, 57, .25); --app-shadow: rgba(46, 28, 30, .12); } /* --- 6. Navy đậm và xanh mint --- */ html[data-theme="navy"] { --brand: #14304d; --brand-2: #0e2338; --accent: #2fbf8f; --accent-2: #22a57a; --on-accent: #063d2c; --page-bg: #f4f7fa; --soft-bg: #eef3f8; --border-soft: #e1e8f0; --text-dark: #17242f; --text-muted: #6b8095; --hero-bg: #e8eef5; --hero-title: #0d2136; --hero-text: #4a627d; --hero-outline: #14304d; --hero-btn-bg: #14304d; --hero-btn-text: #ffffff; --hero-blob: rgba(47, 191, 143, .3); --topbar-border: #d8e2ee; --topbar-brand: #14304d; --topbar-link: #5c7590; --topbar-link-active: #14304d; --sidebar-bg: #e9eff6; --sidebar-link: #4a6178; --sidebar-muted: #6b8095; --sidebar-title: #14304d; --sidebar-strong: #14304d; --sidebar-active-bg: #14304d; --sidebar-active-text: #ffffff; --sidebar-sep: #d5e0ec; --side-blob: rgba(47, 191, 143, .25); --avatar-bg: #14304d; --dark-surface: #0e2338; --on-dark: #e4ecf5; --chip-grey-bg: #dde5ef; --chip-mint: #6fd3b0; --chip-teal: #0e7a5c; --highlight-bg: #ddf7ee; --focus-shadow: rgba(20, 48, 77, .25); --app-shadow: rgba(23, 36, 47, .12); } /* --- 7. Cam đất --- */ html[data-theme="terracotta"] { --brand: #b4502f; --brand-2: #963f23; --accent: #e0a03c; --accent-2: #c6882a; --on-accent: #4a3200; --page-bg: #fdf7f3; --soft-bg: #f9efe8; --border-soft: #f2e3d9; --text-dark: #31211a; --text-muted: #9a7264; --hero-bg: #fbeee6; --hero-title: #5a2313; --hero-text: #8a5a45; --hero-outline: #b4502f; --hero-btn-bg: #b4502f; --hero-btn-text: #ffffff; --hero-blob: rgba(224, 160, 60, .3); --topbar-border: #f0dcd0; --topbar-brand: #b4502f; --topbar-link: #8a5b47; --topbar-link-active: #b4502f; --sidebar-bg: #f9ebe3; --sidebar-link: #8a5b47; --sidebar-muted: #9a7264; --sidebar-title: #9d4326; --sidebar-strong: #b4502f; --sidebar-active-bg: #b4502f; --sidebar-active-text: #ffffff; --sidebar-sep: #efdccf; --side-blob: rgba(224, 160, 60, .25); --avatar-bg: #b4502f; --dark-surface: #963f23; --on-dark: #fbeee6; --chip-grey-bg: #f0e0d6; --chip-mint: #d9a289; --chip-teal: #8a6a3f; --highlight-bg: #fdf0d8; --focus-shadow: rgba(180, 80, 47, .25); --app-shadow: rgba(49, 33, 26, .12); } /* --- 8. Kiểu trình soạn code: thanh menu, banner và menu trái nền tối --- */ html[data-theme="code"] { --brand: #1f2430; --brand-2: #141824; --accent: #34c77b; --accent-2: #27a564; --on-accent: #08240f; --page-bg: #f5f6f8; --soft-bg: #eef0f4; --border-soft: #e3e6ea; --text-dark: #1b2027; --text-muted: #6b7280; --hero-bg: #1f2430; --hero-title: #ffffff; --hero-text: #b7c0cf; --hero-outline: #6b7688; --hero-btn-bg: #34c77b; --hero-btn-text: #08240f; --hero-blob: rgba(52, 199, 123, .35); --topbar-bg: #1f2430; --topbar-border: #333b4d; --topbar-brand: #ffffff; --topbar-link: #b7c0cf; --topbar-link-active: #ffffff; --sidebar-bg: #1f2430; --sidebar-link: #9aa3ad; --sidebar-muted: #9aa3ad; --sidebar-title: #ffffff; --sidebar-strong: #34c77b; --sidebar-hover-bg: #2b3242; --sidebar-active-bg: #34c77b; --sidebar-active-text: #08240f; --sidebar-sep: #333b4d; --side-blob: rgba(52, 199, 123, .28); --avatar-bg: #11151f; --dark-surface: #1f2430; --on-dark: #e6eaf0; --chip-grey-bg: #e2e6ec; --chip-mint: #63b3ed; --chip-teal: #1f7a4d; --highlight-bg: #e7f8ef; --focus-shadow: rgba(52, 199, 123, .3); --app-shadow: rgba(27, 32, 39, .14); } /* --- 9. Olive rêu và kem cát --- */ html[data-theme="olive"] { --brand: #5a6b3b; --brand-2: #47552d; --accent: #c9903c; --accent-2: #ad7a2c; --on-accent: #3f2c08; --page-bg: #f8f8f2; --soft-bg: #f2f3e8; --border-soft: #e6e8d8; --text-dark: #262b1a; --text-muted: #7d8465; --hero-bg: #f0f1e6; --hero-title: #2f3a1c; --hero-text: #626c48; --hero-outline: #5a6b3b; --hero-btn-bg: #5a6b3b; --hero-btn-text: #ffffff; --hero-blob: rgba(201, 144, 60, .28); --topbar-border: #dfe2cf; --topbar-brand: #5a6b3b; --topbar-link: #5f6747; --topbar-link-active: #5a6b3b; --sidebar-bg: #eceee0; --sidebar-link: #5f6747; --sidebar-muted: #7d8465; --sidebar-title: #5a6b3b; --sidebar-strong: #5a6b3b; --sidebar-active-bg: #5a6b3b; --sidebar-active-text: #ffffff; --sidebar-sep: #dcdfc9; --side-blob: rgba(201, 144, 60, .22); --avatar-bg: #5a6b3b; --dark-surface: #47552d; --on-dark: #f0f1e6; --chip-grey-bg: #e4e7d5; --chip-mint: #a3ae7f; --chip-teal: #47552d; --highlight-bg: #f9efd7; --focus-shadow: rgba(90, 107, 59, .25); --app-shadow: rgba(38, 43, 26, .12); } /* --- 10. Tối giản, một màu nhấn --- */ html[data-theme="minimal"] { --brand: #111827; --brand-2: #030712; --accent: #2563eb; --accent-2: #1d4ed8; --on-accent: #ffffff; --page-bg: #fafafa; --soft-bg: #f4f4f5; --border-soft: #e4e4e7; --text-dark: #111827; --text-muted: #71717a; --hero-bg: #ffffff; --hero-title: #111827; --hero-text: #52525b; --hero-border: #e4e4e7; --hero-outline: #d4d4d8; --hero-btn-bg: #111827; --hero-btn-text: #ffffff; --hero-blob: rgba(37, 99, 235, .1); --topbar-border: #e4e4e7; --topbar-brand: #111827; --topbar-link: #52525b; --topbar-link-active: #111827; --sidebar-bg: #f4f4f5; --sidebar-link: #52525b; --sidebar-muted: #71717a; --sidebar-title: #111827; --sidebar-strong: #111827; --sidebar-active-bg: #111827; --sidebar-active-text: #ffffff; --sidebar-sep: #e4e4e7; --side-blob: rgba(37, 99, 235, .08); --avatar-bg: #111827; --dark-surface: #111827; --on-dark: #f4f4f5; --chip-grey-bg: #e4e4e7; --chip-mint: #93c5fd; --chip-teal: #1e40af; --highlight-bg: #e0edff; --focus-shadow: rgba(37, 99, 235, .25); --app-shadow: rgba(17, 24, 39, .1); }