/*
 * Trang chủ Libero — dựng theo Figma "Libero - Redesign", frame Home 1600 x 9135.
 *
 * Mọi màu và cỡ chữ lấy từ token trong tokens.css. Không hardcode ở đây.
 * Token bọc trong .lb-home nên file này cũng chỉ áp trong phạm vi đó — không
 * rò sang 56 trang còn lại của site.
 *
 * Thứ tự section theo đúng thứ tự cuộn trang trong Figma.
 */

/*
 * Nen am cua trang chu — ve MOT LAN tren body.
 *
 * Header duoc in site-wide qua avada_render_header nen no nam NGOAI .lb-home;
 * body la to chung duy nhat chua ca header lan hero. Ve rieng tren .lb-hero
 * thi mau dung dot ngot o day hero, dung cai vet cat nguoi dung bao.
 *
 * Mau lay thang tu anh Figma: dam nhat #FCECDF o giua, #FEF6E6 o mep, tat han
 * ve trang truoc khi het khung.
 *
 * 780px = header 123 + hero 484 + phan du de wash tat han truoc khi sang
 * section Giang vien. Doi chieu cao hero thi chinh so nay.
 *
 * Dat NGOAI .lb-scope{} co chu y: ben trong, selector se thanh
 * ".lb-scope body:has(...)" va khong bao gio khop.
 *
 * Bam vao HERO chu khong bam vao trang chu. Class "home" cua WordPress chi co o
 * trang dat lam page_on_front; trang nhap /trang-chu-avada/ va moi trang khac
 * dung element hero deu khong co no, nen wash bien mat va trang ra trang tron.
 */
body:has(.lb-hero) {
  background-color: #FFFFFF;

  /*
   * Mau lay tu chinh file Figma, frame "hero" (node 85-3645):
   *   Layout 1600 x 800
   *   Linear Gradient  #FFFFFF -> #FEF9E7 -> #FFFFFF
   * Dung y het token --lb-grad-hero ban dau, chi khac cho ve.
   *
   * LOP DUOI  gradient NGANG cua Figma.
   * LOP TREN  nhat dan theo chieu DOC o nua duoi, de nen tat han truoc khi
   *           het khung. Thieu lop nay thi mau cham day hero la dut, dung cai
   *           vet cat nguoi dung bao — trong Figma khong bi vi hero cao 800px
   *           nen mau con cho de nhat.
   */
  background-image:
    linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 58%, #FFFFFF 100%),
    linear-gradient(90deg, #FFFFFF 0%, #FEF9E7 50%, #FFFFFF 100%);
  background-repeat: no-repeat, no-repeat;
  background-position: top center, top center;
  background-size: 100% 780px, 100% 780px;
}

/*
 * Hai lop boc cua Avada to nen TRANG DUC, che kin wash o tren.
 *
 * #wrapper.fusion-wrapper bao ca header lan main; #main la khung noi dung.
 * Do duoc: ca hai deu rgb(255,255,255). Khong go thi wash ve xong cung khong
 * ai thay — va nhin y het nhu chua sua gi.
 *
 * Chi go o trang CO hero; cac trang khac giu nguyen nen trang cua Avada.
 */
body:has(.lb-hero) #wrapper,
body:has(.lb-hero) #main {
  background: transparent;
}

/*
 * Va go luon 60px dem duoi cua #main.
 *
 * Section cuoi cung (form lien he) tran het be ngang va co nen do, ngay duoi
 * la chan trang nen tham — 60px trang cua Avada ket giua hai khoi do nhin
 * nhu mot vet cat. Do duoc: section ket thuc o 8380, chan trang bat dau o
 * 8441.
 */
body:has(.lb-hero) #main { padding-bottom: 0; }

/*
 * Container cua nut noi khong duoc chiem 1px.
 *
 * Messenger va Zalo deu position:fixed nen .lb-el boc chung cao 0. Nhung
 * Avada dat min-height: 1px cho .fusion-column-wrapper, va 1px do day nguoc
 * len cot -> row -> container, thanh mot vach trang vat ngang ngay giua
 * section form va chan trang.
 *
 * Khai bao cua Avada la '.fusion-layout-column .fusion-column-wrapper' —
 * (0,2,0), va file cua no nap SAU home.css nen hoa do uu tien la no thang.
 * Phai lay du ba lop de len (0,3,0) moi de duoc, khong can !important.
 */
.fusion-layout-column .fusion-column-wrapper:has(.lb-float) { min-height: 0; }

/*
 * Kho dien thoai: header 64 + hero 488 = 552px, thap hon kho may tinh (607).
 * Giu nguyen 780px thi wash con am khi da sang section Giang vien.
 */
@media (max-width: 767px) {
  body:has(.lb-hero) { background-size: 100% 620px, 100% 620px; }
}

.lb-scope {
/* ============================================================
 * Nền chung
 * ============================================================ */
&.lb-home {
  /*
   * Tràn viền. Avada bọc nội dung trang trong khung 1268px, nhưng Figma vẽ các
   * section chạy hết chiều rộng khung 1600px (nền đỏ, nền xám phải chạm mép).
   * Đây là cách thoát khỏi khung cha mà không phải sửa template của Avada.
   * body đã có overflow-x:hidden nên 100vw không sinh thanh cuộn ngang.
   */
  width: 100vw;
  margin-left: calc(50% - 50vw);

  font-family: var(--lb-font-sans);
  font-size: var(--lb-f-base);
  line-height: 1.6;
  color: var(--lb-nature);
  background: transparent;
  overflow-x: clip;
}

&.lb-home *,
&.lb-home *::before,
&.lb-home *::after { box-sizing: border-box; }

&.lb-home img { max-width: 100%; height: auto; display: block; }

/*
 * Kích thước SVG mặc định. Không có dòng này thì icon nội tuyến nở ra theo
 * khung chứa — đo được 167x167px ở nút "Tìm hiểu thêm". viewBox không tự giới
 * hạn kích thước hiển thị.
 */
&.lb-home svg { width: 1em; height: 1em; flex: 0 0 auto; }
&.lb-home .lb-btn svg { width: 15px; height: 15px; }
&.lb-home .lb-course__more svg { width: 14px; height: 14px; }

/*
 * Thẻ <a> mặc định là display:inline, mà aspect-ratio KHÔNG áp cho phần tử
 * inline — ảnh dọc 683x1024 làm thẻ bài viết cao 1096px thay vì theo tỷ lệ 16/10.
 */
&.lb-home a.lb-post__media,
&.lb-home a.lb-course__media { display: block; }

&.lb-home a { color: inherit; text-decoration: none; }

/*
 * Avada đặt text-transform:uppercase và letter-spacing riêng cho tiêu đề ở
 * Global Options. Figma dùng chữ thường. :is() cho độ đặc hiệu 0,2,0 nên thắng
 * mà không cần !important.
 */
&.lb-home :is(h1, h2, h3, h4, h5, h6) {
  text-transform: none;
  letter-spacing: inherit;
  color: inherit;
  margin-top: 0;
}

&.lb-home :is(p, ul, ol) { margin-top: 0; }

&.lb-home :focus-visible {
  outline: 2px solid var(--lb-group-deep);
  outline-offset: 3px;
  border-radius: 2px;
}

.lb-section {
  padding-block: var(--lb-section-pad-top);
  position: relative;
}

.lb-section--alt { background: var(--lb-bg-alt); }

.lb-section--red {
  background: var(--lb-grad-red);
  color: var(--lb-white);
}

/* ---- Nhãn nhỏ chữ hoa trên tiêu đề ---- */
.lb-eyebrow {
  font-size: var(--lb-sans-sm);
  font-weight: var(--lb-w-semibold);
  letter-spacing: .12em;
  text-transform: uppercase;
  /* #FF3251 — lấy mẫu nét chữ "ĐỐI TÁC" trên Figma ở zoom 1319%: #EA4857
   * (1.329 điểm), quy về màu thật là #FF3251 theo mốc đã hiệu chuẩn. */
  color: var(--lb-group);
  margin: 0 0 10px;
}

.lb-section--red .lb-eyebrow { color: rgba(255, 255, 255, .82); }

/* ---- Tiêu đề section: serif ---- */
.lb-h2 {
  font-family: var(--lb-font-serif);
  font-size: var(--lb-serif-h2);
  font-weight: var(--lb-w-bold);
  line-height: 1.14;
  letter-spacing: -.015em;
  margin: 0 0 12px;
  text-wrap: balance;
}

.lb-sub {
  font-size: var(--lb-f-base);
  color: var(--lb-n5);
  margin: 0;
  max-width: 60ch;
}

.lb-section--red .lb-sub { color: rgba(255, 255, 255, .86); }

/* ---- Đầu section: tiêu đề trái, phụ trợ phải ---- */
.lb-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  margin-bottom: 36px;
  flex-wrap: wrap;
}

.lb-head__main { flex: 1 1 460px; min-width: 0; }
.lb-head__aside { flex: 0 1 auto; }

/* ---- Nút ---- */
.lb-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--lb-sans-sm);
  font-weight: var(--lb-w-medium);
  padding: 11px 22px;
  border-radius: 999px;
  border: 1px solid currentColor;
  background: transparent;
  color: inherit;
  cursor: pointer;
  transition: background .2s ease, color .2s ease, transform .2s ease;
  font-family: inherit;
}

.lb-btn:hover { transform: translateY(-1px); }

.lb-btn.lb-btn--solid {
  background: var(--lb-group);
  border-color: var(--lb-group);
  color: var(--lb-white);
}

.lb-btn.lb-btn--solid:hover { background: var(--lb-group-deep); border-color: var(--lb-group-deep); }

.lb-btn.lb-btn--onred {
  background: var(--lb-white);
  border-color: var(--lb-white);
  color: var(--lb-group-deep);
}

.lb-btn.lb-btn--ghost-red { color: var(--lb-white); border-color: rgba(255, 255, 255, .55); }

.lb-btn.lb-btn--ghost { color: var(--lb-nature); border-color: var(--lb-n2); background: var(--lb-white); }

.lb-btn.lb-btn--ghost:hover { border-color: var(--lb-nature); }

/* Nút giữ chỗ khi trang đích chưa có: trông y nút thật nhưng con trỏ mặc định
   và không có hover — để người dùng không tưởng là nút hỏng. */
.lb-btn.lb-btn--cho { cursor: default; }
.lb-btn.lb-btn--cho:hover { transform: none; background: var(--lb-group); border-color: var(--lb-group); }

/*
 * Hàng nút dưới lưới (ví dụ "Xem thêm" ở section Giảng viên).
 *
 * Khoảng cách 40px lấy theo nhịp dọc của các section: lưới cách khối trên 36px
 * (.lb-head margin-bottom), nên 40px giữ cho nút không dính đáy thẻ.
 */
/*
 * Neo nhảy tới giữa trang phải chừa chỗ cho thanh header dính trên cùng.
 *
 * Header cao 123px; không có dòng này thì bấm "Đăng ký" xong tiêu đề khối form
 * nằm khuất SAU header, người dùng tưởng nhảy sai chỗ.
 */
[data-section] { scroll-margin-top: 132px; }

.lb-more {
  display: flex;
  justify-content: center;
  margin-top: 40px;
}

/* ---- Nút mũi tên tròn ---- */
.lb-arrow {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--lb-n2);
  background: var(--lb-white);
  color: var(--lb-nature);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
  flex: 0 0 auto;
  padding: 0;
}

.lb-arrow:hover:not(:disabled) {
  background: var(--lb-group-deep);
  border-color: var(--lb-group-deep);
  color: var(--lb-white);
}

/*
 * Nút "trước" phải trỏ sang trái. libero_core_icon('arrow') chỉ có một hướng
 * (phải), nên trước đây cả hai nút của carousel đều trỏ cùng chiều — sai so với
 * Figma và gây hiểu nhầm khi bấm. Lật bằng CSS thay vì thêm icon thứ hai.
 */
.lb-arrow[data-lb="prev"] svg,
.lb-arrow[data-lb="qprev"] svg { transform: rotate(180deg); }

.lb-arrow:disabled { opacity: .35; cursor: default; }

.lb-arrow svg { width: 17px; height: 17px; }

.lb-arrows { display: flex; gap: 10px; }

/*
 * Dai the chuyen gia: hai mui ten noi o MEP TRAI/PHAI, canh giua theo chieu doc.
 *
 * Vo .lb-gv-carousel co position: relative; cum .lb-arrows duoc keo cang het vo
 * (inset 0) roi justify-content: space-between day hai nut ve hai dau. Canh
 * giua theo chieu doc la align-items: center — khong gan top co dinh, nen chieu
 * cao the doi bao nhieu mui ten van dung giua.
 *
 * -22px = mot nua be ngang nut (44px), de nut nam vat qua mep dai the dung nhu
 * anh mau thay vi de len thẻ.
 *
 * pointer-events: none tren cum, auto tren tung nut — khong the lop trong suot
 * nay nuot cu cham vao the o giua.
 *
 * CHI ap tu 1024px tro len. Duoi do vo nhan display: contents (xem khoi
 * responsive) nen .lb-arrows va .lb-track lai la con truc tiep cua
 * .lb-container va bo order cua kho dien thoai van dung.
 */
@media (min-width: 1024px) {
  .lb-gv-carousel { position: relative; }

  .lb-gv-carousel .lb-arrows {
    position: absolute;
    inset: 0 -22px;
    align-items: center;
    justify-content: space-between;
    pointer-events: none;
    z-index: 2;
  }

  .lb-gv-carousel .lb-arrow {
    pointer-events: auto;
    box-shadow: 0 6px 20px -10px rgba(15, 15, 46, .45);
  }
}

/*
 * Không đủ mục để cuộn thì giấu cụm điều hướng đi.
 *
 * Lớp do home.js gắn. Dùng visibility chứ không display:none để hàng tiêu đề
 * không co lại khi số chuyên gia thay đổi — chỗ trống giữ nguyên, chữ không
 * nhảy.
 */
.lb-carousel--tinh .lb-arrows,
.lb-carousel--tinh .lb-dots { visibility: hidden; }

/* ---- Trạng thái rỗng ---- */
.lb-empty {
  grid-column: 1 / -1;
  padding: 44px 20px;
  text-align: center;
  color: var(--lb-n5);
  border: 1px dashed var(--lb-n2);
  border-radius: var(--lb-radius-md);
  font-size: var(--lb-sans-sm);
}

.lb-section--red .lb-empty {
  color: rgba(255, 255, 255, .8);
  border-color: rgba(255, 255, 255, .3);
}

/* ---- Băng chuyền dùng chung ---- */
/*
 * Bề rộng thẻ tính theo PHẦN TRĂM khung, không đặt cứng 283px.
 *
 * Figma vẽ ở khung 1600px, lúc đó .lb-container rộng đúng 1200 và công thức
 * này cho 283,41px — bằng số của Figma. Nhưng dưới 1600px thì .lb-container
 * còn padding 24px mỗi bên, lòng khung chỉ 1152: bốn thẻ cứng 283px cộng ba
 * khoảng cách thành 1198px, thừa 46px nên thẻ thứ tư bị cắt mất một mảng ở
 * mép phải — đúng thứ nhìn thấy trên laptop 1440/1366.
 *
 * Tính theo phần trăm thì luôn vừa đúng bốn thẻ ở mọi bề rộng, và khi có hơn
 * bốn giảng viên thì phần dư vẫn cuộn ngang như thiết kế carousel.
 */
.lb-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 3 * var(--lb-grid-gap)) / 4);
  gap: var(--lb-grid-gap);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  padding-bottom: 4px;
}

.lb-track::-webkit-scrollbar { display: none; }
.lb-track > * { scroll-snap-align: start; }

/* ============================================================
 * 2. Hero
 * ============================================================ */
.lb-hero {
  /* Nen do body:has(.lb-hero) ve, xem dau file. To lai o day la sinh vet cat. */
  background: transparent;
  padding-block: 96px 104px;
  text-align: center;
}

/*
 * Số đo lấy từ Figma (chọn thẳng lớp chữ trong frame hero):
 *   Tiêu đề : Source Serif 4 · ExtraBold 800 · 61.04px · line-height 72px
 *             · letter-spacing 0% · căn giữa
 *   Mô tả   : Google Sans Flex · Medium 500 · 19.2px · line-height 100%
 *             · letter-spacing 0% · màu #191614 · vừa đúng MỘT dòng (789px)
 *
 * Trước đây line-height để 1.1 (67px, hụt 5px mỗi dòng) và letter-spacing
 * -0.02em (bóp chữ lại) — cả hai đều không có trong Figma.
 */
.lb-hero__title {
  font-family: var(--lb-font-serif);
  font-size: var(--lb-serif-h1);
  font-weight: var(--lb-w-extrabold);
  line-height: 72px;
  letter-spacing: 0;
  margin: 0 0 14px;
  text-wrap: balance;
}

/* Chữ nhấn đỏ trong tiêu đề hero: #FF3251 (cùng màu với tiêu đề trang Khám phá
 * và nút CTA header — đã hiệu chuẩn bằng mẫu điểm ảnh trên ảnh Figma). */
.lb-hero__title em { font-style: normal; color: var(--lb-group); }

.lb-hero__sub {
  font-size: var(--lb-sans-h6);
  font-weight: var(--lb-w-medium);
  line-height: 1;
  letter-spacing: 0;
  color: #191614;
  margin: 0 auto 38px;
  /* Figma đo 789px cho đúng một dòng; để rộng hơn một chút cho chữ dài hơn. */
  max-width: 820px;
}

/* Cặp select "Bạn là một… / Bạn đi học để…" */
.lb-finder {
  display: flex;
  align-items: stretch;
  gap: 0;
  background: var(--lb-white);
  border: 1px solid var(--lb-card-border);
  border-radius: 999px;
  padding: 8px 8px 8px 10px;
  max-width: 780px;
  margin: 0 auto;
  box-shadow: 0 10px 34px -22px rgba(15, 15, 46, .5);
}

.lb-finder__field {
  flex: 1 1 0;
  min-width: 0;
  text-align: left;
  padding: 6px 18px;
  position: relative;
}

.lb-finder__field + .lb-finder__field { border-left: 1px solid var(--lb-n1); }

.lb-finder__label {
  display: block;
  font-size: var(--lb-sans-xs);
  color: var(--lb-n5);
  margin-bottom: 2px;
}

/* Nút hiển thị giá trị — thay cho <select> */
.lb-finder__value {
  appearance: none;
  width: 100%;
  border: 0;
  background: transparent;
  font-family: inherit;
  font-size: var(--lb-sans-sm);
  font-weight: var(--lb-w-medium);
  color: var(--lb-nature);
  cursor: pointer;
  padding: 0 20px 0 0;
  line-height: 1.4;
  text-align: left;
  display: block;
}

/* Chưa chọn thì chữ mờ như placeholder */
.lb-finder__value[data-empty="true"] { color: var(--lb-n5); font-weight: var(--lb-w-regular); }

/*
 * Mũi tên xuống, xoay khi mở.
 * BUG đã sửa: rule cũ chỉ khai báo transition, thiếu content/kích thước/vị trí
 * nên ::after không sinh ra hộp nào — mũi tên không bao giờ hiện. Figma có vẽ
 * mũi tên này cạnh mỗi giá trị đã chọn.
 */
.lb-finder__field::after {
  content: "";
  position: absolute;
  right: 18px;
  bottom: 14px;
  width: 7px;
  height: 7px;
  border-right: 1.5px solid var(--lb-n5);
  border-bottom: 1.5px solid var(--lb-n5);
  transform: rotate(45deg);
  transition: transform .18s ease;
  pointer-events: none;
}
.lb-finder__field[data-open="true"]::after { transform: rotate(-135deg); bottom: 10px; }

/*
 * Bảng chọn.
 * LƯU Ý: Figma KHÔNG vẽ trạng thái mở của ô chọn — chỉ có trạng thái đóng.
 * Bảng này dựng theo token của Design system (bo góc 16, viền #DDDAD5, nền trắng)
 * nên nhất quán với phần còn lại, nhưng CẦN bên thiết kế duyệt. Cùng nhóm với
 * trạng thái lỗi/gửi thành công của form — cũng chưa có trong Figma.
 */
.lb-finder__list {
  position: absolute;
  top: calc(100% + 10px);
  left: 6px;
  right: 6px;
  z-index: 30;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: var(--lb-white);
  border: var(--lb-card-border-w) solid var(--lb-card-border);
  border-radius: var(--lb-radius-md);
  box-shadow: 0 18px 40px -20px rgba(15, 15, 46, .45);
  max-height: 268px;
  overflow-y: auto;
}

.lb-finder__opt {
  padding: 9px 12px;
  border-radius: 9px;
  font-size: var(--lb-sans-sm);
  color: var(--lb-nature);
  cursor: pointer;
  line-height: 1.4;
}

.lb-finder__opt:hover,
.lb-finder__opt[data-active="true"] { background: var(--lb-bg-alt); }

.lb-finder__opt[aria-selected="true"] {
  background: var(--lb-group-deep);
  color: var(--lb-white);
  font-weight: var(--lb-w-medium);
}

.lb-finder__go {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 0;
  background: var(--lb-group-deep);
  color: var(--lb-white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex: 0 0 auto;
  align-self: center;
  transition: opacity .2s ease, background .2s ease;
}

.lb-finder__go[disabled] { opacity: .35; cursor: not-allowed; }
.lb-finder__go:not([disabled]):hover { background: var(--lb-group); }

/* ============================================================
 * 3. Giảng viên tâm huyết
 * ============================================================ */

/*
 * Figma xếp mô tả + liên kết + nút điều hướng vào một cột phải rộng 489px,
 * đáy cột thẳng hàng với đáy tiêu đề bên trái (.lb-head đã align-items:flex-end).
 * Chỉ áp cho section này: các section khác dùng .lb-head__aside cho nội dung khác.
 */
[data-section="03-giangvien"] .lb-head__aside {
  flex: 0 1 489px;
  min-width: 0;
}

[data-section="03-giangvien"] .lb-sub {
  max-width: none;
  margin-bottom: 18px;
}

[data-section="03-giangvien"] .lb-head__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

/* Nhãn nhỏ trong Figma: 16px / weight 500 / letter-spacing 5% / #FF3251 */
[data-section="03-giangvien"] .lb-eyebrow {
  font-size: 16px;
  font-weight: var(--lb-w-medium);
  letter-spacing: .05em;
  color: var(--lb-group);
}
.lb-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--lb-grid-gap);
  margin: 40px 0 34px;
}

/*
 * Figma Frame 308 — số liệu:
 *   con số    48px / 700 / line-height 100% / #FF3251, font SANS (không phải serif)
 *   "%"       32px, canh giữa theo chiều dọc so với con số
 *   "+"       giữ nguyên 48px, nằm cùng dòng
 *   chú thích 18px / 600 / #000 / căn giữa
 * Dùng flex + align-items:center để tái tạo đúng "Vertical alignment: Middle"
 * của Figma; vertical-align:super trước đây nhấc cả dấu "+" lên sai chỗ.
 */
.lb-stat { text-align: center; }

.lb-stat__n {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1px;
  font-family: var(--lb-font-sans);
  font-size: 48px;
  font-weight: var(--lb-w-bold);
  color: var(--lb-group);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.lb-stat__u { font-size: 1em; }
.lb-stat__u--pct { font-size: .667em; }

.lb-stat__l {
  font-size: 18px;
  font-weight: var(--lb-w-semibold);
  line-height: 28px;
  color: #000;
  margin-top: 4px;
}

/* Thẻ giảng viên — 283 x 424.59, viền 0.74px, radius 16 (số Figma, không làm tròn) */
.lb-teacher {
  width: auto;      /* để ô lưới quyết định bề rộng, xem .lb-track */
  min-width: 0;
  border: var(--lb-card-border-w) solid var(--lb-card-border);
  border-radius: var(--lb-card-radius);
  overflow: hidden;
  background: var(--lb-white);
  display: flex;
  flex-direction: column;
  transition: transform .25s ease, box-shadow .25s ease;
}

.lb-teacher:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 30px -18px rgba(15, 15, 46, .45);
}

.lb-teacher__media {
  position: relative;
  aspect-ratio: 283 / 240;
  background: var(--lb-nature);
  overflow: hidden;
}

.lb-teacher__media img { width: 100%; height: 100%; object-fit: cover; }

.lb-teacher__no {
  position: absolute;
  left: 14px;
  bottom: 12px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--lb-group-deep);
  color: var(--lb-white);
  font-size: var(--lb-sans-xs);
  font-weight: var(--lb-w-semibold);
  display: grid;
  place-items: center;
}

/* Dải đỏ ngang dưới ảnh — Figma Frame 308 dùng cùng một màu cho cả bốn thẻ */
.lb-teacher__bar { height: 3px; background: var(--lb-card-red); }

/*
 * Lớp phủ tối ở đáy ảnh (Figma: gradient #23191B, 0% → 8%, cao 110px).
 * Có nó thì huy hiệu số màu trắng mới đọc được trên ảnh nền sáng.
 */
.lb-teacher__scrim {
  position: absolute;
  inset: auto 0 0 0;
  height: 110px;
  background: linear-gradient(180deg, rgba(35, 25, 27, 0) 0%, rgba(35, 25, 27, .08) 100%);
  pointer-events: none;
}

.lb-teacher__body { padding: 14px 16px 18px; }

.lb-teacher__field {
  font-size: 13.33px;   /* Figma: 13.33px, weight 400, letter-spacing 0 */
  font-weight: 400;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--lb-card-red);
  margin: 0 0 6px;
}

.lb-teacher__name {
  font-family: var(--lb-font-serif);
  font-size: var(--lb-serif-h6);
  font-weight: var(--lb-w-semibold);
  margin: 0 0 6px;
  line-height: 1.25;

  /*
   * Chua san CHO HAI DONG ten, du ten chi chiem mot dong.
   *
   * Nam the nam canh nhau: ten mot dong cao 25px, ten hai dong cao 50px, nen
   * dong chuc danh ngay duoi no bat dau o 305px hoac 330px tuy the — ca hang
   * nhin nhu bi lech truc ngang. Nhan do va ten van thang hang (cung 247 va
   * 274), chi rieng chuc danh lech.
   *
   * 2.5em = 2 dong x line-height 1.25. Dung em chu khong phai 50px de con
   * dung khi doi --lb-serif-h6.
   *
   * KHONG cat bot ten bang line-clamp: ten ba dong se day the do xuong, nhung
   * cat ten mot nguoi kem dau ba cham con te hon lech 25px.
   */
  min-height: 2.5em;
}

.lb-teacher__role { font-size: var(--lb-sans-sm); color: var(--lb-n5); margin: 0; line-height: 1.45; }

/* ============================================================
 * 4. Khóa học tiêu biểu (nền đỏ)
 * ============================================================ */
/*
 * Hàng lọc = [ khối chip ] + [ ô tìm kiếm ].
 *
 * flex-wrap:nowrap ở cấp ngoài để ô tìm kiếm KHÔNG bao giờ bị đẩy xuống dòng;
 * chỉ khối chip bên trong mới xuống dòng khi danh mục nhiều.
 *
 * align-items:flex-start để ô tìm kiếm bám dòng đầu, không trôi xuống giữa khi
 * khối chip cao thành hai ba dòng.
 */
.lb-tabs {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 28px;
}

.lb-tabs__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  flex: 1 1 auto;
  min-width: 0;   /* cho phép khối chip co lại thay vì đẩy ô tìm kiếm ra ngoài */
}

.lb-tab {
  font-family: inherit;
  font-size: var(--lb-sans-sm);
  padding: 8px 18px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .45);
  background: transparent;
  color: var(--lb-white);
  cursor: pointer;
  transition: background .2s ease, color .2s ease;
  white-space: nowrap;
}

.lb-tab:hover { background: rgba(255, 255, 255, .14); }

.lb-tab[aria-selected="true"] {
  background: var(--lb-white);
  color: var(--lb-group-deep);
  border-color: var(--lb-white);
  font-weight: var(--lb-w-medium);
}

/*
 * Vỏ chứa nút lọc + ô tìm. Ở khổ máy tính nó trong suốt về mặt bố cục: chỉ là
 * một hộp flex ôm đúng ô tìm, vì nút lọc bị ẩn.
 */
.lb-tabs__ctrl {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
}

/* Hai nút tròn (lọc + tìm) chỉ dùng ở khổ điện thoại. */
.lb-tabs__ctrl { display: none; }
.lb-tabs__toggle { display: none; }

.lb-search {
  flex: 0 0 auto;   /* giữ nguyên bề rộng, không co và không xuống dòng */
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, .16);
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: 999px;
  padding: 7px 16px;
  min-width: 232px;
}

.lb-search input {
  border: 0;
  background: transparent;
  color: var(--lb-white);
  font-family: inherit;
  font-size: var(--lb-sans-sm);
  width: 100%;
  outline: none;
}

.lb-search input::placeholder { color: rgba(255, 255, 255, .7); }
.lb-search svg { width: 15px; height: 15px; flex: 0 0 auto; opacity: .8; }

.lb-courses {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--lb-grid-gap);
}

.lb-course {
  background: var(--lb-white);
  border-radius: var(--lb-card-radius);
  overflow: hidden;
  color: var(--lb-nature);
  display: flex;
  flex-direction: column;
  transition: transform .25s ease;
}

.lb-course:hover { transform: translateY(-4px); }
.lb-course[hidden] { display: none; }

.lb-course__media { aspect-ratio: 16 / 10; background: var(--lb-bg-alt); overflow: hidden; }
.lb-course__media img { width: 100%; height: 100%; object-fit: cover; }

.lb-course__body { padding: 14px 16px 18px; display: flex; flex-direction: column; gap: 8px; flex: 1; }

.lb-course__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  font-size: var(--lb-sans-xs);
  color: var(--lb-n5);
}

.lb-course__meta span { display: inline-flex; align-items: center; gap: 5px; }
.lb-course__meta svg { width: 12px; height: 12px; flex: 0 0 auto; }

.lb-course__title {
  font-size: var(--lb-sans-h6);
  font-weight: var(--lb-w-semibold);
  margin: 0;
  line-height: 1.32;

  /*
   * Chua san BA DONG tieu de. Cung ly do voi .lb-teacher__name.
   *
   * Do tren 8 the: tieu de chiem 1, 2 hoac 3 dong (25 / 51 / 76px), nen doan
   * mo ta ngay duoi bat dau o 268 hoac 293 — ca hang nhin nhu lech truc ngang.
   * Hang meta va tieu de van thang (cung 184 va 209), chi mo ta lech.
   *
   * 3.96em = 3 dong x line-height 1.32.
   *
   * Ba chu khong phai hai: du lieu that dang co hai tieu de ba dong. Cat bot
   * bang line-clamp thi dung yeu cau truoc day cua chinh trang nay — tieu de
   * dai bi che mat chu.
   */
  min-height: 3.96em;
}

.lb-course__desc {
  font-size: var(--lb-sans-sm);
  color: var(--lb-n5);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.lb-course__more {
  font-size: var(--lb-sans-sm);
  font-weight: var(--lb-w-medium);
  color: var(--lb-group-deep);
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/*
 * Biến thể có gạch chân (Figma Frame 308). Gạch chạy hết bề ngang liên kết,
 * kể cả phần trống sau mũi tên — dùng border-bottom chứ không dùng
 * text-decoration, vì text-decoration chỉ kẻ dưới CHỮ và bỏ qua icon.
 */
.lb-course__more--rule {
  justify-content: space-between;
  gap: 26px;
  min-width: 196px;
  padding-bottom: 9px;
  border-bottom: 1px solid var(--lb-n2);
}

/* ============================================================
 * 5. Lịch khai giảng
 * ============================================================ */
.lb-events { display: flex; flex-direction: column; }

.lb-event {
  display: grid;
  grid-template-columns: 82px 1fr auto;
  gap: 22px;
  align-items: center;
  padding: 20px 0;
  border-bottom: 1px solid var(--lb-n1);
  position: relative;                 /* mốc cho .lb-event__link phủ cả dòng */
}

/*
 * Liên kết phủ cả dòng sự kiện (tới sản phẩm liên kết / trang sự kiện). Tiêu đề
 * và nút "Đăng ký" nằm trên nó (z-index 1) nên vẫn là link riêng: nút về thẳng
 * #dang-ky của trang sản phẩm, còn lại của dòng về đầu trang sản phẩm.
 */
.lb-event__link { position: absolute; inset: 0; z-index: 0; }
.lb-event__title a, .lb-event__cta { position: relative; z-index: 1; }
.lb-event:hover .lb-event__title a { color: var(--lb-group-deep); }

.lb-event:first-child { border-top: 1px solid var(--lb-n1); }

/* Figma `Frame 40`: thẻ trắng 82x100, bo 8, padding 8/16 — nổi trên nền
 * #F8F8F8 của section. Không có viền; ranh giới là do chênh nền. */
.lb-event__date {
  width: 82px;
  height: 100px;
  background: var(--lb-white);
  border-radius: 8px;
  padding: 8px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  text-align: center;
}

.lb-event__d {
  font-family: var(--lb-font-serif);
  font-size: var(--lb-serif-h3);
  font-weight: var(--lb-w-bold);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.lb-event__m {
  font-size: var(--lb-sans-xs);
  color: var(--lb-n5);
  line-height: 1.25;
  font-variant-numeric: tabular-nums;
}

.lb-badge {
  display: inline-block;
  font-size: var(--lb-sans-xs);
  font-weight: var(--lb-w-medium);
  padding: 3px 11px;
  border-radius: 999px;
  margin-bottom: 6px;
}

/* Figma Frame 36: "Khóa ngắn" là TÍM, "Khóa dài" là XANH LÁ — trước đây gán
 * ngược nhau. "Sự kiện" xanh dương thì vốn đã đúng. */
.lb-badge--ngan { background: #EDE4FF; color: var(--lb-lim); }
.lb-badge--dai  { background: #E8F7EF; color: var(--lb-lisa); }
.lb-badge--sk   { background: #E4E8FF; color: var(--lb-lit); }

.lb-event__title {
  font-family: var(--lb-font-serif);
  font-size: var(--lb-serif-h5);
  font-weight: var(--lb-w-semibold);
  margin: 0 0 6px;
  line-height: 1.28;
}

.lb-event__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  font-size: var(--lb-sans-sm);
  color: var(--lb-n5);
}

.lb-event__meta span { display: inline-flex; align-items: center; gap: 6px; }
.lb-event__meta svg { width: 13px; height: 13px; flex: 0 0 auto; }

.lb-event__cta .lb-btn.lb-btn--solid {
  height: 36px;
  padding: 0 16px;
  border-radius: 8px;
  background: var(--lb-group);
  border-color: var(--lb-group);
  color: var(--lb-white);
  gap: 8px;
}

.lb-event__cta .lb-btn.lb-btn--solid:hover { background: var(--lb-group-deep); border-color: var(--lb-group-deep); }
.lb-event--full .lb-btn { opacity: .5; pointer-events: none; }

/* ============================================================
 * 6. Đơn vị thành viên (nền đỏ)
 * ============================================================ */
.lb-units {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - var(--lb-grid-gap)) / 2);
  gap: var(--lb-grid-gap);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  scroll-behavior: smooth;
}

.lb-units::-webkit-scrollbar { display: none; }
.lb-units > * { scroll-snap-align: start; }

.lb-unit {
  position: relative;
  overflow: hidden;
  background: #FDFBF7;
  color: var(--lb-nature);
  border-radius: 16px;
  padding: 30px 30px 26px 40px;
  border: 1px solid rgba(27, 27, 56, .1);
  /* Figma vẽ thẻ 781x438 (tỉ lệ 1.78). Web hiển thị 2 thẻ/khung nên thẻ chỉ rộng
   * ~565px trong khi cỡ chữ giữ nguyên, mô tả xuống nhiều dòng hơn — ép cứng
   * aspect-ratio ở đây sẽ cắt mất nút và dòng số liệu. Lấy tỉ lệ Figma làm sàn,
   * cho thẻ cao thêm theo nội dung; .lb-units là grid nên 2 thẻ tự bằng nhau. */
  min-height: calc(100% * 438 / 781);
}

.lb-unit__main {
  display: flex;
  flex-direction: column;
  gap: 14px;
  height: 100%;
}

/* Chừa nửa phải cho ảnh; đơn vị chưa có ảnh thì dùng trọn bề ngang. */
.lb-unit--photo .lb-unit__main { width: 48%; }

/* Phải là .lb-unit .lb-unit__logo (0,2,0): `&.lb-home img { height: auto }` trong
 * chính file này có độ ưu tiên (0,1,1), cao hơn một class đơn, nên đặt chiều cao
 * ở .lb-unit__logo là vô tác dụng — logo mỗi thẻ ra một cỡ tuỳ tỉ lệ file. */
.lb-unit .lb-unit__logo {
  width: auto;
  height: 86px;
  max-width: 100%;
  object-fit: contain;
  object-position: left center;
  display: block;
}

/* Đơn vị chưa có ảnh minh hoạ thì vẫn giới hạn bề ngang cột chữ, không để dòng
 * mô tả kéo hết 565px trong khi hai thẻ kia chỉ dùng 48%. */
.lb-unit:not(.lb-unit--photo) .lb-unit__main { max-width: 70%; }

/* Ảnh dán sát mép phải + mép dưới, tràn ra ngoài phần padding của thẻ. */
.lb-unit__photo {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 52%;
  pointer-events: none;
}

.lb-unit__photo img { width: 100%; height: auto; display: block; }

.lb-unit__points {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.lb-unit__points li {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: var(--lb-sans-sm);
  font-weight: var(--lb-w-medium);
  line-height: 1.3;
}

.lb-unit__points svg {
  flex: 0 0 auto;
  width: 17px;
  height: 17px;
  color: var(--lb-group);
}

.lb-unit__name {
  font-family: var(--lb-font-serif);
  font-size: var(--lb-serif-h4);
  font-weight: var(--lb-w-semibold);
  margin: 0;
  line-height: 1.15;
  color: var(--lb-nature);

  /*
   * Chiem dung cho cua mot logo (86px) de cot chu phia duoi thang hang voi ba
   * the co logo anh.
   *
   * Don vi chua co logo thi dung chu thay; khong chua cho thi khoi chu cao 36px
   * va keo ca mo ta, gach dau dong, len 50px so voi cac the ben canh.
   *
   * Canh giua theo chieu doc cho khop object-position: left center cua the logo.
   */
  min-height: 86px;
  display: flex;
  align-items: center;
}

.lb-unit__code {
  font-size: var(--lb-sans-xs);
  font-weight: var(--lb-w-semibold);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--lb-unit, var(--lb-group-deep));
}

/*
 * Chua san BON DONG mo ta.
 *
 * Do duoc: the dau dai 4 dong (85px), ba the kia 2 dong (43px), nen dong gach
 * dau dong ngay duoi bat dau o 230 hoac 188 — lech 42px giua cac the dung canh
 * nhau.
 *
 * 6.4em = 4 dong x line-height 1.6 (thua huong tu .lb-home). Dung em de con
 * dung khi doi --lb-sans-sm.
 */
.lb-unit__desc {
  font-size: var(--lb-sans-sm);
  color: var(--lb-n5);
  margin: 0;
  min-height: 6.4em;
}

.lb-unit__facts {
  display: flex;
  gap: 8px;
  margin-top: 0;
  font-size: var(--lb-sans-sm);
  color: var(--lb-nature);
}

.lb-unit__facts span + span::before { content: "·"; margin-right: 8px; }

.lb-unit__facts b { font-weight: var(--lb-w-bold); color: var(--lb-nature); }

/* Nút "Khám phá": Figma component `Buttons` type=Filled — nền #FF3251, chữ trắng
 * 16px, bo 8px, padding 12/24, cao 44px và ÔM nội dung chứ không kéo hết thẻ. */
.lb-unit .lb-btn.lb-btn--solid {
  align-self: flex-start;
  margin-top: auto;
  margin-bottom: 2px;
  background: var(--lb-group);
  border-color: var(--lb-group);
  color: var(--lb-white);
  border-radius: 8px;
  /* Chốt cứng 44px: icon mũi tên cao hơn line-height nên padding 12/12 đội lên 46. */
  height: 44px;
  padding: 0 24px;
  font-size: 16px;
  line-height: 20px;
}

.lb-unit .lb-btn.lb-btn--solid:hover { background: var(--lb-group-deep); border-color: var(--lb-group-deep); }

/* Thanh chỉ báo dạng vạch ngang, không phải chấm tròn */
/* Figma căn các vạch chỉ báo về mép trái thẻ, không phải giữa. */
.lb-dots { display: flex; gap: 8px; margin-top: 26px; justify-content: flex-start; }

.lb-dot {
  width: 38px;
  height: 3px;
  border-radius: 2px;
  border: 0;
  background: rgba(255, 255, 255, .38);
  cursor: pointer;
  padding: 0;
  transition: background .2s ease;
}

.lb-dot[aria-current="true"] { background: var(--lb-white); }

/* ============================================================
 * 7. Tin bài mới
 * ============================================================ */
/*
 * Figma Frame 108: hop bo 8px, nen #1B1B38 10% (= --lb-n1), KHONG vien,
 * dem 8/12, khoang cach giua cac chip 24. Ban cu la vien thuoc bo tron co
 * vien 1px. Chip dang chon lay #FF3251 (--lb-group) — do sang, khong phai
 * --lb-group-deep #D20F12; da do mau tren ban xuat Figma.
 */
.lb-tabs--light { gap: 24px; margin-bottom: 0; }

.lb-tabs--light .lb-tab {
  border: 0;
  border-radius: 8px;
  padding: 8px 12px;
  background: var(--lb-n1);
  color: var(--lb-n8);

  /*
   * Figma cho chip cao dung 40. Chi de dem 8 tren duoi thi line-height cua
   * co chu nho chi cho ra 33 — thap hon 7px, nhin ra ngay khi dat canh chu
   * tieu de.
   */
  min-height: 40px;
  display: inline-flex;
  align-items: center;
}

.lb-tabs--light .lb-tab:hover { background: var(--lb-n2); }

.lb-tabs--light .lb-tab[aria-selected="true"] {
  background: var(--lb-group);
  color: var(--lb-white);
}

/*
 * Chip di cung hang voi tieu de va CAN DUOI — day khoi tieu de o 185, day dai
 * chip o 189 trong Figma. .lb-head von da la align-items: flex-end nen khong
 * can khai lai; chi chinh khoang cach xuong hang the (215 - 189 = 26).
 */
[data-section="07-tinbai"] .lb-head { margin-bottom: 26px; }

/*
 * Bo 12px trong duoi tieu de.
 *
 * .lb-head canh day theo HOP cua .lb-head__main, ma .lb-h2 co margin-bottom
 * 12px nen hop do thut xuong thap hon day chu 12px — dai chip vi the tut
 * theo, nhin nhu bi lech. Figma khong co khoang do: khoi tieu de cao dung
 * 87 = nhan 20 + ho 11 + tieu de 56.
 */
[data-section="07-tinbai"] .lb-head__main .lb-h2 { margin-bottom: 0; }

/*
 * "Doc tiep" / "Tim hieu them" phai ra mau do.
 *
 * .lb-course__more khai color o do uu tien (0,1,0), thua "&.lb-home a {
 * color: inherit }" (0,2,0) o dau file — nen the <a> thua ke #1B1B38 cua the
 * va mau do khai o tren khong bao gio co tac dung. Khong co loi nao bao.
 *
 * Chi sua trong section nay: hai section con lai cung dinh loi do, nhung
 * chua doi chieu mau voi Figma nen chua dong vao.
 */
[data-section="07-tinbai"] .lb-post .lb-course__more { color: var(--lb-group); }

/*
 * Figma: cot trai 600, cot phai 552, cach nhau 48 — cong lai dung 1200 la
 * be rong khung noi dung. Ban cu chia doi deu (1fr 1fr) nen bai lon hep hon
 * thiet ke 35px va ba the nho rong hon 13px.
 */
.lb-news {
  display: grid;
  grid-template-columns: 600fr 552fr;
  gap: 48px;
  align-items: stretch;
}

/*
 * space-between chu khong phai gap co dinh: Figma cho cot phai cao bang the
 * lon (552) roi rai deu ba the 158px vao trong. Khoang ho tu no ra 39px.
 */
.lb-news__side {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 16px;
}

.lb-cat {
  font-size: var(--lb-sans-xs);
  font-weight: var(--lb-w-semibold);
  letter-spacing: .08em;
  text-transform: uppercase;

  /* Figma dung #FF3251 — cung mau voi nhan "NEWSROOM" cua section, khong
     phai #D20F12. Da do mau tren ban xuat Figma. */
  color: var(--lb-group);
  margin: 0 0 4px;
}

.lb-date { font-size: var(--lb-sans-sm); color: var(--lb-n5); margin: 0; }

/*
 * Bai lon la MOT THE trang, khong phai chu nam trut tren nen section.
 * Figma: 600x552, bo 16, vien 1px #0F0F2E 20% (= --lb-n2), anh 600x315 tran
 * sat ba mep tren. overflow:hidden de anh bo theo goc the.
 */
.lb-post--big {
  display: flex;
  flex-direction: column;
  background: var(--lb-white);
  border: 1px solid var(--lb-n2);
  border-radius: var(--lb-card-radius);
  overflow: hidden;
}

.lb-post--big .lb-post__media {
  aspect-ratio: 600 / 315;
  border-radius: 0;
  overflow: hidden;
  background: var(--lb-bg-alt);
  margin-bottom: 0;
}

/* Figma Frame 36: dem 0 24 8, khoang cach doc 8; 16 phia tren la gap cua the. */
.lb-post--big .lb-post__body { padding: 16px 24px 16px; }

.lb-post--big .lb-post__media img { width: 100%; height: 100%; object-fit: cover; }

.lb-post--big .lb-post__title {
  font-family: var(--lb-font-serif);
  font-size: var(--lb-serif-h4);
  font-weight: var(--lb-w-semibold);
  margin: 6px 0 8px;
  line-height: 1.22;
}

.lb-post--big .lb-post__excerpt {
  font-size: var(--lb-sans-sm);
  color: var(--lb-n5);
  margin: 0 0 10px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/*
 * Figma: the 552x158, anh 191 rong CHIEM TRON chieu cao the va sat mep trai.
 * Ban cu chua anh 116px trong the co dem 12px nen anh nho hon va noi giua.
 */
.lb-post--sm {
  display: grid;
  grid-template-columns: 191px 1fr;
  gap: 16px;
  background: var(--lb-white);
  border: 1px solid var(--lb-n2);
  border-radius: var(--lb-card-radius);
  padding: 0;
  overflow: hidden;
  align-items: stretch;
  min-height: 158px;
  transition: transform .2s ease;
}

.lb-post--sm:hover { transform: translateX(3px); }

.lb-post--sm .lb-post__media {
  aspect-ratio: auto;
  height: 100%;
  border-radius: 0;
  overflow: hidden;
  background: var(--lb-bg-alt);
}

.lb-post--sm .lb-post__body {
  align-self: center;
  padding: 16px 24px 16px 0;
}

.lb-post--sm .lb-post__media img { width: 100%; height: 100%; object-fit: cover; }

.lb-post--sm .lb-post__title {
  font-size: var(--lb-sans-sm);
  font-weight: var(--lb-w-semibold);
  margin: 2px 0 6px;
  line-height: 1.4;
}

.lb-post[hidden] { display: none; }

/* ============================================================
 * 8. Bài viết & Tài liệu
 * ============================================================ */
.lb-docs { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--lb-grid-gap); }

.lb-doc {
  border: var(--lb-card-border-w) solid var(--lb-card-border);
  border-radius: var(--lb-card-radius);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: border-color .2s ease, transform .2s ease;
  background: var(--lb-white);
}

.lb-doc:hover { border-color: var(--lb-group-deep); transform: translateY(-3px); }
.lb-doc:first-child { border-color: var(--lb-group-deep); }

.lb-doc__icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: #FDECEC;
  color: var(--lb-group-deep);
  display: grid;
  place-items: center;
}

.lb-doc__icon svg { width: 21px; height: 21px; }

.lb-doc__title {
  font-family: var(--lb-font-serif);
  font-size: var(--lb-serif-h6);
  font-weight: var(--lb-w-semibold);
  margin: 0;
  line-height: 1.3;

  /* Cung van de: tieu de 2 dong (52px) hay 3 dong (78px) lam dong meta ben
     duoi bat dau o 141 hoac 167. 3.9em = 3 dong x 1.3. */
  min-height: 3.9em;
}

.lb-doc__meta { font-size: var(--lb-sans-sm); color: var(--lb-n5); margin: 0; }

/* ============================================================
 * 9. Cộng đồng Libero
 * ============================================================ */
.lb-comm { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }

.lb-quote {
  background: var(--lb-white);
  border-radius: var(--lb-radius-lg);
  padding: 40px 42px;
  box-shadow: 0 20px 46px -34px rgba(15, 15, 46, .5);
}

.lb-quote__text {
  font-family: var(--lb-font-serif);
  font-size: var(--lb-serif-h6);
  line-height: 1.62;
  margin: 0 0 26px;
  color: var(--lb-nature);
}

/* Chừa chỗ cho cặp mũi tên nằm cùng hàng bên phải: 2×44px + gap 10px = 98px. */
.lb-quote__who { display: flex; align-items: center; gap: 14px; padding-right: 112px; }

.lb-quote__ava {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--lb-bg-alt);
  flex: 0 0 auto;
}

.lb-quote__ava img { width: 100%; height: 100%; object-fit: cover; }
.lb-quote__name { font-weight: var(--lb-w-semibold); font-size: var(--lb-sans-sm); }
.lb-quote__role { font-size: var(--lb-sans-xs); color: var(--lb-n5); }
/*
 * Mũi tên nằm TRONG thẻ trắng, góc dưới phải — theo đúng Figma Frame 311.
 * Offset khớp padding của .lb-quote (40px dọc / 42px ngang) nên mũi tên thẳng
 * hàng với avatar bên trái.
 */
.lb-comm__quotes { position: relative; }

.lb-quote__nav {
  display: flex;
  gap: 10px;
  position: absolute;
  right: 42px;
  bottom: 40px;
}

/* Lưới 4 ảnh lệch nhau */
.lb-mosaic {
  display: grid;
  grid-template-columns: 1fr 1.24fr;
  grid-template-rows: repeat(2, 168px);
  gap: 16px;
}

.lb-mosaic figure { margin: 0; border-radius: var(--lb-radius-md); overflow: hidden; background: var(--lb-bg-alt); }
.lb-mosaic img { width: 100%; height: 100%; object-fit: cover; }
.lb-mosaic figure:nth-child(1) { align-self: end; height: 138px; }
.lb-mosaic figure:nth-child(2) { grid-row: span 1; height: 100%; }
.lb-mosaic figure:nth-child(3) { height: 100%; }
.lb-mosaic figure:nth-child(4) { height: 138px; }

/* ============================================================
 * 11. Form liên hệ tư vấn (nền đỏ)
 * ============================================================ */
.lb-contact { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }

.lb-contact__title {
  font-family: var(--lb-font-serif);
  font-size: var(--lb-serif-h2);
  font-weight: var(--lb-w-bold);
  line-height: 1.14;
  margin: 0 0 14px;
}

.lb-form {
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .26);
  border-radius: var(--lb-radius-lg);
  padding: 32px 34px;
  backdrop-filter: blur(3px);
}

.lb-form h3 {
  font-family: var(--lb-font-serif);
  font-size: var(--lb-serif-h5);
  font-weight: var(--lb-w-semibold);
  margin: 0 0 20px;
}

.lb-form label { display: block; font-size: var(--lb-sans-xs); margin-bottom: 5px; opacity: .92; }

/*
 * Ô nhập — số đo lấy từ Figma Frame 83:
 *   nền  #FFFFFF 20%   (Color/white-2)
 *   viền 1px #FFFFFF 30% (Color/white-3)
 *   bo góc 8px (radius/8)
 *
 * Đặc hiệu phải là 0,3,1: Avada áp style form riêng (nền #F2F3F5, viền xám,
 * chữ xám) và thắng mọi selector yếu hơn — đó là lý do trước đây ô nhập ra
 * màu xám đặc thay vì trắng mờ trên nền đỏ.
 */
&.lb-home .lb-form input[type],
&.lb-home .lb-form select,
&.lb-home .lb-form textarea {
  width: 100%;
  border: 1px solid rgba(255, 255, 255, .3);
  background: rgba(255, 255, 255, .2);
  border-radius: 8px;
  padding: 10px 13px;
  color: var(--lb-white);
  font-family: inherit;
  font-size: var(--lb-sans-sm);
  outline: none;
  box-shadow: none;
}

&.lb-home .lb-form input[type]::placeholder,
&.lb-home .lb-form textarea::placeholder { color: rgba(255, 255, 255, .6); }

&.lb-home .lb-form input[type]:focus,
&.lb-home .lb-form select:focus,
&.lb-home .lb-form textarea:focus {
  border-color: var(--lb-white);
  background: rgba(255, 255, 255, .26);
}

&.lb-home .lb-form select option { color: var(--lb-nature); }
.lb-form textarea { min-height: 92px; resize: vertical; }

.lb-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }
.lb-form__field { margin-bottom: 14px; }
.lb-form .lb-btn--onred { width: 100%; justify-content: center; margin-top: 6px; }
.lb-form__note { font-size: var(--lb-sans-xs); opacity: .8; margin: 12px 0 0; }
.lb-form__note a { text-decoration: underline; }

/* ============================================================
 * 13. Nút nổi Messenger / Zalo
 * ============================================================ */
.lb-float {
  position: fixed;
  right: 20px;
  bottom: 22px;
  display: flex;
  flex-direction: column;
  gap: 11px;
  z-index: 90;
  transition: opacity .25s ease, transform .25s ease;
}

.lb-float[data-hidden="true"] { opacity: 0; transform: translateY(12px); pointer-events: none; }

.lb-float a {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  box-shadow: 0 6px 18px -6px rgba(15, 15, 46, .55);
  transition: transform .2s ease;
}

.lb-float a:hover { transform: scale(1.07); }
.lb-float svg { width: 24px; height: 24px; }
.lb-float__ms { background: #0084FF; }
.lb-float__zl { background: #0068FF; font-weight: 700; font-size: 13px; }

/* ============================================================
 * Responsive — frame mobile Figma rộng 440px
 * ============================================================ */
@media (max-width: 1023px) {
  .lb-courses,
  .lb-docs { grid-template-columns: repeat(2, 1fr); }
  .lb-news,
  .lb-comm,
  .lb-contact { grid-template-columns: 1fr; }
  .lb-units { grid-auto-columns: 78%; }
  .lb-stats { grid-template-columns: repeat(2, 1fr); row-gap: 26px; }

  /*
   * Section "Giảng viên tâm huyết" ở khổ điện thoại — Figma frame 440 x 1167.
   *
   * Figma xếp: nhãn → tiêu đề → mô tả → liên kết → SỐ LIỆU → MŨI TÊN → thẻ.
   * Trên máy tính mũi tên nằm cùng hàng với liên kết trong cột phải, nhưng ở
   * điện thoại nó phải rơi xuống DƯỚI khối số liệu và canh phải.
   *
   * Trở ngại: .lb-arrows nằm sâu hai cấp trong .lb-head, còn .lb-stats là anh em
   * của .lb-head — order của flexbox chỉ sắp được các phần tử CÙNG một cha.
   * display:contents xoá hộp của ba lớp bọc trung gian, đưa mọi thứ lên cùng một
   * cấp với .lb-stats, lúc đó order mới có tác dụng.
   *
   * Chỉ áp trong media query này; ở khổ máy tính ba lớp bọc vẫn giữ nguyên vai
   * trò bố cục của chúng.
   */
  [data-section="03-giangvien"] .lb-container {
    display: flex;
    flex-direction: column;
  }

  [data-section="03-giangvien"] .lb-head,
  [data-section="03-giangvien"] .lb-head__main,
  [data-section="03-giangvien"] .lb-head__aside,
  [data-section="03-giangvien"] .lb-head__actions { display: contents; }

  [data-section="03-giangvien"] .lb-eyebrow      { order: 1; }
  [data-section="03-giangvien"] .lb-h2           { order: 2; }
  [data-section="03-giangvien"] .lb-sub          { order: 3; margin-bottom: 18px; }
  [data-section="03-giangvien"] .lb-course__more { order: 4; align-self: flex-start; }
  [data-section="03-giangvien"] .lb-stats        { order: 5; }
  [data-section="03-giangvien"] .lb-arrows       { order: 6; align-self: flex-end; margin-bottom: 22px; }
  /*
   * Xoa hop cua vo o kho dien thoai.
   *
   * .lb-gv-carousel sinh ra de dinh vi mui ten o kho may tinh. O day no phai
   * bien mat ve mat bo cuc, khong thi .lb-arrows va .lb-track bi khoa trong
   * cung mot hop va bo order 1..8 khong tach duoc chung ra hai cho.
   */
  [data-section="03-giangvien"] .lb-gv-carousel { display: contents; }

  [data-section="03-giangvien"] .lb-track        { order: 7; }

  /*
   * Nut "Xem tham" phai co order, khong duoc de mac dinh.
   *
   * .lb-container o kho nay la flex-column voi order gan tay 1..7. Phan tu nao
   * khong khai order thi mac dinh 0 — tuc DUNG TRUOC tat ca. Nut them sau nen
   * roi thang len dau section, nam tren ca nhan "Giang vien tam huyet".
   *
   * Bay la: o kho may tinh .lb-container van la block nen order khong co tac
   * dung, moi thu dung cho — loi chi lo ra duoi 1024px.
   */
  [data-section="03-giangvien"] .lb-more         { order: 8; }

  /*
   * Thẻ giảng viên giữ nguyên bề rộng 283px của Figma ở khổ điện thoại.
   *
   * Công thức chia đôi khung cho 4 thẻ chỉ đúng ở khổ máy tính, nơi bốn thẻ phải
   * vừa khít một hàng. Áp nó ở khổ 440px thì mỗi thẻ còn ~85px — ảnh chân dung
   * co thành một vệt, không đọc được gì. Figma cho cuộn ngang khoảng 1,3 thẻ với
   * bề rộng giữ nguyên.
   */
  .lb-track { grid-auto-columns: var(--lb-card-teacher-w); }
  [data-section="03-giangvien"] .lb-empty        { order: 7; }
}

@media (max-width: 767px) {
  .lb-section { padding-block: 56px; }
  .lb-hero { padding-block: 62px 66px; }

  .lb-h2 { font-size: var(--lb-serif-h3); }
  /*
   * Chữ tụt xuống h3 (39px) nên phải trả line-height về tỷ lệ. Giữ nguyên 72px
   * của Figma ở đây sẽ thành tỷ lệ 1,85 — dòng rời rạc hẳn. 1.18 là đúng tỷ lệ
   * 72/61.04 mà Figma dùng ở desktop.
   */
  .lb-hero__title { font-size: var(--lb-serif-h3); line-height: 1.18; }
  .lb-contact__title { font-size: var(--lb-serif-h3); }

  /* Cặp select xếp dọc, bỏ viên bo tròn */
  /*
   * O kho dien thoai: o chon thu nhat chiem tron mot hang, o thu hai dung
   * chung hang voi nut do ben phai.
   *
   * Dung GRID chu khong phai flex-column: flex-column xep ba khoi chong len
   * nhau, nut do thanh mot thanh dai chiem tron be ngang — dung cai anh nguoi
   * dung gui kem va bao la sai.
   */
  .lb-finder {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    column-gap: 8px;
    border-radius: var(--lb-radius-md);
    padding: 4px 6px;
  }

  /*
   * Gach ngan dat o DAY chu khong phai border-top cua o thu hai.
   *
   * O thu hai chi nam o cot 1, nen border-top cua no dut ngang truoc nut do.
   * O thu nhat trai het hai cot nen border-bottom cua no chay tron be ngang
   * the — dung nhu thiet ke.
   */
  .lb-finder__field:first-of-type {
    grid-column: 1 / -1;
    border-bottom: 1px solid var(--lb-n1);
  }

  .lb-finder__field + .lb-finder__field { border-left: 0; border-top: 0; }

  .lb-finder__go {
    grid-column: 2;
    align-self: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    margin: 0;
  }

  /*
   * Chua chon du hai ve: nut VAN HIEN, lam mo y het kho may tinh.
   *
   * .lb-finder__go[disabled]{opacity:.35} khai o pham vi chung nen kho dien
   * thoai tu thua huong — khong khai lai mau o day, de sau nay doi mau nut chi
   * phai sua MOT cho.
   *
   * Ban truoc tung de display:none cho trang thai nay. Bo di: nut bien mat roi
   * hien ra lam ca khoi nhay mot nhip, va nguoi dung khong biet co nut o do cho
   * toi khi chon xong ca hai ve.
   */

  .lb-finder__field::after { bottom: 16px; }

  /*
   * Nut duoi luoi (Xem them, Xem tat ca chuong trinh...) chay het be ngang
   * o kho dien thoai.
   *
   * O kho may tinh nut om sat chu va can giua; o be ngang 430px thi mot nut
   * 134px lot thom giua khoang trong, khong con la diem nhan ket section.
   *
   * Dat o .lb-more chu khong phai .lb-btn: cac nut khac (Dang ky trong the su
   * kien, Kham pha trong the don vi) van phai om sat chu.
   */
  .lb-more .lb-btn {
    width: 100%;
    justify-content: center;
  }

  .lb-courses,
  .lb-docs { grid-template-columns: 1fr; }

  /* ---------------------------------------------------------------
   * Tin bài mới — khổ điện thoại
   *
   * Thứ tự theo ảnh mẫu: nhãn + tiêu đề -> thẻ lớn -> ba thẻ nhỏ -> nút
   * "Xem tất cả" chạy hết bề ngang ở cuối.
   *
   * Bản trước phải dùng display:contents + order vì nút nằm trong hàng tiêu
   * đề. Nay nút đã là .lb-more ở cuối section nên thứ tự DOM vốn đã đúng —
   * bỏ hết mấy dòng đó đi, và .lb-more có sẵn quy tắc chạy hết bề ngang.
   *
   * Ảnh mẫu KHÔNG có dải chip ở khổ điện thoại. Đây là bỏ bớt chức năng chứ
   * không chỉ là giấu cho gọn: người đọc mất đường lọc theo chuyên mục. Giữ
   * đúng thiết kế vì đó là yêu cầu; muốn có lại thì làm nút tròn như section
   * Khóa học.
   * ------------------------------------------------------------- */
  [data-section="07-tinbai"] .lb-head { margin-bottom: 20px; }
  [data-section="07-tinbai"] .lb-head__aside { display: none; }

  /* ---------------------------------------------------------------
   * Khóa học tiêu biểu — khổ điện thoại
   *
   * Figma mobile: hàng tiêu đề có chữ bên trái và HAI NÚT TRÒN bên phải
   * (lọc + tìm); dải chip ẩn đi, chỉ bung ra khi bấm nút lọc; thẻ khoá học
   * cuộn NGANG chứ không xếp dọc một cột.
   *
   * .lb-tabs nhận display:contents để .lb-tabs__list và .lb-tabs__ctrl lên
   * cùng cấp với .lb-head — order/grid chỉ sắp được các phần tử cùng một cha.
   * Cùng thủ thuật đã dùng ở section Giảng viên.
   * ------------------------------------------------------------- */
  [data-section="04-khoahoc"] .lb-container {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    column-gap: 12px;
    row-gap: 18px;
  }

  [data-section="04-khoahoc"] .lb-tabs { display: contents; }

  [data-section="04-khoahoc"] .lb-head {
    grid-column: 1;
    grid-row: 1;
    margin-bottom: 0;
  }

  [data-section="04-khoahoc"] .lb-tabs__ctrl {
    grid-column: 2;
    grid-row: 1;
  }

  /* Dải chip: hàng riêng, chỉ hiện khi nút lọc đang bật. */
  [data-section="04-khoahoc"] .lb-tabs__list {
    grid-column: 1 / -1;
    display: none;
  }

  [data-section="04-khoahoc"] .lb-tabs[data-open="true"] .lb-tabs__list {
    display: flex;
  }

  [data-section="04-khoahoc"] .lb-courses,
  [data-section="04-khoahoc"] .lb-more { grid-column: 1 / -1; }

  .lb-tabs__toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    flex: 0 0 auto;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .3);
    background: rgba(255, 255, 255, .16);
    color: var(--lb-white);
    cursor: pointer;
    padding: 0;
  }

  .lb-tabs__toggle svg { width: 18px; height: 18px; }

  /*
   * Thanh tim: HANG RIENG chay het be ngang, an cho toi khi bam nut tron.
   *
   * Ban truoc cho chinh .lb-search phinh tu 44px ra 240px ngay tai cot phai
   * cua hang tieu de. Hong: cot do la auto trong luoi "1fr auto", ma 1fr co san
   * min-content cua tieu de (282px), nen cot phai khong no qua ~74px. Do duoc:
   * hop van 44px trong khi icon nhay ra x=350 con hop bat dau o x=372 — icon
   * va input nam NGOAI khung bo tron.
   *
   * Cho no mot hang rieng thi khong phai tranh cho voi tieu de nua, va hanh xu
   * giong het dai chip — hai nut tron, hai hang bung ra, nhat quan.
   */
  [data-section="04-khoahoc"] .lb-search {
    grid-column: 1 / -1;
    display: none;
    width: 100%;
    min-width: 0;
  }

  [data-section="04-khoahoc"] .lb-tabs[data-search="true"] .lb-search {
    display: flex;
  }

  [data-section="04-khoahoc"] .lb-tabs__ctrl {
    display: flex;
  }

  /*
   * Thẻ cuộn ngang ~1,3 thẻ một khung.
   *
   * Đè grid-template-columns:1fr của rule chung phía trên — selector này
   * (0,2,0) thắng (0,1,0) nên không cần !important.
   */
  [data-section="04-khoahoc"] .lb-courses {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 78%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    padding-bottom: 4px;
  }

  [data-section="04-khoahoc"] .lb-courses::-webkit-scrollbar { display: none; }
  [data-section="04-khoahoc"] .lb-courses > * { scroll-snap-align: start; }
  .lb-units { grid-auto-columns: 88%; }

  /* Màn hẹp: ô tìm kiếm xuống hàng riêng, chip chuyển thành cuộn ngang. */
  .lb-tabs {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .lb-tabs__list {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: 4px;
  }
  .lb-tabs__list::-webkit-scrollbar { display: none; }
  .lb-search { width: 100%; }

  .lb-event { grid-template-columns: 60px 1fr; row-gap: 12px; }
  .lb-event__cta { grid-column: 2; }

  .lb-post--sm {
    grid-template-columns: 116px 1fr;
    min-height: 0;
  }

  .lb-post--sm .lb-post__body { padding: 14px 16px 14px 0; }
  .lb-post--big .lb-post__body { padding: 14px 16px 16px; }
  .lb-quote { padding: 26px 22px; }

  /*
   * Màn hẹp: trả mũi tên về dòng riêng. Thẻ chỉ rộng ~400px, giữ 112px chừa
   * chỗ cho mũi tên là tên người nói bị ép xuống dòng xấu.
   */
  .lb-quote__who { padding-right: 0; }
  .lb-quote__nav { position: static; margin-top: 20px; }
  .lb-mosaic { grid-template-rows: repeat(2, 128px); gap: 12px; }
  .lb-form { padding: 22px 20px; }
  .lb-form__row { grid-template-columns: 1fr; }
  .lb-head { gap: 20px; }
  .lb-stats { gap: 18px; margin: 28px 0 26px; }
}

@media (prefers-reduced-motion: reduce) {
  &.lb-home *,
}


/* ============================================================
 * Nút gửi của Contact Form 7 trong section Liên hệ
 *
 * Avada tự áp màu nút của Global Options (#EE4036) lên .wpcf7-submit, đè mất
 * .lb-btn--onred. Figma vẽ nút NỀN TRẮNG, CHỮ ĐỎ, chạy hết chiều rộng form.
 * Avada dùng .wpcf7-form input[type="submit"]:not(.fusion-button-span-yes)
 * (đặc hiệu 0,3,1) để ép width:auto. Selector ở đây là 0,4,1 nên thắng được
 * mà vẫn không phải dùng !important.
 * ============================================================ */
&.lb-home .lb-form input.wpcf7-submit[type="submit"] {
  width: 100%;
  justify-content: center;
  background: var(--lb-white);
  border-color: var(--lb-white);
  color: var(--lb-group-deep);
  font-weight: var(--lb-w-semibold);
}

&.lb-home .lb-form input.wpcf7-submit[type="submit"]:hover {
  background: var(--lb-bg-alt);
  border-color: var(--lb-bg-alt);
  color: var(--lb-group-deep);
}

/* Chú thích dưới nút: link Chính sách Bảo mật gạch chân như Figma */
&.lb-home .lb-form__note a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ============================================================
 * Trang Khám phá — Figma frame `Khám phá` (1600 x 4578)
 *
 * Dùng lại .lb-course / .lb-courses của section "Khóa học tiêu biểu": cùng một
 * loại thẻ, không dựng bộ thứ hai để rồi hai bên lệch nhau khi sửa.
 * ============================================================ */
.lb-explore__hero {
  background: var(--lb-grad-hero);
  padding-block: 64px 56px;
  text-align: center;
}

/* Số đo lấy thẳng từ Figma (chọn layer, đọc panel Properties):
 * tiêu đề Source Serif 4 / 800 / 61.04px / line-height 72px;
 * mô tả rộng 789px, weight 500. */
.lb-explore__title {
  font-family: var(--lb-font-serif);
  font-size: var(--lb-serif-h1);
  font-weight: var(--lb-w-extrabold);
  line-height: 72px;
  margin: 0 0 16px;
}

/* #FF3251 chứ KHÔNG phải #D20F12. Lấy mẫu điểm ảnh trên bản Figma: nét chữ
 * "Khám phá" là #FF3251 (1213 điểm), trong khi web đang ra #D20F12. */
.lb-explore__title em { font-style: normal; color: var(--lb-group); }

.lb-explore__sub {
  font-size: var(--lb-f-base);
  font-weight: var(--lb-w-medium);
  color: var(--lb-n8);
  max-width: 790px;
  margin: 0 auto 34px;
}

/* Hộp lọc: thẻ trắng nổi trên nền gradient, giống Figma. */
.lb-explore__filter {
  max-width: 745px;
  margin-inline: auto;
  padding: 22px 26px 24px;
  background: var(--lb-white);
  border-radius: var(--lb-radius-md);
  box-shadow: 0 18px 44px -24px rgba(15, 15, 46, .28);
  text-align: left;
}

.lb-explore__filter-title {
  margin: 0 0 22px;
  text-align: center;
  font-family: var(--lb-font-serif);
  font-size: var(--lb-serif-h5);
  font-weight: var(--lb-w-semibold);
  color: var(--lb-nature);
}

.lb-explore__filter-row {
  display: flex;
  align-items: flex-end;
  gap: 14px;
  flex-wrap: wrap;
}

.lb-explore__field {
  flex: 1 1 220px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 0 4px;
}

/* Vạch ngăn dọc giữa hai ô, đúng như Figma. */
.lb-explore__field + .lb-explore__field {
  border-left: 1px solid var(--lb-n1);
  padding-left: 28px;
}

.lb-explore__field > span {
  font-size: var(--lb-sans-xs);
  color: var(--lb-n5);
}

.lb-explore .lb-explore__field select {
  width: 100%;
  font: inherit;
  font-size: var(--lb-f-base);
  font-weight: var(--lb-w-semibold);
  color: var(--lb-nature);
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 2px 22px 2px 0;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  /* Mũi tên xổ tự vẽ, vì appearance:none bỏ mũi tên mặc định của trình duyệt. */
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231B1B38' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right center;
  background-size: 15px 15px;
}

.lb-explore .lb-explore__field select:focus-visible { outline: 2px solid var(--lb-group); outline-offset: 3px; }

.lb-explore__reset {
  margin: 14px 0 0;
  text-align: center;
  font-size: var(--lb-sans-xs);
}

.lb-explore__reset a { color: var(--lb-n5); }

/* Nhóm theo đơn vị thành viên */
.lb-explore__group + .lb-explore__group { margin-top: 54px; }

.lb-explore__group-head {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 22px;
}

.lb-explore__group-logo { flex: 0 0 auto; }

.lb-explore__group-logo img {
  width: 44px;
  height: 44px;
  object-fit: contain;
  display: block;
}

.lb-explore__group-name {
  font-family: var(--lb-font-serif);
  font-size: var(--lb-serif-h5);
  font-weight: var(--lb-w-bold);
  margin: 0 0 4px;
}

.lb-explore__group-desc {
  margin: 0;
  font-size: var(--lb-sans-sm);
  color: var(--lb-n5);
  max-width: 70ch;
}

@media (max-width: 767px) {
  .lb-explore__hero { padding-block: 40px 36px; }
  .lb-explore__title { font-size: var(--lb-serif-h3); }
  .lb-explore__filter { padding: 18px 16px 20px; }
  .lb-explore__filter-row { flex-direction: column; align-items: stretch; }
}

/* Thẻ đơn vị trên mobile: bỏ tỉ lệ cố định, ảnh nằm dưới khối chữ. */
@media (max-width: 767px) {
  .lb-unit {
    aspect-ratio: auto;
    padding: 26px 22px 0;
  }

  .lb-unit--photo .lb-unit__main { width: 100%; }

  .lb-unit__photo {
    position: static;
    width: 100%;
    margin-top: 14px;
  }

  .lb-unit__logo { height: 38px; }
}


/* ============================================================
 * Trang Khám phá — khối đơn vị và thẻ khoá học
 * Figma frame `Khám phá`: mỗi khối đơn vị có nền riêng (LIM-bg #FDFBF7),
 * thẻ 3 cột với ảnh + chip đè, và chân thẻ là giá HOẶC hình thức học.
 * ============================================================ */
.lb-explore__group { background: var(--lb-unit-bg, #FDFBF7); }

.lb-explore__list-eyebrow {
  font-family: var(--lb-font-serif);
  font-size: var(--lb-serif-h3);
  font-weight: var(--lb-w-bold);
  color: var(--lb-group);
  text-align: center;
  margin: 0;
}

.lb-explore__list-title {
  font-family: var(--lb-font-serif);
  font-size: var(--lb-serif-h2);
  font-weight: var(--lb-w-bold);
  text-align: center;
  margin: 0 0 46px;
}

.lb-explore__filter-actions {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin-top: 18px;
  flex-wrap: wrap;
}

/* --- Đầu mỗi khối đơn vị --- */
/* Số đo đọc thẳng từ Figma (Frame 353 > Frame 354 / Frame 355):
 * biểu tượng 90x71, khoảng cách 9px, tên Google Sans Flex 500 / 27.65px,
 * mô tả Google Sans Flex 500 / 19.2px. */
/* Khoảng cách 20px là khoảng trống NHÌN THẤY giữa hình logo và chữ, đo bằng
 * pixel trên bản Figma ở tỉ lệ 1:1. Con số 9px trước đó là khoảng cách giữa hai
 * KHUNG — sai, vì hình trong khung Figma không lấp đầy khung. */
.lb-explore__group-head {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 26px;
}

/* File biểu tượng gốc có viền trong suốt 90px mỗi cạnh — hình thật chỉ chiếm 53%
 * chiều cao khung, nên đặt khung 71px thì mắt chỉ thấy 38px, bé hơn nửa Figma.
 * Đã thay bằng bản đã cắt viền, giờ chiều cao khung = chiều cao hình. */
/* 55px là chiều cao hình logo NHÌN THẤY trong Figma (đo được 76x55, tỉ lệ 1.38;
 * file đã cắt viền có tỉ lệ 1.42 nên ra 78x55). Khung Figma là 90x71 nhưng hình
 * bên trong chỉ chiếm 55px — lấy 71px thì logo to hơn thiết kế khoảng 30%. */
.lb-explore .lb-explore__group-logo {
  width: auto;
  height: 55px;
  max-width: 80px;
  object-fit: contain;
  object-position: left center;
  flex: 0 0 auto;
  display: block;
}

/* Tên đơn vị là chữ SANS, không phải serif — serif chỉ dùng cho tiêu đề lớn. */
.lb-explore__group-name {
  font-family: var(--lb-font-sans);
  font-size: 27.65px;
  font-weight: var(--lb-w-medium);
  margin: 0 0 5px;
  line-height: 1.1;
}

.lb-explore__group-desc {
  margin: 0;
  font-size: 19.2px;
  font-weight: var(--lb-w-medium);
  line-height: 1.25;
  color: var(--lb-n5);
}

/* Figma giới hạn khối chữ ở 789px (Frame 355), không cho tràn hết bề ngang. */
.lb-explore__group-head > div { max-width: 789px; }

/* --- Lưới 3 thẻ --- */
.lb-xcourses {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
}

.lb-xcourse {
  background: var(--lb-white);
  border: 0.71px solid rgba(27, 27, 56, .1);
  border-radius: 13px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  /* Figma cố định 346px. Dùng min-height để tiêu đề dài vẫn nở ra được thay vì
   * bị cắt — grid đã kéo các thẻ cùng hàng bằng nhau nên không lệch. */
  min-height: 346px;
}

.lb-xcourse__media {
  position: relative;
  display: block;
  aspect-ratio: 378 / 193;
  overflow: hidden;
}

.lb-explore .lb-xcourse__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Chip đè lên góc trên trái của ảnh. */
.lb-xcourse__chip {
  position: absolute;
  top: 12px;
  left: 12px;
  background: var(--lb-white);
  color: var(--lb-nature);
  font-size: var(--lb-sans-xs);
  font-weight: var(--lb-w-medium);
  padding: 4px 12px;
  border-radius: 999px;
}

.lb-xcourse__chip--warm { background: #FFD84D; }

.lb-xcourse__body { padding: 16px 18px 12px; flex: 1 1 auto; }

.lb-xcourse__title {
  font-size: var(--lb-f-base);
  font-weight: var(--lb-w-medium);
  line-height: 1.3;
  margin: 0 0 8px;
}

.lb-xcourse__desc { margin: 0; font-size: var(--lb-sans-sm); color: var(--lb-n5); line-height: 1.5; }

.lb-xcourse__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 18px 16px;
  margin-top: auto;
  border-top: 1px solid var(--lb-n1);
  font-size: var(--lb-sans-sm);
}

.lb-xcourse__form { font-weight: var(--lb-w-semibold); color: var(--lb-nature); }
.lb-xcourse__price { font-weight: var(--lb-w-semibold); color: var(--lb-group); }

.lb-xcourse__more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--lb-group);
  font-weight: var(--lb-w-medium);
  white-space: nowrap;
}

.lb-xcourse__more svg { width: 15px; height: 15px; }

@media (max-width: 1024px) {
  .lb-xcourses { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .lb-xcourses { grid-template-columns: 1fr; }
  .lb-explore__group-head { flex-direction: column; align-items: flex-start; gap: 10px; }
  .lb-explore .lb-explore__group-logo { height: 44px; }
}

.lb-explore__notice {
  margin: 0 0 14px;
  padding: 10px 14px;
  background: #FFF6E5;
  border: 1px solid #F5D68A;
  border-radius: 8px;
  font-size: var(--lb-sans-sm);
  color: var(--lb-nature);
  text-align: center;
}

/* Nút trong hộp lọc trang Khám phá: Figma bo 8px (component Buttons), cao 44. */
.lb-explore__filter-actions .lb-btn {
  border-radius: 8px;
  height: 44px;
  padding: 0 22px;
}

/* ============================================================
 * Section Đối tác — Figma căn giữa phần đầu, khác các section còn lại.
 * Đo trong Figma: eyebrow và tiêu đề cùng có tâm tại 763.5px, tức căn giữa;
 * eyebrow là Google Sans Flex 500 / 16px.
 * ============================================================ */
[data-section="10-doitac"] .lb-head {
  display: block;
  text-align: center;
}

[data-section="10-doitac"] .lb-eyebrow { font-size: var(--lb-f-base); }

/* ============================================================
 * Section 11 — Avada Form (thay Contact Form 7 từ 09/09/2026)
 *
 * Vì sao đổi: khoá reCAPTCHA của CF7 (6LezEHkp…) không có `new.libero.edu.vn`
 * trong danh sách tên miền — Google trả "Invalid domain for site key",
 * grecaptcha không nạp, CF7 gửi token rỗng nên MỌI lần gửi đều bị chấm spam.
 * Avada Form dùng khoá riêng ở Global Options (6LcU0kgs…, v2) và khoá đó nhận
 * tên miền staging.
 *
 * Avada bọc form trong khung container/row/column của Fusion Builder: row có
 * max-width tính theo site và margin âm `calc(-4% / 2)` ĐẶT INLINE, column có
 * padding ngang 1.92%. Trong thẻ form của Figma (rộng ~470px) khung đó tràn ra
 * ngoài. Margin âm là style inline nên chỉ !important mới đè được.
 * ============================================================ */
&.lb-home .lb-form--avada .fusion-fullwidth {
  padding: 0;
  margin: 0;
  background: none;
}

&.lb-home .lb-form--avada .fusion-builder-row {
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

&.lb-home .lb-form--avada .fusion-layout-column {
  --awb-spacing-left-large: 0px;
  --awb-spacing-right-large: 0px;
  --awb-spacing-left-medium: 0px;
  --awb-spacing-right-medium: 0px;
  --awb-spacing-left-small: 0px;
  --awb-spacing-right-small: 0px;
  --awb-margin-bottom-large: 0px;
  width: 100%;
  margin: 0;
}

/*
 * Lưới trường. Hai ô "Họ và tên" / "Số điện thoại" mang class `lb-half` đặt
 * trong chính shortcode của form, nên đổi bố cục không phải sửa CSS này.
 */
&.lb-home .lb-form--avada .fusion-column-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

&.lb-home .lb-form--avada .fusion-form-field { grid-column: 1 / -1; margin: 0; }
&.lb-home .lb-form--avada .fusion-form-field.lb-half { grid-column: auto; }
&.lb-home .lb-form--avada .fusion-form-label-wrapper { margin: 0; }

/*
 * Nhan. Phai dat dac hieu (0,4,1): Avada co HAI rule tranh chap —
 *   .fusion-form-form-wrapper .fusion-form-field label            (0,2,1)
 *     dat color: var(--awb-form-label-color) = #141617 va display: inline-block
 *   .fusion-form-form-wrapper .fusion-form-field.fusion-form-label-above label (0,3,1)
 *     dat margin-bottom: .65em
 * CSS goc cua Avada nap SAU home.css nen moi truong hop bang dac hieu deu thua.
 * De o (0,2,1) nhu truoc thi nhan ra mau #141617 tren nen do — gan nhu khong doc duoc.
 */
&.lb-home .lb-form--avada .fusion-form-field.fusion-form-label-above label,
&.lb-home .lb-form--avada .fusion-form-field.fusion-form-textarea-field > label {
  display: block;
  color: var(--lb-white);
  font-family: var(--lb-font-sans);
  font-size: var(--lb-sans-xs);
  line-height: 1.4;
  letter-spacing: 0;
  text-transform: none;
  margin-bottom: 5px;
  opacity: .92;
}

/* Dấu * của trường bắt buộc: Avada in bằng <abbr>, trình duyệt gạch chân chấm. */
&.lb-home .lb-form--avada .fusion-form-element-required {
  border: 0;
  text-decoration: none;
  cursor: inherit;
}

/*
 * Ô nhập — cùng số đo Figma với bộ .lb-form ở trên, nhưng viết lại theo class
 * `.fusion-form-input` để thắng CSS của Avada Form (`.fusion-form
 * .fusion-form-input`, đặc hiệu 0,2,0; selector này 0,3,0).
 */
&.lb-home .lb-form--avada .fusion-form-field .fusion-form-input {
  width: 100%;
  border: 1px solid rgba(255, 255, 255, .3);
  background: rgba(255, 255, 255, .2);
  border-radius: 8px;
  padding: 10px 13px;
  /*
   * height: auto la bat buoc. Avada dat height: var(--awb-form-input-height) = 50px
   * cho ca nhom input[type=text|email|tel|...] va ta khong khai height nen no an —
   * o nhap cao 50px thay vi cao theo padding 10px nhu Figma (~40px).
   * Va padding cua Avada (0 1em) BANG dac hieu voi ta nen no thang vi nap sau:
   * selector nay len (0,4,0) de gianh lai ca hai.
   */
  height: auto;
  line-height: 1.4;
  color: var(--lb-white);
  font-family: inherit;
  font-size: var(--lb-sans-sm);
  box-shadow: none;
}

&.lb-home .lb-form--avada .fusion-form-field .fusion-form-input::placeholder { color: rgba(255, 255, 255, .6); }

&.lb-home .lb-form--avada .fusion-form-field .fusion-form-input:focus {
  border-color: var(--lb-white);
  background: rgba(255, 255, 255, .26);
  color: var(--lb-white);
}

&.lb-home .lb-form--avada .fusion-form-field textarea.fusion-form-input {
  padding: 10px 13px;
  height: auto;
  min-height: 92px;
  resize: vertical;
}

/* Ô reCAPTCHA v2 rộng cố định 302px — canh giữa cho khỏi lệch mép thẻ. */
&.lb-home .lb-form--avada .fusion-form-recaptcha-field { display: flex; justify-content: center; }
&.lb-home .lb-form--avada .fusion-form-recaptcha-field > div { max-width: 100%; }

/*
 * Nút gửi. Figma vẽ nền trắng, chữ đỏ, chạy hết chiều rộng form. Avada áp màu
 * nút của Global Options (#EE4036) qua `.fusion-button` (0,1,0) nên selector
 * 0,3,1 dưới đây thắng mà không cần !important.
 */
&.lb-home .lb-form--avada .fusion-form-submit-field > div { text-align: initial; }

&.lb-home .lb-form--avada button.fusion-button {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 22px;
  border-radius: 999px;
  border: 1px solid var(--lb-white);
  background: var(--lb-white);
  color: var(--lb-group-deep);
  font-family: inherit;
  font-size: var(--lb-sans-sm);
  font-weight: var(--lb-w-semibold);
  margin-top: 6px;
}

&.lb-home .lb-form--avada button.fusion-button .awb-button__text,
&.lb-home .lb-form--avada button.fusion-button .fusion-button-text { color: var(--lb-group-deep); }

&.lb-home .lb-form--avada button.fusion-button:hover {
  background: var(--lb-bg-alt);
  border-color: var(--lb-bg-alt);
  color: var(--lb-group-deep);
}

&.lb-home .lb-form--avada button.fusion-button:hover .awb-button__text { color: var(--lb-group-deep); }

/* Thông báo sau khi gửi — Avada ẩn sẵn, chỉ hiện khi có kết quả. */
&.lb-home .lb-form--avada .form-submission-notices { grid-column: 1 / -1; }
&.lb-home .lb-form--avada .fusion-alert { margin: 0; }

@media (max-width: 640px) {
  &.lb-home .lb-form--avada .fusion-column-wrapper { grid-template-columns: 1fr; }
}
}