* {
  box-sizing: border-box;
}

:root {
  --content-width: 1170;
  --while-color: #fff;
  --sub_heading_bg-color: #10375c; /* sub-heading h2 h3 , hero and footer background */
  --desc-color: #575f66;
  --hero-text-color: #c9d2da;
  --primary-color: #2e80ce; /* button , border */
  --btn-height: 60px;
}
html,
body {
  scroll-behavior: smooth;
}

html {
  font-size: 62.5%; /* turn rootfs from 16px to 10px */
}
body {
  font-size: 1.6rem;
  font-family: "Sora", sans-serif;
  font-style: normal;
  font-weight: 300;
}

/* ======================= Common ======================= */
.mt--170 {
  margin-top: 170px;
}
.content-wrapper {
  width: calc(var(--content-width) * 1px);
  max-width: calc(100% - 48px);
  margin: 0 auto; /* căn giữa */
}
a {
  text-decoration: none;
}
input,
textarea,
select,
button {
  font-family: inherit;
  font-size: inherit;
}
button {
  background: transparent;
  border: none;
  cursor: pointer;
}
.btn {
  height: var(--btn-height);
  display: inline-flex;
  background: var(--primary-color);
  color: var(--while-color);
  border-radius: 999px;
  min-width: 205px;
  font-size: 1.8rem;
  line-height: 3rem;
  font-weight: 400;
  /* text-align: center; */
  align-items: center;
  justify-content: center;
  border: 1px solid var(--primary-color);
  cursor: pointer;
}
.btn:hover {
  color: var(--primary-color);
  background: var(--while-color);
  opacity: 0.9;
}
.heading {
  font-weight: 600;
  color: var(--sub_heading_bg-color);
}
.heading1 {
  font-size: 7rem;
  line-height: 8rem; /* 114.286% */
  letter-spacing: -0.14rem;
  color: var(--while-color);
}
.heading2 {
  font-size: 5rem;
  line-height: 6rem; /* 120% */
  letter-spacing: -0.1rem;
}

.desc {
  color: var(--desc-color);

  font-size: 1.8rem;
  line-height: 3rem; /* 166.667% */
}
.desc--small {
  color: var(--desc-color);
  font-size: 1.6rem;
  line-height: 2.8rem; /* 175% */
}
.tac {
  text-align: center;
}
.control {
  display: flex;

  align-items: center;
  gap: 18px;
}
.control__btn {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  outline: none;
  color: #575f66; /* truyền giá trị cho currentColor trong fill của svg */
  background: transparent;
  border: 1px solid #575f66;
  transition: 0.25s;
}
.control__btn:hover {
  color: var(--while-color); /* truyền giá trị cho currentColor trong fill của svg */
  background: #2e80ce;
  border: none;
}
.list-wrapper {
  overflow: hidden;
}
/* logo for header n footer */
.logo {
  font-size: 1rem;
  position: relative;
  display: inline-flex;
  gap: 6px;
}
.logo__circle::before {
  content: "";
  display: inline-block; /* set ib để w,h có tác dụng */
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--primary-color);
}
.logo__circle::after {
  content: "";
  display: inline-block; /* set ib để w,h có tác dụng */
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--while-color);
  position: absolute;
  top: 1.1em;
  left: 1.1em;
}
.logo__text {
  color: var(--while-color);
  line-height: 1.4rem;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  font-family: "Sora", sans-serif;
}
.logo__brand {
  font-size: 1.8rem;
  font-weight: 400;
}
.logo__brand--small {
  font-size: 1.2rem;
  font-weight: 300;
}
/* ======================= End Common ======================= */

/* ======================= header ======================= */
.header {
  /* min-height: 100vh; */
  /* background: var(--sub_heading_bg-color); */
  /* padding-top: 30px; */
  padding-block: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.fixed-header {
  /* padding-top (30 = 10px + 20px ) , padding-bottom: 14px */
  /* chừa lại 14px block padding khi scroll fixed-header */

  position: sticky;
  padding-top: calc((30 - 10) * 1px);
  top: -20px; /* khi cuộn hết 20px padding-top ở trên sẽ sticky */
  z-index: 1;
  background: var(--sub_heading_bg-color);
}

.navbar {
}
.navbar__list {
  display: flex;
  /* justify-content: space-between;
  gap: 42px; */
}

.navbar__link {
  color: var(--hero-text-color);
  font-weight: 300;
  line-height: 2.8rem;
  padding: 4px 21px;
  position: relative;
}
.navbar__item:first-of-type .navbar__link {
  color: var(--while-color);
  font-weight: 400;
}
.navbar__item:first-of-type .navbar__link::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--while-color);
  position: absolute;
  /* right: 11px; */
  left: 7px;

  bottom: 50%;
  transform: translateY(50%); /* đẩy xuống 1 khoảng = 1/2 height before */
}

.header-action {
}
.header-action__login {
  color: var(--hero-text-color);
  font-size: 1.6rem;
  font-weight: 300;
  line-height: 2.8rem; /* 175% */
  margin-right: 28px;
}
.header-action__signup {
  min-width: 104px;
  line-height: 2.8rem;
  font-size: 1.6rem;
  height: 44px;
}
/* ======================= hero ======================= */
.hero {
  /* margin-top: 76px; */
  padding-top: calc((76 - 10) * 1px);
  /* 100vh - 84px */
  /* 44px (height fixed header ) + 30 (10 + 20) padding-top + 10 padding-bot */
  /* chừa lại paddingblock 10px cho fixed header khi cuộn */
  height: calc(100vh - 84px);
  background: var(--sub_heading_bg-color);
}
.hero__block {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: calc(113 / var(--content-width) * 100%);
}
.hero__content {
  width: calc(517 / var(--content-width) * 100%);
}
.hero__heading {
}
.hero_desc {
  color: #c9d2da;
  margin-top: 22px;
}
.hero__row {
  margin-top: 38px;
}
.hero__phone {
  color: var(--while-color);
  margin-left: 38px;
  color: #fff;
  font-size: 1.8rem;
  font-weight: 400;
  line-height: 3rem; /* 166.667% */
}
.hero__images {
  display: flex;
  align-items: center;
}
.hero__img {
  border-radius: 6px;
  object-fit: cover;
}

.hero__img:first-of-type {
  height: 540px;
  width: 330px;

  position: relative;
  margin-right: -6px; /* đè lên lề phải img2 6px */
}
.hero__img:nth-of-type(2) {
  height: 410px;
}

/* ======================= service ======================= */
.services {
  /* margin-block: 170px; */
}
.services__heading {
  margin-bottom: 18px;
}
.service__row {
  margin-top: 70px;
  display: flex;
  gap: 130px;
  align-items: center;
}

.service__img {
  /* width: calc(570 / var(--content-width) * 100%); */
  width: 570px;
  height: 570px;
  object-fit: cover;
  border-radius: 12px;
}
.service__content {
  width: calc(470 / var(--content-width) * 100%);
  /* padding-block: 35px; */
}
.service__list {
}
.service__item {
  display: flex;
  gap: 19px;
  /* width: 470px; */
  border-radius: 10px;
  background: #fff;
  /* padding: 21px 61px 20px 22px; */
  transition: 0.25s;
  padding: 22px;
}
.service__item:hover {
  box-shadow: 0 14px 28px 0 rgba(11, 11, 11, 0.1);
}
.service-item__icon {
  flex-shrink: 0; /* để icon ko bị co giãn theo chiều dọc bằng chiều cao desc */
  background: #eff6fd;
  color: #10375c;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: 0.35 ease;
}
.service-item__icon:hover {
  background: #2e80ce;
  color: var(--while-color);
}
.service-item__heading {
  font-size: 1.8rem;
}
.service-item__desc {
  margin-top: 8px;
  /* width: 244px; */
}
.service__see-all-btn {
  margin-top: 55px;
}

/* ======================= work ======================= */
.work {
  background: #f6fbff;
  padding-block: 100px;
}
.work__desc {
  margin-block: 18px 86px;
  width: calc(468 / var(--content-width) * 100%);
}

.work__list {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 30px;
}
.work-item {
  border-radius: 4px;
  background: var(--while-color);
  border: 16px solid #eaf6ff;
  padding: 43px 42px;
  transition: 0.25s;
}
.work-item:hover {
  border: 16px solid #2e80ce;
  transform: translateY(-16px);
}
.work-item:hover .work-item__more {
  color: #2e80ce;
}
.work-item__icon {
  width: 72px;
  height: 72px;
}
.work-item__heading {
  margin-top: 18px;
  font-size: 2.6rem;
  line-height: 3.6rem; /* 138.462% */
}
.work-item__desc {
  margin-block: 28px 18px;
}
.work-item__more {
}

/* ======================= feature ======================= */
.feature {
  /* padding-block: 170px; */
}
.feature__content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 130px;
}

.feature__media {
  /* width: calc(512 / var(--content-width) * 100%); */
}
.feature__images {
  position: relative;
  padding: 0 58px 121px 0;
  width: calc(512 / var(--content-width) * 100%);
}
.feat .feature__img {
  border-radius: 6px;
}
.feature__img:first-of-type {
  width: 512px;
  height: 370px;
  object-fit: cover;
}
.feature__img:last-of-type {
  position: absolute;
  width: 332px;
  height: 370px;
  /* bottom: -121px;
  right: -58px; */
  /* padding  bottom 121px , right 58px cho  rồi set inset 0 */
  right: 0;
  bottom: 0;
}
.feature__info {
  width: calc(468 / var(--content-width) * 100%);
}
.feature__heading {
}
.feature__desc {
  margin-block: 18px 38px;
}
/* ======================= member ======================= */
.member {
}
.member__header {
  text-align: center;
}
.member__heading {
  margin-bottom: 38px;
}
.member__list {
  margin-top: 70px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  column-gap: 30px;
}
.member-item:hover .member-item__thumb {
  transform: scale(1.1);
}
.member-item__img-bg {
  border-radius: 6px;
  background: #eaf6ff;
  padding-top: 28px;
  overflow: hidden;
}

.member-item__thumb {
  max-width: 100%;
  height: 290px;
  object-fit: cover;
  transition: 0.25s;
}
.member-item__info {
  margin-top: 12px;
  text-align: center;
}
.member-item__name {
  color: #10375c;

  font-size: 1.6rem;
  font-weight: 400;
  line-height: 2.8rem; /* 175% */
}
.member-item__title {
  color: #575f66;

  font-size: 1.4rem;
  font-weight: 300;
  line-height: 2.6rem; /* 185.714% */
}
.member__slide {
  margin-top: 38px;
  justify-content: center;
}
/* ======================= install ======================= */
.install__inner {
  border-radius: 4px;
  background: #2e80ce;
  /* height: 427px; */
  /* ko cần set height vì phần install__img nằm trong inner = 
  522 (h ảnh) - 95 (phần trồi ra ngoài) = 427
  */
  /* position: relative; */
  padding-inline: 70px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.install__img {
  /* position: absolute;
  bottom: 0; */
  /* ko cần dùng absolute hay padding cho inner vì dùng flex cho inner
  nên flex item __img kích thước ko bị giới hạn trong inner 
  */
  margin-top: -95px;
  display: block;
  width: 284px;
  height: 522px;
  object-fit: cover;
}
.install__info {
  max-width: 586px;
}
.install__heading {
  color: var(--while-color);
}
.install__desc {
  color: var(--while-color);
  margin-block: 18px 38px;
}
.install__row {
  display: flex;
  gap: 30px;
}
/* ======================= news ======================= */
.news {
}

.news__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 375px;
}
.news__content {
  /* max-width: 470px; */
  max-width: calc(470 / var(--content-width) * 100%);
}
.news__read-all-blog {
  display: inline-block; /* enable mb */
  color: var(--sub_heading_bg-color);
  margin-block: 28px;
  font-family: Inter;
  font-size: 1.8rem;
  font-weight: 600;
  line-height: 2.8rem; /* 155.556% */
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-skip-ink: none;
  text-decoration-thickness: auto;
  text-underline-offset: auto;
  text-underline-position: from-font;
}
.news__wrapper {
  max-height: 375px;
}
.news__list {
  /* display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: 1fr; */
  display: flex;

  /* gap: 30px; */
  /* max-height: 375px; */
  /* max-width: calc(570 / calc(--content-width) * 100%); */
  max-width: 570px;
  /* width: 570px; */
}
.news-item {
  /* flex: 1; */
  border-radius: 12px;
  /* border: 1px solid #e8ebee; */
  background: var(--while-color);
  transition: 0.25s;
  overflow: hidden;
  width: calc(270 / 570 * 100%);
  /* tránh 6 item co lại để nằm gọn trong list vì ở trên set width cứng cho list */
  flex-shrink: 0;
  /* width: 270px; */
}
.news-item:not(:nth-of-type(2n + 1)) {
  margin-left: 30px;
}
.news-item:hover {
  box-shadow: 0px 18px 50px rgba(0, 0, 0, 0.05);
  cursor: pointer;
}
.news-item:hover .news-item__info {
  /* border-color: var(--while-color); */
}

.news-item:hover .news-item__thumb {
  /* transform: scale(1.1); */
}
.news-item:hover .news-item__learn-more {
  color: var(--sub_heading_bg-color);
}
/*
Transform scale phóng to phần tử figure (bao gồm cả chiều rộng và chiều cao)

Vì figure có width = 270px, khi scale 1.1  ~297px. Do đó nó tràn ra ngoài layout vì bản thân container .news-item không giới hạn overflow.

overflow: hidden chỉ áp dụng bên trong figure, không ngăn chính figure phóng to vượt khỏi khung cha.
*/

.news-item:hover .news-item__img {
  transform: scale(1.1);
}
/*
Lúc này figure vẫn giữ nguyên width = 270px, height = 172px.
Ảnh bên trong phóng to nhưng bị cắt gọn bởi overflow: hidden của figure, tạo hiệu ứng zoom-in đẹp mắt mà không phá layout.
*/

.news-item__thumb {
  /* aspect-ratio: 270 / 172; */
  /* height: 172px; */
  /* width: 270px; */
  overflow: hidden;
  height: 172px;
  transition: 0.25s;
}
.news-item__img {
  /* width: 270px; */
  height: 172px;
  width: 100%;
  /* height: 100%; */
  object-fit: cover;
  /* width: 100%; */
  display: block; /*thẻ a có kích thước =img = figure */
  transition: 0.25s;
  /* dùng transform scale ở img thay vì figure thumb */
}
.news-item__info {
  padding: 18px 22px 21px;
  /* border-radius: 12px; */
  border-radius: 0 0 12px 12px;
  border: 1px solid #e8ebee;
  background: #fff;
  border-top: none;
}
.news-item__heading {
  color: var(--sub_heading_bg-color);
  font-size: 1.6rem;
  font-weight: 600;
  line-height: 2.6rem; /* 162.5% */
}
.news-item__desc {
  color: #575f66;
  font-size: 1.4rem;
  line-height: 2.4rem; /* 171.429% */
  margin-block: 10px 12px;
}
.news-item__learn-more {
  color: var(--primary-color);
  font-size: 1.4rem;
  font-weight: 400;
}
/* ======================= appointment ======================= */
.appointment__content {
  background: #f6fbff;
  padding: 100px 178px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 38px;
}
.appointment__heading {
  position: relative;
}
.appointment__heading::after {
  content: "";
  /* display: inline-block; */
  display: block;
  position: absolute;
  bottom: -18px;
  left: 50%;
  transform: translateX(-50%);
  width: 136px;
  height: 2px;
  background: var(--primary-color);
}
.appointment__desc {
  margin-inline: 98px;
  text-align: center;
}
/* ======================= footer ======================= */
.footer {
  font-family: "Open Sans", sans-serif;
  background: var(--sub_heading_bg-color);
  padding-block: 100px 42px;
  font-weight: 400; /* min 400 , max 600 */
}

.footer__row {
  display: flex;
  gap: 78px;
  position: relative;
  margin-bottom: 28px;
}
/* .footer__row::after {
  content: "";
  display: inline-block;
  position: absolute;
  width: 1170px;
  height: 1px;
  background: #406181;
  bottom: -28px;
} */
.footer__desc {
  color: #a9b3bb;
  margin-top: 21px;
}
.footer__heading {
  color: var(--while-color);
  font-size: 1.6rem;
  font-weight: 600;
  line-height: 2.8rem; /* 175% */
  margin-bottom: 20px;
}
.footer__list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.footer__item {
}
.footer__link {
  color: #a9b3bb;
  white-space: nowrap;
  color: #a9b3bb;
  font-size: 1.4rem;
  line-height: 2.6rem; /* 185.714% */
}
.footer__social {
  display: flex;
  gap: 10px;
}
.footer__social-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--while-color);
}
.footer__social-btn:first-of-type {
  background: #2e80ce;
}
.footer__subcribe {
  margin-top: 28px;
}
.footer__subcribe .footer__desc {
  font-size: 1.4rem;
  line-height: 2.6rem; /* 185.714% */
  max-width: 273px;
}
.footer__form {
  display: flex;
  gap: 12px;
  margin-top: 10px;
}
.footer-form__input {
  width: 212px;
  height: 46px;
  padding: 10px 10px;
  background: transparent;
  border-radius: 4px;
  border: 1px solid #406181;
  outline: none;
  color: #fff;
}
.footer-form__input::placeholder {
  font-size: 1.4rem;
  line-height: 1.86;
  color: #9ca8b1;
}
.footer-form__subcribe-btn {
  border-radius: 4px;
  background: #2e80ce;
  border: none;
  outline: none;
  color: var(--while-color);
  min-width: 108px;
  height: 46px;
}
.footer__copy-right {
  /* padding-top: 29px; */
  padding-top: 28px;
  border-top: 1px solid #406181;
}
.footer__copy-right--text {
  text-align: center;
  color: #aab3ba;

  font-size: 1.4rem;

  line-height: 2.6rem; /* 185.714% */
}