/* M21 Hội đồng vĩ mô (docs/vimo/GIAO_DIEN.md). Chủ dự án yêu cầu đồng bộ với các màn khác ngày
   31.10.2026: bỏ phong cách Học viện (phông tiêu đề có chân riêng của M21), dùng kiểu chung của trang như màn MRF và
   Bảng điện. Phông: Be Vietnam Pro cho chữ (thừa từ body), Newsreader cho tiêu đề màn (như .dau h1),
   Oswald cho nhãn và tiêu đề thẻ (như .pn>.h .t), IBM Plex Mono cho số (như .mn). Nền trang là nền
   chung của #lam; mỗi khối sau khối đầu là một thẻ dựng như .pn (dải nền --g1, --mat, --g3, viền
   --vien, bo 11 px, hai góc đồng). Mọi lớp tiền tố vm-, không đụng lớp chung.
   Giữ màu nghĩa: Lực đỡ, Rủi ro, Tùy ngành theo GIAO_DIEN mục 1; nhãn tám kênh ở thẻ Ngành chịu tác
   động (--vm-thuan, --vm-trung, chủ dự án 20.10.2026); năm vùng đi từ xanh mực (Dịu) qua vàng (Vừa)
   tới đỏ rượu (Rất cao). Biến --vm-*Chu chỉ dùng cho chữ để đạt tương phản 4,5:1 ở nền sáng. */

.vm {
  --vm-do: #8fb3e0;
  --vm-rui: #e58a97;
  --vm-tuy: #c9a646;
  --vm-v1: #5f8fc7;
  --vm-v2: #8fb3e0;
  --vm-v3: #c9a646;
  --vm-v4: #d98a6a;
  --vm-v5: #e58a97;
  /* Nhãn kênh Thuận lợi, Trung tính (chủ dự án 20.10.2026). */
  --vm-thuan: #5cb87a;
  --vm-trung: #d9b44a;
  /* màu chữ: nền tối dùng thẳng màu nghĩa, nền sáng sẫm hơn cho đủ tương phản */
  --vm-thuanChu: var(--vm-thuan);
  --vm-trungChu: var(--vm-trung);
  --vm-chuDong: var(--dong);
  color: var(--chu);
  max-width: 1440px;
  margin: 0 auto;
  padding: 28px 30px 44px;
  box-sizing: border-box;
}
html[data-giao-dien="sang"] .vm {
  --vm-do: #1e3354;
  --vm-rui: #7a1f2b;
  --vm-tuy: #8e6e22;
  --vm-v1: #2f5c93;
  --vm-v2: #5d7fae;
  --vm-v3: #8e6e22;
  --vm-v4: #a5532f;
  --vm-v5: #7a1f2b;
  --vm-thuan: #237a46;
  --vm-trung: #a07a12;
  --vm-thuanChu: #1f6e3f;
  --vm-trungChu: #7a5d0c;
  --vm-chuDong: var(--dong-s);
}
/* khối đầu nằm trên nền trang (như .dau): nền sáng đồng sẫm chưa đủ 4,5:1 nên dùng chữ phụ */
html[data-giao-dien="sang"] .vm-noi > .vm-khoi:first-child {
  --vm-chuDong: var(--chu2);
}
@media (max-width: 760px) {
  .vm {
    padding: 20px 16px 32px;
  }
  .vm .vm-h1 {
    font-size: 24px;
  }
}
.vm *,
.vm *::before,
.vm *::after {
  box-sizing: border-box;
}
.vm .v1 { --vm-m: var(--vm-v1); }
.vm .v2 { --vm-m: var(--vm-v2); }
.vm .v3 { --vm-m: var(--vm-v3); }
.vm .v4 { --vm-m: var(--vm-v4); }
.vm .v5 { --vm-m: var(--vm-v5); }
.vm .v0 { --vm-m: var(--chu2); }

.vm-mono {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
}
/* nhãn hoa: Oswald như .pn>.h .t; trên nền trang dùng chữ phụ cho đủ tương phản */
.vm-nhan {
  font-family: "Oswald", sans-serif;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--chu2);
}
.vm-noi > .vm-khoi:first-child > .vm-nhan {
  margin-bottom: 8px;
}
/* tiêu đề màn: như .dau h1 */
.vm-h1 {
  margin: 0;
  font-family: "Newsreader", Georgia, serif;
  font-weight: 500;
  font-size: 29px;
  line-height: 1.1;
  letter-spacing: -0.015em;
  text-wrap: balance;
  color: var(--chu-dam);
}
.vm-h1 em {
  font-style: italic;
  color: var(--vm-m);
}
/* tiêu đề thẻ: phông, độ đậm, màu như .pn>.h .t; giữ chữ thường (không đổi chữ hiện ra) nên
   cỡ 12 px cho dễ đọc dấu tiếng Việt */
.vm-h2 {
  margin: 0;
  font-family: "Oswald", sans-serif;
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0.12em;
  color: var(--dong-s);
}
.vm h3 {
  margin: 0 0 4px;
  font-size: 13px;
  font-weight: 600;
  color: var(--vm-chuDong);
}
/* chữ thân: như p.vb */
.vm-vb {
  margin: 0;
  max-width: 64ch;
  color: var(--chu-vb);
  font-size: 13.8px;
  line-height: 1.76;
}
.vm-noi > .vm-khoi:first-child > .vm-vb {
  margin-top: 7px;
}
/* chú thích: như .ghi, chữ phụ --chu2 cho đủ tương phản */
.vm-ghi {
  margin: 10px 0 0;
  max-width: 90ch;
  color: var(--chu2);
  font-size: 11.4px;
  line-height: 1.65;
}
.vm-chuaCo {
  color: var(--chu2);
  font-size: 12.5px;
  font-style: italic;
}

/* thanh thẻ: khung như .nut, thẻ đang mở như .tb.on */
.vm-the {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 20px;
}
.vm-the button {
  min-height: 44px;
  padding: 7px 16px;
  border: 1px solid var(--vien2);
  border-radius: 7px;
  background: rgba(var(--phu-rgb), 0.035);
  color: var(--chu-vb);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}
.vm-the button:hover {
  border-color: var(--dong);
  color: var(--chu);
}
.vm-the button.on {
  background: linear-gradient(180deg, rgba(200, 162, 75, 0.22), rgba(200, 162, 75, 0.1));
  border-color: var(--dong);
  color: var(--chu-dam);
}
.vm-the button b {
  font-weight: 500;
  margin-left: 4px;
}

/* khối đầu: như .dau, nằm trên nền trang */
.vm-khoi {
  min-width: 0;
}
.vm-noi > .vm-khoi:first-child {
  padding: 0 0 4px;
}
/* các khối sau: thẻ như .pn */
.vm-noi > .vm-khoi:not(:first-child) {
  position: relative;
  margin-top: 16px;
  padding: 17px;
  background: linear-gradient(178deg, var(--g1) 0%, var(--mat) 46%, var(--g3) 100%);
  border: 1px solid var(--vien);
  border-radius: 11px;
  box-shadow: 0 14px 36px rgba(var(--bong-rgb), 0.42), inset 0 1px 0 rgba(var(--phu-rgb), 0.045);
}
.vm-noi > .vm-khoi:not(:first-child)::before,
.vm-noi > .vm-khoi:not(:first-child)::after {
  content: "";
  position: absolute;
  width: 15px;
  height: 15px;
  pointer-events: none;
}
.vm-noi > .vm-khoi:not(:first-child)::before {
  top: -1px;
  left: -1px;
  border-top: 1px solid var(--dong);
  border-left: 1px solid var(--dong);
  border-radius: 11px 0 0 0;
  opacity: 0.55;
}
.vm-noi > .vm-khoi:not(:first-child)::after {
  bottom: -1px;
  right: -1px;
  border-bottom: 1px solid var(--dong);
  border-right: 1px solid var(--dong);
  border-radius: 0 0 11px 0;
  opacity: 0.55;
}
/* dòng tiêu đề của thẻ: như .pn>.h (đệm 13 px 17 px, gạch dưới --vien) */
.vm-noi > .vm-khoi:not(:first-child) > .vm-tieuDe:first-child,
.vm-noi > .vm-khoi:not(:first-child) > .vm-h2:first-child,
.vm-noi > .vm-khoi:not(:first-child) > .vm-nhan:first-child {
  margin: -17px -17px 17px;
  padding: 13px 17px;
  border-bottom: 1px solid var(--vien);
}
.vm-noi > .vm-khoi:not(:first-child) > .vm-nhan:first-child {
  color: var(--dong-s);
}
.vm-tieuDe {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 18px;
  margin-bottom: 18px;
}
.vm-tieuDe > span {
  font-size: 11.4px;
  line-height: 1.5;
  color: var(--chu2);
}
.vm-noi > .vm-khoi:not(:first-child) > .vm-tieuDe:first-child > span {
  margin-left: auto;
  text-align: right;
}

/* đầu thẻ thước đo */
.vm-dau {
  display: flex;
  flex-wrap: wrap;
  gap: 28px 52px;
  align-items: center;
}
.vm-dauTrai {
  flex: 1 1 460px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.vm-ba {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--vien);
}
.vm-o {
  padding: 13px 10px 2px 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.vm-oTen {
  font-size: 12.5px;
  color: var(--chu2);
}
.vm-oSo {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 30px;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
  color: var(--vm-m);
}
.vm-oPhu {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 12px;
  color: var(--chu-vb);
}
.vm-mrf {
  margin: 0;
  font-size: 12.5px;
  color: var(--chu2);
}
.vm-mrf a {
  color: var(--vm-chuDong);
}

/* đồng hồ năm vùng */
.vm-dongHo {
  flex: 1 1 420px;
  min-width: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.vm-dongHo svg {
  width: 100%;
  max-width: 560px;
  display: block;
}
.vm-cung {
  fill: none;
  stroke: var(--vm-m);
  stroke-width: 30;
}
.vm-kim {
  stroke: var(--chu-dam);
  stroke-width: 4;
  stroke-linecap: round;
}
.vm-tam {
  fill: var(--chu-dam);
}
.vm-kimSo {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 54px;
  fill: var(--chu-dam);
  /* viền màu nền để kim không đè lên số */
  paint-order: stroke;
  stroke: var(--nen);
  stroke-width: 12px;
  stroke-linejoin: round;
}
.vm-truc {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 13px;
  fill: var(--chu2);
}
.vm-dongHo figcaption {
  text-align: center;
  font-size: 12px;
  color: var(--chu-vb);
}
.vm-dongHo figcaption p {
  margin: 6px 0 0;
  color: var(--chu2);
}
.vm-chuThich {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 16px;
}
.vm-chuThich span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.vm-chuThich b {
  font-weight: 400;
  color: var(--chu2);
}
.vm-cham {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  background: var(--vm-m);
  flex: none;
}

/* lịch sử */
.vm-docSo {
  font-size: 12.5px;
  color: var(--chu-vb);
  margin-bottom: 6px;
  min-height: 1.5em;
}
.vm-docSo b {
  color: var(--chu-dam);
  font-weight: 600;
}
.vm-lichSu {
  width: 100%;
  height: auto;
  display: block;
}
.vm-dai {
  fill: var(--vm-m);
  opacity: 0.1;
}
.vm-luoi {
  stroke: var(--vien2);
  stroke-width: 1;
}
.vm-duong {
  fill: none;
  stroke: var(--chu-dam);
  stroke-width: 2;
  stroke-linejoin: round;
}
.vm-diemCuoi {
  fill: var(--dong);
}
.vm-tro {
  stroke: var(--dong);
  stroke-width: 1;
  stroke-dasharray: 3 3;
}
.vm-bat {
  fill: transparent;
  cursor: crosshair;
}

/* mười hai thanh */
.vm-dsThanh {
  list-style: none;
  margin: 0;
  padding: 0;
}
.vm-thanh {
  display: grid;
  grid-template-columns: minmax(0, 2.4fr) minmax(0, 1.5fr) minmax(0, 2.4fr) 52px 56px;
  gap: 6px 16px;
  align-items: center;
  padding: 11px 0;
  border-top: 1px solid var(--vien);
}
.vm-thTen,
.vm-thSo {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.vm-thTen b {
  font-size: 14px;
  font-weight: 600;
  color: var(--chu-dam);
}
.vm-thTen span,
.vm-thSo span {
  font-size: 12px;
  color: var(--chu2);
}
.vm-thSo b {
  font-size: 15px;
  font-weight: 500;
  color: var(--chu-dam);
}
.vm-mangSang .vm-thSo b,
.vm-mangSang .vm-thSo span,
.vm-mangSang .vm-thMuc,
.vm-mangSang .vm-thDoi {
  font-style: italic;
}
.vm-thVach {
  position: relative;
  height: 10px;
  border-radius: 5px;
  background: rgba(var(--phu-rgb), 0.07);
}
.vm-thDay {
  position: absolute;
  inset: 0 auto 0 0;
  border-radius: 5px;
  background: var(--dong);
}
.vm-thCu {
  position: absolute;
  top: -3px;
  bottom: -3px;
  width: 2px;
  margin-left: -1px;
  background: var(--chu2);
  opacity: 0.7;
}
.vm-thCuMau {
  display: inline-block;
  width: 2px;
  height: 11px;
  background: var(--chu2);
  vertical-align: -1px;
}
.vm-thMuc {
  text-align: right;
  font-size: 15px;
  color: var(--chu-dam);
}
.vm-thDoi {
  text-align: right;
  font-size: 12.5px;
  color: var(--chu2);
}
@media (max-width: 760px) {
  .vm-thanh {
    grid-template-columns: minmax(0, 1fr) auto auto;
  }
  .vm-thTen {
    grid-column: 1 / -1;
  }
  .vm-thSo {
    grid-column: 1 / -1;
  }
  .vm-thVach {
    grid-column: 1;
  }
}

/* độ tin cậy, cách tính */
.vm-mat {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.vm-cuon {
  overflow-x: auto;
  max-width: 640px;
}
.vm-bang {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.vm-bang caption {
  text-align: left;
  font-size: 12.5px;
  color: var(--chu2);
  padding-bottom: 8px;
}
.vm-bang th,
.vm-bang td {
  padding: 8px 10px 8px 0;
  border-top: 1px solid var(--vien);
  text-align: right;
  white-space: nowrap;
}
.vm-bang th:first-child,
.vm-bang td:first-child {
  text-align: left;
}
.vm-bang th {
  font-weight: 500;
  color: var(--chu2);
  font-size: 12px;
}
.vm-bang td:first-child {
  display: flex;
  align-items: center;
  gap: 8px;
}
.vm-hai,
.vm-cach {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 16px 32px;
  margin-top: 6px;
}
.vm-hai p,
.vm-cach p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--chu-vb);
}
.vm-cach {
  margin-top: 16px;
}
.vm-tinhLuc {
  margin-top: 0;
}

/* mười hai kênh */
.vm-luoiKenh {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr));
  gap: 16px;
}
.vm-kenh {
  border: 1px solid var(--vien);
  border-top: 2px solid var(--vien2);
  border-radius: 7px;
  padding: 18px 18px 16px;
  display: flex;
  flex-direction: column;
  gap: 11px;
  min-width: 0;
}
.vm-kDau {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}
.vm-kTen {
  font-size: 14px;
  font-weight: 600;
  color: var(--chu-dam);
}
.vm-kNhan {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 11px;
  padding: 2px 9px;
  border-radius: 2px;
  color: var(--nen);
  background: var(--chu2);
}
.vm-kSo {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.vm-kSo b {
  font-size: 28px;
  line-height: 1.15;
  font-weight: 400;
  color: var(--chu-dam);
}
.vm-kSo span {
  font-size: 12.5px;
  color: var(--chu2);
}
.vm-kPhu {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 12.5px;
  color: var(--chu-vb);
}
.vm-kPhu b {
  font-weight: 500;
  color: var(--chu-dam);
}
.vm .vm-cu,
.vm .vm-cu b {
  font-style: italic;
}
.vm-nho svg {
  width: 100%;
  height: 80px;
  display: block;
  background: rgba(var(--toi-rgb), 0.55);
  border-radius: 2px;
}
html[data-giao-dien="sang"] .vm-nho svg {
  background: rgba(var(--phu-rgb), 0.04);
}
.vm-nho polyline {
  fill: none;
  stroke: var(--dong);
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
  stroke-linejoin: round;
}
.vm-khong {
  stroke: var(--vien2);
  stroke-width: 1;
  stroke-dasharray: 4 4;
  vector-effect: non-scaling-stroke;
}
.vm-nhoTrong {
  min-height: 40px;
}
.vm-nhoChu {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-top: 4px;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 11px;
  color: var(--chu2);
}
.vm-nhoChu span:nth-child(2) {
  text-align: center;
  min-width: 0;
}
.vm-kDoc {
  margin: 0;
  font-size: 13.8px;
  line-height: 1.76;
  color: var(--chu-vb);
}
.vm-kNguon {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 4px 10px;
  margin: 0;
  border-top: 1px solid var(--vien);
  padding-top: 10px;
  font-size: 12px;
  color: var(--chu2);
}
.vm-kNguon dt {
  color: var(--vm-chuDong);
  font-weight: 600;
}
.vm-kNguon dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.vm-chan {
  border-top: 1px solid var(--vien);
  padding-top: 16px;
  margin-top: 10px;
  font-size: 12px;
  color: var(--chu2);
}
.vm-chan p {
  margin: 0 0 4px;
}

/* màu nghĩa Lực đỡ, Rủi ro, Tùy ngành */
.vm .p-do { --vm-p: var(--vm-do); }
.vm .p-rui { --vm-p: var(--vm-rui); }
.vm .p-tuy { --vm-p: var(--vm-tuy); }
.vm .vm-cham.p-do,
.vm .vm-cham.p-rui,
.vm .vm-cham.p-tuy {
  background: var(--vm-p);
}
.vm b.p-do,
.vm b.p-rui {
  color: var(--vm-p);
}
.vm-kenh.p-do,
.vm-kenh.p-rui,
.vm-kenh.p-tuy {
  border-top-color: var(--vm-p);
}
.vm-kenh.p-do .vm-kNhan,
.vm-kenh.p-rui .vm-kNhan,
.vm-kenh.p-tuy .vm-kNhan {
  background: var(--vm-p);
}

/* tổng quan */
.vm-tdHai span {
  display: block;
}
.vm-tomTat {
  margin-top: 16px;
  max-width: 70ch;
}
.vm-tomTat b {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-weight: 500;
  color: var(--chu-dam);
}
.vm-haiLaBan {
  display: flex;
  flex-wrap: wrap;
  gap: 18px 48px;
  margin-top: 24px;
}
.vm-laBan {
  display: flex;
  align-items: center;
  gap: 14px;
}
.vm-laBan svg {
  width: 112px;
  height: 112px;
  flex: none;
}
.vm-lbNen {
  fill: none;
  stroke: var(--vien);
  stroke-width: 14;
}
.vm-lb {
  fill: none;
  stroke: var(--vm-p);
  stroke-width: 14;
}
.vm-lbSo {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 24px;
  fill: var(--chu-dam);
}
.vm-h3 {
  margin: 0 0 4px;
}
.vm-lbChu {
  font-size: 12px;
  color: var(--chu2);
}
.vm-chuPhia {
  justify-content: flex-start;
  margin-top: 14px;
  font-size: 12px;
  color: var(--chu-vb);
}
.vm-canCan {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 32px;
}
.vm-motCot {
  grid-template-columns: minmax(0, 1fr);
  margin-top: 18px;
}
@media (max-width: 760px) {
  .vm-canCan {
    grid-template-columns: minmax(0, 1fr);
  }
}
.vm-cot {
  border-top: 2px solid var(--vm-p);
  padding-top: 12px;
  min-width: 0;
}
.vm-cot .vm-tieuDe {
  margin-bottom: 8px;
}
.vm-dsMuc,
.vm-bienBan,
.vm-dsCau,
.vm-lich {
  list-style: none;
  margin: 0;
  padding: 0;
}
.vm-muc {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 10px;
  padding: 12px 6px;
  border-top: 1px solid var(--vien);
  cursor: pointer;
  border-radius: 3px;
}
.vm-muc:hover,
.vm-muc:focus-visible {
  background: rgba(var(--phu-rgb), 0.04);
  outline: none;
}
.vm-mucSo {
  color: var(--vm-p);
  font-size: 13px;
}
.vm-muc b {
  font-size: 14.5px;
  color: var(--chu-dam);
}
.vm-mucNoi {
  display: block;
  font-size: 18px;
  color: var(--vm-p);
  margin: 2px 0;
}
.vm-muc p {
  margin: 2px 0 4px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--chu-vb);
}
.vm-mucNhom {
  font-size: 11.5px;
  color: var(--chu2);
  overflow-wrap: anywhere;
}
.vm-bienBan {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 16px 0;
}
.vm-luot {
  border-left: 3px solid var(--vm-p);
  padding: 4px 0 4px 14px;
  max-width: 80ch;
}
.vm-luot:nth-child(even) {
  margin-left: clamp(0px, 6vw, 72px);
}
.vm-luotTen {
  font-family: "Oswald", sans-serif;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--vm-p);
  font-weight: 500;
}
.vm-luot p {
  margin: 4px 0 0;
  font-size: 13.8px;
  line-height: 1.76;
  color: var(--chu-vb);
}
.vm-hai ul {
  margin: 0;
  padding-left: 18px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--chu-vb);
}
.vm-lich li {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr);
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid var(--vien);
}
.vm-lichNgay {
  color: var(--vm-chuDong);
  font-size: 13px;
}
.vm-lich b {
  display: block;
  font-size: 14px;
  color: var(--chu-dam);
}
.vm-lich span {
  font-size: 12.5px;
  color: var(--chu2);
}
.vm-dsCau {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 16px;
  margin-top: 14px;
}
.vm-cau {
  border: 1px solid var(--vien);
  border-radius: 7px;
  padding: 16px;
}
.vm-cau b {
  font-size: 14px;
  font-weight: 600;
  color: var(--chu-dam);
}
.vm-cau p {
  margin: 8px 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--chu-vb);
}
.vm-chuaBan {
  margin-top: 12px;
  border-left: 3px solid var(--dong);
  padding-left: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* ngành */
.vm-choDuyet,
.vm-nhanNhap {
  margin-top: 14px;
  font-size: 13px;
  color: var(--vm-chuDong);
  font-weight: 600;
}
.vm-cuonRong {
  max-width: none;
}
.vm-maTran th,
.vm-maTran td {
  white-space: normal;
  vertical-align: top;
}
.vm-maTran thead th {
  min-width: 96px;
}
.vm-maTran thead th b,
.vm-maTran thead th span {
  display: block;
}
.vm-maTran thead th b {
  color: var(--chu-dam);
  font-size: 12px;
}
.vm-maTran tbody th {
  text-align: left;
  font-weight: 600;
  color: var(--chu-dam);
  min-width: 140px;
}
.vm-maTran .vm-oNganh {
  text-align: center;
  font-size: 15px;
  color: var(--chu2);
}
.vm-maTran .vm-oNganh.p-do,
.vm-maTran .vm-oNganh.p-rui {
  color: var(--vm-p);
}
.vm-ghiChu {
  text-align: left !important;
  min-width: 220px;
  color: var(--chu-vb);
  font-size: 12.5px;
}

/* VN-Index trên biểu đồ lịch sử thước đo */
.vm-duongVni {
  fill: none;
  stroke: var(--dong);
  stroke-width: 1.6;
  stroke-linejoin: round;
  opacity: 0.85;
}
.vm-trucVni {
  fill: var(--dong);
}
.vm-gach {
  display: inline-block;
  width: 18px;
  height: 0;
  border-top: 2px solid;
  vertical-align: middle;
}
.vm-gachTong {
  border-color: var(--chu-dam);
}
.vm-gachVni {
  border-color: var(--dong);
}

/* đọc số khi rê chuột vào biểu đồ nhỏ */
.vm-nho {
  position: relative;
}
.vm-nho svg {
  cursor: crosshair;
}
.vm-nhoDoc {
  position: absolute;
  top: 4px;
  left: 8px;
  visibility: hidden;
  pointer-events: none;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 11.5px;
  padding: 1px 6px;
  border-radius: 2px;
  color: var(--chu-dam);
  background: rgba(var(--toi-rgb), 0.85);
  border: 1px solid var(--vien2);
}
.vm-nhoDoc.phai {
  left: auto;
  right: 8px;
}
.vm-nhoTro {
  stroke: var(--chu2);
  stroke-width: 1;
  stroke-dasharray: 3 3;
  vector-effect: non-scaling-stroke;
}
.vm-nhoDiem {
  fill: var(--chu-dam);
  stroke: none;
}

.vm-maTran thead th:not(:first-child):not(:last-child) {
  text-align: center;
}

.vm-ghiChuSo {
  display: block;
  margin-top: 4px;
  font-size: 11.5px;
  font-style: normal;
  color: var(--canh, var(--dong));
}

/* số tạm tính tháng đang chạy, cạnh số chính thức */
.vm-tamTinh,
.vm-thSo span.vm-tamTinh,
.vm-kSo span.vm-tamTinh {
  display: block;
  margin-top: 3px;
  font-size: 11.5px;
  font-style: normal;
  color: var(--vm-chuDong);
}
.vm-tamTong {
  margin: 0 0 8px;
  font-size: 12.5px;
  color: var(--chu2);
}
.vm-tamTong b {
  font-weight: 500;
}

/* bảng ngành bản 1: tám kênh và cột đang tác động */
.vm-luoiKn {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr));
  gap: 10px;
  margin: 12px 0;
}
.vm-kn {
  border: 1px solid var(--vien);
  border-top-width: 3px;
  border-radius: 7px;
  padding: 10px 12px;
  min-width: 0;
}
.vm-kn p {
  margin: 6px 0 4px;
  font-size: 13px;
  color: var(--chu-dam);
}
.vm-kn .vm-mono {
  display: block;
  font-size: 11.5px;
  color: var(--chu2);
  white-space: normal;
  overflow-wrap: anywhere;
}
.vm-knDau {
  display: flex;
  justify-content: space-between;
  gap: 8px;
}
.vm-knTT {
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.vm-kn.tt-cang,
.vm-maTran th.tt-cang {
  border-top-color: var(--vm-rui);
}
.vm-kn.tt-diu,
.vm-maTran th.tt-diu {
  border-top-color: var(--vm-thuan);
}
.vm-kn.tt-trung,
.vm-maTran th.tt-trung {
  border-top-color: var(--vm-trung);
}
.vm-kn.tt-chua {
  border-top-color: var(--chu2);
}
.tt-cang .vm-knTT,
.vm-maTran th.tt-cang span {
  color: var(--vm-rui);
}
.tt-diu .vm-knTT,
.vm-maTran th.tt-diu span {
  color: var(--vm-thuan);
}
.tt-trung .vm-knTT,
.vm-maTran th.tt-trung span {
  color: var(--vm-trung);
}
/* nền sáng: chữ nhãn sẫm hơn cho đủ tương phản 4,5:1, viền vẫn giữ màu nghĩa */
html[data-giao-dien="sang"] .tt-diu .vm-knTT,
html[data-giao-dien="sang"] .vm-maTran th.tt-diu span {
  color: var(--vm-thuanChu);
}
html[data-giao-dien="sang"] .tt-trung .vm-knTT,
html[data-giao-dien="sang"] .vm-maTran th.tt-trung span {
  color: var(--vm-trungChu);
}
.vm-maTran td.vm-dangTac,
.vm-maTran thead th:last-child {
  text-align: left;
}
.vm-maTran .vm-oTrung {
  opacity: 0.45;
}
.vm-dangTac {
  min-width: 260px;
  font-size: 12px;
}
.vm-dangTac ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.vm-dangTac li + li {
  margin-top: 3px;
}
.vm-dangTac li b {
  font-weight: 600;
}
.vm-dangTac li.p-do b {
  color: var(--vm-do);
}
.vm-dangTac li.p-rui b {
  color: var(--vm-rui);
}

/* nhãn mức căng cạnh mục cán cân */
.vm-mucCang {
  display: block;
  margin: 2px 0 4px;
  font-size: 11.5px;
  color: var(--vm-p, var(--chu2));
}

/* tên chỉ báo có câu giải nghĩa khi rê chuột */
.vm-coGiai {
  cursor: help;
  text-decoration: underline dotted;
  text-underline-offset: 3px;
}

/* lịch sử thước đo: đoạn tháng đang chạy (tạm tính, VN-Index phiên gần nhất) */
.vm-lichSu .vm-tam {
  stroke-dasharray: 5 4;
}
.vm-chuThich .vm-gachTam {
  border-top-style: dashed;
  border-top-color: var(--chu2);
}

/* Lịch sử áp lực theo tuần (chủ dự án 19.10.2026). */
.vm .vm-duongTong {
  stroke: var(--vm-tuy);
  stroke-width: 1.6;
}
.vm .vm-tso {
  fill: var(--chu3);
  font-size: 11px;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
}

/* Tin chính thống 7 ngày (docs/vimo/TIN_CHINH_THONG.md mục 7). */
.vm-tinHai {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 16px 32px;
  margin-top: 6px;
}
.vm-dsTin {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
}
.vm-dsTin li {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 10px;
  padding: 9px 0;
  border-top: 1px solid var(--vien);
}
.vm-tinNgay {
  color: var(--vm-chuDong);
  font-size: 12.5px;
}
.vm-tinCq {
  display: block;
  font-size: 11.5px;
  color: var(--chu2);
}
.vm-dsTin a,
.vm-mucTin a {
  color: var(--chu-dam);
  font-size: 13.5px;
  line-height: 1.5;
  text-decoration: underline;
  text-decoration-color: var(--vien2);
  text-underline-offset: 3px;
  overflow-wrap: anywhere;
}
.vm-dsTin a:hover,
.vm-mucTin a:hover {
  text-decoration-color: var(--dong);
}
.vm-tinDung {
  display: inline-block;
  margin-left: 8px;
  font-size: 11px;
  color: var(--vm-chuDong);
}
.vm-mucTin {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  color: var(--chu2);
  overflow-wrap: anywhere;
}
.vm-mucTin a {
  font-size: 12px;
}

/* Chip kỳ số liệu và khối Nguồn và độ tươi (docs/vimo/von/SPEC.md mục 2.5, 2.6, 30.10.2026) */
.vm-chipKy {
  display: inline-block;
  margin-left: 6px;
  padding: 0 6px;
  border: 1px solid var(--vien, rgba(127, 127, 127, 0.35));
  border-radius: 9px;
  color: var(--chu2);
  font-size: 11px;
  line-height: 17px;
  white-space: nowrap;
  vertical-align: middle;
}
.vm-chipKy.k-vang {
  border-color: var(--vm-trung);
  color: var(--vm-trungChu);
}
.vm-chipKy.k-xanh {
  border-color: var(--vm-thuan);
  color: var(--vm-thuanChu);
}
.vm-chipKy.k-thieu {
  font-style: italic;
}
.vm-bangNguon {
  width: 100%;
}
.vm-bangNguon th,
.vm-bangNguon td {
  text-align: left;
  font-size: 12.5px;
}
.vm-bangNguon tr.k-vang td:last-child {
  color: var(--vm-trungChu);
}
.vm-bangNguon tr.k-do th,
.vm-bangNguon tr.k-do td {
  color: var(--vm-rui);
}
.vm-bangNguon tr.k-do td:last-child {
  font-weight: 600;
}

/* Thẻ Thị trường vốn (docs/vimo/von/SPEC.md mục 6, 31.10.2026) */
.vm-luoiOSo {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-top: 18px;
}
.vm-oSoVon {
  min-width: 0;
  padding: 12px 14px;
  border: 1px solid var(--vien);
  border-radius: 7px;
}
.vm-oTen {
  font-size: 12.5px;
  color: var(--chu2);
}
.vm-oGiaTri {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 24px;
  line-height: 1.25;
  font-variant-numeric: tabular-nums;
  margin-top: 4px;
}
.vm-oPhuVon {
  font-size: 12px;
  color: var(--chu2);
  margin-top: 4px;
}
.vm-trong {
  color: var(--chu2);
  font-style: italic;
  border-bottom: 1px dotted var(--vien2);
  cursor: help;
}
.vm-bang .vm-tang {
  color: var(--vm-thuanChu);
}
.vm-bang .vm-giam {
  color: var(--vm-rui);
}
.vm-chuThichMau {
  font-style: italic;
}
.vm-dc {
  display: block;
  width: 100%;
  max-width: 720px;
  height: auto;
  margin: 8px 0;
}
.vm-dc polyline {
  fill: none;
  stroke-width: 2;
}
.vm-dc .vm-dcMoi {
  stroke: var(--vm-trung);
}
.vm-dc .vm-dcCu {
  stroke: var(--chu2);
  stroke-dasharray: 5 4;
}
.vm-dc text {
  fill: var(--chu2);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 11px;
}
.vm-lenhGoc {
  white-space: normal;
  font-size: 12px;
}
.vm-bang th[colspan],
.vm-bang td[colspan] {
  text-align: left;
}
@media (max-width: 760px) {
  .vm-luoiOSo {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .vm-oGiaTri {
    font-size: 20px;
  }
}
.vm-bang .vm-cachDoc {
  white-space: normal;
  text-align: left;
  min-width: 180px;
  font-size: 12px;
  color: var(--chu2);
}
/* Bảng chênh lệch vừa khung từ 1280 px: tiêu đề và cột Cách đọc xuống dòng (W4 vòng 2) */
.vm-chenhLech th,
.vm-chenhLech td {
  white-space: normal;
}
.vm-chenhLech thead th {
  vertical-align: bottom;
}
.vm-chenhLech .vm-cachDoc {
  min-width: 0;
  max-width: 220px;
}
@media (max-width: 760px) {
  .vm-chenhLech .vm-cachDoc {
    min-width: 160px;
  }
}