html {
  font-size: 62.5%;
}
body {
  font-family: "Poppins", sans-serif;
  font-size: 1.6rem;
}
*,
*::before,
*::after {
  box-sizing: border-box;
}
:root {
  --primary-color: #0d1111;
}
/* =============== Code phan chung ================ */
.main-content {
  width: 1170px;
  max-width: calc(100% - 48px);
  margin: 0 auto;
}
a {
  text-decoration: none;
}
.btn:hover {
  opacity: 0.8;
}
.get-start-btn {
  color: #fff;
  text-align: center;
  display: inline-block;
  padding: 0 16px;
  font-size: 1.8rem;
  font-weight: 600;
  min-width: 186px;
  line-height: 68px;
  border-radius: 14px;
  background: #1ebfc1;
}
.get-start-btn:hover {
  color: #1ebfc1;
  background: #fff;
  box-shadow: 0 10px 50px 0 rgba(0, 0, 0, 0.05);
  transition: 0.3s;
}
.top-title {
  color: #767e7e;
  font-size: 1.2rem;
  font-weight: 700;
}
.heading-lv2 {
  color: var(--primary-color);
  font-size: 4.2rem;
  font-weight: 700;
  line-height: 1.33;
}
.text-desc {
  color: #767e7e;
  font-family: Poppins;
  font-size: 1.8rem;
  line-height: 1.78;
}
/* =============== Code phan header ============== */
.header {
  z-index: 1;
  position: sticky;
  top: -44px;
  background: #fff;
}
.header .body {
  display: flex;
  align-items: center;
  padding: 52px 0 8px;
}
.nav {
  margin-left: auto;
}
.nav .list {
  display: flex;
}
.nav a {
  padding: 8px 19.5px;
  color: #2f3a3b;
  font-size: 1.6rem;
}
.nav a:hover,
.sign-in:hover {
  text-shadow: 1px 0 0 currentColor;
}
.header .action {
  padding-left: 149.5px; /* 177 - 19.5 - 8 */
}
.sign-in {
  color: #494949;
  font-size: 1.6rem;
  margin-right: 16px; /* 24 - 8 */
}
.sign-up {
  display: inline-block;
  padding: 0 16px;
  min-width: 108px;
  color: #1ebfc1;
  font-size: 1.6rem;
  font-weight: 600;
  line-height: 48px;
  border-radius: 6px;
  border: 1px solid #1ebfc1;
  text-align: center;
}
.sign-up:hover {
  color: #fff;
  background: #1ebfc1;
  transition: 0.3s;
}
/* =========== Code phan hero ================= */
.hero {
  padding: 42px 0 79px;
}
.hero .body {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
/* ------------- hero-content --------------- */
.hero-content .highlight {
  color: #767e7e;
  font-size: 1.4rem;
}
.hero-content .heading {
  width: 458px;
  color: var(--primary-color);
  font-size: 6.2rem;
  font-weight: 700;
  line-height: 1.16;
  margin-top: 18px;
}
.hero-content .desc {
  width: 374px;
  color: #9da6a5;
  font-size: 1.8rem;
  line-height: 1.78;
  margin-top: 46px;
}
.hero-content .desc span {
  display: inline-block;
}
.hero-content .action {
  margin-top: 52px;
}
.hero-content .watch-video {
  border: none;
  background: transparent;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  margin-left: 50px;
  background: #fff;
  box-shadow: 0 22px 50px 0 rgba(0, 0, 0, 0.05);
}
.hero-content .watch-video:hover {
  background: #eee;
  box-shadow: 0px 0px 0px 0px rgba(196, 26, 134, 0.5);
  color: #fff;
  transition: 0.5s;
  cursor: pointer;
}
/* ------------- hero-summary --------------- */
.hero-summary {
  position: relative;
  flex-basis: 49.2%;
}
.hero-summary .img {
  width: 576px;
  height: 631px;
  object-fit: cover;
}
.hero-summary .label {
  color: var(--primary-color);
  font-size: 1rem;
  font-weight: 500;
  line-height: normal;
  display: inline-block;
}
/* .......... Courese item ........ */
.hero-summary .courses-item {
  width: 157px;
  height: 75px;
  border-radius: 18px;
  background: #fefefd;
  box-shadow: 0 10px 80px 0 rgba(0, 0, 0, 0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  left: -40px;
  top: 149px;
}
.hero-summary .book-icon {
  position: relative;
  width: 36px;
  height: 40px;
}
.hero-summary .book-icon img:last-child {
  position: absolute;
  bottom: 8px;
  left: 4px;
}
.hero-summary .courses-item .label {
  width: 55px;
  margin-left: 16px;
}
/* .......... Schedule item ........ */
.hero-summary .schedule-items {
  width: 124px;
  height: 132px;
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 10px 80px 0 rgba(0, 0, 0, 0.05);
  position: absolute;
  bottom: 46px;
  left: -65px;
}
.hero-summary .schedule-items .label {
  margin: 16px 35px 0;
}
.hero-summary .schedule-icon {
  display: block;
  margin: 0 25px;
  border-radius: 3px;
}
.hero-summary .schedule-icon.icon1 {
  margin-top: 16px;
}
.hero-summary .schedule-icon.icon2 {
  margin-top: 12px;
}
.hero-summary .schedule-icon.icon3 {
  margin-top: 10px;
}
.hero-summary .schedule-icon.icon4 {
  margin: 16px 49px 0;
}
/* ......... Member item ---------- */
.hero-summary .members-item .label {
  margin: 17px 35px 0;
}
.hero-summary .members-item {
  position: absolute;
  bottom: 41px;
  right: 45px;
  width: 207px;
  height: 90px;
  border-radius: 24px;
  background: #fefefd;
  box-shadow: 0 12px 80px 0 rgba(0, 0, 0, 0.05);
}
.hero-summary .list-avatars {
  display: flex;
  justify-content: center;
}
.hero-summary .avatar {
  margin-top: 8px;
  width: 33px;
  height: 33px;
  border-radius: 50%;
  object-fit: cover;
  margin-left: -7px;
}
.hero-summary .avatar.see-more {
  background: #1ebfc1;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  font-size: 1rem;
  font-weight: 500;
}
/* ============= Code phan features ============== */
.features {
  background: #fff;
  padding: 130px 0 65px;
}
.features .body {
  width: 87.5%;
}
.features .heading-lv2 {
  width: 577px;
  margin-top: 18px;
}
.features .text-desc {
  width: 590px;
  margin-top: 18px;
  line-height: normal;
}
.feature-list {
  margin-top: 80px;
  display: flex;
  justify-content: space-between;
}
.feature-item {
  flex-basis: 21.7%;
}
.feature-icon {
  width: 102px;
  height: 106px;
  object-fit: cover;
}
.feature-item .title {
  margin-top: 26px;
  color: var(--primary-color);
  font-size: 2rem;
  font-weight: 600;
  line-height: normal;
}
.feature-item .detail {
  color: #9da6a5;
  font-size: 1.6rem;
  line-height: 1.69;
  margin-top: 16px;
}
/* ========== Code phan popular ============== */
.popular {
  padding: 65px 0 189px; /* 124 + 65 */
}
.popular .heading-lv2 {
  margin-top: 18px;
}
.popular .text-desc {
  width: 525px;
}
.popular .intro-group {
  margin-top: 19px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.popular .view-all-btn {
  color: #1ebfc1;
  font-size: 1.4rem;
  font-weight: 700;
  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;
}
.popular .course-list {
  margin-top: 79px;
  display: flex;
  gap: 47px;
}
.popular .course-item {
  flex: 1;
  height: 393px;
  border-radius: 8px;
  background: #d0efed;
  position: relative;
}
.popular .course-item .thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
  opacity: 0.7;
}
.popular .info {
  width: 325px;
  height: 195px;
  padding: 18px 0 29px 25px;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 16px 90px 0 rgba(0, 0, 0, 0.05);
  position: absolute;
  left: 17px;
  right: 17px;
  bottom: -124px;
}
.popular .info .title {
  color: var(--primary-color);
  font-size: 2.2rem;
  font-weight: 700;
  line-height: normal;
}
.popular .price {
  color: #767e7e;
  font-size: 1.6rem;
  margin-top: 16px;
  line-height: normal;
}
.popular .price strong {
  color: var(--primary-color);
  font-size: 2.2rem;
  font-weight: 700;
}
.popular .info .desc {
  margin-top: 6px;
  color: #9da6a5;
  font-size: 1.4rem;
  line-height: normal;
}
.popular .foot {
  margin-top: 18px;
  display: flex;
  gap: 10px;
}
.popular .foot span {
  color: #9da6a5;
  font-size: 1.4rem;
  line-height: normal;
  display: flex;
  align-items: center;
}
.popular .foot span::before {
  display: inline-block;
  content: "";
  width: 6px;
  height: 6px;
  background: #1ebfc1;
  border-radius: 50%;
  margin-right: 10px;
}
/* ============ code phan stats ============= */
.stats {
  padding: 200px 0;
}
.stats .body {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 200px;
}
.stats .info {
  text-align: center;
}
.stats .title {
  color: var(--primary-color);
  font-size: 6.2rem;
  font-weight: 700;
  line-height: normal;
}
.stats .desc {
  color: #767e7e;
  font-size: 1.8rem;
  line-height: normal;
}
/* ========== code phan feedback ============ */
.feedbacks {
  padding: 65px 0 130px;
}
.feedbacks .body {
  display: flex;
}
.feedbacks .content-block {
  flex: 0 0 35.8%;
}
.feedbacks .content-block .icon {
  display: inline-block;
  margin-top: 37px;
}
.feedbacks .content-block blockquote {
  color: #5d6564;
  font-size: 3.2rem;
  line-height: 1.5;
  margin-top: 26px;
}
.feedbacks .author {
  margin-top: 33px;
  color: #070707;
  font-size: 1.6rem;
  font-weight: 500;
  line-height: normal;
  display: flex;
  align-items: center;
}
.feedbacks .author::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 2px;
  background: #070707;
  margin-right: 5px;
}
.feedbacks .author span {
  color: #767e7e;
  font-size: 1.6rem;
  line-height: normal;
}
.feedbacks .control {
  margin-top: 52px;
  display: flex;
  gap: 30px;
}
.feedbacks .control-btn {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #2ac9bf;
  display: flex;
  justify-content: center;
  align-items: center;
}
.feedbacks .control-btn:hover {
  border: 1px solid rgba(207, 20, 195, 0.219);
  transition: 0.5s;
}
.feedbacks .ava-block {
  flex: 0 0 64.1%;
  position: relative;
}
.feedbacks .ava {
  width: 78px;
  height: 78px;
  border-radius: 50%;
  object-fit: cover;
  position: absolute;
}
.feedbacks .ava1 {
  width: 235px;
  height: 235px;
  top: 107px;
  left: 345px;
}
.feedbacks .ava2 {
  width: 110px;
  height: 110px;
  right: 0;
  top: 19px;
}
.feedbacks .ava3 {
  width: 92px;
  height: 92px;
  top: 0;
  left: 216px;
}
.feedbacks .ava4 {
  top: 258px;
  left: 72px;
}
.feedbacks .ava5 {
  left: 284px;
  bottom: 0;
}
.feedbacks .ava6 {
  bottom: 29px;
  right: 32px;
}
/* ============ Code phan admit ========== */
.admit {
  padding: 76px 0 88px;
  background: #def6f5;
}
.admit .body {
  display: flex;
  align-items: center;
}
.admit .heading-lv2 {
  color: #070707;
}
.admit .desc {
  margin-top: 18px;
  width: 397px;
  color: #767e7e;
  font-size: 1.8rem;
  line-height: normal;
}
.admit .get-start-btn {
  margin-left: 410px;
}
/* ========== code phan footer ============ */
.footer {
  background: #fff;
  padding: 130px 0 50px;
}
.footer .body {
  display: flex;
  justify-content: space-between;
}
.footer .title {
  color: #2e2e2e;
  font-size: 1.8rem;
  font-weight: 500;
  line-height: normal;
}
.footer .list a {
  color: #535353;
  font-size: 1.6rem;
  line-height: normal;
  display: inline-block;
  margin-top: 18px;
}
.footer .list a:hover {
  text-shadow: 1px 0 0 #000;
}
.footer .social a {
  display: flex;
  gap: 9px;
}
.footer .copyright {
  margin-top: 80px;
  color: #b0b5b4;
  font-size: 1.8rem;
  line-height: normal;
  text-align: center;
}