/* ---------- 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; } /* Logo thương hiệu ở header — CỐ TÌNH không dùng thẻ

(trước đây dùng h1, gây trùng lặp với h1 nội dung chính của từng trang, VD tên mã ở trang Overview, tiêu đề Heatmap...) — mỗi trang giờ chỉ còn đúng 1 h1 duy nhất, đúng chuẩn SEO. Style dưới đây giữ NGUYÊN VẸN hình thức hiển thị y hệt h1 gốc trước đây, chỉ đổi thẻ HTML. */ .brand-title { 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 */ color: var(--text); /* #homeLink là thẻ — PHẢI ghi đè màu link mặc định của trình duyệt ở đây (áp dụng LUÔN, không chỉ lúc :hover) để "TradingChart" kế thừa đúng màu theme (trắng ở Tối/đen ở Sáng) thay vì màu xanh dương link mặc định — đây chính là lỗi thật đã báo cáo: trước đây CHỈ có ".brand:hover h1 { color: var(--text) }", nghĩa là màu chỉ đúng lúc rê chuột vào, còn bình thường vẫn hiện màu link mặc định của trình duyệt. */ } .brand:hover { background: var(--accent-dim); } .brand:hover .brand-title { color: var(--text); } .brand-icon { width: 22px; height: 22px; border-radius: 6px; /* khớp phong cách rounded-square của icon gốc */ flex-shrink: 0; display: block; } @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; } /* Mobile (≤640px): Lưới Chart ép về 1 cột (script.js, effectiveCols()) — nếu vẫn chia đều chiều cao cho TẤT CẢ hàng trong đúng 100vh như PC/tablet, nhiều chart xếp dọc sẽ bị bóp bé tí, gần như không xem được (VD 6 chart = mỗi ô chỉ ~16vh chiều cao). Thay vào đó: mỗi hàng có chiều cao TỐI THIỂU gần trọn màn hình, cả lưới cuộn dọc để xem chart tiếp theo. */ @media (max-width: 640px) { .chart-grid { overflow-y: auto; } .grid-row { flex: 0 0 auto; min-height: 21.6vh; } /* = 30% của 72vh trước đây */ .row-resizer { display: none; } /* thanh kéo đổi chiều cao hàng không cần thiết khi đã cuộn dọc tự do */ } .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) { .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); } .heatmap-seo-header { padding: 0.7rem 1.1rem 0; flex-shrink: 0; } .heatmap-seo-header h1 { font-family: 'Space Grotesk', sans-serif; font-size: 1.1rem; margin: 0 0 2px; } .heatmap-seo-header h2 { font-family: 'Space Grotesk', sans-serif; font-size: 0.8rem; font-weight: 500; color: var(--text-muted); margin: 0 0 2px; } .heatmap-seo-header p { font-size: 0.75rem; color: var(--text-muted); margin: 0 0 0.4rem; max-width: 900px; } /* Khung SEO cho trang Charts khi vào qua Markets/Live Symbol Chart — CHỈ hiện khi có nội dung (JS tự hiện/ẩn qua thuộc tính hidden), Charts bình thường (không qua route đặc biệt nào) không cần khung này. */ .charts-seo-header { padding: 0.7rem 1.1rem 0; } .charts-seo-header h1 { font-family: 'Space Grotesk', sans-serif; font-size: 1.1rem; margin: 0 0 2px; } .charts-seo-header h2 { font-family: 'Space Grotesk', sans-serif; font-size: 0.8rem; font-weight: 500; color: var(--text-muted); margin: 0; } .sop-h2 { font-family: 'Space Grotesk', sans-serif; font-size: 0.85rem; font-weight: 500; color: var(--text-muted); margin: 2px 0 0; } .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; } .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%; } /* ---------- 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-h1 { font-family: 'Space Grotesk', sans-serif; font-size: 0.95rem; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; color: var(--text-muted); margin: 0 0 0.5rem; } .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; } /* ---------- Chart Type (Bars/Candles/Line/Area/Renko/Kagi...) ---------- */ .chart-type-wrap { position: relative; } .chart-type-btn { padding: 0.3rem 0.5rem; width: 32px; height: 26px; display: flex; align-items: center; justify-content: center; } .chart-type-btn svg { width: 15px; height: 15px; } .chart-type-panel { position: absolute; top: calc(100% + 6px); left: 0; z-index: 60; min-width: 220px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: 6px; box-shadow: 0 12px 30px rgba(0,0,0,0.35); display: flex; flex-direction: column; gap: 2px; max-height: 70vh; overflow-y: auto; } .chart-type-row { display: flex; align-items: center; gap: 0.6rem; width: 100%; padding: 0.45rem 0.6rem; background: transparent; border: none; border-radius: 6px; color: var(--text); font-size: 0.8rem; text-align: left; cursor: pointer; } .chart-type-row:hover { background: var(--accent-dim); } /* Loại ĐANG CHỌN — nền khác hẳn các loại còn lại, đúng yêu cầu */ .chart-type-row.is-selected { background: var(--accent); color: var(--on-accent); } .chart-type-row.is-selected:hover { background: var(--accent); } .ctr-icon { flex-shrink: 0; display: flex; width: 16px; height: 16px; } .ctr-icon svg { width: 16px; height: 16px; } .ctr-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ---------- Chế độ "Ẩn menu" (focus mode) — luôn có sẵn, bấm nút hoặc Esc để hiện lại ---------- */ body.menu-hidden .topbar-menu-toggle, body.menu-hidden .topbar-menu { display: none; } /* Logo vẫn hiện nhưng mờ đi + "click xuyên qua" (không bắt sự kiện chuột) — đúng yêu cầu: chỉ còn là dấu hiệu nhận diện nhẹ nhàng, không phải điều khiển được nữa lúc đang ẩn menu. */ body.menu-hidden .brand { opacity: 0.32; pointer-events: none; transition: opacity 0.2s ease; } body.menu-hidden .topbar { background: transparent; border-bottom: none; pointer-events: none; /* cả hàng topbar không chặn click xuống nội dung bên dưới nó nữa */ } /* Nút hiện lại menu — nổi cố định góc phải trên cùng, CHỈ hiện khi đang ở chế độ ẩn menu. Mặc định display:none (không dùng thuộc tính [hidden] vì CSS toàn app đã có [hidden]{display:none!important;}, sẽ đè mất khi cần HIỆN nút này qua class). */ .show-menu-fab { display: none; position: fixed; top: 12px; right: 12px; z-index: 250; width: 34px; height: 34px; border-radius: 50%; align-items: center; justify-content: center; background: var(--surface-2); border: 1px solid var(--border); color: var(--text-muted); opacity: 0.7; box-shadow: 0 6px 16px rgba(0,0,0,0.3); } .show-menu-fab:hover { opacity: 1; color: var(--accent); border-color: var(--accent); } body.menu-hidden .show-menu-fab { display: flex; } /* ---------- Dropdown "Market" và "Heatmap" (bên phải Charts) ---------- */ .market-dropdown-wrap { position: relative; } #tabMarket::after, #tabHeatmap::after { content: " ▾"; opacity: 0.7; } /* PC: tự hiện dropdown khi rê chuột vào — [hidden] có !important nên phải ghi đè bằng 1 rule CỤ THỂ HƠN (nhiều điều kiện hơn) kèm !important mới thắng được, không cần đổi gì bên JS (JS vẫn giữ nguyên cơ chế bấm/tap để mở — đúng hành vi cần trên mobile, nơi hover không có thật hoặc không đáng tin cậy). Chỉ ghi đè khi dropdown ĐANG có [hidden] (chưa bấm mở qua JS) — nếu đã bấm mở rồi, dropdown tự hiện qua display mặc định, không cần rule này nữa. */ .market-dropdown-wrap:hover .market-dropdown[hidden] { display: flex !important; } /* "Khoá" hover tạm thời — JS gắn class này ngay lúc đóng dropdown do BẤM CHỌN 1 mục (không phải do rê chuột ra ngoài) — lúc đó chuột thường VẪN CÒN nằm trong vùng dropdown, nếu không có rule này thì rule hover ngay phía trên sẽ ép hiện dropdown trở lại ngay lập tức, đè lên đúng việc JS vừa đóng nó (đúng lỗi đã báo cáo: "bấm chọn xong dropdown không tự đóng"). JS tự gỡ class này khi chuột THỰC SỰ rời khỏi vùng (sự kiện mouseleave) — khôi phục lại đúng hành vi hover bình thường cho lần mở tiếp theo. Độ đặc thù CSS bằng nhau với rule hover gốc (cùng 4 điều kiện) — đặt SAU trong file nên thắng theo thứ tự cascade khi cả 2 cùng khớp 1 lúc. */ .market-dropdown-wrap.mcc-suppress-hover:hover .market-dropdown { display: none !important; } .market-dropdown { position: absolute; top: 100%; /* SÁT ngay dưới nút, KHÔNG khoảng hở (trước đây "calc(100% + 8px)") — khoảng hở tạo ra "vùng chết" giữa nút và dropdown: khi người dùng di chuột từ nút xuống dropdown, lúc con trỏ đi qua đúng khoảng hở đó, không còn nằm trên nút LẪN dropdown -> hover bị ngắt, dropdown biến mất trước khi kịp tới nơi (đúng lỗi đã báo cáo). LƯU Ý: không được dùng margin-top để "bù" lại khoảng cách thị giác — margin trên phần tử position:absolute vẫn tạo ra visual gap y hệt, và trình duyệt KHÔNG tính margin là vùng hover được, nên vẫn tái tạo lại đúng vùng chết ban đầu (đã tự mắc lỗi này 1 lần, sửa lại cho đúng ở đây). Sát liền nhau hoàn toàn -> hover liên tục, không bao giờ bị ngắt quãng giữa chừng. padding-top bên trong (6px, xem "padding" bên dưới) đã đủ tạo khoảng thở thị giác an toàn, không cần thêm gì khác. */ left: 0; z-index: 70; min-width: 240px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: 6px; box-shadow: 0 12px 30px rgba(0,0,0,0.35); display: flex; flex-direction: column; gap: 1px; } .market-dropdown-item { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; padding: 0.55rem 0.7rem; background: transparent; border: none; border-radius: 6px; text-align: left; cursor: pointer; } .market-dropdown-item:hover { background: var(--accent-dim); } .market-dropdown-item .mdi-title { font-family: 'Space Grotesk', sans-serif; font-size: 0.85rem; font-weight: 600; color: var(--text); } .market-dropdown-item:hover .mdi-title { color: var(--accent); } .market-dropdown-item .mdi-sub { font-size: 0.72rem; color: var(--text-muted); } /* ---------- Theme toggle + ngôn ngữ trong footer (đã chuyển từ topbar xuống) ---------- */ .site-footer-links .theme-toggle { margin-left: 0.3rem; } .footer-lang-ctrl { font-size: 0.78rem; } /* ---------- Search Symbols — ô tìm kiếm ngoài cùng bên phải menu chính ---------- */ .symbol-search-wrap { position: relative; margin-left: auto; /* đẩy sang phải ngoài cùng trong dòng menu chính */ } .symbol-search-box { display: flex; align-items: center; gap: 0.4rem; background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px; padding: 0.4rem 0.7rem; width: 300px; } .symbol-search-box:focus-within { border-color: var(--accent); } .ssb-icon { color: var(--text-muted); flex-shrink: 0; } .symbol-search-input { background: transparent; border: none; outline: none; color: var(--text); font-size: 0.82rem; width: 100%; padding: 0; } .symbol-search-dropdown { position: absolute; top: calc(100% + 6px); right: 0; z-index: 80; width: 800px; max-width: 90vw; background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 12px 30px rgba(0,0,0,0.35); overflow: hidden; } .ssd-filters { display: flex; flex-wrap: wrap; gap: 4px; padding: 8px; border-bottom: 1px solid var(--border); } .ssd-filter { background: transparent; border: 1px solid var(--border); color: var(--text-muted); border-radius: 999px; padding: 0.25rem 0.6rem; font-size: 0.7rem; } .ssd-filter:hover { color: var(--text); } .ssd-filter.active { background: var(--accent); border-color: var(--accent); color: var(--on-accent); } .ssd-results { max-height: 60vh; overflow-y: auto; } .ssd-empty { padding: 1.2rem; text-align: center; color: var(--text-muted); font-size: 0.82rem; } .ssd-row { display: grid; grid-template-columns: 28px 1fr auto auto; align-items: center; gap: 8px; padding: 0.5rem 0.7rem; border-bottom: 1px solid var(--border); } .ssd-row:last-child { border-bottom: none; } .ssd-row:hover { background: var(--accent-dim); } .ssd-avatar { width: 26px; height: 26px; border-radius: 50%; background: var(--panel); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 0.75rem; color: var(--text-muted); flex-shrink: 0; } .ssd-info { min-width: 0; display: flex; flex-direction: column; gap: 1px; } .ssd-symbol { font-family: 'Space Grotesk', sans-serif; font-weight: 600; font-size: 0.82rem; color: var(--text); } .ssd-name { font-size: 0.7rem; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ssd-btn { font-size: 0.68rem; padding: 0.3rem 0.55rem; border-radius: 6px; border: 1px solid var(--border); background: transparent; color: var(--text-muted); white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 0.12s ease; } /* PC: hiện khi rê chuột vào dòng. Mobile (không có hover thật): hiện khi JS gán class .ssd-revealed sau lần tap đầu tiên vào dòng (xem symbolsearch.js) — tap lần 2 mới bấm được nút, đúng yêu cầu "mặc định ẩn, tap vào gợi ý mới hiện". */ .ssd-row:hover .ssd-btn, .ssd-row.ssd-revealed .ssd-btn { opacity: 1; pointer-events: auto; } .ssd-btn-overview:hover { border-color: var(--accent); color: var(--accent); } .ssd-btn-chart { background: var(--accent); border-color: var(--accent); color: var(--on-accent); } .ssd-btn-chart:hover { filter: brightness(1.1); } @media (max-width: 900px) { .symbol-search-box { width: 160px; } } @media (max-width: 640px) { .symbol-search-wrap { margin-left: 0; width: 100%; } .symbol-search-box { width: 100%; } .symbol-search-dropdown { width: 100%; right: auto; left: 0; } } /* ---------- Trang Symbol Overview (Search Symbols > Overview) ---------- */ .symbol-overview-page { width: 100%; padding: 1.2rem 1.5rem; } .sop-header { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.2rem; } .sop-avatar { width: 52px; height: 52px; border-radius: 50%; background: var(--surface-2); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 1.4rem; color: var(--text-muted); flex-shrink: 0; } .sop-titles { flex: 1; min-width: 0; } .sop-titles h1 { font-family: 'Space Grotesk', sans-serif; font-size: 1.3rem; margin: 0; } .sop-symbol-code { color: var(--text-muted); font-size: 0.8rem; } .sop-open-chart { flex-shrink: 0; } /* Hàng đầu — widget Symbol Overview (mini chart), chiếm trọn chiều rộng */ .sop-row-full { margin-bottom: 1rem; } .sop-widget-overview-chart { height: 420px; } .sop-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } .sop-widget { border: 1px solid var(--border); border-radius: 10px; overflow: hidden; background: var(--panel); min-height: 380px; /* flex column thay vì chỉ dựa vào height:100% cho container widget con bên trong — đáng tin cậy hơn hẳn: height:100% chỉ hoạt động đúng khi phần tử cha có chiều cao "chắc chắn" (definite height), còn ở đây .sop-widget chỉ có min-height (không phải height cố định) — dẫn tới container widget con (.tradingview-widget-container, JS tự tạo trong symbolsearch.js) không lấp đầy được, khiến widget TradingView co lại gần như phẳng (đúng lỗi đã báo cáo lần đầu: chỉ thấy 1 đường kẻ ngang). flex:1 trên con không gặp giới hạn này. */ display: flex; flex-direction: column; } .sop-widget .tradingview-widget-container { flex: 1; min-height: 0; /* cho phép co lại đúng theo flex thay vì bị nội dung bên trong đẩy tràn ra */ /* LỖI TẦNG 2 đã phát hiện (chart vẫn hiện ra nhưng bị nén thành 1 đường kẻ mảnh, không phải trắng hoàn toàn): trước đây áp CÙNG "flex:1" cho CẢ lớp này LẪN ".tradingview-widget- container__widget" (lớp CON của chính lớp này, nơi TradingView thực sự chèn iframe vào) — nhưng "flex:1" CHỈ có tác dụng khi phần tử là CON TRỰC TIẾP của 1 khung display:flex. ".tradingview-widget-container__widget" là con của LỚP NÀY, mà lớp này (trước đây) KHÔNG phải display:flex — nên "flex:1" ở tầng con hoàn toàn vô tác dụng, iframe TradingView tự tạo bên trong không có chiều cao thật, tự co lại theo nội dung (gần như phẳng). Phải làm ĐÚNG LỚP NÀY cũng thành display:flex để "flex:1" ở tầng con mới thực sự có tác dụng — xem rule ngay dưới đây. */ display: flex; flex-direction: column; } .sop-widget .tradingview-widget-container__widget { flex: 1; min-height: 0; } .sop-widget-info, .sop-widget-technical { min-height: 420px; } .sop-widget-financials, .sop-widget-profile { min-height: 460px; } @media (max-width: 900px) { .sop-grid { grid-template-columns: 1fr; } } /* ---------- Nút "+" nổi Thêm chart trên mobile ---------- */ /* Ẩn mặc định (PC không cần — đã có ô "Thêm mã" trên topbar) — CHỈ hiện trên mobile (max-width:640px, cùng ngưỡng MOBILE_BREAKPOINT dùng xuyên suốt app) VÀ CHỈ khi Lưới Chart đang thực sự hiển thị (không hiện lúc ở Home/Heatmap/Overview) — dùng sibling selector dựa theo thuộc tính [hidden] CÓ SẴN của #chartGrid, không cần thêm JS riêng theo dõi trạng thái trang nào đang hiện (mọi logic ẩn/hiện #chartGrid đã có sẵn, tự động đúng theo nó). */ .mobile-add-chart-fab { display: none; 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; align-items: center; justify-content: center; box-shadow: 0 10px 24px rgba(0,0,0,0.4); z-index: 150; cursor: pointer; } .mobile-add-chart-fab:hover { filter: brightness(1.08); } @media (max-width: 640px) { #chartGrid:not([hidden]) ~ .mobile-add-chart-fab { display: flex; } }