/* ========================================================================== V3Tools — theo thiết kế v3tool_web.jpg Không dùng framework CSS: bảng màu và bố cục ở đây khác Bootstrap mặc định đủ nhiều để việc ghi đè tốn hơn là tự viết. CHẾ ĐỘ GIAO DIỆN (system / light / dark) Thuộc tính `data-theme` trên chỉ nhận hai giá trị ĐÃ GIẢI: "dark" hoặc "light". Chế độ "system" KHÔNG có bảng màu riêng — theme.js đọc `prefers-color-scheme` rồi ghi ra một trong hai giá trị đó, và nghe sự kiện đổi màu của hệ điều hành để ghi lại. Nhờ vậy CSS chỉ cần đúng HAI bảng màu, không phải chép bảng sáng thêm một lần nữa vào `@media (prefers-color-scheme: light)` rồi lo hai bản lệch giá trị nhau về sau. Không có JavaScript thì không có `data-theme` → rơi về bảng tối, đúng như trước đây. Màu nào bị dùng ở dạng bán trong suốt thì phải có thêm token `--*-rgb` (ba số, cách nhau bằng dấu cách) để viết `rgb(var(--x-rgb) / .12)` — cú pháp `rgba(var(--x), .12)` không chạy vì var() chỉ thay được TOÀN BỘ một tham số, không chèn được ba tham số vào giữa. ========================================================================== */ /* Token không phụ thuộc chế độ + token suy ra từ bảng màu. var() trong giá trị custom property được giải tại chỗ dùng nên các dòng "suy ra" này tự bám theo bảng màu đang bật, không cần khai lại trong từng bảng. */ :root { --radius: 12px; --radius-sm: 8px; --shell: 1240px; --accent-soft: rgb(var(--accent-rgb) / .12); --accent-line: rgb(var(--accent-rgb) / .35); --danger-soft: rgb(var(--danger-rgb) / .12); --danger-line: rgb(var(--danger-rgb) / .4); --overlay-base: rgb(var(--bg-base-rgb) / .92); } /* ---------- Bảng tối (mặc định) ---------- */ :root, :root[data-theme="dark"] { color-scheme: dark; --bg-base: #060b10; --bg-base-rgb: 6 11 16; --bg-elevated: #08111a; --bg-elevated-rgb: 8 17 24; --bg-surface: #0d151d; --bg-surface-2: #101c26; --border: #1b2b38; --border-strong: #24404f; --accent: #19d3a2; --accent-rgb: 25 211 162; --accent-dim: #0f8f6f; --accent-hover: #4ff0c4; /* Chữ nằm TRÊN nền accent — nền accent đổi độ sáng theo bảng màu nên màu chữ này phải đổi theo. */ --on-accent: #04231b; --text: #e8f1f5; --text-muted: #8fa3b0; --text-muted-rgb: 143 163 176; --text-dim: #64798a; --danger: #ff6b6b; --danger-rgb: 255 107 107; --danger-text: #ffb3b3; --warning: #ffb347; --warning-rgb: 255 179 71; --alert-warning-rgb: 230 170 60; --alert-warning-text: #f0c674; --alert-success-text: #93f2d8; --shadow-lift: 0 30px 60px -30px rgb(0 0 0 / .9); } /* ---------- Bảng sáng ---------- */ :root[data-theme="light"] { color-scheme: light; --bg-base: #f4f7f9; --bg-base-rgb: 244 247 249; --bg-elevated: #ffffff; --bg-elevated-rgb: 255 255 255; --bg-surface: #ffffff; --bg-surface-2: #eef3f7; --border: #d8e2e9; --border-strong: #b3c4ce; /* Accent phải tối hơn hẳn bản nền tối: #19d3a2 trên nền trắng chỉ đạt ~1.7:1, không đọc được. */ --accent: #0b8f6e; --accent-rgb: 11 143 110; --accent-dim: #0a7358; /* Nền sáng thì hover ĐẬM lên mới rõ (nền tối thì ngược lại — sáng lên). */ --accent-hover: #096f55; --on-accent: #ffffff; --text: #10202a; --text-muted: #4d6572; --text-muted-rgb: 77 101 114; --text-dim: #6d8391; --danger: #c0392b; --danger-rgb: 192 57 43; --danger-text: #96271b; --warning: #b46b12; --warning-rgb: 180 107 18; --alert-warning-rgb: 180 107 18; --alert-warning-text: #7f4b0d; --alert-success-text: #0a6b52; --shadow-lift: 0 24px 48px -28px rgb(16 32 42 / .35); } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { background: var(--bg-base); color: var(--text); font-family: 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif; font-size: 15px; line-height: 1.6; -webkit-font-smoothing: antialiased; } a { color: var(--accent); text-decoration: none; } a:hover { color: var(--accent-hover); } h1, h2, h3, h4 { margin: 0 0 .6rem; line-height: 1.25; font-weight: 700; } h1 { font-size: 2.6rem; } h2 { font-size: 1.9rem; } h3 { font-size: 1.15rem; } p { margin: 0 0 1rem; } .shell { width: 100%; max-width: var(--shell); margin: 0 auto; padding: 0 20px; } .accent { color: var(--accent); } .muted { color: var(--text-muted); } .dim { color: var(--text-dim); } .text-center { text-align: center; } .nowrap { white-space: nowrap; } /* ---------- Nút ---------- */ .btn { display: inline-flex; align-items: center; gap: .5rem; padding: .65rem 1.25rem; border-radius: var(--radius-sm); border: 1px solid transparent; font-size: .9rem; font-weight: 600; letter-spacing: .01em; cursor: pointer; transition: background .15s ease, border-color .15s ease, color .15s ease; background: none; color: var(--text); font-family: inherit; } .btn-primary { background: var(--accent); color: var(--on-accent); } .btn-primary:hover { background: var(--accent-hover); color: var(--on-accent); } .btn-outline { border-color: var(--border-strong); color: var(--text); } .btn-outline:hover { border-color: var(--accent); color: var(--accent); } .btn-ghost { color: var(--text-muted); } .btn-ghost:hover { color: var(--accent); } .btn-danger { border-color: var(--danger-line); color: var(--danger); } .btn-danger:hover { background: var(--danger-soft); } .btn-sm { padding: .35rem .75rem; font-size: .8rem; } .btn[disabled] { opacity: .45; cursor: not-allowed; } /* ---------- Thanh điều hướng ---------- */ .site-header { position: sticky; top: 0; z-index: 40; background: var(--overlay-base); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border); } .site-header .shell { display: flex; align-items: center; gap: 2rem; height: 62px; } .brand { display: flex; align-items: center; gap: .6rem; font-size: 1.15rem; font-weight: 700; color: var(--text); letter-spacing: .01em; } .brand svg { color: var(--accent); } .brand:hover { color: var(--text); } .nav { display: flex; align-items: center; gap: 1.5rem; margin-left: auto; flex-wrap: wrap; } .nav a { color: var(--text-muted); font-size: .82rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; } .nav a:hover, .nav a.active { color: var(--text); } .nav a.active { color: var(--accent); } /* ---------- Nút chọn chế độ giao diện ---------- */ /* Ba nút nằm trong một viên thuốc: người dùng thấy ngay đang ở chế độ nào và còn hai lựa chọn nào khác, khác với nút bật/tắt một ô chỉ cho biết trạng thái hiện tại. Ô đang chọn được đánh dấu bằng aria-pressed (theme.js đặt) chứ không phải class riêng — trình đọc màn hình đọc được, và CSS vẫn bắt được bằng [aria-pressed="true"] nên không cần cả hai. */ .theme-toggle { display: inline-flex; align-items: center; gap: 2px; padding: 2px; border: 1px solid var(--border); border-radius: 999px; background: var(--bg-surface); flex: 0 0 auto; } .theme-toggle button { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 26px; padding: 0; border: none; border-radius: 999px; background: none; color: var(--text-dim); cursor: pointer; transition: background .15s ease, color .15s ease; } .theme-toggle button:hover { color: var(--text); } .theme-toggle button[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent); } /* Trang đăng nhập không có header nên nút tự neo ở góc trên bên phải. */ .theme-toggle-float { position: fixed; top: 16px; right: 16px; z-index: 50; } /* ---------- Khối chung ---------- */ .section { padding: 64px 0; } .section-title { text-align: center; text-transform: uppercase; letter-spacing: .12em; font-size: 1.05rem; color: var(--text); margin-bottom: 2.2rem; } .card { background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.25rem; } .card-hover:hover { border-color: var(--border-strong); } .panel { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius); } .grid { display: grid; gap: 1rem; } .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .grid-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } .badge { display: inline-block; padding: .15rem .5rem; border-radius: 999px; font-size: .7rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; } .badge-accent { background: var(--accent-soft); color: var(--accent); border: 1px solid var(--accent-line); } .badge-muted { background: rgb(var(--text-muted-rgb) / .12); color: var(--text-muted); border: 1px solid var(--border); } .badge-warning { background: rgb(var(--warning-rgb) / .12); color: var(--warning); border: 1px solid rgb(var(--warning-rgb) / .35); } .alert { border-radius: var(--radius-sm); padding: .75rem 1rem; margin-bottom: 1rem; border: 1px solid var(--border); font-size: .9rem; } .alert-error { border-color: var(--danger-line); background: rgb(var(--danger-rgb) / .1); color: var(--danger-text); } /* Cảnh báo "làm được nhưng có ràng buộc" — khác alert-error (hỏng rồi) và alert-success (xong xuôi). */ .alert-warning { border-color: rgb(var(--alert-warning-rgb) / .35); background: rgb(var(--alert-warning-rgb) / .10); color: var(--alert-warning-text); } .alert-success { border-color: rgb(var(--accent-rgb) / .4); background: var(--accent-soft); color: var(--alert-success-text); } /* ---------- Form ---------- */ .field { margin-bottom: 1rem; } .field label { display: block; font-size: .82rem; font-weight: 600; color: var(--text-muted); margin-bottom: .35rem; } .input, select, textarea { width: 100%; padding: .6rem .8rem; background: var(--bg-base); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text); font-family: inherit; font-size: .9rem; } .input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent-dim); } textarea { min-height: 140px; resize: vertical; } .checks { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; } .check { display: inline-flex; align-items: center; gap: .4rem; font-size: .88rem; color: var(--text); } .field-error { display: block; color: var(--danger); font-size: .8rem; margin-top: .25rem; } /* ---------- Bảng ---------- */ .table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); } table.data { width: 100%; border-collapse: collapse; font-size: .88rem; min-width: 720px; } table.data th { text-align: left; padding: .8rem 1rem; background: var(--bg-surface-2); color: var(--text-muted); font-weight: 600; font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; border-bottom: 1px solid var(--border); white-space: nowrap; } table.data td { padding: .8rem 1rem; border-bottom: 1px solid var(--border); vertical-align: middle; } table.data tr:last-child td { border-bottom: none; } table.data tbody tr:hover { background: rgb(var(--accent-rgb) / .06); } .empty { padding: 2.5rem 1rem; text-align: center; color: var(--text-muted); } /* ---------- Phân trang ---------- */ .pager { display: flex; align-items: center; justify-content: center; gap: .35rem; margin-top: 1.25rem; } .pager a, .pager span { min-width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text-muted); font-size: .85rem; } .pager a:hover { border-color: var(--accent); color: var(--accent); } .pager .current { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent); } /* ---------- Footer ---------- */ .site-footer { border-top: 1px solid var(--border); background: var(--bg-elevated); padding: 48px 0 24px; margin-top: 32px; } /* Chân trang dàn hết chiều ngang trang: bỏ trần 1240px của .shell, chỉ chừa lề hai bên. Ghi đè riêng ở đây thay vì sửa .shell — header và các section khác vẫn giữ khung 1240px. */ .site-footer > .shell { max-width: none; padding: 0 40px; } .footer-grid { display: grid; grid-template-columns: 1.3fr repeat(4, .85fr) 1.15fr; gap: 2rem; } .socials { display: flex; gap: .5rem; margin-top: 1rem; } .socials a { width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; color: var(--text-muted); } .socials a:hover { border-color: var(--accent); color: var(--accent); } .newsletter { display: flex; gap: .4rem; } .newsletter .input { font-size: .85rem; } /* Bẫy bot ở form nhận tin. Đẩy ra ngoài khung nhìn thay vì display:none — vài bot biết bỏ qua ô display:none/hidden, nhưng ô vẫn "hiển thị" như thế này thì chúng vẫn điền vào. Người thật không bao giờ chạm tới: không nhìn thấy, và tabindex="-1" nên Tab cũng không tới. */ .hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .newsletter-note { margin: .5rem 0 0; font-size: .8rem; } .newsletter-note.ok { color: var(--accent); } .newsletter-note.bad { color: var(--danger-text); } .footer-col h4 { font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; color: var(--text); margin-bottom: .9rem; } .footer-col ul { list-style: none; margin: 0; padding: 0; } .footer-col li { margin-bottom: .45rem; } .footer-col a, .footer-col span { color: var(--text-muted); font-size: .85rem; } /* Cột "Liên hệ": icon đứng trước chữ. align-items:flex-start + margin-top nhỏ để icon nằm ngang dòng chữ ĐẦU TIÊN khi địa chỉ dài phải xuống dòng, chứ không bị đẩy xuống giữa khối. */ .footer-contact li { display: flex; align-items: flex-start; gap: .5rem; } .footer-contact svg { color: var(--accent); flex: 0 0 auto; margin-top: .2rem; } .footer-bottom { margin-top: 2.5rem; padding-top: 1.25rem; border-top: 1px solid var(--border); display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; color: var(--text-dim); font-size: .8rem; } /* ---------- Trang đăng nhập ---------- */ .login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; background: radial-gradient(1000px 500px at 50% -10%, var(--accent-soft), transparent 60%), var(--bg-base); } .login-card { width: 100%; max-width: 380px; } /* ---------- Khu vực quản trị ---------- */ .admin-shell { display: grid; grid-template-columns: 232px 1fr; min-height: 100vh; } .admin-side { background: var(--bg-elevated); border-right: 1px solid var(--border); padding: 1.25rem 1rem; } /* Hàng trên cùng thanh bên: logo trái, nút chọn giao diện phải. Thanh bên chỉ rộng 232px nên hàng này được phép xuống dòng — hụt chỗ thì nút tụt xuống dưới logo chứ không tràn ra ngoài. Nút cũng thu hẹp lại một chút so với trên header để hai thứ còn đứng vừa một hàng. */ .admin-side-top { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.5rem; } .admin-side-top .theme-toggle { margin-left: auto; } .admin-side-top .theme-toggle button { width: 26px; } .admin-side nav { display: flex; flex-direction: column; gap: .25rem; } .admin-side nav a { padding: .55rem .75rem; border-radius: var(--radius-sm); color: var(--text-muted); font-size: .9rem; font-weight: 500; } .admin-side nav a:hover { background: var(--bg-surface); color: var(--text); } .admin-side nav a.active { background: var(--accent-soft); color: var(--accent); } /* Nhóm thu gọn được trong thanh bên, dựng bằng
. */ .admin-side .admin-nav-group { margin-top: 1.1rem; } /* Tiêu đề nhóm. Không phải link nên không được trông giống link: chữ nhỏ, in hoa, mờ hơn hẳn các mục bấm được. */ .admin-side .admin-nav-head { display: flex; align-items: center; gap: .4rem; padding: .1rem .75rem .45rem; color: var(--text-dim); font-size: .72rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; cursor: pointer; /* Bỏ tam giác mặc định của để tự vẽ mũi tên xoay theo trạng thái. Cần cả hai dòng: Chrome/Safari cũ chỉ nghe ::-webkit-details-marker. */ list-style: none; } .admin-side .admin-nav-head::-webkit-details-marker { display: none; } .admin-side .admin-nav-head:hover { color: var(--text-muted); } /* Mũi tên: đóng thì chỉ sang phải, mở thì chỉ xuống. */ .admin-side .admin-nav-head::before { content: ''; flex: 0 0 auto; width: .38rem; height: .38rem; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-45deg); transition: transform .15s ease; } .admin-side .admin-nav-group[open] > .admin-nav-head::before { transform: rotate(45deg); } /* Bọc riêng phần link thay vì cho
tự làm flex container: đặt display:flex thẳng lên
thì một số trình duyệt không còn ẩn phần thân lúc đóng. */ .admin-side .admin-nav-sub { display: flex; flex-direction: column; gap: .25rem; } .admin-main { padding: 1.5rem 2rem 3rem; min-width: 0; } .admin-topbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; flex-wrap: wrap; } .admin-topbar h1 { font-size: 1.5rem; margin: 0; } .toolbar { display: flex; align-items: flex-end; gap: .75rem; flex-wrap: wrap; margin-bottom: 1rem; } .toolbar .field { margin-bottom: 0; } /* ---------- Tiện ích ---------- */ .flex { display: flex; } .flex-between { display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .gap-sm { gap: .5rem; } .gap { gap: 1rem; } .wrap { flex-wrap: wrap; } .mt { margin-top: 1rem; } .mt-lg { margin-top: 2rem; } .mb-0 { margin-bottom: 0; } .mono { font-family: 'Cascadia Mono', Consolas, monospace; font-size: .8rem; } /* ---------- Đáp ứng ---------- */ @media (max-width: 1080px) { .grid-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .footer-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 760px) { h1 { font-size: 2rem; } h2 { font-size: 1.5rem; } .grid-2, .grid-3, .grid-4, .grid-5 { grid-template-columns: 1fr; } .footer-grid { grid-template-columns: 1fr 1fr; } .site-footer > .shell { padding: 0 20px; } .site-header .shell { height: auto; padding-top: 10px; padding-bottom: 10px; flex-wrap: wrap; } .nav { margin-left: 0; gap: .9rem; } .admin-shell { grid-template-columns: 1fr; } .admin-side { border-right: none; border-bottom: 1px solid var(--border); } .admin-main { padding: 1.25rem; } }