body {
  background-color: white !important;
  font-family: 'Inter', sans-serif !important;
}

.product-title {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-weight: 800;
    font-size: 56.7px;
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.7);
  }

  .product-section img{
    max-height: 350px !important;
    }
  
  @media (max-width: 991.98px) {
    .product-title  {
      font-size: 2.2rem;
    }
  }
  
  /* Mobile */
  @media (max-width: 767.98px) {
    .product-title  {
      font-size: 1.6rem;
    }
  }


  .breadcrumb {
    --bs-breadcrumb-divider: ">";
  }

  .breadcrumb li{
    color: #999999;
    font-weight: bold;
  }
  
  .breadcrumb-item a {
    color: #999999;
    font-weight: bold;
    text-decoration: none !important;
  }
  .breadcrumb a:hover {
    text-decoration: underline;
    color: #0056b3; /* Màu khi hover */
  }
  .font-italic {
    font-style: italic;
    color: #FBAF17;
    font-size: 38px;
    font-weight: 800;
  }
  .baner_du h5{
    font-size: 15.9px;
    font-weight: 600;
    color: #9C9DA8;
  }
  .baner_du h4{
    font-size: 30.4px;
    font-weight: 800;
    color: #333333;
  }
.text-danger {
    color: #D63228; /* hoặc chọn màu đỏ bạn thích */
  }

  .damsatClass p {
    font-size: 15.4px;
    color: #333333;
    font-weight: 300;
  }
  .doituongClass p {
    font-size: 15.4px;
    color: #333333;
    font-weight: 300;
  }
  
  .product-section-marker {
    width: 1px;
    height: 100px;
    background-color: #D63228;
    position: relative;
  }
  
  .product-section-marker::after {
    content: '';
    position: absolute;
    top: 0; /* Đặt dấu chấm ở trên đỉnh */
    left: 50%;
    transform: translateX(-50%);
    width: 10px;      /* Kích thước của dấu chấm */
    height: 10px;
    background-color: #D63228;
    border-radius: 50%;
  }
.nguyennhan{
    background-color: #F9F9F9;
}
.custom-line {
    border: none;
    border-top: 2px solid red;
  }
.cautruc{
    padding: 20px 20px;
    background-color: #F9F9F9;
    color: #333333;
} 
.cautruc p{
    font-size: 15.4px;
    font-weight: 300;
    color: #333333;
}  
.kientrcAuto{
    padding: 20px 20px;
    background-color: #F9F9F9;
}  

.textkientruc p {
    font-size: 15.4px;
    color: #333333;
    font-weight: 300;
}
/* kientruc */


.container_sodonoi {
  display: flex;
  position: relative;
  padding: 20px;
  width: 100%;
  height: 100%;
  flex-wrap: wrap; 
}


.columns .column-boxs {
  flex: 1;
  display: flex;
  width: 200px;
  background-color: rgb(255, 255, 255);
  flex-direction: column;
  align-items: center;
  gap: 25px;
  position: relative;

}

.column1 {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  position: relative;
}

.column1-boxs {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 450px;
  gap: 20px;

  background-color: rgb(255, 255, 255);
}

.column2 {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  position: relative;
}

.boxs-view {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 200px;
  background-color: rgb(255, 255, 255);
  gap: 20px;
  position: relative;
}

.column2 .boxs1 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100px;
  padding: 71px 20px;
  height: 7px;
  gap: 1px;
  border-radius: 6px;
  text-align: center;
  flex-direction: column;
  /* Đặt hình ảnh lên trên chữ */
}

.column2 .boxsViewer {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100px;
  padding: 166px 20px;
  height: 7px;
  gap: 1px;
  border-radius: 6px;
  text-align: center;
  flex-direction: column;
  /* Đặt hình ảnh lên trên chữ */
}

.sodo {
  font-weight: bold;
  color: #D63228;
  margin-bottom: 20px;
}

.columns {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
  position: relative;
}

.circle {
  width: 150px;
  height: 150px;
  border: 2px solid #ccc;
  /* Đảm bảo có đường viền rõ ràng */
  border-radius: 50%;
  display: flex;
  font-size: 13.5px;
  text-align: center;
  align-items: center;
  justify-content: center;
  background-color: white;
  position: relative;

  /* Đảm bảo các hình tròn không bị ẩn */
}

.circle+.circle {
  margin-top: -50px;
  /* Để hình tròn tiếp theo đè lên hình tròn trước */
  z-index: 2;
  /* Đảm bảo hình tròn tiếp theo chồng lên hình tròn trước */
}

.circle:nth-child(3) {
  background-color: transparent;
  /* Giữ lại viền của hình tròn 1 bên dưới */
  border: 2px solid #ccc;
  /* Viền của hình tròn 3 */
}

.circle:nth-child(4) {
  background-color: transparent;
  /* Giữ lại viền của hình tròn 1 bên dưới */
  border: 2px solid #ccc;
  /* Viền của hình tròn 3 */
}

.circle:nth-child(5) {
  background-color: transparent;
  /* Giữ lại viền của hình tròn 1 bên dưới */
  border: 2px solid #ccc;
  /* Viền của hình tròn 3 */
}

.circle:nth-child(6) {
  background-color: transparent;
  /* Giữ lại viền của hình tròn 1 bên dưới */
  border: 2px solid #ccc;
  /* Viền của hình tròn 3 */
}

.boxs {
  flex: 1;
  padding: 1rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
  background-color: #ffffff;
}

svg#svgCanvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 100;
}

.column>* {
  position: relative;
  z-index: 1;
}

.manager-grid {
  display: flex;
  display: flex;
  gap: 1rem;
}

.left ,
.right {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.left .boxs,
.right .boxs {
  display: flex;
  align-items: center;
  justify-content: center;
}

.boxs1 img {

  /* Khoảng cách giữa hình ảnh và chữ */
  max-height: 60px;
  /* Giới hạn chiều cao của hình ảnh */
}

#manager {
  margin-bottom: 373px;
}

#repo {
  margin-bottom: 373px;
}

.font-lable {
    font-size: 13.5px;
    font-weight: 600;

    color: #000;
}
.font-hoi {
  font-size: 13.5px;
  font-weight: 300;
  color: #000;
}