/* ========================================================= SOLAR GUARD — Web UI Ngôn ngữ thiết kế: bento grid + sidebar, tông indigo–cyan, hỗ trợ 2 chế độ Sáng / Tối (đổi qua [data-theme] trên ). ========================================================= */ /* ---------- 1. DESIGN TOKENS ---------- */ :root { --bg: #eef1f8; --bg-grad-1: #e5e9fb; --bg-grad-2: #eaf6fb; --surface: #ffffff; --surface-2: #f6f8fd; --surface-3: #eef2fa; --border: #e2e7f3; --border-strong:#cfd7ea; --text: #0d1424; --muted: #5f6b85; --faint: #93a0bb; --brand: #4f46e5; --brand-2: #7c3aed; --accent: #0891b2; --brand-soft: rgba(79,70,229,.10); --accent-soft: rgba(8,145,178,.10); --ok: #059669; --warn: #d97706; --danger: #dc2626; --info: #2563eb; --ok-soft: rgba(5,150,105,.12); --warn-soft: rgba(217,119,6,.12); --danger-soft: rgba(220,38,38,.12); --info-soft: rgba(37,99,235,.12); --shadow-sm: 0 1px 2px rgba(13,20,36,.05); --shadow: 0 1px 2px rgba(13,20,36,.04), 0 10px 30px -18px rgba(13,20,36,.35); --shadow-lg: 0 24px 60px -28px rgba(13,20,36,.45); --r-sm: 10px; --r: 16px; --r-lg: 22px; --r-xl: 28px; --sidebar-w: 248px; --font: "Inter", ui-sans-serif, system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --mono: ui-monospace, "JetBrains Mono", "SF Mono", Consolas, "Liberation Mono", monospace; } html[data-theme="dark"] { --bg: #070a12; --bg-grad-1: #0b1020; --bg-grad-2: #08131c; --surface: #101728; --surface-2: #0c1322; --surface-3: #16203a; --border: #1e2a44; --border-strong:#2c3a5c; --text: #e8edf8; --muted: #93a2c0; --faint: #63718f; --brand: #818cf8; --brand-2: #a78bfa; --accent: #22d3ee; --brand-soft: rgba(129,140,248,.14); --accent-soft: rgba(34,211,238,.12); --ok: #34d399; --warn: #fbbf24; --danger: #f87171; --info: #60a5fa; --ok-soft: rgba(52,211,153,.14); --warn-soft: rgba(251,191,36,.14); --danger-soft: rgba(248,113,113,.14); --info-soft: rgba(96,165,250,.14); --shadow-sm: 0 1px 2px rgba(0,0,0,.4); --shadow: 0 1px 2px rgba(0,0,0,.35), 0 14px 34px -20px rgba(0,0,0,.9); --shadow-lg: 0 28px 70px -30px rgba(0,0,0,.95); } /* ---------- 2. BASE ---------- */ * { box-sizing: border-box; } html, body { height: 100%; } body { margin: 0; font-family: var(--font); color: var(--text); background: var(--bg); background-image: radial-gradient(1100px 600px at 12% -10%, var(--bg-grad-1), transparent 60%), radial-gradient(900px 500px at 100% 0%, var(--bg-grad-2), transparent 55%); background-attachment: fixed; -webkit-font-smoothing: antialiased; transition: background-color .25s ease, color .25s ease; } h1,h2,h3,h4,p { margin: 0; } button { font: inherit; color: inherit; } a { color: inherit; text-decoration: none; } svg { stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .muted { color: var(--muted); } .small { font-size: 12.5px; } .mono { font-family: var(--mono); font-variant-numeric: tabular-nums; } .is-hidden { display: none !important; } /* Mọi khai báo `display` của tác giả (vd .sheet{display:grid}, .chips{display:flex}) đều đè mất [hidden]{display:none} của trình duyệt — vì luật của UA stylesheet luôn thua luật tác giả. Không có dòng này, phần tử đặt el.hidden = true vẫn hiện nguyên (lớp phủ hộp thoại nằm đè giữa màn hình là do vậy). */ [hidden] { display: none !important; } ::selection { background: var(--brand); color: #fff; } /* scrollbar */ * { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; } *::-webkit-scrollbar { width: 10px; height: 10px; } *::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 99px; border: 3px solid transparent; background-clip: content-box; } /* ---------- 2b. MÀN ĐĂNG NHẬP ---------- Đứng trên mọi thứ (splash z-index 90) vì nó là cổng: chưa qua thì không có gì phía sau được nhìn thấy. Cùng nền chuyển sắc với splash để hai màn nối nhau liền mạch chứ không nhảy màu. */ #authScreen { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; padding: 20px; overflow-y: auto; background: var(--bg); background-image: radial-gradient(700px 420px at 50% 18%, var(--brand-soft), transparent 70%), radial-gradient(600px 400px at 50% 92%, var(--accent-soft), transparent 70%); } #authScreen[hidden] { display: none; } /* ---------- MÀN CHẶN HẾT HẠN / BỊ KHOÁ (lock.js) ---------- z-index cao hơn cả #authScreen (120) lẫn .splash: màn này là lớp cuối cùng, không lớp nào được phép nằm đè lên nó. Nền đỏ nhạt thay cho nền tím của màn đăng nhập để khách nhìn một cái là biết đây không phải chuyện đăng nhập. */ .lk { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 20px; overflow-y: auto; background: var(--bg); background-image: radial-gradient(700px 420px at 50% 15%, var(--danger-soft), transparent 70%), radial-gradient(600px 400px at 50% 95%, var(--surface-2), transparent 70%); } .lk[hidden] { display: none; } .lk-card { width: 100%; max-width: 420px; margin: auto; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); padding: 28px 24px; text-align: center; } .lk-ico { width: 56px; height: 56px; margin: 0 auto 16px; border-radius: 18px; display: grid; place-items: center; background: var(--danger-soft); color: var(--danger); } .lk-ico svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .lk-card h1 { font-size: 20px; font-weight: 800; margin-bottom: 8px; } .lk-sub { font-size: 13px; color: var(--muted); line-height: 1.55; } .lk-list { list-style: none; margin: 18px 0 4px; display: grid; gap: 8px; text-align: left; } .lk-list li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 13px; border-radius: var(--r-sm); background: var(--surface-2); border: 1px solid var(--border); } .lk-dev { min-width: 0; } .lk-dev b { display: block; font-size: 13.5px; font-weight: 700; } .lk-dev small { font-size: 11px; color: var(--faint); font-variant-numeric: tabular-nums; } .lk-why { text-align: right; } /* Tên thiết bị do khách tự đặt nên dài ngắn tuỳ ý, mà nhãn lý do tiếng Việt ("Chưa tới ngày kích hoạt") cũng không ngắn. Hai cột cạnh nhau trên màn hẹp là tràn mép. Xuống dòng thành hai hàng, căn trái cả hai. */ @media (max-width: 420px) { .lk-list li { display: block; } .lk-why { text-align: left; margin-top: 6px; } } .lk-why span { display: block; font-size: 12px; font-weight: 700; color: var(--danger); } .lk-why small { font-size: 11px; color: var(--muted); } .lk-help { margin-top: 20px; display: grid; gap: 9px; } .lk-help p { font-size: 12.5px; color: var(--muted); } .lk-help .btn { justify-content: center; padding: 13px 16px; } /* Hai nút phụ chia đôi hàng. Xuống một cột dưới 340px (iPhone SE nằm dọc còn hẹp hơn thế sau khi trừ padding) để chữ trong nút không bị xuống dòng lẻ. */ .lk-foot { margin-top: 14px; display: grid; grid-template-columns: 1fr 1fr; gap: 9px; } .lk-foot .btn { justify-content: center; } @media (max-width: 380px) { .lk-foot { grid-template-columns: 1fr; } } .lk-company { margin-top: 18px; font-size: 11px; color: var(--faint); } .auth-card { width: 100%; max-width: 400px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); padding: 26px 24px; /* Căn giữa theo chiều dọc, nhưng thẻ cao hơn màn (màn đăng ký, điện thoại nằm ngang) thì phải cuộn được chứ không bị cắt cụt hai đầu. */ margin: auto; } .auth-brand { display: flex; align-items: center; gap: 11px; margin-bottom: 22px; } .auth-brand img { width: 38px; height: 38px; flex: none; } .auth-brand b { font-size: 15px; font-weight: 800; letter-spacing: .05em; display: block; } .auth-brand b span { background: linear-gradient(100deg, var(--brand), var(--accent)); -webkit-background-clip: text; background-clip: text; color: transparent; } .auth-brand small { font-size: 9px; letter-spacing: .2em; color: var(--faint); font-weight: 700; } .auth-view { display: grid; gap: 13px; } .auth-view[hidden] { display: none; } .auth-view h1 { font-size: 21px; font-weight: 800; } .auth-view h1 + .auth-sub { margin-top: -9px; } .auth-sub { font-size: 13px; color: var(--muted); line-height: 1.5; } .auth-view .btn { padding: 13px 16px; } .auth-back { justify-self: start; display: inline-flex; align-items: center; gap: 4px; background: none; border: 0; padding: 0; cursor: pointer; color: var(--muted); font: inherit; font-size: 13px; font-weight: 700; } .auth-back:hover { color: var(--brand); } .auth-back svg { width: 15px; height: 15px; } .auth-link { background: none; border: 0; padding: 2px; cursor: pointer; font: inherit; font-size: 13px; font-weight: 700; color: var(--brand); justify-self: center; } .auth-link:hover { text-decoration: underline; } .auth-sep { display: flex; align-items: center; gap: 10px; color: var(--faint); font-size: 11.5px; } .auth-sep::before, .auth-sep::after { content: ""; flex: 1; height: 1px; background: var(--border); } /* Ô mật khẩu + con mắt hiện/ẩn. Con mắt nằm ĐÈ lên ô chứ không đứng cạnh, để mọi ô nhập trong thẻ rộng bằng nhau. */ .auth-pw { position: relative; display: grid; min-width: 0; } .auth-pw input { padding-right: 44px; } .auth-eye { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 34px; height: 34px; display: grid; place-items: center; border: 0; background: none; border-radius: 9px; color: var(--faint); cursor: pointer; } .auth-eye:hover { color: var(--brand); background: var(--surface-3); } .auth-eye svg { width: 17px; height: 17px; } .auth-eye.on { color: var(--brand); } /* Edge và Chrome trên Windows tự chèn thêm một con mắt "hiện mật khẩu" của riêng trình duyệt (::-ms-reveal). Cạnh con mắt của trang thành ra hai cái nằm sát nhau, bấm cái nào cũng ra kết quả khác nhau. Bỏ cái của trình duyệt đi, giữ lại cái mình dựng — chỉ nó mới đổi được cả icon lẫn nhãn trợ năng. Hai dòng RIÊNG chứ không gộp bằng dấu phẩy: chỉ cần một bộ chọn trong danh sách không hợp lệ là trình duyệt bỏ cả luật, kể cả phần nó vốn hiểu được. */ input[type="password"]::-ms-reveal { display: none; width: 0; height: 0; } input[type="password"]::-ms-clear { display: none; width: 0; height: 0; } /* Dòng báo lỗi / báo thành công. Rỗng thì KHÔNG chiếm chỗ, nếu không mỗi màn luôn thừa một khoảng trống lửng giữa ô nhập và nút. */ .auth-msg { font-size: 12.5px; line-height: 1.5; } .auth-msg:empty { display: none; } .auth-msg.err { color: var(--danger); background: var(--danger-soft); border-radius: 10px; padding: 9px 11px; } .auth-msg.ok { color: var(--ok); background: var(--ok-soft); border-radius: 10px; padding: 9px 11px; } /* Ô mật khẩu nằm trong .field (cả màn đăng nhập lẫn hai trang bảo mật ở phần Hồ sơ). Không có dòng này thì `.field input { padding: 12px 13px }` — đứng sau trong tệp, cùng độ ưu tiên — nuốt mất padding-right của .auth-pw, và con mắt đè lên đúng chỗ chữ đang gõ tới. */ .field .auth-pw input { padding-right: 44px; } /* Ô 6 chữ số của mã PIN. Chữ to, giãn đều, canh giữa — nhìn là đếm được đang gõ tới chữ số thứ mấy, thứ mà một hàng chấm tròn sát nhau không nói ra được. text-indent bù lại khoảng giãn thừa sau chữ số cuối, nếu không cả cụm lệch trái đúng nửa chữ. Đối xứng hai bên để con mắt không đè lên chữ số. */ .field .pin-box { font-family: var(--mono); font-size: 19px; font-weight: 700; letter-spacing: .48em; text-indent: .48em; text-align: center; padding-left: 44px; } @media (max-width: 420px) { #authScreen { padding: 14px; } .auth-card { padding: 20px 17px; border-radius: var(--r); } .auth-view h1 { font-size: 19px; } } /* ---------- 3. SPLASH ---------- */ .splash { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; background: var(--bg); background-image: radial-gradient(700px 420px at 50% 22%, var(--brand-soft), transparent 70%), radial-gradient(600px 400px at 50% 90%, var(--accent-soft), transparent 70%); transition: opacity .45s ease, visibility .45s; } .splash.out { opacity: 0; visibility: hidden; } .splash[hidden] { display: none; } .splash-inner { text-align: center; padding: 24px; } .splash-logo img { width: 92px; height: 92px; animation: pop .7s cubic-bezier(.2,1.2,.3,1) both; } .wordmark { font-size: clamp(26px, 6vw, 36px); font-weight: 800; letter-spacing: .06em; margin-top: 14px; } .wordmark span { background: linear-gradient(100deg, var(--brand), var(--accent)); -webkit-background-clip: text; background-clip: text; color: transparent; } .tagline { margin-top: 4px; font-size: 11.5px; letter-spacing: .28em; color: var(--faint); font-weight: 600; } .splash-greet { margin: 34px 0 22px; } .splash-greet p:first-child { font-size: 19px; font-weight: 700; } .splash-bar { width: 190px; height: 4px; border-radius: 99px; background: var(--surface-3); margin: 0 auto 14px; overflow: hidden; } .splash-bar i { display: block; height: 100%; width: 40%; border-radius: 99px; background: linear-gradient(90deg, var(--brand), var(--accent)); animation: slide 1.15s ease-in-out infinite; } @keyframes slide { 0% { transform: translateX(-110%);} 100% { transform: translateX(320%);} } @keyframes pop { from { transform: scale(.7) rotate(-8deg); opacity: 0; } } /* ---------- 4. SHELL ---------- */ .app { min-height: 100%; } @media (min-width: 1024px) { .app { display: grid; grid-template-columns: var(--sidebar-w) minmax(0,1fr); } } .sidebar { display: none; } @media (min-width: 1024px) { .sidebar { display: flex; flex-direction: column; gap: 8px; position: sticky; top: 0; height: 100vh; padding: 22px 16px; border-right: 1px solid var(--border); background: color-mix(in srgb, var(--surface) 72%, transparent); backdrop-filter: blur(14px); } } .brand { display: flex; align-items: center; gap: 11px; padding: 6px 8px 18px; } .brand img { width: 36px; height: 36px; } .brand-text b { display: block; font-size: 15px; letter-spacing: .04em; font-weight: 800; } .brand-text b span { background: linear-gradient(100deg, var(--brand), var(--accent)); -webkit-background-clip: text; background-clip: text; color: transparent; } .brand-text small { display: block; font-size: 9px; letter-spacing: .18em; color: var(--faint); font-weight: 600; } .nav { display: flex; flex-direction: column; gap: 4px; } .nav-item { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: 12px; border: 1px solid transparent; background: none; cursor: pointer; font-size: 14.5px; font-weight: 600; color: var(--muted); transition: background .18s, color .18s, transform .18s; text-align: left; width: 100%; } .nav-item svg { width: 19px; height: 19px; flex: none; } .nav-item:hover { background: var(--surface-2); color: var(--text); } .nav-item.active { background: var(--brand-soft); color: var(--brand); border-color: color-mix(in srgb, var(--brand) 24%, transparent); } .nav-item .badge { margin-left: auto; } .sidebar-foot { margin-top: auto; display: grid; gap: 10px; } .sys-pill { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--border); font-size: 12.5px; font-weight: 600; color: var(--muted); } /* theme switch (sidebar) */ .theme-switch { display: flex; gap: 4px; padding: 4px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--border); } .theme-switch button { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 8px; border: 0; border-radius: 9px; background: none; cursor: pointer; font-size: 12.5px; font-weight: 700; color: var(--muted); transition: .18s; } .theme-switch button svg { width: 15px; height: 15px; } .theme-switch button.on { background: var(--surface); color: var(--brand); box-shadow: var(--shadow-sm); } /* ---------- 4b. DẢI "ADMIN ĐANG TRUY CẬP" ---------- Hiện khi trang được mở từ nút trong trang quản trị (index.html?adminView=1). Dán CỨNG lên đỉnh màn hình chứ không cuộn theo trang: mục đích của nó là để người đang xem không có lúc nào quên mất mình đang nhìn dữ liệu của người khác — cuộn xuống là mất tác dụng. Đỏ đặc, không phải đỏ nhạt như .badge: dải này phải khác hẳn mọi thứ khác trên giao diện, kể cả huy hiệu cảnh báo. */ .admin-bar { position: fixed; top: 0; left: 0; right: 0; z-index: 95; display: flex; justify-content: center; padding: 7px 12px; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border); } .admin-bar[hidden] { display: none; } .admin-pill { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 7px 15px; border-radius: 99px; background: var(--danger); color: #fff; font-size: 12.5px; font-weight: 700; line-height: 1.35; box-shadow: 0 10px 24px -12px var(--danger); } /* Tab không đăng nhập bằng tài khoản quản trị: vẫn cảnh báo, nhưng màu cam để phân biệt ngay từ xa với dải đỏ "đúng là admin". */ .admin-pill.canhbao { background: var(--warn); box-shadow: 0 10px 24px -12px var(--warn); } .admin-pill b { font-weight: 800; letter-spacing: .06em; white-space: nowrap; } /* Email dài thì cắt bớt chứ không kéo dải rộng ra ngoài màn hình. */ .admin-pill span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; opacity: .92; } .admin-pill i { width: 8px; height: 8px; border-radius: 99px; flex: none; background: #fff; animation: adminBlink 1.6s ease-in-out infinite; } @keyframes adminBlink { 50% { opacity: .25; } } @media (prefers-reduced-motion: reduce) { .admin-pill i { animation: none; } } /* Đẩy cả app xuống đúng chiều cao dải. Thanh tiêu đề dính (sticky, top:0) tính mốc theo khung nhìn chứ không theo phần đệm của .app, nên phải dời riêng — thiếu dòng dưới thì cuộn trang là thanh tiêu đề chui lên dưới dải đỏ. Chiều cao lấy từ `--admin-bar-h`, do app.js đo dải thật rồi đặt vào. Viết cứng một con số thì chỉ cần người dùng phóng to chữ hệ thống là lệch đi vài pixel và thanh tiêu đề ló ra dưới dải. */ html.admin-view .app { padding-top: var(--admin-bar-h, 46px); } html.admin-view .topbar { top: var(--admin-bar-h, 46px); } /* ---------- 4c. DẢI HƯỚNG DẪN NỐI WIFI ---------- Nằm giữa thanh tiêu đề và nội dung trang, không phải cửa sổ đè lên: người dùng phải vừa đọc được nó vừa thao tác trên điện thoại (đổi sóng WiFi, quay lại ứng dụng), mà một hộp thoại chặn thì mỗi lần quay lại là một lần phải tìm cách mở nó ra. */ .wifi-call { margin: 16px 18px 0; padding: 16px 18px; border-radius: var(--r); border: 1px solid color-mix(in srgb, var(--warn) 40%, transparent); background: var(--warn-soft); } @media (min-width: 1024px) { .wifi-call { margin: 18px 30px 0; } } .wifi-call-head { display: flex; align-items: center; gap: 12px; } .wifi-call-ico { width: 42px; height: 42px; border-radius: 13px; flex: none; display: grid; place-items: center; background: var(--warn); color: #fff; } .wifi-call-ico svg { width: 21px; height: 21px; stroke-width: 2; } .wifi-call-head b { display: block; font-size: 15px; line-height: 1.4; } .wifi-call-head p { font-size: 12px; color: var(--muted); margin-top: 2px; } .wifi-call-ap { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 12px 0 4px; padding: 10px 12px; border-radius: 12px; background: var(--surface); border: 1px solid var(--border); font-size: 12.5px; color: var(--muted); } .wifi-call .btn { margin-top: 14px; } /* Danh sách các bước — dùng chung cho dải này và trang Reset WiFi. */ .steps { margin: 0; padding-left: 20px; display: grid; gap: 8px; } .steps li { font-size: 13.5px; line-height: 1.6; } .steps li::marker { font-weight: 800; color: var(--brand); } .steps b { font-weight: 700; color: var(--text); } /* ---------- 5. TOPBAR ---------- */ .main { min-width: 0; display: flex; flex-direction: column; min-height: 100vh; } .topbar { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--border); background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: blur(14px); } .topbar-title h2 { font-size: 19px; font-weight: 800; letter-spacing: -.01em; } .topbar-actions { margin-left: auto; display: flex; gap: 8px; } .icon-btn { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); cursor: pointer; position: relative; transition: .18s; color: var(--muted); } .icon-btn:hover { color: var(--brand); border-color: color-mix(in srgb, var(--brand) 30%, transparent); transform: translateY(-1px); } .icon-btn svg { width: 19px; height: 19px; } .icon-btn .dot { position: absolute; top: 8px; right: 9px; width: 8px; height: 8px; border-radius: 99px; background: var(--danger); border: 2px solid var(--surface); } /* Bản nhỏ, dùng cho nút bút chì đứng cạnh tiêu đề trang chi tiết thiết bị */ .icon-btn-sm { width: 32px; height: 32px; border-radius: 10px; } .icon-btn-sm svg { width: 16px; height: 16px; } .ico-moon { display: none; } html[data-theme="dark"] .ico-sun { display: none; } html[data-theme="dark"] .ico-moon { display: block; } .only-mobile { display: grid; } @media (min-width: 1024px) { .only-mobile { display: none; } } .view { flex: 1; padding: 20px 18px 96px; max-width: 1320px; width: 100%; margin: 0 auto; } @media (min-width: 1024px) { .view { padding: 26px 30px 40px; } } .main-foot { padding: 0 18px 96px; text-align: center; } @media (min-width: 1024px) { .main-foot { padding: 10px 30px 26px; } } /* ---------- 6. TABBAR (mobile) ---------- */ .tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: grid; grid-auto-flow: column; padding: 8px 8px calc(8px + env(safe-area-inset-bottom)); border-top: 1px solid var(--border); background: color-mix(in srgb, var(--surface) 88%, transparent); backdrop-filter: blur(18px); } @media (min-width: 1024px) { .tabbar { display: none; } } .tab { display: grid; justify-items: center; gap: 3px; padding: 7px 4px; border: 0; background: none; cursor: pointer; color: var(--faint); font-size: 10.5px; font-weight: 700; border-radius: 12px; position: relative; } .tab svg { width: 21px; height: 21px; } .tab.active { color: var(--brand); } .tab.active::before { content:""; position: absolute; top: -8px; width: 26px; height: 3px; border-radius: 99px; background: linear-gradient(90deg, var(--brand), var(--accent)); } /* ---------- 7. LAYOUT PRIMITIVES ---------- */ .grid { display: grid; gap: 14px; grid-template-columns: repeat(12, minmax(0,1fr)); } .c12 { grid-column: span 12; } .c6 { grid-column: span 6; } .c4 { grid-column: span 6; } .c3 { grid-column: span 6; } .c8 { grid-column: span 12; } /* Như .c4 nhưng trải hết hàng trên điện thoại — dùng cho cột thẻ bên phải của Tổng quan, để nó không nằm co một nửa với nửa còn lại bỏ trống. */ .c4w { grid-column: span 12; } /* Điện thoại: đưa cụm "Tổng hợp cảnh báo / Trạng thái hệ thống" LÊN TRƯỚC biểu đồ công suất. Trên máy tính hai khối nằm cạnh nhau nên thứ tự trong mã nguồn là hợp lý; trên màn hẹp chúng xếp dọc, mà tình trạng hệ thống là thứ cần liếc thấy đầu tiên chứ không phải biểu đồ. */ @media (max-width: 759px) { .ov-side { order: -1; } } @media (min-width: 760px) { .c4 { grid-column: span 4; } .c3 { grid-column: span 3; } .c8 { grid-column: span 8; } .c4w { grid-column: span 4; } } .stack { display: grid; gap: 14px; } .row { display: flex; align-items: center; gap: 10px; } .row-between { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .spacer { flex: 1; } .section-title { display: flex; align-items: center; gap: 10px; font-size: 11.5px; letter-spacing: .16em; font-weight: 800; color: var(--faint); text-transform: uppercase; margin: 22px 2px 12px; } .section-title::after { content: ""; flex: 1; height: 1px; background: var(--border); } /* ---------- 8. CARD ---------- */ .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 16px; box-shadow: var(--shadow); position: relative; overflow: hidden; } .card-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; } .card-head h3 { font-size: 14px; font-weight: 800; letter-spacing: -.005em; } .card-head .card-ico { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: var(--brand-soft); color: var(--brand); flex: none; } .card-head .card-ico svg { width: 16px; height: 16px; } .card-link { margin-left: auto; font-size: 12.5px; font-weight: 700; color: var(--brand); cursor: pointer; background: none; border: 0; display: flex; align-items: center; gap: 4px; } .card-link svg { width: 14px; height: 14px; } /* stat tile */ .stat { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); padding: 14px; box-shadow: var(--shadow-sm); position: relative; overflow: hidden; } .stat::after { content: ""; position: absolute; inset: auto 0 0 0; height: 3px; background: var(--tone, var(--brand)); opacity: .8; } /* Ô nằm trong lưới grid: mặc định min-width của một ô grid là auto, tức nó KHÔNG chịu co nhỏ hơn nội dung. Nhãn dài ("SẢN LƯỢNG TRUNG BÌNH") vì thế đẩy cả hàng rộng ra và trang tràn ngang trên điện thoại. */ .stat { min-width: 0; } .stat .stat-label, .stat .small { overflow-wrap: anywhere; } .stat .stat-ico { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: var(--tone-soft, var(--brand-soft)); color: var(--tone, var(--brand)); margin-bottom: 10px; } .stat .stat-ico svg { width: 17px; height: 17px; } .stat .stat-label { font-size: 10.5px; letter-spacing: .14em; font-weight: 800; color: var(--faint); text-transform: uppercase; } .stat .stat-value { font-size: 26px; font-weight: 800; font-family: var(--mono); letter-spacing: -.02em; margin-top: 2px; } .stat .stat-value small { font-size: 13px; color: var(--muted); font-weight: 600; } /* banner */ .banner { display: flex; align-items: center; gap: 14px; padding: 16px; border-radius: var(--r-lg); border: 1px solid color-mix(in srgb, var(--tone) 30%, transparent); background: linear-gradient(120deg, var(--tone-soft), transparent 70%), var(--surface); box-shadow: var(--shadow); } .banner .banner-ico { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; flex: none; background: var(--tone); color: #fff; } .banner .banner-ico svg { width: 23px; height: 23px; stroke-width: 2.2; } /* Chỉ TIÊU ĐỀ của dải mới xuống dòng riêng. Trước đây luật này bắt MỌI trong dải thành khối, nên một chữ in đậm giữa câu ở đoạn mô tả cũng bị đá xuống dòng — câu văn vỡ thành từng mẩu xếp dọc. */ .banner-text > b { display: block; font-size: 15.5px; } .banner p { font-size: 13px; color: var(--muted); margin-top: 2px; } /* basis 0 chứ không phải auto: có flex-wrap rồi nên nếu lấy bề rộng theo nội dung, khối chữ sẽ tự nhảy xuống hàng riêng, bỏ icon đứng trơ một mình. */ .banner-text { flex: 1 1 0; min-width: 0; } .banner > .btn { flex: none; } /* Điện thoại: nút tụt xuống hàng riêng, nhờ vậy phần chữ được cả chiều ngang và không bị bóp thành cột hẹp vỡ dòng. */ @media (max-width: 559px) { .banner { flex-wrap: wrap; } .banner > .btn { flex: 1 0 100%; justify-content: center; } } /* badge / pill */ .badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 99px; font-size: 11px; font-weight: 800; letter-spacing: .02em; background: var(--tone-soft, var(--brand-soft)); color: var(--tone, var(--brand)); } .badge i { width: 6px; height: 6px; border-radius: 99px; background: currentColor; } .badge.live i { animation: blink 1.6s ease-in-out infinite; } @keyframes blink { 50% { opacity: .25; } } /* buttons */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 16px; border-radius: 12px; cursor: pointer; border: 1px solid var(--border); background: var(--surface); font-size: 14px; font-weight: 700; transition: .18s; } .btn svg { width: 17px; height: 17px; } .btn:hover { border-color: var(--border-strong); transform: translateY(-1px); } .btn-primary { background: linear-gradient(100deg, var(--brand), var(--brand-2)); border-color: transparent; color: #fff; box-shadow: 0 8px 22px -12px var(--brand); } .btn-primary:hover { filter: brightness(1.06); } .btn-ghost { background: var(--surface-2); } .btn-danger { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 32%, transparent); background: var(--danger-soft); } .btn-block { width: 100%; } .btn-dashed { border-style: dashed; border-width: 1.5px; color: var(--muted); background: none; padding: 16px; } .btn-dashed:hover { color: var(--brand); border-color: var(--brand); background: var(--brand-soft); } /* segmented control */ .seg { display: inline-flex; padding: 4px; gap: 3px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 13px; } .seg button { padding: 8px 15px; border: 0; border-radius: 10px; background: none; cursor: pointer; font-size: 13px; font-weight: 700; color: var(--muted); transition: .16s; } .seg button.on { background: var(--surface); color: var(--brand); box-shadow: var(--shadow-sm); } /* chips */ .chips { display: flex; gap: 7px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; } .chips::-webkit-scrollbar { display: none; } .chip { flex: none; padding: 7px 13px; border-radius: 99px; border: 1px solid var(--border); background: var(--surface-2); cursor: pointer; font-size: 12.5px; font-weight: 700; color: var(--muted); transition: .16s; } .chip.on { background: var(--brand); border-color: var(--brand); color: #fff; } /* list row */ .list { display: grid; } .list-row { display: flex; align-items: center; gap: 13px; width: 100%; padding: 13px 4px; border: 0; background: none; cursor: pointer; text-align: left; border-bottom: 1px solid var(--border); } .list .list-row:last-child { border-bottom: 0; } /* Hàng có thể là