/**
 * CRISIS EVENT TRACKER — components
 * Namespace: .ce-*  |  Chỉ dùng CSS variables (màu categorical định nghĩa ở :root dưới).
 */
:root {
    --ce-evt-khoi_to: #dc2626;     /* khởi tố — đỏ */
    --ce-evt-bat_giu: #991b1b;     /* bắt giữ — đỏ đậm */
    --ce-evt-thanh_tra: #ea580c;   /* thanh tra — cam */
    --ce-evt-ket_luan: #7c3aed;    /* kết luận — tím */
    --ce-evt-xu_phat: #d97706;     /* xử phạt — hổ phách */
    --ce-evt-margin_cut: #2563eb;  /* cắt margin — xanh */
    --ce-evt-khac: var(--color-text-secondary);        /* khác — xám */
    --ce-iso: #22c55e;
    --ce-ele: var(--color-neutral);
    --ce-sys: var(--color-negative);
}

.ce-page { padding: var(--space-md); max-width: 1180px; margin: 0 auto; }

.ce-header { display: flex; justify-content: space-between; align-items: flex-start;
    margin-bottom: var(--space-lg); }
.ce-title { font-size: 1.35rem; font-weight: 800; color: var(--color-text-primary); margin: 0; }
.ce-sub { font-size: var(--font-size-sm); color: var(--color-text-muted); margin-top: 4px; }

.ce-block { background: var(--color-bg-secondary); border: 1px solid var(--color-border);
    border-radius: var(--border-radius-lg); padding: var(--space-md); margin-bottom: var(--space-lg); }
.ce-h2 { font-size: var(--font-size-base); font-weight: 700; color: var(--color-text-primary);
    margin: 0 0 var(--space-md); display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.ce-hint { font-size: var(--font-size-xs); font-weight: 500; color: var(--color-text-muted); }
.ce-selname { font-size: var(--font-size-sm); font-weight: 600; color: var(--color-text-secondary); }
.ce-muted, .ce-na { color: var(--color-text-muted); font-size: var(--font-size-sm); }
.ce-na { text-align: center; font-style: italic; }

/* ── B1 timeline ── */
.ce-timeline { display: flex; flex-direction: column; gap: 10px; }
.ce-lane { display: grid; grid-template-columns: 190px 1fr; align-items: center; gap: 10px; }
.ce-lane-label { font-size: var(--font-size-sm); color: var(--color-text-secondary); font-weight: 600;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ce-refbadge { font-size: var(--font-size-2xs); padding: 1px 5px; border-radius: var(--border-radius-full);
    background: var(--color-bg-tertiary); color: var(--color-text-muted); font-weight: 600; }
.ce-lane-track { position: relative; height: 30px; background: var(--color-bg-tertiary);
    border-radius: var(--border-radius-md); }
.ce-mk { position: absolute; top: 50%; transform: translate(-50%, -50%); border-radius: 50%;
    border: 2px solid var(--color-bg-secondary); cursor: pointer; padding: 0; transition: transform .12s; }
.ce-mk:hover { transform: translate(-50%, -50%) scale(1.18); }
.ce-mk--sel { box-shadow: 0 0 0 3px var(--color-text-primary); z-index: 2; }
.ce-axis { display: flex; justify-content: space-between; margin: 6px 0 0 200px;
    font-size: var(--font-size-xs); color: var(--color-text-muted); }

/* marker/dot màu theo event_type */
.ce-mk--khoi_to { background: var(--ce-evt-khoi_to); }
.ce-mk--bat_giu { background: var(--ce-evt-bat_giu); }
.ce-mk--thanh_tra { background: var(--ce-evt-thanh_tra); }
.ce-mk--ket_luan { background: var(--ce-evt-ket_luan); }
.ce-mk--xu_phat { background: var(--ce-evt-xu_phat); }
.ce-mk--margin_cut { background: var(--ce-evt-margin_cut); }
.ce-mk--khac { background: var(--ce-evt-khac); }

.ce-legend, .ce-chart-legend { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 12px;
    font-size: var(--font-size-xs); color: var(--color-text-secondary); }
.ce-lg, .ce-chart-legend span { display: inline-flex; align-items: center; gap: 5px; }
.ce-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.ce-sw { width: 14px; height: 10px; border-radius: var(--border-radius-sm); display: inline-block; }
.ce-sw--iso { background: var(--ce-iso); opacity: .85; }
.ce-sw--ele { background: var(--ce-ele); opacity: .85; }
.ce-sw--sys { background: var(--ce-sys); opacity: .85; }
.ce-sw--line { background: var(--color-accent-primary); height: 3px; }

/* ── B2/B4 tables ── */
.ce-table { width: 100%; border-collapse: collapse; font-size: var(--font-size-sm); }
.ce-table th, .ce-table td { padding: 7px 10px; text-align: right; border-bottom: 1px solid var(--color-border); }
.ce-table th:first-child, .ce-table td:first-child { text-align: left; }
.ce-table th { color: var(--color-text-muted); font-weight: 600; font-size: var(--font-size-sm);
    text-transform: uppercase; letter-spacing: .3px; }
.ce-hz { font-weight: 700; color: var(--color-text-secondary); }
.ce-excess, .ce-excess-h { background: var(--color-bg-tertiary); font-weight: 800; }
.ce-pos { color: var(--color-positive); }
.ce-neg { color: var(--color-negative); }
.ce-author { font-weight: 700; color: var(--color-text-primary); }
.ce-n b { color: var(--color-text-primary); }
.ce-note { font-size: var(--font-size-xs); color: var(--color-text-muted); margin-top: 8px; line-height: 1.5; }
/* Phase 12: bảng + biểu đồ so cơ chế FLAGSHIP */
.ce-mech-chart { margin: 4px 0 12px; }
.ce-mech-sw { width: 11px; height: 11px; border-radius: var(--border-radius-sm); display: inline-block; margin-right: 6px; vertical-align: -1px; }
.ce-table--mech td:last-child, .ce-table--mech th:last-child { text-align: left; }
/* Phase 13.0b: dự báo đang theo dõi + bằng chứng thời điểm */
.ce-h3 { font-size: var(--font-size-base); font-weight: 700; margin: 4px 0 8px; color: var(--color-text-secondary); }
.ce-table--fclive td:nth-child(-n+3), .ce-table--fclive th:nth-child(-n+3),
.ce-table--fclive td:nth-child(6), .ce-table--fclive th:nth-child(6) { text-align: left; }
.ce-prov { font-size: var(--font-size-xs); font-weight: 600; padding: 1px 6px; border-radius: var(--border-radius-sm); white-space: nowrap; }
.ce-prov--ok { background: rgba(34,197,94,.16); color: var(--ce-iso); }
.ce-prov--bad { background: rgba(239,68,68,.16); color: var(--ce-sys); }
.ce-prov--none { background: var(--color-bg-tertiary); color: var(--color-text-muted); }
.ce-evt-title { font-size: var(--font-size-sm); color: var(--color-text-secondary); margin-bottom: 10px; }
.ce-evt-title a { color: var(--color-positive); }

.ce-badge { font-size: var(--font-size-2xs); padding: 1px 6px; border-radius: var(--border-radius-full); font-weight: 700; }
.ce-badge--sm { background: rgba(245, 158, 11, .18); color: var(--ce-ele); }

/* ── B3 chart + callouts ── */
.ce-chart { width: 100%; height: 300px; }
.ce-rel { padding: 8px 12px; border-radius: var(--border-radius-md); font-size: var(--font-size-sm);
    margin-bottom: 10px; border-left: 3px solid var(--color-neutral); background: var(--color-bg-tertiary); }
.ce-rel--good { border-left-color: var(--ce-iso); }
.ce-rel--warn { border-left-color: var(--ce-ele); }
.ce-rel--bad { border-left-color: var(--ce-sys); }
.ce-rel--na { border-left-color: var(--color-neutral); }
.ce-rel b { color: var(--color-text-primary); }
.ce-rel-main { font-size: var(--font-size-base); }
.ce-rel-main b { font-size: 1.05rem; }
.ce-rel-sub { font-size: var(--font-size-xs); color: var(--color-text-muted); font-weight: 400; }
.ce-ci { font-size: var(--font-size-sm); color: var(--color-text-secondary); font-weight: 600; }
.ce-tier { font-size: var(--font-size-xs); }
.ce-anchor { font-size: var(--font-size-xs); font-weight: 700; padding: 2px 7px; border-radius: var(--border-radius-full); }
.ce-anchor--firm_event { background: rgba(34,197,94,.16); color: var(--ce-iso); }
.ce-anchor--system_event { background: rgba(37,99,235,.16); color: #2563eb; }
.ce-anchor--price { background: rgba(245,158,11,.18); color: var(--ce-ele); }
.ce-anchor--unexplained_episode { background: var(--color-bg-tertiary); color: var(--color-text-muted); }
.ce-rel-msg { font-size: var(--font-size-sm); margin-top: 3px; }
.ce-rel-lbl { font-size: var(--font-size-xs); color: var(--color-text-muted); margin-top: 4px; }
.ce-cf { font-weight: 700; text-transform: uppercase; font-size: var(--font-size-xs); padding: 1px 6px;
    border-radius: var(--border-radius-full); }
.ce-cf--isolated { background: rgba(34,197,94,.16); color: var(--ce-iso); }
.ce-cf--elevated { background: rgba(245,158,11,.16); color: var(--ce-ele); }
.ce-cf--systemic { background: rgba(239,68,68,.16); color: var(--ce-sys); }
.ce-warn { color: var(--ce-ele); font-size: var(--font-size-xs); font-weight: 600; }
/* mốc so sánh chuẩn T+20/T+60 */
.ce-row-cmp { background: var(--color-bg-tertiary); }
.ce-hz-cmp { color: var(--color-text-primary); font-weight: 800; }

.ce-disclaimer { font-size: var(--font-size-sm); line-height: 1.55; color: var(--color-text-secondary);
    background: rgba(239, 68, 68, .08); border: 1px solid rgba(239, 68, 68, .25);
    border-radius: var(--border-radius-md); padding: 10px 12px; margin-top: 12px; }
.ce-disclaimer--foot { margin-top: 0; }

/* ── empty ── */
.ce-empty { text-align: center; padding: 60px 20px; color: var(--color-text-muted); }
.ce-empty-icon { font-size: 2.5rem; margin-bottom: 10px; }
.ce-empty code { background: var(--color-bg-tertiary); padding: 1px 5px; border-radius: var(--border-radius-sm); font-size: var(--font-size-sm); }

@media (max-width: 640px) {
    .ce-lane { grid-template-columns: 110px 1fr; }
    .ce-axis { margin-left: 120px; }
    .ce-table { font-size: var(--font-size-sm); }
    .ce-table th, .ce-table td { padding: 5px 6px; }
}