/*///////////////////////////////////////////////////
//
//            ▼ 製品紹介02 ▼
//
///////////////////////////////////////////////////*/

.txt1 {
  text-align: center; /* căn giữa toàn bộ */
  padding: 20px;
}

.txt1 p {
  color: black;
  font-size: 1.2rem;
  line-height: 1.6;
  margin: 20px 0;
}



.product02 {
  padding-bottom: 2.5rem;
}

.product02 .product02_in .txt {
  margin-top: 3.75rem;
}

.product02 .product02_in .txt p {
  font-size: 1rem;
}

.product02 .product02_in .product_box {
  margin-top: 5.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  column-gap: clamp(64px, 5.2083333333vw, 100px);
  padding: 0 2.6875rem;
}

.product02 .container .product02_in .product_box .row1 .col1,
.product02 .container .product02_in .product_box .row2 .col2,
.product02 .container .product02_in .product_box .row3 .col3 {
  text-align: center;
  color: black;
  font-size: 20px;
  font-weight: bold;
}

.product02 .container .product02_in .product_box .row1 .col1 img:hover,
.product02 .container .product02_in .product_box .row2 .col2 img:hover,
.product02 .container .product02_in .product_box .row3 .col3 img:hover {
  background-color: azure;
  cursor: pointer;
  box-shadow: #303030;
  transform: scale(1.1);
  transition: all 1s;
}

.product02 .container .product02_in .product_box .row1 .col1 a:last-child,
.product02 .container .product02_in .product_box .row2 .col2 a:last-child,
.product02 .container .product02_in .product_box .row3 .col3 a:last-child {
  margin-top: 10px;
}

.product02 .container .product02_in .product_box .row1 .col1 a:last-child:hover,
.product02 .container .product02_in .product_box .row2 .col2 a:last-child:hover,
.product02 .container .product02_in .product_box .row3 .col3 a:last-child:hover {
  color: white;
  background-color: #085D99;
  border-radius: 0.2rem 1.5rem 0.2rem 1.5rem;
  transition: all .5s;
  overflow: hidden;
  margin-left: 2.5rem;
  margin-right: 2.5rem;
}

/* General Styles */
.product03 {
    background-color: #ffffff; /* Nền trắng */
    color: #333; /* Màu chữ tối */
    padding: 10px 0; /* Padding trên 10px */
    position: relative;
    top: 350px; /* Dịch toàn bộ section xuống 20px */
    margin-bottom: 100px; /* Tăng khoảng cách giữa product03 và contact_cta */

}

.product03 .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Section Title */
.product03 .section_ttl {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 40px;
}

.product03 .section_ttl i {
    font-size: 45px;
    color: #f9c846;
}

.product03 .section_ttl .en {
    font-size: 18px;
    font-weight: 600;
    color: #333;
}

.product03 .ttl_txt {
    font-size: 32px;
    font-weight: bold;
    margin: 0;
}

/* List of Production Materials */
.product03 .box01 {
    background: rgba(0, 0, 0, 0.05);
    padding: 30px;
    border-radius: 10px;
    margin-bottom: 40px;
}

.product03 .box01 h3 {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 20px;
}

.product03 .product_list {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Chia thành 3 cột */
    gap: 20px; /* Khoảng cách giữa các mục */
    justify-content: center; /* Căn giữa danh sách */
    max-width: 600px; /* Giới hạn chiều rộng */
    margin: 0 auto; /* Căn giữa */
}

.product03 .product_list li {
    text-align: center;
    background: rgba(0, 0, 0, 0.1);
    padding: 20px;
    border-radius: 8px;
    transition: transform 0.3s ease, background 0.3s ease;
}

.product03 .product_list li:hover {
    background: #f9c846;
    transform: scale(1.05);
    color: #fff;
}

.product03 .product_list img {
    max-width: 80px;
    height: auto;
    margin-bottom: 10px;
}

.product03 .product_list p {
    font-size: 16px;
    font-weight: 500;
}


/* Production Process */
.product03 .box02 {
    background: rgba(0, 0, 0, 0.05);
    padding: 30px;
    border-radius: 10px;
}

.product03 .box02 h3 {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 20px;
}

.product03 .table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 30px;
}

.product03 .table th, .table td {
    padding: 12px;
    border: 1px solid rgba(0, 0, 0, 0.2);
    text-align: left;
    font-size: 16px;
}

.product03 .table th {
    background: #f9c846;
    color: #1a1a1a;
    font-weight: bold;
}

.product03 .table td {
    background: #ffffff;
}

/* Responsive */
@media (max-width: 768px) {
    .product03 .section_ttl {
        flex-direction: column;
        align-items: flex-start;
    }

    .product03 .product_list {
        flex-direction: column;
        align-items: flex-start;
    }

    .product03 .product_list li {
        width: 100%;
        max-width: 300px;
    }

    .product03 .table th, .table td {
        font-size: 14px;
        padding: 10px;
    }
}



/*///////////////////////////////////////////////////
//
//            ▼ CTA（製品紹介） ▼
//
///////////////////////////////////////////////////*/
#product .contact_cta {
    margin-top: 20px;
    }

@media screen and (min-width: 1026px) and (max-width: 1279.999px) {
  #product .contact_cta {
    margin-top: 20px;
  }
}

@media screen and (min-width: 768px) and (max-width: 1025.999px) {
  #product .contact_cta {
    margin-top: 40px;
  }
}



/*///////////////////////////////////////////////////
//
//            ▼ VMT PULL BOX▼
//
///////////////////////////////////////////////////*/

.product02 .container .product02_in {
  position: relative;
}

.product02 {
  border: 1px solid white;
  width: auto;
  height: 40rem;
  margin-bottom: 2em;
}

.product02 .container .product02_in .dis0,
.product02 .container .product02_in .dis1,
.product02 .container .product02_in .dis2 {

  width: calc(100% / 3);
  padding: 20px 30px 5px 30px;

}

.product02 .container .product02_in .fadein .test,
.product02 .container .product02_in .fadein .cableduct00,
.product02 .container .product02_in .fadein .test .cableduct01 {
  display: flex;
  position: relative;
}

.product02 .container .product02_in .fadein .center {
  padding: 2em 0 0 5em;
}

/*.product02 .container .product02_in .dis1 {
  position: absolute;
  top: 80px;
  margin-left: 250px;
}*/

.product02 .container .product02_in .fadein .test .item01,
.product02 .container .product02_in .fadein .test .item02,
.product02 .container .product02_in .fadein .test .item03 {
  display: inline-block;
  width: 500px;
  height: 500px;
  gap: 5rem 2rem;
  background: #fff;
  box-shadow: 0px 0px 15px 0px rgba(21, 38, 51, 0.08);
  padding: 1.5rem;
  text-align: center;
  margin: 50px 10px auto 10px;
}

.product02 .container .product02_in .fadein .test .item02 {
  transform: translateY(4.125rem);
}

.product02 .container .product02_in .fadein .test .item03 {
  transform: translateY(8.125rem);
}


.table00 {
  width: 100%;
  position: relative;
  padding: 25.5em 0 0 0;
}

.tbody .tr:hover {
  /* hover chuot le the*/
  background-color: azure;
  /* hinh ban tay */
  cursor: pointer;
}

.table {
  margin: auto;
  width: 60%;
  box-sizing: border-box;
  /*Tránh thanh cuộn ngang*/
  display: table;
  /*table*/
  border-collapse: collapse;

}

.td {
  border: 1px solid black;
}

.thead {
  display: table-header-group;
  /*thead*/
  font-weight: bold;

}

.tbody {
  display: table-row-group;
  /*tbody*/
}

.tr {
  display: table-row;
  /* tr*/
}

.td {
  display: table-cell;
  /*td*/
  text-align: center;
}

section {
  margin-bottom: 40px;
}

.table00 .table {
  text-align: center;
}

.table .thead {
  background-color: yellow;
}

.tbody .tr:nth-child(even) {
  background-color: antiquewhite;
}


.more .row .col .box img {
  width: 300px;
  height: 300px;
  /*chong meo hinh*/
  object-fit: cover;
  border-radius: 50%;
  border: 5px solid white;
}

.more .row .col {
  width: 20%;
  float: left;
  padding: 50px 5px 50px 5px;

  box-sizing: border-box;
  position: relative;

}

.more .row .col .box img {
  width: 100%;
}

.more .row::after {
  content: '';
  display: block;
  clear: both;
}



.more .row .col .box button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, 250%);
  /* mau */
  border: none;
  padding: 12px 18px;
  background-color: #0569ac;
  color: white;
  font-weight: bold;
}

.more .row .col .box button:hover {
  /* hover chuot le the*/
  background-color: white;
  /* hinh ban tay */
  cursor: pointer;
  color: #0569ac;
  transition: .25s;

}

.more .row {
  background-color: rgba(247, 241, 241, 0.87);
}

/*///////////////////////////////////////////////////
//
//            ▼ VMT cable duct▼
//
///////////////////////////////////////////////////*/

.cableduct {
  border: 1px solid white;
  width: auto;
  height: 130rem;
  margin-bottom: 2em;
}

.cableduct .container .product02_in .fadein .test .dis0,
.cableduct .container .product02_in .fadein .cableduct00 .dis1,
.cableduct .container .product02_in .fadein .cableduct01 .dis2 {

  width: calc(100% / 3);
  padding: 20px 30px 5px 30px;

}

.cableduct .container .product02_in .fadein .test,
.cableduct .container .product02_in .fadein .cableduct00,
.cableduct .container .product02_in .fadein .cableduct01 {
  display: flex;
  position: relative;
}

.cableduct .container .product02_in .fadein .center {
  padding: 2em 0 0 5em;
}


.cableduct .container .product02_in .fadein .test .item01,
.cableduct .container .product02_in .fadein .test .item02,
.cableduct .container .product02_in .fadein .test .item03,
.cableduct .container .product02_in .fadein .cableduct00 .item01,
.cableduct .container .product02_in .fadein .cableduct00 .item02,
.cableduct .container .product02_in .fadein .cableduct00 .item03,
.cableduct .container .product02_in .fadein .cableduct01 .item01,
.cableduct .container .product02_in .fadein .cableduct01 .item02,
.cableduct .container .product02_in .fadein .cableduct01 .item03 {
  display: inline-block;
  width: 500px;
  height: 500px;
  gap: 5rem 2rem;
  background: #fff;
  box-shadow: 0px 0px 15px 0px rgba(21, 38, 51, 0.08);
  padding: 1.5rem;
  text-align: center;
  margin: 50px 10px auto 10px;
}

.cableduct .container .product02_in .fadein .test .item02,
.cableduct .container .product02_in .fadein .cableduct00 .item02,
.cableduct .container .product02_in .fadein .cableduct01 .item02 {
  transform: translateY(4.125rem);
}

.cableduct .container .product02_in .fadein .test .item03,
.cableduct .container .product02_in .fadein .cableduct00 .item03,
.cableduct .container .product02_in .fadein .cableduct01 .item03 {
  transform: translateY(8.125rem);
}