/* =====================================================================
 * KHOÁ HỌC — lớp trình bày
 * Tạo 18/09/2026, thay cho khối <style> 402 dòng trong
 * pages/site/funds/course_intro.php
 * ---------------------------------------------------------------------
 * NỘI DUNG KHÔNG ĐỔI. Tệp này bám đúng tên lớp đã có sẵn trong markup.
 *
 * BA THỨ TRANG CŨ LÀM MÀ MỘT TRANG KHÔNG ĐƯỢC PHÉP LÀM
 *
 *   * { margin: 0; padding: 0 }
 *      Một bộ reset toàn cục, nạp SAU Bootstrap. Nó xoá sạch khoảng cách
 *      của mọi thẻ trên trang, kể cả những thẻ của khung dùng chung.
 *
 *   body { background: linear-gradient(#667eea, #764ba2);
 *          padding-top: 100px !important }
 *      Nhuộm tím cả trang, và đặt cứng 100px thay cho `var(--tc-bar)` —
 *      con số đó không liên quan gì tới chiều cao thật của thanh trên
 *      cùng, nên đổi thanh là hở hoặc chồng.
 *
 *   .main-menu { z-index: 1001 !important }
 *   .dropdown-content { z-index: 1002 !important }
 *      Một trang đi sửa thanh điều hướng dùng chung. Nó phải làm vậy vì
 *      chính nó đặt `z-index: 1` lên .course-container rồi menu chui
 *      xuống dưới. Vá triệu chứng do mình gây ra.
 *
 * Cả ba đều bỏ. Trang này giờ chỉ tạo kiểu cho phần của chính nó.
 *
 * Màu: dùng màu nhà (xanh ngọc). Khoá học không thuộc bốn dòng sản phẩm
 * nên không mang sắc riêng nào.
 * ===================================================================== */


/* =====================================================================
 * 1 · DẢI MỞ ĐẦU
 * ===================================================================== */
.kh-header{
  background: linear-gradient(165deg, #172026 0%, #132A2C 55%, #0F2C2E 100%);
  color: #fff;
  padding-block: clamp(42px, 5.5vw, 70px);
  padding-inline: max(20px, calc(50% - 620px));
  text-align: center;
  position: relative; overflow: hidden;
  margin-bottom: clamp(30px, 4vw, 46px);
}
.kh-header::after{
  content:""; position:absolute; inset:auto -10% -70% 50%; height:340px;
  background: radial-gradient(closest-side, rgba(15,118,110,.26), transparent);
  pointer-events:none;
}
.kh-header h1{
  font-size: clamp(25px, 3.4vw, 38px); font-weight: 800;
  letter-spacing: -.035em; line-height: 1.16; color: #fff;
  position: relative; margin: 0 auto; max-width: 20ch;
}
.kh-header .subtitle{
  font-size: 16px; font-weight: 300; color: rgba(255,255,255,.76);
  margin-top: 14px; position: relative;
}
.kh-header .author{
  display: inline-block; margin-top: 18px; position: relative;
  font: 500 12.5px/1 var(--ta-font);
  background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.18);
  color: rgba(255,255,255,.88);
  padding: 8px 16px; border-radius: var(--ta-r-pill);
}


/* =====================================================================
 * 2 · KHUNG NỘI DUNG
 * ===================================================================== */
.course-container{
  max-width: 1240px; margin-inline: auto; padding-inline: 20px;
  background: transparent; border-radius: 0; box-shadow: none;
}
.content{ padding: 0; }
.section{ margin-bottom: clamp(32px, 4.5vw, 52px); }

.section-title{
  font-size: clamp(20px, 2.4vw, 27px); font-weight: 700;
  letter-spacing: -.02em; color: var(--ta-fg);
  padding-left: 14px; border-left: 4px solid var(--ta-accent);
  margin-bottom: 20px;
}
.section-title::after{ display: none; }   /* gạch chân cũ, bỏ */


/* =====================================================================
 * 3 · MỤC TIÊU, GHI CHÚ
 * ===================================================================== */
.objectives{
  background: var(--ta-accent-soft);
  border: 1px solid #C9E4E0;
  border-radius: var(--ta-r-lg);
  padding: 22px 26px;
}
.objectives p{ font-size: 15.5px; color: var(--ta-accent-ink); margin-bottom: 14px; }
.objectives ul{ margin: 0; padding: 0; list-style: none; }
.objectives li{
  position: relative; padding-left: 24px; margin-bottom: 10px;
  font-size: 14.5px; line-height: 1.65; color: var(--ta-fg-2);
}
.objectives li:last-child{ margin-bottom: 0; }
.objectives li::before{
  content: "✓"; position: absolute; left: 2px; top: 0;
  color: var(--ta-accent); font-weight: 700;
}

.note{
  background: var(--ta-warn-soft);
  border: 1px solid #EBD9A8;
  border-left: 3px solid var(--ta-warn);
  border-radius: var(--ta-r);
  padding: 16px 20px;
  font-size: 14px; line-height: 1.7; color: var(--ta-warn);
}
.note strong{ color: #6B4404; }


/* =====================================================================
 * 4 · BỐN Ô SỐ LIỆU
 * ===================================================================== */
.stats{
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
  margin-bottom: clamp(32px, 4.5vw, 52px);
}
@media (max-width: 767.98px){ .stats{ grid-template-columns: repeat(2, 1fr); } }
.stat-card{
  background: var(--ta-surface);
  border: 1px solid var(--ta-line);
  border-radius: var(--ta-r-lg);
  box-shadow: var(--e1);
  padding: 20px 16px; text-align: center;
}
.stat-number{
  font: 700 32px/1 var(--ta-mono); letter-spacing: -.035em;
  color: var(--ta-fg); font-variant-numeric: tabular-nums;
}
.stat-label{
  font-size: 12.5px; color: var(--ta-fg-3); margin-top: 8px;
}


/* =====================================================================
 * 5 · CHÍN PHẦN HỌC — HÀNG XẾP MỞ ĐƯỢC
 * ---------------------------------------------------------------------
 * Chín phần, mỗi phần vài bài. Mở một phần thì các phần khác đóng lại
 * (đúng như hàm togglePart đã có trong trang). Nên hàng đóng phải đọc
 * được như một mục lục: tên phần rõ, mũi tên cho biết bấm được.
 * ===================================================================== */
.part{
  background: var(--ta-surface);
  border: 1px solid var(--ta-line);
  border-radius: var(--ta-r-lg);
  box-shadow: var(--e1);
  margin-bottom: 12px;
  overflow: hidden;
  transition: box-shadow .18s;
}
.part:hover{ box-shadow: var(--e2); transform: none; }

.part-header{
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 16px 20px; cursor: pointer;
  background: var(--ta-surface);
  transition: background .15s;
}
.part-header:hover{ background: var(--ta-sunken); }
.part-header h3{
  font-size: 15.5px; font-weight: 650; color: var(--ta-fg);
  margin: 0; line-height: 1.4;
}
.part-header .toggle{
  flex: none; width: 28px; height: 28px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--ta-accent-soft); color: var(--ta-accent-ink);
  font-size: 11px;
  transition: transform .2s, background .15s;
}
.part-header.active{ background: var(--ta-accent-soft); }
.part-header.active h3{ color: var(--ta-accent-ink); }
.part-header.active .toggle{
  transform: rotate(180deg);
  background: var(--ta-accent); color: #fff;
}

/* Đóng / mở: giữ đúng cách trang đang làm — lớp `.active` trên
   `.part-content`. Dùng grid-template-rows để mở mượt mà không phải đoán
   chiều cao (max-height đoán bằng một con số to thì lúc đóng bị giật). */
.part-content{
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows .22s ease;
}
/* `min-height: 0` KHONG duoc bo. Mac dinh moi khoi trong grid co
   min-height:auto, nghia la no khong chiu nho hon noi dung ben trong —
   nen `grid-template-rows: 0fr` van ra chieu cao day du va muc khong
   bao gio dong lai. */
.part-content > *{ overflow: hidden; min-height: 0; }
.part-content.active{ grid-template-rows: 1fr; }
/* Padding KHONG bi `0fr` co lai: hang duoc co theo min-content cua khoi
   con, ma padding thi luon tinh vao do. De nguyen thi moi muc dong van
   chiem 24px — chin muc la 216px khoang trong chet. Nen padding chi
   xuat hien khi muc mo. */
.lessons{ padding: 0 20px; transition: padding .22s ease; }
.part-content.active .lessons{ padding: 4px 20px 20px; }


/* =====================================================================
 * 6 · TỪNG BÀI HỌC
 * ===================================================================== */
.lesson{
  background: var(--ta-surface-2);
  border: 1px solid var(--ta-line-2);
  border-left: 3px solid var(--ta-accent);
  border-radius: var(--ta-r);
  padding: 16px 18px;
  margin-bottom: 10px;
}
.lesson:last-child{ margin-bottom: 0; }
.lesson-title{
  font-size: 14.5px; font-weight: 650; color: var(--ta-fg); margin-bottom: 10px;
}
.lesson-info{
  font-size: 13.5px; line-height: 1.65; color: var(--ta-fg-2); margin-bottom: 7px;
}
.lesson-info:last-child{ margin-bottom: 0; }
.lesson-info strong{ color: var(--ta-fg); font-weight: 600; }
.lesson-info ul{ margin: 6px 0 0; padding: 0; list-style: none; }
.lesson-info li{
  position: relative; padding-left: 16px; margin-bottom: 4px;
  font-size: 13px; color: var(--ta-fg-2);
}
.lesson-info li::before{
  content:""; position:absolute; left: 2px; top: 8px;
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--ta-accent); opacity: .5;
}


/* =====================================================================
 * 7 · PHƯƠNG PHÁP HỌC TẬP
 * ===================================================================== */
.learning-method{ display: grid; gap: 12px; }
.method-step{
  background: var(--ta-surface);
  border: 1px solid var(--ta-line);
  border-radius: var(--ta-r-lg);
  box-shadow: var(--e1);
  padding: 20px 22px;
  transition: box-shadow .18s, transform .18s;
}
.method-step:hover{ box-shadow: var(--e2); transform: translateY(-2px); }
.step-header{
  display: flex; align-items: center; gap: 14px; margin-bottom: 12px;
}
.step-number{
  flex: none; width: 38px; height: 38px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--ta-accent); color: #fff;
  font: 700 15px/1 var(--ta-mono);
}
.step-header h3{
  font-size: 16px; font-weight: 650; color: var(--ta-fg); margin: 0;
}
.step-content{ padding-left: 52px; }
.step-content ul{ margin: 0; padding: 0; list-style: none; }
.step-content li{
  position: relative; padding-left: 18px; margin-bottom: 8px;
  font-size: 14px; line-height: 1.65; color: var(--ta-fg-2);
}
.step-content li:last-child{ margin-bottom: 0; }
.step-content li::before{
  content:""; position:absolute; left: 2px; top: 8px;
  width: 6px; height: 6px; border-radius: 2px;
  background: var(--ta-accent); opacity: .5;
}
@media (max-width: 575.98px){ .step-content{ padding-left: 0; } }


/* =====================================================================
 * 8 · TÀI LIỆU VÀ LỊCH HỌC
 * ===================================================================== */
.resources{
  background: var(--ta-surface);
  border: 1px solid var(--ta-line);
  border-radius: var(--ta-r-lg);
  box-shadow: var(--e1);
  padding: 22px 26px;
}
.resources ul{ margin: 0; padding-left: 20px; }
.resources li{ font-size: 14.5px; line-height: 1.8; color: var(--ta-fg-2); }

.schedule-info{
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
}
@media (max-width: 767.98px){ .schedule-info{ grid-template-columns: 1fr; } }
.schedule-card{
  background: var(--ta-surface);
  border: 1px solid var(--ta-line);
  border-radius: var(--ta-r-lg);
  box-shadow: var(--e1);
  padding: 20px 22px;
  font-size: 14.5px; line-height: 1.7; color: var(--ta-fg-2);
}
.schedule-card strong{
  display: block; margin-bottom: 7px;
  font-size: 12px; font-weight: 600; letter-spacing: .07em;
  text-transform: uppercase; color: var(--ta-fg-3);
  font-family: var(--ta-mono);
}