/* ---------- Theme: Dark (mặc định) & Light (kiểu coinbase.com) ---------- Dark dùng làm mặc định (:root). Light override qua [data-theme="light"] trên , do JS (script.js: applyTheme()) gán/xoá — xem file đó để biết cách chuyển đổi + lưu lựa chọn vào localStorage. Màu accent lấy đúng theo yêu cầu: Dark dùng rgb(87,139,250) — trùng token "interactive-blue" của Coinbase Design System; Light dùng rgb(0,82,255) — chính là "Coinbase Blue", màu thương hiệu chủ đạo của họ. */ :root { --bg: #0B0E11; --panel: #14181D; --surface-2: #10141A; --border: #232A31; --text: #E7ECEF; --text-muted: #7C8792; --accent: #578BFA; --accent-dim: #578BFA33; --on-accent: #FFFFFF; --danger: #FF3B5C; --danger-dim: #FF3B5C33; } [data-theme="light"] { --bg: #F7F8F9; /* coinbase "frost" */ --panel: #FFFFFF; /* coinbase "pure white" */ --surface-2: #EEF0F3; /* coinbase "cloud" — nền ô nhập liệu, hơi tối hơn panel 1 chút */ --border: #DEDFE2; /* coinbase "pewter" */ --text: #0A0B0D; /* coinbase "midnight" */ --text-muted: #5B6167; --accent: #0052FF; /* Coinbase Blue */ --accent-dim: #0052FF1F; --on-accent: #FFFFFF; --danger: #F0616D; /* coinbase "negative-red" */ --danger-dim: #F0616D26; } * { box-sizing: border-box; } /* Fix quan trọng: 1 phần tử vừa có thuộc tính [hidden] vừa có class tự đặt display (vd .chart-grid { display:flex }) thì display riêng của class sẽ đè mất display:none mặc định của [hidden], khiến ẩn/hiện bằng .hidden = true/false không có tác dụng. Rule này đảm bảo [hidden] luôn thắng bất kể class nào khác đang đặt display. */ [hidden] { display: none !important; } html, body { margin: 0; padding: 0; background: var(--bg); color: var(--text); font-family: 'Inter', -apple-system, sans-serif; height: 100%; transition: background-color 0.2s, color 0.2s; } h1 { font-family: 'Space Grotesk', sans-serif; font-size: 1.15rem; font-weight: 600; margin: 0; letter-spacing: -0.01em; } .accent { color: var(--accent); } /* ---------- Top bar ---------- */ .topbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: flex-start; justify-content: flex-start; gap: 1rem; padding: 0.7rem 1.1rem; background: var(--panel); border-bottom: 1px solid var(--border); } .brand { display: flex; align-items: center; gap: 0.6rem; text-decoration: none; cursor: pointer; border-radius: 6px; padding: 2px 4px; margin: -2px -4px; flex-shrink: 0; margin-top: 4px; /* căn giữa theo chiều dọc so với 2 dòng menu bên cạnh */ } .brand:hover { background: var(--accent-dim); } .brand:hover h1 { color: var(--text); } .dot-live { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 0 var(--accent-dim); animation: pulseDot 1.8s infinite; } @keyframes pulseDot { 0% { box-shadow: 0 0 0 0 var(--accent-dim); } 70% { box-shadow: 0 0 0 7px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } } /* Menu chia đúng 2 dòng: dòng điều hướng (tab Home/Charts/Heatmap, theme, ngôn ngữ) và dòng chức năng (Cột/Hàng/Layout/Khung giờ/Indicators/Drawing Toolbar/Thêm mã/Reset/Xoá) — mỗi dòng LUÔN giữ đúng 1 hàng ngang (flex-wrap: nowrap), căn trái. Nếu không đủ chỗ hiển thị hết trong 1 dòng thì cuộn ngang (overflow-x: auto) thay vì tự xuống dòng thứ 2/3 gây rối. */ .topbar-menu { display: flex; flex-direction: column; align-items: flex-start; gap: 0.55rem; flex: 1; min-width: 0; } .topbar-menu-row { display: flex; align-items: center; justify-content: flex-start; gap: 0.7rem; flex-wrap: nowrap; width: 100%; } .topbar-menu-row > * { flex-shrink: 0; } /* không co lại/vỡ chữ khi gần hết chỗ — cuộn ngang thay vì bóp méo */ .controls { gap: 0.9rem; } .ctrl { display: flex; align-items: center; gap: 0.4rem; font-size: 0.78rem; color: var(--text-muted); } select, input[type="text"], input[type="number"] { background: var(--surface-2); border: 1px solid var(--border); color: var(--text); border-radius: 6px; padding: 0.35rem 0.5rem; font-family: 'Space Grotesk', monospace; font-size: 0.82rem; outline: none; } select:focus, input[type="text"]:focus, input[type="number"]:focus { border-color: var(--accent); } .symbol-add input { width: 170px; } #gridCols, #gridRows { width: 62px; } /* ---------- Autocomplete ---------- */ .ac-wrap { position: relative; display: inline-block; } .ac-wrap-cell { flex: 1; } .ac-wrap-cell input { width: 100%; } .ac-list { position: absolute; top: calc(100% + 4px); left: 0; min-width: 220px; max-width: 280px; margin: 0; padding: 4px; list-style: none; background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,0.45); z-index: 50; max-height: 260px; overflow-y: auto; } .ac-item { display: flex; align-items: baseline; gap: 0.5rem; padding: 0.4rem 0.55rem; border-radius: 6px; cursor: pointer; font-size: 0.78rem; } .ac-item:hover, .ac-item.is-active { background: var(--accent-dim); } .ac-item .ac-symbol { font-family: 'Space Grotesk', monospace; font-weight: 600; color: var(--text); white-space: nowrap; } .ac-item .ac-symbol mark { background: transparent; color: var(--accent); padding: 0; } .ac-item .ac-name { color: var(--text-muted); font-size: 0.72rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ac-empty { padding: 0.5rem 0.6rem; color: var(--text-muted); font-size: 0.75rem; } button { cursor: pointer; font-family: 'Space Grotesk', sans-serif; font-size: 0.78rem; font-weight: 600; border-radius: 6px; border: 1px solid transparent; padding: 0.4rem 0.7rem; } #addChartBtn { background: var(--accent); color: var(--on-accent); border: none; } #addChartBtn:hover { filter: brightness(1.08); } .btn-ghost { background: transparent; color: var(--text-muted); border: 1px solid var(--border); } .btn-ghost:hover { color: var(--accent); border-color: var(--accent); } .btn-ghost.active { color: var(--accent); border-color: var(--accent); background: var(--accent-dim); } #clearAllBtn:hover { color: var(--danger); border-color: var(--danger); } /* ---------- Resizable chart grid (flexbox-based) ---------- */ .chart-grid { display: flex; flex-direction: column; height: calc(100vh - 58px); padding: 6px; } .grid-row { display: flex; flex-direction: row; flex-basis: 0; flex-grow: 1; flex-shrink: 1; min-height: 0; } .row-resizer, .col-resizer { flex: 0 0 6px; background: var(--border); position: relative; flex-shrink: 0; transition: background 0.15s; touch-action: none; /* để trình duyệt không cuộn trang khi đang kéo bằng ngón tay trên tablet */ } .row-resizer { cursor: row-resize; width: 100%; } .col-resizer { cursor: col-resize; height: 100%; } .row-resizer:hover, .row-resizer:active, .col-resizer:hover, .col-resizer:active { background: var(--accent); } .row-resizer::after, .col-resizer::after { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: var(--text-muted); font-size: 10px; pointer-events: none; } .row-resizer::after { content: "•••"; letter-spacing: 1px; } .col-resizer::after { content: "⋮"; line-height: 4px; } /* Thiết bị cảm ứng (tablet): 6px quá mảnh cho ngón tay. Thay vì đổi kích thước thật của resizer (sẽ làm lệch phép tính flex-grow trong JS, vốn giả định đúng RESIZER_PX=6px), mở rộng vùng BẮT SỰ KIỆN bằng 1 lớp vô hình nằm đè ra ngoài — kích thước hiển thị/layout không đổi, nhưng chạm trúng dễ hơn nhiều. */ @media (pointer: coarse) { .row-resizer::before, .col-resizer::before { content: ""; position: absolute; inset: -6px; } } .chart-cell { background: var(--panel); border: 1px solid var(--border); border-radius: 8px; display: flex; flex-direction: column; overflow: hidden; flex-basis: 0; flex-grow: 1; flex-shrink: 1; min-width: 0; min-height: 0; } .cell-toolbar { display: flex; align-items: center; gap: 0.5rem; padding: 0.3rem 0.5rem; border-bottom: 1px solid var(--border); background: var(--surface-2); flex-shrink: 0; } /* Icon di chuyển (drag-handle) — CHỈ phần tử này khởi động kéo-thả, không phải cả toolbar, để gõ mã / bấm xoá không bị nhầm thành đang kéo. */ .cell-move { flex-shrink: 0; background: transparent; border: none; color: var(--text-muted); padding: 0.2rem 0.3rem; cursor: grab; touch-action: none; /* để không cuộn trang khi giữ-kéo bằng ngón tay trên tablet */ display: flex; align-items: center; } .cell-move:hover { color: var(--accent); } /* Nút phóng to/thu nhỏ 1 chart */ .cell-maximize { flex-shrink: 0; background: transparent; border: none; color: var(--text-muted); padding: 0.2rem 0.3rem; line-height: 1; display: flex; align-items: center; justify-content: center; } .cell-maximize:hover { color: var(--accent); } /* Chart đang phóng to: đè lên toàn màn hình bằng position:fixed — chỉ là CSS/JS của mình, không cần API gì từ TradingView. Widget bên trong tự vẽ lại đúng kích thước mới nhờ autosize:true (ResizeObserver), không cần mount lại. */ .chart-cell.cell-maximized { position: fixed; inset: 0; z-index: 300; margin: 0; border-radius: 0; width: auto; height: auto; } body.has-maximized-chart { overflow: hidden; } /* chặn cuộn nền trong lúc đang phóng to */ /* Ô chart đang được cầm-kéo: CHỈ làm mờ tại chỗ, KHÔNG rời flex flow, KHÔNG đổi kích thước — để các ô khác trong cùng hàng không bị giãn lại (nguyên nhân khiến TradingView tưởng khung chứa đổi kích thước rồi tự vẽ lại, trông giống "load lại dữ liệu"). Việc kéo thực chất chỉ di chuyển 1 "ghost" nhỏ (không phải chart thật) theo con trỏ — xem .cell-drag-ghost. */ .drag-source-dim { opacity: 0.35; } .drag-source-dim .cell-move { cursor: grabbing; } /* "Ghost" nhỏ theo con trỏ trong lúc kéo — chỉ là 1 chip hiển thị mã coin, không phải chart thật, nên không có widget nào bị tạo/huỷ trong lúc kéo. */ .cell-drag-ghost { position: fixed; z-index: 600; transform: translate(-50%, -120%); background: var(--panel); border: 2px solid var(--accent); border-radius: 8px; padding: 0.4rem 0.8rem; font-family: 'Space Grotesk', monospace; font-weight: 700; font-size: 0.8rem; color: var(--text); box-shadow: 0 16px 36px rgba(0,0,0,0.4); pointer-events: none; white-space: nowrap; } /* Viền gợi ý ô sẽ được thả vào — chỉ viền, không đổi kích thước ô đó */ .drag-target-hint { outline: 2px dashed var(--accent); outline-offset: -2px; } .pulse { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex-shrink: 0; animation: pulseDot 2.4s infinite; } .cell-symbol { flex: 1; background: transparent; border: none; font-size: 0.76rem; color: var(--text); padding: 0.15rem 0.3rem; } .cell-symbol:focus { outline: 1px solid var(--accent); border-radius: 4px; } .cell-remove { background: transparent; border: none; color: var(--text-muted); font-size: 0.75rem; padding: 0.15rem 0.4rem; } .cell-remove:hover { color: var(--danger); } .cell-widget { flex: 1; min-height: 0; position: relative; } .cell-widget iframe { width: 100%; height: 100%; border: none; } /* Empty state */ .empty-state { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--text-muted); font-family: 'Space Grotesk', sans-serif; gap: 0.4rem; text-align: center; padding: 1rem; } .empty-state span { font-size: 0.8rem; } /* Hàng/ô trống khi chưa đủ chart lấp vào Cột×Hàng hoặc preset Layout đang chọn — bấm để mở Modal Search thay vì chỉ hiện chữ. */ .empty-row-placeholder { flex: 1; display: flex; align-items: center; justify-content: center; border: 1px dashed var(--border); border-radius: 8px; background: transparent; cursor: pointer; color: var(--text-muted); padding: 0; } .empty-row-placeholder:hover { border-color: var(--accent); border-style: solid; background: var(--accent-dim); } /* Dấu "+" dạng hình tròn, co giãn theo kích thước cửa sổ (tối đa 90px), màu mờ nhạt để không thu hút quá nhiều chú ý — rõ hơn khi hover cả ô. */ .empty-pane-plus { width: clamp(40px, 9vw, 90px); height: clamp(40px, 9vw, 90px); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: 'Space Grotesk', sans-serif; font-size: clamp(1.4rem, 3.5vw, 2.4rem); font-weight: 300; line-height: 1; background: var(--surface-2); border: 1px solid var(--border); color: var(--text-muted); opacity: 0.55; transition: opacity 0.15s ease, color 0.15s ease; } .empty-row-placeholder:hover .empty-pane-plus { opacity: 1; color: var(--accent); } /* ---------- Layout preset (CSS Grid thật, hỗ trợ ô trải dài nhiều hàng/cột) ---------- */ .chart-grid.layout-mode { display: grid; } .chart-grid.layout-mode .chart-cell, .chart-grid.layout-mode .empty-row-placeholder { min-width: 0; min-height: 0; } .layout-picker-wrap { position: relative; } .layout-btn { font-size: 1rem; line-height: 1; padding: 0.3rem 0.6rem; width: 32px; height: 26px; display: flex; align-items: center; justify-content: center; } .layout-btn.has-selection { padding: 5px; border-color: var(--accent); } .layout-btn.has-selection .layout-icon-grid { width: 100%; height: 100%; } .layout-btn.has-selection .layout-icon-cell { background: var(--accent); opacity: 0.85; } .layout-panel { position: absolute; top: calc(100% + 6px); left: 0; z-index: 60; min-width: 260px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; box-shadow: 0 12px 30px rgba(0,0,0,0.35); display: flex; flex-direction: column; gap: 8px; max-height: 70vh; overflow-y: auto; overflow-x: hidden; } .layout-panel-row { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; gap: 12px; } .layout-panel-number { width: 16px; flex: 0 0 16px; text-align: center; font-family: 'Space Grotesk', monospace; font-size: 0.78rem; color: var(--text-muted); } .layout-panel-icons { display: flex; flex-direction: row; flex-wrap: nowrap; gap: 6px; } .layout-icon-btn { width: 40px; height: 32px; flex: 0 0 40px; padding: 4px; background: transparent; border: 1px solid var(--border); border-radius: 6px; } .layout-icon-btn:hover { border-color: var(--accent); background: var(--accent-dim); } .layout-icon-btn.active { border-color: var(--accent); background: var(--accent-dim); } .layout-icon-grid { width: 100%; height: 100%; display: grid; gap: 2px; } .layout-icon-cell { background: var(--text-muted); opacity: 0.55; border-radius: 1px; } .layout-icon-btn:hover .layout-icon-cell, .layout-icon-btn.active .layout-icon-cell { background: var(--accent); opacity: 0.9; } /* ---------- Modal Search ---------- */ .search-modal-overlay { position: fixed; inset: 0; z-index: 200; background: rgba(0,0,0,0.55); display: flex; align-items: flex-start; justify-content: center; padding: 10vh 1rem 1rem; } .search-modal { width: 100%; max-width: 560px; max-height: 74vh; background: var(--panel); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 24px 60px rgba(0,0,0,0.5); display: flex; flex-direction: column; overflow: hidden; } .search-modal-inputrow { display: flex; align-items: center; gap: 0.5rem; padding: 0.7rem 0.9rem; border-bottom: 1px solid var(--border); flex-shrink: 0; } .search-modal-icon { font-size: 0.95rem; opacity: 0.7; } .search-modal-inputrow input { flex: 1; background: transparent; border: none; color: var(--text); font-family: 'Space Grotesk', monospace; font-size: 0.95rem; outline: none; padding: 0.2rem 0; } #searchModalClose { font-size: 0.75rem; padding: 0.25rem 0.5rem; } .search-modal-tabs { display: flex; gap: 4px; padding: 0.5rem 0.9rem; border-bottom: 1px solid var(--border); flex-shrink: 0; overflow-x: auto; } .search-modal-tabs button { background: transparent; color: var(--text-muted); border: 1px solid var(--border); border-radius: 999px; padding: 0.3rem 0.7rem; font-size: 0.75rem; white-space: nowrap; } .search-modal-tabs button.active { color: var(--on-accent); background: var(--accent); border-color: var(--accent); } .search-modal-body { flex: 1; overflow-y: auto; padding: 0.4rem 0; } .search-section-title { display: flex; align-items: center; justify-content: space-between; padding: 0.5rem 0.9rem 0.3rem; font-family: 'Space Grotesk', sans-serif; font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); } .search-section-title button { background: none; border: none; color: var(--text-muted); font-size: 0.7rem; text-transform: none; letter-spacing: normal; padding: 0; text-decoration: underline; } .search-section-title button:hover { color: var(--accent); } .search-result-item { display: flex; align-items: center; gap: 0.6rem; width: 100%; padding: 0.5rem 0.9rem; background: transparent; border: none; text-align: left; color: var(--text); font-size: 0.85rem; } .search-result-item:hover { background: var(--accent-dim); } .search-result-item img { width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0; background: var(--surface-2); } .search-result-item .sri-rank { width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0; background: var(--surface-2); display: flex; align-items: center; justify-content: center; font-size: 0.65rem; color: var(--text-muted); } .search-result-item .sri-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .search-result-item .sri-symbol { font-family: 'Space Grotesk', monospace; color: var(--text-muted); font-size: 0.75rem; flex-shrink: 0; } .search-result-item .sri-external { color: var(--text-muted); font-size: 0.7rem; flex-shrink: 0; } .search-modal-empty, .search-modal-loading { padding: 2rem 1rem; text-align: center; color: var(--text-muted); font-size: 0.85rem; } /* Responsive: narrow phones -> stack rows, hide column resizers, force column layout */ @media (max-width: 640px) { .grid-row { flex-direction: column; } .col-resizer { display: none; } .symbol-add input { width: 120px; } } /* ---------- Drag overlay (fixes resize glitching over TradingView iframes) ---------- */ /* Trong lúc kéo resize, iframe TradingView sẽ "nuốt" sự kiện chuột nếu con trỏ đi vào vùng của nó, khiến việc kéo bị giật/đứng. Overlay này che toàn màn hình trong lúc kéo để mọi sự kiện chuột đều được lớp này nhận, không rơi vào iframe. */ .drag-overlay { position: fixed; inset: 0; z-index: 9999; background: transparent; } body.no-select { user-select: none; -webkit-user-select: none; } /* Respect reduced motion */ @media (prefers-reduced-motion: reduce) { .dot-live, .pulse { animation: none; } } /* ---------- Primary tabs (Charts / Heatmap) ---------- */ .primary-tabs { display: flex; gap: 4px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px; padding: 3px; } .primary-tabs button { background: transparent; color: var(--text-muted); border: none; border-radius: 6px; padding: 0.4rem 0.9rem; } .primary-tabs button.active { background: var(--accent); color: var(--on-accent); } /* ---------- Công tắc Light/Dark ---------- */ .theme-toggle { position: relative; width: 50px; height: 27px; padding: 0; border: 1px solid var(--border); border-radius: 14px; background: var(--surface-2); flex-shrink: 0; } .theme-toggle-thumb { position: absolute; top: 2px; left: 2px; width: 21px; height: 21px; border-radius: 50%; background: var(--panel); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; font-size: 12px; line-height: 1; transition: left 0.18s ease, background 0.18s ease; } [data-theme="light"] .theme-toggle-thumb { left: 25px; } /* ---------- Heatmap page ---------- */ .heatmap-page { display: flex; flex-direction: column; height: calc(100vh - 58px); } .sub-tabs { display: flex; align-items: center; gap: 0.5rem; padding: 0.6rem 1.1rem; border-bottom: 1px solid var(--border); background: var(--panel); flex-shrink: 0; flex-wrap: wrap; } .sub-tabs .sub { background: transparent; color: var(--text-muted); border: 1px solid var(--border); border-radius: 6px; padding: 0.4rem 0.8rem; } .sub-tabs .sub.active { color: var(--accent); border-color: var(--accent); background: var(--accent-dim); } .legend { margin-left: auto; display: flex; align-items: center; gap: 6px; font-size: 0.72rem; color: var(--text-muted); } .legend .bar { width: 90px; height: 8px; border-radius: 4px; background: linear-gradient(90deg, var(--danger), var(--border), var(--accent)); } .heatmap-panel { flex: 1; position: relative; min-height: 0; overflow: hidden; } .heatmap-status { position: absolute; top: 8px; left: 12px; z-index: 5; font-size: 0.72rem; color: var(--text-muted); background: rgba(20,24,29,0.85); padding: 3px 8px; border-radius: 6px; pointer-events: none; } .heatmap-status.error { color: var(--danger); } .bubble-wrap { position: relative; width: 100%; height: 100%; } .bubble { position: absolute; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; cursor: pointer; } .bubble .sym { font-family: 'Space Grotesk', monospace; font-weight: 700; line-height: 1.1; } .bubble .chg { opacity: 0.9; line-height: 1.1; } .bubble:hover { filter: brightness(1.15); } .heatmap-panel .tradingview-widget-container, .heatmap-panel .tradingview-widget-container__widget { height: 100%; } /* ---------- Market Overview (thay lưới Chart trên màn hình mobile) ---------- */ .mobile-market-overview { height: calc(100vh - 58px); display: flex; flex-direction: column; position: relative; /* làm mốc cho nút + nổi (position:absolute) ở góc dưới bên phải */ } .mobile-tabs { display: flex; gap: 6px; padding: 0.6rem; border-bottom: 1px solid var(--border); background: var(--panel); overflow-x: auto; flex-shrink: 0; } .mobile-tabs button { background: transparent; color: var(--text-muted); border: 1px solid var(--border); border-radius: 999px; padding: 0.35rem 0.8rem; font-size: 0.78rem; white-space: nowrap; flex-shrink: 0; } .mobile-tabs button.active { color: var(--on-accent); background: var(--accent); border-color: var(--accent); } .mobile-chart-wrap { height: 260px; flex-shrink: 0; border-bottom: 1px solid var(--border); background: var(--panel); } .mobile-chart-wrap .tradingview-widget-container, .mobile-chart-wrap .tradingview-widget-container__widget { height: 100%; } .mobile-list-header { display: flex; align-items: center; justify-content: space-between; padding: 0.5rem 0.9rem; border-bottom: 1px solid var(--border); background: var(--panel); flex-shrink: 0; } .mobile-list-header span { font-family: 'Space Grotesk', sans-serif; font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); } /* Hàng tiêu đề cột: # | icon | tên | Price | 1h % | 24h % | 7d % — PHẢI cùng grid-template với mỗi hàng dữ liệu bên dưới (.mobile-symbol-row) để các cột luôn thẳng hàng nhau. Lỗi trước đây: template chỉ khai 5 cột trong khi mỗi hàng dữ liệu có 6 phần tử (thiếu cột cho icon/badge) khiến trình duyệt tự đẩy phần tử dư ra ngoài, làm lệch hàng — nay khai đủ. */ .mobile-list-columns { display: grid; grid-template-columns: 20px 26px 1fr 62px 54px 54px 54px; align-items: center; gap: 6px; padding: 0.4rem 0.9rem; border-bottom: 1px solid var(--border); background: var(--surface-2); flex-shrink: 0; } .mlc-rank { font-size: 0.66rem; color: var(--text-muted); text-align: left; } .mlc-sort { background: transparent; border: none; color: var(--text-muted); font-family: 'Space Grotesk', sans-serif; font-size: 0.66rem; font-weight: 600; text-align: right; padding: 0; display: flex; align-items: center; justify-content: flex-end; gap: 2px; } .mlc-sort:hover { color: var(--text); } .mlc-sort.active { color: var(--accent); } .mlc-sort::after { content: "⇅"; font-size: 0.6rem; opacity: 0.6; } .mlc-sort.sort-asc::after { content: "↑"; opacity: 1; } .mlc-sort.sort-desc::after { content: "↓"; opacity: 1; } .mobile-symbol-list { flex: 1; overflow-y: auto; padding-bottom: 72px; /* chừa chỗ cho nút + nổi ở góc dưới, không che dòng cuối */ } .mobile-symbol-row { display: grid; grid-template-columns: 20px 26px 1fr 62px 54px 54px 54px; align-items: center; gap: 6px; width: 100%; text-align: left; } .mobile-symbol-row.active { background: var(--accent-dim); } .mobile-symbol-row.active .sri-symbol { color: var(--accent); } .mobile-symbol-row .sri-name { min-width: 0; text-align: left; } .mobile-row-rank { font-size: 0.68rem; color: var(--text-muted); text-align: left; } /* Icon hình ảnh bên trái tên symbol — có fallback: badge chữ cái nằm SẴN phía sau, ảnh phủ lên trên; nếu ảnh lỗi/không có (onerror) thì ẩn ảnh đi, lộ ra badge chữ cái bên dưới, không bao giờ để trống ô icon. */ .sri-icon-wrap { position: relative; width: 22px; height: 22px; flex-shrink: 0; } .sri-icon-wrap .sri-rank { position: absolute; inset: 0; } .sri-icon-wrap img { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; } .mobile-col-price { font-family: 'Space Grotesk', monospace; font-size: 0.72rem; text-align: right; color: var(--text); white-space: nowrap; } .mobile-col-pct { font-family: 'Space Grotesk', monospace; font-size: 0.7rem; text-align: right; white-space: nowrap; } /* Màu tăng/giảm CỐ ĐỊNH, không đổi theo theme Light/Dark — cùng quy ước với bong bóng ở Heatmap Crypto Coins, để "xanh = tăng, đỏ = giảm" luôn nhất quán toàn app. */ .mobile-col-pct.up { color: #00E396; } .mobile-col-pct.down { color: #FF3B5C; } .mobile-col-pct.neutral, .mobile-col-price.neutral { color: var(--text-muted); } /* Nút "+" nổi góc dưới bên phải — position:FIXED (không phải absolute) để LUÔN neo đúng góc màn hình bất kể trang cuộn lên/xuống thế nào. Bản trước dùng absolute nên chỉ hiện đúng vị trí khi đã cuộn hết xuống cuối — đây là lỗi đã sửa. Luôn hiện ở CẢ 4 tab. */ .mobile-add-fab { position: fixed; right: 16px; bottom: 16px; width: 52px; height: 52px; border-radius: 50%; background: var(--accent); color: var(--on-accent); border: none; font-size: 1.6rem; font-weight: 300; line-height: 1; display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 24px rgba(0,0,0,0.4); z-index: 150; } .mobile-add-fab:hover { filter: brightness(1.08); } /* ---------- Toggle Menu cho topbar trên mobile ---------- */ .topbar-menu-toggle { display: none; flex-direction: column; justify-content: center; gap: 4px; width: 34px; height: 30px; padding: 0; background: transparent; border: 1px solid var(--border); border-radius: 6px; margin-left: auto; } .topbar-menu-toggle span { display: block; height: 2px; background: var(--text); border-radius: 1px; margin: 0 6px; } @media (max-width: 640px) { .topbar-menu-toggle { display: flex; } .topbar-menu { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0.6rem; padding: 0.8rem; background: var(--panel); border-bottom: 1px solid var(--border); box-shadow: 0 12px 24px rgba(0,0,0,0.35); z-index: 100; } .topbar-menu.open { display: flex; } .topbar-menu .topbar-nav-row { flex-direction: column; align-items: stretch; gap: 0.6rem; } .topbar-menu .controls { flex-direction: column; align-items: stretch; gap: 0.6rem; } .topbar-menu .primary-tabs, .topbar-menu #themeToggle { align-self: flex-start; } } /* ---------- Modal Indicators ---------- */ .indicators-list { padding: 0.3rem 0; } .indicator-row { display: flex; align-items: center; gap: 0.6rem; width: 100%; padding: 0.5rem 0.9rem; background: transparent; border: none; text-align: left; color: var(--text); font-size: 0.85rem; cursor: pointer; } .indicator-row:hover { background: var(--accent-dim); } .indicator-row input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--accent); flex-shrink: 0; } .indicator-row span { flex: 1; min-width: 0; } .indicators-modal-footer { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; padding: 0.7rem 0.9rem; border-top: 1px solid var(--border); flex-shrink: 0; } .indicators-modal-hint { font-size: 0.72rem; color: var(--text-muted); line-height: 1.35; } .indicators-modal-actions { display: flex; gap: 0.5rem; flex-shrink: 0; } #indicatorsOkBtn { background: var(--accent); color: var(--on-accent); border: none; padding: 0.4rem 0.9rem; border-radius: 6px; } #indicatorsOkBtn:hover { filter: brightness(1.08); } .btn-with-icon { display: inline-flex; align-items: center; gap: 0.35rem; } .btn-with-icon svg { flex-shrink: 0; } /* ---------- Trang Home ---------- */ .home-page { min-height: calc(100vh - 58px); overflow-y: auto; } .home-hero { position: relative; padding: 4.5rem 1.5rem 3.5rem; text-align: center; overflow: hidden; border-bottom: 1px solid var(--border); } /* Nền liên quan đến trading chart: 1 dải "nến" (candlestick) trừu tượng vẽ bằng CSS gradient lặp lại, mờ dần phía dưới — không cần ảnh/asset ngoài, nhẹ và luôn khớp theme. */ .home-hero-bg { position: absolute; inset: 0; z-index: 0; background-image: linear-gradient(180deg, transparent 0%, var(--bg) 92%), repeating-linear-gradient(90deg, var(--accent) 0px, var(--accent) 3px, transparent 3px, transparent 22px), linear-gradient(180deg, var(--surface-2) 0%, var(--bg) 100%); background-size: 100% 100%, 100% 70%, 100% 100%; background-position: 0 0, 0 15%, 0 0; background-repeat: no-repeat; opacity: 0.16; mask-image: linear-gradient(180deg, rgba(0,0,0,0.9) 0%, transparent 85%); -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0.9) 0%, transparent 85%); } .home-hero-content { position: relative; z-index: 1; max-width: 760px; margin: 0 auto; } .home-title { font-family: 'Space Grotesk', sans-serif; font-size: 1.9rem; line-height: 1.3; font-weight: 700; margin: 0.2rem 0; color: var(--text); } .home-title-accent { color: var(--accent); } .home-cta { margin-top: 1.6rem; padding: 0.75rem 1.8rem; font-size: 0.95rem; font-weight: 600; font-family: 'Space Grotesk', sans-serif; background: var(--accent); color: var(--on-accent); border: none; border-radius: 8px; cursor: pointer; box-shadow: 0 10px 24px var(--accent-dim); } .home-cta:hover { filter: brightness(1.08); } .home-tagline { margin: 1rem auto 0; max-width: 520px; color: var(--text-muted); font-size: 0.85rem; line-height: 1.5; } .home-market-data { border-top: 1px solid var(--border); padding: 1rem; display: flex; flex-direction: column; gap: 1rem; } /* Mỗi danh mục (Indices/Futures/Crypto/Bonds/Forex) là 1 widget "Market Quotes" chính chủ TradingView riêng — có sẵn đủ cột Price/Chg/Chg %/Open/High/Low/Prev với DỮ LIỆU THẬT, không cần tự dựng bảng/tự fetch nữa. Chiều cao cố định đủ cho tiêu đề widget + 10 dòng. */ .home-mq-widget { border: 1px solid var(--border); border-radius: 10px; overflow: hidden; background: var(--panel); } /* Web Component — không còn bọc trong .tradingview-widget-container kiểu iframe cũ nữa, set kích thước thẳng lên chính thẻ này. Widget dùng Shadow DOM đóng nên không style được các phần tử BÊN TRONG (VD độ rộng từng cột) — chỉ chỉnh được kích thước tổng thể + theme qua CSS token công khai (xem tài liệu TradingView "Set styles and themes"). */ .home-mq-widget tv-market-data { display: block; width: 100%; height: 900px; } @media (max-width: 640px) { .home-hero { padding: 3rem 1rem 2.2rem; } .home-title { font-size: 1.4rem; } .home-mq-widget tv-market-data { height: 700px; } } /* ---------- Demo hoạt ảnh "cách Lưới Chart hoạt động" trên trang Home ---------- */ .home-demo-device { width: min(640px, 92vw); margin: 0 auto 1.8rem; } .home-demo-bezel { background: linear-gradient(180deg, #2a2f38, #1a1d23); border-radius: 16px; padding: 10px 10px 14px; box-shadow: 0 30px 60px rgba(0,0,0,0.45), 0 0 0 1px rgba(255,255,255,0.04); } .home-demo-screen { position: relative; aspect-ratio: 16 / 10; background: var(--bg); border-radius: 8px; overflow: hidden; display: flex; flex-direction: column; } .home-demo-toolbar { flex-shrink: 0; display: flex; align-items: center; gap: 5px; padding: 8px 10px; background: var(--panel); border-bottom: 1px solid var(--border); } .home-demo-toolbar span { width: 7px; height: 7px; border-radius: 50%; background: var(--border); } .home-demo-grid { position: relative; flex: 1; min-height: 0; } .home-demo-stand { width: 120px; height: 10px; margin: 0 auto; background: linear-gradient(180deg, #1a1d23, #0e1013); border-radius: 0 0 8px 8px; } /* Mỗi ô mini-chart — position:absolute, top/left/width/height đặt qua inline style (JS) và luôn có transition sẵn ở đây, để chuyển bố cục (2 -> 4 -> 5 ô mosaic) tự mượt (kỹ thuật giống FLIP animation đã dùng cho kéo-thả chart thật ở lưới Chart). */ .home-demo-panel { position: absolute; background: var(--panel); border: 1px solid var(--border); border-radius: 6px; overflow: hidden; transition: left 0.7s cubic-bezier(0.22,0.9,0.24,1), top 0.7s cubic-bezier(0.22,0.9,0.24,1), width 0.7s cubic-bezier(0.22,0.9,0.24,1), height 0.7s cubic-bezier(0.22,0.9,0.24,1), opacity 0.5s ease; opacity: 0; } .home-demo-panel.is-visible { opacity: 1; } .home-demo-panel svg { width: 100%; height: 100%; display: block; } /* Thanh công cụ vẽ (Drawing Toolbar) giả lập — dải dọc bên trái mỗi ô, chỉ hiện ở bước 4 */ .home-demo-tools { position: absolute; top: 0; left: 0; bottom: 0; width: 14%; background: var(--surface-2); border-right: 1px solid var(--border); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8%; opacity: 0; transition: opacity 0.4s ease; } .home-demo-panel.show-tools .home-demo-tools { opacity: 1; } .home-demo-tools i { display: block; width: 30%; aspect-ratio: 1; border-radius: 2px; background: var(--text-muted); opacity: 0.6; } /* Chỉ báo (indicator) giả lập — 1 đường mảnh phủ lên trên đường giá chính, chỉ hiện ở bước 4 */ .home-demo-indicator { opacity: 0; transition: opacity 0.4s ease; } .home-demo-panel.show-tools .home-demo-indicator { opacity: 1; } /* Bước 5: "chart cập nhật nhẹ" — nhấp nháy viền sáng lên rồi tắt, gợi ý dữ liệu vừa làm mới, không cần animate lại đường mini-chart (tránh vấn đề trình duyệt animate thuộc tính "d" của SVG path không ổn định giữa các trình duyệt). */ @keyframes homeDemoPulse { 0% { box-shadow: 0 0 0 0 var(--accent-dim); } 50% { box-shadow: 0 0 14px 2px var(--accent-dim); } 100% { box-shadow: 0 0 0 0 transparent; } } .home-demo-grid.pulse-update .home-demo-panel { animation: homeDemoPulse 0.9s ease; } /* ---------- Footer (About/Contact/Privacy/Terms) ---------- */ .site-footer { border-top: 1px solid var(--border); background: var(--panel); padding: 1.2rem 1.1rem; margin-top: auto; } .site-footer-inner { max-width: 1100px; margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.8rem; } .site-footer-brand { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 0.85rem; color: var(--text); } .site-footer-links { display: flex; flex-wrap: wrap; gap: 1.1rem; } .site-footer-links a { color: var(--text-muted); text-decoration: none; font-size: 0.78rem; } .site-footer-links a:hover { color: var(--accent); text-decoration: underline; } .site-footer-copy { color: var(--text-muted); font-size: 0.72rem; } /* Trang tĩnh (About/Contact/Privacy/Terms) — nội dung văn bản dài, căn giữa, dễ đọc */ .legal-page { max-width: 760px; margin: 0 auto; padding: 2.4rem 1.2rem 3rem; color: var(--text); line-height: 1.7; } .legal-page h1 { font-family: 'Space Grotesk', sans-serif; font-size: 1.6rem; margin-bottom: 0.3rem; } .legal-page .legal-updated { color: var(--text-muted); font-size: 0.78rem; margin-bottom: 1.8rem; } .legal-page h2 { font-family: 'Space Grotesk', sans-serif; font-size: 1.05rem; margin-top: 2rem; margin-bottom: 0.6rem; } .legal-page p, .legal-page li { font-size: 0.9rem; color: var(--text); } .legal-page ul { padding-left: 1.3rem; margin: 0.6rem 0; } .legal-page a { color: var(--accent); } .legal-page .legal-notice { background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px; padding: 0.9rem 1rem; font-size: 0.82rem; color: var(--text-muted); margin-bottom: 1.8rem; } .contact-info { display: flex; flex-direction: column; gap: 0.5rem; margin: 1rem 0; } .contact-info a { color: var(--accent); font-weight: 600; } /* ---------- Trang 404 ---------- */ .notfound-wrap { text-align: center; padding: 2rem 0; } .notfound-code { font-family: 'Space Grotesk', sans-serif; font-size: 5rem; font-weight: 700; color: var(--accent); line-height: 1; opacity: 0.85; } .notfound-wrap h1 { margin-top: 0.5rem; } .notfound-actions { margin: 1.6rem 0; } .notfound-links { color: var(--text-muted); font-size: 0.82rem; }