* {
  box-sizing: border-box;
}

:root {
  --primary-color: #0f1b4c;
  --content-width: 1110;
}
html,
body {
  scroll-behavior: smooth;
}
html {
  /* default font-size cua browser la 16px => 62.5% * 16 = 10px luc nay 1rem = 10px*/
  font-size: 62.5%;
}
body {
  font-size: 1.6rem; /* reset font-size ve 16px */
  font-family: "Poppins", sans-serif;
}

/* ======================= Common ======================= */
.content {
  width: calc(var(--content-width) * 1px);
  max-width: calc(
    100% - 48px
  ); /* nếu w browser < 1110px thì content sẽ ăn theo w browser, mỗi bên đều có 1 khoảng 24px, k xuất hiện thanh cuộn ngang */
  margin-inline: auto;
}

a {
  text-decoration: none;
}
.btn {
  min-width: 170px;
  /* height: 40px; */
  padding: 18px 16px; /* btn cao 50cm pd-l + pd-r + line-height = 18 + 18 + 14 (fs) */

  display: inline-block; /* enable min-width */
  border-radius: 12px;
  background: var(--primary-color);
  color: #fff;
  text-align: center;
  font-family: Poppins;
  font-size: 1.4rem;
  font-weight: 500;
  line-height: normal; /* = font-size = 1.4rem*/
}
.btn:hover {
  opacity: 0.85;
}

.line-clamp {
  /* giới hạn số dòng hiển thị */
  display: -webkit-box;
  -webkit-line-clamp: var(--line-clamp, 2); /* default 2 */
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* ======================= END COMMON =======================  */
.fixed-header {
  background: #e6f0ff;
  /* top signup button của fixed header cách top 38px   */
  padding-top: 26px; /* 38-12=26 */
  position: sticky;
  top: -26px; /* khi cuộn hết 26px padding ở trên sẽ sticky */
  z-index: 1;
}

.hero-wrap {
  background: #e6f0ff;
  /* height: 100vh; */
  /* phần fixed header trên hero-wrap chiếm 90px */
  /* gồm padding-top 26px, navbar cao 40px (button signup cao 40px) , navabr padding-top-bot 12px => 26+40+12*2=90*/
  height: calc(100vh - 90px);
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
}

.navbar {
  display: flex;
  align-items: center;
  /* padding-top: 38px; */
  /* k dùng margin-top vì sẽ bị margin-collapse */

  padding: 12px 0px; /*padding trên dưới để khi kéo xuống không bị dính sát đáy */
}
.navbar ul {
  display: flex;
  margin-left: 50px; /* 64 - 14 vi the a trong ul padding trai phai 14px  */
}
.navbar ul a {
  color: #4f5361;
  font-size: 1.4 rem;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  padding: 8px 14px;
}

.navbar .actions {
  margin-left: auto; /* căn sát qua phải */
}

.navbar .actions .action-link {
  color: var(--primary-color);
  font-size: 1.4rem;
  font-weight: 500;
}
.action-sign-up {
  min-width: 98px;
  padding: 13px 16px;
  margin-left: 18px;
  border-radius: 8px;
}

.navbar ul a:hover {
  text-decoration: underline;
}
/* ========== hero ========== */
.hero {
  /* margin-top: 130px; */
  /* display: flex; */
}
.hero .info {
  width: calc((559 / var(--content-width)) * 100%);
}

.hero .sub-title {
  color: #687690;
  font-size: 1.8rem;
  font-weight: 500;
  letter-spacing: 0.018rem;
  /* line-height: 27px; */
  line-height: calc(27 / 18);
}
.hero .title {
  color: #000336;
  font-size: 6.4rem;
  /* font-size: clamp(4rem, 4vw + 1rem, 6.4rem); */
  font-weight: 700;
  line-height: 7.6rem; /* 118.75% */
  margin-top: 8px;
}

.hero .desc {
  color: #5a6473;
  font-size: 1.8rem;
  font-style: normal;
  font-weight: 400;
  line-height: 3.2rem; /* 177.778% */
  text-transform: capitalize;
  margin-top: 30px;
}
.hero .hero-cta {
  margin-top: 40px;
  min-width: 170px;
}
.hero-img {
  /* width: calc(584 / var(--content-width) * 100%); */
  height: 619px;
  position: absolute; /* theo thẻ cha relative ở trên */
  bottom: 0;
  /* right: 65px; */
  /* rìa phải hero-img cách rìa phải content 100px */
  /* right: max(calc((100vw - var(--content-width) * 1px) / 2 - 100px), -63px); */
  right: max(calc((100vw - var(--content-width) * 1px) / 2 - 100px), 0px);
}
/* ==== Client ===== */
.client {
  margin-top: 79px;
  padding: 43px 0 41px;
}

.client .row {
  display: flex;
  justify-content: space-between;
}
/* .row .stars {
  margin-left: auto;
} */

.client .row .desc {
  color: #7d8589;
  font-family: Poppins;
  font-size: 1.6rem;
  font-style: normal;
  font-weight: 500;
  line-height: 1.25; /*  2rem; */
}
.client .row-desc {
  margin-top: 23px;
}
.client .images {
  margin-top: 96px;
  padding-inline: 10px;
  max-width: 100%;
  /* display: flex; */
  /* display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); */
  /* justify-content: space-between; */
  display: flex;

  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}
.client .images a {
  flex: 1 1 150px; /* Cho phép co giãn, min width 150px */
  max-width: 200px;
  height: 91px;
  /* width: 204px; */
  /* ko set padding vertical vì các image sẽ có kích thước khác nhau */
  /* padding: 0 42px;  */
  /* 39.4 = [1110 - sum_w_img(696) - 20px (sum_pd_inline)]/10 */

  padding: 0 calc(39.4 / (var(--content-width) - 20) * 100%);

  flex-shrink: 0;
  border-radius: 12px;
  background: #fff;
  /* display: grid;
  place-items: center; */
  display: flex;
  align-items: center;
}
.client .images a:hover {
  box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.1);
}
/* ======= Guides ========= */
.guides {
  margin-top: 40px;
  /* phần ngang ở trên là absolute rơi khỏi bố cục nên đó từ đỉnh how it work đến đỉnh guides */
  padding: 93px 0 79px;
}
.guides .sub-title {
  color: #000339;
  text-align: center;
  font-family: Poppins;
  font-size: 3.5rem;
  font-style: normal;
  font-weight: 600;
  line-height: 1; /* 100% 3.5rem; */
  position: relative;
}
.guides .sub-title::before {
  content: "";
  display: inline-block;
  position: absolute;
  width: 41px;
  height: 4px;
  border-radius: 999px;
  background: #000339;
  top: -10px;
  left: 50%; /* lui về phải 1 khoảng 50% width sub-title */
  transform: translateX(-50%); /* lui về phải 1 khoảng -50% kích thước pseudo-ele */
}
.guides .desc {
  color: #5a6473;
  text-align: center;
  font-family: Poppins;
  font-size: 1.6rem;
  font-style: normal;
  font-weight: 400;
  line-height: 187.5%; /* 3rem; */

  /* margin-top: 20px; */
  margin: 20px auto 0; /* căn giữa */
  width: 460px;
  max-width: 100%; /* tránh trình duyệt co lại < 460 xuất hiện thanh cuộn ngang */
}

.guides .list-guide {
  margin-top: 70px;
  display: flex;
  justify-content: center;
}

.list-guide .guide-item {
  margin: 0 70px; /* moi item cach nhau 140 */
  text-align: center; /* center img va h3 trong item */
}

.guide-item .title {
  color: #3b3c45;
  text-align: center;
  font-family: Poppins;
  font-size: 2rem;
  font-style: normal;
  font-weight: 500;
  line-height: 1.1; /* 2.2 rem = 110% */
  margin: 26px 0 10px;
}
.guide-item .link {
  text-decoration: none;
  color: #0689ff;
  font-family: Poppins;
  font-size: 1.4rem;
  font-weight: 600;
}

.guide-item .arrow {
  margin-left: 6px;
}

.guide-cta {
  display: flex;
  justify-content: center;
  margin-top: 50px;
}
.guide-cta .btn {
  min-width: 170px;
}

/* ========= feature ========= */
.feature {
  padding: 110px 0;
  margin-top: 41px;
  background: #f5fafe;
}
.feature .sub-title {
  color: #000339;
  font-family: Poppins;
  font-size: 3.5rem;
  font-style: normal;
  font-weight: 600;
  line-height: 1; /* 3.5rem= 100% */
}
.feature .row {
  display: flex;
  justify-content: space-between;
  margin-top: 15px;
}
.feature .row .link {
  color: #0689ff;
  text-align: right;
  font-family: Poppins;
  font-size: 1.8rem;
  font-weight: 600;
  display: flex;
}
.feature .row .link .arrow {
  margin-left: 8px;
}

.feature .list {
  margin-top: 70px;
  /* display: flex; */
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: calc(30 / var(--content-width) * 100%);
}
.feature .list .item {
  flex: 1; /* kích thước thẻ cha chia đều cho các thẻ con */
  border-radius: 12px;
}
.feature .item .thumb {
  /* ở trên đã set flex:1 nên các item cùng width , thumb có width = item */
  width: 100%;
  height: 227px; /* ảnh sẽ bị méo */
  object-fit: cover; /* giữ đúng tỷ lệ ảnh và lấp đầy khung hình */
  border-top-right-radius: 12px;
  border-top-left-radius: 12px;
}
.feature .item .body {
  padding: 17px 20px 24px;
  background: #fff;
}
.feature .body .title a {
  color: #000339;
  font-size: 2rem;
  font-weight: 600;
  line-height: 1; /* 2rem 100% */
}
.feature .body .desc {
  color: #a3a6ab;
  font-size: 1.4rem;
  font-weight: 500;
  line-height: normal;
  margin-top: 11px;
  word-break: break-all; /* xuống hàng khi ko có khoảng trắng tránh chọc xuyên giao diện */
}
.feature .body .info {
  margin-top: 21px;
  display: flex;
  align-items: center;
}
.feature .info .label {
  color: #4d4d52;
  font-size: 1.4rem;
  font-weight: 500;
  line-height: 1; /* 1.4rem; 100% */
  letter-spacing: 0.014rem;
  margin-left: 8px;
}
/* trừ icon đầu thì 2 icon sau ml 23px */
.feature .info .icon:not(:first-child) {
  margin-left: 23px;
}

/* ======== stats ======= */
.stats {
  margin-top: 75px;
  padding: 50px 0;
}
.stats .content {
  width: 1048px;
}
.stats .row {
  display: flex;
  /* justify-content: space-between; */
}
.stats .img-block {
  width: calc((520 / 1048) * 100%); /* bao gồm cả stats trend */
  position: relative;
}
.stats .info {
  padding: 79px 0 0 165px;
}

.stats .img-block .image {
  display: block;
  margin-left: auto;
  width: 400px;
  height: 460px;
  object-fit: cover;
  border-radius: 12px;
}
.stats .info .sub-title {
  color: #000339;
  font-size: 3.5rem;
  font-weight: 600;
  line-height: 128.571%; /* 4.5rem 128.571% */
  width: 269px;
  position: relative;
}
.stats .info .sub-title::before {
  position: absolute;
  content: "";
  top: -10px;
  left: 0;
  width: 41px;
  height: 4px;
  border-radius: 12px;
  background: #000339;
}
.stats .info .desc {
  width: 309px;
  color: #5a6473;
  font-size: 1.6rem;
  font-weight: 400;
  margin-top: 20px;
}
.stats .stats-trend {
  position: absolute;
  left: 0;
  top: 0;
  width: 239px;

  padding: 45px 22px 40px;
  background: #fff;
  box-shadow: 90px 85px 100px 0 rgba(0, 0, 0, 0.06);
  border-radius: 0 0 12px 12px;
}
.stats-trend .value {
  color: #000339;
  font-size: 2.6rem;
  font-weight: 700;
  letter-spacing: 0.026rem;
}
.stats-trend .icon {
  margin-left: auto; /* căn sang phải vì row container đã là flex box , k cần set block*/
}
.stats-trend .desc {
  margin-top: 8px;
  color: #a7a7a7;
  font-size: 1.2rem;
  font-weight: 400;
  line-height: 1.5; /* 1.8rem 150% */
}
.stats-trend .separate {
  width: 193.62px;
  height: 1.2px;
  flex-shrink: 0;
  background: #e9e9e9;
  margin-top: 25px;
}

.avatar-blocks {
  margin-top: 26px;
  display: flex;
  gap: 14px 16px;
  flex-wrap: wrap;
}
.avatar-blocks .avatar-group {
  display: flex;
}
.avatar-blocks .avatar-group .avatar {
  width: 16.337px;
  height: 16.337px;
  object-fit: cover;
  border-radius: 50%;

  background: var(--bg-color, #fff);
  filter: drop-shadow(4px 4px 16px rgba(0, 0, 0, 0.1));
  text-align: center;
  color: #fff;
  text-align: center;
  font-family: "Circular Std";
  font-size: 0.7261rem;
  font-weight: 450;
  letter-spacing: -0.0145rem;
  line-height: 16.337px; /* đặt lh = height avatar để căn giữa theo chiều dọc */
}
.avatar-blocks .avatar-group .avatar ~ .avatar {
  margin-left: -3px;
}

.stats .avatar-non-img {
}

.stats .row-qty {
  margin-top: 110px;
  justify-content: space-between;
  padding: 0 32px;
}
.row-qty .qty {
  color: #000;
  font-size: 6.4rem;
  font-weight: 600;
  line-height: 1; /* 1 100% */
}
.row-qty .qty-desc {
  color: #7b8087;
  font-size: 1.8rem;
  font-weight: 500;
  margin-top: 24px;
}
/* ========== subscription ======== */
.subscription {
  margin-top: 51px;
  padding-top: 39px;
}
.subscription .body {
  border-radius: 20px;
  background: #063183;
  height: 370px;
  display: flex;
  align-items: center; /* info cách trên dưới 110px */
  position: relative;
}
.subscription .body .info {
  /* padding: 110px 90px 0 80px; */
  /* padding: 0 90px 0 80px; */
  margin-left: 80px;
  max-width: 100%;
  width: calc(501 / var(--content-width) * 100%);
}
.subscription .info .sub-title {
  color: #fff;
  font-size: 3.5rem;
  font-weight: 600;
  line-height: 1; /* 3.5rem 100% */
}
.subscription .info .desc {
  color: #fff;
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 1.875; /* 3rem 187.5% */
  margin-top: 15px;
  opacity: 0.75;
}

.subscription .info .btn {
  min-width: 151px;
  background: #fff;
  color: #002366;
  margin-top: 20px;
}

.subscription .image {
  position: absolute;
  bottom: 0;
  right: calc(221 / var(--content-width) * 100%);
}
/* =========== footer =========== */
.footer {
  margin-top: 55px;
  padding: 50px 0 58px;
}
.footer .row {
  display: flex;
  justify-content: space-between;
}
.footer .row-top {
  /* gap: 185px; */
  gap: calc(185 / var(--content-width) * 100%);
}
.footer .row-top .heading {
  color: #1c1c1d;
  font-family: "Lato", sans-serif;
  font-size: 2rem;
  font-weight: 700;
}
.footer .row-top .list {
  margin-top: 42px;
}
.footer .list .item {
}
.footer .list .item ~ .item {
  margin-top: 18px;
}
/* các case mà column heading chỉ có 1 từ và width > các từ đầu trong list item a 
width của column lúc sẽ chỉ = width heading , cần thêm white-space: no-wrap
*/
.footer .list .item a {
  text-decoration: none;
  color: #7a7a7e;
  font-size: 1.6rem;
  font-weight: 400;
  white-space: nowrap; /* vì flex-item sẽ có kích thước = từ có kích thước dài nhất , các từ có khoảng trắng sẽ bị wrap */
}
.footer .desc {
  margin-top: 40px;
  color: #7a7a7e;
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 1.75; /* 2.8rem 175% */
}
.footer .social {
  margin-top: 40px;
  display: flex;
  gap: 16px;
}
.footer .social .social-link {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f9f9f9;
}
.footer .social .social-link:hover {
  background: #ebebeb;
}
.footer .row-bottom {
  margin-top: 81px;
  align-items: center;
}
.footer .row-bottom .copy-right {
  color: #c2c2c2;
  font-size: 1.4rem;
  font-weight: 400;
}