* {
  box-sizing: border-box;
}
:root {
  --primary-color: #ffb900;
  --content-width: 1170;
  --while-color: #fff;
  --color-heading: #171100;
  --font-heading: Sen, sans-serif;
  --fontweight-heading: 700;
  --desc-color: #5f5b53;
  --btn-height: 50px;
  /* ko nên set gap-size theo % mà nên set cứng theo %
  khi container resize , gap sẽ ko ổn
  như ở course-list và blog-3-items dùng gap %
  nhưng thumb lại set width cứng , khi thu nhỏ
  flex-item sẽ thu nhỏ nhưng thumb ko thu nhỏ => trồi ra
  */
  --gap-size: 30px;
}
html {
  font-size: 62.5%;
  /* font-weight: 400; */
}
html,
body {
  scroll-behavior: smooth;
  font-weight: 400;
}
body {
  font-size: 1.6rem; /* reset font-size ve 16px */
  font-family: "Poppins", sans-serif;
  background-color: var(--while-color);
}
/* common */
.mt-200 {
  margin-top: 200px;
}
.main-content {
  width: calc(var(--content-width) * 1px);
  max-width: calc(100% - 48px);
  margin-left: auto;
  margin-right: auto;
}
a {
  text-decoration: none;
}

.btn {
  display: inline-block;
  /* căn giữa text theo chiều ngang */
  text-align: center;
  font-weight: 600;
  color: #fff;
  border-radius: 999px;
  background: var(--color-heading);
}
.btn:hover {
  opacity: 0.9;
  cursor: pointer;
}
/* vì btn đa phần chỉ 1 line => lh ko quan trọng
  dùng line-height = height btn để căn giữa text theo vertical
*/
/* signup , join now btn in feature */
.medium-btn {
  width: 137px;
  /* căn giữa text theo chiều dọc */
  height: var(--btn-height);
  line-height: var(--btn-height);
  font-size: 1.6rem;
  /* line-height: 2.8rem;  */
}

/* book now btn in popular couse,
  read more btn in blog
*/
.small-btn {
  width: 118px;
  height: var(--btn-height);
  /* căn giữa text theo chiều dọc */
  line-height: var(--btn-height);
  font-size: 1.4rem;
  /* line-height: 2.6rem;  */
}
.small-btn:hover {
  background: var(--primary-color);
}
.line-clamp {
  display: -webkit-box;
  -webkit-line-clamp: var(--line-clamp, 2);
}
.heading {
  font-family: var(--font-heading);
  color: var(--color-heading);
  font-weight: var(--fontweight-heading);
}
.heading1 {
  font-size: 5.8rem;
  letter-spacing: -0.116rem;
  line-height: calc(6.8 / 5.8); /*6.8rem;   117.241% */
}
.heading2 {
  font-size: 3.8rem;
  letter-spacing: -0.076rem;
  /* line-height: calc(4.8 / 3.8);  */
  line-height: calc(4.5 / 3.8); /*  4.5rem; 126.316% */
}
/* ko cần quan tâm các desc có mt <> 16px */
.desc {
  color: var(--desc-color);
  margin-top: 16px;
  line-height: 2.8rem; /* 175% */
}
.flex-sb-center {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.flexbox-sb-center-mt55-list {
  margin-top: 55px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* gap: calc(30 / var(--content-width) * 100%); */
  /* gap: var(--gap-size); */
  /* dù set gap vẫn phải set width cho flexitem
  nếu ko khi thêm border , padding cho flex-item 
  sẽ thay đổi width flex-item
  */
}
.flexitem-33width {
  width: calc(370 / var(--content-width) * 100%);
  /* nếu chỉ set width ko set gap , nếu > 3 item sẽ hiển thị 1 phần item t4 */
  flex-shrink: 0;
  /*  ⇒ Không bị co lại ⇒ Xuất hiện horizontal scroll */
}
.list-wrapper {
  overflow: hidden;
}
/* các icon đều là 1svg nằm trong 1 hình tròn => set flex , sau đó set w,h,br50 ứng với mỗi icon */
.icon {
  display: flex;
  align-items: center;
  justify-content: center;
}
/* các dot */
.dots {
  display: flex;
  justify-content: center;
  gap: 12px;
}
.dot {
  width: 6px;
  height: 6px;
  border-radius: 6px;
  background: #634700;
}
.active-dot {
  background: #ffb900;
}
/* thẻ a bọc img thumb*/
.img-link {
  display: block;
  width: 100%;
}
.thumb-img {
  width: 100%;
  /* max-width: 100%; */
  /* width: 370px; */
  /* display: block; */
  /* max-width: 100%; */
  height: auto;
  /* Tối ưu render */
  contain: layout style paint;
}
/* ===== End common ====== */

/* === slide === */
.blog-list,
.feedback-list {
  will-change: transform;
  transform: translateZ(0); /* Force GPU */
  backface-visibility: hidden;
}

.blog-item,
.feedback-item {
  will-change: contents; /* Hoặc auto */
  transform: translateZ(0);
}
/* end slide */

/* header */
.fixed-header {
  /* padding-top: 36px; */
  padding-top: calc((36 - 14) * 1px);
  background: #fffcf4;

  position: sticky;
  top: -22px;
  z-index: 1;
}
.fixed-header .header {
  /* display: flex;
  align-items: center; */
}
.fixed-header .nav-bar {
  display: flex;
  align-items: center;
  padding: 14px 0;
}
.fixed-header .logo {
  width: 85px;
  object-fit: cover;
}

.fixed-header .list {
  margin-left: auto; /* kéo cả list và actions qua rìa phải */
  display: flex;
  align-items: center;
  /* margin-right: calc((70 - 21) * 1px); */
}
.fixed-header .list .item {
}
.fixed-header .list a {
  color: var(--desc-color);
  font-size: 1.6rem;
  font-style: normal;

  line-height: 2.8rem; /* 175% */
  padding: 4px 21px; /* moi item cach nhau 42px  = 21 + 21*/
  position: relative;
}
.fixed-header .list a:hover {
  color: #171100;
  /* font-weight: 600; */
  /*Dùng tshadow thay fontweight vì fontweight làm dãn thẻ a , khi hover vào sẽ làm item nhảy đẩy các item phía trước */
  text-shadow: 1px 0 0 currentColor;
}
/* xuất hiện khi hover vào a */
.fixed-header .list a:hover::after {
  content: "";
  display: inline-block;
  /* width: calc((12 / (49 + 21 + 21) * 100%)); */
  width: 12px;
  height: 2px;
  border-radius: 1px;
  background: var(--color-heading);
  position: absolute;
  bottom: 0;
  left: 21px; /* a có padding left 21 px */
}

.fixed-header .logo {
  margin-right: auto;
}
.fixed-header .actions {
  /* margin-left: auto; căn sát rìa phải */
  margin-left: calc((70 - 21) * 1px); /* cách 49px + padding right 21 của item trong list = 70 */
}
.fixed-header .actions .action-sign-in {
  background: var(--while-color);
  color: #5f5b53;
  margin-right: 21px;
}
.fixed-header .actions .action-sign-up {
  /* font-size: 1.6rem;
  line-height: 2.8rem;
  padding: 11px 41px; */
  width: 144px;
}
/* reset button */
button {
  background: transparent;
  border: none;
}
/* ====== hero wrap ====== */
.hero {
  background: #fffcf4;
  /* 100vh - height phần fixed header chiếm*/
  /* 50 (fixed header) + 36 (14+ 22) padding top + 14 padding bot*/
  /* 100px là height của fixed-header, trừ đi để hiển thị tụt xuống dưới fixed-header vì fixed-header index 1 sẽ đè lên hero */
  height: calc(100vh - 100px);
  padding-top: calc((64 - 14) * 1px); /* 14px padding bottom của navbar */
}

.hero__body {
  display: flex;
  gap: calc((230 / 1170) * 100%);
}
/* ============ hero-left ============*/
.hero__media {
  position: relative;
  width: calc(470 / var(--content-width) * 100%);
}
.hero__summary {
  position: absolute;
  bottom: 48px;
  width: calc((270 / 470) * 100%);
  padding: 24px 58px 24px 24px;
  background: var(--while-color);
  border-radius: 12px;
  box-shadow: 0 16px 32px 0 rgba(0, 0, 0, 0.05);
  left: 300px;
}
.hero__item ~ .hero__item {
  margin-top: 14px;
}
.hero__item {
  display: flex;
  gap: 16px;
  align-items: center;
}
.hero-item__icon {
  /* width: 48px;
  height: 48px; */
  padding: 12px;
  border-radius: 50%;
}
.hero__item:nth-of-type(1) .hero-item__icon {
  background: #fff9e8;
}
.hero__item:nth-of-type(2) .hero-item__icon {
  background: #fcefff;
}
.hero__item:nth-of-type(3) .hero-item__icon {
  background: #ebeaff;
}
.hero__item a {
  display: inline-block;
}
.hero-item__qty {
  color: #5f5b53;
  font-size: 1.4rem;

  line-height: 2.6rem; /* 185.714% */
}
.hero-item__category {
  color: var(--color-heading);
  font-size: 1.8rem;
  font-weight: 600;
  line-height: 3rem; /* 166.667% */
}

/* ============== hero right ============ */
.hero__content {
  width: cacl(470 / var(--content-width) * 100%);
  margin-top: 64px;
}
.hero__heading {
  margin-bottom: 22px;
}
.hero__desc {
  font-size: 1.8rem;

  line-height: 3rem; /* 166.667% */
  /* margin-top: 22px; */
}

.hero__cta-course {
  margin: 38px 0 48px;
  display: flex;
  align-items: center;
}
.hero__btn {
  padding: 17px 34px;
  background: var(--primary-color);
  font-size: 1.8rem;
  font-style: normal;
  font-weight: 600;
  line-height: 3rem; /* 166.667% */
}
.hero__watch-video {
  display: flex;
  align-items: center;
  cursor: pointer;
  margin-left: 28px;
}
.hero__watch-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--while-color);
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.07);
}
.hero__watch-video span {
  color: var(--color-heading);
  font-size: 1.8rem;
  font-weight: 600;
  line-height: calc(3 / 1.8); /* 3rem 166.667% */
  margin-left: 14px;
  /* flex-item nên k cần set inline block */
  width: 148px;
  text-align: left;
}
.hero-body__stats {
  margin-top: 8px;
}

.hero-body__stats strong {
  color: var(--color-heading);
  font-family: Sen;
  font-size: 4.4rem;
  font-weight: 700;
  line-height: 5.4rem; /* 122.727% */
}
.hero-body__stats strong + strong {
  margin-left: 28px;
}
/* ======= popular ======= */
.popular-courses {
  background: var(--while-color);
  /* padding: 200px 0; */
}

.popular-courses__desc {
  font-size: 1.8rem;

  line-height: 3rem; /* 166.667% */
}
.popular-courses__control {
  display: flex;
  align-items: center;
  gap: 18px;
}
.popular-courses__slide-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--primary-color);
  background: transparent;
  color: var(--primary-color); /* truyền vào currentColor cho stroke của svg */
}
.popular-courses__slide-btn:hover {
  background: var(--primary-color);
  color: var(--while-color); /* truyền vào currentColor cho stroke của svg */
  cursor: pointer;
}
.popular-courses__item {
  /* Nếu ko set width cho item mà set gap cho flexbox
  khi thêm border sẽ làm tăng kích thước item
  khi set width dù thêm border cũng k đổi width nhờ border-box 
  */
  /* border: 1px solid #e2dfda; */
  /* ko set border ở đây mà set ở info
  vì set ở đây thì width thumb chỉ có 368 not 370
  vì set ở đây => info tự động co lai trái phải 1px vì border-box
  => width img thumb cũng co theo 
  */
  border-radius: 12px;
  border: 1px solid #e2dfda;
  box-shadow: 0 18px 36px 0 rgba(0, 0, 0, 0.08);
}
.popular-courses__item:not(:nth-of-type(3n + 1)) {
  margin-left: calc(30 / var(--content-width) * 100%);
}
.popular-courses__item a {
  display: inline-block;
}
.course-item__img {
  height: 278px;
  aspect-ratio: 370 / 278;
  object-fit: cover;
  border-radius: 12px 12px 0 0;
}
.course-item__info {
  padding: 16px 22px 22px;
  /* border: 1px solid #e2dfda; */
  /* border: 1px solid #e2dfda; 
  border-top: none;  */
}

.course-item__title {
  color: var(--color-heading);
  font-size: 1.8rem;
  font-weight: 600;
  line-height: 3rem; /* 166.667% */
}
.course-item__star {
  width: 18px;
  height: 18px;
}
.course-item__rate-value {
  color: var(--primary-color);
  font-size: 1.6rem;

  line-height: 2.8rem; /* 175% */
}
.course-item__desc {
  font-size: 1.4rem;
  margin-top: 6px;

  /* line-height: 2.6rem;  */
  line-height: 2rem;
}
/* ====== course-item foot ====== */
/* đã có flex-sb-center */
.course-item__foot {
  margin-top: 12px;
}
.course-item__price {
  color: var(--color-heading);
  font-size: 1.8rem;
  font-weight: 600;
  line-height: 3rem; /* 166.667% */
}

/* =========== feedback =========== */
.feedback {
  background: #2e2100;
  padding-block: 96px; /* từ đầu feedback tới open-quote */
}
/* Tạo 1 wrapper overflow hidden bọc feedbackList
Khi slide , feedbackList sẽ translateX để hiển thị đúng feedbackItem
Nếu để feedbackList overflow sẽ ko hiển thị dc feedbackItem khi slide
*/
.feedback-wrapper {
  /* viewport clips the sliding track */
  /*
  viewport (fixed clipping box) stays put while the inner .feedback-list (the track) is translated. 
  That ensures only the active slide is visible
  */
}

.feedback__list {
  display: flex;
  /* the track is translated; keep transition on transform only */
  will-change: transform;
  transition: transform 0.3s ease;
  /* Ẩn các feed-back item bị trồi ra , chỉ chừa lại fbitem đầu tiên */
  /* overflow: hidden;  */
  /*
  Để slide feeback cần translare feedback-list
  Ko thể dùng overflow: hidden cho feedback-list vì nó sẽ
  moves the clipping box itself and therefore doesn't hide the adjacent item properly
  */
}

/* đã có flex-sb-center */
.feedback__item {
  flex-shrink: 0; /* Tra ve kich thuoc that cho feedback-item , khong bi co lai */
  /* width: 100%; set width của feedback-item = width feedback-list */
  flex-basis: 100%;
  /* padding để hiển thị open-quote' */
  padding-top: 30px;
}
.feedback-item__info {
  width: calc(159 / var(--content-width) * 100%);
}
.feedback-item__content {
  width: calc(740 / var(--content-width) * 100%);
  position: relative;
}
.feedback-item__avatar {
  width: 72px;
  height: 72px;
  object-fit: cover;
  border-radius: 50%;
}
.feedback-item__name {
  color: #f7f7f7;
  font-family: Sen;
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 3.4rem; /* 141.667% */
  margin: 16px 0 4px;
}
.feedback-item__role {
  color: #bfbcb2;
  font-size: 1.4rem;
  line-height: 2.6rem; /* 185.714% */
}

.feedback-item__open-quote {
  position: absolute;
  top: -28px;
  left: -30px;
}

.feedback-item__blockquote {
  color: #fff;
  font-size: 2.6rem;
  font-style: italic;

  line-height: 4rem; /* 153.846% */
}
.feedback__dots {
  margin-top: 28px;
}

.feedback .active-dot {
  /* background: #ffb900; */
}
/* Dung js them class nay vao */

/*
Ban đầu bị dịch sang trái hoàn toàn (ẩn đi hoặc nằm ngoài khung nhìn).
Khi có sự thay đổi trạng thái (ví dụ thêm class khác để transform: translateX(0)), 
phần tử trượt vào vị trí ban đầu với hiệu ứng mượt trong 0.3 giây.
*/
.switch-left {
  /* dịch chuyển phần tử theo trục X (ngang) sang trái 1 khoảng 100% chiều rộng của chính nó */
  transform: translateX(-100%);
  /* hiệu ứng chuyển động mượt khi thay đổi về CSS. , 
  all áp dụng cho tất cả thuộc tính có thể chuyển động (ở đây là transform).
  ease: kiểu chuyển động (bắt đầu nhanh, chậm dần về cuối).
  0.3s: thời gian chuyển động là 0.3 giây
  */
  transition: all ease 0.3s;
}
.switch-right {
  transform: translateX(100%);
  transition: all ease 0.3s;
}
/* ========= features ========= */

/* ==== for both feature head and feature tail ==== */

/* for both feature head and tail */
.feature__wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: calc(130 / var(--content-width) * 100%);
  /* gap: 130px; */
}
.feature__col1 {
  width: calc(570 / (var(--content-width)) * 100%);
}
.feature__col2 {
  width: calc(470 / (var(--content-width)) * 100%);
}
.feature__btn {
  margin-top: 32px;
  background: var(--primary-color);
  /* padding: */
}

/* end both feature */
.feature__head {
  /* height: 438px; */
}
.feature__tail {
  /* height: 440px; */
}

.feature-head__images {
  display: flex;
  gap: var(--gap-size);
  justify-content: space-between;
}

.feature-head__image {
  /* width: calc(270 / 570 * 100%);
  height: 404px;
  object-fit: cover; */
  width: calc(270 / 570 * 100%);
  height: 404px;
  object-fit: cover;
  /* height: 100%; */
  border-radius: 16px;
}
.feature__image--lower {
  margin-top: 34px;
}

/* ===== feature tail ===== */

.feature-tail__image {
  border-radius: 20px;
  height: 440px;
  object-fit: cover;
  width: 100%;
}
/* ============== blog ========== */
.blog {
  background: #fffcf4;
  padding-block: 96px;
}
.blog__head {
  text-align: center;
  width: calc(448 / (var(--content-width)) * 100%);
  margin-inline: auto; /* căn blog-head ra giữa blog main-content */
}
.blog__list {
  width: 100%;
  /* thay bằng ml */
  /* gap: calc(30 / var(--content-width) * 100%); */
  display: flex;
  /* smooth when trasform */
  will-change: transform;
  transition: transform 0.3s ease;
}
.blog__item {
  /* flex-basis: 100%; */
  border-radius: 16px;
  /* ẩn phần img dư ở góc border-radius top left right */
  overflow: hidden;
  /* box-shadow: 0 16px 32px 0 rgba(0, 0, 0, 0.05); */
  transition: 0.25s;
}
.blog__item:hover .blog-item__thumb {
  cursor: pointer;
  transform: scale(1.05);
}
.blog__item:not(:nth-of-type(3n + 1)) {
  /* margin-left: 30px; */
  margin-left: calc(30 / var(--content-width) * 100%);
}
.blog-item__thumb {
  overflow: hidden;
  height: 250px;
  transition: 0.25s;
}

.blog-item__img {
  display: block; /* thẻ a bọc img tự thành block  */
  /* Giữ tỉ lệ 370:250 */
  /* aspect-ratio: 370 / 250;  */
  height: 250px;
  object-fit: cover;
  width: 100%;
}
.blog-item__info {
  /* margin-inline: auto;  */
  background: var(--while-color);
  padding: 20px 20px 28px;
  border: 1px solid #e2dfda;
  border-top: none;
  border-radius: 0 0 16px 16px;
  box-shadow: 0 16px 32px 0 rgba(0, 0, 0, 0.05);
}
.blog-item__date {
  color: #5f5b53;
  font-size: 1.4rem;
  line-height: 2.6rem; /* 185.714% */
  /* display: inline-block; */
  /* display: flex; */
  display: inline-flex;
  position: relative;
  align-items: center;
  padding-bottom: 12px;
}
.blog-item__date::before {
  content: "";
  /* display: inline-block; inline ->ib mới set dc w,h */
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--primary-color);
  position: relative;
  left: -4px;
  /* top: -50%; */
  /* top: 10px; */
  /* transform: translateY(-50%); */
}
.blog-item__date::after {
  content: "";
  /* display: inline-block; inline ->ib mới set dc w,h */
  width: 160px;
  height: 2px;
  border-radius: 0.5px;
  background: #e2dfda;
  position: absolute;
  /* bottom: -12px; */
  bottom: 0; /* nằm ở đáy span date cách date 12px = padding ở trên */
}
.blog-item__title a {
  color: var(--color-heading);
  font-size: 1.6rem;
  font-weight: 600;
  line-height: 2.8rem; /* 175% */
  display: inline-block;
  margin-block: 12px;
}

.blog .dots {
  margin-top: 36px;
}

/* ========= footer ========= */
.footer {
  padding-block: 96px 28px;
  background: #2e2100;
  color: #bfbcb2;
}
.footer .row {
  display: flex;
  gap: 130px;
  position: relative;
  padding-bottom: 38px;
}
.footer .row::after {
  content: "";
  position: absolute;
  display: inline-block;
  height: 1px;
  background: #59554b;
  bottom: -1px;
  /* đỉnh của after sẽ cách đáy row 38px , dùng -1px ứng với height after*/
  width: 100%;
}
.footer .row .col {
  min-width: calc(130 / var(--content-width) * 100%);
}
.footer .row .col .title {
  color: var(--while-color);
}
.footer .row .col:last-of-type {
  width: calc(231 / var(--content-width) * 100%);
}
.footer .row .col:first-of-type {
  width: calc(267 / var(--content-width) * 100%);
}
.footer .row .col:not(:nth-of-type(1)) .title {
  font-size: 1.6rem;
  font-weight: 600;
  line-height: 2.8rem; /* 175% */
  /* padding-bottom: 14px;
  position: relative; */
}
.footer .row .col:not(:nth-of-type(1)) .title::after {
  /* content: "";
  display: inline-block;
  width: 130px;
  height: 1px;
  background: #59554b;
  position: absolute;
  bottom: -1px;
  left: 0; */
}
.footer .row .col:nth-of-type(1) .title {
  font-family: "Sen", sans-serif;
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 3.4rem; /* 141.667% */
}
.footer .row .col:nth-of-type(1) .desc {
  margin-block: 18px;
  font-size: 1.4rem;
  line-height: 2.6rem;
  color: #bfbcb2;
}
.footer .row .col:nth-of-type(1) .socials {
  display: flex;
  gap: 16px;
}
.footer .col .col-list {
  position: relative;
  padding-top: 43px;
  /* padding-top: calc(43px - 14px); */
}
.footer .col .col-list::before {
  content: "";
  display: inline-block;
  width: 130px;
  height: 1px;
  background: #59554b;
  /* top: calc(43px - 28px -1px); */
  top: 14px;
  position: absolute;
}
.footer .col .col-list a {
  color: #bfbcb2;
  font-size: 1.4rem;
  line-height: 2.6rem; /* 185.714% */
  /* th này ko dùng dc nowrap vì ta cần xuống hàng */
  /* white-space: nowrap; */
}
.footer .col .col-list li + li {
  margin-top: 12px;
}

.footer .copy-right {
  text-align: center;
  /* đỉnh copy-right cách đáy row after 28px + 1px height row after*/
  margin-top: calc(28px + 1px);
}