/* RRG (Relative Rotation Graph — JdK). Namespace .rrgj-* (KHÔNG đụng .rrg-* Minervini). */

.rrgj-page { padding: 4px 2px 8px; }
.rrgj-title { margin: 0 0 4px; font-size: 1.02rem; color: var(--color-text-primary); }
.rrgj-note { font-size: var(--font-size-xs); color: var(--color-text-secondary); max-width: 660px; line-height: 1.5; }

/* Breadcrumb */
.rrgj-crumb { display: flex; align-items: center; gap: 4px; margin: 8px 0 10px; flex-wrap: wrap; }
.rrgj-cb {
    padding: 4px 10px; font-size: var(--font-size-sm); font-weight: 600; cursor: pointer;
    background: var(--color-bg-secondary); color: var(--color-text-secondary);
    border: 1px solid var(--color-border); border-radius: var(--border-radius-sm);
}
.rrgj-cb.on { background: var(--color-accent-primary); color: var(--color-on-accent); border-color: transparent; cursor: default; }
.rrgj-cx { color: var(--color-text-secondary); opacity: .6; }

/* Bố cục 2 cột — chart thu ~2/3, rail chiếm phần còn lại */
.rrgj-body { display: flex; gap: 14px; align-items: flex-start; }
.rrgj-rail {
    flex: 0 0 250px; max-height: 620px; overflow-y: auto;
    border: 1px solid var(--color-border); border-radius: var(--border-radius-md);
    background: var(--color-bg-secondary); padding: 10px;
}
.rrgj-main { flex: 1 1 auto; max-width: 66%; min-width: 0; }   /* biểu đồ = 2/3 */
@media (max-width: 900px) {
    .rrgj-body { flex-direction: column; }
    .rrgj-main { max-width: 100%; width: 100%; }
    .rrgj-rail { flex: none; width: 100%; max-height: 300px; }
}

/* Rail nội dung */
.rrgj-rhead { font-size: var(--font-size-sm); font-weight: 700; color: var(--color-text-primary); margin-bottom: 6px; }
.rrgj-rhead2 { font-size: var(--font-size-xs); font-weight: 700; color: var(--color-text-secondary); margin: 10px 0 4px; text-transform: uppercase; letter-spacing: .3px; }
.rrgj-all, .rrgj-vn30f { display: flex; align-items: center; gap: 6px; font-size: var(--font-size-sm); color: var(--color-text-secondary); margin-bottom: 6px; cursor: pointer; }
.rrgj-list { display: flex; flex-direction: column; gap: 1px; }
.rrgj-row { display: flex; align-items: center; gap: 6px; padding: 2px 2px; border-radius: var(--border-radius-sm); }
.rrgj-row:hover { background: var(--color-bg-tertiary); }
.rrgj-row input[type=checkbox] { cursor: pointer; }
.rrgj-dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; background: var(--rrgj-c); }
.rrgj-name {
    flex: 1 1 auto; text-align: left; background: none; border: none; cursor: pointer;
    font-size: var(--font-size-sm); color: var(--color-text-primary); padding: 1px 2px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rrgj-name:hover { color: var(--color-accent-primary); text-decoration: underline; }
.rrgj-val { font-size: var(--font-size-xs); color: var(--color-text-secondary); flex: 0 0 auto; opacity: .75; }
.rrgj-val-sec { max-width: 88px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Chip sức mạnh TUYỆT ĐỐI (ROC giá + xu hướng) — bổ sung cho trục tương đối của RRG */
.rrgj-str { font-size: var(--font-size-xs); font-weight: 700; flex: 0 0 auto; white-space: nowrap; }
.rrgj-str-up { color: var(--color-positive); }
.rrgj-str-down { color: var(--color-negative); }
.rrgj-str-side { color: var(--color-text-secondary); opacity: .8; }
.rrgj-vn30 { font-size: var(--font-size-2xs); background: var(--color-accent-primary); color: var(--color-on-accent); border-radius: var(--border-radius-sm); padding: 0 3px; margin-left: 3px; vertical-align: middle; }
.rrgj-hint { font-size: var(--font-size-xs); color: var(--color-text-secondary); margin-top: 8px; line-height: 1.45; opacity: .85; }
.rrgj-muted { font-size: var(--font-size-xs); color: var(--color-text-secondary); opacity: .7; }

.rrgj-focusinfo { font-size: var(--font-size-xs); color: var(--color-text-secondary); margin-bottom: 6px; }
.rrgj-up {
    display: block; width: 100%; margin-bottom: 8px; padding: 5px 8px; font-size: var(--font-size-xs); font-weight: 600;
    cursor: pointer; background: var(--color-bg-tertiary); color: var(--color-text-primary);
    border: 1px solid var(--color-border); border-radius: var(--border-radius-sm); text-align: left;
}
.rrgj-search {
    width: 100%; box-sizing: border-box; padding: 5px 8px; font-size: var(--font-size-sm); margin-bottom: 6px;
    background: var(--color-bg-secondary); color: var(--color-text-primary);
    border: 1px solid var(--color-border); border-radius: var(--border-radius-sm);
}
.rrgj-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.rrgj-chip {
    font-size: var(--font-size-xs); padding: 2px 8px; border-radius: var(--border-radius-md); cursor: pointer;
    background: var(--color-accent-primary); color: var(--color-on-accent);
}
.rrgj-chip:hover { opacity: .8; }

/* Hướng dẫn (details, ẩn mở) */
.rrgj-guide { border: 1px solid var(--color-border); border-radius: var(--border-radius-md); background: var(--color-bg-secondary); margin: 6px 0 10px; overflow: hidden; }
.rrgj-guide > summary {
    padding: 8px 14px; cursor: pointer; font-size: var(--font-size-sm); font-weight: 600;
    color: var(--color-text-secondary); list-style: none; user-select: none;
}
.rrgj-guide > summary::-webkit-details-marker { display: none; }
.rrgj-guide[open] > summary { border-bottom: 1px solid var(--color-border); }
.rrgj-guide-body { padding: 10px 14px 4px; font-size: var(--font-size-sm); color: var(--color-text-secondary); line-height: 1.6; }
.rrgj-guide-body p { margin: 0 0 8px; }
.rrgj-gk { display: inline-block; padding: 0 6px; border-radius: var(--border-radius-sm); font-weight: 700; color: var(--rrgj-c); background: color-mix(in srgb, var(--rrgj-c) 14%, transparent); }

/* Control bar (khung ngày/tuần + đuôi/điểm cuối) */
.rrgj-ctrls { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.rrgj-cgrp { display: inline-flex; align-items: center; gap: 6px; }
.rrgj-clbl { font-size: var(--font-size-xs); color: var(--color-text-secondary); }
.rrgj-toggle { display: inline-flex; border: 1px solid var(--color-border); border-radius: var(--border-radius-md); overflow: hidden; }
.rrgj-tbtn {
    padding: 5px 12px; font-size: var(--font-size-xs); font-weight: 600; cursor: pointer;
    background: var(--color-bg-secondary); color: var(--color-text-secondary);
    border: none; border-right: 1px solid var(--color-border);
}
.rrgj-tbtn:last-child { border-right: none; }
.rrgj-tbtn.active { background: var(--color-accent-primary); color: var(--color-on-accent); }

/* Canvas */
.rrgj-sub { font-size: var(--font-size-xs); color: var(--color-text-secondary); margin-bottom: 6px; }
.rrgj-canvas { width: 100%; background: var(--color-bg-secondary); border: 1px solid var(--color-border); border-radius: var(--border-radius-md); padding: 6px; }
.rrgj-svg { width: 100%; height: auto; display: block; }
.rrgj-empty { padding: 40px; text-align: center; color: var(--color-text-secondary); }

/* Màu 4 góc → set biến --rrgj-c cho fill/stroke/dot */
.rrgj-leading   { --rrgj-c: var(--color-positive); }
.rrgj-weakening { --rrgj-c: var(--color-neutral); }
.rrgj-lagging   { --rrgj-c: var(--color-negative); }
.rrgj-improving { --rrgj-c: var(--color-accent-primary); }
/* Màu theo SỨC MẠNH TUYỆT ĐỐI (trend) — dùng cho điểm/đuôi + swatch legend */
.rrgj-t-up   { --rrgj-c: var(--color-positive); }
.rrgj-t-side { --rrgj-c: var(--color-neutral); }
.rrgj-t-down { --rrgj-c: var(--color-negative); }

.rrgj-q-bg { fill: var(--rrgj-c); opacity: .07; }
/* Card phụ tên vùng (đóng khung, tiếng Việt nổi bật) */
.rrgj-qcard { pointer-events: none; }
.rrgj-qcard rect { fill: var(--rrgj-c); fill-opacity: .13; stroke: var(--rrgj-c); stroke-opacity: .6; stroke-width: 1.2; }
.rrgj-qc-vi { fill: var(--rrgj-c); font-size: var(--font-size-sm); font-weight: 800; letter-spacing: .6px; }
.rrgj-qc-en { fill: var(--color-text-secondary); font-size: var(--font-size-2xs); font-weight: 600; opacity: .75; }
.rrgj-axis { stroke: var(--color-text-secondary); stroke-width: 1; opacity: .5; stroke-dasharray: 4 3; }
.rrgj-axttl { fill: var(--color-text-secondary); font-size: var(--font-size-xs); opacity: .8; }

.rrgj-tail { fill: none; stroke: var(--rrgj-c); stroke-width: 1.5; opacity: .4; stroke-linejoin: round; }
.rrgj-head { fill: var(--rrgj-c); stroke: var(--color-bg-secondary); stroke-width: 1.5; cursor: pointer; }
.rrgj-head:hover { stroke: var(--color-text-primary); }
.rrgj-sec { stroke-width: 2; }                      /* ngành = hình thoi viền đậm */
.rrgj-ring { fill: none; stroke: var(--color-text-primary); stroke-width: 1.5; opacity: .5; }  /* vòng nhấn mã focus */
.rrgj-plabel { fill: var(--color-text-primary); font-size: var(--font-size-2xs); font-weight: 600; pointer-events: none; }
.rrgj-plsec { font-weight: 800; }
.rrgj-plfocus { font-size: var(--font-size-xs); font-weight: 800; }

/* Legend */
.rrgj-legend { display: flex; flex-wrap: wrap; gap: 8px 14px; margin-top: 10px; font-size: var(--font-size-xs); }
.rrgj-lgttl { color: var(--color-text-secondary); font-weight: 700; opacity: .9; }
.rrgj-lg { display: inline-flex; align-items: center; gap: 6px; color: var(--color-text-secondary); }
.rrgj-lg::before { content: ''; width: 11px; height: 11px; border-radius: var(--border-radius-sm); background: var(--rrgj-c); }
.rrgj-lg2 { color: var(--color-text-secondary); }

@media (max-width: 640px) { .rrgj-note { font-size: var(--font-size-xs); } .rrgj-plabel { font-size: var(--font-size-2xs); } }

/* Nút link chéo phễu top-down (🕯 chart nến ngành, 📊 PHÂN TÍCH CP) */
.rrgj-xlink { background: none; border: none; cursor: pointer; font-size: var(--font-size-sm); padding: 0 2px; opacity: .55; line-height: 1; flex-shrink: 0; }
.rrgj-xlink:hover { opacity: 1; }