/* ==========================================================================
   home.css — trang giới thiệu, dựng theo bản thiết kế Stitch "gfcourse_landing_page".

   BẢNG MÀU RIÊNG, KHOANH TRONG body.home-body
   Trang này dùng hệ `the_design_system`: nền kem #FCF9F0, nhấn sage #526255.
   Khác hẳn bảng màu của ứng dụng (Luminous Midnight). Đó là chủ ý — trang giới
   thiệu và phần ứng dụng là hai thứ khác nhau, và mọi sản phẩm đều tách chúng.

   Cách khoanh: ghi đè chính các token --lp-* ngay trên body.home-body. Nhờ vậy
   mọi thành phần .lp- dùng chung ở đây (nút, thẻ, chữ) tự đổi màu theo, mà
   không rò một giọt nào sang trang khác. Không có tiền tố mới, không có bảng
   màu thứ hai chạy song song.

   THANG SỐ ĐO LẤY NGUYÊN TỪ BẢN GỐC
     khoảng cách  xs 4 · sm 8 · md 16 · lg 24 · xl 40 · xxl 64
     bo góc       thường 16px · lớn 32px · rất lớn 48px · viên thuốc 9999px
     bề rộng      tối đa 1280px
   ========================================================================== */

body.home-body {
  /* --- nền và chữ --- */
  --lp-ground: #FCF9F0;
  --lp-surface: #FFFFFF;
  --lp-surface-sub: #F6F3EA;
  --lp-ink: #1C1C17;
  /* 16,3:1 trên nền kem */
  --lp-ink-soft: #434843;
  /*  8,9:1 */
  --lp-ink-faint: #62675F;
  /*  5,5:1 — #747872 của bản gốc chỉ đạt 4,0:1, dưới ngưỡng cho chữ cỡ thường */
  --lp-rule: #DBD8CE;
  --lp-rule-soft: #EBE8DF;

  /* --- nhấn: sage --- */
  --lp-accent: #455548;
  /* 7,5:1 trên nền kem */
  --lp-accent-ink: #FFFFFF;
  /* 7,9:1 trên nhấn */
  --lp-accent-sub: #DDEEDD;

  --lp-invert: #31312B;
  --lp-invert-ink: #F4F1E8;

  /* --- ba sắc của các khối tròn ở mục "Vì sao chọn" --- */
  --home-tint-a: #CFE5FC;
  /* secondary-container — lam nhạt */
  --home-tint-b: #D6E7D5;
  /* primary-fixed — lục nhạt */
  --home-tint-c: #F3E8D4;
  /* tertiary-container — kem đậm */

  /* --- khoảng cách, đúng thang của bản gốc --- */
  --home-xs: 4px;
  --home-sm: 8px;
  --home-md: 16px;
  --home-lg: 24px;
  --home-xl: 40px;
  --home-xxl: 64px;
  --home-max: 1280px;

  /* --- bo góc --- */
  --home-r: 16px;
  --home-r-lg: 32px;
  --home-r-xl: 48px;

  /*
   * Bricolage Grotesque là font DUY NHẤT của bản thiết kế — cả tiêu đề lẫn thân
   * bài. Nó biến thiên theo trục opsz (12..96) nên tự chỉnh nét theo cỡ chữ:
   * tiêu đề 48px và chữ nhỏ 14px dùng chung một tệp mà vẫn cân.
   * Đã kiểm tra có subset vietnamese trước khi chọn.
   */
  --lp-f-display: "Bricolage Grotesque", "Be Vietnam Pro", system-ui, sans-serif;
  --lp-f-body: "Bricolage Grotesque", "Be Vietnam Pro", system-ui, sans-serif;

  background: var(--lp-ground);
  color: var(--lp-ink);
}

/*
 * Bản thiết kế chỉ có một chế độ sáng. Ở chế độ tối của hệ điều hành, các token
 * ở trên vẫn thắng vì chúng đặt trên body — độ đặc hiệu cao hơn khối :root của
 * player.css. Nói rõ ra đây để sau này không ai đi tìm "vì sao trang này không
 * theo chế độ tối": nó cố ý không theo.
 */

body.home-body .lp-topbar,
body.home-body .lp-shell {
  /* Trang này tự mang thanh điều hướng riêng (.home-nav) theo đúng bản thiết kế. */
  display: none;
}

/* --------------------------------------------------------------------------
   THANH ĐIỀU HƯỚNG
   -------------------------------------------------------------------------- */
.home-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  width: 100%;
  background: var(--lp-ground);
  box-shadow: 0 1px 3px rgba(28, 28, 23, .06);
}

.home-nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--home-md);
  max-width: var(--home-max);
  margin: 0 auto;
  padding: var(--home-md) var(--home-lg);
}

.home-logo {
  display: flex;
  align-items: center;
  gap: var(--home-sm);
  color: var(--lp-accent);
  text-decoration: none;
  font-family: var(--lp-f-display);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.home-logo img {
  height: 32px;
  width: auto;
  object-fit: contain;
}

.home-nav-links {
  display: flex;
  align-items: center;
  gap: var(--home-lg);
}

.home-nav-links a {
  padding-bottom: 4px;
  color: var(--lp-ink-soft);
  text-decoration: none;
  font-size: 15px;
  font-weight: 600;
  border-bottom: 2px solid transparent;
  transition: color .3s ease, border-color .3s ease;
}

.home-nav-links a:hover {
  color: var(--lp-accent);
}

.home-nav-links a.is-current {
  color: var(--lp-accent);
  border-bottom-color: var(--lp-accent);
}

.home-nav-actions {
  display: flex;
  align-items: center;
  gap: var(--home-md);
}

/* --------------------------------------------------------------------------
   ICON
   --------------------------------------------------------------------------
   Sprite SVG thay cho font Material Symbols của bản gốc — xem includes/home_icons.php.
   Tô bằng currentColor nên nó đổi màu theo chỗ đặt, y như icon font.
   -------------------------------------------------------------------------- */
.home-ico {
  width: 1em;
  height: 1em;
  flex: none;
  fill: currentColor;
  /* Căn theo đường chân chữ: mặc định SVG là inline nên nó ngồi cao hơn chữ
     bên cạnh khoảng 2px, nhìn ra ngay khi icon đứng cạnh chữ trong một dòng. */
  vertical-align: -0.125em;
}

/* --------------------------------------------------------------------------
   NÚT
   -------------------------------------------------------------------------- */
.home-btn-solid,
.home-btn-invert {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--home-sm);
  padding: 10px 24px;
  border: none;
  border-radius: 999px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: transform .25s ease, box-shadow .25s ease, opacity .25s ease;
}

.home-btn-solid {
  background: var(--lp-accent);
  color: var(--lp-accent-ink);
}

.home-btn-lg {
  padding: 15px 40px;
  font-size: 15px;
}

.home-btn-solid:hover,
.home-btn-invert:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(69, 85, 72, .22);
}

.home-btn-text {
  color: var(--lp-ink-soft);
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  transition: color .3s ease;
}

.home-btn-text:hover {
  color: var(--lp-accent);
}

/* --------------------------------------------------------------------------
   BỐ CỤC CHUNG
   -------------------------------------------------------------------------- */
.home-wrap {
  width: 100%;
  max-width: var(--home-max);
  margin: 0 auto;
  padding: 0 var(--home-lg);
  overflow: hidden;
}

.home-display {
  font-family: var(--lp-f-display);
  font-size: clamp(34px, 4.6vw, 48px);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--lp-accent);
  margin: 0;
  text-wrap: balance;
}

.home-h2 {
  font-family: var(--lp-f-display);
  font-size: clamp(26px, 3.2vw, 32px);
  font-weight: 700;
  line-height: 1.25;
  color: var(--lp-accent);
  margin: 0 0 var(--home-xs);
}

.home-h3 {
  font-family: var(--lp-f-display);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--lp-ink);
  margin: 0;
}

.home-lede {
  font-size: 17px;
  line-height: 1.6;
  color: var(--lp-ink-soft);
  margin: 0;
  max-width: 60ch;
}

.home-sub,
.home-body {
  font-size: 15px;
  line-height: 1.6;
  color: var(--lp-ink-soft);
  margin: 0;
}

/* --------------------------------------------------------------------------
   HERO
   -------------------------------------------------------------------------- */
.home-hero {
  display: flex;
  align-items: center;
  gap: var(--home-xl);
  padding: var(--home-xxl) 0 90px;
}

.home-hero-copy {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--home-lg);
  min-width: 0;
}

.home-hero-visual {
  flex: 1;
  position: relative;
  min-width: 0;
  /* isolation: khối tròn trang trí dùng z-index âm; không có nó thì chúng chui
     xuống dưới nền của body và biến mất. */
  isolation: isolate;
}

.home-hero-frame {
  position: relative;
  z-index: 1;
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: var(--home-r-xl);
  overflow: hidden;
  background: var(--lp-surface-sub);
}

.home-hero-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Hai khối tròn nhạt nấp sau khung ảnh — chi tiết của bản gốc. */
.home-blob {
  position: absolute;
  border-radius: 50%;
  z-index: 0;
  filter: blur(2px);
}

.home-blob-a {
  width: 192px;
  height: 192px;
  bottom: -32px;
  left: -32px;
  background: var(--home-tint-a);
}

.home-blob-b {
  width: 256px;
  height: 256px;
  top: -48px;
  right: -48px;
  background: var(--lp-accent-sub);
}

/* --------------------------------------------------------------------------
   KHỐI CÓ TIÊU ĐỀ
   -------------------------------------------------------------------------- */
.home-section {
  padding: var(--home-xxl) 0;
}

.home-section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--home-md);
  margin-bottom: var(--home-lg);
  flex-wrap: wrap;
}

.home-more {
  display: inline-flex;
  align-items: center;
  gap: var(--home-xs);
  color: var(--lp-accent);
  text-decoration: none;
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
}

.home-more .home-ico {
  font-size: 18px;
  transition: transform .3s ease;
}

.home-more:hover .home-ico {
  transform: translateX(4px);
}

/* --------------------------------------------------------------------------
   THẺ KHÓA HỌC
   -------------------------------------------------------------------------- */
.home-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--home-lg);
}

.home-card {
  display: flex;
  flex-direction: column;
  gap: var(--home-md);
  padding: var(--home-md);
  background: var(--lp-surface-sub);
  border: 1px solid var(--lp-rule);
  border-radius: var(--home-r-lg);
  transition: box-shadow .3s ease, transform .3s ease;
}

.home-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(28, 28, 23, .08);
}

.home-card-media {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: var(--home-r);
  overflow: hidden;
  background: var(--lp-surface);
}

.home-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .5s ease;
}

.home-card:hover .home-card-media img {
  transform: scale(1.05);
}

.home-rating {
  position: absolute;
  top: var(--home-sm);
  right: var(--home-sm);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(252, 249, 240, .92);
  backdrop-filter: blur(4px);
  font-size: 13px;
  font-weight: 700;
  color: var(--lp-ink);
}

.home-rating .home-ico {
  font-size: 14px;
  color: #9A7B2E;
  /* 4,6:1 trên nền huy hiệu — sắc hổ phách của bản gốc (#C5B358) chỉ đạt 2,0:1 */
}

.home-card-body {
  display: flex;
  flex-direction: column;
  gap: var(--home-xs);
  flex: 1;
}

.home-card-meta {
  display: flex;
  align-items: center;
  gap: var(--home-sm);
  flex-wrap: wrap;
  margin-bottom: var(--home-xs);
}

.home-chip {
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--home-tint-a);
  color: #24455F;
  /* 7,4:1 trên nền chip */
  font-size: 12px;
  font-weight: 700;
}

.home-dur {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--lp-ink-faint);
  font-size: 13px;
}

.home-dur .home-ico {
  font-size: 14px;
}

.home-card-title {
  font-family: var(--lp-f-display);
  font-size: 19px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--lp-ink);
  margin: 0;
}

.home-card-text {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--lp-ink-soft);
  margin: 4px 0 0;
  /* Cắt còn hai dòng — mô tả khóa học dài ngắn rất khác nhau, không cắt thì
     ba thẻ trong cùng hàng cao lệch nhau. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   VÌ SAO CHỌN
   -------------------------------------------------------------------------- */
.home-why {
  padding: var(--home-xxl) var(--home-xl);
  margin: var(--home-lg) 0;
  background: var(--lp-surface-sub);
  border-radius: var(--home-r-xl);
}

.home-why-head {
  max-width: 42rem;
  margin: 0 auto var(--home-xl);
  text-align: center;
}

.home-why-head .home-lede {
  margin: var(--home-md) auto 0;
}

.home-why-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--home-xl);
}

.home-why-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--home-sm);
  text-align: center;
}

.home-why-icon {
  display: grid;
  place-items: center;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  margin-bottom: var(--home-xs);
}

.home-why-icon .home-ico {
  font-size: 32px;
}

.home-why-icon-a {
  background: var(--home-tint-a);
  color: #24455F;
}

.home-why-icon-b {
  background: var(--home-tint-b);
  color: #24402A;
}

.home-why-icon-c {
  background: var(--home-tint-c);
  color: #4D4638;
}

/* --------------------------------------------------------------------------
   THỐNG KÊ
   -------------------------------------------------------------------------- */
.home-stats {
  display: flex;
  align-items: center;
  justify-content: space-around;
  gap: var(--home-lg);
  padding: var(--home-xl) 0;
  margin: var(--home-xl) 0;
  border-top: 1px solid var(--lp-rule);
  border-bottom: 1px solid var(--lp-rule);
}

.home-stat {
  text-align: center;
}

.home-stat-num {
  font-family: var(--lp-f-display);
  font-size: clamp(30px, 4vw, 44px);
  font-weight: 700;
  line-height: 1.1;
  color: var(--lp-accent);
  margin-bottom: var(--home-xs);
}

.home-stat-label {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--lp-ink-faint);
}

.home-stat-sep {
  width: 1px;
  height: 64px;
  background: var(--lp-rule);
}

/* --------------------------------------------------------------------------
   CTA
   -------------------------------------------------------------------------- */
.home-cta {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 100px var(--home-lg);
  margin: var(--home-xxl) 0;
  border-radius: var(--home-r-xl);
  background: var(--home-tint-a);
  text-align: center;
}

/* Quầng sáng toả từ tâm — chi tiết của bản gốc. */
.home-cta-glow {
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: .5;
  background: radial-gradient(circle at center, rgba(255, 255, 255, .9), transparent 62%);
}

.home-cta-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--home-lg);
  max-width: 42rem;
  margin: 0 auto;
}

.home-cta-title {
  color: #24455F;
  /* 7,4:1 trên nền CTA */
}

.home-cta-text {
  color: #33546C;
  /* 5,6:1 — bản gốc để chữ ở 80% độ đục, tức 4,4:1, hụt ngưỡng */
  margin: 0;
}

.home-btn-invert {
  background: #24455F;
  color: var(--home-tint-a);
  padding: 14px 32px;
  font-size: 15px;
}

/* --------------------------------------------------------------------------
   CHÂN TRANG
   -------------------------------------------------------------------------- */
.home-foot {
  width: 100%;
  margin-top: var(--home-xxl);
  padding: var(--home-xxl) 0;
  background: var(--lp-surface-sub);
  border-top: 1px solid var(--lp-rule);
}

.home-foot-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--home-lg);
  max-width: var(--home-max);
  margin: 0 auto;
  padding: 0 var(--home-lg);
  flex-wrap: wrap;
}

.home-foot-brand {
  display: flex;
  flex-direction: column;
  gap: var(--home-sm);
}

.home-foot-brand .home-logo img {
  height: 24px;
  opacity: .8;
}

.home-foot-brand p {
  margin: 0;
  font-size: 14px;
  color: var(--lp-ink-soft);
}

.home-foot-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--home-lg);
}

.home-foot-links a {
  color: var(--lp-ink-soft);
  text-decoration: none;
  font-size: 14px;
  transition: color .3s ease;
}

.home-foot-links a:hover {
  color: var(--lp-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* --------------------------------------------------------------------------
   MÀN HÌNH HẸP
   --------------------------------------------------------------------------
   Bản gốc gãy ở 768px (breakpoint md của Tailwind). Giữ đúng con số đó.
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  .home-nav-links {
    display: none;
  }

  .home-hero {
    flex-direction: column;
    padding: var(--home-xl) 0 var(--home-xxl);
  }

  .home-hero-frame {
    aspect-ratio: 1;
  }

  /* Khối tròn trang trí thu nhỏ: ở bề rộng điện thoại, khối 256px tràn hẳn ra
     ngoài mép màn hình và đẻ ra thanh cuộn ngang. */
  .home-blob-a {
    width: 120px;
    height: 120px;
    bottom: -18px;
    left: -18px;
  }

  .home-blob-b {
    width: 150px;
    height: 150px;
    top: -24px;
    right: -24px;
  }

  .home-cards,
  .home-why-grid {
    grid-template-columns: 1fr;
  }

  .home-why {
    padding: var(--home-xl) var(--home-lg);
  }

  .home-stats {
    flex-direction: column;
    gap: var(--home-xl);
  }

  .home-stat-sep {
    display: none;
  }

  .home-cta {
    padding: var(--home-xxl) var(--home-md);
  }

  .home-foot-inner {
    flex-direction: column;
    text-align: center;
  }

  .home-foot-links {
    justify-content: center;
    gap: var(--home-md);
  }
}

@media (prefers-reduced-motion: reduce) {

  .home-card,
  .home-card-media img,
  .home-btn-solid,
  .home-btn-invert,
  .home-more .home-ico {
    transition: none;
  }

  .home-card:hover {
    transform: none;
  }

  .home-card:hover .home-card-media img {
    transform: none;
  }
}