/* ========================================================== Chợ Bot Chart Demo Modal — V2 (spec chốt 10/08/2026 04:12 — promote 04:34) Namespace: cb-demo-* Bootstrap-safe Thay đổi so với V1: + Thêm layout trang bot detail (chart full-page + bot-buy-bar) + Thêm watermark "CHART TRỄ TÍN HIỆU" (dưới modal) + Quy ước z-index 4 lớp (chart < watermark < modal < buy-bar) + Modal auto-show khi vào trang (chưa đăng ký), đóng bằng X, không hiện lại trong phiên (sessionStorage — xem .js) ========================================================== */ /* ========================================================== Z-INDEX QUY ƯỚC — BẮT BUỘC (spec đã chốt) ========================================================== Thứ tự lớp từ THẤP → CAO: 1. #tvWidgetContainer (chart TradingView nền full-page) z-index: 1 2. .chart-delay-watermark ("CHART TRỄ TÍN HIỆU" từ bundle) z-index: 2 3. #cb-demo-modal (modal "Bạn đang xem bản Demo") z-index: 50 4. #bot-buy-bar (thanh mua bot THẬT, bottom cố định) z-index: 1000 (inline sẵn có) Hệ quả đúng spec: - Modal MỞ → che cả chart + watermark (watermark nằm DƯỚI modal). - bot-buy-bar luôn NỔI TRÊN modal → nhìn thấy + bấm được ngay cả khi modal đang mở (mục tiêu CRO: đăng ký được ngay). Lưu ý: thanh mua bot THẬT (#bot-buy-bar) đã có position:fixed + z-index:1000 (inline trong PHP) → KHÔNG cần style thêm, KHÔNG tạo thanh mới. ========================================================== */ /* ========================================================== Theme ========================================================== Background #1d2235 Card #262c43 Border #3a4261 Text Primary #ffffff Text Secondary #a7b0d0 Green #19e38d Purple #b04cff Pink #ff46d6 Yellow #ffc943 Button Gradient #7b2cff #ff3cb8 ==========================================================*/ /* ========================================================== [PRODUCTION] LAYOUT TRANG BOT DETAIL — body user login ========================================================== Body của nhánh user đã login nhận class `cb-demo-page` (PHP render `">`). Cấu trúc: flex-column + height 100vh → #tvWidgetContainer (flex:1) fill phần viewport còn lại; #bot-buy-bar / modal là position:fixed nên không nằm trong flow. Guest branch KHÔNG có class này → không ảnh hưởng. ========================================================== */ body.cb-demo-page { display: flex; flex-direction: column; height: 100vh; height: 100dvh; /* mobile: tránh jump khi URL bar ẩn/hiện */ overflow: hidden; } html[lang="vi"] body.cb-demo-page { font-family: -apple-system, BlinkMacSystemFont, Trebuchet MS, Roboto, Ubuntu, sans-serif !important; } /* ========================================================== CHART FULL-PAGE — #tvWidgetContainer (production hook) ========================================================== #tvWidgetContainer là div chứa widget TradingView HIỆN CÓ trên trang bot detail. CSS này đảm bảo nó: - là lớp NỀN thấp nhất (z-index: 1) - fill toàn bộ phần viewport còn lại (flex: 1 trong body.cb-demo-page) - KHÔNG che bot-buy-bar (bar nằm trên, z-index cao hơn) Widget TradingView dùng `autosize: true` (BaseChart.js) → tự fill kích thước container khi init (CSS đã áp dụng trước khi JS chạy). ========================================================== */ #tvWidgetContainer { position: relative; z-index: 1; /* lớp thấp nhất */ flex: 1 1 auto; /* fill phần còn lại của viewport */ min-height: 0; /* cho phép co lại trong flex */ background: #131722; /* nền kiểu TradingView (TV tự vẽ nền thật) */ } /* ========================================================== Watermark "CHART TRỄ TÍN HIỆU" ========================================================== [PRODUCTION] Watermark hiện có do bundle vẽ (client3.js hotfix 10/08: tạo div .chart-delay-watermark với INLINE z-index:9999). Spec yêu cầu z-index 2 → modal (50) che được watermark. KHÔNG sửa bundle — override CSS `!important` thắng inline style (inline không có !important). pointer-events: none đã được bundle set (không chặn thao tác chart). ========================================================== */ #tvWidgetContainer .chart-delay-watermark { z-index: 2 !important; /* chart 1 < watermark 2 < modal 50 */ } /* ========================================================== MODAL — #cb-demo-modal (cơ chế show/hide bằng class) ========================================================== Mặc định ẩn (display:none). Thêm class `.cb-demo-show` để hiện. Không phụ thuộc Bootstrap JS (toggle class thuần CSS — an toàn). z-index 50 < bot-buy-bar (1000) → thanh mua bot luôn bấm được. ========================================================== */ #cb-demo-modal { display: none; position: fixed; inset: 0; z-index: 50; /* dưới bot-buy-bar (1000), trên watermark (2) */ padding: 24px 16px calc(24px + 104px); /* đáy chừa chỗ cho bot-buy-bar (luôn nổi trên modal) */ background: rgba(13, 16, 28, 0.92); /* nền tối, che chart + watermark */ align-items: center; justify-content: center; overflow-y: auto; color: white; } #cb-demo-modal.cb-demo-show { display: flex; } #cb-demo-modal .modal-dialog { width: 100%; max-width: 760px; margin: auto; /* FIX 10/08 05:44: Bootstrap widgets.css (trading.chart.vn) set `.modal-dialog { pointer-events: none }` (để click nền đóng modal kiểu Bootstrap). Modal demo dùng .cb-demo-content (không phải .modal-content) nên rule auto không áp → toàn bộ modal bị chặn click (nút X/CTA chết). Override lại: cho phép click trong dialog. */ pointer-events: auto; } body.cb-demo-lock { overflow: hidden; } /* khóa scroll nền khi modal mở */ #cb-demo-modal .cb-demo-content { background: #1d2235; border: 1px solid #394261; border-radius: 18px; overflow: hidden; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55); } /* ========================================================== Modal — Header ========================================================== */ .cb-demo-header { display: flex; justify-content: space-between; align-items: center; padding: 20px 28px; border-bottom: 1px solid #323a59; } .cb-demo-title { display: flex; align-items: center; gap: 12px; } .cb-demo-title i { color: #ffc943; font-size: 22px; } .cb-demo-title h3 { margin: 0; font-size: 24px; font-weight: 700; } /* Nút X (đóng modal) */ .cb-demo-close { background: transparent; border: 0; color: #a7b0d0; font-size: 24px; line-height: 1; padding: 6px 10px; border-radius: 8px; cursor: pointer; opacity: 0.75; transition: 0.18s; } .cb-demo-close:hover { opacity: 1; color: #fff; background: #2d3550; } /* ========================================================== Modal — Body ========================================================== */ .cb-demo-body { padding: 28px; } /* ========================================================== Modal — Bot Name / Tier badge ========================================================== */ .cb-demo-bot { text-align: center; margin-bottom: 24px; } .cb-demo-bot-name { font-size: 38px; font-weight: 800; } .cb-demo-vip { display: inline-flex; padding: 4px 10px; border-radius: 4px; background: #7b2cff; color: #fff; font-size: 12px; vertical-align: middle; margin-left: 8px; } /* ========================================================== Modal — Rating (HIỆN ĐANG ẨN: chưa có nguồn dữ liệu thật — xem TODO trong parts/chart-demo-modal.php) ========================================================== */ .cb-demo-rating { display: flex; justify-content: center; align-items: center; gap: 8px; margin-top: 12px; } .cb-demo-stars { color: #ffd54d; font-size: 22px; } .cb-demo-rating-score { font-size: 26px; font-weight: 700; } .cb-demo-rating-users { color: #a8b3d6; } /* ========================================================== Modal — Statistics ========================================================== */ .cb-demo-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin: 28px 0; } .cb-demo-stat { background: #262c43; border: 1px solid #394261; border-radius: 14px; padding: 18px; text-align: center; transition: 0.2s; } .cb-demo-stat:hover { transform: translateY(-2px); border-color: #5964a5; } .cb-demo-stats { gap: 0; } .cb-demo-stat { cursor: pointer; border-radius: 0; } .cb-demo-stat-first { cursor: pointer; border-radius: 14px; border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; border: 1px solid #394261 !important; } .cb-demo-stat-last { cursor: pointer; border-radius: 14px; border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; } .cb-demo-stat-icon { font-size: 38px; margin-bottom: 10px; } .cb-demo-stat-icon.icon-profit { color: #19e38d; } .cb-demo-stat-icon.icon-winrate { color: #a04bec; } .cb-demo-stat-icon.icon-trades { color: #208bf0; } .cb-demo-stat-icon.icon-drawdown { color: #f67e34; } .cb-demo-stat-value { font-size: 30px; font-weight: 700; white-space: nowrap; padding-bottom: 8px; } .cb-demo-stat-value.profit { color: #19e38d; } .cb-demo-stat-label { color: #9aa7d3; font-size: 14px; } /* ========================================================== Modal — Features ========================================================== */ .cb-demo-section-title { text-align: center; font-size: 26px; font-weight: 700; margin: 18px 0; color: #eab94f; } .cb-demo-features { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 26px; padding: 16px; padding-top: 0px; padding-bottom: 24px; } .cb-demo-feature { display: flex; align-items: center; gap: 10px; } .cb-demo-feature i { color: #25d366; font-size: 18px; } /* ========================================================== Modal — FOMO (HIỆN ĐANG ẨN: chưa có counter tín hiệu miễn phí — xem TODO trong parts/chart-demo-modal.php) ========================================================== */ .cb-demo-fomo { margin: 26px 0; padding: 16px; border-radius: 14px; background: rgba(176, 76, 255, 0.08); border: 1px dashed #b04cff; text-align: center; font-size: 18px; font-weight: 600; } .cb-demo-fomo b { color: #ffd54d; } /* ========================================================== Modal — CTA ========================================================== */ .cb-demo-primary { width: 100%; height: 56px; border: 0; border-radius: 12px; font-size: 20px; font-weight: 700; color: #fff; background: linear-gradient(90deg, #7b2cff, #ff3cb8); transition: 0.2s; cursor: pointer; } .cb-demo-primary i{ color: #ffc943; } .cb-demo-primary:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(255, 60, 184, 0.28); } .cb-demo-secondary { width: 100%; height: 52px; margin-top: 14px; background: none; border: 1px solid #4a5478; border-radius: 12px; color: #dfe7ff; cursor: pointer; font-weight: 700; font-size: 18px; } .cb-demo-secondary:hover { background: #2d3550; } /* ========================================================== Modal — Trust ========================================================== */ .cb-demo-trust { margin-top: 22px; text-align: center; font-size: 13px; color: #97a3c7; } .cb-demo-trust i { color: #25d366; } /* ========================================================== Modal — Animation ========================================================== */ .cb-demo-content { animation: cbDemoScale 0.18s ease; } @keyframes cbDemoScale { from { transform: scale(0.96); opacity: 0; } to { transform: scale(1); opacity: 1; } } /* ========================================================== BOT-BUY-BAR — thanh mua bot (PRODUCTION: KHÔNG tạo thanh mới) ========================================================== Trang thật đã có #bot-buy-bar với inline: position:fixed; left:0; right:0; bottom:0; z-index:1000; → đã thỏa spec (fixed bottom + z-index > modal 50). KHÔNG cần style. Các rule .cb-demo-buy-* bên dưới chỉ dùng cho bản mẫu/standalone preview (không có class này trong trang thật → inert, giữ để đối chiếu chuẩn). ========================================================== */ .cb-demo-buy-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 100; /* bản mẫu: 100 > 50; trang thật dùng 1000 */ display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 76px; padding: 12px 24px; background: rgba(29, 34, 53, 0.94); border-top: 1px solid #3a4261; backdrop-filter: blur(10px); box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.35); } .cb-demo-buy-info { display: flex; align-items: center; gap: 12px; min-width: 0; } .cb-demo-buy-name { font-size: 18px; font-weight: 700; color: #fff; white-space: nowrap; } .cb-demo-buy-vip { flex: none; padding: 2px 8px; border-radius: 20px; background: #7b2cff; color: #fff; font-size: 11px; font-weight: 700; } .cb-demo-buy-stats { display: flex; gap: 18px; color: #a7b0d0; font-size: 13px; white-space: nowrap; } .cb-demo-buy-stats b { color: #19e38d; } .cb-demo-buy-price { font-size: 15px; color: #dfe7ff; white-space: nowrap; } .cb-demo-buy-price b { color: #ffc943; font-size: 17px; } .cb-demo-buy-cta { flex: none; height: 48px; padding: 0 28px; border: 0; border-radius: 10px; background: linear-gradient(90deg, #7b2cff, #ff3cb8); color: #fff; font-size: 16px; font-weight: 700; cursor: pointer; transition: 0.2s; } .cb-demo-buy-cta:hover { box-shadow: 0 8px 24px rgba(255, 60, 184, 0.35); } .cb-demo-buy-right { display: flex; align-items: center; gap: 14px; flex: none; } /* ========================================================== Responsive ========================================================== */ @media (max-width: 768px) { .cb-demo-body { padding: 20px; } .cb-demo-bot-name { font-size: 30px; } .cb-demo-stats { grid-template-columns: repeat(2, 1fr); } .cb-demo-features { grid-template-columns: 1fr; } .cb-demo-watermark span { font-size: 20px; letter-spacing: 4px; padding: 10px 24px; } .cb-demo-buy-bar { min-height: 68px; padding: 10px 14px; } .cb-demo-buy-stats { display: none; } /* ẩn stat phụ trên tablet/mobile */ } @media (max-width: 480px) { .cb-demo-bot-name { font-size: 26px; } .cb-demo-rating { flex-wrap: wrap; } .cb-demo-stat-value { font-size: 24px; } .cb-demo-primary { font-size: 18px; } .cb-demo-buy-price { display: none; } /* mobile: chỉ name + CTA */ .cb-demo-buy-name { font-size: 16px; } .cb-demo-buy-cta { height: 44px; padding: 0 18px; font-size: 15px; } .cb-demo-title h3 { font-size: 20px; } }