/* M15 Điều kiện thị trường · màn MRF (docs/mrf/GIAO_DIEN.md). Dùng lại .dau, .luoi, .pn, .ghi, .vb
   của Broker Desk, phần riêng có tiền tố mrf-. Màu theo bảng bốn mức ở GIAO_DIEN.md (m-do, m-cam,
   m-lam, m-luc), m-xam là giữ 0% vì thiếu số liệu. Tiền tố m- để không trùng lớp chung của khung trang. */

.mrf {
  --mrf-lam: #4fa3e3;
  --mrf-xam: var(--ngang);
}
html[data-giao-dien="sang"] .mrf {
  --mrf-lam: #2f79b3;
}

.mrf .luoi {
  padding-top: 16px;
  padding-bottom: 0;
}
.mrf .luoi:last-child {
  padding-bottom: 44px;
}
.mrf-luoi2 {
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
}
.mrf-luoi1 {
  grid-template-columns: minmax(0, 1fr);
}
@media (max-width: 900px) {
  .mrf-luoi2 {
    grid-template-columns: minmax(0, 1fr);
  }
}

.mrf-dauPhai {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* nhãn trạng thái */
.mrf-nhan {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: 3px;
  font-family: "Oswald", sans-serif;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border: 1px solid currentColor;
  white-space: nowrap;
}
.mrf-nhan.m-do {
  color: var(--xuong);
}
.mrf-nhan.m-cam {
  color: var(--canh);
}
.mrf-nhan.m-lam {
  color: var(--mrf-lam);
}
.mrf-nhan.m-luc {
  color: var(--len);
}
.mrf-nhan.m-xam {
  color: var(--mrf-xam);
}

/* câu trả lời */
.mrf-tra {
  border-left: 3px solid var(--mrf-xam);
  padding-left: 16px;
}
.mrf-tra.m-do {
  border-color: var(--xuong);
}
.mrf-tra.m-cam {
  border-color: var(--canh);
}
.mrf-tra.m-lam {
  border-color: var(--mrf-lam);
}
.mrf-tra.m-luc {
  border-color: var(--len);
}
.mrf-traTen {
  font-family: "Oswald", sans-serif;
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--chu-sang);
}
.mrf-traSo {
  font-family: "IBM Plex Mono", monospace;
  font-size: 54px;
  line-height: 1.1;
  color: var(--chu-dam);
  margin: 6px 0 10px;
}
.mrf-lyDo {
  margin: 10px 0 0 18px;
  font-size: 12.6px;
  line-height: 1.6;
  color: var(--chu-vb);
}
.mrf-lyDo small,
.mrf-buoc small,
.mrf-tangTen small {
  display: block;
  font-family: "IBM Plex Mono", monospace;
  font-size: 10.5px;
  color: var(--chu3);
}
.mrf-heSo {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--vien);
}
.mrf-heSo b {
  font-family: "IBM Plex Mono", monospace;
  color: var(--chu-dam);
  font-weight: 500;
}

/* năm tầng */
.mrf-tang {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.4fr) minmax(90px, 0.7fr) minmax(80px, 1fr);
  gap: 12px;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid rgba(var(--vien-rgb), 0.55);
  font-size: 12.6px;
}
.mrf-tangTen {
  color: var(--chu-sang);
}
/* Tên tiếng Việt có tên kỹ thuật gốc ở chú thích khi rê chuột. */
.mrf-goc,
.mrf-tangTen[title],
.mrf-lyDo li[title] {
  cursor: help;
}
.mrf-goc {
  text-decoration: underline dotted rgba(var(--vien-rgb), 0.9);
  text-underline-offset: 3px;
}
.mrf-tangGhi {
  color: var(--chu2);
}
.mrf-tangRa {
  font-family: "IBM Plex Mono", monospace;
  text-align: right;
  color: var(--chu-dam);
}
.mrf-tangRa.m-xam {
  color: var(--mrf-xam);
}
.mrf-ketQua {
  border-bottom: 0;
  font-weight: 500;
}
.mrf-thanh {
  display: block;
  height: 6px;
  border-radius: 3px;
  background: rgba(var(--phu-rgb), 0.07);
  overflow: hidden;
}
.mrf-thanh i {
  display: block;
  height: 100%;
  background: var(--dong);
}
.mrf-thanh i.m-do {
  background: var(--xuong);
}
.mrf-thanh i.m-cam {
  background: var(--canh);
}
.mrf-thanh i.m-lam {
  background: var(--mrf-lam);
}
.mrf-thanh i.m-xam {
  background: var(--mrf-xam);
}
@media (max-width: 640px) {
  .mrf-tang {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .mrf-tangGhi,
  .mrf-tang .mrf-thanh {
    grid-column: 1 / -1;
  }
}

/* thang bốn mức */
.mrf-thang {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
@media (max-width: 640px) {
  .mrf-thang {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.mrf-muc {
  position: relative;
  padding: 12px 14px;
  border: 1px solid var(--vien);
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: var(--chu2);
}
.mrf-muc b {
  font-family: "IBM Plex Mono", monospace;
  font-weight: 500;
}
.mrf-muc.on.m-do {
  border-color: var(--xuong);
  color: var(--xuong);
}
.mrf-muc.on.m-cam {
  border-color: var(--canh);
  color: var(--canh);
}
.mrf-muc.on.m-lam {
  border-color: var(--mrf-lam);
  color: var(--mrf-lam);
}
.mrf-muc.on.m-luc {
  border-color: var(--len);
  color: var(--len);
}
.mrf-hom {
  font-family: "Oswald", sans-serif;
  font-size: 9px;
  letter-spacing: 0.2em;
}
.mrf .pn .ghi {
  margin-top: 10px;
}

/* bốn yếu tố */
.mrf-bon {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}
@media (max-width: 1100px) {
  .mrf-bon {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 640px) {
  .mrf-bon {
    grid-template-columns: minmax(0, 1fr);
  }
}
.mrf-the {
  border: 1px solid var(--vien);
  border-radius: 4px;
  padding: 14px 16px;
  background: var(--mat);
  min-width: 0;
}
.mrf-theDau {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.mrf-theTen {
  font-family: "Oswald", sans-serif;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--dong-s);
}
.mrf-ds {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 12.6px;
}
.mrf-ds li,
.mrf-xhDau {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 3px 0;
  color: var(--chu2);
}
.mrf-ds b,
.mrf-xhDau b {
  font-family: "IBM Plex Mono", monospace;
  font-weight: 500;
  color: var(--chu-dam);
}
.mrf-xh {
  margin-bottom: 8px;
  font-size: 12.6px;
}
.mrf-xh small {
  color: var(--chu3);
  font-size: 11px;
}
.mrf-diem,
.mrf-thuoc {
  position: relative;
  display: block;
  height: 6px;
  margin: 4px 0;
  border-radius: 3px;
  background: rgba(var(--phu-rgb), 0.07);
}
.mrf-diem i {
  display: block;
  height: 100%;
  border-radius: 3px;
  background: var(--mrf-lam);
}
.mrf-diem em,
.mrf-thuoc em {
  position: absolute;
  top: -3px;
  width: 2px;
  height: 12px;
  background: var(--dong-s);
}
.mrf-thuoc i {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  border-radius: 3px;
}
.mrf-thuoc i.vung35 {
  background: rgba(224, 169, 63, 0.25);
}
.mrf-thuoc i.vung25 {
  background: rgba(224, 87, 75, 0.35);
}

/* khi nào, đồng bộ */
.mrf-khi,
.mrf-buoc {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 12.6px;
  line-height: 1.6;
  color: var(--chu-vb);
}
.mrf-khi li {
  padding: 6px 0;
  border-bottom: 1px solid rgba(var(--vien-rgb), 0.55);
}
.mrf-buoc li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  padding: 6px 0;
  border-bottom: 1px solid rgba(var(--vien-rgb), 0.55);
}
.mrf-buocTen {
  flex: 1 1 auto;
  min-width: 0;
}
.mrf-buoc small {
  flex: 1 0 100%;
  overflow-wrap: anywhere;
}
.mrf-kiemTd {
  margin-top: 14px;
  font-family: "Oswald", sans-serif;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--chu3);
}

/* diễn biến */
.mrf-dienBien {
  display: block;
  width: 100%;
  height: 120px;
}
.mrf-dienBien .cot {
  fill: var(--mrf-lam);
}
.mrf-dienBien .giu {
  fill: var(--mrf-xam);
}
/* Phiên ghi trước khi đủ luật: chấm nhỏ, chú thích khi rê chuột. */
.mrf-dienBien .truocLuat {
  fill: var(--canh);
  cursor: help;
}
.mrf-dienBien .nenDo {
  fill: var(--xuong);
  opacity: 0.16;
}

/* truy vết */
.mrf-truyVet {
  border: 1px solid var(--vien);
  border-radius: 4px;
  padding: 10px 16px;
  font-size: 12px;
  color: var(--chu3);
}
.mrf-truyVet summary {
  cursor: pointer;
  font-family: "Oswald", sans-serif;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 10px;
}
.mrf-truyVet ol {
  margin: 10px 0 0 18px;
  font-family: "IBM Plex Mono", monospace;
  line-height: 1.7;
  overflow-wrap: anywhere;
}

/* băng chờ dữ liệu phiên mới */
.mrf-bangO {
  padding-bottom: 0;
}
.mrf-bang {
  border: 1px solid var(--canh);
  border-radius: 4px;
  padding: 10px 14px;
  font-size: 12.8px;
  line-height: 1.6;
  color: var(--chu-vb);
  background: rgba(224, 169, 63, 0.08);
}
.mrf-bang small {
  display: block;
  font-family: "IBM Plex Mono", monospace;
  font-size: 10.5px;
  color: var(--chu3);
  overflow-wrap: anywhere;
}

@media (max-width: 640px) {
  .mrf-nhan {
    white-space: normal;
  }
  .mrf-dauPhai {
    justify-content: flex-start;
  }
  .mrf-traSo {
    font-size: 44px;
  }
}

/* diễn biến: VN-Index làm nền, dải trạng thái MRF, đọc số khi rê chuột (19.10.2026) */
.mrf-dienBien {
  height: 140px;
  cursor: crosshair;
}
.mrf-dienBien .vni {
  fill: none;
  stroke: var(--dong);
  stroke-width: 1.6;
  vector-effect: non-scaling-stroke;
}
.mrf-dienBien .chua {
  fill: var(--vien2);
}
.mrf-dienBien .dbTro {
  stroke: var(--chu2);
  stroke-width: 1;
  stroke-dasharray: 3 3;
  vector-effect: non-scaling-stroke;
}
.mrf-dbDoc {
  margin: 0 0 6px;
  min-height: 1.4em;
  font-family: var(--mono, "IBM Plex Mono", monospace);
  font-size: 12px;
  color: var(--chu-vb);
}
.mrf-dienBien .cot0 {
  fill: var(--chu2);
}