.svision .svision-sub {
    color: var(--text-muted);
    font-size: 15px;
}
.svision-sub-toggle {
    background: none;
    border: none;
    padding: 0;
    margin-top: 4px;
    color: #f5a504;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}
.svision-sub-toggle[hidden] { display: none; }

/* Dải nhắc nâng cấp Pro */
.svision-pro-note {
    display: inline-flex;
    align-self: flex-start;   /* trong flex column .svision-hero-left: không giãn full chiều rộng */
    align-items: center;
    gap: 8px;
    margin: 14px 0 4px;
    padding: 8px 14px;
    border-radius: 10px;
    background: var(--bg-button-chart);
    color: var(--text-main);
    font-size: 14px;
    cursor: pointer;
    border: 1px dashed var(--border-main);
}
.svision-pro-note svg { color: #f5a504; }
.svision-pro-note strong { color: #f5a504; }

/* ── Hero: header trái + showcase "lãi đậm" phải ─────────────────────────── */
.svision-hero { display: flex; flex-wrap: wrap; align-items: stretch; gap: 20px; }
.svision-hero-left { flex: 1 1 620px; min-width: 0; display: flex; flex-direction: column; }

/* Panel showcase */
.sv-hotwins {
    flex: 1 1 660px;
    min-width: 0;
    align-self: center;
    overflow: hidden;
}
.sv-hotwins-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.sv-hotwins-fire { font-size: 22px; line-height: 1; filter: drop-shadow(0 0 6px rgba(245, 165, 4, 0.5)); animation: sv-fire 1.6s ease-in-out infinite; }
@keyframes sv-fire { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-2px) rotate(3deg); } }
.sv-hotwins-title { font-size: 15px; font-weight: 700; color: var(--text-main); line-height: 1.2; }
.sv-hotwins-sub { font-size: 12px; color: var(--text-muted); margin-top: 2px; }

/* Marquee cuộn ngang bằng JS scrollLeft — hover để dừng, kéo chuột để lướt */
.sv-hotwins-body {
    overflow-x: auto;
    overflow-y: hidden;
    cursor: grab;
    scrollbar-width: none;   /* ẩn scrollbar (Firefox) */
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.sv-hotwins-body::-webkit-scrollbar { display: none; }   /* ẩn scrollbar (WebKit) */
.sv-hotwins-body.grabbing { cursor: grabbing; user-select: none; }
.sv-hotwins-body.grabbing .sv-hotwin:hover { transform: none; }   /* đang kéo thì đừng nhấc card */
.sv-hotwins-track { display: flex; gap: 10px; width: max-content; }

/* Card 1 tín hiệu lãi đậm */
.sv-hotwin {
    flex: 0 0 auto;
    width: 152px;
    padding: 9px 11px;
    border-radius: 10px;
    background: var(--bg-box-white);
    border: 1px solid var(--border-main);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.sv-hotwin:hover { transform: translateY(-4px); }
.sv-hotwin-head { display: flex; align-items: center; gap: 6px; }
.sv-hotwin-rank {
    flex: 0 0 auto; width: 18px; height: 18px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 700; color: #fff; background: var(--text-muted);
}
.sv-hotwin-ticker { font-size: 15px; font-weight: 700; color: var(--text-main); letter-spacing: .3px; }
.sv-hotwin-profit { font-size: 20px; font-weight: 600; color: #25a549; margin: 3px 0 4px; text-shadow: 0 0 12px rgba(37, 165, 73, 0.25); }
.sv-hotwin-meta { font-size: 11px; color: var(--text-muted); white-space: nowrap; }
.sv-hotwin-days { font-size: 11px; color: var(--text-muted); margin-top: 1px; }
/* Huy chương top 3 */
.sv-hotwin--1 { border-left-color: #f5a504; }
.sv-hotwin--1 .sv-hotwin-rank { background: linear-gradient(135deg, #ffcf3f, #f5a504); }
.sv-hotwin--2 .sv-hotwin-rank { background: linear-gradient(135deg, #cfd6dd, #9aa4ad); }
.sv-hotwin--3 .sv-hotwin-rank { background: linear-gradient(135deg, #e0a271, #c17a3f); }

/* Cards thống kê */
.svision-stats {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 14px;
    margin: 16px 0;
}
.svision-stat-card {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 14px 16px;
    background: var(--bg-box-white);
    border: 1px solid var(--border-main);
    border-radius: 10px;
}
.sv-stat-label { font-size: 13px; color: var(--text-muted); }
.sv-stat-value { font-size: 22px; font-weight: 600; color: var(--text-main); }
.sv-stat-value.sv-pos { color: #7cb302; }
.sv-stat-value.sv-neg { color: #cf1421; }

/* Chart */
.svision-charts-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    margin-bottom: 18px;
}
.svision-charts-row .svision-chart-card { margin-bottom: 0; }
.svision-chart-card {
    position: relative;
    background: var(--bg-box-white);
    border: 1px solid var(--border-main);
    border-radius: 10px;
    padding: 14px 14px 8px;
    margin-bottom: 18px;
    min-width: 0;  /* cho phép chart co trong grid, tránh tràn */
}
.svision-chart-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.svision-chart-tools { display: inline-flex; align-items: center; gap: 12px; }
.sv-period-btns { display: inline-flex; gap: 4px; background-color: var(--bg-button-chart); padding: 3px; border-radius: 10px; }
.sv-period-btns button {
    background-color: initial;
    border: none;
    color: var(--text-button-chart);
    font-size: 13px;
    padding: 3px 9px;
    border-radius: 7px;
    cursor: pointer;
    transition: background-color 0.15s;
}
.sv-period-btns button.active { background-color: var(--bg-box-white); color: var(--text-main); }
.svision-chart-head h3 { font-size: 17px; font-weight: 600; color: var(--text-main); margin: 4px 0 10px; }
.svision-chart-head h3 span { font-size: 13px; font-weight: 400; color: var(--text-muted); }
.svision-chart-card .signal-chart { width: 100%; height: 420px; }
.svision-chart-card .save-chart { cursor: pointer; color: var(--text-muted); }
.svision-chart-card .save-chart:hover { color: #f5a504; }

/* Bộ lọc */
.svision-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}
.sv-filter-search { position: relative; }
/* Bộ lọc khóa (non-Pro): control disabled làm mờ + lớp phủ bắt click mở popup nâng cấp (giống ar-select-lock) */
.svision-filters .sv-filter-lock { position: absolute; inset: 0; z-index: 5; cursor: pointer; border-radius: 8px; }
.svision-filters input:disabled,
.svision-filters select:disabled { opacity: .6; cursor: pointer; }
#sv-ticker-input {
    height: 38px;
    width: 220px;
    max-width: 60vw;
    padding: 0 12px;
    border: 1px solid var(--border-main);
    border-radius: 8px;
    background: var(--bg-box-white);
    color: var(--text-main);
}
.sv-suggest {
    display: none;
    position: absolute;
    z-index: 50;
    top: 42px;
    left: 0;
    width: 280px;
    max-width: 80vw;
    max-height: 260px;
    overflow-y: auto;
    background: var(--bg-box-white);
    border: 1px solid var(--border-main);
    border-radius: 8px;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.12);
}
.sv-suggest-item { padding: 8px 12px; cursor: pointer; font-size: 14px; color: var(--text-main); }
.sv-suggest-item span { color: var(--text-muted); font-size: 13px; }
.sv-suggest-item:hover { background: var(--bg-button-chart); }

/* Bảng */
.svision-table { width: 100%; max-height: 640px; overflow: auto; }
.svision-table::-webkit-scrollbar { width: 3px; height: 3px; }
.svision-table table thead { position: sticky; top: -1px; z-index: 10; }
.svision-table table thead td {
    background-color: var(--bg-thead);
    font-weight: 600;
    border: 1px solid var(--border-main);
    padding: 12px 8px;
    text-align: center;
    white-space: nowrap;
}
/* Cột sort: con trỏ + hover nền + icon mũi tên đôi (giống table-scrollable financial-reports) */
.svision-table table thead td.sort-col { cursor: pointer; transition: background-color 0.2s ease; }
.svision-table table thead td.sort-col:hover { background-color: var(--border-main); }
.svision-table .sort-col svg path { fill: #999999; transition: fill 0.2s ease; }
.svision-table .sort-col.sort-asc svg path:first-child { fill: #666666; }
.svision-table .sort-col.sort-desc svg path:last-child { fill: #666666; }
.svision-table table tr td {
    min-width: 90px;
    padding: 9px 14px;
    text-align: center;
    white-space: nowrap;
}
.svision-table table tr td.sv-stt { min-width: 40px; }
.svision-table table tr td.sv-symbol { min-width: 140px; text-align: center; position: sticky; left: 0; }
.svision-table td.sv-symbol a { display: inline-flex; align-items: center; gap: 8px; color: var(--text-main); font-weight: 600; text-decoration: none; transition: color .2s; }
.svision-table td.sv-symbol a:hover { color: #f5a504; }
.svision-table td.sv-symbol img { width: 30px; height: 30px; border-radius: 50%; padding: 3px; background: #efefef; object-fit: contain; }
.svision-table td.sv-price { font-weight: 600; }
.svision-table .sv-dash { color: var(--text-muted); font-weight: 400; }
.svision-table td.sv-profit { font-weight: 600; }
.sv-stars { display: inline-flex; align-items: center; gap: 3px; font-weight: 600; }
/* Đánh giá: điểm chữ A/B/C map 1–9 -> thanh cường độ 9 vạch, tô tới mức điểm.
   Mỗi vạch 1 màu theo thang đỏ->xanh; vạch sáng cao nhất phản ánh mức điểm. */
.sv-bars { display: inline-flex; align-items: center; gap: 2px; vertical-align: middle; }
.sv-bar { width: 3px; height: 13px; border-radius: 1px; background: var(--border-main); }
.sv-bar.on:nth-child(1) { background: #e11900; }
.sv-bar.on:nth-child(2) { background: #ef5714; }
.sv-bar.on:nth-child(3) { background: #f5811a; }
.sv-bar.on:nth-child(4) { background: #f4a900; }
.sv-bar.on:nth-child(5) { background: #ecc400; }
.sv-bar.on:nth-child(6) { background: #c2c200; }
.sv-bar.on:nth-child(7) { background: #90b500; }
.sv-bar.on:nth-child(8) { background: #57a614; }
.sv-bar.on:nth-child(9) { background: #1f9e4a; }
.sv-vote-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 6px;
    background: var(--bg-button-chart);
    font-size: 13px;
}
.sv-badge { display: inline-block; padding: 2px 10px; border-radius: 20px; font-size: 13px; font-weight: 500; }
.sv-badge-open { background: rgba(245, 165, 4, 0.15); color: #f5a504; }   /* Nắm giữ */
.sv-badge-closed { background: rgba(124, 179, 2, 0.15); color: #5d8a02; } /* Chốt lời */
.sv-badge-loss { background: rgba(207, 20, 33, 0.12); color: #cf1421; }   /* Cắt lỗ */
/* KHÔNG set color cho .svision-locked-row td (icon khóa đã muted qua .text-muted của span);
   nếu set sẽ đè .positive/.negative -> mất màu cột Lợi nhuận của lệnh nắm giữ */
.svision-locked-row .svision-lock:hover { color: #f5a504; }

/* ── Nút chuyển dạng bảng / thẻ ─────────────────────────────────────────────── */
.sv-view-toggle { display: inline-flex; gap: 3px; background: var(--bg-button-chart); padding: 3px; border-radius: 10px; }
.sv-view-toggle button {
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 30px; padding: 0; border: none; border-radius: 7px;
    background: none; color: var(--text-button-chart); cursor: pointer; transition: background-color .15s, color .15s;
}
.sv-view-toggle button.active { background: var(--bg-box-white); color: var(--text-main); }
.sv-view-toggle button:hover:not(.active) { color: var(--text-main); }

/* ── Dạng thẻ (card) ────────────────────────────────────────────────────────── */
.svision-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.sv-cards-empty { grid-column: 1 / -1; }
.sv-card {
    display: flex; flex-direction: column;
    min-width: 0;   /* grid item: cho phép co nhỏ, tránh tràn viewport trên mobile */
    padding: 18px;
    background: var(--bg-box-white); border: 1px solid var(--border-main); border-radius: 14px;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.sv-card:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(0, 0, 0, .07); border-color: rgba(13, 110, 253, .35); }

/* Đầu thẻ: logo + (mã · sao / công ty) bên trái · badge bên phải */
.sv-card-head { display: flex; align-items: flex-start; gap: 10px; }
.sv-card-logo { flex-shrink: 0; width: 38px; height: 38px; border-radius: 50%; background: #f3f4f6; display: inline-flex; align-items: center; justify-content: center; overflow: hidden; }
.sv-card-logo img { width: 100%; height: 100%; object-fit: contain; padding: 3px; }
.sv-card-logo--lock { color: var(--text-muted); }
.sv-card-logo--lock .svision-lock svg { width: 18px; height: 18px; }
.sv-card-names { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.sv-card-titlerow { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.sv-card-ticker { font-size: 17px; font-weight: 700; letter-spacing: .3px; color: var(--text-main); line-height: 1.25; text-decoration: none; }
.sv-card-ticker:hover { color: #0d6efd; }
.sv-card-company { font-size: 12.5px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.sv-card-sym { display: inline-flex; align-items: center; gap: 10px; min-width: 0; flex: 1; }
.sv-card-sym--lock { color: var(--text-muted); }
.sv-card-mask { letter-spacing: 3px; }
.sv-card-wl { display: inline-flex; padding: 0; border: none; background: none; color: var(--text-muted); cursor: pointer; flex-shrink: 0; }
.sv-card-wl:hover { color: #f5a504; }
.sv-card-wl.btn-wl-add-row--in-wl { color: #f5a504; }

/* Badge trạng thái: góc phải header */
.sv-card-head > .sv-badge { margin-left: auto; align-self: flex-start; flex-shrink: 0; }

/* Chi tiết mua/bán: lưới 2 cột + cột lợi nhuận bên phải (span 2 hàng) */
.sv-card-body {
    display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 2fr) minmax(52px, 1fr); gap: 12px 14px;
    margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border-main);
}
/* Lợi nhuận: số lớn ở cột 3, canh giữa theo chiều dọc (màu theo lời/lỗ/đứng giá) */
.sv-card-profit { grid-column: 3; grid-row: 1 / span 2; align-self: center; text-align: center; min-width: 0; font-size: 22px; line-height: 1.15; letter-spacing: -.3px; }
.sv-card-profit .svision-lock svg { width: 20px; height: 20px; }
.sv-card-cell { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sv-card-cell > span { font-size: 12px; color: var(--text-muted); }
.sv-card-cell > b { font-size: 14px; color: var(--text-main); font-weight: 600; }
.sv-card-cell .svision-lock svg { width: 14px; height: 14px; }

/* Đánh giá: thanh meter độ tin cậy */
.sv-card-rating { display: flex; align-items: center; gap: 10px; margin-top: 16px; }
.sv-card-rating-lbl { font-size: 12.5px; color: var(--text-muted); flex-shrink: 0; }
.sv-card-info { display: inline-flex; margin-left: 3px; color: var(--text-muted); vertical-align: middle; cursor: help; }
.sv-card-info svg { vertical-align: -1px; }
.sv-meter { flex: 1; height: 7px; border-radius: 6px; background: var(--border-main); overflow: hidden; }
.sv-meter-fill { display: block; height: 100%; border-radius: 6px; transition: width .35s ease; }
.sv-meter-lvl1 { background: #e11900; }
.sv-meter-lvl2 { background: #f4a900; }
.sv-meter-lvl3 { background: #1f9e4a; }
.sv-card-rating-val { font-size: 13px; font-weight: 700; color: var(--text-main); flex-shrink: 0; min-width: 30px; text-align: right; }

.sv-card--locked .sv-card-body { opacity: .85; }

/* Phân trang dùng component chung .pagination-container (style global như stock-screener) */
.svision-paginate { margin-top: 16px; }

@media (max-width: 992px) {
    .svision-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }  /* tablet: 3/hàng */
    .svision-charts-row { grid-template-columns: 1fr; }  /* 2 chart xuống 1 cột */
    .sv-hotwins { flex-basis: 100%; align-self: stretch; }  /* showcase xuống dưới header */
    .svision-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }  /* thẻ: 2/hàng */
    .sv-card { padding: 15px; }
    .sv-card-body { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1.6fr) minmax(48px, 1fr); gap: 10px 10px; }  /* thẻ hẹp: cột LN rộng hơn chút */
    .sv-card-profit { font-size: 20px; }  /* thu nhỏ số cho vừa cột */
}
@media (max-width: 576px) {
    .svision-cards { grid-template-columns: minmax(0, 1fr); }  /* thẻ: 1/hàng trên mobile (min 0 tránh tràn) */
}
@media (prefers-reduced-motion: reduce) {
    .sv-hotwins-track { animation: none; }
    .sv-hotwins-body { overflow-x: auto; }
    .sv-hotwins-fire { animation: none; }
}
@media (max-width: 768px) {
    .svision-chart-card .signal-chart { height: 340px; }
    .sv-stat-value { font-size: 19px; }
    /* Màn nhỏ: giới hạn mô tả 3 dòng + "…" (bấm "Xem thêm" -> .expanded để mở full) */
    .svision .svision-sub { font-size: 14px; }
    .svision .svision-sub:not(.expanded) {
        display: -webkit-box;
        -webkit-line-clamp: 3;
        line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
}
@media (max-width: 576px) {
    .svision-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }  /* mobile: 2/hàng */
}
@media (max-width: 480px) {
    .svision-table table tr td { padding: 8px; }
}