/*
 * LỚP THIẾT KẾ CHO MODULE FOREX
 *
 * Áp lên markup sẵn có, không sửa template string trong forex.js.
 *
 * BỐN VẤN ĐỀ ĐANG SỬA (quan sát trên bản chạy 29/07/2026):
 *   1. Chữ quá nhỏ và quá nhiều cỡ — có chỗ 8px, đọc không nổi.
 *   2. Màu đỏ dùng cho CẢ cảnh báo lẫn chữ thường, nên mất hết trọng số:
 *      chín gạch đầu dòng đỏ liền nhau thì không gạch nào còn là cảnh báo.
 *   3. Khoảng cách tuỳ tiện, không có nhịp.
 *   4. Không có điểm ngắt cho điện thoại.
 *
 * NGUYÊN TẮC: ba cỡ chữ, một màu nhấn, nhịp 8px. Ít lựa chọn thì khó lệch.
 */

.fx-focus-mode,
#content [class^="fx-"],
#content [class*=" fx-"]{
  --fx-cx-den:#0f172a;      /* chữ chính */
  --fx-cx-xam:#475569;      /* chữ phụ */
  --fx-cx-nhat:#94a3b8;     /* chú thích */
  --fx-cx-vien:#e2e8f0;
  --fx-cx-nen:#f8fafc;
  --fx-cx-do:#b91c1c;       /* CHỈ dùng cho điều đang CHẶN vào lệnh */
  --fx-cx-vang:#a16207;
  --fx-cx-xanh:#047857;
  --fx-nhip:8px;
}

/* ---- Thang chữ ----
 * Sàn 12px KHÔNG đặt ở đây. Đã thử `font-size:max(12px,1em)` cho cả cây con:
 * nó dí mọi thứ về 13px và xoá sạch thứ bậc (đo được: 116 phần tử cùng cỡ).
 * Việc nâng đúng những phần tử đang dưới sàn do `forex-dedupe.js` làm, vì chỉ
 * JS mới đọc được cỡ chữ đã tính rồi mới quyết định.
 */
#content [class^="fx-"],
#content [class*=" fx-"]{ line-height:1.55; color:var(--fx-cx-den) }
#content [class^="fx-"] small,
#content [class*=" fx-"] small,
#content .fx-crit-exp,
#content .fx-source,
#content .fx-disclaimer{ font-size:12px; color:var(--fx-cx-xam) }
#content .fx-scenario-title,
#content .fx-degree-card > strong,
#content h2, #content h3{ font-size:15px; font-weight:600; line-height:1.4 }
#content .fx-live-price,
#content .fx-score b{ font-size:20px; font-weight:600; font-variant-numeric:tabular-nums }

/* Số liệu luôn dùng chữ số đều bề ngang — cột số nhảy tới nhảy lui là một
   trong những thứ làm bảng trông lộn xộn nhất. */
#content [class^="fx-"] b,
#content [class*=" fx-"] b,
#content .fx-level,
#content .fx-metric{ font-variant-numeric:tabular-nums }

/* ---- Màu: đỏ chỉ dành cho thứ đang CHẶN ---- */
#content .fx-insight,
#content .fx-quote,
#content .fx-crit,
#content .fx-rule{ color:var(--fx-cx-xam) }
#content .fx-blocking,
#content .fx-audit-rule.is-fail{ color:var(--fx-cx-do) }

/* Danh sách lý do khoá: bỏ đỏ toàn bộ, chỉ giữ vạch màu bên trái. Chín dòng
   đỏ liền nhau không truyền tải được gì ngoài cảm giác hỏng. */
#content .fx-insight ul,
#content .fx-insight ol{ margin:var(--fx-nhip) 0; padding-left:18px }
#content .fx-insight li{ color:var(--fx-cx-xam); margin:4px 0 }
#content .fx-insight li::marker{ color:var(--fx-cx-nhat) }

/* ---- Nhịp khoảng cách ---- */
#content .fx-toolbar,
#content .fx-pro-strip,
#content .fx-object-strip{ gap:var(--fx-nhip); padding:var(--fx-nhip) calc(var(--fx-nhip)*1.5) }
#content .fx-degree-card,
#content .fx-scenario,
#content .fx-insight,
#content .fx-learning-card,
#content .fx-trade-card{
  padding:calc(var(--fx-nhip)*1.5);
  border:1px solid var(--fx-cx-vien);
  border-radius:10px;
  background:#fff
}
#content .fx-analysis-grid,
#content .fx-plan-grid,
#content .fx-crit-grid,
#content .fx-method-grid{ gap:calc(var(--fx-nhip)*1.5) }

/* ---- Nhãn gộp dòng trùng ---- */
.fx-dedupe-badge{
  margin-left:6px;padding:1px 7px;border-radius:999px;
  background:var(--fx-cx-nen);color:var(--fx-cx-xam);
  font-size:11.5px;font-weight:500;white-space:nowrap
}
.fx-dedupe-toggle{
  display:block;margin:0 0 12px;padding:6px 12px;
  border:1px solid var(--fx-cx-vien);border-radius:8px;
  background:#fff;color:var(--fx-cx-xam);font-size:12.5px;cursor:pointer
}
.fx-dedupe-toggle:hover{background:var(--fx-cx-nen)}

/* ---- Điện thoại: một cột thật, không phải grid co lại ---- */
@media (max-width:820px){
  #content .fx-analysis-grid,
  #content .fx-crit-grid,
  #content .fx-method-grid,
  #content .fx-plan-grid,
  #content .fx-degree-map,
  #content .fx-audit-grid{ display:block !important }
  #content .fx-analysis-grid > *,
  #content .fx-crit-grid > *,
  #content .fx-method-grid > *{ margin-bottom:calc(var(--fx-nhip)*1.5) }

  /* Thanh công cụ cuộn ngang thay vì vỡ dòng thành bốn tầng. */
  #content .fx-toolbar,
  #content .fx-object-strip,
  #content .fx-pro-strip,
  #content .fx-tabs{
    flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;
    scrollbar-width:none
  }
  #content .fx-toolbar::-webkit-scrollbar,
  #content .fx-tabs::-webkit-scrollbar{ display:none }

  #content .fx-chart-wrap{ min-height:340px }
}