/* M20 Bản đồ dòng tiền. Khung giao diện dựng từ bản mẫu Bản đồ dòng tiền chiến lược, đổi sang màu,
   phông và thẻ của Broker Desk: dùng lại lớp rs- của M17 (thẻ, bảng, dải tóm tắt, nút thẻ), chỉ thêm
   phần riêng với tiền tố dt-. Mọi màu đi qua biến của .rs-token nên nền sáng tự đổi theo. */

.dt-trang {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.dt-trang [hidden] {
  display: none !important;
}

/* đầu trang */
.dt-dau {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
}
.dt-trangThai {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.dt-huy {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border: 1px solid var(--vien2);
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--chu2);
  white-space: nowrap;
}
.dt-huy i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--chu3);
}

/* thông báo thiếu dữ liệu hoặc danh sách hết hiệu lực */
.dt-bao {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 12px 16px;
  border: 1px dashed var(--vang);
  border-radius: 12px;
  background: var(--mat2);
  font-size: 13px;
  line-height: 1.55;
  color: var(--chu2);
}
.dt-bao b {
  color: var(--vang-sang);
  font-weight: 600;
}

/* dải bốn chỉ số: dùng .rs-tomTat, đổi về bốn cột đều */
.dt-dai {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
}
.dt-so {
  margin-top: 6px;
  font-family: var(--serif);
  font-size: 26px;
  font-weight: 500;
  line-height: 1.15;
  color: var(--chu-dam);
}
.dt-so[data-trong='1'] {
  color: var(--chu3);
}
.dt-phu {
  margin-top: 4px;
  font-size: 12px;
  color: var(--chu3);
}

/* chip trạng thái của nhóm */
.dt-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border: 1px solid transparent;
  border-radius: 6px;
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
}
.dt-chip .dt-ky {
  font-family: var(--mono);
  font-size: 10.5px;
}
.dt-chip[data-st='chon'] {
  background: var(--vang);
  color: var(--nen0);
}
.dt-chip[data-st='chom'] {
  border-color: var(--vang);
  color: var(--vang-sang);
}
.dt-chip[data-st='tt'] {
  border-color: var(--vien2);
  color: var(--chu2);
  font-weight: 500;
}
.dt-chip[data-st='sy'] {
  border-color: var(--troi);
  color: var(--troi);
}
.dt-chip[data-st='bb'] {
  background: var(--mat2);
  color: var(--chu3);
}
.dt-chip[data-st='na'] {
  border: 1px dashed var(--vien2);
  color: var(--chu3);
  font-weight: 500;
}

/* đọc nhanh */
.dt-doc {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.dt-dong {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.dt-dong > .dt-nhanDong {
  flex: none;
  width: 112px;
}
.dt-trong {
  font-size: 12.5px;
  color: var(--chu3);
}

/* bảng nhóm */
.dt-ten {
  font-family: var(--serif);
  font-size: 15px;
  font-weight: 500;
  color: var(--chu-dam);
}
.dt-tenPhu {
  font-size: 11px;
  color: var(--chu3);
}
.dt-o {
  font-family: var(--mono);
  color: var(--chu3);
}

/* rổ VN-Index */
.dt-ro {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.dt-ds {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* hai cột biểu đồ */
/* 20.10.2026: theo báo cáo OPVIA, quỹ đạo và biểu đồ nhỏ đứng cạnh nhau ở màn rộng (nút phóng to
   vẫn mở từng biểu đồ toàn màn); dưới 1100 điểm ảnh xếp chồng. */
.dt-luoi2 {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}
.dt-nho {
  display: block;
}
.dt-luoiNho {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
@media (max-width: 560px) {
  .dt-luoiNho {
    grid-template-columns: minmax(0, 1fr);
  }
}
/* Vùng Được chọn trên quỹ đạo, như báo cáo OPVIA. */
.dt-bd .dt-vungChon {
  fill: var(--vang);
  fill-opacity: 0.12;
  stroke: none;
}
.dt-dsTheManh {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.dt-mini {
  min-width: 0;
  padding: 9px 10px 6px;
  border: 1px solid var(--vien);
  border-radius: 10px;
  background: var(--nen-o);
}
.dt-miniDau {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}
.dt-miniDau .dt-ten {
  font-size: 13px;
}
.dt-miniDau .dt-o {
  font-size: 14px;
}

/* biểu đồ: chỉ trục, vùng, nhãn; chưa có điểm */
.dt-bd {
  display: block;
  width: 100%;
  height: auto;
}
.dt-bd text {
  font-family: var(--sans);
  font-size: 10.5px;
  fill: var(--chu3);
}
.dt-bd .dt-tso {
  font-family: var(--mono);
}
.dt-bd .dt-truc {
  stroke: var(--vien);
  stroke-width: 1;
  fill: none;
}
.dt-bd .dt-moc {
  stroke: var(--chu3);
  stroke-width: 1;
  stroke-dasharray: 3 3;
  fill: none;
}
.dt-bd .dt-vung {
  fill: var(--vang);
  fill-opacity: 0.1;
  stroke: none;
}
.dt-bd .dt-goc {
  font-family: var(--serif);
  font-size: 12px;
  font-style: italic;
  fill: var(--chu3);
}
.dt-bd .dt-chuTrong {
  font-size: 12px;
  fill: var(--chu2);
}

/* thẻ chọn nhóm cho bảng chi tiết: dùng .rs-tab, cho xuống dòng */
.dt-the {
  flex-wrap: wrap;
}

/* cách tính */
.dt-cach {
  border: 1px solid var(--vien);
  border-radius: 16px;
  background: var(--mat);
  padding: 14px 20px;
}
.dt-cach summary {
  cursor: pointer;
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 500;
  color: var(--chu-dam);
}
.dt-cach summary:focus-visible {
  outline: 2px solid var(--vang);
  outline-offset: 3px;
}
.dt-cot {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 28px;
  margin-top: 12px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--chu2);
}
.dt-cot p {
  margin: 0 0 8px;
  max-width: 68ch;
}
.dt-cot b {
  color: var(--chu);
}
.dt-cot code {
  padding: 1px 5px;
  border-radius: 4px;
  background: var(--nen-o);
  font-family: var(--mono);
  font-size: 11.5px;
}

@media (max-width: 1100px) {
  .dt-luoi2 {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 900px) {
  .dt-dai {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .dt-dai > div:nth-child(3) {
    border-left: 0;
  }
  .dt-dai > div:nth-child(n + 3) {
    border-top: 1px solid var(--vien);
  }
  .dt-cot {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 560px) {
  .dt-nho {
    grid-template-columns: minmax(0, 1fr);
  }
  .dt-dong > .dt-nhanDong {
    width: auto;
  }
}

/* danh sách hết hiệu lực trên đầu trang */
.dt-huy[data-canh='1'] {
  border-style: dashed;
  border-color: var(--xuong);
  color: var(--xuong);
}
.dt-huy[data-canh='1'] i {
  background: var(--xuong);
}
.dt-huy[data-st='chon'] i {
  background: var(--vang);
}
.dt-huy[data-st='chon'],
.dt-huy[data-st='chom'] {
  border-color: var(--vang);
  color: var(--vang-sang);
}
.dt-mono {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}
.dt-mo {
  color: var(--chu3);
}
.dt-len {
  color: var(--vang-sang);
}
.dt-xuong {
  color: var(--troi);
}
.dt-cau {
  margin: 0;
  font-size: 13.5px;
  color: var(--chu);
}
.dt-maRo {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* vạch độ dài L 3 phiên: thang 0 tới 2,5, vạch dọc ở 1,0 */
.dt-vach {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  width: 56px;
  height: 6px;
  margin-left: 8px;
  overflow: hidden;
  border-radius: 3px;
  background: var(--nen-o);
}
.dt-vach i {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  border-radius: 3px;
  background: var(--vang);
}
.dt-vach b {
  position: absolute;
  top: -2px;
  bottom: -2px;
  left: 40%;
  width: 1px;
  background: var(--chu2);
}

/* quỹ đạo và điểm theo trạng thái */
.dt-bd .dt-duoi {
  stroke: var(--chu3);
  stroke-width: 1.2;
  fill: none;
  opacity: 0.8;
}
.dt-bd .dt-diem {
  stroke-width: 2;
  fill: var(--nen);
  stroke: var(--chu3);
}
.dt-bd .dt-diem[data-st='chon'] {
  fill: var(--vang);
  stroke: var(--vang);
}
.dt-bd .dt-diem[data-st='chom'] {
  stroke: var(--vang);
}
.dt-bd .dt-diem[data-st='sy'] {
  stroke: var(--troi);
}
.dt-bd .dt-diem[data-st='bb'] {
  fill: var(--chu3);
}
.dt-bd .dt-nhanNhom {
  font-size: 11px;
  font-weight: 600;
  fill: var(--chu);
}
.dt-bd .dt-tho {
  stroke: var(--chu3);
  stroke-width: 1.2;
  fill: none;
  opacity: 0.6;
}
.dt-bd .dt-tb {
  stroke: var(--vang);
  stroke-width: 2.2;
  fill: none;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.dt-bd .dt-cuoi {
  fill: var(--vang);
}
.dt-miniSo {
  font-size: 14px;
  color: var(--chu-dam);
}

/* bảng mã */
.dt-rsi {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 4px;
  background: var(--vang);
  color: var(--nen0);
  font-size: 11px;
  font-weight: 600;
}
.dt-elite {
  color: var(--vang-sang);
  font-weight: 600;
}
.dt-moi {
  color: var(--vang-sang);
  font-weight: 600;
}
.dt-thuoc {
  display: inline-block;
  margin-left: 3px;
  padding: 0 5px;
  border: 1px solid var(--vien2);
  border-radius: 4px;
  font-size: 10.5px;
  color: var(--chu2);
}

.dt-mat {
  color: var(--troi);
  font-weight: 600;
}
/* Vạch ngày bắt đầu kỳ danh sách trên biểu đồ nhỏ (20.10.2026, thay nét đứt L tham khảo). */
.dt-bd .dt-kyMoi {
  stroke: var(--chu3);
  stroke-width: 1;
  opacity: 0.45;
}
.dt-bd .dt-diem[data-st='na'] {
  fill: none;
  stroke-dasharray: 2 2;
}
#dtBangNhom tr[data-dt-nhom] {
  cursor: pointer;
}
#dtBangNhom tr[aria-selected='true'] td {
  background: var(--mat2);
}
#dtBangChiTiet tr[data-ngoai='1'] td {
  opacity: 0.6;
}
.dt-kiem {
  grid-template-columns: minmax(0, 1fr);
  font-size: 12.5px;
}

/* quỹ đạo 5 phiên và biểu đồ nhỏ, bản 19.10.2026 */
.dt-qdHop,
.dt-miniHop {
  position: relative;
}
.dt-qd {
  max-width: 1100px;
  margin: 0 auto;
}
.dt-bd .dt-tTruc {
  font-size: 12px;
  fill: var(--chu2);
}
.dt-bd .dt-goc {
  font-size: 14px;
}
.dt-bd .dt-goc[data-st='chon'],
.dt-bd .dt-goc[data-st='chom'] {
  fill: var(--vang);
}
.dt-bd .dt-goc[data-st='sy'] {
  fill: var(--troi);
}
.dt-bd .dt-duoi[data-st='chon'],
.dt-bd .dt-duoi[data-st='chom'] {
  stroke: var(--vang);
}
.dt-bd .dt-duoi[data-st='sy'] {
  stroke: var(--troi);
}
.dt-bd .dt-duoi {
  stroke-width: 2;
  opacity: 0.9;
}
.dt-bd .dt-vet {
  fill: var(--chu3);
}
.dt-bd .dt-vet[data-st='chon'],
.dt-bd .dt-vet[data-st='chom'] {
  fill: var(--vang);
}
.dt-bd .dt-vet[data-st='sy'] {
  fill: var(--troi);
}
.dt-bd .dt-dan {
  stroke: var(--chu3);
  stroke-width: 0.8;
}
.dt-bd .dt-nhanNhom {
  font-size: 12.5px;
  paint-order: stroke;
  stroke: var(--nen);
  stroke-width: 3px;
}
.dt-bd .dt-nhoTro {
  stroke: var(--chu2);
  stroke-width: 1;
}
.dt-docSo {
  position: absolute;
  z-index: 3;
  max-width: 230px;
  padding: 7px 9px;
  border: 1px solid var(--vien2);
  border-radius: 6px;
  background: var(--mat);
  color: var(--chu);
  font-size: 12px;
  line-height: 1.45;
  pointer-events: none;
  visibility: hidden;
}
.dt-miniHop .dt-docSo {
  top: 4px;
}
.dt-chuThich {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 16px;
  margin-top: 10px;
  font-size: 12px;
  color: var(--chu2);
}
.dt-chuNho {
  margin: 0 0 12px;
}
.dt-chuPhu {
  flex-basis: 100%;
  color: var(--chu3);
}
.dt-cham {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 6px;
  border: 2px solid var(--chu3);
  border-radius: 50%;
  vertical-align: -1px;
}
.dt-cham[data-st='chon'] {
  background: var(--vang);
  border-color: var(--vang);
}
.dt-cham[data-st='chom'] {
  border-color: var(--vang);
}
.dt-cham[data-st='tt'] {
  border-color: var(--chu2);
}
.dt-cham[data-st='sy'] {
  border-color: var(--troi);
}
.dt-cham[data-st='bb'] {
  background: var(--chu3);
}
.dt-gach {
  display: inline-block;
  width: 18px;
  margin-right: 6px;
  vertical-align: middle;
  border-top: 2px solid var(--vang);
}
.dt-gTho {
  border-top: 1px solid var(--chu3);
}
.dt-gKy {
  width: 0;
  height: 12px;
  border-top: 0;
  border-left: 1px solid var(--chu3);
  opacity: 0.6;
}
/* Quỹ đạo: chip làm nổi một nhóm, nhóm khác mờ đi (20.10.2026). */
.dt-qdLoc {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 8px;
}
.dt-qdLoc button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 10px;
  border: 1px solid var(--vien2);
  border-radius: 14px;
  background: transparent;
  color: var(--chu2);
  font-size: 12px;
  cursor: pointer;
}
.dt-qdLoc button[aria-pressed='true'] {
  border-color: var(--chu2);
  color: var(--chu);
  background: var(--mat2);
}
.dt-qdLoc i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
.dt-qd[data-chon] .dt-mo {
  opacity: 0.12;
}
.dt-qd [data-g] {
  transition: opacity var(--t-dong) var(--e-mau);
}
.dt-qd {
  cursor: pointer;
}
.dt-oVung {
  display: inline-block;
  width: 14px;
  height: 10px;
  margin-right: 6px;
  vertical-align: -1px;
  background: var(--vang);
  opacity: 0.18;
}
.dt-miniDau .dt-chip {
  margin-left: auto;
  font-size: 10.5px;
}
[data-phong-to]:fullscreen .dt-qd,
[data-phong-to].bd-phongTo .dt-qd {
  max-width: none;
  max-height: calc(100vh - 170px);
}
[data-phong-to]:fullscreen .dt-luoiNho,
[data-phong-to].bd-phongTo .dt-luoiNho {
  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
}
.dt-cham[data-st='na'] {
  border-style: dashed;
}
.dt-miniDau .dt-ten {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Nhóm con (Growth bứt tốc, 20.10.2026): dòng con thụt vào ngay dưới nhóm cha. */
tr.dt-con > td:first-child {
  padding-left: 30px;
  position: relative;
}
tr.dt-con > td:first-child::before {
  content: '';
  position: absolute;
  left: 14px;
  top: 0;
  height: 55%;
  width: 9px;
  border-left: 1px solid var(--chu3);
  border-bottom: 1px solid var(--chu3);
  opacity: 0.6;
}