.vi-only {
  display: none;
}
html[lang="vi"] .en-only {
  display: none;
}
html[lang="vi"] .vi-only {
  display: initial;
}
.portfolio {
  background: #eaf1f3;
}
.portfolio-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: #b9cbd2;
  border: 1px solid #b9cbd2;
  border-radius: 20px;
  overflow: hidden;
  margin-bottom: 28px;
}
.portfolio-stats div {
  background: #fff;
  padding: 28px;
  display: grid;
  gap: 4px;
}
.portfolio-stats strong {
  font-size: clamp(2.8rem, 5vw, 5rem);
  line-height: 1;
  color: #087f7b;
}
.portfolio-stats span {
  font-weight: 750;
  color: #5d6b78;
}
.portfolio-lanes {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 15px;
}
.portfolio-lane {
  background: #fff;
  border: 1px solid #d7e0e5;
  border-radius: 20px;
  padding: 28px;
}
.portfolio-lane:last-child {
  grid-column: 1/-1;
}
.lane-no {
  font:
    800 0.68rem/1.4 ui-monospace,
    monospace;
  letter-spacing: 0.1em;
  color: #087f7b;
}
.portfolio-lane h3 {
  font:
    720 1.55rem/1.2 "Segoe UI",
    Arial,
    sans-serif;
  margin: 20px 0 10px;
}
.portfolio-lane p {
  font-weight: 750;
  color: #102238;
}
.portfolio-lane small {
  display: block;
  color: #5d6b78;
  line-height: 1.6;
}
.portfolio-boundary {
  margin-top: 20px;
  padding: 25px 28px;
  border-left: 4px solid #00b8c8;
  background: #0b1f36;
  color: #dbe6ee;
  border-radius: 0 18px 18px 0;
}
.portfolio-boundary b {
  color: #fff;
}
.portfolio-boundary p {
  margin: 0.45em 0;
}
.portfolio-boundary a {
  color: #69e3e7;
  font-weight: 800;
}
@media (max-width: 760px) {
  .portfolio-stats,
  .portfolio-lanes {
    grid-template-columns: 1fr;
  }
  .portfolio-lane:last-child {
    grid-column: auto;
  }
}