/*
 * Trang chi tiết Sản phẩm — ba loại dùng chung một bộ CSS.
 *
 * Nguồn: Figma "Libero - Redesign" > page layout > ba frame
 *   Sự kiện / Detail (1600×5555) · Khóa học / Detail (1600×4626) · Khám phá / Detail (1600×7746)
 *
 * Màu nhấn KHÔNG viết cứng: biến --lb-accent do PHP đặt trên thẻ bọc theo đơn vị
 * (dv_donvi) hoặc theo loại. Vì vậy chỉ có MỘT bộ CSS chứ không phải ba.
 *
 * Container 1200px trong khung 1600px, cột trái 762 + cột phải 344 đúng Figma.
 */

/* ================================================== Rule toàn cục, NGOÀI .lb-scope */

html { scroll-behavior: smooth; }
#dang-ky { scroll-margin-top: 24px; }
body.admin-bar #dang-ky { scroll-margin-top: 56px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/*
 * Bỏ khoảng trắng giữa khối CTA cuối trang và footer.
 *
 * Section cuối (.lb-sp-cta) nền #1B1B38, footer cũng #1B1B38, nhưng #main của
 * Avada có padding-bottom 60px trên nền trắng — thành một dải trắng kẹp giữa hai
 * khối navy.
 *
 * 60px đến từ Avada > Theme Options (main_padding bottom). Trang chủ và Khám phá
 * không bị vì mỗi trang tự khai main_padding 0/0 trong Page Options; sản phẩm là
 * CPT nên 13 bài đều ăn giá trị chung, và mỗi sản phẩm mới sau này cũng vậy.
 *
 * Sửa bằng chính biến CSS mà Avada dùng (#main{padding-bottom:var(...)}) thay vì
 * đè !important: kết quả giống hệt như đặt Page Options cho từng bài, nhưng áp
 * một lần cho mọi sản phẩm.
 */
.single-libero_san_pham #main{--main_padding-bottom:0px}

/*
 * ================================================================ .lb-scope
 *
 * Toàn bộ phần còn lại bọc trong `.lb-scope { }` bằng CSS Nesting — cùng cách
 * home.css làm từ 0.67.3. Lý do không phải để "đóng gói" mà là ĐỘ ĐẶC HIỆU:
 * home.css bọc như vậy nên mọi rule của nó là (0,2,0); rule ở đây viết trần
 * (0,1,0) thì thua dù nạp sau, và "padding 22px" của dải logo lặng lẽ bị
 * ".lb-section { padding-block: 90px }" đè lên. Bọc lại thì hai bên hoà điểm,
 * file nạp sau thắng — đúng như thứ tự nạp đã quyết trước 0.67.3.
 *
 * Rule nhắm vào CHÍNH cái vỏ (.lb-product, .lb-product--khoa-hoc …) phải viết
 * `&.lb-product`: vỏ và .lb-scope là một phần tử, `.lb-scope .lb-product`
 * (hậu duệ) không bao giờ khớp.
 */
.lb-scope {


&.lb-product {
  --lb-sp-gap: 40px;
  --lb-sp-aside: 344px;
  background: var(--lb-white);
}

&.lb-product .lb-container--narrow { max-width: 880px; }

/* ---------------------------------------------------------------- Hero */
.lb-sp-hero {
  position: relative;
  overflow: hidden;
  background: var(--lb-nature);
  color: var(--lb-white);
  padding: 72px 0 80px;
}
.lb-sp-hero__bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; opacity: .18;
  filter: blur(2px);
}
.lb-sp-hero__inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 46%;
  gap: var(--lb-sp-gap);
  align-items: center;
}
.lb-sp-hero__unit {
  display: inline-block; margin: 0 0 14px;
  padding: 7px 16px; border-radius: 999px;
  background: var(--lb-accent, #8E32FF);
  font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
}
.lb-sp-hero__chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 14px; }
.lb-sp-chip {
  padding: 7px 16px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.35);
  font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
}
.lb-sp-hero__title {
  margin: 0 0 14px;
  font-family: var(--lb-font-serif);
  font-size: clamp(32px, 3.4vw, 54px); line-height: 1.12; font-weight: 700;
  color: var(--lb-white);
}
.lb-sp-hero__sub { margin: 0 0 20px; max-width: 46em; color: rgba(255,255,255,.82); }

.lb-sp-hero__meta { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 22px; }
.lb-sp-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 16px; border-radius: 999px;
  background: rgba(255,255,255,.12); font-size: 14px;
}
.lb-sp-pill svg { width: 17px; height: 17px; flex: none; }

.lb-sp-hero__stats { display: flex; flex-wrap: wrap; gap: 18px; margin: 0 0 18px; align-items: center; }
.lb-sp-stat { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; color: rgba(255,255,255,.85); }
.lb-sp-stat svg { width: 17px; height: 17px; }
.lb-sp-stat--rate b { font-size: 18px; color: #FFB400; }
.lb-sp-stars { display: inline-flex; gap: 2px; }
.lb-sp-stars i {
  width: 14px; height: 14px; background: rgba(255,255,255,.25);
  clip-path: polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);
}
.lb-sp-stars i.is-full { background: #FFB400; }
.lb-sp-stars i.is-half { background: linear-gradient(90deg, #FFB400 50%, rgba(255,255,255,.25) 50%); }

.lb-sp-hero__gv { display: flex; align-items: center; gap: 12px; margin: 0 0 22px; font-size: 14px; }
.lb-sp-hero__gv-anh { border-radius: 50%; }

.lb-sp-count { margin: 0 0 24px; }
.lb-sp-count__label { margin: 0 0 8px; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.6); }
.lb-sp-count__row { display: flex; gap: 10px; }
.lb-sp-count__box {
  min-width: 68px; padding: 10px 6px; border-radius: 10px; text-align: center;
  background: rgba(255,255,255,.12);
}
.lb-sp-count__box b {
  display: block;
  font-family: var(--lb-font-serif); font-size: 28px; line-height: 1;
}
.lb-sp-count__box i { font-style: normal; font-size: 10px; letter-spacing: .08em; color: rgba(255,255,255,.65); }

.lb-sp-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; }
.lb-sp-hero__media { position: relative; border-radius: 14px; overflow: hidden; }
.lb-sp-hero__media img { display: block; width: 100%; height: auto; }
.lb-sp-play {
  position: absolute; inset: 0; display: grid; place-items: center; color: #fff;
}
.lb-sp-play svg { width: 68px; height: 68px; filter: drop-shadow(0 4px 18px rgba(0,0,0,.4)); }

/* ------------------------------------------------------------ Logo bar */
.lb-sp-logobar { border-bottom: 1px solid var(--lb-n1); padding: 22px 0; }
.lb-sp-logobar__inner { display: flex; align-items: center; gap: 45px; flex-wrap: wrap; }
/* Figma Frame 70: 19.2px, weight 500, viết hoa, letter-spacing 0, #676673. */
/*
 * Figma: hộp chữ 320 x 24, một dòng. Ở 19.2px chữ này đo được đúng 320px, tức
 * chạm trần max-width và trình duyệt bẻ xuống hai dòng vì sai số làm tròn.
 * white-space: nowrap giữ một dòng; bỏ max-width để chữ dài hơn cũng không bị
 * cắt (hộp Figma vẽ vừa khít chữ mẫu, không phải giới hạn).
 */
.lb-sp-logobar__label { margin: 0; flex: 0 0 auto; white-space: nowrap; font-size: 19.2px; font-weight: 500;
  line-height: 24px; letter-spacing: 0; text-transform: uppercase; color: #676673; }
.lb-sp-logobar .lb-logos { gap: 0; }
.lb-sp-logobar__logos { flex: 1 1 380px; min-width: 0; }

/*
 * Figma: hàng logo (Frame 74, rộng 1677) bắt đầu sau nhãn và chạy TỚI MÉP PHẢI
 * khung 1600, bị khung cắt — không dừng ở mép khung 1200 của nội dung.
 * Kéo mép phải của khối ra tới mép viewport: khung 1200 căn giữa nên khoảng
 * từ mép khung tới mép màn hình đúng bằng 50vw - 600px.
 * Chỉ khi màn hình rộng hơn khung; hẹp hơn thì khung đã chạm mép, không kéo.
 */
@media (min-width: 1240px) {
  /* tokens.css: .lb-container đệm trong 24px dưới 1600, bỏ đệm từ 1600 trở lên. */
  .lb-sp-logobar__logos { margin-right: calc(600px - 50vw - 24px); }
}
@media (min-width: 1600px) {
  .lb-sp-logobar__logos { margin-right: calc(600px - 50vw); }
}

/* ------------------------------------------------------- Khung hai cột */
.lb-sp-main { padding: 56px 0 24px; }
/*
 * Khóa học E-learning: Figma có đường kẻ ngang 1px #1B1B38 10% (Line 17/18/19)
 * ngăn giữa các khối của cột trái — "Bạn sẽ học được gì?", "Yêu cầu trước khi
 * học", "Nội dung khóa học", "Về giảng viên". Khối cuối không có kẻ.
 */
/*
 * Khối "Bạn sẽ học được gì?" nằm trong MỘT HỘP (Figma Frame 375, 703×323):
 * nền #F8F8F8, bo 16, viền 1px #1B1B38 10%, đệm 18px, khe hai cột 20px.
 * Hộp bọc cả tiêu đề lẫn danh sách; các khối khác của cột trái không có hộp.
 */
.lb-sp-learn {
  padding: 18px;
  border-radius: 16px;
  background: var(--lb-bg-alt);
  border: 1px solid color-mix(in srgb, #1B1B38 10%, transparent);
}
.lb-sp-learn .lb-sp-check--2 { gap: 20px; }

/*
 * Kẻ ở CẠNH TRÊN của khối kế tiếp, không phải cạnh dưới khối trước. Khối
 * "Bạn sẽ học được gì?" chính là cái hộp có viền — nếu thêm padding-bottom và
 * border-bottom lên nó thì đệm hộp thành 18/18/40 và cạnh dưới hộp trùng đường kẻ.
 */
&.lb-product--khoa-hoc .lb-sp-col > .lb-sp-block + .lb-sp-block {
  padding-top: 40px;
  border-top: 1px solid color-mix(in srgb, #1B1B38 10%, transparent);
}


/*
 * Khóa học E-learning — Figma "Khóa học / Detail":
 *   hero 1600×607 bắt đầu ở 134, tức kết thúc ở 741;
 *   thẻ đăng ký bắt đầu ở 308, nghĩa là cách đỉnh hero 174 và ĐÈ LÊN hero 433px.
 * Nên hero chỉ có một cột chữ, còn cột phải được kéo lên bằng margin âm. Cột trái
 * giữ nguyên vị trí dưới hero.
 */
&.lb-product--khoa-hoc .lb-sp-hero__inner { grid-template-columns: minmax(0, 1fr); }
/* isolation: isolate — z-index của lớp phủ bên trong không được leo ra ngoài đè
   lên thẻ giá (thẻ nằm ở section sau, kéo lên bằng margin âm). */
&.lb-product--khoa-hoc .lb-sp-hero { padding: 93px 0 0; min-height: 607px; isolation: isolate; }
/* -433 là phần đè lên hero; cộng thêm 56px đệm trên của .lb-sp-main để đỉnh thẻ
   rơi đúng 174px tính từ đỉnh hero như Figma. */
&.lb-product--khoa-hoc .lb-sp-aside { margin-top: -489px; }

/*
 * ================================================= Khóa học E-learning — Figma
 *
 * Đo từng lớp trên frame `Khóa học / Detail` (1600 x 4626), ngày 15/09/2026.
 * Số bên dưới là số đọc từ bảng thuộc tính, không ước lượng bằng mắt.
 *
 * Bố cục:  cột trái 703 · khe 41 · cột phải 456  (= 1200)
 * Hero:    chip đơn vị top 93 · eyebrow 149 · tiêu đề 170 · mô tả 303
 *          · chỉ số 382 · giảng viên 447 (tính từ đỉnh hero)
 * Thẻ giá: 456 x 866, top 308 (đè hero 433px), bo 16, viền #1B1B38 10%,
 *          bóng 0 0 44 #000 10%; ảnh 456 x 320; đệm 24 (trên 22)
 */
&.lb-product--khoa-hoc {
  --lb-sp-aside: 456px;
  --lb-sp-gap: 41px;
}

/*
 * Nền hero: Figma đặt ảnh thật rồi phủ Rectangle 189 — #000 80% kèm background
 * blur 28 — nên ảnh chỉ còn là mảng màu mờ. Bản chung của .lb-sp-hero__bg (mờ
 * 18%, blur 2) để chữ trong ảnh lộ ra sau tiêu đề.
 * scale(1.08) để mép ảnh sau khi blur không lộ viền trong suốt.
 */
&.lb-product--khoa-hoc .lb-sp-hero__bg { opacity: 1; filter: blur(28px); transform: scale(1.08); }
/* Lớp phủ phải NẰM TRÊN ảnh: ::before đứng trước <img> trong thứ tự vẽ, không có
   z-index thì ảnh đè lên lớp phủ và hero sáng trắng, chữ trắng mất hút. */
&.lb-product--khoa-hoc .lb-sp-hero::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: rgba(0, 0, 0, .8);
}
&.lb-product--khoa-hoc .lb-sp-hero__inner { position: relative; z-index: 2; }

/*
 * ============================================================ Sự kiện — Figma
 *
 * Đo từng lớp trên frame `Sự kiện / Detail` (1600 x 5555), 15/09/2026.
 *
 * Bố cục:  cột trái 763 · khe 49 · cột phải 390  (= 1202)
 * Hero:    Rectangle 190 — 1600 x 702, gradient #041691 → #000A4F, blur nền 12
 *          chip 93 · tiêu đề 143 · mô tả 274 · meta 333 · nhãn đếm 427
 *          · ô đếm 450 · nút 544 (tính từ đỉnh hero); ảnh 552 x 289 ở 170, bo 16
 */
&.lb-product--su-kien {
  --lb-sp-aside: 390px;
  --lb-sp-gap: 49px;
}

&.lb-product--su-kien .lb-sp-hero {
  padding: 93px 0 98px;
  min-height: 702px;
  isolation: isolate;
  background: linear-gradient(180deg, #041691 0%, #000A4F 100%);
}
&.lb-product--su-kien .lb-sp-hero__bg { opacity: .35; filter: blur(12px); transform: scale(1.06); mix-blend-mode: luminosity; }
&.lb-product--su-kien .lb-sp-hero__inner {
  grid-template-columns: 623px 552px;
  gap: 26px;
  align-items: start;
  position: relative; z-index: 2;
}

/* Chip: 35 cao, bo 100, đệm 8/24, gap 16, nền màu 30% + viền 1px cùng màu, icon
   14, chữ 13.33 w500 giãn 2%. Màu mặc định = màu nhấn của đơn vị; chip nào khai
   màu riêng (--lb-chip từ PHP) thì dùng màu đó. */
&.lb-product--su-kien .lb-sp-hero__chips { margin: 0; gap: 16px; }
&.lb-product--su-kien .lb-sp-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 24px; border-radius: 100px;
  --lb-chip-mau: var(--lb-chip, var(--lb-accent, #213EFF));
  background: color-mix(in srgb, var(--lb-chip-mau) 30%, transparent);
  border: 1px solid var(--lb-chip-mau);
  font-size: 13.33px; line-height: 17px; font-weight: 500; letter-spacing: .02em;
}
&.lb-product--su-kien .lb-sp-chip svg { width: 14px; height: 14px; flex: none; }

&.lb-product--su-kien .lb-sp-hero__title { margin: 15px 0 0; font-size: 48.83px; line-height: 56px; }
&.lb-product--su-kien .lb-sp-hero__sub { margin: 19px 0 0; max-width: none; font-size: 16px; line-height: 24px; color: rgba(255,255,255,.9); }

/* Meta (Frame 485/466): hai hàng gap 9, chip gap 8; mỗi chip 35 cao, bo 8 (KHÔNG
   phải viên thuốc), đệm 8/16, nền trắng 10%, viền 1px trắng 20%. */
&.lb-product--su-kien .lb-sp-hero__meta { margin: 11px 0 0; gap: 9px 8px; }
&.lb-product--su-kien .lb-sp-pill {
  padding: 8px 16px; border-radius: 8px;
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2);
  font-size: 13.33px; line-height: 17px;
}
&.lb-product--su-kien .lb-sp-pill svg { width: 14px; height: 14px; }

/* Đếm ngược: nhãn 11 w500 giãn 4% trắng 60% ở 427; hàng ô ở 450 (gap 9);
   ô 68 x 66 bo 8, đệm 8/16, nền trắng 10%, viền trắng 20%; số 39.06 serif 600;
   giữa các ô là dấu ":" (Figma đặt text riêng) — vẽ bằng ::before. */
&.lb-product--su-kien .lb-sp-count { margin: 15px 0 0; }
&.lb-product--su-kien .lb-sp-count__label { margin: 0 0 9px; font-size: 11px; line-height: 14px; font-weight: 500; letter-spacing: .04em; color: rgba(255,255,255,.6); }
&.lb-product--su-kien .lb-sp-count__row { gap: 24px; }
&.lb-product--su-kien .lb-sp-count__box {
  position: relative; min-width: 68px; min-height: 66px;
  padding: 8px 16px; border-radius: 8px;
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2);
}
&.lb-product--su-kien .lb-sp-count__box + .lb-sp-count__box::before {
  content: ":"; position: absolute; left: -16px; top: 50%; transform: translate(-50%, -50%);
  font-family: var(--lb-font-serif); font-size: 24px; color: rgba(255,255,255,.6);
}
/* 66 = 8 + 40 (số) + 10 (nhãn) + 8; số và nhãn phải khai line-height cứng, không
   thì thừa hưởng 1.6 của trang và ô cao 83. */
&.lb-product--su-kien .lb-sp-count__box { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; }
&.lb-product--su-kien .lb-sp-count__box b { display: block; font-size: 39.06px; line-height: 40px; font-weight: 600; }
&.lb-product--su-kien .lb-sp-count__box i { display: block; font-size: 10px; line-height: 10px; letter-spacing: .04em; }

/* Nút: hàng ở 544 (ô đếm kết 516 → 28), cao 60, bo 8, gap 20, chữ 16 w700,
   icon–chữ 16. Nút chính 286 rộng đệm 4/24 nền #FF3251; nút phụ 201 rộng đệm
   8/24 nền trắng 10% viền trắng 40% chữ trắng — KHÔNG phải nút trắng chữ đen. */
&.lb-product--su-kien .lb-sp-hero__actions { margin: 28px 0 0; gap: 20px; }
&.lb-product--su-kien .lb-sp-hero__actions .lb-btn {
  min-height: 60px; border-radius: 8px; gap: 16px;
  font-size: 16px; font-weight: 700;
}
&.lb-product--su-kien .lb-sp-hero__actions .lb-btn svg { width: 20px; height: 20px; flex: none; }
&.lb-product--su-kien .lb-sp-hero__actions .lb-btn--solid { min-width: 286px; padding: 4px 24px; justify-content: center; }
&.lb-product--su-kien .lb-sp-hero__actions .lb-btn--ghost {
  min-width: 201px; padding: 8px 24px; justify-content: center;
  background: rgba(255,255,255,.1) !important; border-color: rgba(255,255,255,.4) !important; color: #fff !important;
}

/* Ảnh: 552 x 289, bo 16, cắt cạnh, đỉnh ở 170 (chip ở 93 → lệch 77). */
&.lb-product--su-kien .lb-sp-hero__media { margin-top: 77px; border-radius: 16px; aspect-ratio: 552 / 289; }
&.lb-product--su-kien .lb-sp-hero__media img { width: 100%; height: 100%; object-fit: cover; }

/* --- Cột trái */
&.lb-product--su-kien .lb-sp-main .lb-sp-h2 { font-size: 25px; line-height: 34px; font-weight: 500; color: #000; }
/* "Về Diễn đàn": chữ trái, hộp "Tham dự bao gồm" phải rộng 383 (Frame 477). */
&.lb-product--su-kien .lb-sp-intro { grid-template-columns: minmax(0, 1fr) 383px; gap: 28px; }
/* Diễn giả (Article): 239 x 439, bo 16, viền 0.74px #DDDAD5, ảnh 240 cao; ba thẻ gap 23. */
&.lb-product--su-kien .lb-sp-speakers { gap: 23px; }
&.lb-product--su-kien .lb-sp-spk { border-radius: 16px; border-color: #DDDAD5; }
&.lb-product--su-kien .lb-sp-spk__photo { border-radius: 16px 16px 0 0; }
&.lb-product--su-kien .lb-sp-spk__photo img { height: 240px; }
/* Lịch trình (Frame 490): thẻ nền #F8F8F8, bo 8, viền #1B1B38 10%, đệm 16, gap 7. */
&.lb-product--su-kien .lb-sp-tl__card { padding: 16px; border-radius: 8px; background: #F8F8F8; border-color: rgba(27,27,56,.1); }
&.lb-product--su-kien .lb-sp-tl__desc { font-size: 16px; line-height: 24px; color: #676673; }

/* --- Cột trái (đo 15/09/2026, đợt hai) */

/* Tiêu đề khối (h5 Figma): Source Serif 500, 25px, đen — trước 34px w700 #1B1B38. */
&.lb-product--khoa-hoc .lb-sp-main .lb-sp-h2 { font-size: 25px; line-height: 34px; font-weight: 500; color: #000; }

/* "Yêu cầu trước khi học": mục 16/22 #676673, cách nhau 8, thụt 26. */
&.lb-product--khoa-hoc .lb-sp-arrows { gap: 8px; }
&.lb-product--khoa-hoc .lb-sp-arrows li { font-size: 16px; line-height: 22px; color: #676673; }

/* Bài giảng (Frame 418): cao 49, đệm 8/16, kẻ 1px #1B1B38 10%, chữ 16/24 #676673. */
&.lb-product--khoa-hoc .lb-sp-lessons li {
  padding: 8px 16px; min-height: 49px;
  border-top-color: rgba(27, 27, 56, .1);
  font-size: 16px; line-height: 24px; color: #676673;
}
&.lb-product--khoa-hoc .lb-sp-lesson__time { font-size: 16px; color: #676673; }

/* "Học thử" (Frame 468): 75 x 32, bo 8, đệm 4/8, nền #FF3251 10%, chữ 16/24 w400 đỏ. */
&.lb-product--khoa-hoc .lb-sp-badge {
  padding: 4px 8px; border-radius: 8px;
  background: rgba(255, 50, 81, .1); color: #FF3251;
  font-size: 16px; line-height: 24px; font-weight: 400;
}

/* Thẻ "Tài liệu liên quan": tiêu đề Source Serif 700 20px đen ở (25,25);
   tên tài liệu Source Serif 400 16px đen; ảnh 100 x 90 bo 8 (đã đúng). */
&.lb-product--khoa-hoc .lb-sp-docs .lb-sp-card__title { padding: 25px 25px 12px; font-size: 20px; line-height: 27px; color: #000; }
&.lb-product--khoa-hoc .lb-sp-doc b { font-size: 16px; font-weight: 400; color: #000; }

/* --- Hero: cột chữ rộng 623 (tiêu đề) — không tràn xuống dưới thẻ giá */
&.lb-product--khoa-hoc .lb-sp-hero__text { max-width: 623px; }

/* Chip đơn vị: 341 x 35, bo 100, đệm 8/24, nền #8E32FF 30% + viền 1px #8E32FF,
   chữ 13.33 w500 giãn 2% in hoa. Trước đây nền đặc, 12px w600, đệm 7/16. */
&.lb-product--khoa-hoc .lb-sp-hero__unit {
  margin: 0;
  padding: 8px 24px;
  background: color-mix(in srgb, var(--lb-accent, #8E32FF) 30%, transparent);
  border: 1px solid var(--lb-accent, #8E32FF);
  font-size: 13.33px; line-height: 17px; font-weight: 500; letter-spacing: .02em;
}

/* Eyebrow "KHÓA HỌC VIDEO E-LEARNING · LIBEROGO": Figma là CHỮ TRẦN 13.33 w500
   giãn 2%, trắng — không phải chip có viền như ở Khám phá / Detail. */
&.lb-product--khoa-hoc .lb-sp-hero__chips { margin: 21px 0 0; gap: 16px; }
&.lb-product--khoa-hoc .lb-sp-chip {
  padding: 0; border: 0; border-radius: 0;
  font-size: 13.33px; line-height: 17px; font-weight: 500; letter-spacing: .02em;
}

/* Tiêu đề: Source Serif 4 700, 48.83 / 56 (h2), cách eyebrow 4px. */
&.lb-product--khoa-hoc .lb-sp-hero__title { margin: 4px 0 0; font-size: 48.83px; line-height: 56px; }

/* Mô tả: 601 rộng, 16/24, trắng 90%, cách tiêu đề 21. */
&.lb-product--khoa-hoc .lb-sp-hero__sub { margin: 21px 0 0; max-width: 601px; font-size: 16px; line-height: 24px; color: rgba(255,255,255,.9); }

/* Hàng chỉ số: 13.33 w400 trắng 80%, gap 22, cách mô tả 7. */
&.lb-product--khoa-hoc .lb-sp-hero__stats { margin: 7px 0 0; gap: 22px; }
&.lb-product--khoa-hoc .lb-sp-stat { font-size: 13.33px; line-height: 17px; color: rgba(255,255,255,.8); }
&.lb-product--khoa-hoc .lb-sp-stat--rate b { font-size: 13.33px; }

/* Dòng giảng viên: cách hàng chỉ số 42, chữ 13.33, ảnh 56 tròn, khe 13. */
&.lb-product--khoa-hoc .lb-sp-hero__gv { margin: 48px 0 0; gap: 13px; font-size: 13.33px; line-height: 24px; }
&.lb-product--khoa-hoc .lb-sp-hero__gv-anh { width: 56px; height: 56px; object-fit: cover; }

/* --- Thẻ giá */
&.lb-product--khoa-hoc .lb-sp-card {
  border-radius: 16px;
  border-color: rgba(27, 27, 56, .1);
  box-shadow: 0 0 44px rgba(0, 0, 0, .1);
}
&.lb-product--khoa-hoc .lb-sp-mua__media { aspect-ratio: 456 / 320; overflow: hidden; }
&.lb-product--khoa-hoc .lb-sp-mua__media img { width: 100%; height: 100%; object-fit: cover; }
&.lb-product--khoa-hoc .lb-sp-mua__body { padding: 22px 24px 28px; }

/* Giá 39.06 serif 600 đen; nhãn giảm 16 w700 #FF3251 trên #FDF7F9, đệm 8/16;
   giá gốc 16 gạch ngang #1B1B38 50%. */
&.lb-product--khoa-hoc .lb-sp-price { gap: 12px; justify-content: space-between; }
&.lb-product--khoa-hoc .lb-sp-price b { font-size: 39.06px; line-height: 54px; font-weight: 600; color: #000; }
&.lb-product--khoa-hoc .lb-sp-off {
  padding: 8px 16px; border-radius: 100px;
  background: #FDF7F9; color: #FF3251;
  font-size: 16px; line-height: 20px; font-weight: 700;
}
&.lb-product--khoa-hoc .lb-sp-price-old { margin: 0; font-size: 16px; line-height: 20px; color: rgba(27, 27, 56, .5); }

/* Nút mua: 408 x 60, bo 8, 16 w700, icon–chữ 16; đỉnh nút cách giá gốc 22. */
&.lb-product--khoa-hoc .lb-sp-buy { margin: 22px 0 0; gap: 16px; }
&.lb-product--khoa-hoc .lb-sp-buy svg { width: 20px; height: 20px; flex: none; }

/* Dòng cam kết 11.11px #676673, căn giữa, cách nút 12. */
&.lb-product--khoa-hoc .lb-sp-guarantee { margin: 12px 0 0; font-size: 11.11px; line-height: 14px; color: #676673; }

/* "Khóa học này bao gồm:" — Figma E-learning KHÔNG có hộp nền xanh (hộp đó là của
   Sự kiện / Frame 477). Tiêu đề 16 w700 đen; mục 16/24 #676673, gap 6. */
/* Figma: tiêu đề khối ở 564, dòng cam kết kết ở ~524 → cách 40. */
&.lb-product--khoa-hoc .lb-sp-inc { margin: 40px 0 0; padding: 0; border-radius: 0; background: none; }
&.lb-product--khoa-hoc .lb-sp-inc__title { margin: 0 0 6px; font-size: 16px; line-height: 20px; color: #000; }
&.lb-product--khoa-hoc .lb-sp-inc ul { gap: 6px; font-size: 16px; }
/* Figma Frame 465: 5 mục cao 184 với gap 6 → mỗi mục 32 (icon 18 + đệm). */
&.lb-product--khoa-hoc .lb-sp-inc li { padding: 0; min-height: 32px; line-height: 24px; }

/* Hai nút Chia sẻ / Gửi tặng: 198 x 48, khe 18, kẻ 1px phía trên cách 16. */
&.lb-product--khoa-hoc .lb-sp-card .lb-sp-ve__foot {
  /* Figma: danh sách kết ở 774, hàng nút bắt đầu 790 → 16px cho cả khe lẫn đường kẻ. */
  gap: 18px; margin: 8px 0 0; padding: 7px 0 0;
  border-top: 1px solid rgba(27, 27, 56, .1);
}


.lb-sp-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--lb-sp-aside);
  gap: var(--lb-sp-gap);
  align-items: start;
}
.lb-sp-aside { position: sticky; top: 96px; display: grid; gap: 18px; }
.lb-sp-block { margin: 0 0 44px; }

/*
 * Figma (đo tại "Khám phá / Detail" > Frame 423, chữ "LỊCH SỬ"): Google Sans Flex
 * 600, 16px, line-height 100%, letter-spacing 5%, viết hoa, #FF3251.
 * Trước đây để 12px/700/12% nên mọi eyebrow của cả ba trang đều nhỏ hơn Figma.
 */
.lb-sp-eyebrow {
  margin: 0 0 6px; font-size: 16px; font-weight: 600; line-height: 1;
  letter-spacing: .05em; text-transform: uppercase; color: var(--lb-group);
}
.lb-sp-eyebrow--center, .lb-sp-h2--center, .lb-sp-sub--center { text-align: center; }
.lb-sp-h2 {
  margin: 0 0 10px;
  font-family: var(--lb-font-serif);
  font-size: clamp(24px, 2.2vw, 34px); line-height: 1.22; font-weight: 700;
  color: var(--lb-nature);
}
.lb-sp-sub { margin: 0 0 20px; color: var(--lb-n5); }

.lb-sp-prose > *:first-child { margin-top: 0; }
.lb-sp-prose > *:last-child { margin-bottom: 0; }
.lb-sp-prose img { border-radius: 10px; }
.lb-sp-prose a { color: var(--lb-accent, #8E32FF); }

/* Danh sách có dấu tick / gạch chéo / mũi tên */
.lb-sp-check, .lb-sp-x, .lb-sp-arrows { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.lb-sp-check--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 28px; }
.lb-sp-check li, .lb-sp-x li, .lb-sp-arrows li { position: relative; padding-left: 26px; }
.lb-sp-check li::before {
  content: ""; position: absolute; left: 0; top: .35em;
  width: 15px; height: 15px; border-radius: 50%;
  background: var(--lb-accent, #8E32FF);
  clip-path: polygon(14% 46%, 0 60%, 40% 100%, 100% 22%, 86% 8%, 40% 72%);
}
.lb-sp-x li::before { content: "✕"; position: absolute; left: 2px; top: 0; color: var(--lb-n5); }
.lb-sp-arrows li::before { content: "›"; position: absolute; left: 6px; top: -2px; font-size: 18px; color: var(--lb-n5); }

.lb-sp-intro { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,.86fr); gap: 28px; }
/* Figma Frame 477: radius 8, padding 16, nền màu nhấn 8% và VIỀN 1px màu nhấn 12%. */
.lb-sp-note {
  padding: 16px; border-radius: 8px;
  background: color-mix(in srgb, var(--lb-accent, #8E32FF) 8%, #fff);
  border: 1px solid color-mix(in srgb, var(--lb-accent, #8E32FF) 12%, transparent);
}
/* Figma: tiêu đề 16px WEIGHT 500 (không phải 700). */
.lb-sp-note__title { margin: 0 0 12px; font-weight: 500; color: var(--lb-accent, #8E32FF); }

/*
 * Các ý trong hộp: Figma 13.33px, màu body #676673, khe 8px, và icon là VÒNG
 * TRÒN VIỀN kèm dấu ✓ — không phải khối tròn đặc như danh sách ✓ dùng ở nơi
 * khác. Khai riêng trong .lb-sp-note để không đổi các khối kia.
 */
.lb-sp-note .lb-sp-check { gap: 8px; }
.lb-sp-note .lb-sp-check li {
  padding-left: 28px; font-size: 13.33px; line-height: 1.35; color: #676673;
}
.lb-sp-note .lb-sp-check li::before {
  content: ""; left: 0; top: .05em;
  width: 20px; height: 20px; border-radius: 50%;
  background: none; clip-path: none;
  border: 1.5px solid var(--lb-accent, #8E32FF);
}
.lb-sp-note .lb-sp-check li::after {
  content: ""; position: absolute; left: 6px; top: .05em;
  width: 8px; height: 20px;
  background: var(--lb-accent, #8E32FF);
  clip-path: polygon(0 45%, 0 62%, 38% 80%, 100% 30%, 100% 14%, 36% 62%);
}

/* --------------------------------------------------------- Diễn giả */
.lb-sp-speakers { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 20px; }
.lb-sp-spk { border: 1px solid var(--lb-n1); border-radius: 12px; padding: 18px; background: #fff; }
.lb-sp-spk__photo { position: relative; margin: -18px -18px 16px; border-radius: 12px 12px 0 0; overflow: hidden; }
.lb-sp-spk__photo img { display: block; width: 100%; height: 250px; object-fit: cover; }
.lb-sp-spk__photo::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 6px; background: var(--lb-group); }
.lb-sp-spk__no {
  position: absolute; left: 16px; bottom: 18px;
  width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--lb-group); color: #fff; font-size: 12px; font-weight: 700;
}
.lb-sp-spk__name { margin: 0 0 4px; font-family: var(--lb-font-serif); font-size: 19px; }
.lb-sp-spk__role { margin: 0 0 8px; font-size: 13px; color: var(--lb-group); }
.lb-sp-spk__bio { margin: 0; font-size: 13px; color: var(--lb-n8); }

/* --------------------------------------------------------- Lịch trình */
/*
 * Figma (Sự kiện/Detail): đường dọc là Line 21 — 1px màu nhấn ở 50%, KHÔNG phải
 * 2px xám. Chấm (Frame 500) tổng 13px: vành màu nhấn, ruột trắng, lõi màu nhấn.
 * Trước đây chấm 12px + viền 3px = 18px, to hơn thiết kế 5px.
 */
.lb-sp-timeline {
  list-style: none; margin: 0; padding: 0 0 0 26px; display: grid; gap: 16px;
  border-left: 1px solid color-mix(in srgb, var(--lb-accent, #8E32FF) 50%, transparent);
}
.lb-sp-tl { position: relative; }
.lb-sp-tl::before {
  content: ""; position: absolute; left: -32.5px; top: 22px;
  width: 13px; height: 13px; border-radius: 50%; box-sizing: border-box;
  border: 3px solid var(--lb-accent, #8E32FF);
  background:
    radial-gradient(circle at 50% 50%, var(--lb-accent, #8E32FF) 0 2px, #fff 2px 100%);
}
.lb-sp-tl__card { border: 1px solid var(--lb-n1); border-radius: 12px; padding: 18px 20px; }
.lb-sp-tl__time { display: flex; align-items: center; gap: 7px; margin: 0 0 6px; font-size: 13px; font-weight: 600; color: var(--lb-accent, #8E32FF); }
.lb-sp-tl__time svg { width: 15px; height: 15px; }
.lb-sp-tl__head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 6px; }
.lb-sp-tl__title { font-family: var(--lb-font-serif); font-size: 20px; font-weight: 700; }
.lb-sp-tl__desc { margin: 0; font-size: 14px; color: var(--lb-n8); }
.lb-sp-tag { padding: 4px 12px; border-radius: 999px; font-size: 12px; font-weight: 700; background: var(--lb-bg-alt); }
.lb-sp-tag--keynote { background: #E9E7FF; color: #4B2FCC; }
.lb-sp-tag--panel { background: #F3E7FF; color: #7A2FCC; }
.lb-sp-tag--qa { background: #E4F7EC; color: #1F7A46; }
.lb-sp-tag--networking { background: #EFEFF2; color: #3A3A48; }

/* ------------------------------- Accordion dùng chung: chương + FAQ */
/*
 * Cùng một component trong Figma, chỉ khác NỀN dải tiêu đề:
 *   Khóa học / Detail > Frame 416 (dải chương)  → #1B1B38 10%
 *   Khám phá / Detail > Frame 416 (câu hỏi FAQ) → #8E32FF 3% khi MỞ, trong suốt khi đóng
 * Đo lại 10/09/2026. Ghi chú cũ "nền dải chương là #FDF7F9" là ĐO NHẦM sang
 * frame FAQ — đừng khôi phục.
 *
 * Chữ tiêu đề của cả hai là Google sans flex/h6: sans 500 19.2px/100% #000,
 * KHÔNG phải serif.
 */
.lb-sp-acc { display: grid; gap: 9px; }
/* Figma Frame 418/419: radius 8, viền 1px #1B1B38 10%, hug cao 58 khi đóng. */
.lb-sp-acc__item { border: 1px solid var(--lb-n1); border-radius: 8px; background: #fff; overflow: hidden; }
.lb-sp-acc__item > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 16px; cursor: pointer; list-style: none;
  font-family: var(--lb-font-sans); font-size: 19.2px; font-weight: 500;
  line-height: 24px; color: #000;
}
.lb-sp-acc__item > summary::-webkit-details-marker { display: none; }
.lb-sp-acc__name { flex: 1 1 auto; }
.lb-sp-acc__caret { display: inline-flex; flex: none; }
.lb-sp-acc__caret svg { width: 16px; height: 16px; transition: transform .2s ease; }
.lb-sp-acc__item[open] > summary .lb-sp-acc__caret svg { transform: rotate(90deg); }
/* Figma "4 bài · 45 phút": body/p 16px/24 #676673 — không phải chữ nhỏ 13px. */
.lb-sp-acc__meta { font-family: inherit; font-size: 16px; font-weight: 400; line-height: 24px; color: #676673; }
/* Figma Frame 417: padding 8/16, chữ body 16/24 #676673. */
.lb-sp-acc__ans { margin: 0; padding: 8px 16px; color: #676673; font-size: 16px; line-height: 24px; }

/* Dải chương (Nội dung khóa học) — luôn có nền, kể cả khi đóng. */
.lb-sp-acc--chuong .lb-sp-acc__item > summary { background: rgba(27,27,56,.1); }

/*
 * FAQ — chỉ mục ĐANG MỞ mới có nền tím 3%; mục đóng nền trắng.
 * Dấu cộng xoay 45° thành dấu ✕ khi mở, đúng hai biến thể icons-line trong Figma.
 */
.lb-sp-acc--faq .lb-sp-acc__item[open] > summary { background: rgba(142,50,255,.03); }
.lb-sp-acc--faq .lb-sp-acc__item[open] { padding-bottom: 8px; }
.lb-sp-acc--faq .lb-sp-acc__caret svg { transition: transform .2s ease; }
.lb-sp-acc--faq .lb-sp-acc__item[open] > summary .lb-sp-acc__caret svg { transform: rotate(45deg); }

.lb-sp-lessons { list-style: none; margin: 0; padding: 0; }
.lb-sp-lessons li {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 18px; border-top: 1px solid var(--lb-n1); font-size: 14px;
}
.lb-sp-lessons li.is-locked { color: var(--lb-n5); }
.lb-sp-lesson__ico svg { width: 17px; height: 17px; display: block; }
.lb-sp-lesson__name { flex: 1 1 auto; min-width: 0; }
.lb-sp-lesson__time { color: var(--lb-n5); font-size: 13px; }
.lb-sp-badge { padding: 3px 10px; border-radius: 999px; background: #FFE7EB; color: var(--lb-group-deep); font-size: 11px; font-weight: 700; }

/* --------------------------------------------------------- Giảng viên */
/* Figma Frame 406: hộp radius 16, ảnh 103×103 bo tròn hẳn. */
.lb-sp-teacher { display: grid; grid-template-columns: 103px minmax(0,1fr); gap: 24px; align-items: start; }
.lb-sp-teacher--box { padding: 24px; border-radius: 16px; background: var(--lb-bg-alt); }
/* Ảnh chân dung hiếm khi vuông — không ép width/height thì hình bo ra bầu dục. */
/* aspect-ratio chứ không chỉ height: theme đặt `img { height: auto }`, và khi ảnh
   gốc không vuông thì khung bo ra bầu dục. Tỉ lệ 1/1 giữ khung vuông trong mọi
   trường hợp, object-fit cắt phần thừa. */
.lb-sp-teacher__anh { width: 103px; height: 103px; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 50%; }
.lb-sp-teacher--khong-anh { grid-template-columns: minmax(0, 1fr); }
.lb-sp-teacher__rate { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-size: 14px; color: var(--lb-n5); }
/* Figma "Về giảng viên": tên Source Serif 4 · SemiBold 600 · 31.25px · #000;
   chức danh 16px/600 màu nhấn, letter-spacing 5%. */
.lb-sp-teacher__body h3 {
  margin: 0 0 4px; font-family: var(--lb-font-serif);
  font-size: 31.25px; font-weight: 600; line-height: 1.2; color: #000;
}
.lb-sp-teacher__role { margin: 0 0 12px; color: var(--lb-accent, #8E32FF); font-weight: 600; font-size: 16px; letter-spacing: .05em; }
/* Dải bốn chỉ số của giảng viên (Figma "Về giảng viên"). */
.lb-sp-gv-stats {
  list-style: none; margin: 0 0 14px; padding: 0;
  display: flex; flex-wrap: wrap; gap: 8px 22px;
  font-size: 14px; color: var(--lb-n5);
}
.lb-sp-gv-stats li { display: flex; align-items: center; gap: 7px; }
.lb-sp-gv-stats svg { width: 17px; height: 17px; flex: none; }
.lb-sp-teacher__bio { color: var(--lb-n8); }

/* ----------------------------------------------- Khối của khóa trực tiếp */
.lb-sp-cards3 { align-items: stretch; }
.lb-sp-cards3 { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 20px; }
.lb-sp-mini { padding: 20px; border: 1px solid var(--lb-n1); border-radius: 12px; background: #fff; }
.lb-sp-mini h3 { margin: 0 0 8px; font-family: var(--lb-font-serif); font-size: 18px; }
.lb-sp-mini p { margin: 0; font-size: 14px; color: var(--lb-n8); }

.lb-sp-meta4 { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 9px; }
.lb-sp-meta4 li { display: flex; align-items: center; gap: 9px; font-size: 14px; }
.lb-sp-meta4 svg { width: 17px; height: 17px; color: var(--lb-accent, #8E32FF); flex: none; }

.lb-sp-more { position: relative; }
.lb-sp-more:not(.is-open) .lb-sp-more__body { max-height: 190px; overflow: hidden; }
.lb-sp-more:not(.is-open) .lb-sp-more__body::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 34px; height: 70px;
  background: linear-gradient(rgba(255,255,255,0), #fff);
}
.lb-sp-more__btn {
  display: block; margin: 6px auto 0; padding: 6px 14px;
  border: 0; background: none; cursor: pointer;
  font: inherit; font-weight: 600; color: var(--lb-nature);
}
.lb-sp-more__btn::after { content: " ⌄"; }
.lb-sp-more.is-open .lb-sp-more__btn::after { content: " ⌃"; }

.lb-sp-ba { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); border: 1px solid var(--lb-n1); border-radius: 12px; overflow: hidden; }
.lb-sp-ba__col { padding: 22px 24px; }
.lb-sp-ba__col + .lb-sp-ba__col { border-left: 1px solid var(--lb-n1); }
.lb-sp-ba__col--after { background: color-mix(in srgb, var(--lb-accent, #8E32FF) 6%, #fff); }
.lb-sp-ba__col h3 { display: flex; align-items: center; gap: 9px; margin: 0 0 14px; font-family: var(--lb-font-serif); font-size: 19px; }
.lb-sp-ba__ico { display: inline-flex; flex: none; }
.lb-sp-ba__ico svg { width: 21px; height: 21px; color: var(--lb-n5); }
.lb-sp-ba__col--after .lb-sp-ba__ico svg { color: var(--lb-accent, #8E32FF); }
.lb-sp-ba__col--after h3 { color: var(--lb-accent, #8E32FF); }

/* Tên phải khác .lb-sp-play (nút play video) — trùng tên thì rule
   position:absolute;inset:0 của nút kéo cả lưới này ra khỏi luồng. */
/*
 * Nội dung thực chiến (The Playbook) — Figma "Khám phá / Detail" > Frame 386:
 * lưới 2×2, khe 20/20, mỗi thẻ Frame 376 = 371×195.5, bo 16, viền 1px #1B1B38 10%,
 * KHÔNG nền. Bên trong: số 01 (Source Serif 800 39px, #1B1B38 10%) đứng CÙNG HÀNG
 * với tiêu đề (Source Serif 500 20px #000), mô tả xuống dòng dưới, cuối là viên
 * "Output:" bo tròn hoàn toàn (radius/100) nền #8E32FF 10%.
 */
.lb-sp-playbook { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 20px; }
.lb-sp-playbook__card {
  position: relative; padding: 18px 18px 25px;
  border: 1px solid var(--lb-n1); border-radius: 16px;
}
.lb-sp-playbook__head { display: flex; align-items: flex-start; gap: 13px; margin: 0 0 20px; }
.lb-sp-playbook__no {
  flex: none;
  font-family: var(--lb-font-serif); font-size: 39px; font-weight: 800;
  line-height: 54px; color: color-mix(in srgb, #1B1B38 10%, transparent);
  /* Figma: hộp số bắt đầu ở y=9 còn tiêu đề ở y=19 — số nhô lên 10px. */
  margin-top: -10px;
}
.lb-sp-playbook__card h3 {
  margin: 0; font-family: var(--lb-font-serif);
  font-size: 20px; font-weight: 500; line-height: 27px; color: #000;
}
.lb-sp-playbook__card p { margin: 0 0 6px; font-size: 16px; line-height: 24px; color: #676673; }
.lb-sp-output {
  display: inline-block; padding: 8px 16px; border-radius: 999px;
  font-size: 13.33px; font-weight: 500; line-height: 17px;
  background: color-mix(in srgb, var(--lb-accent, #8E32FF) 10%, transparent);
  color: var(--lb-accent, #8E32FF);
}

/*
 * Thời khóa biểu chi tiết — Figma "Khám phá / Detail" > Frame 405 (762 × hug 457):
 * bốn dòng cao 114. Ô tuần Frame 396 = 84×65, bo 8, nền accent 10%; số Source Serif
 * 500 31.25px, chữ TUẦN sans 500 13px ls 8%. Tiêu đề dòng là SANS (Google sans
 * flex/h6) 500 19.2px/100% #000 — không phải serif. Dòng meta sans 400 11.11px
 * #1B1B38 50%.
 */
.lb-sp-sched { border-top: 1px solid var(--lb-n1); }
.lb-sp-sched__row { display: flex; align-items: center; gap: 18px; padding: 24px 0; border-bottom: 1px solid var(--lb-n1); }
.lb-sp-week {
  flex: none; width: 84px; text-align: center; padding: 12px 0 10px; border-radius: 8px;
  background: color-mix(in srgb, var(--lb-accent, #8E32FF) 10%, #fff);
  color: var(--lb-accent, #8E32FF);
}
.lb-sp-week b { display: block; font-family: var(--lb-font-serif); font-size: 31.25px; font-weight: 500; line-height: 21px; }
/* Figma: chữ TUẦN là #1B1B38 80%, KHÔNG lấy màu nhấn như con số. */
.lb-sp-week i { display: block; margin-top: 9px; font-style: normal; font-size: 13px; font-weight: 500; line-height: 1; letter-spacing: .08em; color: var(--lb-n8); }
.lb-sp-sched__body { flex: 1 1 auto; min-width: 0; }
.lb-sp-sched__body b { display: block; font-family: var(--lb-font-sans); font-size: 19.2px; font-weight: 500; line-height: 24px; color: #000; }
.lb-sp-sched__body i { display: flex; flex-wrap: wrap; gap: 14px; font-style: normal; font-size: 11.11px; line-height: 14px; color: var(--lb-n5); margin-top: 10px; }
.lb-sp-sched__body svg { width: 15px; height: 15px; vertical-align: -2px; margin-right: 4px; }
.lb-sp-sched__btn { flex: none; }

.lb-sp-quotes { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 44px; }
/* Figma: không có gạch trái ở từng lời; chỉ một đường phân cách giữa hai cột. */
/*
 * Figma cho hai khung trích dẫn CÙNG chiều cao (135px) nên phần tên hai cột
 * thẳng hàng. Trên web chữ dài ngắn khác nhau, nên thay vì ép chiều cao cứng thì
 * cho lời trích chiếm hết chỗ trống và đẩy phần tên xuống đáy — mọi lời dài ngắn
 * ra sao thì tên vẫn thẳng hàng.
 */
.lb-sp-quote { display: flex; flex-direction: column; height: 100%; margin: 0; }
.lb-sp-quotes .lb-sp-quote blockquote { flex: 1 1 auto; }
.lb-sp-quote + .lb-sp-quote { padding-left: 44px; border-left: 1px solid var(--lb-n1); }

/*
 * Phải đủ đặc hiệu (0,2,1) và khai lại NỀN, ĐỆM, KIỂU CHỮ: Avada style thẻ
 * blockquote thành hộp nền #3E3E3E, Montserrat 16px nghiêng, padding 15px — cùng
 * độ đặc hiệu nhưng nạp sau nên thắng. Figma: Source Serif 4, Medium 500, 20px,
 * màu #676673, không nền.
 */
.lb-sp-quotes .lb-sp-quote blockquote {
  margin: 0 0 25px; padding: 0; background: none; border: 0;
  font-family: var(--lb-font-serif); font-style: normal;
  font-size: 20px; font-weight: 500; line-height: 1.35; color: #676673;
}
/* Figma: ảnh 72×72 bo tròn; tên 23px weight 500 màu đen; chức danh xám bên dưới. */
.lb-sp-quote figcaption { display: flex; align-items: center; gap: 14px; }
.lb-sp-quote figcaption img { width: 72px; height: 72px; aspect-ratio: 1 / 1; border-radius: 50%; object-fit: cover; }
.lb-sp-quote figcaption b { display: block; font-size: 23px; font-weight: 500; line-height: 1.25; color: #000; }
.lb-sp-quote figcaption i { font-style: normal; font-size: 15px; color: var(--lb-n5); }

/*
 * Tài nguyên — Figma "Khám phá / Detail" > Frame 414: dòng 730 × hug 94, bo 8,
 * viền 1px #1B1B38 10%, nền trắng, đệm 16, khe 12. Ô icon Frame 363 = 60×60,
 * bo 8, đệm 8, nền accent 10%. Tiêu đề Source Serif 500 20px/100% #000;
 * dòng phụ sans 400 16px/24 #676673.
 */
.lb-sp-res__list { display: grid; gap: 12px; }
.lb-sp-res__item {
  display: flex; align-items: center; gap: 12px;
  padding: 16px; border: 1px solid var(--lb-n1); border-radius: 8px;
  color: inherit; text-decoration: none; background: #fff;
}
.lb-sp-res__item:hover { border-color: var(--lb-accent, #8E32FF); }
.lb-sp-res__ico {
  flex: none; width: 60px; height: 60px; border-radius: 8px; display: grid; place-items: center;
  background: color-mix(in srgb, var(--lb-accent, #8E32FF) 10%, #fff);
  color: var(--lb-accent, #8E32FF);
}
.lb-sp-res__ico svg { width: 24px; height: 24px; }
.lb-sp-res__txt { flex: 1 1 auto; min-width: 0; }
.lb-sp-res__txt b { display: block; font-family: var(--lb-font-serif); font-size: 20px; font-weight: 500; line-height: 27px; color: #000; }
.lb-sp-res__txt i { font-style: normal; font-size: 16px; line-height: 24px; color: #676673; }
.lb-sp-res__go svg { width: 20px; height: 20px; }

/* ---------------------------------------------------------- Cột phải */
.lb-sp-card { border: 1px solid var(--lb-n1); border-radius: 14px; background: #fff; overflow: hidden; }
.lb-sp-card__title { margin: 0; padding: 16px 18px 10px; font-family: var(--lb-font-serif); font-size: 18px; font-weight: 700; }

.lb-sp-ve__head { padding: 22px 18px; text-align: center; color: #fff; background: linear-gradient(160deg, var(--lb-accent, #1B3FBF), color-mix(in srgb, var(--lb-accent, #1B3FBF) 70%, #000)); }
.lb-sp-ve__gia { margin: 0; font-family: var(--lb-font-serif); font-size: 30px; font-weight: 700; letter-spacing: .02em; }
.lb-sp-ve__note { margin: 4px 0 0; font-size: 13px; opacity: .85; }
.lb-sp-ve__slot { display: flex; align-items: center; justify-content: center; gap: 7px; margin: 10px 0 0; font-size: 14px; }
.lb-sp-ve__slot svg { width: 16px; height: 16px; }
.lb-sp-ve__body, .lb-sp-mua__body, .lb-sp-kg__body { padding: 18px; }

.lb-sp-kv { display: grid; grid-template-columns: 20px 1fr; gap: 4px 10px; margin: 0 0 14px; font-size: 14px; }
.lb-sp-kv svg { width: 18px; height: 18px; grid-row: span 2; color: var(--lb-n5); }
.lb-sp-kv b { font-weight: 600; }
.lb-sp-kv span { color: var(--lb-n5); }

/*
 * Nút trong thẻ cột phải — số đo Figma (Sự kiện/Detail, Frame 366):
 *   nút chính  338×60, radius 8, chữ 16px/700, khoảng cách icon–chữ 16
 *   nút phụ    164×48, radius 8, viền 1px #1B1B38 10%, chữ 16px/700 màu #676673
 * Nút chung của site bo tròn 999 và cao 45 nên phải khai đè riêng ở đây.
 */
.lb-sp-buy {
  display: flex; justify-content: center; align-items: center; gap: 16px;
  /* Figma: nút chính kết ở 433, hộp "Tham dự bao gồm" bắt đầu 450 → hở 17px. */
  width: 100%; min-height: 60px; margin: 4px 0 17px;
  border-radius: 8px; font-size: 16px; font-weight: 700;
}
.lb-sp-guarantee { margin: 0 0 14px; font-size: 12px; color: var(--lb-n5); text-align: center; }

/* Figma Frame 477 (trong thẻ): nền #F5F9FF, radius 8, padding 8, gap 3 giữa các ý,
   và MỖI Ý MỘT ICON riêng — trước đây dùng chung một dấu chấm. */
.lb-sp-inc { padding: 8px; border-radius: 8px; background: #F5F9FF; }
.lb-sp-inc__title { margin: 0 0 6px; font-weight: 700; color: var(--lb-accent, #8E32FF); font-size: 14px; }
.lb-sp-inc ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; font-size: 13px; }
.lb-sp-inc li { display: flex; align-items: center; gap: 8px; padding: 4px 8px; color: #676673; }
.lb-sp-inc li svg { width: 18px; height: 18px; flex: none; color: #676673; }

/*
 * Khe hai nút: Figma đo được 13px (nút trái kết ở 185, nút phải bắt đầu 198).
 * Khoảng hở phía trên: hộp "Tham dự bao gồm" kết ở 673, hàng nút bắt đầu 694
 * → 21px. Để 16px thì hai nút dính sát khung.
 */
/* Theme đặt margin cho <p> trong nội dung với độ đặc hiệu cao hơn nên margin-top
   bị về 0 — dùng padding và nâng đặc hiệu bằng .lb-sp-card. */
.lb-sp-card .lb-sp-ve__foot {
  display: grid; grid-template-columns: 1fr 1fr; gap: 13px;
  margin: 0; padding: 21px 0 0;
}
.lb-sp-ve__foot .lb-btn svg { width: 18px; height: 18px; flex: none; }
.lb-sp-ve__foot .lb-btn {
  /* Figma: đệm ngang 8px, gap 8. Giữ đệm 22px mặc định thì "Thêm lịch" vắt hai dòng. */
  justify-content: center; gap: 8px; padding-inline: 8px; white-space: nowrap;
  min-height: 48px; border-radius: 8px;
  border-color: color-mix(in srgb, #1B1B38 10%, transparent);
  font-size: 16px; font-weight: 700; color: #676673;
}

.lb-sp-mua__media { position: relative; }
.lb-sp-mua__media img { display: block; width: 100%; height: auto; }
.lb-sp-price { display: flex; align-items: center; gap: 10px; margin: 0; }
.lb-sp-price b { font-family: var(--lb-font-serif); font-size: 28px; }
.lb-sp-off { padding: 4px 10px; border-radius: 999px; background: #FFE7EB; color: var(--lb-group-deep); font-size: 12px; font-weight: 700; }
.lb-sp-price-old { margin: 2px 0 12px; text-decoration: line-through; color: var(--lb-n5); }

/*
 * Figma "Tài liệu liên quan" (Frame 472/473):
 *   mỗi dòng cao 90, khe ảnh–chữ 15px;
 *   ảnh 100×90; nút tải 40×40 bo tròn, nền #FF3251, đệm trong 12.
 * Web trước: ảnh 72×54, nút 34px, khe 12.
 */
.lb-sp-doc { display: flex; align-items: center; gap: 15px; padding: 12px 18px; border-top: 1px solid var(--lb-n1); color: inherit; text-decoration: none; }
.lb-sp-doc img { width: 100px; height: 90px; object-fit: cover; border-radius: 8px; flex: none; }
.lb-sp-doc span { flex: 1 1 auto; min-width: 0; }
.lb-sp-doc b { display: block; font-family: var(--lb-font-serif); font-size: 15px; }
.lb-sp-doc i { font-style: normal; font-size: 12px; color: var(--lb-n5); }
.lb-sp-doc__dl { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--lb-group); color: #fff; }
.lb-sp-doc__dl svg { width: 16px; height: 16px; }

.lb-sp-kg__head { padding: 20px 18px; color: #fff; background: var(--lb-accent, #8E32FF); }
.lb-sp-kg__head.has-nav { position: relative; padding-left: 42px; padding-right: 42px; text-align: center; }
.lb-sp-kg__head.has-nav .lb-sp-kg__slot { justify-content: center; }
.lb-sp-kg__nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer;
  background: rgba(255,255,255,.18); color: #fff; font-size: 18px; line-height: 1;
}
.lb-sp-kg__nav:hover { background: rgba(255,255,255,.3); }
.lb-sp-kg__nav--prev { left: 10px; }
.lb-sp-kg__nav--next { right: 10px; }

.lb-sp-kg__label { margin: 0 0 4px; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; opacity: .8; }
.lb-sp-kg__date { margin: 0; font-family: var(--lb-font-serif); font-size: 26px; font-weight: 700; }
.lb-sp-kg__slot { display: flex; align-items: center; gap: 7px; margin: 8px 0 0; font-size: 13px; opacity: .9; }
.lb-sp-kg__slot svg { width: 15px; height: 15px; }
.lb-sp-row { display: flex; justify-content: space-between; gap: 12px; margin: 0; padding: 11px 0; border-bottom: 1px solid var(--lb-n1); font-size: 14px; }
.lb-sp-row span { color: var(--lb-n5); }

/* Thẻ khai giảng — học phí, ưu đãi, nút giữ chỗ (Figma Frame 428) */
.lb-sp-fee__label { margin: 4px 0 0; font-weight: 700; font-size: 14px; }
.lb-sp-fee { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin: 0 0 12px; }
.lb-sp-fee b { font-family: var(--lb-font-serif); font-size: 30px; color: var(--lb-group); line-height: 1.1; }
.lb-sp-fee span { font-size: 13px; color: var(--lb-n5); }
.lb-sp-promo { padding: 12px 14px; border-radius: 10px; background: var(--lb-bg-alt); margin: 0 0 14px; }
.lb-sp-promo__title { margin: 0 0 6px; font-weight: 700; font-size: 14px; }
.lb-sp-promo .lb-sp-row { border-bottom: 0; padding: 5px 0; align-items: flex-start; }
.lb-sp-promo .lb-sp-row b { text-align: right; font-weight: 600; }
.lb-sp-hold { letter-spacing: .04em; }
.lb-sp-hold--hoa { text-transform: uppercase; }
.lb-sp-kg__foot {
  display: flex; gap: 8px; align-items: flex-start;
  margin: 0; padding: 12px 18px; border-top: 1px solid var(--lb-n1);
  font-size: 12px; color: var(--lb-n5);
}
.lb-sp-kg__foot svg { width: 15px; height: 15px; flex: none; margin-top: 1px; }

.lb-sp-photos__track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 8px; padding: 0 18px 12px; }
.lb-sp-photos__track img { flex: none; width: 100%; scroll-snap-align: center; border-radius: 10px; }
.lb-sp-photos__dots { display: flex; justify-content: center; gap: 6px; margin: 0; padding: 0 0 14px; }
.lb-sp-photos__dots button { width: 18px; height: 3px; border: 0; padding: 0; border-radius: 2px; background: var(--lb-n2); cursor: pointer; }
.lb-sp-photos__dots button[aria-current="true"] { background: var(--lb-accent, #8E32FF); }

.lb-sp-blog__item { display: flex; gap: 12px; padding: 11px 18px; border-top: 1px solid var(--lb-n1); color: inherit; text-decoration: none; }
.lb-sp-blog__item img { width: 72px; height: 54px; object-fit: cover; border-radius: 8px; flex: none; }
.lb-sp-blog__item b { display: block; font-family: var(--lb-font-serif); font-size: 15px; line-height: 1.3; }
.lb-sp-blog__item i { font-style: normal; font-size: 12px; color: var(--lb-n5); }

/* -------------------------------------------------- Khối full-width */
.lb-sp-journey, .lb-sp-suggest, .lb-sp-faq, .lb-sp-news { padding: 56px 0; }
.lb-sp-journey { background: var(--lb-bg-alt); }
/* Figma Frame 421 (Khám phá / Detail): nền Color/LIM-bg #FDFBF7, không phải #FFF8F0. */
.lb-sp-suggest { background: #FDFBF7; }
.lb-sp-years { display: flex; justify-content: space-between; align-items: center; gap: 8px; max-width: 960px; margin: 28px auto 18px; position: relative; }
.lb-sp-years::before { content: ""; position: absolute; left: 22px; right: 22px; top: 50%; height: 1px; background: var(--lb-n2); }
/* Figma Frame 387: 40×40, radius 100. Số: Source Serif 4, Regular 400, 16px. */
.lb-sp-year {
  position: relative; width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--lb-accent, #8E32FF); color: #fff;
  font-family: var(--lb-font-serif); font-size: 16px; font-weight: 400;
}


.lb-sp-journey__cards { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 18px; }

/* Bản nằm trong cột trái (Khám phá / Detail) — nền bo góc, không tràn màn hình */
.lb-sp-journey--incol { padding: 26px 0 0; background: none; margin: 0 0 44px; }
/* Figma Frame 423: hộp #F8F8F8 bo 8, Container bên trong lệch 16px mỗi phía. */
.lb-sp-journey--incol .lb-sp-journey__inner { padding: 16px; border-radius: 8px; background: var(--lb-bg-alt); }

/*
 * Figma Frame 423: bốn mốc nằm trên MỘT hàng ngang và tràn khỏi cột — thẻ thứ tư
 * bị cắt ở mép phải, tức khối cuộn ngang. Trước đây xếp lưới 2×2.
 */
.lb-sp-journey--incol .lb-sp-journey__track { overflow-x: auto; overscroll-behavior-x: contain; padding-bottom: 6px; }
.lb-sp-journey--incol .lb-sp-years,
.lb-sp-journey--incol .lb-sp-journey__cards {
  display: grid; grid-auto-flow: column; grid-auto-columns: 208px; gap: 20px;
  max-width: none; justify-content: start;
  /* Phải huỷ template 4 cột của bản full-width: template THẮNG auto-columns,
     nên nếu để lại thì hàng thẻ co theo container còn hàng chấm thì không —
     hai hàng lệch cột dần về bên phải. */
  grid-template-columns: none;
}
.lb-sp-journey--incol .lb-sp-years { margin: 20px 0 16px; }
/* Figma: chấm nằm thẳng mép trái thẻ bên dưới, không căn giữa cột. */
.lb-sp-journey--incol .lb-sp-year { margin: 0; }

/*
 * Đường nối vẽ theo TỪNG ĐOẠN, mỗi chấm nối sang chấm kế — không dùng một dải
 * ::before căng theo chiều rộng cả hàng. Dải đó tính mốc bằng px cố định nên chỉ
 * đúng khi số mốc là 4 và cột đúng 236px; lệch một chút là hở ra ở hai đầu, nhìn
 * như đường bị đứt nét trước khi chạm chấm.
 *
 * Đoạn nối chạy từ MÉP PHẢI chấm này tới mép trái chấm kế, không xuyên qua chấm:
 * khoảng cách hai tâm 228px (208px cột + 20px khe) trừ đường kính chấm 40px còn
 * 188px. Vẽ từ tâm (left: 50%) thì đoạn nối nằm ĐÈ lên nền chấm — ::after là con
 * của chấm nên vẽ sau nền của chính nó, chấm không che được.
 */
.lb-sp-journey--incol .lb-sp-years::before { content: none; }
.lb-sp-journey--incol .lb-sp-year::after {
  content: ""; position: absolute; left: 100%; top: 50%;
  width: 188px; height: 1px; transform: translateY(-50%);
  background: color-mix(in srgb, var(--lb-accent, #8E32FF) 40%, #fff);
}
.lb-sp-journey--incol .lb-sp-year:last-child::after { content: none; }

.lb-sp-card2 { display: flex; flex-direction: column; border: 1px solid var(--lb-n1); border-radius: 14px; background: #fff; overflow: hidden; }
.lb-sp-card2__media { position: relative; display: block; }
.lb-sp-card2__media img { display: block; width: 100%; height: 190px; object-fit: cover; }
.lb-sp-card2__badge {
  position: absolute; left: 14px; top: 14px;
  padding: 5px 13px; border-radius: 8px; background: rgba(255,255,255,.92);
  font-size: 12px; font-weight: 600;
}
.lb-sp-card2__body { flex: 1 1 auto; padding: 16px 18px; }
.lb-sp-card2__body h3 { margin: 0 0 6px; font-family: var(--lb-font-serif); font-size: 18px; line-height: 1.3; }
.lb-sp-card2__body h3 a { color: inherit; text-decoration: none; }
.lb-sp-card2__body p { margin: 0; font-size: 14px; color: var(--lb-n8); }
.lb-sp-card2__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 18px; border-top: 1px solid var(--lb-n1); font-size: 13px; }
.lb-sp-card2__meta { display: inline-flex; align-items: center; gap: 6px; color: var(--lb-n5); }
.lb-sp-card2__meta svg { width: 15px; height: 15px; }
.lb-sp-card2__more { display: inline-flex; align-items: center; gap: 5px; color: var(--lb-group); text-decoration: none; font-weight: 600; }
.lb-sp-card2__more svg { width: 15px; height: 15px; }

/*
 * Tiêu đề và mô tả mỗi bài dài ngắn khác nhau, nên nếu để thẻ tự co thì link
 * "Đọc tiếp" mỗi thẻ nằm một độ cao — nhìn lệch bậc thang. Cho thẻ cao bằng nhau,
 * phần thân chiếm hết chỗ trống và đẩy "Đọc tiếp" xuống đáy.
 */
.lb-sp-news__card {
  display: flex; flex-direction: column; height: 100%;
  border: 1px solid var(--lb-n1); border-radius: 14px; background: #fff; overflow: hidden;
}
.lb-sp-news__media img { display: block; width: 100%; height: 200px; object-fit: cover; }
.lb-sp-news__body { display: flex; flex-direction: column; flex: 1 1 auto; padding: 16px 18px; }
.lb-sp-news__more { margin-top: auto; }
.lb-sp-news__date { margin: 0 0 6px; font-size: 13px; color: var(--lb-n5); }
.lb-sp-news__body h3 { margin: 0 0 8px; font-family: var(--lb-font-serif); font-size: 19px; line-height: 1.3; }
.lb-sp-news__body h3 a { color: inherit; text-decoration: none; }
.lb-sp-news__desc { margin: 0 0 12px; font-size: 14px; color: var(--lb-n8); }
.lb-sp-news__more { display: inline-flex; align-items: center; gap: 6px; color: var(--lb-group); font-weight: 600; text-decoration: none; }
.lb-sp-news__more svg { width: 15px; height: 15px; }

/*
 * Khối "Bài Viết Liên Quan" — dùng chung cho cả ba loại: Figma đặt cùng một
 * component Card (giống thẻ ở Newsroom) ở đáy cả ba frame Detail.
 * Đo trên `Khóa học / Detail` (Frame 471): đệm 72 trên / 81 dưới; thẻ 386 x 543,
 * bo 16, viền #0F0F2E 20%, ảnh 3/2, thân đệm 16 24 24, gap 8; nhãn chuyên mục
 * 13.33 w500 #FF3251 in hoa; ngày 16/24 #676673; tiêu đề Source Serif 500 20/27
 * đen; mô tả 16/24 #676673; "Đọc tiếp" 16 w500 #FF3251 bám đáy thẻ.
 */
.lb-sp-news { padding: 72px 0 81px; }
.lb-sp-news__sub { margin: 0 0 40px; }
.lb-sp-news__card { border-radius: 16px; border-color: rgba(15, 15, 46, .2); }
.lb-sp-news__media { display: block; aspect-ratio: 3 / 2; overflow: hidden; }
.lb-sp-news__media img { height: 100%; }
.lb-sp-news__body { gap: 8px; padding: 16px 24px 24px; }
.lb-sp-news__cat { margin: 0; font-size: 13.33px; line-height: 17px; font-weight: 500; text-transform: uppercase; color: #FF3251; }
.lb-sp-news__date { margin: 0; font-size: 16px; line-height: 24px; color: #676673; }
.lb-sp-news__body h3 { margin: 0; font-size: 20px; line-height: 27px; font-weight: 500; }
.lb-sp-news__body h3 a { color: #000; }
.lb-sp-news__desc { margin: 0; font-size: 16px; line-height: 24px; color: #676673; }
/* !important: cùng lý do đã ghi ở newsroom-detail.css — `a{color:inherit}` của
   tokens.css/home.css nuốt màu liên kết, độ đặc hiệu cao hơn không thắng được. */
.lb-sp-news__more { margin-top: auto; padding-top: 8px; align-self: flex-start; gap: 4px; font-size: 16px; font-weight: 500; color: #FF3251 !important; }
.lb-sp-news__more svg { width: 16px; height: 16px; }


/* ------------------------------------------------------------ CTA cuối */
/*
 * Các nút "Đăng ký / GIỮ CHỖ" đều trỏ tới #dang-ky. Cuộn mượt thay vì nhảy giật,
 * và chừa lề trên để tiêu đề khối không dính sát mép — thêm 32px nữa khi có
 * thanh quản trị WordPress, vì thanh đó fixed và che mất phần đầu.
 *
 * Chỉ áp trên trang chi tiết sản phẩm: product.css không nạp ở nơi khác.
 */
/*
 * Khối đăng ký cuối trang — dupcheck Figma `Khám phá / Detail` frame `contact`
 * (171-2773) ngày 15/09/2026, cmd+click từng lớp:
 *   section 1600 x 734, nền #0F0F2E (KHÔNG phải #1B1B38 — trước đây lệch tông
 *   với footer nhưng lại đúng bằng footer, nên khối dính liền footer)
 *   cột trái left 201: eyebrow GSF 500 16 uppercase tracking 5% #FF3251 top 204;
 *     tiêu đề Source Serif 4/h2 700 48.83/56 trắng top 234, 510 wide; mô tả GSF
 *     16/24 trắng top 360, 497 wide; 3 dòng check (icon 24 + chữ 16/24 trắng 80%)
 *   card Frame 80: 564 x 542 top 96 left 800 → cách cột trái 70; radius 16, viền
 *     1px trắng 50%, nền trắng 10%, padding 29, gap 24
 *   tiêu đề card Source Serif 4/h5 500 25 trắng; nhãn GSF 500 16 trắng 80% + dấu *
 *   ô nhập Frame 83: cao 38, radius 8, viền 1px trắng 30%, nền trắng 20%, pad 8,
 *     chữ/placeholder GSF 500 16 trắng 60%; hai ô đầu chia đôi 244 + 244
 *   nút Buttons: 505 wide (hết card), cao 44, radius 8, pad 12/24, #FF3251
 *   ghi chú dưới nút: căn giữa, trắng 60%
 */
.lb-sp-cta { padding: 96px 0; background: var(--lb-nature-deep); color: #fff; }
.lb-sp-cta__grid { display: grid; grid-template-columns: minmax(0, 529px) 564px; gap: 70px; align-items: center; justify-content: start; }   /* card left 800 = 200 + 529 + 70 (Figma), còn dư 36 bên phải */
.lb-sp-cta .lb-sp-eyebrow { margin: 0 0 10px; font-weight: 500; line-height: 1.25; }
.lb-sp-cta__title { margin: 0 0 14px; font-family: var(--lb-font-serif); font-size: var(--lb-serif-h2); font-weight: 700; line-height: 56px; letter-spacing: 0; color: #fff; }
.lb-sp-cta__sub { margin: 0; max-width: 497px; font-size: 16px; line-height: 24px; color: #fff; }
.lb-sp-cta__form { padding: 29px; border-radius: 16px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.5); }
.lb-sp-cta__form-title { margin: 0 0 24px; font-family: var(--lb-font-serif); font-size: var(--lb-serif-h5); font-weight: 500; line-height: 1.35; color: #fff; }
.lb-sp-cta__form label { display: block; margin: 0 0 8px; font-size: 16px; font-weight: 500; line-height: 1.25; color: rgba(255,255,255,.8); }
.lb-sp-cta__form .lb-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 0 0 16px; }
.lb-sp-cta__form .lb-form__field { margin: 0 0 16px; }
.lb-sp-cta__form p { margin: 0; }
.lb-sp-cta__form input[type="text"],
.lb-sp-cta__form input[type="email"],
.lb-sp-cta__form input[type="tel"],
.lb-sp-cta__form select,
.lb-sp-cta__form textarea {
  /* !important: Avada đặt padding/height cho input toàn site (.fusion-body input) với độ đặc hiệu cao hơn */
  width: 100% !important; height: 38px !important; min-height: 38px; padding: 8px !important; border-radius: 8px !important;
  border: 1px solid rgba(255,255,255,.3) !important;
  background: rgba(255,255,255,.2) !important; color: #fff !important; box-shadow: none !important;
  font-family: var(--lb-font-sans); font-size: 16px; font-weight: 500; line-height: 1.25;
}
.lb-sp-cta__form textarea { height: auto !important; min-height: 120px; resize: vertical; }
.lb-sp-cta__form ::placeholder { color: rgba(255,255,255,.6); }
.lb-sp-cta__form input:focus, .lb-sp-cta__form textarea:focus, .lb-sp-cta__form select:focus { outline: none; border-color: rgba(255,255,255,.7); background: rgba(255,255,255,.26); }
/* Nút: Figma vẽ nút ĐỎ chạy hết card (khác nút trắng của form trang chủ mà CF7 gắn class lb-btn--onred) */
.lb-sp-cta__form .lb-btn,
.lb-sp-cta__form .wpcf7-submit,
.lb-sp-cta__form .fusion-button {
  display: flex !important; width: 100% !important; justify-content: center; align-items: center;
  min-height: 44px; height: 44px !important; margin: 8px 0 0; padding: 12px 24px !important; border-radius: 8px !important;
  border: 1px solid var(--lb-group); background: var(--lb-group) !important; color: #fff !important;
  font-family: var(--lb-font-sans); font-size: 16px; font-weight: 500; line-height: 1.25; cursor: pointer;
}
.lb-sp-cta__form .lb-btn:hover, .lb-sp-cta__form .wpcf7-submit:hover, .lb-sp-cta__form .fusion-button:hover { background: var(--lb-group-deep) !important; border-color: var(--lb-group-deep); }
.lb-sp-cta__form .lb-form__note { margin: 16px 0 0; font-size: 13.33px; line-height: 1.4; text-align: center; color: rgba(255,255,255,.6); }
.lb-sp-cta__form .lb-form__note a { color: #fff; text-decoration: underline; }
.lb-sp-cta__form .wpcf7-spinner { display: none; }
.lb-sp-cta__form .wpcf7-not-valid-tip { margin-top: 4px; font-size: 13.33px; color: #FFB4BF; }
.lb-sp-cta__form .wpcf7-response-output { margin: 16px 0 0; padding: 10px 12px; border: 1px solid rgba(255,255,255,.3); border-radius: 8px; font-size: 14px; }
/* Avada Form bên trong card: bỏ nền/viền riêng của Avada, còn lại theo kiểu trên */
.lb-sp-cta__form .fusion-form-field { margin-bottom: 16px; }
.lb-sp-cta__form .fusion-form-field input, .lb-sp-cta__form .fusion-form-field textarea, .lb-sp-cta__form .fusion-form-field select { color: #fff; }

/* ------------------------------------------------------------ Mobile */
@media (max-width: 1024px) {
  .lb-sp-hero__inner, .lb-sp-grid, .lb-sp-cta__grid { grid-template-columns: minmax(0, 1fr); }
  .lb-sp-aside { position: static; }
  .lb-sp-speakers, .lb-sp-cards3, .lb-sp-journey__cards { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .lb-sp-intro { grid-template-columns: minmax(0,1fr); }
}

/* Breakpoint hẹp phải đứng SAU 1024 — cùng độ đặc hiệu thì rule sau thắng.
   Đây đúng là lỗi đã gặp một lần ở home.css: 640 viết trước nên thua 1024. */
@media (max-width: 640px) {
  .lb-sp-hero { padding: 44px 0 52px; }
  .lb-sp-speakers, .lb-sp-cards3, .lb-sp-journey__cards,
  .lb-sp-playbook, .lb-sp-quotes, .lb-sp-ba, .lb-sp-check--2 { grid-template-columns: minmax(0, 1fr); }
  .lb-sp-ba__col + .lb-sp-ba__col { border-left: 0; border-top: 1px solid var(--lb-n1); }
  .lb-sp-teacher { grid-template-columns: minmax(0, 1fr); }
  .lb-sp-teacher__anh { width: 103px; height: 103px; }
  .lb-sp-sched__row { flex-wrap: wrap; }
  .lb-sp-sched__btn { width: 100%; }
  .lb-sp-count__box { min-width: 58px; }
  .lb-sp-years { max-width: none; }
}
}