.footer-box {

  float: left;

}

.full-footer-contact {

  background-color: #1c2a37;

  background-repeat: no-repeat;

  background-position: center top;

  background-size: cover;

  padding-top: 82px;

  padding-bottom: 82px;

  color: #fff;

  font-size: 16px;

  line-height: 2;

}

.footer-contact-content h1 {

  margin: 0;

}

.footer-contact-content p {

  font-size: 16px;

}

.footer-contact-content .contact-btn button {

  padding: 5px 8px;

  font-size: 14px;

  color: #fff;

  background: linear-gradient(to right, #fff 0%, #fff 100%);

  background-size: 0% 100%;

  background-repeat: no-repeat;

  background-position: left;

  border: 1px solid #fff;

  border-radius: 5px;

  outline: 0;

  cursor: pointer;

  transition: all 0.4s ease;

}



/* Hover */

.footer-contact-content .contact-btn button:hover {

  background-size: 100% 100%;

  color: #1774c4;

}



.footer-contact-content .contact-btn button:first-child {

  background-color: #1774c4;

}

.inner-footer-contact {

  display: flex;

  padding: 0 30px;

}

.inner-footer-contact>div {

  width: 50%;

}

.full-footer {

  background: #f5f8fb;

  padding: 50px 0 20px;

  font-family: Arial, sans-serif;

  color: #333;

}



.footer-top-box {

  display: flex;

  justify-content: space-between;

  gap: 25px;

}

.footer-left {

  width: 25%;

  margin-bottom: 30px;

  padding-left: 20px;

}



.footer-logo {

  display: flex;

  align-items: center;

  gap: 15px;

  margin-bottom: 15px;

}



.footer-logo img {

  height: 50px;

}



.footer-logo h3 {

  font-size: 18px;

  font-weight: 600;

  color: #003366;

}



.footer-years {

  display: flex;

  align-items: center;

  gap: 15px;

  margin-bottom: 20px;

}



.footer-years .years {

  font-size: 28px;

  font-weight: bold;

  color: #1774c4;

  display: inline-block;

  line-height: 1.2;

}



.footer-years small {

  display: block;

  font-size: 14px;

  font-weight: normal;

  color: #fff;

  background: #1774c4;

  padding: 2px 6px;

  border-radius: 4px;

  margin-top: 5px;

}



.footer-years p {

  max-width: 250px;

  font-size: 16px;

  color: #555;


}



.footer-contact p {

  margin: 5px 0;

  font-size: 14px;

  color: #333;


}

.footer-contact .email,

.footer-contact .hotline,

.footer-contact .mst,

.footer-contact .address {

  display: flex;

  align-items: center;

  gap: 10px;

  margin-bottom: 5px;

}

.footer-contact .hot-number span {

  display: block;

  font-size: 16px;

}

.footer-contact .mst span,

.footer-contact .address span {

  font-size: 16px;

}

.footer-contact i {

  color: #1774c4;

  font-size: 22px;

  border: 1px solid #1774c4;

  padding: 10px;

  border-radius: 50px;

}


.footer-links {

  width: 75%;

  display: flex;

  justify-content: space-between;

  flex-wrap: wrap;

  margin-bottom: 30px;

}



.footer-column {

  margin-bottom: 20px;

}



.footer-column h4 {

  font-size: 20px;

  font-weight: 600;

  margin-bottom: 10px;

  position: relative;

  color: #333;

}



.footer-column h4::after {

  content: "";

  display: block;

  width: 30px;

  height: 2px;

  background: #1774c4;

  margin-top: 5px;

}



.footer-column ul {

  list-style: none;

  padding: 0;

  margin: 0;

}

/* Chia riêng Products thành 2 cột */

.footer-column:nth-child(2) ul {

  display: grid;

  grid-template-columns: repeat(2, 1fr);
  /* 2 cột */

}



.footer-column ul li {

  margin: 0 0 5px 0;

}



.footer-column ul li a {

  text-decoration: none;

  color: #555;

  font-size: 16px;

  transition: color 0.3s;


}



.footer-column ul li a:hover {

  color: #1774c4;

}

.full-footer .footer-product ul {

  display: grid;

  grid-template-columns: repeat(2, 1fr);
  /* 2 cột bằng nhau */

  gap: 8px 20px;
  /* khoảng cách giữa các item: 8px dọc, 20px ngang */

  list-style: none;
  /* bỏ dấu chấm */

  padding: 0;

  margin: 0;

}



.full-footer .footer-product ul li {

  font-size: 14px;

  line-height: 1.6;

}



.footer-social {

  display: flex;

  justify-content: end;

  align-items: flex-end;

  gap: 15px;

}



.footer-social a {

  font-size: 20px;

  color: #777;

  transition: color 0.3s;

}



.footer-social a:hover {

  color: #1774c4;

}



/* footer-bottom */

.full-footer-bottom {

  border-top: 1px solid #ccc;

  background: #fff;

  padding: 10px 30px;

  font-size: 12px;

}

.left-footer-bottom {

  width: 40%;

  text-align: left;

  display: inline-block;

  color: #000;

}

.right-footer-bottom {

  display: inline-block;

  width: 40%;

  text-align: right;

  float: right;

}

a.design-by {

  color: #000;

  text-decoration: none;

}

a.design-by:hover {

  text-decoration: underline;

}

#show-sft,

#hide-sft {

  float: right;

  font-size: 14px;

  margin: 0;

  text-align: right;

  cursor: pointer;

}

#show-sft,

.active-sft #hide-sft {

  display: inline-block;

}

#hide-sft,

.active-sft #show-sft {

  display: none;

}

@media only screen and (max-width: 768px) {

  .inner-footer-contact {

    display: block;

  }

  .inner-footer-contact>div {

    width: 100%;

  }

  .inner-footer {

    display: block;

  }

  .inner-footer>div {

    width: 100%;

  }

  .footer-top-box {

    display: block;

  }

  .footer-left {

    width: 100%;

    padding: 0;

  }

  .footer-contact .email {

    margin-bottom: 10px;

  }

  .footer-left p {

    font-size: 14px;

  }

  .footer-contact p {

    font-weight: 600;

    font-size: 16px;

  }

  .footer-links {

    display: none;

  }

  .footer-bottom {

    width: 100%;

    text-align: center;

  }

  .footer-box h2 {

    font-size: 14px;

    margin-top: 10px;

    margin-bottom: 10px;

  }

}

@media only screen and (max-width: 600px) {

  .footer-box {

    width: 100%;

  }

}