/* ============================================================
   asiin.css — style chung của các cụm trang ngành (Programmes.cs):
   Cử nhân Trí tuệ nhân tạo, Chương trình Tiên tiến Khoa học máy tính.
   Chỉ nạp trên trang tổng quan và các trang tab của một cụm (Index.cshtml).
   Lấy từ bản thiết kế Contents/<cụm>/css/asiin.css, bỏ phần không dùng.
   Màu mặc định là của TTNT; asiin-<cụm>.css (nạp sau) đặt lại biến màu.
   Mọi class đều có tiền tố ai- để không đụng template Sandbox.
   ============================================================ */

:root {
  --ai-navy: #35306b;
  --ai-navy-2: #262254;
  --ai-ink: #2b3245;
  --ai-mut: #60687a;
  --ai-line: #e6e9f1;
  --ai-soft: #f5f6fa;
  --ai-gold: #f5a623;
  --ai-gold-soft: #fff4e0;
  /* Màu riêng của từng cụm trang: giá trị dưới đây là của TTNT, asiin-<cụm>.css đặt lại */
  --ai-hero-a: #2f2a63;
  --ai-hero-b: #262254;
  --ai-hero-c: #1f1c46;
  --ai-glow: #5a54b8;
  --ai-eyebrow: #8a5c06;        /* nhãn mục — phải đạt tương phản ≥ 4.5:1 trên nền trắng */
  --ai-tint: #ecebf7;
  --ai-tint-2: #f7f2e6;
  --ai-tag-ink: #5c5a8a;
  --ai-tag-bg: #efeef8;
  --ai-chip-gold-line: #f3dfb5;
  --ai-chip-gold-ink: #8a6414;
  --ai-ring: #edecf6;
  --ai-rail: #d6d4ea;
  --ai-track: #e3e1f2;
  --ai-blk-1: #35306b;
  --ai-blk-2: #6f68b8;
  --ai-blk-3: #b9b5e3;
  --ai-blk-4: #f5a623;
  --ai-radius: 1rem;
  --ai-shadow: 0 .6rem 1.8rem rgba(30, 34, 40, .07);
  --ai-shadow-lg: 0 1rem 2.6rem rgba(30, 34, 40, .12);
}

/* ---------- 0. Hiệu ứng xuất hiện khi cuộn ---------- */
html.js .reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .55s ease, transform .55s ease;
}

html.js .reveal.in {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  html.js .reveal { opacity: 1; transform: none; transition: none; }
}

html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* ---------- 1. Hero ---------- */
.ai-hero {
  position: relative;
  background: linear-gradient(140deg, var(--ai-hero-a) 0%, var(--ai-hero-b) 55%, var(--ai-hero-c) 100%);
  color: #fff;
  overflow: hidden;
}

.ai-hero::before,
.ai-hero::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  opacity: .35;
  pointer-events: none;
}

.ai-hero::before {
  width: 480px; height: 480px;
  background: var(--ai-glow);
  top: -180px; right: -120px;
}

.ai-hero::after {
  width: 380px; height: 380px;
  background: var(--ai-gold);
  bottom: -220px; left: -140px;
  opacity: .16;
}

.ai-hero .container { position: relative; z-index: 1; }

.ai-hero-home { padding: 4.4rem 0 3.6rem; }

.ai-hero-bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center 35%;
  pointer-events: none;
}

.ai-hero-shade {
  position: absolute; inset: 0;
  background: linear-gradient(100deg, var(--ai-hero-a) 0%, var(--ai-hero-b) 44%, color-mix(in srgb, var(--ai-hero-b) 84%, transparent) 62%, color-mix(in srgb, var(--ai-hero-c) 45%, transparent) 100%);
  transition: opacity .45s ease;
  pointer-events: none;
}

/* Lớp màu khi rê chuột (mode-reveal): giữ dải đậm bên trái cho chữ, nửa phải trong hẳn để thấy ảnh */
.ai-hero-shade-hover {
  opacity: 0;
  background: linear-gradient(90deg, var(--ai-hero-b) 0%, var(--ai-hero-b) 24%, color-mix(in srgb, var(--ai-hero-b) 55%, transparent) 40%, transparent 58%);
}

.ai-hero-home.has-img::before { display: none; }
.ai-hero-zone { position: absolute; top: 0; right: 0; bottom: 0; width: 46%; z-index: 2; }

.ai-hero-home.mode-reveal.reveal-on .ai-hero-shade { opacity: 0; }

.ai-hero-home.mode-reveal.reveal-on .ai-hero-shade-hover { opacity: 1; }

.ai-hero-home.mode-reveal.reveal-on .container { text-shadow: 0 1px 8px rgba(0, 0, 0, .45); }

.ai-hero-open { background: none; border: 0; padding: 0; cursor: zoom-in; display: block; width: 100%; text-decoration: none; }

.ai-hero-open-chip {
  position: absolute; right: 1.1rem; bottom: 1rem; z-index: 3; width: auto;
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .42rem .9rem; border-radius: 100px;
  background: rgba(255, 255, 255, .14); color: #fff; font-size: .74rem; font-weight: 600;
  border: 1px solid rgba(255, 255, 255, .35); backdrop-filter: blur(6px);
  transition: background .18s ease;
}

.ai-hero-open-chip:hover, .ai-hero-open-chip:focus-visible { background: rgba(255, 255, 255, .28); color: #fff; }

.ai-hero-home.has-img .lead { max-width: 560px; }

@media (max-width: 991.98px) {
  .ai-hero-zone { display: none; }
  .ai-hero-home.mode-reveal .ai-hero-shade {
    background: linear-gradient(180deg, var(--ai-hero-a) 0%, color-mix(in srgb, var(--ai-hero-b) 90%, transparent) 100%);
  }
}

/* Lightbox xem ảnh đầy đủ (tạo bằng JS trong asiin.js) */
.ai-lightbox {
  position: fixed; inset: 0; z-index: 2000;
  background: rgba(10, 12, 20, .92);
  display: flex; align-items: center; justify-content: center; padding: 1.2rem;
  animation: ai-lb-in .2s ease;
}

@keyframes ai-lb-in { from { opacity: 0; } to { opacity: 1; } }

.ai-lightbox img { max-width: 100%; max-height: 92vh; border-radius: .6rem; box-shadow: 0 1rem 3rem rgba(0, 0, 0, .6); }

.ai-lightbox-close {
  position: absolute; top: .9rem; right: 1rem;
  width: 2.6rem; height: 2.6rem; border-radius: 50%; border: 0;
  background: rgba(255, 255, 255, .16); color: #fff; font-size: 1.3rem; line-height: 1; cursor: pointer;
}

.ai-lightbox-close:hover { background: rgba(255, 255, 255, .3); }


.ai-hero-page { padding: 3.1rem 0 2.5rem; }

.ai-hero .ai-kicker {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .22);
  color: rgba(255, 255, 255, .92);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .04em;
  padding: .32rem .85rem;
  border-radius: 100px;
  margin-bottom: 1.1rem;
}

.ai-hero h1 {
  color: #fff;
  font-weight: 800;
  letter-spacing: -.01em;
  margin-bottom: .7rem;
}

.ai-hero-home h1 { font-size: calc(1.55rem + 1.6vw); line-height: 1.12; }

.ai-hero-page h1 { font-size: calc(1.25rem + .7vw); }

.ai-hero .lead {
  color: rgba(255, 255, 255, .88);
  font-size: .95rem;
  max-width: 640px;
  margin-bottom: 0;
}

.ai-hero-home .lead { margin-bottom: 1.6rem; }

.btn-ai-light {
  background: #fff !important;
  color: var(--ai-navy) !important;
  border: 0;
  font-weight: 700;
  border-radius: 100px;
  padding: .62rem 1.5rem;
  box-shadow: 0 .4rem 1.2rem rgba(0, 0, 0, .22);
}

.btn-ai-light:hover { transform: translateY(-2px); box-shadow: 0 .6rem 1.6rem rgba(0,0,0,.28); }

.btn-ai-ghost {
  background: transparent !important;
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, .45);
  font-weight: 600;
  border-radius: 100px;
  padding: .62rem 1.5rem;
}

.btn-ai-ghost:hover { background: rgba(255, 255, 255, .12) !important; }

/* Nút xanh đậm dùng trong thân trang (đi sang trang Khoa/Trường) */
.btn-ai-navy {
  background: var(--ai-navy) !important;
  color: #fff !important;
  border: 0;
  font-weight: 700;
  border-radius: 100px;
  padding: .55rem 1.3rem;
  font-size: .78rem;
}

.btn-ai-navy:hover { background: var(--ai-navy-2) !important; transform: translateY(-1px); }

.btn-ai-outline {
  background: #fff !important;
  color: var(--ai-navy) !important;
  border: 1px solid #cfd3e3;
  font-weight: 700;
  border-radius: 100px;
  padding: .55rem 1.3rem;
  font-size: .78rem;
}

.btn-ai-outline:hover { border-color: var(--ai-navy); }

/* Số liệu trong hero */
.ai-hero-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 2.4rem;
  margin-top: 2.4rem;
}

.ai-hero-page .ai-hero-stats { margin-top: 1.5rem; gap: 2rem; }

.ai-hero-stats .hs { min-width: 96px; }

.ai-hero-stats .hs b {
  display: block;
  font-size: 1.75rem;
  font-weight: 800;
  color: #fff;
  line-height: 1.1;
}

.ai-hero-page .ai-hero-stats .hs b { font-size: 1.5rem; }

.ai-hero-stats .hs span {
  display: block;
  font-size: .72rem;
  color: rgba(255, 255, 255, .82);
  margin-top: .2rem;
  max-width: 150px;
}

/* ---------- 2. Nhãn mục + tiêu đề mục ---------- */
.ai-eyebrow {
  display: inline-block;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ai-eyebrow);
  margin-bottom: .5rem;
}

.ai-sec { padding: 3.6rem 0; }

.ai-sec-soft { background: var(--ai-soft); }

.ai-sec h2 {
  font-size: 1.45rem;
  font-weight: 800;
  color: var(--ai-navy);
  letter-spacing: -.01em;
  margin-bottom: .6rem;
}

.ai-sec .sec-sub {
  font-size: .85rem;
  color: var(--ai-mut);
  max-width: 640px;
  margin-bottom: 1.8rem;
}

.ai-sec h3.ai-h3 {
  font-size: .95rem;
  font-weight: 700;
  color: var(--ai-ink);
  margin: 1.6rem 0 .8rem;
}

.ai-anchor { scroll-margin-top: 140px; }

/* ---------- 3. Thẻ icon ---------- */
.ai-card {
  height: 100%;
  background: #fff;
  border: 1px solid var(--ai-line);
  border-radius: var(--ai-radius);
  padding: 1.5rem 1.4rem;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.ai-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--ai-shadow-lg);
  border-color: transparent;
}

.ai-card .ic {
  width: 2.7rem;
  height: 2.7rem;
  border-radius: .8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--ai-tint), var(--ai-tint-2));
  color: var(--ai-navy);
  font-size: 1.25rem;
  margin-bottom: .95rem;
}

.ai-card h3 {
  font-size: .95rem;
  font-weight: 700;
  color: var(--ai-ink);
  margin-bottom: .4rem;
}

.ai-card p {
  font-size: .8rem;
  color: var(--ai-mut);
  line-height: 1.6;
  margin-bottom: 0;
}

/* Thẻ là liên kết */
a.ai-card { display: block; text-decoration: none; color: inherit; }

a.ai-card .go,
.ai-card .go {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-size: .76rem;
  font-weight: 700;
  color: var(--ai-navy);
  margin-top: .8rem;
  text-decoration: none;
}

a.ai-card:hover .go { gap: .55rem; }

a.ai-card .go i { transition: transform .2s ease; }

/* Thẻ "trang có sẵn của Khoa" — viền chấm nhẹ + nhãn nhỏ góc trên */
.ai-card.ai-card-ext { position: relative; }

.ai-card .ai-tag {
  position: absolute;
  top: .9rem; right: .9rem;
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ai-tag-ink);
  background: var(--ai-tag-bg);
  border-radius: 100px;
  padding: .18rem .55rem;
}

/* ---------- 4. Chip ---------- */
.ai-chip {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  background: var(--ai-soft);
  border: 1px solid var(--ai-line);
  color: var(--ai-ink);
  font-size: .76rem;
  font-weight: 600;
  padding: .38rem .85rem;
  border-radius: 100px;
  margin: 0 .35rem .55rem 0;
}

.ai-chip i { color: var(--ai-navy); font-size: .9rem; }

.ai-chip-gold { background: var(--ai-gold-soft); border-color: var(--ai-chip-gold-line); color: var(--ai-chip-gold-ink); }

/* Chip là liên kết (hàng liên kết nhanh sang trang Khoa/Trường) */
a.ai-chip { text-decoration: none; transition: background .18s ease, border-color .18s ease; }

a.ai-chip:hover { background: #fff; border-color: var(--ai-navy); color: var(--ai-navy); }

.ai-linkrow { display: flex; flex-wrap: wrap; gap: .1rem; }

/* ---------- 5a. Thanh nhận diện ngành (subnav) ----------
   Dải điều hướng riêng của cụm Trí tuệ nhân tạo, nằm ngay dưới header
   của Khoa. Dính lại khi cuộn, ở dưới navbar nổi của template
   (navbar-clone có z-index 1008, cao ~76px khi thu gọn). */
.ai-subnav {
  position: sticky;
  top: 0;                      /* dính sát mép trên ngay khi cuộn qua header */
  z-index: 1007;
  background: linear-gradient(90deg, var(--ai-navy) 0%, var(--ai-navy-2) 100%);
  box-shadow: 0 .3rem .9rem rgba(30, 34, 40, .16);
  transition: top .3s ease;
}

/* Khi navbar nổi của template (navbar-clone) trượt xuống, thanh ngành lùi
   xuống nằm ngay dưới nó — JS trong asiin.js bật/tắt class này. */
.ai-subnav.under-navbar { top: 76px; }

.ai-subnav .container {
  display: flex;
  align-items: stretch;
  gap: 1.2rem;
}

.ai-subnav .sn-brand {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  color: #fff;
  font-weight: 700;
  font-size: .8rem;
  text-decoration: none;
  white-space: nowrap;
  padding: .62rem 0;
}

.ai-subnav .sn-brand i { color: var(--ai-gold); font-size: 1rem; }

.ai-subnav .sn-tabs {
  display: flex;
  align-items: stretch;
  gap: .1rem;
  overflow-x: auto;
  margin-left: auto;
  scrollbar-width: none;
}

.ai-subnav .sn-tabs::-webkit-scrollbar { display: none; }

.ai-subnav .sn-tabs a {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  color: rgba(255, 255, 255, .85);
  font-size: .76rem;
  font-weight: 600;
  text-decoration: none;
  padding: .62rem .7rem;
  white-space: nowrap;
  box-shadow: inset 0 -3px 0 transparent;
  transition: color .18s ease, box-shadow .18s ease, background .18s ease;
}

.ai-subnav .sn-tabs a:hover {
  color: #fff;
  background: rgba(255, 255, 255, .07);
}

.ai-subnav .sn-tabs a.active {
  color: #fff;
  box-shadow: inset 0 -3px 0 var(--ai-gold);
}

@media (max-width: 1199.98px) {
  .ai-subnav .sn-brand span { display: none; }  /* chỉ còn icon, nhường chỗ cho tab */
  .ai-subnav .container { gap: .6rem; }
}

/* ---------- 5b. Hàng liên kết nhanh trong trang (không dính) ---------- */
.ai-pills {
  background: #fff;
  border-bottom: 1px solid var(--ai-line);
}

.ai-pills .container {
  display: flex;
  gap: .35rem;
  overflow-x: auto;
  padding-top: .55rem;
  padding-bottom: .55rem;
  scrollbar-width: none;
}

.ai-pills .container::-webkit-scrollbar { display: none; }

.ai-pills a {
  flex: 0 0 auto;
  font-size: .76rem;
  font-weight: 600;
  color: var(--ai-mut);
  text-decoration: none;
  padding: .38rem .95rem;
  border-radius: 100px;
  white-space: nowrap;
  transition: background .18s ease, color .18s ease;
}

.ai-pills a:hover { color: var(--ai-navy); background: var(--ai-soft); }

.ai-pills a.active { background: var(--ai-navy); color: #fff; }

/* Thanh mục trong trang: từ 768px trở lên xuống dòng thay vì cuộn ngang (tránh bị cắt mục cuối) */
@media (min-width: 768px) {
  .ai-pills .container { flex-wrap: wrap; overflow-x: visible; row-gap: .35rem; }
}
/* Hàng cuộn ngang (tab ngành trên màn hình hẹp, mục trong trang dưới 768px): JS gắn class has-more
   khi bên phải còn mục chưa hiện → vệt mờ báo "còn nữa, kéo sang" */
.ai-pills, .ai-subnav .container { position: relative; }
.ai-pills.has-more::after, .ai-subnav .container.has-more::after {
  content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 2.6rem; pointer-events: none;
}
.ai-pills.has-more::after { background: linear-gradient(90deg, rgba(255,255,255,0), #fff 70%); }
.ai-subnav .container.has-more::after { background: linear-gradient(90deg, rgba(0,0,0,0), var(--ai-navy-2) 70%); }

/* ---------- 6. Bảng ---------- */
.ai-table {
  font-size: .8rem;
  width: 100%;
  margin-bottom: 0;
}

.ai-table th {
  background: var(--ai-soft);
  color: var(--ai-navy);
  font-weight: 700;
  border-color: var(--ai-line) !important;
  vertical-align: middle;
}

.ai-table td { border-color: #edeff5 !important; vertical-align: top; }

.ai-table tbody tr:hover { background: #fafbfd; }

.ai-table .row-total { background: #f0f2f8; font-weight: 700; }

.ai-table .col-code {
  white-space: nowrap;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: .74rem;
  color: var(--ai-navy);
}

.ai-table .col-num { text-align: center; white-space: nowrap; }

.ai-tablebox {
  border: 1px solid var(--ai-line);
  border-radius: var(--ai-radius);
  overflow: hidden;
  background: #fff;
}


/* ---------- 7. Accordion ---------- */
.ai-acc .ai-acc-item {
  background: #fff;
  border: 1px solid var(--ai-line);
  border-radius: var(--ai-radius);
  margin-bottom: .75rem;
  overflow: hidden;
}

.ai-acc button.ai-acc-btn {
  width: 100%;
  display: flex;
  align-items: center;
  gap: .9rem;
  background: none;
  border: 0;
  text-align: left;
  padding: 1.05rem 1.25rem;
  cursor: pointer;
}

.ai-acc .ai-acc-btn .t {
  flex: 1;
  font-size: .88rem;
  font-weight: 700;
  color: var(--ai-ink);
}

.ai-acc .ai-acc-btn .t small {
  display: block;
  font-weight: 500;
  font-size: .72rem;
  color: var(--ai-mut);
  margin-top: .1rem;
}

.ai-acc .ai-acc-btn .badge-tc {
  flex: 0 0 auto;
  font-size: .68rem;
  font-weight: 700;
  color: var(--ai-navy);
  background: var(--ai-soft);
  border-radius: 100px;
  padding: .28rem .7rem;
  white-space: nowrap;
}

.ai-acc .ai-acc-btn .chev {
  flex: 0 0 auto;
  color: var(--ai-mut);
  transition: transform .25s ease;
  font-size: 1.05rem;
}

.ai-acc .ai-acc-btn[aria-expanded="true"] .chev { transform: rotate(180deg); }

.ai-acc .ai-acc-btn[aria-expanded="true"] .t { color: var(--ai-navy); }

.ai-acc .ai-acc-body { padding: 0 1.25rem 1.2rem; }

.ai-acc .ai-acc-body p { font-size: .8rem; color: var(--ai-mut); }

/* ---------- 8. Lộ trình 4 năm ---------- */
.ai-roadmap { position: relative; }

.ai-roadmap .step-col { position: relative; padding-top: .4rem; }

.ai-roadmap .yr {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.3rem;
  height: 2.3rem;
  border-radius: 50%;
  background: var(--ai-navy);
  color: #fff;
  font-weight: 800;
  font-size: .82rem;
  box-shadow: 0 0 0 5px var(--ai-ring);
  margin-bottom: .9rem;
}

.ai-roadmap .step-col h3 {
  font-size: .88rem;
  font-weight: 700;
  color: var(--ai-ink);
  margin-bottom: .35rem;
}

.ai-roadmap .step-col p {
  font-size: .78rem;
  color: var(--ai-mut);
  margin-bottom: 0;
}

@media (min-width: 768px) {
  .ai-roadmap::before {
    content: "";
    position: absolute;
    top: 1.55rem;
    left: 4%;
    right: 4%;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--ai-rail) 12%, var(--ai-rail) 88%, transparent);
  }
  .ai-roadmap .step-col { padding-right: 1.4rem; }
}

/* ---------- 9. Timeline dọc (quy trình) ---------- */
.ai-steps { list-style: none; padding: 0; margin: 0; position: relative; }

.ai-steps::before {
  content: "";
  position: absolute;
  top: .4rem; bottom: .4rem; left: .95rem;
  width: 2px;
  background: var(--ai-track);
}

.ai-steps li {
  position: relative;
  padding: 0 0 1.35rem 3rem;
}

.ai-steps li:last-child { padding-bottom: 0; }

.ai-steps .dot {
  position: absolute;
  left: 0; top: 0;
  width: 2rem; height: 2rem;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--ai-navy);
  color: var(--ai-navy);
  font-size: .76rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ai-steps b { display: block; font-size: .85rem; color: var(--ai-ink); margin-bottom: .15rem; }

.ai-steps p { font-size: .78rem; color: var(--ai-mut); margin: 0; }

/* ---------- 10. Ô nhấn mạnh ---------- */
.ai-note {
  background: var(--ai-soft);
  border: 1px solid var(--ai-line);
  border-radius: var(--ai-radius);
  padding: 1.1rem 1.3rem;
  font-size: .8rem;
}

.ai-note p:last-child { margin-bottom: 0; }

/* Ô "trang này do Khoa/Trường cập nhật" — giới thiệu ngắn + nút đi tiếp */
.ai-handoff {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
  background: #fff;
  border: 1px dashed #c9cce0;
  border-radius: var(--ai-radius);
  padding: 1.1rem 1.4rem;
}

.ai-handoff .tx { flex: 1 1 320px; }

.ai-handoff .tx p { margin: 0; font-size: .82rem; color: var(--ai-ink); }

.ai-handoff .tx small { display: block; font-size: .72rem; color: var(--ai-mut); margin-top: .25rem; }

.ai-handoff .ac { flex: 0 0 auto; display: flex; flex-wrap: wrap; gap: .5rem; }

/* Banner CTA */
.ai-cta {
  background: linear-gradient(135deg, var(--ai-navy) 0%, var(--ai-navy-2) 100%);
  border-radius: 1.2rem;
  color: #fff;
  padding: 2.2rem 2.4rem;
  position: relative;
  overflow: hidden;
}

.ai-cta::after {
  content: "";
  position: absolute;
  width: 260px; height: 260px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .07);
  top: -110px; right: -70px;
}

.ai-cta h3 { color: #fff; font-size: 1.15rem; font-weight: 800; margin-bottom: .35rem; }

.ai-cta p { color: rgba(255, 255, 255, .9); font-size: .82rem; margin-bottom: 0; max-width: 560px; }

/* ---------- 11. Thanh cơ cấu tín chỉ ---------- */
.ai-credits-bar {
  display: flex;
  border-radius: 100px;
  overflow: hidden;
  height: 1.5rem;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .04);
}

.ai-credits-bar span { display: block; height: 100%; }
/* Thẻ khối kiến thức: viền màu trái trùng màu thanh cơ cấu */
.ai-block { border-left: 5px solid var(--ai-navy); }

/* Màu từng khối (bộ lọc HTML của website bỏ biến CSS trong style="...", nên dùng class) */
.ai-block.blk-1 { border-left-color: var(--ai-blk-1); }
.ai-block.blk-2 { border-left-color: var(--ai-blk-2); }
.ai-block.blk-3 { border-left-color: var(--ai-blk-3); }
.ai-block.blk-4 { border-left-color: var(--ai-blk-4); }

.ai-block .tc {
  display: inline-block;
  font-size: .72rem;
  font-weight: 700;
  color: var(--ai-navy);
  background: var(--ai-soft);
  border-radius: 100px;
  padding: .2rem .6rem;
  margin-bottom: .55rem;
}

/* ---------- 12. FAQ ---------- */
.ai-faq .ai-acc-btn .t { font-size: .86rem; }

/* ---------- 13. Nội dung chữ ---------- */
.ai-body p, .ai-body li { font-size: .84rem; line-height: 1.7; color: #3a4254; }

/* Ghi đè độ ưu tiên — đặt SAU quy tắc .ai-body để không bị nền tối "nuốt" chữ */
.ai-body .ai-cta p { color: rgba(255, 255, 255, .9); font-size: .82rem; }
.ai-body .ai-card p { color: var(--ai-mut); font-size: .8rem; line-height: 1.6; }
.ai-body .ai-acc .ai-acc-body p { color: var(--ai-mut); font-size: .8rem; }
.ai-body .ai-roadmap .step-col p { color: var(--ai-mut); font-size: .78rem; }
.ai-body .ai-steps p { color: var(--ai-mut); font-size: .78rem; }
.ai-body .ai-handoff .tx p { color: var(--ai-ink); font-size: .82rem; }

.ai-list { list-style: none; padding-left: 0; }

.ai-list li { position: relative; padding-left: 1.5rem; margin-bottom: .5rem; }

.ai-list li::before {
  content: "\e9dd"; /* uil-check */
  font-family: "Unicons";
  position: absolute;
  left: 0; top: 0;
  color: var(--ai-gold);
  font-weight: 400;
}

/* Liên kết trong đoạn văn: có gạch chân để phân biệt không chỉ bằng màu (WCAG) */
.ai-body p a:not(.btn):not(.ai-chip),
.ai-body li a:not(.btn) {
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Biểu tượng "mở tab mới" tự gắn cho liên kết ngoài (asiin.js) */
.ai-ext { font-size: .85em; margin-left: .2em; opacity: .75; }

.ai-fine { font-size: .76rem; color: var(--ai-mut); }

/* Chuẩn đầu ra nguyên văn trong thẻ */
.ai-card ul.ai-plo { list-style: none; padding: 0; margin: 0; }
.ai-card ul.ai-plo li { font-size: .8rem; color: var(--ai-mut); line-height: 1.6; margin-bottom: .45rem; }
.ai-card ul.ai-plo li:last-child { margin-bottom: 0; }
.ai-card ul.ai-plo li strong { color: var(--ai-navy); font-weight: 700; margin-right: .15rem; }

/* ---------- 15. Bản in ---------- */
@media print {
  .navbar, .ai-pills, .ai-cta, .ai-subnav, .icon-bar, .progress-wrap { display: none !important; }
  .ai-hero { background: none !important; color: #000; }
  .ai-hero h1, .ai-hero .lead { color: #000 !important; }
}

/* ---------- 16. Màn hình nhỏ ---------- */
@media (max-width: 767.98px) {
  .ai-hero-home { padding: 3.4rem 0 3rem; }
  .ai-hero-stats { gap: 1.4rem 2rem; margin-top: 1.8rem; }
  .ai-sec { padding: 2.6rem 0; }
  .ai-cta { padding: 1.7rem 1.5rem; }
  .ai-handoff { padding: 1rem 1.1rem; }
}

/* ===== Bổ sung 31/10/2026 theo góp ý ===== */
/* Số liệu ở hero các trang con: dạng ô khối để nổi bật từng con số */
.ai-hero-page .ai-hero-stats { gap: .75rem; margin-top: 1.6rem; }
.ai-hero-page .ai-hero-stats .hs {
  min-width: 0; flex: 0 1 9.5rem;
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .22);
  border-top: 3px solid var(--ai-gold);
  border-radius: .7rem;
  padding: .8rem 1rem .75rem;
  backdrop-filter: blur(2px);
}
.ai-hero-page .ai-hero-stats .hs b { font-size: 1.9rem; letter-spacing: -.01em; }
.ai-hero-page .ai-hero-stats .hs span { font-size: .74rem; color: rgba(255, 255, 255, .9); margin-top: .3rem; }
@media (max-width: 575.98px) {
  .ai-hero-page .ai-hero-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ai-hero-page .ai-hero-stats .hs b { font-size: 1.6rem; }
}

/* Lộ trình 4 bước: thanh nối chạy đúng qua tâm các vòng tròn, từ vòng đầu tới vòng cuối */
.ai-roadmap::before { content: none !important; }
.ai-roadmap .yr { position: relative; z-index: 1; }
@media (min-width: 768px) {
  .ai-roadmap .step-col:not(:last-child)::before {
    content: "";
    position: absolute;
    top: calc(.4rem + 1.15rem - 1px);
    left: calc(var(--bs-gutter-x) * .5 + 1.15rem);
    width: 100%;
    height: 2px;
    background: color-mix(in srgb, var(--ai-navy) 24%, transparent);
  }
}

/* Chuỗi môn học theo học kỳ */
.ai-seq { border-top: 1px solid var(--ai-line); }
.ai-seq-row { display: grid; grid-template-columns: 7.5rem 1fr; gap: .4rem 1.2rem; padding: .85rem 0; border-bottom: 1px solid var(--ai-line); align-items: start; }
.ai-seq-row .lb { font-weight: 700; font-size: .82rem; color: var(--ai-navy); padding-top: .3rem; }
.ai-seq-row .lb small { display: block; font-weight: 500; color: var(--ai-mut); font-size: .72rem; }
.ai-seq-row .cs { display: flex; flex-wrap: wrap; gap: .4rem; }
.ai-seq .ai-chip { margin: 0; }
.ai-chip-muted { background: transparent !important; border-style: dashed !important; color: var(--ai-mut) !important; }
.ai-seq-legend { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; align-items: center; font-size: .74rem; color: var(--ai-mut); margin-bottom: .9rem; }
.ai-seq-legend .ai-chip { margin: 0 .4rem 0 0; padding: 0; width: 1.6rem; height: .85rem; border-radius: .4rem; vertical-align: -1px; display: inline-block; }
@media (max-width: 575.98px) {
  .ai-seq-row { grid-template-columns: 1fr; }
  .ai-seq-row .lb { padding-top: 0; }
}
.ai-chip-navy { background: var(--ai-navy) !important; border-color: var(--ai-navy) !important; color: #fff !important; }