.feature_circle {
  display: flex;
  justify-content: center;
}
.container .row .feature_circle hr {
  border: 3px solid green;
}
/* tạo hinh tròn cho 5 hình ảnh*/
.future_box-up {
  display: grid;
  grid-template-columns: auto auto auto auto auto;
  justify-content: center;
}
.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 */
  height: 400px;
  width: 400px;
  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;
}

/* 5 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);
}

/* ----marquee */
/* @media only screen and (max-width: 576px) {
  .container .row marquee {
    display: grid;
    grid-template-columns: auto;
  }
} */

/* <!-- Portfolio Gallery Grid --> */
* {
  box-sizing: border-box;
}

.caycanh_body {
  background-color: #f1f1f1;
  padding: 20px;
  font-family: Arial;
}

/* Center website */
.caycanh_main {
  max-width: 1200px;
  margin: auto;
}

#caycanh_product .container h1 {
  font-size: 50px;
  word-break: break-all;
}

.row {
  margin: 10px -16px;
}

/* Add padding BETWEEN each column */
.row,
.row > .caycanh_column {
  padding: 8px;
}


/* Create three equal columns that floats next to each other */
.caycanh_column {
  float: left;
  width: 25% !important;
  height:430px;
  margin-bottom:10px;
  display: none; /* Hide all elements by default */
}
@media only screen and (max-width: 576px) {
  .caycanh_column {
    width: 100% !important;
  }
}
#caycanh_product .container .caycanh_column .card img {
  height: 350px;
}
#caycanh_product .caycanh_column:hover .card-img-top {
  transition: all ease-in 0.5s;
  transform: scale(1.05);
  z-index: 20;
  border: 4px solid rgb(25, 212, 25) !important;
}
.row .caycanh_column .card h5 {
  text-align: center;
  margin: 4px auto;
  background-color: rgb(27, 216, 62);
  border-radius: 25px;
  width: 70%;
}
/* nut chi tiết */
.card {
    position: relative;
     width: 100%;
  }
  .image {
    opacity: 1;
    display: block;
    width: 100%;
    /*height: auto;*/
    /* transition: .5s ease; */
    backface-visibility: hidden;
  }

  .middle {
    transition: .5s ease;
    opacity: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    text-align: center;

  }
.middle button{
    border-radius: 25px;
}
  .card:hover .image {
    opacity: 0.3;
  }

  .card:hover .middle {
    opacity: 1;
    z-index: 10000;
  }
  .text {
    background-color: #04AA6D;
    color: white;
    font-size: 16px;
    padding: 16px 32px;

  }
/* ///// */
/* ///// */

.row .caycanh_column .card p {
  margin-left: 10px;
  font-weight: bold;
  font-size: 20px;
}
/* Clear floats after rows */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Content */
/* .content {
  background-color: white;
  padding: 20px;
} */

/* The "show" class is added to the filtered elements */
.caycanh_show {
  display: block;
}

/* Style the buttons */
#myBtnContainer .btn_filter {
  border: none;
  outline: none;
  width: fit-content;
  padding: 5px;
  background-color: rgb(30, 214, 48);
  cursor: pointer;
  color: rgb(16, 12, 12);
  border-radius: 25px;
  font-weight: bold;
}

#caycanh_product #myBtnContainer .btn_filter:hover {
    background-color: #ddd;
  }

  #caycanh_product #myBtnContainer .btn_filter.h_active {
    background-color: #666;
    color: white;
  }