/* ================================================================
   TRANG CHỦ — lớp bổ sung 12/10/2026 (NGACH-009). CHỈ trang chủ nạp tệp này.

   0. Dải mỏng báo “Môn AI” ngay dưới thanh đầu trang (nổi bật mà không át tiếng Anh).
   1. Khối “Môn AI” có ảnh, nền xanh đậm — khối tối duy nhất trên một trang sáng;
      từ 12/10 23:4x nằm ngay SAU phần tiếng Anh (bản 22:1x đặt trước hero làm
      tiêu đề tiếng Anh tụt khỏi màn hình đầu trên điện thoại).
   2. Sửa ba thẻ nhỏ ở bàn cố vấn bị gãy chữ (đo 12/10, khung 1378px: thẻ
      rộng 126px, chấm vàng nằm cùng dòng đẩy tên thẻ xuống hai dòng lệch).
   ================================================================ */

/* ---------- 0. Dải báo “Môn AI” ngay dưới thanh đầu trang ----------
   Thầy 12/10 23:3x: “nếu để thế tiếng Anh có bị át đi” ⇒ đầu trang chỉ còn MỘT DẢI MỎNG;
   khối lớn có ảnh (mục 1) dời xuống ngay SAU phần tiếng Anh. */
.ai-dai { background: #17344d; color: #fff; }
.ai-dai a { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; padding: 9px 0; min-height: 48px; color: #fff; text-decoration: none; font-size: .92rem; line-height: 1.4; }
.ai-dai b { flex: none; background: var(--gold); color: var(--ink); border-radius: 999px; padding: 2px 11px; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; }
.ai-dai-chu { flex: 1 1 150px; }
.ai-dai-di { flex: none; font-weight: 700; color: var(--gold); white-space: nowrap; }
.ai-dai a:hover .ai-dai-di, .ai-dai a:active .ai-dai-di { text-decoration: underline; }
.ai-dai a:focus-visible { outline: 3px solid var(--gold); outline-offset: -3px; }

/* ---------- 1. Khối Môn AI (nằm ngay sau phần tiếng Anh) ---------- */
.ai-nb { padding: 26px 0 26px; background: #fff; }
.ai-nb-the {
  --ai-dem: #17344d;                 /* xanh đêm — lấy từ vùng tối của ảnh minh hoạ */
  position: relative; display: grid; grid-template-columns: 1fr; overflow: hidden;
  background: var(--ai-dem); color: #fff; border-radius: 22px;
  box-shadow: 0 18px 44px rgba(23, 52, 77, .22);
}
.ai-nb-anh { position: relative; margin: 0; min-height: 180px; }
.ai-nb-anh img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; display: block; aspect-ratio: 16 / 9; }
.ai-nb-anh figcaption { position: absolute; right: 10px; bottom: 8px; font-size: .68rem; color: #fff; background: rgba(23, 52, 77, .62); padding: 2px 9px; border-radius: 999px; }
.ai-nb-chu { padding: 22px 22px 24px; }
.ai-nb-nhan { display: inline-flex; align-items: center; gap: 9px; font-size: .74rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: #cfe2f1; }
.ai-nb-nhan b { background: var(--gold); color: var(--ink); border-radius: 999px; padding: 3px 11px; letter-spacing: .08em; }
.ai-nb-ten { font-family: 'Fraunces', Georgia, serif; font-size: 1.62rem; line-height: 1.22; color: #fff; margin: 10px 0 8px; }
.ai-nb-mo { color: #dbe8f3; font-size: .98rem; line-height: 1.65; max-width: 440px; }
.ai-nb-nut { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.ai-nb-nut .btn.ai-nb-phu { background: transparent; color: #fff; border: 1.5px solid rgba(255, 255, 255, .55); }
.ai-nb-nut .btn.ai-nb-phu:hover, .ai-nb-nut .btn.ai-nb-phu:active { background: rgba(255, 255, 255, .12); filter: none; }
.ai-nb-the a:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }

@media (min-width: 761px) {
  .ai-nb { padding: 34px 0 34px; }
  .ai-nb-the { grid-template-columns: 1.02fr .98fr; align-items: stretch; }
  .ai-nb-chu { order: 1; padding: 24px 12px 26px 34px; align-self: center; }
  .ai-nb-anh { order: 2; min-height: 236px; }
  .ai-nb-anh img { position: absolute; inset: 0; aspect-ratio: auto; object-position: 60% 30%; }
  /* mép trái của ảnh tan vào nền xanh đêm */
  .ai-nb-anh::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 120px; z-index: 1;
    background: linear-gradient(90deg, var(--ai-dem) 0%, rgba(23, 52, 77, 0) 100%); pointer-events: none; }
  .ai-nb-ten { font-size: 2rem; }
}
@media (max-width: 480px) {
  .ai-nb-nut .btn { width: 100%; text-align: center; }
}

/* ---------- 2. Ba thẻ nhỏ ở bàn cố vấn ---------- */
@media (min-width: 561px) {
  .learning-card { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; padding: 12px 11px; }
  .learning-card i { margin: 0 0 3px; }
  .learning-card small { margin-top: 0; }
}

/* ---------- 3. Chuyển động (13/10/2026) — khung hình ở cao-cap.css ----------
   Khối Môn AI có viền VÀNG ÁNH KIM chạy quanh (cao-cap.js gắn); ảnh phóng nhẹ khi rê;
   nhãn vàng ở dải đầu trang và ở khối toả nhịp chậm để mắt bắt được. */
.ai-nb-anh img { transition: transform .7s ease; }
.ai-nb-the:hover .ai-nb-anh img { transform: scale(1.05); }
.ai-dai b, .ai-nb-nhan b { animation: cc-nhip 2.8s ease-out infinite; }
@media (hover: none) { .ai-nb-the:hover .ai-nb-anh img { transform: none; } }
@media (prefers-reduced-motion: reduce) { .ai-dai b, .ai-nb-nhan b { animation-duration: 4.2s; } }