/* ========================================================================== kks-obs.css - He thong giao dien chung cho DAI QUAN SAT Cach dung: them vao trang, giu . Token dat tren body nen de len :root rieng cua tung trang, khong can sua CSS cu. ========================================================================== */ body.kks-space, .kks-obs { --bg:#070A16; --bg2:#0B1024; --bg3:#111736; --bg4:#161E42; --card:rgba(13,18,40,.78); --border:#212A50; --border2:#303C72; --line:rgba(141,162,255,.16); --text:#EAEEFF; --text2:#9AA4C8; --text3:#6F7A9E; --ink:#EAEEFF; --muted:#9AA4C8; --soft:#9AB0D8; --green:#39E29B; --green2:#7CF2C0; --green-bg:rgba(57,226,155,.10); --red:#FF5C7A; --red2:#FF8CA1; --red-bg:rgba(255,92,122,.10); --blue:#8DA2FF; --blue2:#B3C1FF; --blue-bg:rgba(141,162,255,.10); --gold:#C9AA70; --gold2:#E4CB93; --gold-bg:rgba(201,170,112,.10); --terra:#E1795A; --r:10px; --r-card:14px; --radius:14px; --r-pill:999px; --h-control:38px; --h-tap:44px; --ic:32px; --fs-h1:20px; --fs-h2:13px; --fs-body:14px; --fs-sm:13px; --fs-xs:11.5px; --sans:'Be Vietnam Pro',system-ui,-apple-system,sans-serif; --mono:'Space Mono',ui-monospace,monospace; } body.kks-space { font-family:var(--sans); color:var(--text); } body.kks-space h1 { font-size:var(--fs-h1); font-weight:700; letter-spacing:-.01em; } body.kks-space h2 { font-size:16px; font-weight:600; } body.kks-space .card { background:var(--card); border:1px solid var(--border); border-radius:var(--r-card); font-size:var(--fs-body); } body.kks-space .btn { min-height:var(--h-control); padding:8px 14px; border-radius:var(--r); border:1px solid var(--border2); background:var(--bg3); color:var(--text); font-family:inherit; font-size:var(--fs-sm); display:inline-flex; align-items:center; gap:6px; cursor:pointer; } body.kks-space .btn:hover { background:var(--bg4); } body.kks-space .pill { min-height:var(--h-control); padding:6px 12px; border-radius:var(--r); background:var(--bg2); border:1px solid var(--border); font-size:var(--fs-xs); display:inline-flex; align-items:center; gap:8px; } body.kks-space .badge { border-radius:var(--r-pill); padding:2px 10px; font-size:var(--fs-xs); background:var(--blue-bg); color:var(--blue2); border:1px solid rgba(141,162,255,.28); } body.kks-space .nav-tabs { display:flex; gap:2px; padding:3px; background:var(--bg3); border-radius:8px; } body.kks-space .nav-tab { min-height:36px; padding:8px 16px; border:none; background:transparent; border-radius:6px; font-family:inherit; font-size:var(--fs-sm); font-weight:500; color:var(--text2); text-decoration:none; display:inline-flex; align-items:center; cursor:pointer; } body.kks-space .nav-tab:hover:not(.active) { color:var(--text); } body.kks-space .nav-tab.active { background:var(--bg4); color:var(--text); border:1px solid var(--border2); } body.kks-space .logo .ic, body.kks-space .brand-mark, body.kks-space .obs-ic { width:var(--ic); height:var(--ic); border-radius:10px; font-size:16px; display:grid; place-items:center; flex:0 0 auto; } body.kks-space input, body.kks-space select { min-height:var(--h-control); border-radius:var(--r); border:1px solid var(--border2); background:var(--bg); color:var(--text); font-family:inherit; } body.kks-space input:focus, body.kks-space select:focus { outline:2px solid rgba(57,226,155,.40); outline-offset:1px; border-color:var(--green); } body.kks-space .header, body.kks-space .hd { position:sticky; top:0; z-index:100; min-height:56px; background:rgba(9,13,30,.74); backdrop-filter:blur(12px); border-bottom:1px solid var(--border); } body.kks-space .mono, body.kks-space .num { font-family:var(--mono); font-variant-numeric:tabular-nums; } body.kks-space .up { color:var(--green); } body.kks-space .down { color:var(--red); } @media (max-width:640px) { body.kks-space .btn, body.kks-space .nav-tab, body.kks-space input, body.kks-space select { min-height:var(--h-tap); } body.kks-space .nav-tabs { width:100%; overflow-x:auto; } body.kks-space .nav-tab { flex:1; justify-content:center; } } @media (prefers-reduced-motion:no-preference) { body.kks-space .card { transition:border-color .25s, box-shadow .25s; } } body.kks-space .logo .ic, body.kks-space .brand-mark { background:linear-gradient(135deg,#2E9E6B,#39E29B); color:#03210F; } body.kks-space .btn { border-radius:var(--r) !important; } body.kks-space .hd .sub { display:none; }