.box-up {
  display: grid;
  grid-template-columns: auto auto auto auto auto;
  justify-content: center;
}
/* video */

@media only screen and (max-width: 576px) {
  .container video {
    width: 450px;
    height: 315px;
  }
  .container i {
    margin: 5px 0px;
  }
  /* cho vòng tròn */
  .box-up {
    grid-template-columns: auto;
  }
}
/* page-header-project */
.page-header-project{
  background: url(../img/img-duan/anhbia_du\ an.jpg) center center no-repeat;
    background-size: cover;
    height: 500px;
}
/* hinh tròn */
.box img {
  --color: #fa6900; /* the color of the border */
  --border: 10px; /* the thickness of the border */
  --offset: 30px; /* control the movement of the border */
  --gap: 5px; /* the gap on hover */

  border-radius: 50%;
  cursor: pointer;
  padding: calc(var(--border) + var(--gap));
  border: var(--offset) solid #0000;
  --_m: radial-gradient(
    50% 50%,
    #000 calc(100% - var(--offset)),
    #0000 calc(100% - var(--border))
  );
  -webkit-mask: var(--_m);
  mask: var(--_m);
  --_g: #0000 calc(99% - var(--border)),
    var(--color) calc(100% - var(--border)) 99%, #0000;
  --_s: var(--offset);
  --_r: 100% 100% at;
  background: radial-gradient(var(--_r) 0 0, var(--_g)) calc(100% + var(--_s))
      calc(100% + var(--_s)),
    radial-gradient(var(--_r) 100% 0, var(--_g)) calc(0% - var(--_s))
      calc(100% + var(--_s)),
    radial-gradient(var(--_r) 0 100%, var(--_g)) calc(100% + var(--_s))
      calc(0% - var(--_s)),
    radial-gradient(var(--_r) 100% 100%, var(--_g)) calc(0% - var(--_s))
      calc(0% - var(--_s));
  background-size: 50% 50%;
  background-repeat: no-repeat;
  transition: 0.4s;
}
.box img:hover {
  --_s: 0px;
}

/* 3 vong tròn */

.container .run-border {
  --color: #8a9b0f; /* the border color */
  --border: 10px; /* the border thickness*/
  --offset: 20px; /* control the offset*/
  --gap: 5px; /* the gap on hover */

  --_c: var(--color) var(--border), #0000 0 calc(100% - var(--border)),
    var(--color) 0;
  --_o: calc(3 * var(--offset));
  padding: calc(var(--gap) + var(--border))
    calc(var(--gap) + var(--border) + var(--offset))
    calc(var(--gap) + var(--border) + var(--offset))
    calc(var(--gap) + var(--border));
  background: linear-gradient(var(--_c)) var(--_o) var(--_o),
    linear-gradient(90deg, var(--_c)) var(--_o) var(--_o);
  background-size: calc(100% - var(--_o)) calc(100% - var(--_o));
  background-repeat: no-repeat;
  filter: grayscale(0.4);
  transition: 0.5s;
  cursor: pointer;
}
.container .run-border:hover {
  background-position: 0px 0px;
  background-size: calc(100% - var(--offset)) calc(100% - var(--offset));
  filter: grayscale(0);
}

/* countdown */
.text-blue {
  color: blue;
}
/* ---footer */
.text-black {
  color: #000 !important;
}