* {
  box-sizing: border-box;
}

:root {
  --font-color1: #ffffff;
  --primary-color: #0f4f8c;
  --second-color: #2e80ce;
  --third-color: #f6fbff;
}

html {
  font-size: 62.5%;
}

body {
  font-size: 1.6rem;
  font-family: "Open Sans", sans-serif;
  border: none;
}

/* ========================common===================== */
.container {
  width: 1140px;
  max-width: calc(100% - 48px);
  margin: 0 auto;
}

a {
  text-decoration: none;
  cursor: pointer;
}

.heading-lv2 {
  font-size: 2.4rem;
  font-weight: 600;
  line-height: 1.38;
  color: var(--primary-color);
  border: none;
}

.btn {
  display: inline-block;
  min-width: 125px;
  line-height: 37px;
  background: var(--second-color);
  text-align: center;
  color: var(--font-color1);
  font-size: 1.6rem;
  font-weight: 600;
  border-radius: 999px;
}

.btn:hover {
  color: var(--font-color1);
  background: var(--second-color);
  transition: 0.25s;
}

.line-top::after {
  position: absolute; /*định vị là vị trí con cháu*/
  left: 0px;
  margin-top: 16px;
  display: block;
  content: "";
  width: 60px;
  height: 1px;
  border-radius: 1px;
  background: #ff0000;
}

.line-cus::after {
  left: 50%; /* Đặt vị trí bắt đầu từ giữa */
  transform: translateX(
    -50%
  ); /* Dịch chuyển ngược lại 50% chiều rộng để căn giữa*/
}

/* xuống dòng khi có quá 1 hàng */
.line-clamp {
  display: -webkit-box; /*kích hoạt mô hình -Webkit-box*/
  -webkit-line-clamp: var(--line-clamp, 1);
  /*nếu không có biến truyền vào thì mặc định là 1 dòng*/
  -webkit-box-orient: vertical; /*xác định mô hình webkit-box theo chiều dọc*/
  overflow: hidden; /*ẩn nội dung vượt ra khỏi giới hạn phần tử*/
}

.line-2 {
  --line-clamp: 2;
}

.line-3 {
  --line-clamp: 3;
}

.line-9 {
  --line-clamp: 9;
}

.line-11 {
  --line-clamp: 11;
}

.break-all {
  word-break: break-all; /*ngắt dòng văn bản đảm bảo không phá vỡ giao diện*/
}

.background__img {
  min-width: 100vw;
  background-size: cover; /* Phủ kín toàn bộ khu vực */
  background-position: center; /* Căn giữa ảnh */
  background-repeat: no-repeat; /* Không lặp lại ảnh */
  position: relative;
}

/* lớp phủ trên background */
.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(15, 79, 140, 0.8); /* Màu #0F4F8C với độ mờ 80% */
  z-index: 0;
}

/* Container chứa hình ảnh và lớp phủ */
.container-overlay {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  filter: drop-shadow(4px 4px 4px rgba(0, 0, 0, 0.7));
  cursor: pointer;
}

.container-overlay img {
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

/* Lớp phủ (overlay) */
.overlay2 {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    to top,
    rgba(46, 128, 206, 1),
    rgba(0, 150, 255, 0.5),
    transparent
  );
  transform: translateY(100%); /* Ẩn ban đầu - ở dưới */
  transition: transform 0.5s ease;
  display: flex;
  justify-content: center;
  /* align-items: flex-end; căn nội dung xuống dưới đáy */
  align-items: flex-start;
  text-align: center;
  padding: 216px 42px 20px 42px; /* top: 216px, right: 42px, bottom: 20px, left: 42px */
}

.overlay2-cus {
  padding: 106px 19px 16px 19px; /* top: 106px, right: 19px, bottom: 16px, left: 19px */
}

.container-overlay:hover .overlay2 {
  transform: translateY(0); /* Trượt lên */
}

.container-overlay:hover .overlay2-text {
  opacity: 1;
}

/* Hiệu ứng phóng to nhẹ hình khi hover */
.container-overlay:hover img {
  transform: scale(1.1);
}

/* ========================header===================== */

.header {
  position: sticky;
  top: 0px;
  z-index: 2;
}

.header-top__bg {
  min-width: 100vw;
  height: 70px;
  margin: 0 auto;
  background: linear-gradient(-45deg, #0f4f8c 68%, #ffffff 50%);
  position: absolute;
  border: none;
}

.header-top {
  display: flex;
  position: relative;
}

.header__logo {
  padding-top: 12.5px;
  line-height: 2;
}
.navbar {
  margin-left: 180px;
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: center;
  text-align: center;
}

.navbar__list {
  gap: 35px;
  display: flex;
}

.navbar__link,
.navbar__hotline {
  color: var(--font-color1);
  font-size: 1.3rem;
  font-weight: 600;
}

.navbar__link:hover {
  color: #ff0004;
  font-size: 1.3rem;
  transition: 0.25s;
}

.navbar__link--active::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--font-color1);
  position: relative;
  top: -2px;
  right: 5px;
}

.navbar__link--active:hover::before {
  background: #ff0004;
  transition: 0.25s;
}

.navbar__hotline {
  display: inline-block;
  margin-right: 5px;
}

/* ===========================hero======================= */

.hero__image--home {
  width: 100vw;
  height: 90vh;
  object-fit: cover;
}

/* ========================about us===================== */
.about-us {
  min-width: 100vw;
  background: var(--third-color);
  padding: 80px 0px;
}

.about-us--top {
  display: flex;
  justify-content: space-between;
}

.about-us__content {
  width: 45%;
  height: 372px;
}

.about-us__heading2 {
  width: 514px;
  text-align: justify;
  font-size: 2.8rem;
  font-weight: 800;
  color: var(--primary-color);
  line-height: 1.18;
  margin-top: 15px;
  position: relative;
}

.about-us__heading2::after {
  top: 33px;
}
.about-us__desc {
  text-align: justify;
  margin-top: 44px;
  line-height: 1.38;
}

.about-us--seemore {
  display: flex;
  width: 156px;
  line-height: 37px;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin-top: 28px;
  color: var(--second-color);
  background: transparent;
  border: 1px solid var(--second-color);
  font-weight: 700;
}

.icon-right {
  margin-top: 2px;
  margin-left: 8px;
}

.about-us__media {
  width: 50%;
}

.about-us--bottom {
  display: flex;
  margin-top: 65px;
}

.about-us__media--img {
  width: 100%;
  height: 415;
  object-fit: cover;
  border-radius: 16px;
}
.about-us__index {
  display: flex;
  margin-left: 108px;
  flex-direction: column; /* Sắp xếp các phần tử theo chiều dọc */
  gap: 28px;
}

.about-us__title {
  font-size: 2.4rem;
  font-weight: 700;
  color: #10375c;
  line-height: 1.38;
}

span {
  font-size: 1.8rem;
  font-weight: 700;
  color: #7b7b7b;
  line-height: 1.3;
}

strong {
  font-size: 6.4rem;
  font-weight: 700;
  color: #ff0004;
  line-height: 1.35;
}

/* ===========================mav======================= */
.mav {
  min-width: 100vw;
  padding: 80px 0px;
  height: 520px;
}

.mav__desc {
  text-align: justify;
  margin-top: 42px;
  line-height: 1.38;
}
.mav__heading {
  position: relative;
}

.mav__media {
  margin-top: 32px;
  text-align: center;
  color: var(--primary-color);
  line-height: 1.38;
}

.mav__heading2 {
  font-size: 2.4rem;
  font-weight: 700;
}

.mav__img {
  margin-top: 40px;
}

/* ===========================certificate======================= */
.certificate {
  min-width: 100vw;
  padding: 32px 0px;
  height: 616px;
}

.cer__heading {
  position: relative;
}

.cer__list {
  margin-top: 44px;
  display: grid;
  grid-template-columns: repeat(3, 1fr); /*chia 3 cột các cột đều nhau 1 fr*/
  gap: 97px;
}

.cer__item {
  width: 315px;
}

.cer__item:hover {
  border-color: var(--second-color);
  transition: 0.5s;
  transform: scale(1.1);
}

.cer__item--img {
  width: 100%;
  height: 446px;
  object-fit: cover;
}

/* ===========================business field======================= */
.business {
  min-width: 100vw;
  padding: 59px 0px;
  height: 613px;
  background-image: url("./bus-bg.png");
}

/* Đảm bảo nội dung khác không bị che */
.business > *:not(.overlay) {
  position: relative;
  z-index: 1;
}

.bus__heading {
  color: var(--font-color1);
  text-align: center;
  position: relative;
}

.bus__desc {
  text-align: center;
  line-height: 1.38;
  color: var(--font-color1);
  width: 900px;
  margin: 48px auto 0;
}

.bus__list {
  margin-top: 40px;
  display: grid;
  grid-template-columns: repeat(3, 1fr); /*chia 3 cột các cột đều nhau 1 fr*/
  gap: 30px;
}

.bus__item {
  text-align: center;
  justify-content: center;
  color: var(--font-color1);
  position: relative;
}

.bus__item:hover {
  color: #ff650c;
  transition: 0.3s;
  cursor: pointer;
}

.bus__item--img {
  width: 150px;
  height: 150px;
  margin-top: 15px;
  border-radius: 999px;
  position: relative;
}
.bus__item--title {
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1.38;
  margin-top: 18px;
}

.bus__item--desc {
  font-size: 1.3rem;
  line-height: 2.15;
  margin: 21px auto 0; /*căn giữa đối với thẻ inline block có kích thước cố định*/
  width: 330px;
  height: 90px;
}

.bus__item--ring {
  position: absolute;
  margin: 7px 97px;
  display: block;
  content: "";
  width: 166px;
  height: 166px;
  border-radius: 900px;
  background: transparent;
  border: 1px solid var(--font-color1);
}

.bus__item:hover .bus__item--ring {
  border: 1px solid #ff650c;
  transition: 0.3s;
}

/* ===========================products======================= */
.products {
  min-width: 100vw;
  padding: 80px 0px;
  height: 1332px;
  background-color: #f6f6f6;
}

.pro__heading {
  text-align: center;
}

.pro__desc {
  text-align: center;
  line-height: 1.38;
  width: 566px;
  margin: 48px auto 0;
}

.pro__block--list {
  width: 1080px;
  margin: 0 auto;
}
.pro__list {
  margin-top: 40px;
  display: grid;
  grid-template-columns: repeat(3, 1fr); /*chia 3 cột các cột đều nhau 1 fr*/
  gap: 30px;
}

.pro__item {
  border: 1px solid var(--primary-color);
  border-radius: 8px;
  width: 340px;
  height: 459px;
}
.pro__item--media {
  overflow: hidden;
  border-radius: 8px;
}

.pro__item--img {
  width: 336px;
  height: 238px;
  border-radius: 8px;
  object-fit: cover;
  border: none;
  margin: 1px 0 0 1px; /* trên | phải | dưới | trái */
}

.pro__item--title {
  text-align: center;
  color: var(--second-color);
  font-weight: 700;
  line-height: 1.38;
}

.pro__item--info {
  margin-top: 25px;
}

.pro__item--format {
  font-size: 1.3rem;
  line-height: 2.15;
  margin: 12px 0px 0px 24px;
}

.pro__val-btn {
  width: 338px;
  height: 64px;
  display: flex;
  margin-top: 8px;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--primary-color);
  border-radius: 0px 0px 8px 8px;
}

.pro__val-btn--btn {
  width: 125px;
  height: 42px;
  margin-right: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid var(--second-color);
  border-radius: 99px;
}
.pro__val-btn--value {
  margin-left: 24px;
  font-weight: 700;
  color: var(--second-color);
}

.pro__val-btn--icon {
  margin-left: 4px;
  color: var(--second-color);
}

.pro__val-btn--buynow {
  margin-right: 11px;
  font-weight: 600;
  line-height: 1.38;
  color: var(--second-color);
}

.pro__btn {
  padding: 48px;
  text-align: center;
}

.pro__btn--seeall {
  width: 164px;
  height: 46px;
  font-weight: 700;
  line-height: 1.38;
  background: transparent;
  border: 1px solid var(--second-color);
  color: var(--second-color);
  border-radius: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
}

.pro__list:hover .pro__item {
  cursor: pointer;
}

.pro__item:hover .pro__val-btn--btn {
  background: var(--second-color);
  transition: all 0.5s ease;
}

.pro__item:hover .pro__val-btn--buynow {
  color: var(--font-color1);
  transition: all 0.5s ease;
}

.pro__item:hover .pro__val-btn--icon {
  color: var(--font-color1);
  transition: all 0.5s ease;
}

.pro__item:hover .pro__val-btn--value {
  color: #ff650c;
  transition: all 0.5s ease;
}

.pro__item:hover .pro__item--img {
  transform: scale(1.1);
  transition: all 0.5s ease;
}

/* ===========================plan======================= */
.plan {
  min-width: 100vw;
  padding: 24px 0px;
  height: 628px;
  background-image: url("./plan-bg.png");
}

/* Đảm bảo nội dung khác không bị che */
.plan > *:not(.overlay) {
  position: relative;
  z-index: 1;
}

.plan__heading {
  color: var(--font-color1);
  position: relative;
}

.plan__desc {
  color: var(--font-color1);
  margin-top: 44px;
  line-height: 1.38;
}

.plan__media {
  height: 400px;
  margin-top: 28px;
  display: grid;
  grid-template-columns: repeat(2, 1fr); /*chia 2 cột các cột đều nhau 1 fr*/
  gap: 22px;
}
.plan__img--right {
  width: 100%;
  height: 400px;
  object-fit: cover;
  filter: drop-shadow(4px 4px 4px rgba(0, 0, 0, 0.7));
}

.plan__media--left {
  display: grid;
  grid-template-rows: repeat(2, 1fr); /*chia 2 hàng các cột đều nhau 1 fr*/
  gap: 22px;
  filter: drop-shadow(4px 4px 4px rgba(0, 0, 0, 0.7));
}

.plan__list {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /*chia 2 cột các cột đều nhau 1 fr*/
  gap: 22px;
  position: relative;
}

.plan__title--large {
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1.38;
  text-align: center;
  color: var(--font-color1);
}

.plan__desc--large {
  margin-top: 16px;
  font-size: 1.6rem;
  line-height: 1.38;
  text-align: justify;
  color: var(--font-color1);
}

.plan__title--small {
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.38;
  text-align: center;
  color: var(--font-color1);
}

.plan__desc--small {
  margin-top: 8px;
  font-size: 1.3rem;
  line-height: 1.38;
  text-align: justify;
  color: var(--font-color1);
}

/* ===========================partner======================= */

.partner {
  min-width: 100vw;
  padding: 80px 0px;
  height: 363px;
  background-color: #f6f6f6;
}

.par__heading {
  position: relative;
}

.par__list {
  margin: 48px 24px;
  display: grid;
  grid-template-columns: repeat(5, 1fr); /*chia 2 cột các cột đều nhau 1 fr*/
  gap: 51px;
  position: relative;
}

.par__item {
  display: flex;
  align-items: center;
  justify-content: center;
}

.par__item--img {
  width: 143px;
  height: 126px;
  object-fit: cover;
}

/* ===========================news======================= */

.news {
  min-width: 100vw;
  padding: 32px 0px;
  height: 700px;
  background-color: #f6f6f6;
}

.news__heading {
  position: relative;
}

.news__list {
  margin-top: 48px;
  display: grid;
  grid-template-columns: repeat(3, 1fr); /*chia 2 cột các cột đều nhau 1 fr*/
  gap: 36px;
  position: relative;
}

.new__item {
  display: flex;
}

.new__img {
  width: 356px;
  height: 252px;
  border-radius: 8px;
  object-fit: cover;
}

.news__content {
  width: 357px;
  height: 242px;
  margin-top: 8px;
  text-align: justify;
}
.news__desc--title {
  line-height: 1.38;
}

.news__desc--info {
  margin-top: 8px;
  font-size: 1.2rem;
  line-height: 1.5;
}
.new__desc--color {
  font-size: 1.2rem;
  font-weight: 400;
  color: #ff650c;
}

.news__desc--text {
  font-size: 1.3rem;
  margin-top: 16px;
  line-height: 1.38;
}

.news__list:hover .news__item {
  cursor: pointer;
}

/* ===========================footer======================= */

.footer {
  min-width: 100vw;
  padding: 80px 0px;
  height: 550px;
  /* background-color: #2e80ce; */
  background-image: url("./foot-bg.png");
}

/* Đảm bảo nội dung khác không bị che */
.footer > *:not(.overlay) {
  position: relative;
  z-index: 1;
}

.footer__block {
  border-bottom: 0.3px solid var(--font-color1);
  height: 360px;
}
.footer__list {
  display: flex;
  justify-content: space-between;
}

.footer__heading {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--font-color1);
}

.footer__info {
  margin: 32px 0px; /*top & bot = 32px, left & right = 0px*/
}

.footer__info--cus {
  display: flex;
  margin-top: 19px;
  align-items: center;
  gap: 6px;
  color: var(--font-color1);
}

.footer__page--info {
  margin: 32px 0px; /*top & bot = 32px, left & right = 0px*/
}

.footer__desc--info {
  margin-top: 16px;
  line-height: 1.38;
  color: var(--font-color1);
  cursor: pointer;
}

.footer__copyright {
  margin-top: 36px;
  text-align: center;
  color: var(--font-color1);
}