/* ================================================================
   MÔN AI — lớp bổ sung cho mục /mon-ai/ (12/10/2026 · NGACH-009)
   Dùng lại style.css + v14.css của site; tệp này chỉ thêm: khối tình
   huống, công thức 4 bước và ô làm bài tại chỗ. Không đổi kiểu của
   trang nào khác (mọi lớp đều mang tiền tố .ai-).
   ================================================================ */

/* Danh sách có dấu chấm trong khối nội dung */
.ai-list { padding-left: 20px; margin-top: 10px; }
.ai-list li { margin-top: 5px; }

/* Khối tình huống */
.ai-th { background: #fff; border: 1px solid var(--border); border-radius: 16px; padding: 20px 22px; margin-top: 14px; }
.ai-th h3 { font-family: 'Be Vietnam Pro', sans-serif; font-size: 1.06rem; margin: 10px 0 8px; }
.ai-th p + p { margin-top: 10px; }
.ai-hoi { background: var(--blue-soft); border-radius: 12px; padding: 12px 16px; margin-top: 12px; font-size: .95rem; }
.ai-hoi strong { color: var(--blue-deep); }

/* Ảnh minh hoạ */
.ai-anh { margin: 14px 0 4px; }
.ai-anh img { width: 100%; height: auto; max-width: 100%; border-radius: 14px; display: block; }
.ai-anh figcaption { font-size: .8rem; color: var(--muted); margin-top: 6px; }

/* Công thức 4 bước */
.ai-ct { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 14px 0 6px; }
.ai-ct span { background: #fff; border: 1.5px solid var(--blue); color: var(--blue-deep); font-weight: 700; border-radius: 999px; padding: 6px 16px; font-size: .92rem; }
.ai-ct i { font-style: normal; color: var(--muted); }

/* Ô làm bài */
.ai-ws { background: #fff; border: 1px solid var(--border); border-radius: 18px; padding: 22px 20px; margin-top: 18px; box-shadow: 0 10px 28px rgba(43, 43, 43, .06); }
.ai-ws h3 { font-family: 'Be Vietnam Pro', sans-serif; font-size: 1.08rem; margin-bottom: 4px; }
.ai-ws .ai-goi { display: block; font-size: .86rem; color: var(--muted); font-weight: 400; margin-top: 2px; }
.ai-ws textarea { min-height: 96px; resize: vertical; line-height: 1.6; }
.ai-dem { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; margin: 6px 0 2px; font-size: .93rem; }
.ai-dem strong { font-variant-numeric: tabular-nums; font-size: 1.05rem; color: var(--ink); }
.ai-dem[data-muc="dat"] strong, .ai-dem[data-muc="dat"] #ai-nhan-xet { color: #1f6b3a; }
.ai-dem[data-muc="thieu"] #ai-nhan-xet, .ai-dem[data-muc="thua"] #ai-nhan-xet { color: #8a4b00; }
.ai-soat { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 8px; margin: 10px 0 4px; }
.ai-soat li { font-size: .84rem; border-radius: 999px; padding: 4px 12px; background: #f2f2f0; color: #5a5a5a; }
.ai-soat li[data-co="1"] { background: #e3f3e8; color: #1f6b3a; font-weight: 700; }
.ai-soat li[data-co="1"]::before { content: "\2713\00a0"; }
.ai-nut { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.ai-bao { margin-top: 10px; font-size: .93rem; min-height: 1.5em; font-weight: 600; color: #1f6b3a; }
.ai-bao[data-loai="nhac"] { color: #8a4b00; }
.ai-ws textarea[readonly] { background: var(--cream); min-height: 170px; font-size: .92rem; }
.ai-rieng { font-size: .86rem; color: var(--muted); margin-top: 10px; }

/* Chân trang gọn của mục Môn AI */
.ai-ft p + p { margin-top: 6px; }

@media (max-width: 480px) {
  .ai-th, .ai-ws { padding: 18px 16px; }
  .ai-nut .btn { width: 100%; text-align: center; }
}

/* ================================================================
   Bổ sung 12/10/2026 22:2x — Thầy: “cần nhiều hình ảnh hơn”
   ================================================================ */

/* Đầu trang danh mục có ảnh */
.ai-hero-luoi { display: grid; grid-template-columns: 1fr; gap: 24px; align-items: center; }
.ai-hero-anh { margin: 0; }
.ai-hero-anh img { width: 100%; height: auto; display: block; border-radius: 20px; box-shadow: 0 16px 38px rgba(47, 93, 128, .20); }
.ai-hero-anh figcaption { font-size: .76rem; color: var(--muted); margin-top: 7px; text-align: right; }
@media (min-width: 761px) { .ai-hero-luoi { grid-template-columns: 1fr 1fr; gap: 36px; } }

/* Thẻ bài học có ảnh */
.ai-bai { display: grid; grid-template-columns: 1fr; background: #fff; border: 1px solid var(--border); border-radius: 18px; overflow: hidden; text-decoration: none; color: inherit; margin-top: 14px; transition: transform .15s, box-shadow .15s, border-color .15s; }
.ai-bai:hover { border-color: var(--blue); box-shadow: 0 12px 28px rgba(74, 127, 165, .14); transform: translateY(-2px); }
.ai-bai img { width: 100%; height: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
.ai-bai-chu { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 6px; justify-content: center; }
.ai-bai-ten { font-family: 'Fraunces', Georgia, serif; font-size: 1.2rem; color: var(--ink); line-height: 1.3; }
.ai-bai-mo { font-size: .9rem; color: var(--muted); }
.ai-bai-di { font-weight: 700; color: var(--blue-deep); font-size: .92rem; margin-top: 4px; }
@media (min-width: 640px) { .ai-bai { grid-template-columns: 260px 1fr; } }
@media (hover: none) { .ai-bai:hover { transform: none; } .ai-bai:active { background: var(--blue-soft); } }

/* Năm nhóm thách thức — mỗi hàng một biểu tượng */
.ai-nhom { list-style: none; display: grid; gap: 10px; margin-top: 16px; }
.ai-nhom li { display: grid; grid-template-columns: 48px 1fr; gap: 14px; align-items: start; background: #fff; border: 1px solid var(--border); border-radius: 14px; padding: 14px 16px; }
.ai-bt { width: 48px; height: 48px; border-radius: 14px; background: var(--blue-soft); color: var(--blue-deep); display: flex; align-items: center; justify-content: center; }
.ai-nhom strong { display: block; color: var(--ink); }
.ai-nhom-mo { font-size: .93rem; }

/* Năm loại dữ liệu cần cẩn trọng */
.ai-dl { list-style: none; display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; margin-top: 12px; }
.ai-dl li { background: var(--cream); border: 1px solid var(--border); border-radius: 12px; padding: 12px 10px; text-align: center; font-size: .84rem; line-height: 1.4; color: var(--ink); display: flex; flex-direction: column; align-items: center; gap: 6px; }
.ai-dl svg { color: var(--blue-deep); }
.ai-dl li:last-child { grid-column: 1 / -1; }
@media (min-width: 700px) { .ai-dl { grid-template-columns: repeat(5, 1fr); } .ai-dl li:last-child { grid-column: auto; } }

/* Chuỗi nguyên nhân → hệ quả (thiên vị) */
.ai-chuoi { display: grid; grid-template-columns: 1fr; gap: 6px; margin: 14px 0 4px; align-items: stretch; }
.ai-chuoi div { background: var(--cream); border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; font-size: .9rem; text-align: center; color: var(--ink); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; }
.ai-chuoi svg { color: var(--blue-deep); }
.ai-chuoi i { font-style: normal; color: var(--muted); text-align: center; align-self: center; font-size: 1.1rem; }
.ai-chuoi i::before { content: "\2193"; }
@media (min-width: 700px) { .ai-chuoi { grid-template-columns: 1fr auto 1fr auto 1fr; gap: 10px; } .ai-chuoi i::before { content: "\2192"; } }

/* ================================================================
   Bổ sung 13/10/2026 — Thầy: “icon và layout chữ chưa nhảy · ảnh đưa chuột
   đến thì nổi lên và chạy viền · nơi cần nổi bật phải sáng chữ hoặc đóng ô”.
   Khung hình (@keyframes cc-noi, cc-nhay), viền chạy và nét bút dạ quang
   nằm ở cao-cap.css + cao-cap.js; ở đây chỉ là phần riêng của mục Môn AI.
   ================================================================ */

/* Biểu tượng năm nhóm: nhấp nhô so le, rê vào hàng thì nhảy một cái */
.ai-nhom .ai-bt { animation: cc-noi 3.4s ease-in-out infinite; }
.ai-nhom li:nth-child(2) .ai-bt { animation-delay: -.68s; }
.ai-nhom li:nth-child(3) .ai-bt { animation-delay: -1.36s; }
.ai-nhom li:nth-child(4) .ai-bt { animation-delay: -2.04s; }
.ai-nhom li:nth-child(5) .ai-bt { animation-delay: -2.72s; }
.ai-nhom li:hover .ai-bt { animation: cc-nhay .75s cubic-bezier(.3, .7, .3, 1) 1; }
.ai-nhom li:hover strong { color: var(--blue-deep); }

/* Ô dữ liệu và chuỗi nguyên nhân: nhấc lên, biểu tượng nhảy */
.ai-dl li, .ai-chuoi > div { transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease; }
.ai-dl li:hover, .ai-chuoi > div:hover { transform: translateY(-4px); border-color: rgba(255, 192, 32, .7); box-shadow: 0 12px 24px rgba(74, 127, 165, .16); background: #fff; }
.ai-dl li:hover svg, .ai-chuoi > div:hover svg { animation: cc-nhay .75s cubic-bezier(.3, .7, .3, 1) 1; }

/* Thẻ tình huống: nhấc nhẹ + viền vàng khi rê (thẻ to nên không dùng viền chạy) */
.ai-th { transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease; }
.ai-th:hover { transform: translateY(-3px); border-color: rgba(255, 192, 32, .65); box-shadow: 0 16px 36px rgba(74, 127, 165, .14); }

/* Thẻ bài học ở trang danh mục: ảnh phóng nhẹ khi rê */
.ai-bai > img { transition: transform .6s ease; }
.ai-bai:hover > img { transform: scale(1.05); }

/* Ô CẦN NỔI BẬT 1 — thông điệp của bài (viền chạy luôn bật: cao-cap.js) */
.ai-chot {
  position: relative; margin-top: 18px; padding: 16px 20px 17px; border-radius: 16px;
  background: linear-gradient(135deg, #fff 0%, #FFF7DF 100%);
  border: 1px solid rgba(255, 192, 32, .6);
  box-shadow: 0 12px 28px rgba(47, 93, 128, .10);
  font-size: 1.1rem; line-height: 1.55; color: var(--ink);
}
.ai-chot > strong { display: block; font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--blue-deep); margin-bottom: 4px; }

/* Ô CẦN NỔI BẬT 2 — câu hỏi / cách ứng xử / nguyên tắc sau mỗi tình huống */
.ai-hoi { border: 1.5px solid rgba(74, 127, 165, .34); background: linear-gradient(135deg, var(--blue-soft) 0%, #f7fbfd 100%); line-height: 1.7; }
.ai-hoi > strong { display: inline-block; background: #2f5d80; color: #fff; border-radius: 999px; padding: 0 11px; font-size: .78rem; letter-spacing: .03em; margin-right: 5px; }

/* Bốn bước của công thức: rê vào là sáng */
.ai-ct span { transition: transform .25s ease, background-color .25s ease, color .25s ease, box-shadow .25s ease; }
.ai-ct span:hover { background: var(--blue-deep); color: #fff; transform: translateY(-2px); box-shadow: 0 8px 18px rgba(47, 93, 128, .22); }

/* Ô làm bài: đang gõ thì khung sáng lên */
.ai-ws { transition: border-color .3s ease, box-shadow .3s ease; }
.ai-ws:focus-within { border-color: var(--gold); box-shadow: 0 0 0 4px rgba(255, 192, 32, .18), 0 16px 36px rgba(47, 93, 128, .12); }

@media (hover: none) {
  .ai-dl li:hover, .ai-chuoi > div:hover, .ai-th:hover { transform: none; }
  .ai-bai:hover > img { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .ai-nhom .ai-bt { animation-duration: 5s; }
  .ai-ct span, .ai-ws { transition-duration: .3s !important; transition-property: transform, background-color, color, box-shadow, border-color !important; }
}
@media (max-width: 480px) { .ai-chot { padding: 14px 16px 15px; font-size: 1.04rem; } }