/* Uu tien dien thoai. Hai bang mau: :root la nen TOI (mac dinh), :root[data-theme="light"] la nen SANG. Moi mau trong file deu di qua bien - them mau cung o duoi la no ket cung o mot che do. Bang cuon ngang trong khung rieng de trang khong bao gio bi cuon ngang. */ :root { --bg: #0b0f19; --bg-2: #121826; --bg-3: #1a2233; --line: #232c40; --fg: #e6ecf7; --fg-dim: #8f9dba; --accent: #38c8ff; --hot: #ff5c72; --warm: #ffc857; --good: #4ade80; --pot: #c084fc; --radius: 12px; /* Keo noi dung thanh menu duoi day xuong thap them may px. Chinh DUY NHAT con so nay khi thanh menu tren dien thoai trong hoi cao: no bot padding tren va bu dung bay nhieu vao padding duoi, nen CHIEU CAO thanh khong doi - doi chieu cao thi --botnav-h (app.js) va vung cuon cua
phai do lai theo. */ --bnav-drop: 5px; /* Nen phu cho nhan trang thai */ --good-bg: #10331f; --hot-bg: #3a1620; --warm-bg: #3a2a12; --warm-bg-soft: #1e1a10; --hot-bg-soft: #2a1620; --danger-line: #4a2230; --on-accent: #06121b; /* chu nam TREN nen --accent */ --row-alt: #141b2b; /* soc xen ke cua bang */ --top-bg: rgba(11,15,25,.92); --scrim: rgba(5,8,14,.72); --shadow-lg: 0 18px 44px rgba(0,0,0,.55); --shadow-md: 0 8px 24px rgba(0,0,0,.45); --tint-good: rgba(74,222,128,.12); --tint-good-line: rgba(74,222,128,.28); --tint-good-strong: rgba(74,222,128,.55); --tint-hot: rgba(255,92,114,.12); --tint-hot-line: rgba(255,92,114,.28); --tint-accent: rgba(56,200,255,.12); --tint-accent-line: rgba(56,200,255,.28); --tint-accent-soft: rgba(56,200,255,.07); --tint-pot: rgba(192,132,252,.12); --tint-pot-line: rgba(192,132,252,.28); --tint-warm-line: rgba(255,200,87,.4); color-scheme: dark; } /* ---------- nen sang ---------- JS (index.html) quy che do "tu dong" ra data-theme="light"/"dark" NGAY trong , truoc khi trang ve, nen khong co canh nhay mau luc tai. O day chi can dinh nghia MOT bang mau sang, khong phai lam ban sao cho @media. Mau chu/vien deu chon dam hon ban toi: #4ade80 tren nen trang chi dat ~1.9:1, khong doc noi. Bo hien tai deu tren 4.5:1 voi ca bon mau nen (--bg, --bg-2, --bg-3, --row-alt) va voi nen phu cung mau - do bang cong thuc WCAG. */ :root[data-theme="light"] { --bg: #f4f6fb; --bg-2: #ffffff; --bg-3: #eaeef6; --line: #d5dce8; --fg: #111826; --fg-dim: #5a6781; --accent: #0a7399; --hot: #c71d39; --warm: #936000; --good: #117a39; --pot: #7128d4; --good-bg: #dcf2e4; --hot-bg: #fce0e5; --warm-bg: #f9edd3; --warm-bg-soft: #fdf6e6; --hot-bg-soft: #fdeaee; --danger-line: #f0bfc8; --on-accent: #ffffff; --row-alt: #f7f9fd; --top-bg: rgba(244,246,251,.92); --scrim: rgba(17,24,38,.42); --shadow-lg: 0 18px 44px rgba(23,32,51,.18); --shadow-md: 0 8px 24px rgba(23,32,51,.14); --tint-good: rgba(17,122,57,.10); --tint-good-line: rgba(17,122,57,.30); --tint-good-strong: rgba(17,122,57,.55); --tint-hot: rgba(199,29,57,.09); --tint-hot-line: rgba(199,29,57,.28); --tint-accent: rgba(10,115,153,.10); --tint-accent-line: rgba(10,115,153,.30); --tint-accent-soft: rgba(10,115,153,.07); --tint-pot: rgba(113,40,212,.10); --tint-pot-line: rgba(113,40,212,.28); --tint-warm-line: rgba(147,96,0,.38); color-scheme: light; } * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; } /* Thuoc tinh `hidden` cua HTML chi la `display: none` o muc trinh duyet, nen bat ky selector nao dat `display` deu de bep no - .badge (inline-block) va .gate (flex) da dinh dung loi nay: JS dat hidden = true ma phan tu van hien. Dat mot lan o day de khong phai nho tung cho. */ [hidden] { display: none !important; } html, body { margin: 0; padding: 0; } body { background: var(--bg); color: var(--fg); font: 14px/1.45 ui-sans-serif, -apple-system, "SF Pro Text", Roboto, system-ui, sans-serif; overflow-x: hidden; } /* Trang cao het man hinh va
an het cho con lai: man hinh ngan (CAI DAT, THEO DOI dang trong) truoc day ket thuc lung chung roi con mot khoang trong nua moi toi thanh menu. Vung an toan cua iPhone da nam trong .botnav roi - cong them mot lan nua o body la de ra day cuon rong ben duoi. */ #app { min-height: 100dvh; display: flex; flex-direction: column; } #app > main { flex: 1 0 auto; } code { background: var(--bg-3); padding: 1px 5px; border-radius: 4px; font-size: 12px; } /* ---------- header ---------- */ .top { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 10px; padding: calc(10px + env(safe-area-inset-top)) 14px 10px; background: var(--top-bg); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); } .brand { position: relative; flex: none; display: flex; margin-right: auto; } .brand .logo { width: 28px; height: 28px; border-radius: 8px; display: block; } .dot { position: absolute; right: -2px; bottom: -2px; width: 9px; height: 9px; border-radius: 50%; background: var(--fg-dim); border: 2px solid var(--bg); } .dot.live { background: var(--good); box-shadow: 0 0 0 0 var(--tint-good-strong); animation: pulse 2.4s infinite; } .dot.stale { background: var(--warm); } @keyframes pulse { 70% { box-shadow: 0 0 0 5px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } } .icon-btn { position: relative; background: var(--bg-3); color: var(--fg); border: 1px solid var(--line); border-radius: 9px; width: 34px; height: 34px; font-size: 17px; cursor: pointer; flex: none; display: inline-flex; align-items: center; justify-content: center; padding: 0; } .icon-btn svg { width: 18px; height: 18px; display: block; } .icon-btn:active { background: var(--line); } .icon-btn.on { color: var(--accent); border-color: var(--accent); } /* So thong bao chua xem. Nam de ra ngoai vien nut nen nut phai la position: relative va KHONG duoc overflow: hidden. */ .ndot { position: absolute; top: -5px; right: -5px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 9px; background: var(--hot); color: #fff; font-size: 10px; font-weight: 800; line-height: 16px; font-style: normal; border: 1.5px solid var(--bg); font-variant-numeric: tabular-nums; } /* ---------- bang thong bao (chuong) ---------- */ /* Keo xuong het day man hinh nhu .modal: lop nay trong suot nhung la cho bat cu cham-ra-ngoai-de-dong, thieu doan duoi thi cham vao chan man hinh khong dong duoc bang. */ .pop { position: fixed; inset: 0; bottom: calc(-1 * var(--botnav-gap, 0px)); z-index: 60; } .pop-back { position: absolute; inset: 0; } .pop-box { position: absolute; left: 10px; right: 10px; margin-left: auto; max-width: 380px; top: calc(52px + env(safe-area-inset-top)); background: var(--bg-2); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-lg); padding: 10px; /* Danh sach dai thi cuon TRONG bang, khong keo dai xuong duoi man hinh */ max-height: min(70vh, 540px); display: flex; flex-direction: column; animation: rise .14s ease-out; } .pop-head { display: flex; align-items: center; gap: 10px; padding: 2px 4px 8px; } .pop-head .card-title { flex: 1; margin: 0; } .pop-list { flex: 1; overflow-y: auto; min-height: 0; } .nitem { width: 100%; display: flex; align-items: flex-start; gap: 10px; text-align: left; background: none; border: 0; border-radius: 10px; padding: 9px 8px; color: var(--fg); font: inherit; cursor: pointer; } .nitem:active { background: var(--bg-3); } .nitem.unread { background: var(--tint-accent-soft); } .nitem i { width: 8px; height: 8px; border-radius: 50%; flex: none; margin-top: 6px; background: var(--fg-dim); } .nitem.k-pot i { background: var(--pot); } .nitem.k-alert i { background: var(--warm); } .nitem.k-tp i { background: var(--good); } .nitem.k-sl i { background: var(--hot); } /* Het gio khong thang khong thua o muc "cham dich" nen dung mau trung tinh */ .nitem.k-timeout i { background: var(--fg-dim); } .nitem .ntxt { flex: 1; min-width: 0; } .nitem .nmsg { font-size: 13px; line-height: 1.35; } .nitem .nago { font-size: 11px; color: var(--fg-dim); margin-top: 2px; } /* Bang xo xuong hep: menu cua anh dai dien chi co hai muc, keo rong 380px nhu bang thong bao thi trong hoac. */ .pop-box.sm { max-width: 250px; padding: 8px; } .whop-head { display: flex; align-items: center; gap: 10px; padding: 6px 6px 10px; border-bottom: 1px solid var(--line); margin-bottom: 6px; } .whop-head .acc-pic { width: 34px; height: 34px; } .menu-item { width: 100%; display: flex; align-items: center; gap: 10px; background: none; border: 0; border-radius: 9px; padding: 10px 8px; color: var(--fg); font: inherit; font-weight: 600; text-align: left; cursor: pointer; } .menu-item:active { background: var(--bg-3); } .menu-item svg { width: 18px; height: 18px; flex: none; } .menu-item.hot { color: var(--hot); } /* Mot muc trong bang cai dat. Duong ke giua cac muc thay cho viec moi muc mot the rieng: trong mot bang xo xuong ma long them the nua thi vien chong vien. */ .pset { padding: 12px 0; border-top: 1px solid var(--line); } .pset:first-child { padding-top: 2px; border-top: 0; } .pset-t { font-weight: 700; font-size: 12.5px; margin-bottom: 10px; letter-spacing: .03em; } .pset .row-btns { margin-top: 8px; } /* Nut hai muc chon che do */ .seg { display: flex; gap: 4px; background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 4px; } .seg-b { flex: 1 1 0; min-width: 0; background: none; border: 0; border-radius: 7px; color: var(--fg-dim); font: inherit; font-size: 12.5px; font-weight: 700; padding: 8px 6px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 6px; } .seg-b.active { background: var(--bg-3); color: var(--fg); box-shadow: inset 0 -2px 0 0 var(--good); } /* Chua lam xong: van hien de biet sap co, nhung phai nhin ra ngay la bam khong duoc - mo di va doi con tro thanh dau cam. */ .seg-b[disabled] { opacity: .5; cursor: not-allowed; } .soon { font-style: normal; font-size: 9px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--warm); border: 1px solid var(--tint-warm-line); border-radius: 999px; padding: 1px 5px; } /* O nhap so tien trong bang cai dat */ .fld { display: block; margin-top: 12px; } .fld span { display: block; font-size: 11px; color: var(--fg-dim); margin-bottom: 5px; letter-spacing: .05em; text-transform: uppercase; } .fld input { width: 100%; background: var(--bg); border: 1px solid var(--line); color: var(--fg); border-radius: 9px; padding: 10px 11px; font-size: 16px; /* 16px: iOS khong tu zoom */ font-variant-numeric: tabular-nums; } .fld input:focus { outline: none; border-color: var(--accent); } .icon-btn.spin { animation: spin .6s linear; } @keyframes spin { to { transform: rotate(360deg); } } /* ---------- tabs ---------- */ .tabs { position: sticky; top: calc(53px + env(safe-area-inset-top)); z-index: 19; display: flex; background: var(--bg); border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; } .tabs::-webkit-scrollbar { display: none; } .tab { flex: 1 0 auto; background: none; border: none; border-bottom: 2px solid transparent; color: var(--fg-dim); padding: 11px 13px; font-size: 11.5px; font-weight: 700; letter-spacing: .06em; cursor: pointer; white-space: nowrap; } .tab.active { color: var(--fg); border-bottom-color: var(--accent); } .badge { display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 20px; background: var(--bg-3); color: var(--fg-dim); font-size: 10px; font-weight: 700; } .tab.active .badge { background: var(--accent); color: var(--on-accent); } main { padding: 12px 12px 24px; max-width: 1100px; margin: 0 auto; width: 100%; } .panel { display: none; } .panel.active { display: block; } /* tab con trong mot panel (LICH SU). Nho hon tab chinh de nhin la biet ngay minh dang o tang thu hai, khong nham voi thanh tab tren cung. */ .subtabs { display: flex; gap: 6px; margin-bottom: 12px; background: var(--bg-2); border: 1px solid var(--line); border-radius: 11px; padding: 4px; } .subtab { flex: 1 1 0; background: none; border: none; border-radius: 8px; color: var(--fg-dim); padding: 8px 6px; font-size: 12px; font-weight: 700; letter-spacing: .03em; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Nen dam hon + gach chan: chi doi mau chu thi tren nen toi rat kho nhan ra muc nao dang mo, nhat la ngoai nang. */ .subtab.active { background: var(--bg-3); color: var(--fg); box-shadow: inset 0 -2px 0 0 var(--good); } .subpanel { display: none; } .subpanel.active { display: block; } .hint { color: var(--fg-dim); font-size: 12.5px; margin: 0 0 12px; } .hint b { color: var(--fg); } .sub { color: var(--fg-dim); font-size: 12px; margin: 6px 0 0; } /* ---------- bang ---------- */ .tablebox { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-2); } table { border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums; font-size: 12.5px; } th, td { padding: 8px 9px; text-align: right; white-space: nowrap; } th { position: sticky; top: 0; background: var(--bg-3); color: var(--fg-dim); font-size: 10.5px; font-weight: 700; letter-spacing: .05em; cursor: pointer; user-select: none; } th.sorted { color: var(--accent); } td:first-child, th:first-child { text-align: left; position: sticky; left: 0; background: var(--bg-2); box-shadow: 1px 0 0 var(--line); } th:first-child { background: var(--bg-3); z-index: 2; } tbody tr:nth-child(even) td { background: var(--row-alt); } tbody tr:nth-child(even) td:first-child { background: var(--row-alt); } tbody tr:active td { background: var(--bg-3); } .sym { font-weight: 700; } .rank { color: var(--fg-dim); font-weight: 400; margin-right: 6px; font-size: 11px; } .s-hot { color: var(--hot); font-weight: 700; } .s-warm { color: var(--warm); font-weight: 700; } .s-good { color: var(--good); } .s-dim { color: var(--fg-dim); } .pot-val { color: var(--pot); font-weight: 700; } .up { color: var(--good); } .down { color: var(--hot); } .watched td:first-child::before { content: "\2605 "; color: var(--warm); } .empty { border: 1px dashed var(--line); border-radius: var(--radius); padding: 26px 16px; text-align: center; color: var(--fg-dim); font-size: 13px; } .toolbar { display: flex; gap: 8px; margin-bottom: 10px; } .toolbar input, .toolbar select { background: var(--bg-2); border: 1px solid var(--line); color: var(--fg); border-radius: 9px; padding: 9px 11px; font-size: 14px; min-width: 0; } .toolbar input { flex: 1; } /* ---------- thanh dieu huong duoi day (dien thoai / may tinh bang) ---------- */ /* Chuot thi voi len dinh man hinh cung nhanh nhu nhau, ngon tay thi khong: cam may mot tay, dau ngon cai chi quet duoc nua duoi. Nen dieu kien la CACH DUNG chu khong chi la be ngang - may nao chi co man hinh cham (dien thoai, may tinh bang, ke ca khi nam ngang rong hon 1000px) deu lay thanh duoi day; may tinh chi lay khi cua so bi thu hep den muc thanh tab tren cung chat cho. */ .botnav { display: none; } .bbadge[hidden] { display: none; } @media (max-width: 899px), (hover: none) and (pointer: coarse) { .tabs { display: none; } /* KHUNG APP CAO DUNG BANG MAN HINH, thanh menu la HANG CUOI cua no. Truoc day thanh menu la `position: fixed; bottom: 0` - dung tren trinh duyet may tinh, nhung sau khi "Them vao man hinh chinh" tren iPhone thi iOS dat lai phan tu fixed theo VISUAL viewport, ma chieu cao do luc vua mo app tu icon van chua chot: thanh menu dung lo lung, moi man hinh mot cho, phai cham vao mot muc bat ky no moi nhay ve day roi nam yen o do. Bo fixed di la het cho cho iOS dat sai: khung app dung bang dung man hinh, thanh menu la hang cuoi cua cot, va
moi la thu cuon. */ #app { position: fixed; inset: 0; min-height: 0; } .top { flex: none; } #app > main { /* Phai CO LAI duoc (flex-shrink 1) va min-height: 0 - de mac dinh thi main cao bang noi dung va day thanh menu ra khoi man hinh. */ flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; /* Cuon het bang roi thi dung han, khong keo theo ca khung app phia sau */ overscroll-behavior-y: contain; } /* Hai thanh noi nay bam vao KHUNG APP chu khong phai visual viewport - cung mot ly do voi thanh menu. #app da la fixed nen absolute o day la bam dung vao no. */ .selbar, .jobpill { position: absolute; } .botnav { display: flex; flex: none; z-index: 45; /* --bg chu khong phai --bg-2. Dai toi nam duoi thanh menu tren dien thoai co the do BON thu khac nhau to ra: nen trang, background_color trong manifest (che do them vao man hinh chinh), man hinh cho luc khoi dong, hay thanh cong cu cua Safari (to theo theme-color). Ca bon deu bang --bg cua theme dang bat; cho thanh menu dung dung mau do thi dai kia noi lien vao no, khong con phai doan xem cai nao dang to. Vach ngan la border-top. */ background: var(--bg); border-top: 1px solid var(--line); /* Khong tu chua cho o day: chua bang env() thi may khong co vach Home lai thua ra mot dai trong. Thay vao do JS DO khoang trong con lai duoi thanh menu (syncNavHeight -> --botnav-gap) roi keo thanh menu xuong dung bay nhieu bang margin am. Do that nen may nao cung dung, va gap = 0 (thanh menu da sat day) thi dong nay khong lam gi ca. */ padding-bottom: 0; margin-bottom: calc(-1 * var(--botnav-gap, 0px)); /* Khong du cho thi CUON NGANG chu khong giau bot sau nut "...". snap de moi lan vuot dung gon vao mot muc chu khong bo do nua chung; an luon thanh cuon vi no che mat chu ben duoi icon. */ overflow-x: auto; overflow-y: hidden; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; scrollbar-width: none; overscroll-behavior-x: contain; } .botnav::-webkit-scrollbar { display: none; } /* PWA iOS: sau khi --botnav-gap keo thanh menu xuong DAY MAN HINH THAT, vach Home nam de len hang chu. Chua cho no o day - va chi o day: tren may khac thanh menu van dung o day khung bo cuc, them padding vao la tu nhien cao len mot doan khong co ly do. */ html.ios-pwa .botnav { padding-bottom: env(safe-area-inset-bottom, 0px); } /* May tinh bang nam ngang: khong dan 5 muc ra het be ngang man hinh - keo nhau xa qua thi mat cong ra tan goc de doi tab. Gom lai giua, moi muc rong dung bang luc o tren dien thoai. Man hinh hep hon 620px thi phan nay bang 0, thanh menu tro lai y nguyen nhu cu. */ .botnav { padding-inline: max(0px, calc((100% - 620px) / 2)); } } /* That su chat cho: ba nut icon + anh dai dien khong con cho cho ca ten nguoi dung; bo ten di, anh dai dien la du de biet dang dang nhap bang tai khoan nao. Rieng muc nay van theo be ngang, khong theo loai man hinh. */ @media (max-width: 699px) { .top { gap: 7px; padding-left: 11px; padding-right: 11px; } .top .who { padding: 3px; max-width: none; } .top .who span { display: none; } } .bnav { /* flex-grow 1: it muc thi dan deu het chieu ngang. flex-basis 19% + khong cho co lai: tu sau muc thu nam la thanh bat dau cuon, muc thu sau lo ra mot nua de nguoi dung biet con nua - chu khong bi bop het vao mot man hinh roi chu nao cung "...". */ position: relative; flex: 1 0 19%; min-width: 0; scroll-snap-align: center; display: flex; flex-direction: column; align-items: center; gap: 3px; background: none; border: 0; cursor: pointer; color: var(--fg-dim); padding: calc(7px + var(--bnav-drop)) 2px calc(6px - var(--bnav-drop)); font-size: 9.5px; font-weight: 700; letter-spacing: .02em; } .bnav svg { width: 22px; height: 22px; flex: none; } .bnav span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .bnav.active { color: var(--accent); } /* Cham bao: chi noi "co gi do moi", con SO thi de thanh tab tren cung lo - o day khong du cho ma con so nho the doc cung khong ra. */ .bbadge { position: absolute; top: calc(5px + var(--bnav-drop)); right: 50%; margin-right: -16px; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); border: 1.5px solid var(--bg); } /* ---------- o so lieu + bieu do ---------- */ /* Dung chung cho nhieu man hinh. auto-fit + minmax: tren may tinh dan thanh mot hang, tren dien thoai tu gap thanh 2 cot ma khong can @media rieng. */ .tiles { display: grid; gap: 10px; margin-bottom: 12px; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); } .tile { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 11px 13px; } .tile .k { font-size: 10px; color: var(--fg-dim); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tile .v { font-size: 21px; font-weight: 700; margin-top: 3px; font-variant-numeric: tabular-nums; line-height: 1.2; } .tile .v.up { color: var(--good); } .tile .v.down { color: var(--hot); } /* O so lieu co hinh: chu ben trai, hinh ben phai. Chi dung o LICH SU - bang tiem nang van la o tran, nhieu o qua ma o nao cung co hinh thi thanh roi. */ .ic-tile { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 13px; } .ic-tile .tx { min-width: 0; } /* Nhan o day la mot cum tu, khong phai tieu de cot: viet thuong, khong gian chu - de doc hon han kieu IN HOA cua o so lieu ben bang tiem nang. */ .ic-tile .k { font-size: 12.5px; text-transform: none; letter-spacing: 0; color: var(--fg-dim); } .ic-tile .v { font-size: 24px; margin-top: 4px; } .ic { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 42px; height: 42px; border-radius: 12px; border: 1px solid transparent; } .ic svg { width: 21px; height: 21px; display: block; } .ic.t-good { color: var(--good); background: var(--tint-good); border-color: var(--tint-good-line); } .ic.t-hot { color: var(--hot); background: var(--tint-hot); border-color: var(--tint-hot-line); } .ic.t-accent { color: var(--accent); background: var(--tint-accent); border-color: var(--tint-accent-line); } .ic.t-pot { color: var(--pot); background: var(--tint-pot); border-color: var(--tint-pot-line); } /* Dien thoai: ep dung HAI cot. auto-fit dung chung se ra ba cot hep tren may to hon mot chut, ma o co hinh thi ba cot la bop chet phan so. O le loi mot minh o hang cuoi thi cho an ca hang, khong de trong mot ben. */ #hist-tiles { grid-template-columns: repeat(2, 1fr); } #hist-tiles .tile:last-child:nth-child(odd) { grid-column: 1 / -1; } @media (min-width: 640px) { #hist-tiles { grid-template-columns: repeat(auto-fit, minmax(178px, 1fr)); } /* Man hinh rong co 3-4 cot: ep o cuoi an ca hang chi de lai mot khoang trong to o hang truoc, de no tu xep binh thuong. */ #hist-tiles .tile:last-child:nth-child(odd) { grid-column: auto; } } .charts { display: grid; gap: 10px; margin-bottom: 12px; grid-template-columns: 1fr; } @media (min-width: 720px) { .charts { grid-template-columns: 1.6fr 1fr; } } .charts .card { margin: 0; } /* aspect-ratio chu khong phai chieu cao co dinh: SVG gio co chu tren truc, keo gian mot chieu (preserveAspectRatio="none" nhu truoc) se lam chu bi det. */ .chart { width: 100%; height: auto; aspect-ratio: 320 / 176; display: block; margin-top: 4px; } .cax { fill: var(--fg-dim); font-size: 9px; font-weight: 600; text-anchor: end; } .chart-empty { color: var(--fg-dim); font-size: 12px; text-align: center; padding: 28px 8px; border: 1px dashed var(--line); border-radius: 9px; margin-top: 10px; } .donut-wrap { display: flex; align-items: center; gap: 14px; margin-top: 10px; } .donut { width: 104px; height: 104px; flex: none; transform: rotate(-90deg); } .donut .arc { fill: none; stroke-width: 13; } .donut-n { font-size: 20px; font-weight: 700; fill: var(--fg); text-anchor: middle; dominant-baseline: central; /* chu nam trong svg da xoay -90 nen phai xoay nguoc lai quanh tam */ transform: rotate(90deg); transform-origin: 50px 50px; } .legend-dots { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; } .legend-dots li { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--fg-dim); } .legend-dots i { width: 9px; height: 9px; border-radius: 3px; flex: none; } .legend-dots b { margin-left: auto; color: var(--fg); font-variant-numeric: tabular-nums; } /* ---------- bang keo da dong ---------- */ .htable td { white-space: nowrap; font-variant-numeric: tabular-nums; } .htable tr.hrow { cursor: pointer; } .htable tr.hrow:hover td { background: var(--bg-3); } .htable tr.hrow.open td { background: var(--bg-3); } .hcoin { display: flex; align-items: center; gap: 8px; } .hcoin .sym { font-weight: 700; } /* Dong chi tiet: bo het padding cua o de the ben trong chiem tron chieu ngang */ /* `th, td { white-space: nowrap }` la de cac cot so khong bi be dong. The chi tiet thi nguoc lai - no la chu, phai duoc xuong dong binh thuong. */ .htable tr.hdet > td { padding: 0; background: var(--bg); white-space: normal; } /* The chi tiet nam trong mot nen no rong bang CA BANG (~740px), trong khi khung chi nhin thay ~460px. .ikv day cot gia tri sang le phai, tuc la ra han ngoai vung nhin: the trong y nhu bo trong, chi co nhan khong co so. Ghim theo canh trai vung cuon va thu ve dung be ngang nhin thay duoc. --hcard-w do bang JS (syncHistCardWidth): CSS khong hoi duoc be ngang cua mot vung dang cuon. */ .htable tr.hdet .hcard { margin: 0; border-radius: 0; border-left: 0; border-right: 0; position: sticky; left: 0; width: var(--hcard-w, 100%); } /* ---------- khoi AI trong BANG CHINH ---------- */ /* Gap lai thi chi cao bang mot dong: bang so lieu van la thu dau tien nhin thay khi mo tab. Mo ra moi hien nut hoi + cac keo gan nhat. */ .aibox { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 0 13px; margin-bottom: 12px; } .aibox > summary { display: flex; align-items: center; gap: 9px; padding: 12px 0; cursor: pointer; list-style: none; } .aibox > summary::-webkit-details-marker { display: none; } .aibox > summary .card-title { margin: 0; } .aibox-go { margin-left: auto; color: var(--fg-dim); font-size: 19px; line-height: 1; transition: transform .15s; } .aibox[open] .aibox-go { transform: rotate(90deg); } .aibox[open] > summary { border-bottom: 1px solid var(--line); } .aibox > *:not(summary):first-of-type { margin-top: 12px; } .aibox > .note-foot { padding-bottom: 13px; } .aibox #ai-result:empty { display: none; } /* ---------- icon coin ---------- */ /* Chu cai dau tren nen mau suy tu ten coin. Khong tai anh: PWA phai chay offline va moi logo la mot request ra ngoai. --h do JS dat, moi coin mot mau co dinh. */ .cico { width: 26px; height: 26px; flex: none; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 800; letter-spacing: .02em; background: hsl(var(--h) 55% 22%); color: hsl(var(--h) 85% 72%); border: 1px solid hsl(var(--h) 55% 32%); } /* ---------- the coin TIEM NANG ---------- */ /* Bang tiem nang thuong chi co 0-3 dong. The doc de hon bang: moi so co nhan day du thay vi ma cot viet tat, va bam ca the la mo duoc chi tiet. */ .pcard { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 13px; margin-bottom: 10px; cursor: pointer; } .pcard:active { background: var(--bg-3); } .pcard:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .phead { display: flex; align-items: center; gap: 9px; } .prank { margin-left: auto; font-size: 11px; color: var(--fg-dim); font-variant-numeric: tabular-nums; white-space: nowrap; } .pgrid { display: grid; gap: 9px; margin: 12px 0; grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); } .pcell .k { font-size: 10px; color: var(--fg-dim); letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pcell .v { font-size: 15px; font-weight: 600; margin-top: 2px; font-variant-numeric: tabular-nums; } .pcard button.wide { width: 100%; } /* ---------- loc lich su ---------- */ /* Ba hang loc deu dung .toolbar, nhung o day chung phai xuong dong duoc tren dien thoai: mot hang cung khong duoc de o ngay bi bop con vai chuc pixel. */ .hist-tools { flex-wrap: wrap; align-items: center; } .hist-tools .grow { flex: 1 1 180px; } .hist-tools select { flex: 0 1 auto; } .chips { display: flex; gap: 5px; flex-wrap: wrap; } /* Chat tay mot chut so voi o khac: bon moc + nut Tuy chon phai du cho tren mot hang o man hinh 390px. Khong du thi van tu xuong hang, khong vo layout. */ .chip { background: var(--bg-2); border: 1px solid var(--line); color: var(--fg-dim); border-radius: 999px; padding: 6px 10px; font-size: 11.5px; font-weight: 700; cursor: pointer; white-space: nowrap; } .chip.active { background: var(--tint-good); border-color: var(--tint-good-strong); color: var(--good); } /* Nut mo/dong hai o ngay. Nam cuoi day chip nen phai cung dang pill, chi khac la co hinh - de mat phan biet duoc "moc co san" voi "tu chon ngay". */ .chip-cal { display: inline-flex; align-items: center; gap: 5px; margin-left: auto; padding-inline: 9px; } .chip-cal svg { width: 14px; height: 14px; flex: none; } .chip-cal .chev { width: 12px; height: 12px; opacity: .75; transition: transform .15s; } .chip-cal[aria-expanded="true"] .chev { transform: rotate(180deg); } /* Day chip an het be ngang de nut Tuy chon bi day han sang phai */ #hist-ranges { flex: 1 1 auto; } .datebox { display: flex; align-items: center; gap: 6px; color: var(--fg-dim); font-size: 12px; white-space: nowrap; } /* Safari iOS dung chieu cao rieng cho input[type=date]; ep lai cho bang o khac */ .datebox input { font-size: 13px; padding: 7px 9px; min-height: 36px; } #hist-count:empty, #hist-money-note:empty { display: none; } #hist-money-note { margin: -4px 0 12px; } /* Tien quy tu TP/SL, dat ngay canh muc gia. Nho hon gia: gia van la thu de dat lenh, con so tien chi de uoc luong duoc/mat. */ .lvm { display: block; font-size: 11px; font-weight: 700; margin-top: 2px; } .lvm.up { color: var(--good); } .lvm.down { color: var(--hot); } /* Cung viec do trong the chi tiet lich su, nhung nam trong mot dong chu */ .ikv em { font-style: normal; font-weight: 700; font-size: 11.5px; } .ikv em.up { color: var(--good); } .ikv em.down { color: var(--hot); } .legend { margin-top: 14px; color: var(--fg-dim); font-size: 12px; } .legend summary { cursor: pointer; padding: 8px 0; } .legend dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; } .legend dt { color: var(--accent); font-weight: 700; } .legend dd { margin: 0; } /* ---------- the ---------- */ .card { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; margin-bottom: 12px; } .card-title { font-weight: 700; font-size: 13px; margin-bottom: 12px; letter-spacing: .03em; } .card-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; } .card-head .card-title { flex: 1; margin: 0; min-width: 0; } /* O chon nho nam trong dau the - khong dung .toolbar select vi cai do rong het hang va cao 40px, de canh tieu de thi nang ne qua. */ .mini-sel { background: var(--bg-3); border: 1px solid var(--line); color: var(--fg); border-radius: 9px; padding: 6px 8px; font-size: 12px; font-weight: 600; max-width: 46%; } .mini-sel:focus { outline: none; border-color: var(--accent); } .field { margin-bottom: 10px; } .field label { display: block; font-size: 11px; color: var(--fg-dim); margin-bottom: 4px; letter-spacing: .05em; text-transform: uppercase; } .field input { width: 100%; background: var(--bg); border: 1px solid var(--line); color: var(--fg); border-radius: 9px; padding: 10px 11px; font-size: 16px; /* 16px: iOS khong tu zoom */ } .field select { width: 100%; background: var(--bg); border: 1px solid var(--line); color: var(--fg); border-radius: 9px; padding: 10px 11px; font-size: 16px; /* 16px: iOS khong tu zoom */ } /* O dan cau tra loi cua ChatGPT: cung khuon voi cac o nhap khac, chi khac la cao hon va chu monospace - JSON dan vao ma xuong dong theo font chu thuong thi khong nhin ra dau la khoi, dau la loi dan dat. */ .field textarea { width: 100%; background: var(--bg); border: 1px solid var(--line); color: var(--fg); border-radius: 9px; padding: 10px 11px; font-size: 16px; /* 16px: iOS khong tu zoom */ font-family: ui-monospace, SFMono-Regular, Menlo, monospace; line-height: 1.45; resize: vertical; min-height: 90px; } /* Nut chon file cua trinh duyet khong nhuom mau theo giao dien duoc, nen o boc ngoai phai tu lam phan vien/nen - khong thi no la mang trang giua modal toi. */ .field input[type=file] { padding: 9px 10px; font-size: 13px; color: var(--fg-dim); } .field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--accent); } /* Model chua co khoa API van nam trong menu de nguoi dung biet no ton tai. */ .field select option:disabled { color: var(--fg-dim); } /* O chi doc: phai NHIN ra la khong go duoc, khong phai bam vao roi moi biet. */ .field input[readonly] { background: var(--bg-3); color: var(--fg-dim); border-style: dashed; cursor: default; } .field input[readonly]:focus { border-color: var(--line); } /* Cau giai thich ngay duoi mot o nhap - nho hon nhan cua o, khong doc nham thanh mot muc rieng. */ .fhint { color: var(--fg-dim); font-size: 11.5px; margin: 5px 0 0; } /* Model dang chon thieu khoa API - cau giai thich phai doi mau, khong thi no lan giua cac dong huong dan binh thuong. */ .fhint.warn { color: var(--warm); } .grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .row-btns { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; } button.primary, button.ghost, button.danger { border-radius: 9px; padding: 10px 15px; font-size: 13.5px; font-weight: 600; cursor: pointer; border: 1px solid transparent; } button.primary { background: var(--accent); color: var(--on-accent); } button.ghost { background: transparent; border-color: var(--line); color: var(--fg); } button.danger { background: transparent; border-color: var(--danger-line); color: var(--hot); } button:disabled { opacity: .5; cursor: default; } .msg { font-size: 12.5px; margin-top: 9px; min-height: 17px; } .msg.ok { color: var(--good); } .msg.err { color: var(--hot); } /* ---------- the theo doi ---------- */ .wcard { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 13px; margin-bottom: 10px; cursor: pointer; } .whead { display: flex; align-items: center; gap: 9px; } /* Ten coin dai (1000SATS, FARTCOIN...) cat bot chu khong duoc day lai/lo ra khoi the */ .wsym { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Hang trang thai: tu xuong dong giua CAC the, khong bao gio vo chu trong mot the */ .wmeta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; } .wmeta:empty { display: none; } .wcard:active { background: var(--bg-3); } .wcard:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .wcard.fired { border-color: var(--warm); } .wcard.off { opacity: .55; } /* lai/lo day sat mep phai, mui ten sau cung: moi the cat thang hang nhau */ .wpnl { margin-left: auto; font-variant-numeric: tabular-nums; font-size: 14px; font-weight: 600; } .wpnl.dim { color: var(--fg-dim); font-weight: 400; } .wgo { color: var(--fg-dim); font-size: 18px; line-height: 1; flex: none; } .wtop { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; } .wsym { font-weight: 700; font-size: 16px; } .wprice { font-variant-numeric: tabular-nums; font-size: 15px; } .wchg { font-size: 12px; font-variant-numeric: tabular-nums; } .wtags { margin-left: auto; display: flex; gap: 5px; flex-wrap: wrap; justify-content: flex-end; } .tag { font-size: 10px; font-weight: 700; padding: 3px 9px; border-radius: 20px; background: var(--bg-3); color: var(--fg-dim); letter-spacing: .04em; /* flex:none + nowrap la hai dong giu cho the khong bi bop vo chu ben trong */ flex: none; white-space: nowrap; line-height: 1.45; } .tag.hit { background: var(--warm-bg); color: var(--warm); } .tag.live { background: var(--good-bg); color: var(--good); } /* Dem nguoc den luc keo tu dong dong. Binh thuong thi cham - day khong phai canh bao; chi khi con duoi 15 phut moi doi mau de dap vao mat. */ .tag.ttl { background: transparent; border: 1px solid var(--line); font-variant-numeric: tabular-nums; } .tag.ttl.soon { border-color: var(--warm); color: var(--warm); } .tag.ttl.over { border-color: var(--hot); color: var(--hot); } /* Bon o: Vao / Hien tai / TP / SL. Tren dien thoai tu gap thanh 2x2 - ep bon cot vao 350px thi con so bi cat, con hai hang thi doc duoc het. */ .levels { display: grid; gap: 8px; margin-top: 9px; /* 140px: tren dien thoai thanh 2x2, du cho ca dong phu (+6.13% nua) hien het. De 78px thi lot duoc ca 4 cot nhung dong phu bi cat mat. */ grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); } .lvl.cur .v { color: var(--fg); } .lvl { background: var(--bg); border: 1px solid var(--line); border-radius: 9px; padding: 7px 9px; } /* Ba o phai bang chieu cao nhau. Chi can mot dong phu xuong hang la ca hang cao len, hai o kia thua mot khoang trong o duoi - nhin lech ngay. Cat bot chu an toan hon: day la thong tin phu, ban day du nam trong modal chi tiet. */ .lvl .k, .lvl .d { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .lvl .k { font-size: 10px; color: var(--fg-dim); letter-spacing: .05em; } .lvl .v { font-variant-numeric: tabular-nums; font-size: 13.5px; font-weight: 600; margin-top: 2px; } .lvl.tp .v { color: var(--good); } .lvl.sl .v { color: var(--hot); } .lvl.entry .v { color: var(--accent); } .lvl.done { border-color: var(--warm); background: var(--warm-bg-soft); } .lvl.none .v { color: var(--fg-dim); font-weight: 400; } .lvl .d { font-size: 10.5px; color: var(--fg-dim); margin-top: 2px; font-variant-numeric: tabular-nums; } .barwrap { display: flex; align-items: center; gap: 9px; margin-top: 10px; } .barwrap .bar { flex: 1; margin: 0; } .barlbl { font-size: 10.5px; color: var(--fg-dim); white-space: nowrap; font-variant-numeric: tabular-nums; } .bar { height: 3px; background: var(--bg-3); border-radius: 3px; margin-top: 9px; overflow: hidden; } .bar > i { display: block; height: 100%; background: linear-gradient(90deg, var(--hot), var(--warm), var(--good)); } .wnote { color: var(--fg-dim); font-size: 12px; margin-top: 9px; } .wactions { display: flex; gap: 7px; margin-top: 11px; flex-wrap: wrap; } .wactions button { padding: 7px 12px; font-size: 12px; } /* ---------- cai dat ---------- */ .status { font-size: 13px; padding: 10px 12px; border-radius: 9px; background: var(--bg-3); color: var(--fg-dim); } .status.ok { color: var(--good); } .status.err { color: var(--hot); } .status.warn { color: var(--warm); } .switch { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--line); font-size: 13px; } .switch input { width: 19px; height: 19px; accent-color: var(--accent); flex: none; } .switch em { color: var(--fg-dim); font-style: normal; font-size: 11.5px; } .kv { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; font-size: 12.5px; } .kv b { color: var(--fg-dim); font-weight: 400; } .kv span { text-align: right; font-variant-numeric: tabular-nums; } @media (min-width: 700px) { th, td { padding: 9px 12px; font-size: 13px; } /* Bon o (Vao / Hien tai / TP / SL) - khong keo dai het chieu ngang the tren man hinh rong, doc lien mot hang dai hon la met mat. */ .levels { grid-template-columns: repeat(4, minmax(0, 170px)); } } /* ---------- phan doan bang AI ---------- */ .grid2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; align-items: end; } .sub.warn { color: var(--warm); } .sub.dim { opacity: .8; } .status.wait { color: var(--accent); } .tag.short { background: var(--hot-bg); color: var(--hot); } .tag.warn { background: var(--warm-bg); color: var(--warm); } .ai-summary .msg { min-height: 0; } /* Nut chinh keo rong ca dong: de bam bang ngon cai, va khong bi hut lai mot cuc nho lech ben trai giua the trong. */ button.wide { flex: 1 1 auto; min-width: 46%; } /* Ghi chu cuoi the: co duong ke va khoang tho rieng, khong dinh sat nut ben tren */ .note-foot { margin-top: 16px; padding-top: 13px; border-top: 1px solid var(--line); line-height: 1.5; } #ai-status:not([hidden]) { margin-top: 12px; } #ai-hint { margin-bottom: 16px; } .icard { background: var(--bg-2); border: 1px solid var(--line); border-left: 3px solid var(--good); border-radius: var(--radius); padding: 13px; margin-bottom: 10px; } .icard.short { border-left-color: var(--hot); } .itop { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; } .isym { font-weight: 700; font-size: 16px; } .iside { font-size: 10.5px; font-weight: 700; letter-spacing: .05em; padding: 3px 9px; border-radius: 20px; background: var(--good-bg); color: var(--good); flex: none; white-space: nowrap; line-height: 1.45; } .iside.short { background: var(--hot-bg); color: var(--hot); } .igap { margin-left: auto; font-size: 11.5px; color: var(--fg-dim); font-variant-numeric: tabular-nums; } .ilevels { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 11px; } .ilvl { background: var(--bg); border: 1px solid var(--line); border-radius: 9px; padding: 7px 9px; } .ilvl .k { font-size: 10px; color: var(--fg-dim); letter-spacing: .05em; } .ilvl .v { font-variant-numeric: tabular-nums; font-size: 13.5px; font-weight: 600; margin-top: 2px; } .ilvl.tp .v { color: var(--good); } .ilvl.sl .v { color: var(--hot); } .ilvl.entry .v { color: var(--accent); } .ikv { display: grid; grid-template-columns: auto 1fr; gap: 5px 10px; margin-top: 11px; font-size: 12px; } .ikv b { color: var(--fg-dim); font-weight: 400; } .ikv span { text-align: right; font-variant-numeric: tabular-nums; } .cbar { height: 3px; background: var(--bg-3); border-radius: 3px; margin-top: 10px; overflow: hidden; } .cbar > i { display: block; height: 100%; background: var(--accent); } .itags { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 10px; } .iwhy { font-size: 12.5px; color: var(--fg); margin: 9px 0 0; } .iwhy b { color: var(--fg-dim); font-weight: 600; } .iwhy.dim { color: var(--fg-dim); font-size: 12px; } /* ---------- modal ---------- Hop LUON nam giua man hinh va cao khong qua man hinh: phan dai thi CUON TRONG HOP. Truoc day hop dinh day man hinh va cao theo noi dung, nen ket qua AI dai mot cai la ca hop tran ra ngoai - nut dong nam ngoai vung nhin, khong bam duoc gi. Dau hop (ten + nut dong) DINH lai khi cuon, vi day la duong ra duy nhat cua man hinh nay. */ .modal { position: fixed; inset: 0; z-index: 90; display: flex; align-items: center; justify-content: center; background: var(--scrim); backdrop-filter: blur(3px); padding: 16px; /* Xuong den DUNG day man hinh - xem ghi chu "--botnav-gap" o duoi. `inset: 0` chi toi day KHUNG BO CUC, ma tren PWA iPhone khung do dung cao hon day man hinh that: thanh menu duoc keo xuong bu phan thieu, con lop mo nay thi khong, nen mo modal ra la lo mot dai sang khong bi lam mo o chan man hinh. Cong them dung `gap` vao padding de hop van nam giua vung NHIN THAY, khong bi tut xuong nua phan vua noi them. */ bottom: calc(-1 * var(--botnav-gap, 0px)); padding-bottom: calc(16px + var(--botnav-gap, 0px)); } .modal-box { background: var(--bg-2); border: 1px solid var(--line); border-radius: 16px; padding: 16px; width: 100%; max-width: 460px; margin: 0; /* dvh chu khong phai vh: tren dien thoai vh tinh ca thanh dia chi cua trinh duyet, nen hop bi cao hon phan thay duoc that. vh de o truoc lam ban du phong cho trinh duyet cu. */ max-height: 86vh; max-height: 86dvh; overflow-y: auto; overscroll-behavior: contain; animation: rise .18s ease-out; } @keyframes rise { from { transform: translateY(14px); opacity: 0; } } .modal-head { display: flex; align-items: flex-start; gap: 10px; /* Keo ra sat vien hop roi dinh lai: cuon toi dau cung con thay nut dong. Am 16px la de bu padding cua hop. */ position: sticky; top: 0; z-index: 3; margin: -16px -16px 12px; padding: 16px 16px 10px; background: var(--bg-2); border-radius: 15px 15px 0 0; } .modal-head .card-title { flex: 1; margin-bottom: 0; font-size: 15px; } .modal-head .icon-btn { width: 30px; height: 30px; font-size: 19px; line-height: 1; } .modal-box > .sub:first-of-type { margin-bottom: 16px; } @media (min-width: 700px) { .ilevels { grid-template-columns: repeat(3, minmax(0, 180px)); } } @media (min-width: 520px) { /* man hinh rong hon thi xep hai cap moi dong, khong keo dai the ra */ .ikv { grid-template-columns: auto 1fr auto 1fr; } } /* ---------- man hinh dang nhap ---------- */ .gate { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; background: var(--bg); padding: 24px; /* cung ly do voi .modal - man hinh dang nhap phai phu kin ca chan man hinh */ bottom: calc(-1 * var(--botnav-gap, 0px)); padding-bottom: calc(24px + var(--botnav-gap, 0px)); } .gate-box { text-align: center; max-width: 340px; width: 100%; } .gate-logo { width: 64px; height: 64px; border-radius: 16px; margin-bottom: 18px; } .gate-box h1 { font-size: 19px; margin: 0 0 6px; letter-spacing: .01em; } .gate-sub { color: var(--fg-dim); font-size: 13px; margin: 0 0 22px; } /* Nut Google giu nguyen mau trang o CA HAI theme - do la quy dinh nhan dien cua Google cho nut dang nhap, khong phai mau cua ung dung. */ .gbtn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 12px 18px; border-radius: 10px; background: #fff; color: #1f1f1f; font-size: 14.5px; font-weight: 600; text-decoration: none; border: 1px solid #dadce0; } .gbtn:active { background: #f1f3f4; } .gate-err { margin: 16px 0 0; padding: 10px 12px; border-radius: 9px; font-size: 12.5px; background: var(--hot-bg-soft); color: var(--hot); text-align: left; } .gate-note { margin: 14px 0 0; color: var(--fg-dim); font-size: 12px; } /* ---------- the tai khoan ---------- */ .account { display: flex; align-items: center; gap: 12px; } .acc-pic { width: 40px; height: 40px; border-radius: 50%; flex: none; } .acc-info { flex: 1; min-width: 0; } .acc-name { font-weight: 600; font-size: 14px; } .acc-email { color: var(--fg-dim); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* nut tai khoan tren thanh tieu de */ .who { display: flex; align-items: center; gap: 6px; flex: none; background: var(--bg-3); border: 1px solid var(--line); border-radius: 20px; padding: 3px 9px 3px 3px; cursor: pointer; max-width: 130px; } .who img { width: 22px; height: 22px; border-radius: 50%; flex: none; } .who span { font-size: 11.5px; color: var(--fg-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* .on = menu dang mo. .here = dang o man hinh HO SO - anh dai dien la loi vao duy nhat cua man hinh do nen phai tu sang, khong thi khong con gi bao minh dang dung o dau. Dat SAU .who de thang duoc mau vien mac dinh. */ .who.on, .who.here { border-color: var(--accent); } /* ---------- chon ngon ngu ---------- */ .langs { display: flex; gap: 8px; } .langs button { flex: 1; padding: 9px 12px; border-radius: 9px; font-size: 13.5px; font-weight: 600; background: transparent; border: 1px solid var(--line); color: var(--fg-dim); cursor: pointer; } .langs button.on { background: var(--accent); border-color: var(--accent); color: var(--on-accent); } .gate-langs { margin-top: 22px; justify-content: center; } .gate-langs button { flex: 0 0 auto; padding: 7px 16px; font-size: 12.5px; } /* ---------- bang scalp ---------- */ th.nosort { cursor: default; } /* Nut nam trong o cua bang - phai nho hon nut thuong de khong lam cao ca dong */ button.mini { background: var(--bg-3); border: 1px solid var(--line); color: var(--accent); border-radius: 7px; padding: 4px 10px; font-size: 11px; font-weight: 700; cursor: pointer; letter-spacing: .04em; } button.mini:active { background: var(--line); } /* Trong cot COIN: tach khoi ten coin, va khong duoc lam cao them dong */ td .sym + button.mini { margin-left: 9px; padding: 2px 8px; vertical-align: 1px; } #scalp-meta { margin: 0 0 10px; } /* ---------- chon huong lenh ---------- */ .seg { display: flex; gap: 8px; } .seg button { flex: 1; padding: 10px 12px; border-radius: 9px; font-size: 13.5px; font-weight: 700; background: transparent; border: 1px solid var(--line); color: var(--fg-dim); cursor: pointer; letter-spacing: .05em; } .seg button[data-side="long"].on { background: var(--good-bg); border-color: var(--good); color: var(--good); } .seg button[data-side="short"].on { background: var(--hot-bg); border-color: var(--hot); color: var(--hot); } /* ---------- the theo doi: huong lenh ---------- */ .wcard { border-left: 3px solid var(--good); } .wcard.short { border-left-color: var(--hot); } .wchg.dim { color: var(--fg-dim); } .wsub { color: var(--fg-dim); font-size: 11.5px; margin-top: 5px; } /* ---------- lich su ---------- */ .hcard { background: var(--bg-2); border: 1px solid var(--line); border-left: 3px solid var(--line); border-radius: var(--radius); padding: 13px; margin-bottom: 10px; } .hcard.out-tp { border-left-color: var(--good); } .hcard.out-sl { border-left-color: var(--hot); } .hcard.out-cancel { border-left-color: var(--fg-dim); } /* Het gio la mot ket qua rieng, khong phai thang cung khong phai thua - mau trung tinh am de no khong bi doc nham thanh mot trong hai. */ .hcard.out-timeout { border-left-color: var(--warm); } .hcard.out-trail { border-left-color: var(--good); } .hcard.out-expired { border-left-color: var(--fg-dim); } /* Keo da dong thi `enabled` = 0, nhung the cua no van phai doc duoc binh thuong - no vua xay ra, khong phai mot dong bi tam tat cho quen */ .wcard.fired.off { opacity: 1; } .hpnl { font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; } .tag.out-tp { background: var(--good-bg); color: var(--good); } .tag.out-sl { background: var(--hot-bg); color: var(--hot); } .tag.out-timeout { background: var(--warm-bg); color: var(--warm); } .tag.out-trail { background: var(--good-bg); color: var(--good); } .hcard .ikv { grid-template-columns: auto 1fr; } .hcard .wactions { margin-top: 12px; } #hist-stats { margin-bottom: 4px; } .aicall { border: 1px solid var(--line); border-radius: 9px; padding: 8px 11px; margin-bottom: 8px; background: var(--bg); } .aicall summary { cursor: pointer; font-size: 12.5px; color: var(--fg-dim); } .aicall[open] summary { color: var(--fg); margin-bottom: 6px; } /* ---------- modal hoi AI ve mot coin ---------- */ #coin-facts { margin-bottom: 14px; } #coin-status:not([hidden]) { margin: 12px 0; } #coin-result .icard { margin-top: 12px; } #coin-result .icard:last-child { margin-bottom: 0; } /* ---------- chon nhieu coin de hoi AI mot lan ---------- */ /* O tich nam trong cot COIN (cot dinh ben trai) nen phai gon; vung bam thi noi rong ra bang padding cua the label, khong thi ngon tay khong trung. */ .pick { display: inline-flex; align-items: center; padding: 2px 6px 2px 0; vertical-align: middle; } .pick input { width: 17px; height: 17px; margin: 0; accent-color: var(--accent); cursor: pointer; } tbody tr.watched .pick input { outline: none; } /* Thanh "da chon N coin". Nam tren thanh menu duoi day, khong che no. */ .selbar { position: fixed; left: 10px; right: 10px; z-index: 46; bottom: calc(var(--botnav-h, 0px) + 12px); display: flex; align-items: center; gap: 8px; background: var(--bg-3); border: 1px solid var(--line); border-radius: 12px; padding: 8px 10px; box-shadow: var(--shadow-md); } .selbar .sub { flex: 1; margin: 0; color: var(--fg); } .selbar button { white-space: nowrap; } /* Vien thuoc "dang hoi AI": lan hoi chay o server nen dong modal hay doi tab van con dau vet, bam vao la quay lai cho no. */ .jobpill { position: fixed; left: 50%; transform: translateX(-50%); z-index: 47; bottom: calc(var(--botnav-h, 0px) + 12px); display: inline-flex; align-items: center; gap: 8px; background: var(--bg-3); color: var(--fg); font-size: 12.5px; border: 1px solid var(--accent); border-radius: 999px; padding: 8px 14px; box-shadow: var(--shadow-md); } .spin1 { width: 12px; height: 12px; border-radius: 50%; flex: none; border: 2px solid var(--line); border-top-color: var(--accent); animation: spin1 .8s linear infinite; } @keyframes spin1 { to { transform: rotate(360deg); } } /* Mot coin trong lo hoi AI: khi hoi nhieu coin, moi coin la mot the rieng co ten + trang thai o dau, ben trong la ket qua y het khi hoi rieng coin do. */ .jitem.card { margin-top: 12px; padding: 12px; } .jhead { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; } .jhead .isym { font-size: 14px; font-weight: 700; letter-spacing: .02em; } .jitem .icard:first-of-type { margin-top: 10px; } /* ---------- so du demo ---------- */ /* Nam ngay duoi o nhap von goc. Hai con so de canh nhau: cai tren sua duoc, cai duoi tu chay theo lai/lo - khong tron vao mot o. */ #demo-equity { margin-top: 10px; } .demo-now { display: flex; align-items: baseline; gap: 8px; padding: 8px 10px; border-radius: 10px; background: var(--bg-3); border: 1px solid var(--line); } .demo-now-l { color: var(--fg-dim); font-size: 12px; flex: 1; } .demo-now-v { font-size: 17px; font-weight: 800; font-variant-numeric: tabular-nums; } .demo-now-v.good { color: var(--good); } .demo-now-v.hot { color: var(--hot); } .demo-now-v.dim { color: var(--fg); } #demo-equity .sub { margin: 6px 0 0; font-size: 12px; color: var(--fg-dim); } #demo-equity .sub b.good { color: var(--good); } #demo-equity .sub b.hot { color: var(--hot); } #demo-equity .sub b.dim { color: var(--fg-dim); }