:root {
  --chinh: #0a8fae;
  --chinh-dam: #076f88;
  --nen: #f4f7f9;
  --the: #ffffff;
  --chu: #1f2d3d;
  --chu-phu: #5d6b7a;
  --vien: #dde4ea;
  --dat: #14995a;
  --dat-nen: #e3f6ec;
  --vuot: #d92d20;
  --vuot-nen: #fdecea;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: "Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  color: var(--chu);
  background: var(--nen);
}

.khung { max-width: 1200px; margin: 0 auto; padding: 0 16px; }

.dau-trang {
  background: linear-gradient(120deg, var(--chinh-dam), var(--chinh));
  color: #fff;
  padding: 28px 0 24px;
}
.dau-trang h1 { margin: 0; font-size: 26px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px; }
.dau-trang p { margin: 4px 0 0; opacity: .9; }

/* Thẻ loại trạm */
.the-loai {
  display: flex;
  gap: 8px;
  margin: 20px 0 16px;
  overflow-x: auto;
  scrollbar-width: none;
}
.the-loai::-webkit-scrollbar { display: none; }
.the-loai button {
  flex: 0 0 auto;
  border: 1px solid var(--vien);
  background: var(--the);
  color: var(--chu);
  font: inherit;
  font-weight: 600;
  padding: 10px 16px;
  border-radius: 10px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
}
.the-loai button .so {
  font-size: 12px;
  min-width: 22px;
  padding: 1px 7px;
  border-radius: 20px;
  background: var(--nen);
  color: var(--chu-phu);
}
.the-loai button[aria-selected="true"] { background: var(--chinh); border-color: var(--chinh); color: #fff; }
.the-loai button[aria-selected="true"] .so { background: rgba(255,255,255,.25); color: #fff; }

/* Bố cục chính */
.noi-dung {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}
.ds-tram, .chi-tiet {
  background: var(--the);
  border: 1px solid var(--vien);
  border-radius: 12px;
}
.ds-tram { padding: 8px; }
.ds-tram button {
  width: 100%;
  text-align: left;
  border: 0;
  background: transparent;
  font: inherit;
  color: var(--chu);
  padding: 10px 12px;
  border-radius: 8px;
  cursor: pointer;
}
.ds-tram button + button { margin-top: 4px; }
.ds-tram button:hover { background: var(--nen); }
.ds-tram button.dang-chon { background: var(--chinh); color: #fff; }
.ds-tram small { display: block; opacity: .75; font-size: 12px; }
.ds-tram .trong { padding: 12px; color: var(--chu-phu); }

.chi-tiet { padding: 20px; min-width: 0; }
.chi-tiet h2 { margin: 0 0 4px; font-size: 19px; }
.chi-tiet .ma-tram { color: var(--chu-phu); font-size: 13px; margin-bottom: 16px; }

.thong-bao { padding: 40px 12px; text-align: center; color: var(--chu-phu); }

/* Thẻ con: thời gian thực / giờ / ngày */
.the-con {
  display: flex;
  gap: 4px;
  border-bottom: 2px solid var(--vien);
  margin-bottom: 16px;
  overflow-x: auto;
}
.the-con button {
  flex: 0 0 auto;
  border: 0;
  background: transparent;
  font: inherit;
  font-weight: 600;
  color: var(--chu-phu);
  padding: 10px 14px;
  margin-bottom: -2px;
  border-bottom: 2px solid transparent;
  cursor: pointer;
}
.the-con button[aria-selected="true"] { color: var(--chinh); border-bottom-color: var(--chinh); }

.dong-dau {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin-bottom: 12px;
  font-size: 14px;
  color: var(--chu-phu);
}
.dong-dau b { color: var(--chu); }
.chu-thich { display: flex; gap: 16px; }
.chu-thich span::before {
  content: "";
  display: inline-block;
  width: 10px; height: 10px;
  border-radius: 50%;
  margin-right: 6px;
  background: var(--dat);
}
.chu-thich .vuot::before { background: var(--vuot); }

/* Ô số liệu */
.o-so-lieu {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
  margin-bottom: 18px;
}
.o {
  border: 1px solid var(--vien);
  border-left: 4px solid var(--vien);
  border-radius: 10px;
  padding: 10px 12px;
}
.o.dat { border-left-color: var(--dat); }
.o.vuot { border-left-color: var(--vuot); background: var(--vuot-nen); }
.o .ten { font-size: 13px; color: var(--chu-phu); }
.o .gt { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; }
.o .gt small { font-size: 12px; font-weight: 500; color: var(--chu-phu); margin-left: 3px; }
.o .gh { font-size: 12px; color: var(--chu-phu); }

/* Bảng */
.cuon { overflow-x: auto; border: 1px solid var(--vien); border-radius: 10px; }
table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
th, td { padding: 9px 12px; border-bottom: 1px solid var(--vien); text-align: center; white-space: nowrap; }
th { background: #eef3f6; font-weight: 600; font-size: 13px; }
td:first-child, th:first-child { text-align: left; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:nth-child(even) { background: #fafcfd; }
td.vuot { color: var(--vuot); font-weight: 700; }
.nhan { display: inline-block; padding: 2px 10px; border-radius: 20px; font-size: 13px; font-weight: 600; }
.nhan.dat { background: var(--dat-nen); color: var(--dat); }
.nhan.vuot { background: var(--vuot-nen); color: var(--vuot); }
.nhan.khong { color: var(--chu-phu); }

.bieu-do { margin-bottom: 18px; }
.bieu-do .chon { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 14px; }
.bieu-do select { font: inherit; padding: 6px 10px; border: 1px solid var(--vien); border-radius: 8px; background: #fff; }
.bieu-do .khung-ve { position: relative; height: 280px; }

.ghi-chu { font-size: 13px; color: var(--chu-phu); margin: 16px 0 32px; }
.chan-trang { border-top: 1px solid var(--vien); padding: 16px 0; font-size: 13px; color: var(--chu-phu); background: var(--the); }

@media (max-width: 860px) {
  .noi-dung { grid-template-columns: minmax(0, 1fr); }
  .ds-tram { display: flex; gap: 6px; overflow-x: auto; }
  .ds-tram button { width: auto; flex: 0 0 auto; max-width: 280px; white-space: normal; }
  .ds-tram button + button { margin-top: 0; }
  .chi-tiet { padding: 14px; }
  .dau-trang h1 { font-size: 21px; }
  .bieu-do .khung-ve { height: 230px; }
}