/* ============================================================
   realtime-chart.css — Biểu đồ kỹ thuật realtime (.rtc-*)
   ============================================================ */

/* ── Overlay backdrop ────────────────────────────────────────── */
.rtc-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.75);
    z-index: 9900;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}
.rtc-overlay.on {
    opacity: 1;
    pointer-events: auto;
}

/* ── Modal box ───────────────────────────────────────────────── */
.rtc-modal {
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border, rgba(148,163,184,0.15));
    border-radius: var(--border-radius-lg);
    width: min(96vw, 1100px);
    height: min(90vh, 720px);
    display: flex;
    flex-direction: column;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5);
    overflow: hidden;
}

/* ── Header ──────────────────────────────────────────────────── */
.rtc-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px 10px;
    border-bottom: 1px solid var(--color-border, rgba(148,163,184,0.12));
    flex-shrink: 0;
    gap: 10px;
    flex-wrap: wrap;
}
.rtc-header-left {
    display: flex;
    align-items: center;
    gap: 10px;
}
.rtc-header-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

.rtc-symbol {
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--color-text-primary);
    letter-spacing: 0.03em;
}

/* Dòng thông tin cơ bản: tên · ngành · sàn · KL (xuống hàng riêng dưới giá) */
.rtc-header-left { flex-wrap: wrap; }
.rtc-name {
    flex-basis: 100%;
    font-size: var(--font-size-2xs);
    color: var(--color-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.rtc-name:empty { display: none; }

/* Live indicator dot */
.rtc-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-neutral);
    flex-shrink: 0;
}
.rtc-dot.live {
    background: var(--color-positive);
    box-shadow: 0 0 6px var(--color-positive);
}
.rtc-dot.pulse {
    animation: rtc-pulse 0.5s ease;
}
@keyframes rtc-pulse {
    0%   { transform: scale(1);   opacity: 1; }
    50%  { transform: scale(1.8); opacity: 0.5; }
    100% { transform: scale(1);   opacity: 1; }
}

.rtc-price {
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: var(--color-text-primary);
    font-variant-numeric: tabular-nums;
}
.rtc-chg {
    font-size: var(--font-size-sm);
    font-weight: 600;
    padding: 2px 7px;
    border-radius: var(--border-radius-sm);
}
.rtc-chg.up { color: var(--color-positive); background: rgba(16,185,129,0.12); }
.rtc-chg.dn { color: var(--color-negative); background: rgba(239,68,68,0.12);  }

/* Symbol search */
.rtc-search {
    display: flex;
    gap: 4px;
}
.rtc-input {
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border, rgba(148,163,184,0.2));
    border-radius: var(--border-radius-md);
    color: var(--color-text-primary);
    font-size: var(--font-size-sm);
    font-weight: 600;
    padding: 5px 10px;
    width: 90px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    outline: none;
    transition: border-color 0.15s;
}
.rtc-input:focus { border-color: var(--color-accent-primary); }
.rtc-go {
    background: var(--color-accent-primary);
    border: none;
    border-radius: var(--border-radius-md);
    color: var(--color-on-accent);
    font-size: var(--font-size-xs);
    font-weight: 700;
    padding: 5px 10px;
    cursor: pointer;
    transition: background 0.15s;
}
.rtc-go:hover { background: #2563eb; }

.rtc-fs {
    background: transparent;
    border: 1px solid var(--color-border, rgba(148,163,184,0.2));
    border-radius: var(--border-radius-md);
    color: var(--color-text-secondary);
    cursor: pointer;
    width: 30px; height: 30px;
    font-size: var(--font-size-base);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.rtc-fs:hover {
    background: rgba(59,130,246,0.12);
    color: var(--color-accent-primary);
    border-color: var(--color-accent-primary);
}

/* CSS fallback fullscreen (khi Fullscreen API bị chặn) */
.rtc-modal.fs {
    position: fixed;
    inset: 0;
    width: 100vw !important;
    height: 100dvh !important;
    border-radius: 0;
    border: none;
    z-index: 99999;
}

/* Khi dùng Fullscreen API: modal là fullscreen element → cần fill 100% */
.rtc-modal:fullscreen {
    width: 100vw;
    height: 100dvh;
    border-radius: 0;
    border: none;
    background: var(--color-bg-secondary);
    display: flex;
    flex-direction: column;
}
.rtc-modal:-webkit-full-screen {
    width: 100vw;
    height: 100dvh;
    border-radius: 0;
    border: none;
}

.rtc-close {
    background: transparent;
    border: 1px solid var(--color-border, rgba(148,163,184,0.2));
    border-radius: var(--border-radius-md);
    color: var(--color-text-secondary);
    cursor: pointer;
    width: 30px; height: 30px;
    font-size: var(--font-size-sm);
    display: flex; align-items: center; justify-content: center;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    flex-shrink: 0;
}
.rtc-close:hover {
    background: rgba(239,68,68,0.12);
    color: var(--color-negative);
    border-color: var(--color-negative);
}

/* ── Controls bar ─────────────────────────────────────────────── */
.rtc-controls {
    display: flex;
    align-items: center;
    gap: 0;
    padding: 8px 16px 6px;
    border-bottom: 1px solid var(--color-border, rgba(148,163,184,0.10));
    flex-shrink: 0;
    flex-wrap: wrap;
    gap: 8px;
}

/* Timeframe buttons */
.rtc-tf-row, .rtc-sys-row {
    display: flex;
    gap: 4px;
}
.rtc-tf, .rtc-sys {
    background: transparent;
    border: 1px solid var(--color-border, rgba(148,163,184,0.2));
    border-radius: var(--border-radius-sm);
    color: var(--color-text-secondary);
    cursor: pointer;
    font-size: var(--font-size-xs);
    font-weight: 600;
    padding: 4px 9px;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
    white-space: nowrap;
}
.rtc-tf:hover, .rtc-sys:hover {
    background: rgba(59,130,246,0.1);
    border-color: rgba(59,130,246,0.4);
    color: #93c5fd;
}
.rtc-tf.on, .rtc-sys.on {
    background: rgba(59,130,246,0.18);
    border-color: var(--color-accent-primary);
    color: var(--color-accent-primary);
}

/* ── Công cụ vẽ & đo (chart-drawings.js) ─────────────────────────────────────
   Thanh nút tách khỏi nhóm khung/hệ bằng một vạch dọc: đây là nhóm hành động
   (đổi cách TƯƠNG TÁC), không phải nhóm lựa chọn (đổi cái ĐANG XEM). */
.rtc-draw-row {
    display: flex;
    gap: 4px;
    align-items: center;
    padding-left: 8px;
    margin-left: 2px;
    border-left: 1px solid var(--color-border);
}
.rtc-dtool {
    background: transparent;
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-sm);
    color: var(--color-text-secondary);
    cursor: pointer;
    font-size: var(--font-size-sm);
    line-height: 1;
    min-width: 28px;
    padding: 4px 6px;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.rtc-dtool:hover:not(:disabled) {
    background: rgba(59,130,246,0.1);
    border-color: rgba(59,130,246,0.4);
    color: #93c5fd;
}
.rtc-dtool.on {
    background: rgba(59,130,246,0.18);
    border-color: var(--color-accent-primary);
    color: var(--color-accent-primary);
}
.rtc-dtool:disabled { opacity: 0.35; cursor: default; }
.rtc-dsep { width: 1px; height: 16px; background: var(--color-border); margin: 0 2px; }

/* Lớp vẽ: phủ kín khung giá nhưng KHÔNG nhận sự kiện chuột — mọi thao tác bắt ở
   `#rtcPanePrice` (pha capture) để còn quyết định được lúc nào nhường cho biểu đồ kéo nền. */
.rtc-draw-cv {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 3;
}

/* Khung trong phiên của mã KHÔNG thuộc rổ ghi tick — mờ đi và chặn hẳn, kèm title nói lý do.
   Vẫn để nút trên màn hình (không ẩn) vì ẩn đi thì người dùng tưởng hệ thống không có khung
   15 phút, còn để mờ thì thấy ngay "có, nhưng không cho mã này". */
.rtc-tf--off {
    opacity: 0.38;
    cursor: not-allowed;
    text-decoration: line-through;
}
.rtc-tf--off:hover { background: none; border-color: var(--color-border); color: inherit; }

/* ── Dải mức giá dạng số (Entry / Cắt lỗ / Mục tiêu / R:R) ────── */
/* Thay dải mức của ba popup cũ. Dựng từ chính `_levelTags` nên luôn khớp nhãn trên biểu đồ. */
.rtc-levels {
    display: none;                       /* JS bật khi có mức, tránh chừa khoảng trống */
    flex-wrap: wrap;
    gap: var(--space-xs);
    padding: 0 var(--space-md) var(--space-xs);
}
.rtc-lv-pill {
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
    padding: 2px 8px;
    border-radius: var(--border-radius-full);
    border: 1px solid color-mix(in srgb, var(--c) 45%, transparent);
    background: color-mix(in srgb, var(--c) 12%, transparent);
    font-size: var(--font-size-2xs);
    font-variant-numeric: tabular-nums;
}
.rtc-lv-pill b { color: var(--c); font-size: var(--font-size-xs); }
.rtc-lv-lbl { color: var(--color-text-muted); }
.rtc-lv-rr { --c: var(--color-accent-primary); }

/* Nguồn dữ liệu — hai nguồn khác độ tươi, phải nói ra chứ đừng để đoán */
.rtc-src {
    font-size: var(--font-size-2xs);
    color: var(--color-text-muted);
    margin-left: var(--space-sm);
    white-space: nowrap;
}

/* ── Score bar ────────────────────────────────────────────────── */
.rtc-scorebar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 16px;
    border-bottom: 1px solid var(--color-border, rgba(148,163,184,0.10));
    flex-shrink: 0;
    flex-wrap: wrap;
    min-height: 24px;
}
.rtc-sc-chip {
    font-size: var(--font-size-xs);
    font-weight: 700;
    padding: 1px 7px;
    border-radius: var(--border-radius-sm);
    border: 1px solid;
    letter-spacing: 0.03em;
    white-space: nowrap;
}
.rtc-sc-link {
    margin-left: auto;
    background: transparent;
    border: none;
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: var(--color-accent-primary);
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
}
.rtc-sc-link:hover { text-decoration: underline; }
.rtc-sc-analyze {
    background: transparent;
    border: 1px solid #a78bfa;
    border-radius: var(--border-radius-sm);
    color: #a78bfa;
    font-size: var(--font-size-xs);
    font-weight: 700;
    padding: 1px 8px;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.15s;
}
.rtc-sc-analyze:hover:not(:disabled) { background: rgba(167,139,250,0.12); }
.rtc-sc-analyze:disabled { opacity: 0.6; cursor: default; }

/* ── Legend ───────────────────────────────────────────────────── */
.rtc-legend {
    display: flex;
    gap: 12px;
    padding: 4px 16px;
    font-size: var(--font-size-xs);
    font-weight: 600;
    flex-shrink: 0;
    flex-wrap: wrap;
    color: var(--color-text-secondary);
    min-height: 22px;
}

/* ── Chart body ───────────────────────────────────────────────── */
.rtc-body {
    flex: 1;
    position: relative;
    overflow: hidden;
    min-height: 0;
    display: flex;   /* panes (trái) + panel danh sách (phải) */
}
.rtc-loading {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-secondary);
    font-size: var(--font-size-base);
}

/* ── 2 panes: price+vol (74%) / oscillator (26%) ─────────────── */
.rtc-panes {
    display: flex;
    flex-direction: column;
    height: 100%;
    flex: 1;
    min-width: 0;   /* panel danh sách mở thì panes co lại, không tràn */
    display: none;  /* hidden until data loads */
}
.rtc-pane { width: 100%; overflow: hidden; }

/* ── Panel danh sách (Theo dõi / VN30 / VN100 / ngành) ───────── */
.rtc-side {
    width: 240px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    border-left: 1px solid var(--color-border);
    background: var(--color-bg-secondary);
    position: relative;   /* đè lên .rtc-loading (absolute, đứng TRƯỚC trong DOM) */
}
.rtc-side[hidden] { display: none; }
.rtc-side-sel {
    margin: var(--space-xs);
    padding: 5px var(--space-xs);
    background: var(--color-bg-primary);
    color: var(--color-text-primary);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-sm);
    font-size: var(--font-size-xs);
    min-width: 0;
}
.rtc-side-note {
    padding: 0 var(--space-xs) var(--space-xs);
    font-size: var(--font-size-2xs);
    color: var(--color-text-muted);
}
.rtc-side-list { flex: 1; overflow-y: auto; min-height: 0; }
.rtc-side-row {
    display: flex;
    align-items: baseline;
    gap: 6px;
    padding: 5px var(--space-xs);
    font-size: var(--font-size-xs);
    border-bottom: 1px solid var(--color-border-light);
    cursor: pointer;
}
.rtc-side-row:hover { background: var(--color-bg-tertiary); }
.rtc-side-row.on {
    background: var(--color-accent-bg);
    box-shadow: inset 3px 0 0 var(--color-accent-primary);   /* vạch trái = mã đang xem */
}
.rtc-side-row.on .rtc-side-sym { color: var(--color-accent-primary); }
.rtc-side-sym { flex: 1; font-weight: 700; color: var(--color-text-primary); }
.rtc-side-px  { font-variant-numeric: tabular-nums; color: var(--color-text-secondary); }
.rtc-side-pct { width: 58px; text-align: right; font-variant-numeric: tabular-nums; color: var(--color-text-muted); }
.rtc-side-pct.up { color: var(--color-positive); }
.rtc-side-pct.dn { color: var(--color-negative); }
.rtc-side-empty {
    padding: var(--space-md) var(--space-sm);
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}
/* Nhúng trong trang PHÂN TÍCH CP + màn hẹp: không đủ chỗ cho panel */
.rtc-embed .rtc-side, .rtc-embed #rtcSideBtn { display: none; }
@media (max-width: 768px) {
    .rtc-side, #rtcSideBtn { display: none; }
}

/* Price pane chứa cả candles lẫn volume overlay */
.rtc-pane-price {
    flex: 74;
    position: relative;   /* neo cho .rtc-lvl-tag định vị tuyệt đối theo priceToCoordinate */
    border-bottom: 1px solid var(--color-border, rgba(148,163,184,0.12));
}
.rtc-pane-osc { flex: 26; }

/* Nhãn "Tên: Giá (+%)" mỗi mức giá hệ thống — ĐÚNG cơ chế tab Mẫu hình (.cp-lvl-tag):
   định vị theo tọa độ giá thật (priceToCoordinate), KHÔNG dùng axis label của thư viện. */
.rtc-lvl-tag {
    font-size: var(--font-size-xs); font-weight: 600; padding: 1px 6px; border-radius: var(--border-radius-sm);
    white-space: nowrap; pointer-events: none; z-index: 4; line-height: 1.4;
}

/* Khi không có oscillator: price chiếm 100% */
.rtc-panes.no-osc .rtc-pane-price { flex: 1; border-bottom: none; }
.rtc-panes.no-osc .rtc-pane-osc   { display: none; }

/* ── Legend / crosshair info bar ─────────────────────────────── */
/* Indicator legend (static) */
.rtc-leg-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--c, var(--color-text-muted));
}
.rtc-leg-item::before {
    content: '▬';
    font-size: 0.85em;
}

/* Crosshair OHLCV info (dynamic) */
.rtc-ci-time {
    color: var(--color-text-secondary);
    font-size: var(--font-size-xs);
    flex-shrink: 0;
}
.rtc-ci-sep {
    width: 1px;
    height: 12px;
    background: var(--color-border, rgba(148,163,184,0.25));
    flex-shrink: 0;
}
.rtc-ci-kv {
    display: inline-flex;
    align-items: baseline;
    gap: 3px;
    white-space: nowrap;
    color: var(--color-text-secondary);
    font-size: var(--font-size-xs);
}
.rtc-ci-kv b {
    font-weight: 700;
    color: var(--color-text-primary);
    font-size: var(--font-size-sm);
    font-variant-numeric: tabular-nums;
}
.rtc-ci-kv em {
    font-style: normal;
    font-size: var(--font-size-xs);
    font-weight: 600;
}
/* Vol % highlight */
.rtc-ci-hi b { color: var(--color-positive); }
.rtc-ci-lo b { color: var(--color-negative); }

/* ── Floating trigger button ──────────────────────────────────── */
.rtc-fab {
    position: fixed;
    bottom: 90px;          /* above AI Advisor FAB */
    right: 18px;
    z-index: 8000;
    width: 42px; height: 42px;
    border-radius: 50%;
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border, rgba(148,163,184,0.2));
    box-shadow: 0 4px 14px rgba(0,0,0,0.3);
    cursor: pointer;
    font-size: var(--font-size-lg);
    display: flex; align-items: center; justify-content: center;
    transition: transform 0.15s, box-shadow 0.15s;
}
.rtc-fab:hover {
    transform: scale(1.08);
    box-shadow: 0 6px 20px rgba(0,0,0,0.4);
}

/* ── Mobile ───────────────────────────────────────────────────── */
@media (max-width: 600px) {
    .rtc-modal {
        width: 100vw;
        height: 100dvh;
        border-radius: 0;
        border: none;
    }
    .rtc-tf-row, .rtc-sys-row { gap: 3px; }
    .rtc-tf, .rtc-sys { font-size: var(--font-size-xs); padding: 3px 7px; }
    .rtc-fab { bottom: 76px; right: 12px; width: 38px; height: 38px; font-size: var(--font-size-base); }
}

/* ── Light mode ───────────────────────────────────────────────── */
[data-theme="light"] .rtc-modal {
    background: var(--color-bg-secondary);
    box-shadow: 0 20px 60px rgba(0,0,0,0.18);
}
[data-theme="light"] .rtc-input { background: var(--color-bg-primary); color: var(--color-text-primary); }
[data-theme="light"] .rtc-fab   { background: var(--color-bg-secondary); }

/* ── Chế độ NHÚNG (trang PHÂN TÍCH CP) ───────────────────────────
   Cùng bộ vẽ với modal, chỉ đổi chỗ đứng: `#rtcOverlay` được đổi cha vào trong trang.
   Vì vậy phải gỡ hết nét "phủ toàn màn hình" — fixed/inset/nền đen/z-index — nếu không
   nó vẫn phủ lên trang dù đã nằm trong luồng nội dung. */
.rtc-overlay.rtc-embed {
    position: static;
    inset: auto;
    background: none;
    z-index: auto;
    display: block;
    opacity: 1;
    pointer-events: auto;
    transition: none;
}
.rtc-embed .rtc-modal {
    width: 100%;
    height: clamp(420px, 62vh, 680px);
    box-shadow: none;
}
/* Nút đóng và ô nhập mã là thao tác CỦA MODAL. Nhúng thì mã do trang quyết định —
   để lại ô nhập sẽ có hai nguồn sự thật cho "đang xem mã nào". */
.rtc-embed .rtc-close,
.rtc-embed .rtc-search { display: none; }

/* Toàn màn hình vẫn giữ: phần tử được nâng lên fixed nên không bị vùng chứa cắt */
.rtc-embed .rtc-modal.fs { position: fixed; z-index: 99999; }

@media (max-width: 768px) {
    .rtc-embed .rtc-modal { height: clamp(360px, 70vh, 520px); }
}