/* ============================================================
   DIỄN BIẾN PHIÊN (.itd-*) — trang DIỄN BIẾN HÔM NAY
   Hồ sơ phiên từ tick: mua/bán chủ động, VWAP, ATC, lệnh lớn, NN
   ============================================================ */

.itd-page { display: flex; flex-direction: column; gap: 14px; }

.itd-header { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.itd-header h2 { margin: 0; font-size: var(--font-size-lg); color: var(--color-text-primary); }
.itd-meta { font-size: var(--font-size-sm); color: var(--color-text-secondary); display: inline-flex; align-items: center; gap: 5px; }

/* Chấm báo tự động cập nhật (poll mỗi phút) — nhấp nháy nhẹ khi vừa nhận bản mới */
.itd-live-dot {
    display: inline-block; width: 7px; height: 7px; border-radius: 50%;
    background: var(--color-positive); opacity: 0.55;
}
.itd-live-dot.itd-live-pulse { animation: itd-pulse 1s ease-out; }
@keyframes itd-pulse {
    0%   { opacity: 1; box-shadow: 0 0 0 0 var(--color-positive); }
    100% { opacity: 0.55; box-shadow: 0 0 0 6px transparent; }
}

/* Thay chỗ chấm xanh khi dữ liệu đứng im quá lâu. Chấm xanh nhấp nháy trong khi backend
   đã chết là kiểu hỏng đắt nhất — nhìn vẫn bình thường nên không ai đi kiểm. */
.itd-stale {
    display: inline-block;
    padding: 1px var(--space-xs);
    border-radius: var(--border-radius-sm);
    background: var(--color-neutral-bg);
    color: var(--color-neutral);
    font-size: var(--font-size-2xs);
    font-weight: 700;
    white-space: nowrap;
    cursor: help;
}

/* --- Dải card tổng hợp thị trường --- */
.itd-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 10px;
}
.itd-card {
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-md);
    padding: 10px 12px;
    min-width: 0;
}
.itd-card-wide { grid-column: span 2; }
.itd-card-label { font-size: var(--font-size-xs); color: var(--color-text-secondary); margin-bottom: 4px; }
.itd-card-value { font-size: 1.3rem; font-weight: 700; }
.itd-card-sub { font-size: var(--font-size-sm); color: var(--color-text-primary); margin-top: 3px; line-height: 1.6; }

.itd-bar { height: 5px; border-radius: var(--border-radius-sm); background: var(--color-bg-tertiary); margin-top: 6px; overflow: hidden; }
.itd-bar-fill { height: 100%; border-radius: var(--border-radius-sm); }

/* --- Màu trạng thái (chỉ qua biến) --- */
.itd-pos { color: var(--color-positive); }
.itd-neg { color: var(--color-negative); }
.itd-neu { color: var(--color-neutral); }
.itd-bg-pos { background: var(--color-positive); }
.itd-bg-neg { background: var(--color-negative); }
.itd-bg-neu { background: var(--color-neutral); }

/* --- Bảng chi tiết mã --- */
.itd-table-wrap {
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-md);
    max-height: 60vh;
    overflow: auto;
}
.itd-table { width: 100%; border-collapse: collapse; font-size: var(--font-size-sm); }
.itd-table th {
    position: sticky; top: 0; z-index: 1;
    background: var(--color-bg-tertiary);
    color: var(--color-text-secondary);
    font-size: var(--font-size-xs); text-transform: uppercase; letter-spacing: 0.03em;
    padding: 8px 10px; text-align: right; white-space: nowrap;
    cursor: pointer; user-select: none;
}
.itd-table th:hover { color: var(--color-text-primary); }
.itd-table th.itd-th-active { color: var(--color-accent-primary); }
.itd-table th:first-child, .itd-table td:first-child { text-align: left; }
.itd-table th:last-child, .itd-table td:last-child { text-align: center; }
.itd-table td {
    padding: 6px 10px; text-align: right; white-space: nowrap;
    border-top: 1px solid var(--color-border);
    color: var(--color-text-primary);
}
.itd-table tbody tr:hover { background: var(--color-bg-tertiary); }
.itd-sym { font-weight: 700; }

/* Bấm-vào-mã → biểu đồ (uỷ quyền ở #singleSectionContent, dùng chung với §2/§3) */
.itd-table tbody tr[data-sym] { cursor: pointer; }
.itd-table tbody tr[data-sym]:focus-visible { outline: 2px solid var(--color-accent-primary); outline-offset: -2px; }
.itd-table tbody tr[data-sym]:hover .itd-sym { color: var(--color-accent-primary); }
.itd-symchip {
    cursor: pointer;
    border-bottom: 1px dashed var(--color-border);
}
.itd-symchip:hover { color: var(--color-accent-primary); border-bottom-color: var(--color-accent-primary); }
.itd-symchip:focus-visible { outline: 2px solid var(--color-accent-primary); outline-offset: 2px; }

/* Specificity cao hơn ".itd-table td" (color mặc định) để quy ước tăng/giảm/đi ngang thắng */
.itd-table td.itd-pos { color: var(--color-positive); }
.itd-table td.itd-neg { color: var(--color-negative); }
.itd-table td.itd-neu { color: var(--color-neutral); }

/* --- Badge nhãn phiên (v0 — tham khảo) --- */
.itd-badge {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 999px;
    font-size: var(--font-size-xs); font-weight: 600;
    border: 1px solid var(--color-border);
    color: var(--color-text-secondary);
    background: var(--color-bg-tertiary);
}
.itd-lb-demand        { color: var(--color-positive); border-color: var(--color-positive); background: transparent; }
.itd-lb-supply        { color: var(--color-negative); border-color: var(--color-negative); background: transparent; }
.itd-lb-atc_push_up   { color: var(--color-warning); border-color: var(--color-warning); background: transparent; }
.itd-lb-atc_push_down { color: var(--color-warning); border-color: var(--color-warning); background: transparent; }
.itd-lb-churn_high_vol{ color: var(--color-accent-primary); border-color: var(--color-accent-primary); background: transparent; }

.itd-disclaimer {
    font-size: var(--font-size-xs); color: var(--color-text-secondary);
    padding: 8px 10px;
    border-left: 3px solid var(--color-warning);
    background: var(--color-bg-tertiary);
    border-radius: var(--border-radius-sm);
}

/* --- Mobile: ẩn cột không essential (xem cờ essential trong _ITD_COLUMNS), giữ Mã/C/±%/Mua CĐ/Nhãn --- */
@media (max-width: 576px) {
    .itd-card-wide { grid-column: span 1; }
    .itd-table th.itd-th-sub, .itd-table td.itd-td-sub { display: none; }
}