/**
 * Filmlook.vn — Trang Khóa học: tông tối, ảnh nền mờ, áp nguyên lý design system.
 *
 * Vì sao tách file: quy tắc dự án cấm thêm khối <style> mới vào HTML. File này
 * nạp SAU khối <style> sẵn có trong `khoa-hoc-chinh-mau.html` nên ghi đè được
 * mà không cần `!important` — thứ tự nạp là thứ quyết định, đừng đổi.
 *
 * Design system của chủ website vốn viết cho tài liệu in A4 (cỡ chữ 9.5–13px,
 * đỏ #C8001E, font Be Vietnam Pro). Ở đây lấy NGUYÊN LÝ, không lấy số đo:
 * đỏ là tín hiệu duy nhất, nhãn mục có gạch đỏ lặp lại, thẻ số liệu viền trên
 * đỏ, hộp ghi chú viền trái đỏ, phân cấp ba tầng, canh trục trái nhất quán,
 * tiết chế — còn font và mã đỏ giữ đúng của website (#d81820, Arial).
 */

:root {
  --kh-bg:      #0b0b0b;   /* nền trang */
  --kh-panel:   #141414;   /* thẻ, hộp */
  --kh-line:    rgba(255,255,255,.12);
  --kh-text:    #c9c6c1;   /* chữ thường */
  --kh-dim:     #8d8a85;   /* chữ phụ */
}

/* ===== Nền trang ===== */
body { background: var(--kh-bg); color: #fff; }

/* ===== Hero: ảnh nền mờ thay cho vệt sáng gradient =====
   Dùng ĐÚNG ảnh hero của trang chủ (Cloudinary). Đổi ảnh hero thì phải sửa cả
   `projects-V2.js` lẫn file này — xem ghi chú trong bộ nhớ dự án. */
.hero::before {
  inset: 0;
  background:
    url("https://res.cloudinary.com/ecnleoql/image/upload/f_auto,q_auto,w_1920/v1785128299/Bi%CC%80a_iowgqy.jpg")
    center / cover no-repeat;
  filter: brightness(1.3) grayscale(.12) blur(3px);
  opacity: .62;
  transform: scale(1.04);
}
/* Lớp phủ tối để chữ luôn đọc được bất kể ảnh sáng hay tối */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(11,11,11,.78) 0%, rgba(11,11,11,.34) 45%, var(--kh-bg) 100%),
    linear-gradient(90deg, rgba(11,11,11,.72) 0%, transparent 72%);
}
.hero-content { z-index: 1; }

@media (max-width: 760px) {
  .hero::before {
    background-image:
      url("https://res.cloudinary.com/ecnleoql/image/upload/f_auto,q_auto,w_900/v1785128299/Bi%CC%80a_iowgqy.jpg");
  }
}

/* ===== Thẻ số liệu — nền tối, gạch đỏ trên, con số TRẮNG và lớn ===== */
.stat {
  position: relative;
  overflow: hidden;
  padding: 26px 24px;
  background: var(--kh-panel);
  border-top: 3px solid var(--red);
  color: #fff;
  transform: translateY(10px);
  opacity: 0;
  animation: kh-stat-in .55s cubic-bezier(.2,.8,.2,1) forwards;
  transition: transform .28s ease, background .28s ease, box-shadow .28s ease;
}
.stat:nth-child(2) { animation-delay: .1s; }
.stat:nth-child(3) { animation-delay: .2s; }
.stat b {
  color: #fff;
  font-size: clamp(46px, 4.4vw, 58px);
  letter-spacing: -.045em;
}
.stat span {
  margin-top: 12px;
  color: var(--kh-dim);
  font-size: 14px;
  letter-spacing: .005em;
}

@keyframes kh-stat-in { to { transform: none; opacity: 1; } }

/* Rê chuột: thẻ nhấc nhẹ, nền sáng hơn một chút, và một vệt sáng lướt ngang.
   !important là BẮT BUỘC: animation `forwards` ở trên giữ `transform: none` sau khi
   chạy xong, mà giá trị do animation giữ luôn thắng khai báo thường trong cascade. */
.stat:hover {
  transform: translateY(-4px) !important;
  background: #1b1b1b;
  box-shadow: 0 18px 34px -20px rgba(0,0,0,.9);
}
.stat::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  left: -60%;
  width: 45%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.16), transparent);
  transform: skewX(-18deg);
  pointer-events: none;
  opacity: 0;
}
.stat:hover::after { animation: kh-stat-sweep .85s ease-out; }
@keyframes kh-stat-sweep {
  from { left: -60%; opacity: 1; }
  to   { left: 115%; opacity: 1; }
}

/* ===== Nội dung chính ===== */
.rich p, .rich li { color: var(--kh-text); }
.rich h2, .rich h3 { color: #fff; }

/* Nhãn mục: gạch đỏ trước mỗi H2 — chi tiết lặp lại xuyên suốt trang */
.rich h2 { position: relative; padding-left: 18px; }
.rich h2::before {
  content: "";
  position: absolute;
  left: 0; top: .22em;
  width: 4px; height: .78em;
  background: var(--red);
  border-radius: 2px;
}

/* Danh sách: đầu dòng đỏ thay cho chấm tròn mặc định */
.rich ul { padding-left: 0; list-style: none; }
.rich ul li { position: relative; padding-left: 20px; }
.rich ul li::before {
  content: "";
  position: absolute;
  left: 0; top: .62em;
  width: 7px; height: 2px;
  background: var(--red);
}

/* Hộp ghi chú: viền trái đỏ trên nền tối */
.rich .key-note {
  background: rgba(216,24,32,.09);
  border-left-color: var(--red);
  color: #fff;
}

.rich .article-image img { background: var(--kh-panel); border-color: var(--kh-line); }
.rich .article-image figcaption { color: var(--kh-dim); }

/* ===== Nút ===== */
.btn:not(.btn-red) { background: transparent; border-color: rgba(255,255,255,.42); color: #fff; }
.btn:not(.btn-red):hover { background: #fff; border-color: #fff; color: var(--kh-bg); }

/* ===== Khối Feedback ===== */
.feedback-section { border-top-color: var(--kh-line); }
.feedback-lead { color: var(--kh-dim); }

/* ===== Lưới ảnh feedback =====
   Chỉ những phần tử mang class `.fb-card` mới thành cửa sổ. Khối feedback do
   trang quản trị soạn nên từng có đoạn văn RỖNG lọt vào; bộ chọn cũ
   `#feedback-body > *` biến luôn đoạn rỗng đó thành một khung đen trống
   (chủ website báo 28/08/2026: up 2 ảnh mà web hiện 4 ô). Nay `showFeedback`
   trong khoa-hoc-chinh-mau.html tự dựng lại: mỗi ẢNH một `.fb-card`, không có
   ảnh thì không có khung.
   Dùng flex xếp GIỮA chứ không dùng grid cố định số cột: chỉ có 2–3 ảnh thì
   lưới 4 cột để lại 2 ô trống toang bên phải (đo được ở 1440px).
   Bề rộng `calc(25% - 15px)` chốt tối đa 4 ảnh một hàng trên máy tính,
   `calc(50% - 5px)` là 2 ảnh một hàng trên điện thoại. */
#feedback-body {
  /* 1100px = 4 khung 260px + 3 khe 20px. Chan cung tren de KHONG BAO GIO co
     5 anh lot vao mot hang tren man rong (do duoc 5/hang o 1440px khi chua chan). */
  max-width: 1100px;
  margin-inline: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 20px;
}

/* Mỗi ảnh là một "cửa sổ" giống thẻ 3D ngoài trang chủ, cao tự co theo ảnh */
.fb-card {
  flex: 0 0 auto;
  width: clamp(180px, calc(25% - 15px), 260px);
  margin: 0;
  padding: 0;
  max-width: none;
  position: relative;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 12px;
  overflow: hidden;
  background: linear-gradient(180deg, #151515 0%, #0d0d0d 100%);
  box-shadow: 0 22px 44px -18px rgba(0,0,0,.75), 0 0 0 1px rgba(255,255,255,.03) inset;
  animation: kh-fb-float 7s ease-in-out infinite;
  transition: box-shadow .25s, border-color .25s;
}
.fb-card:nth-child(2n)   { animation-delay: -1.6s; }
.fb-card:nth-child(3n)   { animation-delay: -3.2s; }
.fb-card:nth-child(4n)   { animation-delay: -4.8s; }
.fb-card:hover {
  animation-play-state: paused;
  border-color: rgba(216,24,32,.55);
  box-shadow: 0 26px 52px -18px rgba(0,0,0,.85), 0 0 26px -6px rgba(216,24,32,.32);
}

/* Đung đưa rất nhẹ — đủ để mắt bắt được, không đủ để gây khó chịu khi đọc */
@keyframes kh-fb-float {
  0%, 100% { transform: translateY(0)    rotate(-.35deg); }
  50%      { transform: translateY(-7px) rotate(.35deg); }
}

/* Thanh tiêu đề cửa sổ: ba chấm, vẽ bằng gradient nên không cần thêm thẻ HTML
   (nội dung feedback do trang quản trị soạn, không chèn markup vào đó được) */
.fb-card::before {
  content: "";
  display: block;
  height: 26px;
  background-color: #1b1b1b;
  background-image:
    radial-gradient(circle 3.5px at 14px 13px, #e2564f 99%, transparent 100%),
    radial-gradient(circle 3.5px at 28px 13px, #4a4a4a 99%, transparent 100%),
    radial-gradient(circle 3.5px at 42px 13px, #4a4a4a 99%, transparent 100%);
  background-repeat: no-repeat;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

#feedback-body img {
  display: block;
  width: 100%;
  height: auto;
  max-height: none;
  border: 0;
  border-radius: 0;
  background: var(--kh-panel);
  cursor: zoom-in;
}
#feedback-body figcaption:empty { display: none; }
#feedback-body figcaption {
  margin: 0;
  padding: 9px 11px 11px;
  color: var(--kh-dim);
  font-size: 11px;
  line-height: 1.45;
  text-align: center;
}

@media (max-width: 700px) {
  #feedback-body { gap: 10px; }
  .fb-card { width: calc(50% - 5px); }
  .fb-card::before { height: 20px; background-size: auto; }
  #feedback-body figcaption:empty { display: none; }
#feedback-body figcaption { padding: 7px 8px 9px; font-size: 10px; }
}

/* ===== Dien thoai: keo ba o so lieu len sat hero =====
   Do duoc khoang trong tu dong "DAO TAO · KHAI GIANG" xuong o so lieu dau tien:
   175px (360px) / 218px (390px) / 270px (430px). Cang man to cang trong nhieu vi
   `min-height: 72svh` ep hero cao hon noi dung that, toan bo phan du don xuong day.
   Chua bang cach bo min-height tren dien thoai (de hero tu co theo noi dung) roi
   thu dem duoi hero va dem tren cua .page-body. Khong dung tren may tinh. */
@media (max-width: 620px) {
  .hero { min-height: 0; padding-bottom: 46px; }
  .page-body { padding-top: 30px; }
  /* Moi o mot hang rieng tren MOI dien thoai (chu website chot 28/08/2026).
     Why phai ghi ro: `repeat(auto-fit, minmax(190px,1fr))` o file goc cho ket qua
     KHAC NHAU theo be ngang may — may 360-390px ra 1 o/hang, may 430px ra 2 o/hang.
     Ep `1fr` de moi may deu giong nhau. */
  .stats { grid-template-columns: 1fr; gap: 12px; margin-bottom: clamp(34px, 6vw, 48px); }
  .stat { padding: 20px 18px; }
  .stat b { font-size: clamp(40px, 12vw, 50px); }
}

@media (prefers-reduced-motion: reduce) {
  .stat { animation: none; opacity: 1; transform: none; }
  .stat:hover { transform: none; }
  .stat:hover::after { animation: none; }
  .fb-card { animation: none; }
}

/* The shared introduction sits full width between overview and lesson content. */
.course-overview { padding-bottom: 0; }
.course-overview .stats { margin-bottom: 0; }
.course-content { padding-top: 0; }

/* Blend both edges of the shared introduction into the course page background.
   The fade fits within the existing top/bottom spacing and never captures clicks. */
#main > .intro3d::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(to bottom, var(--kh-bg) 0%, rgba(11,11,11,.8) 25%, rgba(11,11,11,.3) 65%, rgba(11,11,11,0) 100%) top / 100% clamp(64px,7vw,96px) no-repeat,
    linear-gradient(to top, var(--kh-bg) 0%, rgba(11,11,11,.8) 25%, rgba(11,11,11,.3) 65%, rgba(11,11,11,0) 100%) bottom / 100% clamp(64px,7vw,96px) no-repeat;
}