/* Trang Chứng khoán — layout riêng, tiền tố wt- để không đụng class của bundle production.
   Màu lấy theo token BSC đã đối chiếu với production (xem tokens/colors.css của skill). */

:root {
  --wt-bg: #DBE2EB;
  --wt-block: #FFFFFF;
  --wt-head: #EEEEEE;
  --wt-stroke: #DADFE6;
  --wt-ink: #161F2C;
  --wt-ink-sub: rgba(22, 31, 44, 0.55);
  --wt-topbar: #1E4D96;
  --wt-accent: #1E4D96;
  --wt-hover: #EAECF0;
  --wt-input: #E4EAF2;
}

body.theme-dark {
  --wt-bg: #05040D;
  --wt-block: #111419;
  --wt-head: #1B1F27;
  --wt-stroke: #2B2E33;
  --wt-ink: #FFFFFF;
  --wt-ink-sub: rgba(255, 255, 255, 0.55);
  --wt-topbar: #111419;
  --wt-accent: #2681E0;
  --wt-hover: #1F2227;
  --wt-input: #272C37;
}

body.fss {
  margin: 0;
  background: var(--wt-bg) !important;
  color: var(--wt-ink);
  font-size: var(--text-medium);
}

/* ---------- thanh mã ---------- */

/* padding-top 8px để nội dung bắt đầu ở y=58, trùng mốc với bảng giá và với rail */
.wt-page { padding: 8px 12px 12px; display: flex; flex-direction: column; gap: 12px; }

.wt-symbolbar {
  background: var(--wt-block);
  border: 1px solid var(--wt-stroke);
  border-radius: 4px;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}

.wt-search { position: relative; width: 190px; flex: none; }
.wt-search input {
  width: 100%; height: 32px; box-sizing: border-box;
  background: var(--wt-input); color: var(--wt-ink);
  border: 1px solid var(--wt-stroke); border-radius: 4px;
  padding: 0 10px; font-size: var(--text-medium); font-family: inherit;
}
.wt-search input:focus { outline: 2px solid var(--wt-accent); outline-offset: 1px; }

.wt-suggest {
  position: absolute; top: 36px; left: 0; z-index: 50;
  width: 340px; max-height: 300px; overflow-y: auto;
  background: var(--wt-block);
  border: 1px solid var(--wt-stroke); border-radius: 4px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .3);
}
.wt-suggest-item { padding: 7px 12px; cursor: pointer; display: flex; gap: 10px; }
.wt-suggest-item:hover, .wt-suggest-item.is-on { background: var(--wt-hover); }
.wt-suggest-code { font-weight: 600; min-width: 74px; }
.wt-suggest-name { color: var(--wt-ink-sub); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.wt-symbolinfo { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.wt-symcode { font-size: var(--text-hero); font-weight: 700; letter-spacing: .01em; }
.wt-symexch {
  font-size: var(--text-small); letter-spacing: .08em; text-transform: uppercase;
  border: 1px solid var(--wt-stroke); border-radius: 3px; padding: 2px 6px;
  color: var(--wt-ink-sub);
}
.wt-symname { color: var(--wt-ink-sub); }
.wt-symprice { font-size: var(--text-hero); font-weight: 600; font-variant-numeric: tabular-nums; }
.wt-symchange { font-size: var(--text-medium); font-variant-numeric: tabular-nums; }
.wt-status { margin-left: auto; font-size: var(--text-small); color: var(--wt-ink-sub); }

/* ---------- lưới ---------- */

.wt-grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr);
  grid-template-areas: "chart info" "trades market" "trades news";
  gap: 12px;
  align-items: start;
}
.wt-chart  { grid-area: chart; }
.wt-info   { grid-area: info; }
.wt-trades { grid-area: trades; }
.wt-market { grid-area: market; }
.wt-news   { grid-area: news; }

/* ---------- card ---------- */

.wt-card {
  background: var(--wt-block);
  border: 1px solid var(--wt-stroke);
  border-radius: 4px;
  overflow: hidden;
}
.wt-card-head {
  background: var(--wt-head);
  border-bottom: 1px solid var(--wt-stroke);
  padding: 8px 12px;
  font-weight: 600;
  font-size: var(--text-small);
}
.wt-card-sub { font-weight: 400; color: var(--wt-ink-sub); }
.wt-card-body { padding: 10px 12px; }
.wt-scroll { overflow: auto; max-height: 290px; }
.wt-empty { padding: 28px 0; text-align: center; color: var(--wt-ink-sub); }

.wt-tabs { display: flex; background: var(--wt-head); border-bottom: 1px solid var(--wt-stroke); }
.wt-tab {
  background: none; border: 0; cursor: pointer; font: inherit; font-size: var(--text-small);
  padding: 8px 12px; color: var(--wt-ink-sub); border-bottom: 2px solid transparent;
}
.wt-tab.is-on { color: var(--wt-ink); font-weight: 600; border-bottom-color: var(--wt-accent); }

/* ---------- đồ thị ---------- */

.wt-chart .wt-card-body { padding: 6px; }
#chart { width: 100%; height: 300px; display: block; }

/* ---------- thông tin mã ---------- */

.wt-info .wt-card-body { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
.wt-dl { margin: 0; }
.wt-dl div { display: flex; justify-content: space-between; gap: 10px; padding: 5px 0; border-bottom: 1px solid var(--wt-stroke); }
.wt-dl div:last-child { border-bottom: 0; }
.wt-dl dt { color: var(--wt-ink-sub); white-space: nowrap; }
.wt-dl dd { margin: 0; font-weight: 500; font-variant-numeric: tabular-nums; }

.wt-actions { display: flex; gap: 8px; padding: 0 12px 12px; }
.wt-btn {
  flex: 1; height: 32px; border: 0; border-radius: 4px; cursor: pointer;
  color: #fff; font: inherit; font-weight: 600; font-size: var(--text-medium);
}
.wt-buy  { background: linear-gradient(90deg, #26E07C, #00B854); }
.wt-sell { background: linear-gradient(90deg, #FF4444, #C20606); }
.wt-note { margin: 0 12px 12px; font-size: var(--text-small); color: var(--wt-ink-sub); }

/* ---------- bảng ---------- */

.wt-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.wt-table th {
  position: sticky; top: 0; z-index: 1;
  background: var(--wt-head); color: var(--wt-ink-sub);
  font-size: var(--text-small); font-weight: 600; text-align: left;
  padding: 6px 8px; border-bottom: 1px solid var(--wt-stroke); white-space: nowrap;
}
.wt-table td { padding: 4px 8px; border-bottom: 1px solid var(--wt-stroke); white-space: nowrap; }
.wt-table tr:last-child td { border-bottom: 0; }
.wt-table .r { text-align: right; }
.wt-table td.r { text-align: right; }

/* ---------- tỉ lệ dư mua / dư bán ---------- */

.wt-ratio { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font-size: var(--text-small); }
.wt-ratio-bar { flex: 1; height: 6px; border-radius: 3px; background: #D13338; overflow: hidden; }
.wt-ratio-bar i { display: block; height: 100%; background: #238619; }
body.theme-dark .wt-ratio-bar { background: #F92626; }
body.theme-dark .wt-ratio-bar i { background: #50FF00; }
.wt-ratio-buy { color: #238619; }
.wt-ratio-sell { color: #D13338; }
body.theme-dark .wt-ratio-buy { color: #50FF00; }
body.theme-dark .wt-ratio-sell { color: #F92626; }

/* Bundle production đặt style chung cho <button>; tăng đặc hiệu để tab không bị dính nhau. */
.wt-card .wt-tabs { gap: 0; }
.wt-card .wt-tabs .wt-tab {
  flex: 0 0 auto;
  /* bundle production đặt padding:0 cho <button>, phải ghi đè bằng !important */
  padding: 8px 14px !important;
  line-height: 1.3;
  border-radius: 0;
  box-shadow: none;
  min-width: 0;
  height: auto;
}
.wt-ratio { justify-content: space-between; }
.wt-ratio-buy, .wt-ratio-sell { flex: none; white-space: nowrap; }