:root {
  --navy: #1b3a6b;
  --navy-dark: #12294d;
  --orange: #f7941e;
  --orange-dark: #ef6c1a;
  --sky-top: #cfe9fb;
  --sky-bottom: #eef8ff;
  --white: #ffffff;
  --text-gray: #6b7280;
  --card-blue: #2f6fed;
  --card-pink: #ec4899;
  --cream-peach-top: #fdf1e4;
  --cream-peach-bottom: #fbe4de;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: "Be Vietnam Pro", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--white);
  color: var(--navy);
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font-family: inherit;
}

.container {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ---------- Section 1: Banner ---------- */
/* Ép đúng tỉ lệ khung hình gốc của ảnh thật (2021:778) — object-fit: cover
   sẽ vừa khít mọi kích thước màn hình mà không méo/crop sai, cùng kỹ
   thuật đã dùng cho .conquer ở mc-caymicvang. */
.hero {
  width: 100%;
  aspect-ratio: 2021 / 778;
  overflow: hidden;
}

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

/* ---------- Chữ tiêu đề dưới banner ---------- */
/* margin-top âm = -15% chiều cao THẬT của .hero (hạ bớt so với 30% trước
   đó) = 0.15 × 778/2021 × 100vw ≈ 5.77vw. Đã bỏ nền trắng — giờ chữ nằm
   trực tiếp trên ảnh banner, không còn khối trắng che ảnh phía dưới. Thêm
   text-shadow ở tiêu đề/phụ đề để chữ vẫn đọc rõ trên nền ảnh. */
.course-intro {
  position: relative;
  z-index: 2;
  margin-top: -5.77vw;
  padding: 28px 0 8px;
  text-align: center;
}

/* Đổi từ Baloo 2 (bo tròn/mềm) sang Montserrat (font cứng, cùng font
   display đang dùng chung cho các trang For Future khác như mc-caymicvang). */
/* text-transform:uppercase (viết hoa) + white-space:nowrap (ép 1 dòng)
   khiến chữ RỘNG hơn hẳn so với trước — cỡ chữ không còn floor cố định
   1.5rem nữa (mọi màn hình hẹp đều tràn dòng ở mức đó khi đã viết hoa) mà
   hạ hẳn xuống scale theo vw (4vw, floor 0.75rem) để LUÔN vừa đúng 1 dòng
   dù màn hình hẹp tới đâu — ceiling giữ nguyên 2.25rem nên desktop không
   đổi (3vw > 2.25rem ở mọi độ rộng desktop thực tế, luôn chạm ceiling như
   trước). */
.course-intro-title {
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  font-family: "Montserrat", "Be Vietnam Pro", sans-serif;
  font-weight: 800;
  font-size: clamp(0.75rem, 4vw, 2.25rem);
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--navy);
  text-shadow: 0 2px 10px rgba(255, 255, 255, 0.9), 0 1px 3px rgba(255, 255, 255, 0.9);
}

.course-intro-star {
  flex-shrink: 0;
  font-size: 0.6em;
  color: var(--orange);
  text-shadow: 0 2px 8px rgba(255, 255, 255, 0.9);
}

.course-intro-sub {
  margin: 10px 0 0;
  font-family: "Montserrat", "Be Vietnam Pro", sans-serif;
  font-weight: 700;
  font-size: clamp(0.9375rem, 1.6vw, 1.125rem);
  color: var(--orange-dark);
  text-shadow: 0 2px 8px rgba(255, 255, 255, 0.9);
}

/* ---------- Section 2: 3 thẻ khóa học ---------- */
/* padding-bottom tăng lên 240px (đủ chỗ AN TOÀN cho mức đè 30% mới, xem
   .s34-bg) để KHÔNG BAO GIỜ chạm tới lưới 3 thẻ khóa học phía trên, chỉ
   đè lên phần nền trắng trống bên dưới thẻ. */
.courses {
  padding: 8px 0 240px;
  background: var(--white);
}

.courses-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  width: 100%;
  padding: 0 24px;
}

/* Đúng tỉ lệ thật của 3 ảnh (1122×1402) — ảnh đã tự có khoảng trống pha
   màu ở nửa dưới, không cần overlay gradient riêng. */
.course-card {
  position: relative;
  aspect-ratio: 1122 / 1402;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.12);
}

.course-card-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* top:44% (tính theo chiều cao thẻ vì position:absolute) — đúng điểm bắt
   đầu vùng pha màu trống trong ảnh, chữ đặt từ đó trở xuống. */
/* top: 44% → 64% (đẩy xuống thêm 20 điểm %). */
.course-card-body {
  position: absolute;
  left: 0;
  right: 0;
  top: 64%;
  bottom: 0;
  padding: 18px 22px 24px;
  display: flex;
  flex-direction: column;
}

.course-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

/* font-size × 1.3 (tăng 30%): 1.375rem → 1.7875rem. */
.course-card-head h3 {
  margin: 0;
  font-family: "Montserrat", "Be Vietnam Pro", sans-serif;
  font-weight: 800;
  font-size: 1.7875rem;
}

.course-card-icon {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  margin-top: 4px;
}

/* font-size × 1.3 (tăng 30%): 0.875rem → 1.1375rem, sau đó × 0.9 (giảm
   10%): 1.1375rem → 1.02375rem. */
.course-card-desc {
  margin: 4px 0 14px;
  font-size: 1.02375rem;
  font-weight: 600;
  line-height: 1.5;
  color: var(--text-gray);
}

.course-card-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

/* font-size × 1.3 (tăng 30%): 0.8125rem → 1.05625rem. */
.course-card-list li {
  position: relative;
  padding-left: 24px;
  font-size: 1.05625rem;
  font-weight: 600;
  color: var(--navy);
  line-height: 1.4;
}

.course-card-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 3px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-size: 9px 9px;
  background-repeat: no-repeat;
  background-position: center;
}

.course-card-blue h3,
.course-card-blue .course-card-icon {
  color: var(--card-blue);
}

.course-card-blue .course-card-list li::before {
  background-color: var(--card-blue);
}

.course-card-pink h3,
.course-card-pink .course-card-icon {
  color: var(--card-pink);
}

.course-card-pink .course-card-list li::before {
  background-color: var(--card-pink);
}

.course-card-orange h3,
.course-card-orange .course-card-icon {
  color: var(--orange-dark);
}

.course-card-orange .course-card-list li::before {
  background-color: var(--orange-dark);
}

@media (max-width: 900px) {
  .courses-grid {
    grid-template-columns: 1fr;
    max-width: 420px;
    margin: 0 auto;
  }

  /* Chữ trong thẻ bị chìm/cắt ở đáy trên mobile — nâng lại 20 điểm % (64%
     → 44%, đúng bằng mức đã đẩy xuống trước đó, xem chú thích ở
     .course-card-body) để có đủ chỗ hiển thị hết tiêu đề + mô tả + 4 gạch
     đầu dòng trong khung thẻ. CHỈ áp dụng mobile — desktop (3 cột, thẻ nhỏ
     hơn, đủ chỗ) giữ nguyên 64% như cũ. */
  .course-card-body {
    top: 44%;
  }
}

/* ---------- Nền chung Section 3+4 (ảnh thật) ---------- */
/* Ảnh thật do người dùng cung cấp (2026-09-21) đã có sẵn chữ trang trí +
   hình sách/máy bay giấy cho section 4 — trải liền mạch qua cả 2 section
   bằng 1 background duy nhất trên khối bọc chung, thay vì gradient riêng
   từng section như trước. */
/* background-size: cover trước đây ép ảnh phóng to hết cỡ để LẤP ĐẦY cả
   chiều cao 2 section (thường cao hơn tỉ lệ thật của ảnh) — đổi sang
   100% auto để ảnh hiển thị ĐÚNG kích thước thật theo chiều rộng (không
   zoom/crop), chiều cao tự động theo đúng tỉ lệ gốc (1448:1086). */
/* Đẩy ảnh đè lên PHẦN NỀN TRẮNG TRỐNG của section 2 phía trên (KHÔNG đè
   lên 3 thẻ khóa học) để lộ hình cuốn sách ở đáy ảnh. margin-top âm =
   -30% chiều cao thật của ảnh (1086/1448 × 0.3 × 100vw ≈ -22.5vw), nhưng
   chặn tối đa -240px bằng max() — khớp đúng padding-bottom mới của
   .courses nên luôn an toàn, không chạm vào các thẻ dù ở màn hình rất rộng. */
/* Màu nền dự phòng khớp tông kem/vàng nhạt của ảnh thật (đo trực tiếp từ
   ảnh) — vì background-size:100% auto chỉ cao đúng tỉ lệ ảnh (1448:1086),
   trong khi nội dung thật (đặc biệt form đăng ký 8 trường) có thể cao hơn
   nhiều trên màn hình hẹp, để lộ khoảng trắng bên dưới ảnh nếu không có
   màu dự phòng liền tông. */
.s34-bg {
  position: relative;
  z-index: 2;
  margin-top: max(-240px, -22.5vw);
  background: var(--cream-peach-top) url("../images/bg-section-3-4.png?v=1") no-repeat top center;
  background-size: 100% auto;
}

/* ---------- Section 3: Vì sao chọn For Future ---------- */
.why-us {
  position: relative;
  padding: 56px 0 64px;
}

.why-us-title {
  margin: 0 0 40px;
  padding: 0 24px;
  text-align: center;
  text-transform: uppercase;
  font-family: "Montserrat", "Be Vietnam Pro", sans-serif;
  font-weight: 900;
  letter-spacing: 0.01em;
  font-size: clamp(1.375rem, 2.8vw, 1.875rem);
  color: var(--navy);
  line-height: 1.4;
}

.hl-pink {
  color: var(--card-pink);
}

.hl-orange {
  color: var(--orange-dark);
}

.why-us-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
  width: 100%;
  padding: 0 24px;
}

.why-us-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* Icon ảnh thật do người dùng cung cấp (2026-09-21) — nền trong suốt, tự
   có màu riêng từng icon, không cần class màu riêng như bản SVG cũ nữa. */
.why-us-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 76px;
  height: 76px;
  margin-bottom: 16px;
  border-radius: 50%;
  background: var(--white);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.1);
}

.why-us-icon img {
  width: 38px;
  height: 38px;
  object-fit: contain;
}

.why-us-item h3 {
  margin: 0 0 8px;
  font-family: "Montserrat", "Be Vietnam Pro", sans-serif;
  font-weight: 800;
  font-size: 0.9375rem;
  line-height: 1.35;
  color: var(--navy);
}

.why-us-item p {
  margin: 0;
  font-size: 17px;
  line-height: 1.6;
  color: var(--text-gray);
}

@media (max-width: 960px) {
  .why-us-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 32px 20px;
  }
}

@media (max-width: 560px) {
  .why-us-grid {
    grid-template-columns: 1fr;
    max-width: 320px;
    margin: 0 auto;
  }
}

/* ---------- Header ---------- */
/* Nền trời mây xanh dựng bằng gradient — chưa có ảnh mây thật riêng cho
   trang này, xem comment trong index.html. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: linear-gradient(180deg, var(--sky-top) 0%, var(--sky-bottom) 100%);
  border-bottom: 1px solid rgba(27, 58, 107, 0.08);
}

/* height tăng cùng lúc với .logo-img (76px → 96px) — logo phóng to thêm
   70% (50px → 85px) sẽ TRÀN ra ngoài nếu giữ nguyên 76px cũ (flex không tự
   cắt bớt nội dung cao hơn container), phải nới khung header theo để logo
   luôn vừa khít, không bị lem ra ngoài viền header. */
.header-inner {
  display: flex;
  align-items: center;
  gap: 32px;
  height: 96px;
}

.logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

/* 34px gốc → 50px (yêu cầu trước) → 85px (phóng to thêm 70%, yêu cầu này). */
.logo-img {
  height: 85px;
  width: auto;
  object-fit: contain;
}

.main-nav {
  display: flex;
  align-items: center;
  gap: 30px;
  flex: 1;
}

.main-nav a {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--navy);
  white-space: nowrap;
  transition: color 0.15s ease;
}

.main-nav a:hover {
  color: var(--orange);
}

/* Là con cuối của .main-nav (không phải anh em cùng cấp) — margin-left:auto
   tự đẩy sát phải trên desktop nhờ flexbox, không cần CSS riêng cho mobile
   vì lúc đó .main-nav đổi thành cột dọc, nút tự xếp full-width như 1 mục
   trong danh sách. */
.btn-cta {
  flex-shrink: 0;
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 24px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--orange), var(--orange-dark));
  color: var(--white);
  font-size: 0.9375rem;
  font-weight: 700;
  white-space: nowrap;
  box-shadow: 0 8px 20px rgba(239, 108, 26, 0.35);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.btn-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(239, 108, 26, 0.45);
}

.btn-cta svg {
  width: 17px;
  height: 17px;
}

.menu-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 34px;
  height: 34px;
  border: none;
  background: none;
  cursor: pointer;
  flex-shrink: 0;
}

.menu-toggle span {
  display: block;
  width: 100%;
  height: 2.5px;
  border-radius: 2px;
  background: var(--navy);
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.menu-toggle.is-open span:nth-child(1) {
  transform: translateY(7.5px) rotate(45deg);
}

.menu-toggle.is-open span:nth-child(2) {
  opacity: 0;
}

.menu-toggle.is-open span:nth-child(3) {
  transform: translateY(-7.5px) rotate(-45deg);
}

@media (max-width: 960px) {
  .main-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    padding: 12px 24px 20px;
    background: var(--sky-bottom);
    border-bottom: 1px solid rgba(27, 58, 107, 0.08);
    display: none;
  }

  .main-nav a:not(.btn-cta) {
    padding: 10px 0;
  }

  .site-header.is-menu-open .main-nav {
    display: flex;
  }

  .btn-cta {
    margin: 10px 0 0;
  }

  .menu-toggle {
    display: flex;
    /* .main-nav chuyển position:absolute ở breakpoint này nên bung khỏi
       luồng flex của .header-inner — chỉ còn lại .logo + .menu-toggle làm
       2 flex item, tự dồn sát trái theo mặc định (justify-content chưa
       khai ở .header-inner). margin-left:auto đẩy nút hamburger sát mép
       phải, cùng kỹ thuật đã dùng cho .btn-cta ở desktop. */
    margin-left: auto;
  }
}

@media (max-width: 640px) {
  .header-inner {
    height: 80px;
  }

  /* 28px gốc → 40px (yêu cầu trước) → 68px (phóng to thêm 70%). */
  .logo-img {
    height: 68px;
  }
}

/* ---------- Section 4: Đăng ký học bổng ---------- */
/* Nền + chữ trang trí (trái/phải) giờ nằm trong ảnh thật dùng chung với
   section 3 (.s34-bg phía trên) — không cần gradient/khối chữ tự code
   riêng nữa. */
/* padding-bottom tăng lên 120px — chỗ AN TOÀN cho phần đè của section 5
   phía dưới (xem .testimonials), không bao giờ chạm vào thẻ đăng ký. */
.register {
  padding: 24px 0 120px;
}

.register-inner {
  display: flex;
  justify-content: center;
}

.register-card {
  width: 100%;
  max-width: 460px;
  background: var(--white);
  border-radius: 24px;
  padding: 32px 36px 28px;
  box-shadow: 0 24px 60px rgba(122, 65, 15, 0.18);
}

.register-card-title {
  margin: 0 0 20px;
  text-align: center;
  text-transform: uppercase;
  font-family: "Montserrat", "Be Vietnam Pro", sans-serif;
  font-weight: 800;
  font-size: 1.125rem;
  color: var(--navy);
}

.register-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Compound selector thắng UA-stylesheet [hidden]{display:none} — cần thiết
   vì .register-field{display:flex} tự thân đã thắng theo specificity. */
.register-field[hidden] {
  display: none;
}

.register-field {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border: 1px solid #e6d9cb;
  border-radius: 12px;
  background: #fdfaf6;
}

.register-field svg {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  color: var(--orange-dark);
}

.register-field input,
.register-field select {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: none;
  font-family: "Be Vietnam Pro", sans-serif;
  font-size: 0.875rem;
  color: var(--navy);
}

.register-field select {
  cursor: pointer;
}

.register-msg {
  margin: 0;
  min-height: 1.2em;
  font-size: 0.8125rem;
  text-align: center;
}

.register-msg.is-error {
  color: #dc2626;
}

.register-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 4px;
  padding: 14px;
  border: none;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--orange), var(--orange-dark));
  color: var(--white);
  font-family: "Montserrat", "Be Vietnam Pro", sans-serif;
  font-weight: 800;
  font-size: 0.9375rem;
  letter-spacing: 0.02em;
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(239, 108, 26, 0.35);
  transition: transform 0.15s ease;
}

.register-submit:hover {
  transform: translateY(-1px);
}

.register-submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

.register-submit svg {
  width: 17px;
  height: 17px;
}

.register-note {
  margin: 16px 0 0;
  text-align: center;
  font-size: 0.75rem;
  color: var(--text-gray);
}

.register-note span {
  margin: 0 4px;
  color: #d6c5b3;
}

@media (max-width: 640px) {
  .register-card {
    padding: 26px 20px 22px;
  }
}

/* ---------- Section 5: Cảm nhận phụ huynh & học viên ---------- */
/* Nền gradient TẠM (xanh lá công viên nhạt) — ảnh nền thật người dùng sẽ
   gửi sau (2026-09-21), chỉ cần đổi "background" thành background-image
   khi có ảnh thật. */
/* Ảnh nền thật do người dùng cung cấp (2026-09-21) — tỉ lệ rất rộng/thấp
   (2170:725 ≈ 3:1) nên dùng cover + position:top để luôn phủ kín chiều
   cao thật của nội dung (tiêu đề + 3 thẻ + tagline, thường cao hơn hẳn
   tỉ lệ gốc ảnh), ưu tiên giữ trọn phần bầu trời/skyline phía trên. Bỏ
   màu nền dự phòng (từng đặt xanh lá) — chính ảnh có mép rách TRONG SUỐT
   ở mép trên, để lộ màu dự phòng ra thành 1 dải xanh lá lạc quẻ; không
   đặt màu nền riêng thì mép đó tự trong suốt, hoà với nền trắng mặc định
   của trang phía sau. */
/* Đè lên phần nền kem của section 4 (margin-top âm, chặn tối đa -100px
   bằng max() — khớp đúng padding-bottom mới của .register nên luôn an
   toàn, không chạm vào thẻ đăng ký). Mép rách trong suốt ở đỉnh ảnh giờ
   lộ ra màu kem của section 4 phía sau thay vì nền trắng của trang. */
.testimonials {
  position: relative;
  z-index: 3;
  margin-top: max(-100px, -7vw);
  padding: 64px 0 56px;
  background: url("../images/bg-section-5.png?v=1") no-repeat top center;
  background-size: cover;
}

.testimonials-title {
  margin: 0 0 40px;
  text-align: center;
  text-transform: uppercase;
  font-family: "Montserrat", "Be Vietnam Pro", sans-serif;
  font-weight: 900;
  font-size: clamp(1.375rem, 2.8vw, 1.875rem);
  color: var(--navy);
  text-shadow: 0 2px 10px rgba(255, 255, 255, 0.85), 0 1px 3px rgba(255, 255, 255, 0.85);
}

.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.testimonial-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 28px 22px 24px;
  background: rgba(255, 255, 255, 0.85);
  border-radius: 20px;
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.08);
}

.testimonial-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  margin-bottom: 14px;
  border-radius: 50%;
  font-family: "Montserrat", "Be Vietnam Pro", sans-serif;
  font-weight: 800;
  font-size: 1.0625rem;
  color: var(--white);
}

.testimonial-avatar-blue {
  background: linear-gradient(135deg, var(--card-blue), #1e4fc4);
}

.testimonial-avatar-pink {
  background: linear-gradient(135deg, var(--card-pink), #c22a75);
}

.testimonial-avatar-orange {
  background: linear-gradient(135deg, var(--orange), var(--orange-dark));
}

.testimonial-quote {
  margin: 0 0 14px;
  font-size: 0.875rem;
  font-style: italic;
  line-height: 1.6;
  color: var(--navy-dark);
}

.testimonial-stars {
  margin-bottom: 10px;
  color: var(--icon-yellow, #f5b70e);
  letter-spacing: 2px;
  font-size: 0.9375rem;
}

.testimonial-name {
  margin: 0;
  font-family: "Montserrat", "Be Vietnam Pro", sans-serif;
  font-weight: 800;
  font-size: 0.9375rem;
  color: var(--navy);
}

.testimonial-name span {
  font-weight: 600;
  color: var(--text-gray);
}

.testimonial-role {
  margin: 2px 0 0;
  font-size: 0.75rem;
  color: var(--text-gray);
}

.testimonials-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 32px 0 0;
}

.testimonials-dots span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #cbd5c9;
}

.testimonials-dots span.is-active {
  width: 22px;
  border-radius: 999px;
  background: var(--orange-dark);
}

.testimonials-tagline {
  margin-top: 28px;
  text-align: center;
}

.tagline-brand {
  margin: 0;
  font-family: "Georgia", "Be Vietnam Pro", serif;
  font-style: italic;
  font-weight: 700;
  font-size: 1.75rem;
  color: var(--orange-dark);
  text-shadow: 0 2px 8px rgba(255, 255, 255, 0.85);
}

.tagline-text {
  margin: 4px 0 0;
  font-family: "Georgia", "Be Vietnam Pro", serif;
  font-style: italic;
  font-size: 1rem;
  color: var(--navy);
  text-shadow: 0 2px 8px rgba(255, 255, 255, 0.85);
}

@media (max-width: 900px) {
  .testimonials-grid {
    grid-template-columns: 1fr;
    max-width: 420px;
    margin: 0 auto;
    gap: 20px;
  }
}

/* ---------- Footer ---------- */
.site-footer {
  background: var(--navy-dark);
  padding: 44px 0 32px;
}

/* Lưới 3 cột: Thương hiệu (rộng hơn, chứa logo+tagline+địa bàn) / Liên hệ /
   Kết nối mạng xã hội — align-items:start để 3 cột không bị kéo giãn theo
   chiều cao cột cao nhất (mỗi cột tự nhiên cao theo đúng nội dung). */
.footer-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  gap: 36px;
  align-items: start;
}

.footer-col {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

.footer-col-title {
  font-family: "Montserrat", "Be Vietnam Pro", sans-serif;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--white);
}

.footer-brand {
  display: flex;
  align-items: center;
  gap: 10px;
}

.footer-logo-icon {
  width: 40px;
  height: 40px;
  object-fit: contain;
}

.footer-brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}

.footer-brand-text strong {
  font-family: "Montserrat", "Be Vietnam Pro", sans-serif;
  font-weight: 800;
  font-size: 1.0625rem;
  color: var(--white);
  letter-spacing: 0.02em;
}

.footer-brand-text span {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--orange);
}

.footer-locations {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.65);
}

.footer-locations svg {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin-top: 2px;
  color: var(--orange);
}

.footer-link {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--white);
}

.footer-link svg {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  color: var(--orange);
}

.footer-link:hover {
  color: var(--orange);
}

.footer-social-icons {
  display: flex;
  gap: 10px;
}

.footer-social-icons a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--white);
  color: var(--navy-dark);
}

.footer-social-icons a:hover {
  background: var(--orange);
  color: var(--white);
}

.footer-social-icons svg {
  width: 17px;
  height: 17px;
}

@media (max-width: 760px) {
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }
}

/* ---------- Popup "Đăng ký thành công" ---------- */
.reg-success-overlay[hidden] {
  display: none;
}

.reg-success-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(27, 58, 107, 0.55);
}

.reg-success-modal {
  position: relative;
  width: 100%;
  max-width: 400px;
  padding: 36px 32px 32px;
  border-radius: 20px;
  background: var(--white);
  text-align: center;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.3);
}

.reg-success-close {
  position: absolute;
  top: 14px;
  right: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 50%;
  background: #f4ede4;
  color: var(--text-gray);
  cursor: pointer;
}

.reg-success-close svg {
  width: 16px;
  height: 16px;
}

.reg-success-close:hover {
  background: #fee2e2;
  color: #dc2626;
}

.reg-success-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  margin-bottom: 16px;
  border-radius: 50%;
  background: #ecfdf3;
  color: #15803d;
}

.reg-success-icon svg {
  width: 34px;
  height: 34px;
}

.reg-success-title {
  margin: 0 0 10px;
  font-family: "Montserrat", "Be Vietnam Pro", sans-serif;
  font-weight: 800;
  font-size: 1.25rem;
  color: var(--navy);
}

.reg-success-text {
  margin: 0 0 24px;
  font-size: 0.875rem;
  line-height: 1.7;
  color: var(--text-gray);
}

/* Dùng chung cho cả <button> (đóng popup thường) lẫn <a> (nút "THAM GIA
   NHÓM" trỏ Zalo, mở tab mới) — display:inline-flex + box-sizing để
   width:100% và canh giữa chữ hoạt động đúng trên thẻ <a> vốn inline mặc
   định, không ảnh hưởng gì tới <button> (vốn đã hoạt động đúng). */
.reg-success-ok {
  box-sizing: border-box;
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 13px;
  border: none;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--orange), var(--orange-dark));
  color: var(--white);
  text-decoration: none;
  font-family: "Montserrat", "Be Vietnam Pro", sans-serif;
  font-weight: 800;
  font-size: 0.9375rem;
  letter-spacing: 0.02em;
  cursor: pointer;
}

/* ---------- Thanh CTA ghim đáy màn hình (mobile) ---------- */
/* Ẩn hẳn desktop/tablet — nút "Nhận học bổng ngay" trong .main-nav vẫn đủ
   dùng ở đó. CHỈ bật ở mobile (≤640px — nút gốc trong header bị ẩn khỏi
   .main-nav ở breakpoint 960px, chỉ hiện khi mở menu hamburger, rất dễ mất
   dấu khi lướt dài). z-index thấp hơn .site-header (50) để không đè lên
   khi cuộn tới đỉnh trang. */
.mobile-sticky-cta {
  display: none;
}

@media (max-width: 640px) {
  .mobile-sticky-cta {
    display: block;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 40;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
    background: var(--white);
    border-top: 1px solid rgba(27, 58, 107, 0.1);
    box-shadow: 0 -6px 20px rgba(15, 23, 42, 0.08);
    transition: transform 0.25s ease;
  }

  /* Tự ẩn (trượt xuống dưới màn hình) khi form #dang-ky thật đã vào khung
     nhìn — gắn/gỡ bằng IntersectionObserver, xem initMobileStickyCta()
     trong js/script.js — tránh nút nổi che khuất chính form cần điền. */
  .mobile-sticky-cta.is-hidden {
    transform: translateY(120%);
  }

  .mobile-sticky-cta a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 13px;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--orange), var(--orange-dark));
    color: var(--white);
    text-decoration: none;
    font-family: "Montserrat", "Be Vietnam Pro", sans-serif;
    font-weight: 800;
    font-size: 0.9375rem;
    box-shadow: 0 8px 20px rgba(239, 108, 26, 0.35);
  }

  /* Chừa khoảng trống bằng chiều cao thanh CTA ở cuối trang để nút không
     che mất footer khi cuộn hết trang (thanh vẫn "is-hidden" lúc này vì
     #dang-ky đã qua khung nhìn từ lâu, nhưng vẫn phòng trường hợp JS lỗi
     không tải được/trình duyệt tắt JS) — cùng kỹ thuật đã dùng ở
     mc-micvang. */
  body {
    padding-bottom: 76px;
  }
}

/* ---------- 3 nút liên hệ nổi: Gọi / Zalo / Facebook ---------- */
/* Cố định góc phải, xếp dọc, luôn hiện ở MỌI kích thước màn hình (khác
   .mobile-sticky-cta chỉ dành riêng mobile) — đây là lối liên hệ nhanh,
   hữu ích cả trên desktop. z-index thấp hơn .site-header (50) nhưng cao
   hơn nội dung trang thường, cao hơn cả .mobile-sticky-cta (40) vì về mặt
   hình ảnh nhóm nút này "nổi trên" mọi thứ trừ header/popup. */
.floating-contacts {
  position: fixed;
  right: 16px;
  bottom: 24px;
  z-index: 45;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.floating-contact-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  color: var(--white);
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.25);
  transition: transform 0.15s ease;
}

.floating-contact-btn:hover {
  transform: translateY(-2px) scale(1.05);
}

.floating-contact-btn svg {
  position: relative;
  z-index: 1;
  width: 24px;
  height: 24px;
}

/* Vòng tỏa sóng liên tục — ::before phóng to dần + mờ dần rồi lặp lại vô
   hạn, background:inherit tự lấy đúng màu thương hiệu của từng nút (khai ở
   3 class con bên dưới). z-index:-1 để luôn nằm DƯỚI icon, không che mất
   icon khi vòng sóng phóng to đè lên. animation-delay lệch nhau giữa 3 nút
   để sóng toả không nháy đồng loạt trông giả/máy móc. */
.floating-contact-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 50%;
  background: inherit;
  animation: floating-contact-pulse 2s ease-out infinite;
}

@keyframes floating-contact-pulse {
  0% {
    transform: scale(1);
    opacity: 0.55;
  }
  100% {
    transform: scale(1.9);
    opacity: 0;
  }
}

.floating-contact-call {
  background: #22c55e;
}

.floating-contact-call::before {
  animation-delay: 0s;
}

/* Màu xanh dương chính thức của Zalo (#0068FF). */
.floating-contact-zalo {
  background: #0068ff;
}

.floating-contact-zalo::before {
  animation-delay: 0.4s;
}

/* Màu xanh dương chính thức của Facebook (#1877F2). */
.floating-contact-fb {
  background: #1877f2;
}

.floating-contact-fb::before {
  animation-delay: 0.8s;
}

@media (max-width: 640px) {
  /* Né thanh CTA ghim đáy (76px cao, xem .mobile-sticky-cta) — nâng cụm
     nút liên hệ lên trên, không chồng lấn. */
  .floating-contacts {
    right: 12px;
    bottom: 92px;
  }

  .floating-contact-btn {
    width: 46px;
    height: 46px;
  }

  .floating-contact-btn svg {
    width: 21px;
    height: 21px;
  }
}

/* ---------- Toast "vừa đăng ký" (social proof) ---------- */
/* Góc trái, đối xứng với .floating-contacts ở góc phải. Trượt vào từ mép
   trái + mờ dần (transform/opacity transition) khi thêm class "is-visible"
   bằng JS — xem initFakeSignupToast() trong js/script.js. */
.fake-signup-toast {
  position: fixed;
  left: 16px;
  bottom: 24px;
  z-index: 45;
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 280px;
  padding: 12px 16px;
  border-radius: 14px;
  background: var(--white);
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.18);
  transform: translateX(-120%);
  opacity: 0;
  transition: transform 0.4s ease, opacity 0.4s ease;
}

.fake-signup-toast[hidden] {
  display: none;
}

.fake-signup-toast.is-visible {
  transform: translateX(0);
  opacity: 1;
}

.fake-signup-avatar {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  color: var(--white);
  font-family: "Montserrat", "Be Vietnam Pro", sans-serif;
  font-weight: 800;
  font-size: 1rem;
}

/* Cùng 3 màu thương hiệu khóa học đã dùng ở .course-card-*/.course-card-blue
   h3 (xem phần "Section 2: 3 thẻ khóa học") — nhất quán màu theo đúng khóa
   học được nhắc tới trong toast. */
.fake-signup-avatar-blue {
  background: var(--card-blue);
}

.fake-signup-avatar-pink {
  background: var(--card-pink);
}

.fake-signup-avatar-orange {
  background: var(--orange-dark);
}

.fake-signup-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.fake-signup-body strong {
  font-family: "Montserrat", "Be Vietnam Pro", sans-serif;
  font-weight: 700;
  font-size: 0.875rem;
  color: var(--navy);
}

.fake-signup-body span {
  font-size: 0.75rem;
  color: var(--text-gray);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 640px) {
  /* Né thanh CTA ghim đáy (76px cao) — cùng mức nâng đã dùng cho
     .floating-contacts ở góc phải. */
  .fake-signup-toast {
    left: 12px;
    bottom: 92px;
    max-width: calc(100vw - 24px - 68px);
  }
}

/* ================= Tin tức (2026-09-29) — mục #tin-tuc + trang bai-viet.html ================= */
.news {
  padding: 64px 0 72px;
  background: linear-gradient(180deg, var(--sky-bottom) 0%, var(--white) 100%);
}

.news-title {
  margin: 0 0 10px;
  text-align: center;
  text-transform: uppercase;
  font-family: "Montserrat", "Be Vietnam Pro", sans-serif;
  font-weight: 900;
  font-size: clamp(1.375rem, 2.8vw, 1.875rem);
  color: var(--navy);
}

.news-sub {
  margin: 0 auto 36px;
  max-width: 560px;
  text-align: center;
  color: var(--text-gray);
  line-height: 1.6;
}

.news-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.news-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--white);
  border-radius: 20px;
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.08);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

a.news-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px rgba(15, 23, 42, 0.14);
}

.news-card-skeleton {
  min-height: 340px;
  background: linear-gradient(90deg, #eef2f7 25%, #f7f9fc 50%, #eef2f7 75%);
  background-size: 200% 100%;
  animation: news-shimmer 1.4s infinite linear;
}

@keyframes news-shimmer {
  from { background-position: 200% 0; }
  to { background-position: -200% 0; }
}

.news-card-cover {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  background: linear-gradient(135deg, var(--card-blue), var(--navy));
}

.news-card-cover img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.news-card-cover-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  font-family: "Montserrat", "Be Vietnam Pro", sans-serif;
  font-weight: 900;
  font-size: 1.5rem;
  color: rgba(255, 255, 255, 0.9);
  letter-spacing: 0.02em;
}

.news-card-cat {
  position: absolute;
  left: 14px;
  top: 14px;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--orange);
  color: var(--white);
  font-size: 0.75rem;
  font-weight: 700;
}

.news-card-cat-static {
  position: static;
  display: inline-block;
}

.news-card-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 10px;
  padding: 18px 20px 20px;
}

.news-card-title {
  font-size: 1.0625rem;
  line-height: 1.45;
  color: var(--navy-dark);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.news-card-excerpt {
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--text-gray);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.news-card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid #eef1f5;
  font-size: 0.8125rem;
  color: var(--text-gray);
}

.news-card-more {
  font-weight: 700;
  color: var(--orange-dark);
  white-space: nowrap;
}

.news-empty {
  grid-column: 1 / -1;
  margin: 0;
  padding: 28px;
  text-align: center;
  color: var(--text-gray);
  background: var(--white);
  border-radius: 20px;
}

.news-empty a {
  color: var(--card-blue);
  font-weight: 700;
}

.news-foot {
  margin: 28px 0 0;
  text-align: center;
  color: var(--text-gray);
  font-size: 0.875rem;
}

.news-foot[hidden] {
  display: none;
}

#news-note + .news-foot {
  margin-top: 12px;
}

.news-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 12px 24px;
  border-radius: 999px;
  border: 2px solid var(--navy);
  color: var(--navy);
  font-weight: 700;
  font-size: 0.9375rem;
  transition: background 0.2s ease, color 0.2s ease;
}

.news-btn:hover {
  background: var(--navy);
  color: var(--white);
}

.news-btn-orange {
  border-color: var(--orange);
  background: var(--orange);
  color: var(--white);
  white-space: nowrap;
}

.news-btn-orange:hover {
  border-color: var(--orange-dark);
  background: var(--orange-dark);
}

/* ---------- Trang chi tiết bài ---------- */
.article-page {
  padding: 28px 0 72px;
  background: linear-gradient(180deg, var(--sky-bottom) 0, var(--white) 360px);
}

.article-container {
  max-width: 1120px;
}

.article-loading,
.article-missing {
  padding: 80px 0;
  text-align: center;
  color: var(--text-gray);
}

.article-missing h1 {
  color: var(--navy);
}

.article-crumb {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 20px;
  font-size: 0.875rem;
  color: var(--text-gray);
}

.article-crumb a:hover {
  color: var(--card-blue);
}

.article-head {
  max-width: 820px;
}

.article-head h1 {
  margin: 14px 0 12px;
  font-family: "Montserrat", "Be Vietnam Pro", sans-serif;
  font-weight: 800;
  font-size: clamp(1.625rem, 3.6vw, 2.5rem);
  line-height: 1.25;
  color: var(--navy-dark);
}

.article-excerpt {
  margin: 0 0 12px;
  font-size: 1.0625rem;
  line-height: 1.7;
  color: #475569;
}

.article-meta {
  margin: 0;
  font-size: 0.875rem;
  color: var(--text-gray);
}

.article-cover {
  margin: 28px 0 0;
}

.article-cover img {
  display: block;
  width: 100%;
  max-height: 520px;
  object-fit: cover;
  border-radius: 20px;
}

.article-layout {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 40px;
  margin-top: 36px;
  align-items: start;
}

.article-layout > .article-body-wide {
  grid-column: 1 / -1;
  max-width: 820px;
}

.article-side {
  position: sticky;
  top: 120px;
}

.article-toc {
  padding: 18px 18px 14px;
  background: var(--white);
  border: 1px solid #e5eaf2;
  border-radius: 16px;
}

.article-toc strong {
  display: block;
  margin-bottom: 10px;
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--navy);
}

.article-toc ol {
  margin: 0;
  padding: 0;
  list-style: none;
  max-height: calc(100vh - 220px);
  overflow-y: auto;
}

.article-toc li a {
  display: block;
  padding: 6px 0 6px 10px;
  border-left: 2px solid #e5eaf2;
  font-size: 0.875rem;
  line-height: 1.45;
  color: #475569;
}

.article-toc li.lv3 a {
  padding-left: 22px;
  font-size: 0.8125rem;
}

.article-toc li a:hover {
  border-left-color: var(--orange);
  color: #3641F5;
}

/* Nội dung bài — cùng quy ước với forfuture.vn/news (tiêu đề #3641F5, chấm cam ở gạch đầu dòng). */
.article-body { color: #334155; font-size: 17px; line-height: 1.8; }
.article-body > div > :first-child { margin-top: 0; }
.article-body h2 { scroll-margin-top: 120px; margin: 2.4rem 0 0.9rem; font-size: 1.6rem; line-height: 1.3; font-weight: 800; color: #3641F5; }
.article-body h3 { scroll-margin-top: 120px; margin: 1.8rem 0 0.6rem; font-size: 1.25rem; line-height: 1.4; font-weight: 700; color: #3641F5; }
.article-body h4 { scroll-margin-top: 120px; margin: 1.4rem 0 0.5rem; font-size: 1.05rem; font-weight: 700; color: #3641F5; }
.article-body p, .article-body ul, .article-body ol, .article-body blockquote, .article-body figure, .article-body .table-wrap { margin: 0 0 1.15rem; }
.article-body ul { list-style: none; padding-left: 0.25rem; }
.article-body ul > li { position: relative; padding-left: 1.6rem; }
.article-body ul > li::before { content: ""; position: absolute; left: 0.2rem; top: calc(0.9em - 5px); width: 10px; height: 10px; border-radius: 9999px; background: #F7941D; box-shadow: 0 0 0 3px #FFEBD2; }
.article-body ol { list-style: decimal; padding-left: 1.5rem; }
.article-body ol > li::marker { color: #3641F5; font-weight: 700; }
.article-body li { margin: 0.35rem 0; }
.article-body a { color: #2563eb; text-decoration: underline; text-underline-offset: 3px; }
.article-body strong { color: #0f172a; font-weight: 700; }
.article-body blockquote { border-left: 4px solid #2563eb; background: #eff6ff; border-radius: 0 12px 12px 0; padding: 0.9rem 1.2rem; color: #1e3a8a; }
.article-body code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.88em; background: #f1f5f9; padding: 0.12em 0.4em; border-radius: 6px; }
.article-body img { max-width: 100%; height: auto; border-radius: 14px; }
.article-body figcaption { margin-top: 0.5rem; text-align: center; font-size: 0.9rem; color: #64748b; font-style: italic; }
.article-body hr { border: 0; border-top: 1px solid #e2e8f0; margin: 2rem 0; }
.article-body .table-wrap { overflow-x: auto; border: 1px solid #e2e8f0; border-radius: 12px; }
.article-body table { width: 100%; border-collapse: collapse; font-size: 0.95rem; line-height: 1.6; }
.article-body th, .article-body td { border-bottom: 1px solid #e2e8f0; padding: 0.7rem 0.9rem; text-align: left; vertical-align: top; }
.article-body th { background: #f8fafc; color: #0f172a; font-weight: 700; }
.article-body tr:last-child td { border-bottom: 0; }
.article-body details.faq-item { border: 1px solid #e2e8f0; border-radius: 14px; background: #fff; margin: 0 0 0.75rem; }
.article-body details.faq-item summary { cursor: pointer; list-style: none; padding: 1rem 3rem 1rem 1.2rem; font-weight: 700; color: #0f172a; position: relative; }
.article-body details.faq-item summary::-webkit-details-marker { display: none; }
.article-body details.faq-item summary::after { content: "+"; position: absolute; right: 1.2rem; top: 50%; transform: translateY(-50%); font-size: 1.3rem; color: #2563eb; }
.article-body details.faq-item[open] summary::after { content: "−"; }
.article-body details.faq-item > div { padding: 0 1.2rem 1rem; }
.article-body pre { position: relative; margin: 0 0 1.15rem; overflow-x: auto; border-radius: 14px; background: #0f172a; color: #e2e8f0; padding: 1.1rem 1.2rem; font-size: 0.9rem; line-height: 1.65; }
.article-body pre code { background: none; padding: 0; color: inherit; font-size: inherit; white-space: pre; }
.article-body pre code[data-lang]::before { content: attr(data-lang); position: absolute; top: 0.45rem; right: 0.8rem; font-size: 0.7rem; text-transform: uppercase; color: #94a3b8; }
.article-body iframe { display: block; width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0; border-radius: 14px; margin: 0 0 1.15rem; }

.article-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin: 2rem 0;
  padding: 20px 22px;
  border-radius: 18px;
  background: linear-gradient(135deg, var(--cream-peach-top), var(--cream-peach-bottom));
  border: 1px solid #f8d9bf;
}

.article-cta strong {
  display: block;
  margin-bottom: 4px;
  font-size: 1.0625rem;
  color: var(--navy-dark);
}

.article-cta span {
  display: block;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: #5b6475;
}

.article-body .article-cta a {
  text-decoration: none;
  color: var(--white);
}

.article-share {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 2rem;
  padding-top: 1.25rem;
  border-top: 1px solid #e2e8f0;
  font-size: 0.9375rem;
}

.article-share span {
  font-weight: 700;
  color: var(--navy);
}

.article-body .article-share a,
.article-share button {
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid #d5dce8;
  background: var(--white);
  color: var(--navy);
  font: 600 0.875rem "Be Vietnam Pro", sans-serif;
  text-decoration: none;
  cursor: pointer;
}

.article-related {
  margin-top: 56px;
}

.article-related .news-title {
  margin-bottom: 28px;
}

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

  .article-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }

  .article-side {
    position: static;
  }

  .article-toc ol {
    max-height: none;
  }
}

@media (max-width: 640px) {
  .news {
    padding: 48px 0 56px;
  }

  .news-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
  }

  .news-card-skeleton:nth-child(n + 2) {
    display: none;
  }

  .article-body {
    font-size: 16px;
  }

  .article-cta {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ---------- Bài nổi bật ở #tin-tuc (hiển thị ngay trên trang, "Đọc toàn bài" mở tại chỗ) ---------- */
.news-feature {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 0 36px;
  padding: 28px;
  background: var(--white);
  border-radius: 24px;
  box-shadow: 0 18px 44px rgba(15, 23, 42, 0.09);
}

.news-feature-cover {
  margin: 0;
}

.news-photo {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
  overflow: hidden;
  border-radius: 16px;
}

.news-photo img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.news-photo:hover img {
  transform: scale(1.03);
}

.news-feature-head {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.news-feature-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  margin: 0 0 12px;
  font-size: 0.8125rem;
  color: var(--text-gray);
}

.news-feature-tag {
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--orange);
  color: var(--white);
  font-weight: 700;
  font-size: 0.75rem;
}

.news-feature-title {
  margin: 0 0 20px;
  font-family: "Montserrat", "Be Vietnam Pro", sans-serif;
  font-weight: 800;
  font-size: clamp(1.25rem, 2.2vw, 1.625rem);
  line-height: 1.35;
  color: var(--navy-dark);
}

.news-feature-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.news-feature-stats li {
  padding: 12px 10px;
  border-radius: 14px;
  background: var(--sky-bottom);
  text-align: center;
}

.news-feature-stats strong {
  display: block;
  font-family: "Montserrat", "Be Vietnam Pro", sans-serif;
  font-weight: 900;
  font-size: 1.25rem;
  color: #3641F5;
}

.news-feature-stats span {
  display: block;
  margin-top: 2px;
  font-size: 0.75rem;
  line-height: 1.4;
  color: var(--text-gray);
}

.news-feature-body {
  grid-column: 1 / -1;
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid #eef1f5;
  font-size: 1rem;
  line-height: 1.8;
  color: #334155;
}

.news-feature-body p {
  margin: 0 0 1rem;
  text-align: justify;
}

.news-feature-body strong {
  color: var(--navy-dark);
}

.news-feature-more {
  display: none;
}

.news-feature-body.is-open .news-feature-more {
  display: block;
}

.news-gallery {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 6px 0 20px;
}

.news-gallery .news-photo {
  border-radius: 12px;
}

.news-feature-source {
  font-size: 0.875rem;
  color: var(--text-gray);
}

.news-feature-source a {
  color: var(--card-blue);
  font-weight: 600;
}

.news-feature-body .article-cta a {
  color: var(--white);
}

.news-feature-toggle {
  display: flex;
  margin: 8px auto 0;
  cursor: pointer;
  background: var(--white);
  font-family: inherit;
}

.news-more {
  margin-top: 44px;
}

.news-more[hidden] {
  display: none;
}

.news-more-title {
  margin: 0 0 20px;
  font-family: "Montserrat", "Be Vietnam Pro", sans-serif;
  font-weight: 800;
  font-size: 1.25rem;
  color: var(--navy);
}

.news-lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(10, 18, 36, 0.92);
}

.news-lightbox[hidden] {
  display: none;
}

.news-lightbox img {
  max-width: min(1280px, 100%);
  max-height: 86vh;
  border-radius: 12px;
}

.news-lightbox button {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  color: var(--white);
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
}

.news-lightbox button:hover {
  background: rgba(255, 255, 255, 0.28);
}

.news-lightbox-close {
  top: 16px;
  right: 16px;
}

.news-lightbox-nav.prev {
  left: 16px;
}

.news-lightbox-nav.next {
  right: 16px;
}

@media (max-width: 900px) {
  .news-feature {
    grid-template-columns: minmax(0, 1fr);
    padding: 18px;
  }

  .news-feature-head {
    margin-top: 18px;
  }

  .news-gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .news-feature-stats strong {
    font-size: 1.0625rem;
  }

  .news-feature-body p {
    text-align: left;
  }

  .news-lightbox-nav {
    top: auto;
    bottom: 20px;
  }
}

.news {
  scroll-margin-top: 90px;
}

/* Ô ngày sinh (trang phường Đông Hải): nhãn cố định vì ô ngày không có chữ gợi ý. */
.register-field--date .register-field-label {
  flex-shrink: 0;
  font-size: 0.875rem;
  color: var(--text-gray);
  white-space: nowrap;
}

.register-field--date input[type="date"] {
  text-align: right;
  cursor: pointer;
}