/* ===============================
   About Us Precision Module
================================= */

.about-us-precision {
  max-width: 1240px;
  margin: 0 auto;
}
.about-us-precision .module-heading {
  font-size: 48px !important;
  margin-bottom: 24px !important;
  color: #ffffff;
  font-weight: 350;
  font-style: Book;
  font-family: "ABC Favorit", san-serif;
  line-height: 1.3;
}

.about-us-precision .module-heading h2 {
  font-size: 48px !important;
  margin-bottom: 24px !important;
  color: #ffffff;
  font-weight: 350;
  font-style: Book;
  font-family: "ABC Favorit", san-serif;
  line-height: 1.3;
  width: 500px;
  max-width: 100%;
  text-align: center;
  margin:auto ;
}

.about-us-precision .module-heading p {
  width: 760px;
  max-width: 100%;
  font-size: 16px !important;
  margin-bottom: 64px !important;
  color: #ffffff;
  text-align: center;
  font-weight:350;
  font-style: Book;
  font-family: "ABC Favorit", san-serif;
  line-height:1.5 !important;
  text-align: center;
  margin:0 auto !important;
  letter-spacing: 0.1px;
}


/* ===============================
   CARD WRAPPER
================================= */

.about-us-precision .card-wrapper {
  display: grid;
  gap: 20px;
}

.about-us-precision .card-wrapper {
  grid-template-columns: repeat(6, 1fr);
}

/* 3 card đầu = 33.33% */
.about-us-precision .card-item:nth-child(-n+3) {
  grid-column: span 2;
}

/* 2 card cuối = 50% */
.about-us-precision .card-item:nth-child(n+4) {
  grid-column: span 3;
}


/* ===============================
   CARD STYLE
================================= */

.about-us-precision .card-item {
  position: relative;
}

.about-us-precision .card-content {
  position: relative;
  height: 237px;
  padding: 24px;
  box-sizing: border-box;
  text-align:left;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: #333333;
  color: #424242;
  overflow: hidden;
  transition: 0.3s ease;
  margin: 0;
}


/* ===============================
   TOP RIGHT DIAGONAL (FIXED VERSION)
================================= */

.about-us-precision .card-content::after {
  content: "";
  position: absolute;

  width: 80px;
  height: 80px;

  top: -40px;
  right: -40px;

  background: #1b1b1b;   /* màu nền ngoài */

  transform: rotate(45deg);
}


/* ===============================
   HOVER EFFECT
================================= */

.about-us-precision .card-item:hover .card-content {
/*   background: linear-gradient(135deg, #00ff88, #111); */
  background: #00FF78;
}


/* ===============================
   CARD INNER CONTENT
================================= */

.about-us-precision .card-top img {
  width: 40px;
  margin-bottom: 16px;
}
.about-us-precision .card-top .icon {
  width: 42px;
  height: 42px;
  margin-bottom:16px;
  background-color: #1B1B1B; /* màu mặc định */

  -webkit-mask: var(--icon) no-repeat center;
  -webkit-mask-size: contain;

  mask: var(--icon) no-repeat center;
  mask-size: contain;

  background-color: #ffffff;
  transition: 0.3s ease;
}

.about-us-precision .card-item:hover .card-top .icon {
  background-color: #000000; 
}
.about-us-precision .card-top h4 {
  font-size: 24px !important;
  color: #ffffff;
  font-weight: 350;
  font-style: Book;
  font-family: "ABC Favorit", san-serif;
  line-height:130%;
  margin: 0;
}

.about-us-precision .card-description {
  font-size: 16px !important;
  color: #ffffff;
  font-weight:350;
  font-style: Book;
  font-family: "ABC Favorit", san-serif;
  line-height:130%;
  margin-bottom:0 !important;
  letter-spacing:0;
}

.about-us-precision .card-item:hover h4 {
  color: #000000;
}
.about-us-precision .card-item:hover .card-description {
  color: #000000;
}


/* ===============================
   MOBILE
================================= */

@media (max-width: 1024px) {

  .about-us-precision .card-wrapper {
    grid-template-columns: 1fr;
  }
  
  .about-us-precision .module-heading h2 {
    font-size: 32px !important;
    width:100%;
  }
  
  .about-us-precision .module-heading p {
    font-size: 16px !important;
    max-width:100%;
  }
  
}
}