/* ---------- Biểu đồ nến (components/chart.js) ----------
   Chỉ dùng token đã khai báo ở :root trong app.css — không đặt màu mới.
   File tách riêng để chart có thể nạp độc lập (xem chart.demo.html). */

.ch-root { display: block; }

.ch-head {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  margin-bottom: 8px;
}
.ch-head h2 {
  font-size: 11px; text-transform: uppercase; color: var(--faint);
  letter-spacing: .09em; font-weight: 600; margin: 0;
}
.ch-meta { font-size: 12px; color: var(--dim); }
.ch-meta b { color: var(--text); font-weight: 600; }

/* ---------- Chọn khung thời gian ----------
   Nằm ngay dưới tiêu đề vì nó đổi ý nghĩa của cả khung hình bên dưới. Ở 375px
   thanh này tự xuống dòng; nút đủ 30px chiều cao để bấm được bằng ngón tay. */
.ch-tfbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  margin-bottom: 9px;
}
.ch-tf-cap {
  font-size: 10.5px; color: var(--faint); text-transform: uppercase;
  letter-spacing: .07em; margin-right: 2px;
}
.ch-tf {
  min-height: 30px; padding: 4px 11px;
  font: inherit; font-size: 12px; font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--dim); background: var(--surface); cursor: pointer;
  border: 1px solid var(--border); border-radius: 999px;
}
.ch-tf:hover { color: var(--text); border-color: var(--faint); }
.ch-tf.active {
  color: var(--bg); background: var(--dim); border-color: var(--dim);
}
.ch-tf:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
/* Khung mà máy chủ không phục vụ được: KHÔNG ẩn nút (người dùng vẫn bấm được và
   vẫn thấy một biểu đồ), nhưng phải khác đi — kèm dòng .ch-note giải thích. */
.ch-tf-fb { border-style: dashed; border-color: rgba(240,185,11,.5); color: var(--amber); }
.ch-tf-fb.active { background: rgba(240,185,11,.16); color: var(--amber); border-color: var(--amber); }

.ch-note {
  font-size: 11.5px; line-height: 1.5; color: var(--amber);
  background: rgba(240,185,11,.08); border: 1px solid rgba(240,185,11,.28);
  border-radius: var(--radius-sm); padding: 7px 10px; margin-bottom: 9px;
  overflow-wrap: anywhere;
}
.ch-note[hidden] { display: none; }
.ch-note b { color: var(--text); font-weight: 700; }

/* Chú giải: bắt buộc, vì mũi tên trên canvas không tự giải thích được */
.ch-legend {
  display: flex; flex-wrap: wrap; gap: 4px 14px;
  font-size: 11px; color: var(--faint); margin-bottom: 10px;
}
.ch-legend span { display: inline-flex; align-items: center; gap: 5px; }
.ch-lg { display: inline-block; width: 10px; height: 10px; border-radius: 2px; flex: 0 0 auto; }
.ch-lg-up { background: var(--long); }
.ch-lg-dn { background: var(--short); }
.ch-lg-ar-up {
  width: 0; height: 0; border-radius: 0; background: none;
  border-left: 5px solid transparent; border-right: 5px solid transparent;
  border-bottom: 8px solid var(--dim);
}
.ch-lg-sl { height: 0; width: 14px; border-radius: 0; border-top: 2px dashed var(--short); }
.ch-lg-tp { height: 0; width: 14px; border-radius: 0; border-top: 2px dashed var(--long); }

/* Vùng vẽ. Chiều cao cố định theo breakpoint: canvas không tự có kích thước nội
   tại, để nó "auto" là ra 150px mặc định của trình duyệt. */
.ch-wrap {
  position: relative;
  height: 340px;
  border-radius: var(--radius-sm);
  background: var(--surface);
  border: 1px solid var(--border-soft);
  overflow: hidden;
}
.ch-canvas {
  display: block; width: 100%; height: 100%;
  /* pan-y: vuốt dọc vẫn cuộn được trang, vuốt ngang thì rê con trỏ trên biểu đồ */
  touch-action: pan-y;
  cursor: crosshair;
}

/* ---------- Ô thông tin khi rê chuột ---------- */
.ch-tip {
  position: absolute; z-index: 3; pointer-events: none;
  background: rgba(18, 21, 27, .96);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  font-size: 11.5px; line-height: 1.45;
  min-width: 132px; max-width: 230px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .55);
}
.ch-tip[hidden] { display: none; }
.ch-tip-t { color: var(--faint); font-size: 10.5px; margin-bottom: 5px; }
.ch-tip-g {
  display: grid; grid-template-columns: auto 1fr;
  gap: 1px 10px; align-items: baseline;
}
.ch-tip-k { color: var(--dim); }
.ch-tip-v { color: var(--text); text-align: right; font-weight: 600; }
.ch-tip-chg { margin-top: 5px; font-size: 11.5px; font-weight: 600; }
.ch-tip-vol { color: var(--faint); font-weight: 400; }
.ch-tip-m {
  margin-top: 7px; padding-top: 6px;
  border-top: 1px solid var(--border-soft);
  display: flex; flex-direction: column; gap: 4px;
}
.ch-tip-mrow { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ch-tip-mrow span { color: var(--dim); }
.ch-tip-mrow b { color: var(--text); margin-left: auto; }
.ch-dot { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto; background: var(--dim); }
.ch-dot.green { background: var(--long); }
.ch-dot.red { background: var(--short); }

/* ---------- Trạng thái rỗng / đang tải / lỗi ----------
   Canvas trắng trơn là cách nhanh nhất khiến người dùng nghĩ trang bị hỏng. */
.ch-msg {
  position: absolute; inset: 0; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  gap: 10px; text-align: left;
  padding: 20px; font-size: 13px; color: var(--dim);
  background: var(--surface);
}
.ch-msg[hidden] { display: none; }
.ch-msg-i { font-size: 20px; line-height: 1; opacity: .8; }
.ch-msg-s { font-size: 11.5px; color: var(--faint); margin-top: 3px; }
.ch-msg-error { color: var(--short); }
.ch-msg-error .ch-msg-s { color: var(--dim); }
.ch-msg-empty .ch-msg-i { color: var(--faint); }

.ch-spin {
  width: 15px; height: 15px; border-radius: 50%;
  border: 2px solid var(--border);
  border-top-color: var(--amber);
  animation: ch-spin .7s linear infinite;
  flex: 0 0 auto;
}
@keyframes ch-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .ch-spin { animation-duration: 2.4s; }
}

/* ---------- Màn nhỏ ----------
   Thấp hơn một chút và bỏ bớt chú giải phụ; số nến hiển thị do chart.js tự giảm. */
@media (max-width: 640px) {
  .ch-wrap { height: 260px; }
  .ch-legend { gap: 3px 10px; font-size: 10.5px; }
  .ch-tfbar { gap: 5px; }
  .ch-tf { padding: 4px 9px; font-size: 11.5px; }
  .ch-tf-cap { width: 100%; margin: 0 0 1px; }
  .ch-tip { font-size: 11px; min-width: 118px; max-width: 190px; padding: 7px 9px; }
}
@media (max-width: 380px) {
  .ch-wrap { height: 240px; }
}