.navbar {
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   z-index: 1030;
   background-color: #17455C;
   border-bottom: 1px solid rgba(255, 255, 255, 0.1);
   padding-top: 20px;
   padding-bottom: 20px;
 }

 .navbar-brand {
   display: flex;
   align-items: center;
   color: #fff;
 }

 .navbar-brand img {
   height: 50px;
 }

 .navbar-nav .nav-link {
   position: relative;
   color: #fff;
   font-weight: 650;
   text-decoration: none;
 }

 .navbar-nav .nav-link::after {
   content: '';
   position: absolute;
   bottom: 0;
   left: 50%;
   width: 0;
   height: 2px;
   background-color: #fff;
   transition: all 0.3s ease;
   transform: translateX(-50%);
 }

 .navbar-nav .nav-link:hover::after {
   width: 100%;
 }

 .navbar-nav .nav-link.active {
   color: rgb(255, 27, 0);
   font-weight: 680;
 }

 .dropdown-menu {
  background-color: #17455C;
  border: none;
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
}

.dropdown-menu .dropdown-item {
  color: #fff;
  font-weight: 600;
  transition: background 0.3s ease;
}

.dropdown-menu .dropdown-item:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.navbar .nav-item.dropdown .nav-link {
  color: #fff !important;
}

.navbar .nav-item.dropdown .nav-link:focus,
.navbar .nav-item.dropdown .nav-link:active {
  color: #fff !important;
  background-color: transparent !important;
}

.navbar-nav .nav-item.dropdown .nav-link::after {
  display: none;
}

.nav-item.dropdown:hover .dropdown-menu {
  display: block;
}

.navbar-toggler {
  border: none; /* Xóa viền */
}

.navbar-toggler-icon {
  filter: invert(1); /* Đảo màu thành trắng */
}

 body {
   margin: 0;
   padding: 0;
   font-family: "arial";
   color: #fff;
   overflow: auto;
   background: linear-gradient(270deg, #17455C, #001e2b, #17455C);
   background-attachment: fixed;
   background-size: 300% 300%;
   animation: moveBackground 8s infinite linear;
 }

 @keyframes moveBackground {
   0% {
     background-position: 0% 50%;
   }

   50% {
     background-position: 100% 50%;
   }

   100% {
     background-position: 0% 50%;
   }
 }

 .video-background {
  position: relative;
  width: 100%;
  height: 70vh;
  overflow: hidden;
}

.video-background video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; 
  pointer-events: none;
}

 .video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 51, 74, 0.8);
    z-index: 1;
  }

  .video-background .hero-content {
    position: absolute;
    top: 60%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column; /* Xếp phần tử theo cột */
    align-items: center; /* Căn giữa nội dung theo chiều ngang */
    text-align: center;
    color: #fff;
    z-index: 1;
  }

.video-background .hero-content .hero-title {
  font-weight: bold;
  margin: 0 auto;
  opacity: 0;
  transform: translateY(100px);
  animation: slideUp 2s forwards;
}

@keyframes slideUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.video-background .hero-content .hero-subtitle {
  padding-top: 10px;
  padding-bottom: 10px;
  color: #b0b0b0;
  margin-bottom: 1.5rem;
  margin: auto auto;
  opacity: 0;
  transform: translateY(-50px);
  animation: slideDown 2s forwards;
}

@keyframes slideDown {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.video-background .hero-content .welcome-tag {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  border: 1.6px solid #E0523D;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 1rem;
  opacity: 0;
  transform: translateY(10px);
  animation: slideUp 2s forwards;
}

@keyframes slideUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

 .section-overlay {
   position: relative;
 }

 .section-overlay::before {
   content: '';
   position: absolute;
   top: 45%;
   left: 50%;
   transform: translate(-50%, -50%);
   width: 300px;
   height: 300px;
   background: radial-gradient(circle, #fff 0%, #C23830 50%, transparent 60%);
   filter: blur(50px);
   z-index: 1;
 }

 .custom-section {
   position: relative;
   z-index: 1;
   box-sizing: border-box;
   background: linear-gradient(180deg,
       rgba(255, 255, 255, 0.2),
       rgba(0, 51, 74, 0.9));
   padding: 60px 20px;
   text-align: center;
   border-radius: 10px;
   border: 0.1px solid rgba(255, 255, 255, 0.1);
 }

 .custom-section h2 {
   font-size: 28px;
   font-weight: bold;
   margin-bottom: 40px;
   color: #ffffff;
   opacity: 0;
   transform: translateY(100px);
   animation: slideUp 2s forwards;
 }

 @keyframes slideUp {
   to {
     opacity: 1;
     transform: translateY(0);
   }
 }

 .transparent-bg {
   background: rgba(255, 255, 255, 0.1);
   border-radius: 15px;
   padding: 30px;
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
 }

 .logo-container {
   display: flex;
   justify-content: center;
   flex-wrap: wrap;
   gap: 30px;
 }

 .logo-item {
   width: 150px;
   height: auto;
   filter: brightness(0.8);
   transition: all 0.3s ease;
 }

 .logo-item:hover {
   filter: brightness(1);
   transform: scale(1.1);
 }

 .logo-item img {
   max-width: 100%;
   height: auto;
 }

 .image-eidt {
   position: relative;
   border-radius: 25px;
   overflow: hidden;
   border: 0.1px solid rgba(255, 255, 255, 0.1);
   padding: 15px;
   opacity: 0;
   transform: translateX(-100%);
   transition: opacity 2s, transform 2s;
 }

 .image-eidt.active {
   opacity: 1;
   transform: translateX(0);
 }

 .image-eidt img {
   border-radius: 15px;
   width: 100%;
   height: auto;
   display: block;
 }

 .image-eidt::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background-color: rgba(0, 0, 0, 0.5);
   border-radius: 15px;
   z-index: 1;
   transition: background-color 0.3s ease;
 }

 .image-eidt:hover::before {
   background-color: transparent;
 }

 .image-eidt:hover img {
   z-index: 2;
 }

 .about-card {
   opacity: 0;
   transform: translateX(100%);
   transition: opacity 2s, transform 2s;
 }

 .about-card.active {
   opacity: 1;
   transform: translateX(0);
 }

 .about-card-2 {
  opacity: 0;
  transform: translateX(100%);
  transition: opacity 2s, transform 2s;
}

.about-card-2.active {
  opacity: 1;
  transform: translateX(0);
}

 .welcome-tag-2 {
   display: inline-block;
   border-radius: 20px;
   font-size: 1rem;
   font-weight: 600;
   color: #C23830;
 }

 .hero-title-2 {
   font-weight: bold;
   width: 100%;
 }

 .hero-subtitle-2 p{
   color: #b0b0b0;
   width: 100%;
   text-align: center;
 }

 .image-eidt-2 {
   position: relative;
   border-radius: 15px;
   overflow: hidden;
   opacity: 0;
   transform: translateX(-100%);
   transition: opacity 2s, transform 2s;
 }

 .image-eidt-2.active {
   opacity: 1;
   transform: translateX(0);
 }

 .image-eidt-2::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   border-radius: 15px;
   z-index: 1;
 }

 .image-eidt-2 img {
   width: 100%;
   height: 420px;
   display: block;
 }

 .content-overlay {
   position: absolute;
   left: 0;
   bottom: 0;
   width: 100%;
   text-align: left;
   color: white;
   padding: 20px;
   background: rgba(0, 0, 0, 0.5);
   box-sizing: border-box;
 }

 .card-1 {
   background-color: #E0523D ;
   padding: 20px;
   border-radius: 8px;
   width: 100%;
   opacity: 0;
   transform: translateY(-300px);
   transition: opacity 2s, transform 2s;
 }

 @media (max-width: 768px) {
  .card-1 {
    margin-top: 25px;
    }
  }

 .card-1.active {
   opacity: 1;
   transform: translateY(0);
 }

 .card-1 h4 {
   font-weight: bold;
   margin-bottom: 20px;
 }

 .card-1 p {
  font-size: 17px;
  font-weight: bold;
 }

 .card-2 {
   background-color: #C23830;
   padding: 20px;
   border-radius: 8px;
   opacity: 0;
   transform: translateY(300px);
   transition: opacity 2s, transform 2s;
 }

 .card-2.active {
   opacity: 1;
   transform: translateY(0);
 }

 .card-2 h4 {
   font-weight: bold;
   margin-bottom: 20px;
 }

 .card-2 li {
   font-size: 17px;
   font-weight: bold;
 }

 .conner {
   height: 170px;
   background: linear-gradient(60deg, rgba(194, 56, 48, 1) 50%, transparent);
   display: flex;
   justify-content: center;
   align-items: center;
   text-align: center;
 }

 .conner h2 {
   font-weight: bold;
   margin-left: 20px;
   color: #fff;
   padding-right: 20px;
 }

 .conner-2 {
  background: linear-gradient(60deg, rgba(194, 56, 48, 1) 50%, transparent);
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 25px 10px;
}

.conner-2 h6 {
  font-weight: bold;
  color: #b0b0b0;
  text-align: center;
  margin: 0 auto;
  max-width: 80%;
  width: 100%;
}

 .section-overlay-2 {
   position: relative;
 }

 .section-overlay-2::before {
   content: '';
   position: absolute;
   top: 45%;
   left: 50%;
   transform: translate(-50%, -50%);
   width: 300px;
   height: 300px;
   background: radial-gradient(circle, #C23830 0%, #fff 50%, transparent 10%);
   filter: blur(100px);
   z-index: 1;
 }

 .dichvu {
  padding: 50px 0;
  overflow: auto;
  background: 
     linear-gradient(270deg, rgba(4, 148, 222, 0.1), rgba(3, 88, 133, 0.8), rgba(4, 148, 222, 0.1)),
     url('/image/0ce3183c085d4190afa36e45245fbce0.png'); /* Thay đường dẫn bằng ảnh của bạn */
  background-attachment: fixed;
  background-size: 300% 300%, cover; /* Hiệu ứng gradient và ảnh nền */
  background-position: center, center; /* Căn chỉnh vị trí */
  animation: moveBackground 10s infinite linear;
}

 @keyframes moveBackground {
   0% {
     background-position: 0% 50%;
   }

   50% {
     background-position: 100% 50%;
   }

   100% {
     background-position: 0% 50%;
   }
 }
 

 .welcome-tag-3 {
   border-radius: 20px;
   font-size: 1.1rem;
   font-weight: bold;
   color: #C23830;
   text-align: center;
   margin: 0 auto;
 }

 .hero-title-3 {
   font-weight: bold;
   text-align: center;
   margin: 0 auto;
 }

 .hero-title-4 {
   font-size: 2rem;
   font-weight: bold;
   max-width: 80%px;
   width: 100%;
   text-align: center;
   margin: 0 auto;
 }

 .card-3 {
   border-radius: 15px;
   overflow: hidden;
   border: 1px solid rgba(255, 255, 255, 0.1);
   padding: 10px;
   height: 455px;
 }

 .card-3:hover {
   border: 0.1px solid #597D91;
   box-shadow: 0 0 15px rgba(181, 196, 217, 0.5);
 }

 .card-3 .edit-card-3 {
   border-radius: 10px;
   overflow: hidden;
   background: #17455C;
   padding: 20px;
   height: 100%;
 }

 .card-3 .edit-card-3 i {
   font-size: 50px;
   color: #C23830;
 }

 .card-3 .edit-card-3 h5 {
   font-weight: bold;
 }

 .card-3 .edit-card-3 p {
   color: #b0b0b0;
 }

 .advise {
  background: #C23830;
  padding: 30px 0;
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 1.5s ease-out, transform 1.5s ease-out;
  will-change: opacity, transform;
}

.advise.active {
  opacity: 1;
  transform: scale(1);
}

 .advise h2 {
  font-weight: bold;
  width: 100%;
 }

 .transparent-textbox {
   background: transparent;
   border: 1px solid #ccc;
   color: #b0b0b0;
   font-size: 16px;
 }

 .form-control {
   background-color: transparent;
   color: #ffffff;
   border: 1px solid #ccc;
 }

 .form-label {
   color: #ffffff;
   font-weight: bold;
 }

 .procedure {
   background: rgba(0, 51, 74, 0.9);
   padding: 50px;
   transform: scale(0);
   transition: transform 2s ease-out;
 }

 .procedure.active {
   transform: scale(1);
 }

.col-custom {
  flex: 0 0 19%; /* Điều chỉnh cho phù hợp với 5 cột */
  display: flex;
  flex-direction: column; /* Các thẻ p nằm trên và dưới nhau */
  align-items: center;
  text-align: center;
  height: 230px;
  padding: 15px;
}

@media (max-width: 768px) {
  .col-custom {
    flex: 0 0 100%; /* Chiếm toàn bộ chiều rộng */
  }

}

.border-right{
  border-right: 2px solid white !important;
}

@media (max-width: 768px) {

  .border-right{
    border-right: 0px solid white !important;
  }
}



 .circle-icon {
   width: 50px;
   height: 50px;
   background-color: #C23830;
   border-radius: 50%;
 }

 .circle-icon i {
   font-size: 25px;
   line-height: 50px;
   color: #fff;
 }

 .col-custom .btn-bottom {
   margin-top: auto;
 }

 .hero-title-4 {
   font-size: 2rem;
   font-weight: bold;
   max-width: 750px;
   text-align: center;
   margin: 0 auto;
 }

 .contact {
   position: relative;
   width: 100%;
   height: 800px;
 }

 .img-div {
   border-radius: 15px;
   width: 100%;
   height: 500px;
 }

 .box-div {
   color: #fff;
   padding: 10px;
   border-radius: 15px;
   margin-left: 50px;
   background: linear-gradient(0deg, rgba(224, 82, 61, 1) 0%, rgba(194, 56, 48, 1) 100%);
   width: 50%;
   height: 70%;
   position: absolute;
   top: 20%;
   border: 0.1px solid rgba(255, 255, 255, 0.1);
   box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
 }

 @media (max-width: 768px) {
  .box-div {
    flex: 0 0 100%; /* Chiếm toàn bộ chiều rộng */
    width: 100%;
    margin-left: 0px
  }
}

 .footer-edit {
   border-top: 1px solid rgba(255, 255, 255, 0.1);
   border-bottom: 1px solid rgba(255, 255, 255, 0.1);
   padding: 30px;
 }

 .footer-edit img {
   width: auto;
   height: 70px;
 }

 .circle-icon-2 {
   width: 40px;
   height: 40px;
   border-radius: 50%;
   background-color: #f8f9fa;
   color: #00334A;
   display: flex;
   align-items: center;
   justify-content: center;
   border: 2px solid #dee2e6;
   margin-right: 3px;
 }

 .circle-icon-2:hover {
   background-color: #00334A;
   color: #f8f9fa;
 }

 .d-flex {
   display: flex;
   gap: 1px;
 }

 .card-customer {
   background: #17455C;
   padding: 50px;
   border-radius: 15px;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   text-align: center;
 }

 .card-customer img {
   width: 50px;
   height: 50px;
   border-radius: 50%;
 }

 .card-customer p {
   color: #b0b0b0;
 }

 .card-customer h4 {
   font-style: italic;
 }

 .card-customer span {
   color: #f8f9fa;
   font-weight: bold;
   font-style: italic;
 }

 .custom-btn {
   width: 130px;
   height: 40px;
   color: #fff;
   border-radius: 5px;
   padding: 10px 25px;
   font-family: 'Lato', sans-serif;
   font-weight: 500;
   background: transparent;
   cursor: pointer;
   transition: all 0.3s ease;
   position: relative;
   display: inline-block;
   box-shadow: inset 2px 2px 2px 0px rgba(255, 255, 255, .5),
     7px 7px 20px 0px rgba(0, 0, 0, .1),
     4px 4px 5px 0px rgba(0, 0, 0, .1);
   outline: none;
 }

 .btn-7 {
   background: linear-gradient(0deg, rgba(255, 151, 0, 1) 0%, rgba(251, 75, 2, 1) 100%);
   line-height: 42px;
   padding: 0;
   border: none;
 }

 .btn-7 span {
   position: relative;
   display: block;
   width: 100%;
   height: 100%;
 }

 .btn-7:before,
 .btn-7:after {
   position: absolute;
   content: "";
   right: 0;
   bottom: 0;
   background: rgba(251, 75, 2, 1);

   transition: all 0.3s ease;
 }

 .btn-7:before {
   height: 0%;
   width: 2px;
 }

 .btn-7:after {
   width: 0%;
   height: 2px;
 }

 .btn-7:hover {
   color: rgba(251, 75, 2, 1);
   background: #ffffff;
 }

 .btn-7:hover:before {
   height: 100%;
 }

 .btn-7:hover:after {
   width: 100%;
 }

 .btn-7 span:before,
 .btn-7 span:after {
   position: absolute;
   content: "";
   left: 0;
   top: 0;
   background: rgba(251, 75, 2, 1);
   transition: all 0.3s ease;
 }

 .btn-7 span:before {
   width: 2px;
   height: 0%;
 }

 .btn-7 span:after {
   height: 2px;
   width: 0%;
 }

 .btn-7 span:hover:before {
   height: 100%;
 }

 .btn-7 span:hover:after {
   width: 100%;
 }

 .btn-5 {
   width: 130px;
   height: 40px;
   line-height: 42px;
   padding: 0;
   border: none;
   background: rgb(255, 27, 0);
   background: linear-gradient(0deg, rgba(255, 27, 0, 1) 0%, rgba(251, 75, 2, 1) 100%);
 }

 .btn-5:hover {
   color: #ffffff;
   background: transparent;
   box-shadow: none;
 }

 .btn-5:before,
 .btn-5:after {
   content: '';
   position: absolute;
   top: 0;
   right: 0;
   height: 2px;
   width: 0;
   background: #ffffff;
   box-shadow:
     -1px -1px 5px 0px #fff,
     7px 7px 20px 0px #0003,
     4px 4px 5px 0px #0002;
   transition: 400ms ease all;
 }

 .btn-5:after {
   right: inherit;
   top: inherit;
   left: 0;
   bottom: 0;
 }

 .btn-5:hover:before,
 .btn-5:hover:after {
   width: 100%;
   transition: 800ms ease all;
 }

 .btn-12 {
   position: relative;
   right: 20px;
   bottom: 20px;
   border: none;
   box-shadow: none;
   width: 130px;
   height: 40px;
   line-height: 42px;
   -webkit-perspective: 230px;
   perspective: 230px;
 }

 .btn-12 span {
   background: linear-gradient(0deg, #ffffff 0%, #ffffff 100%);
   display: block;
   position: absolute;
   width: 130px;
   height: 40px;
   border-radius: 5px;
   margin: 0;
   text-align: center;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
   -webkit-transition: all .3s;
   transition: all .3s;
   color: #C23830;
 }

 .btn-12 span:nth-child(1) {
   -webkit-transform: rotateX(90deg);
   -moz-transform: rotateX(90deg);
   transform: rotateX(90deg);
   -webkit-transform-origin: 50% 50% -20px;
   -moz-transform-origin: 50% 50% -20px;
   transform-origin: 50% 50% -20px;
 }

 .btn-12 span:nth-child(2) {
   -webkit-transform: rotateX(0deg);
   -moz-transform: rotateX(0deg);
   transform: rotateX(0deg);
   -webkit-transform-origin: 50% 50% -20px;
   -moz-transform-origin: 50% 50% -20px;
   transform-origin: 50% 50% -20px;
 }

 .btn-12:hover span:nth-child(1) {
   -webkit-transform: rotateX(0deg);
   -moz-transform: rotateX(0deg);
   transform: rotateX(0deg);
 }

 .btn-12:hover span:nth-child(2) {
   color: transparent;
   -webkit-transform: rotateX(-90deg);
   -moz-transform: rotateX(-90deg);
   transform: rotateX(-90deg);
 }

 .btn-14 {
  background: rgb(255, 27, 0);
  border: none;
  z-index: 1;
}
.btn-14:after {
  position: absolute;
  content: "";
  width: 100%;
  height: 0;
  top: 0;
  left: 0;
  z-index: -1;
  border-radius: 5px;
  background-color: rgb(255, 27, 0);
  background-image: linear-gradient(315deg, rgba(251, 75, 2, 1) 0%, rgba(251, 75, 2, 1) 74%);
  transition: all 0.3s ease;
}
.btn-14:hover {
  color: #000;
}
.btn-14:hover:after {
  top: auto;
  bottom: 0;
  height: 100%;
}
.btn-14:active {
  top: 2px;
} 

.btn-14.loading {
  pointer-events: none; /* Ngăn chặn nhấn lại */
  color: transparent; /* Ẩn chữ */
  position: relative;
}

.btn-14.loading:after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px; /* Kích thước vòng xoay */
  height: 16px;
  border: 2px solid white; /* Màu viền */
  border-radius: 50%; /* Bo tròn 100% */
  border-top-color: transparent; /* Làm phần trên trong suốt để tạo hiệu ứng */
  animation: spin 0.6s linear infinite;
  transform: translate(-50%, -50%);
}

@keyframes spin {
  0% { transform: translate(-50%, -50%) rotate(0deg); }
  100% { transform: translate(-50%, -50%) rotate(360deg); }
}

.procedure-2 {
  padding: 50px;
  overflow: auto;
  background: 
     linear-gradient(270deg, rgba(4, 148, 222, 0.8), rgba(3, 88, 133, 0.6), rgba(4, 148, 222, 0.8)),
     url('/image/0ce3183c085d4190afa36e45245fbce0.png'); /* Thay đường dẫn bằng ảnh của bạn */
  background-attachment: fixed;
  background-size: 300% 300%, cover; /* Hiệu ứng gradient và ảnh nền */
  background-position: center, center; /* Căn chỉnh vị trí */
  animation: moveBackground 10s infinite linear;
}

.image-eidt-3 {
  position: relative;
  border-radius: 25px;
  overflow: hidden;
  border: 0.1px solid rgba(255, 255, 255, 0.1);
  opacity: 0;
  transform: translateX(-100%);
  transition: opacity 2s, transform 2s;
}

.image-eidt-3.active {
  opacity: 1;
  transform: translateX(0);
}

.image-eidt-3 img {
  width: 100%;
  height: 100%;
  height: auto;
  display: block;
}

.image-eidt-3::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 15px;
  z-index: 1;
  transition: background-color 0.3s ease;
}

.image-eidt-4 {
  position: relative;
  border-radius: 25px;
  overflow: hidden;
  border: 0.1px solid rgba(255, 255, 255, 0.1);
  opacity: 0;
  transform: translateX(-100%);
  transition: opacity 2s, transform 2s;
}

.image-eidt-4.active {
  opacity: 1;
  transform: translateX(0);
}

.image-eidt-4 img {
  width: 100%;
  height: auto;
  display: block;
}

.image-eidt-4::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 15px;
  z-index: 1;
  transition: background-color 0.3s ease;
}

.direction{
  text-align: center;
}
.direction button{
  font-family: cursive;
  font-weight: bold;
  background-color: #ffffff44;
  border:none;
  width:50px;
  height:50px;
  border-radius: 50%;
  transition: 0.5s;
}
.direction button:hover{
  background-color: #ffffff;
}
.item{
  background: #17455C;
  padding: 50px;
  border-radius: 15px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  border-radius: 15px;
  width:410px;
  overflow: hidden;
  transition: 0.5s;
  margin:10px;
  scroll-snap-align: start;
}
.item img{
  width: 50px;
  height: 50px;
  border-radius: 50%;
}

.item p {
  color: #b0b0b0;
}

.item h4 {
  font-style: italic;
}

.item span {
  color: #f8f9fa;
  font-weight: bold;
  font-style: italic;
}

#list{
  display: flex;
  width:max-content;
}
#formList{
  width:1280px;
  max-width: 100%;
  overflow: auto;
  scroll-behavior: smooth;
  scroll-snap-type: both;
}
#formList::-webkit-scrollbar{
  display: none;
}
@media screen and (max-width: 1024px){
  .item{
      width: calc(33.3vw - 20px);
  }
}
@media screen and (max-width: 768px){
  .item{
      width: calc(98vw - 20px);
  }
}

.contact-button2 {
  background: linear-gradient(145deg, rgba(255, 151, 0, 1) 0%, rgba(251, 75, 2, 1) 100%);
  color: white;
  padding: 15px 25px;
  font-size: 18px;
  border: none;
  border-radius: 10px;  /* Tạo dạng bong bóng */
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  display: flex;
  align-items: center;
  gap: 10px;
  transition: all 0.3s ease;  /* Thêm hiệu ứng mượt mà */
}

.contact-button2:hover {
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3);  /* Tăng bóng khi hover */
  transform: translateY(-2px);  /* Hiệu ứng nổi lên */
}

.contact-button2 i {
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  animation: pulse 1.5s infinite alternate, fade 2s infinite alternate;
  display: flex;
  gap: 10px;
}

@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); }
}

@keyframes fade {
  0% { opacity: 1; }
  50% { opacity: 0.5; }
  100% { opacity: 1; }
}



.contact-button {
  background: rgb(255, 27, 0);
  background: linear-gradient(0deg, rgba(255, 27, 0, 1) 0%, rgba(251, 75, 2, 1) 100%);
  color: white;
  padding: 15px 20px;
  font-size: 18px;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  animation: shake 1.5s infinite alternate, jump 0.6s infinite alternate;
  display: flex;
  gap: 10px;
}

@keyframes shake {
  0% { transform: translateX(0); }
  25% { transform: translateX(-3px); }
  50% { transform: translateX(3px); }
  75% { transform: translateX(-3px); }
  100% { transform: translateX(3px); }
}

@keyframes jump {
  0% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
  100% { transform: translateY(0); }
}

.problem-ads {
  background: white;
  color: black;
  padding: 50px 0;
}

.problem-ads i{
  color: #C23830;
  font-size: 40px;
}

.problem-ads p{
  font-weight: bold;
}

.problem-ads h3{
  font-weight: bold;
  color: #C23830;
}

.problem-ads-2 {
  background: white;
  color: black;
  padding: 50px 0;
}

.problem-ads-2 i{
  color: #00334A;
  font-size: 40px;
}

.problem-ads-2 p{
  font-weight: bold;
  color: #C23830;
}

.problem-ads-2 h2{
  font-weight: bold;
  color: #C23830;
}

.about-2 {
  background: #C23830;
  padding: 50px 0;
}

.about-2 h3 {
  font-weight: bold;
  text-align: center;
}

.about-2 h5 {
  text-align: center;
}

.error {
  background: #00334A;
  padding: 50px 0;
}

.image-eidt-5 {
  position: relative;
  border-radius: 15px;
  overflow: hidden;

}

.image-eidt-5 img {
  width: 100%;
  height: 100%;
  display: block;
}

.custom-image-2 {
  background: #b0b0b0;
  width: 100%;
  height: 100%;
  border-radius: 15px;
  object-fit: cover;
  display: block; /* Đảm bảo hình ảnh không bị ảnh hưởng bởi inline spacing */
}

.card-4 {
  background: white;
  border-radius: 10px;
  padding: 30px;
}

.card-4 i {
  color: #00334A;
  font-size: 50px;
}

.title-jump {
  text-align: center;
  cursor: pointer;
  animation: shake 1.5s infinite alternate, jump 0.6s infinite alternate;
  display: flex;
  gap: 10px;
  justify-content: center;
  align-items: center;
}

@keyframes shake {
  0% { transform: translateX(0); }
  25% { transform: translateX(-3px); }
  50% { transform: translateX(3px); }
  75% { transform: translateX(-3px); }
  100% { transform: translateX(3px); }
}

@keyframes jump {
  0% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
  100% { transform: translateY(0); }
}

@keyframes pulse {
  0% {
      transform: scale(1);
  }
  50% {
      transform: scale(1.2);
  }
  100% {
      transform: scale(1);
  }
}

.floating-btn {
  position: fixed;
  bottom: 50px;
  right: 20px;
  width: 50px;
  height: 50px;
  background-color: #C23830; /* Màu cam, không dùng màu xanh */
  color: white;
  border: none;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  z-index: 9999;
  animation: pulse 1.5s infinite ease-in-out;
  transition: background 0.3s, transform 0.2s;
}

.floating-btn:hover {
  background-color: #d43f00;
  transform: scale(1.3);
}

@media (max-width: 768px) {
  .floating-btn {
      width: 45px; /* Nhỏ hơn một chút trên mobile */
      height: 45px;
      bottom: 80px;
      right: 17px;
  }
}