/* ================================================================
   LỚP CAO CẤP — web cô Thanh (12–13/10/2026 · NGACH-009)
   Thầy 12/10 23:3x: lấy hiệu ứng NỀN · MÀU CHỮ · BIỂU TƯỢNG của bộ
   “landing cao cấp” (skill lam-landing-ban-hang, mục 2) áp cho web cô Thanh.
   Thầy 12/10 23:5x: “icon và layout chữ chưa nhảy · ảnh đưa chuột đến thì nổi
   lên và chạy viền xung quanh · nơi cần nổi bật phải sáng chữ hoặc đóng ô”
   ⇒ thêm mục 6 (chuyển động) + tệp assets/js/cao-cap.js.

   Nguyên tắc khi mượn:
   · Giữ màu thương hiệu cô Thanh (trắng kem · xanh nhẹ · vàng điểm nhấn) —
     chỉ mượn CÁCH LÀM, không đổi sang tím / chàm của bản mẫu.
   · Chuyển động đều NHẸ: viền chạy chỉ hiện khi rê chuột (trừ MỘT khối cần
     nổi bật trên mỗi trang), biểu tượng chỉ nhấp nhô vài điểm ảnh.
   · Máy báo “giảm chuyển động” (máy Thầy đang báo như vậy vì tắt hiệu ứng
     Windows) ⇒ VẪN chuyển động nhưng chậm và ngắn hơn — xem mục 7.
   · KHÔNG định nghĩa lại hiệu ứng rê chuột của thẻ (.card, .pain, .path .st
     đã có trong motion.css) — tệp này chỉ thêm, không đè.
   Mọi trang nạp tệp này NGAY SAU v14.css — nên tệp riêng của trang (mon-ai.css,
   trang-chu-bo-sung.css) đứng sau và thắng khi cùng độ ưu tiên; chỗ nào lớp này
   cần thắng thì viết bộ chọn cụ thể hơn (vd .ai-nhom .ai-bt).
   ================================================================ */

:root {
  --cc-xanh-1: #2f5d80;
  --cc-xanh-2: #4A7FA5;
  --cc-xanh-3: #58a9c4;
  --cc-vang-1: #FFC020;
  --cc-vang-2: #ffd766;
  --cc-bien: -4px;            /* quãng nhấp nhô của biểu tượng */
}

/* ---------- 1. NỀN: aurora tĩnh + lưới chấm mờ dần ---------- */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(44vw 40vw at 6% 2%, rgba(74, 127, 165, .20), transparent 64%),
    radial-gradient(40vw 36vw at 98% 8%, rgba(255, 192, 32, .16), transparent 62%),
    radial-gradient(48vw 44vw at 92% 82%, rgba(88, 169, 196, .15), transparent 64%),
    radial-gradient(42vw 40vw at 2% 92%, rgba(236, 160, 140, .11), transparent 62%),
    #ffffff;
}
body::after {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(rgba(47, 93, 128, .13) 1px, transparent 1.3px);
  background-size: 22px 22px;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .35) 45%, transparent 85%);
  mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .35) 45%, transparent 85%);
}
body { background: transparent; }
html { background: #fff; }

/* Kính mờ: các khối có nền riêng để nền aurora hiện xuyên */
.nav { background: rgba(255, 255, 255, .84); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.crumb { background: rgba(251, 249, 244, .62); }
.hero { background: linear-gradient(160deg, rgba(251, 249, 244, .62) 0%, rgba(237, 244, 249, .72) 100%); }
section.block.cream, section.block.cang, section.block.lq { background: rgba(251, 249, 244, .70); }
section.block.blue { background: rgba(237, 244, 249, .70); }
.cta-band { background: linear-gradient(160deg, rgba(237, 244, 249, .78), rgba(251, 249, 244, .78)); }
footer { background: rgba(251, 249, 244, .84); }

/* ---------- 2. MÀU CHỮ: tiêu đề lớn và nhãn nhỏ chuyển màu ---------- */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .hero h1, .cta-band h2 {
    background: linear-gradient(100deg, #2b2b2b 8%, var(--cc-xanh-1) 62%, #3b7397 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
  }
  .eyebrow {
    background: linear-gradient(90deg, var(--cc-xanh-1) 0%, #2f7f9c 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
  }
}
/* Vạch chuyển màu dưới tiêu đề khối — dấu nhận của lớp cao cấp */
.block h2::after {
  content: ""; display: block; width: 54px; height: 3px; margin-top: 10px; border-radius: 3px;
  background: linear-gradient(90deg, var(--cc-vang-1), var(--cc-xanh-3));
  transform-origin: left center;
}
.block h2[style*="text-align:center"]::after { margin-left: auto; margin-right: auto; transform-origin: center; }
.cta-band h2::after { content: none; }

/* Chữ quan trọng: nét bút dạ quang vàng (cao-cap.js quét nét bút khi cuộn tới) */
mark.cc-dau {
  background: linear-gradient(transparent 54%, rgba(255, 192, 32, .62) 54%, rgba(255, 215, 102, .62) 100%) no-repeat 0 0 / 100% 100%;
  color: inherit; font-weight: 700; padding: 0 .16em; margin: 0 -.06em; border-radius: 3px;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}

/* ---------- 3. BIỂU TƯỢNG: ô chuyển màu, nét trắng, vòng vàng khi rê ---------- */
.path .st::before,
.ai-nhom .ai-bt {
  background: linear-gradient(135deg, var(--cc-xanh-1) 0%, var(--cc-xanh-2) 58%, var(--cc-xanh-3) 100%);
  color: #fff;
  box-shadow: 0 6px 16px rgba(47, 93, 128, .28);
}
.ai-nhom .ai-bt { position: relative; }
.ai-nhom .ai-bt::after {
  content: ""; position: absolute; inset: -5px; border-radius: 18px;
  border: 2px solid var(--cc-vang-1); opacity: 0; transform: scale(.9);
  transition: opacity .3s ease, transform .3s ease; pointer-events: none;
}
.ai-nhom li { transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease; }
.ai-nhom li:hover { transform: translateY(-3px); border-color: rgba(255, 192, 32, .6); box-shadow: 0 12px 28px rgba(74, 127, 165, .15); }
.ai-nhom li:hover .ai-bt::after { opacity: 1; transform: scale(1); }
.tag { background: linear-gradient(135deg, rgba(237, 244, 249, 1), rgba(223, 238, 246, 1)); }
.tag.gold { background: linear-gradient(135deg, #FFF3D6, #ffe9ad); }

/* Thẻ: bóng nền nhẹ để “nổi” trên nền aurora (rê chuột giữ nguyên của motion.css) */
.card, .ai-th, .ai-ws, .ai-nhom li, .ai-bai, .path .st, .lq-item, .cang-row, .faq details {
  box-shadow: 0 6px 18px rgba(47, 93, 128, .06);
}

/* ---------- 4. NÚT: nền vàng chuyển màu + vệt sáng lướt qua khi rê ---------- */
.btn { position: relative; overflow: hidden; }
.btn:not(.line):not(.blue):not(.ai-nb-phu) {
  background: linear-gradient(135deg, var(--cc-vang-1) 0%, var(--cc-vang-2) 55%, #ffb81a 100%);
  box-shadow: 0 8px 20px rgba(255, 192, 32, .30);
}
.btn::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: -70%; width: 45%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .6), transparent);
  transform: skewX(-18deg); transition: left .65s ease; pointer-events: none;
}
.btn:hover::before, .btn:focus-visible::before { left: 125%; }

/* ---------- 5. Chạm (không có rê chuột) ---------- */
@media (hover: none) {
  .ai-nhom li:hover { transform: none; }
  .ai-nhom li:active { border-color: rgba(255, 192, 32, .6); }
  .ai-nhom li:active .ai-bt::after { opacity: 1; transform: scale(1); }
  .btn:active::before { left: 125%; }
}

/* ---------- 6. CHUYỂN ĐỘNG (13/10/2026) ---------- */
@keyframes cc-quay { to { transform: rotate(1turn); } }
@keyframes cc-hien { from { opacity: 0; } to { opacity: 1; } }
@keyframes cc-noi { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(var(--cc-bien)); } }
@keyframes cc-nhay {
  0% { transform: translateY(0) scale(1) rotate(0deg); }
  28% { transform: translateY(-8px) scale(1.12) rotate(-8deg); }
  52% { transform: translateY(0) scale(.95) rotate(4deg); }
  74% { transform: translateY(-3px) scale(1.04) rotate(-2deg); }
  100% { transform: translateY(0) scale(1) rotate(0deg); }
}
@keyframes cc-nhip { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 192, 32, .55); } 60% { box-shadow: 0 0 0 7px rgba(255, 192, 32, 0); } }

/* 6.1 Viền sáng chạy quanh khối (khung + thẻ <i> do cao-cap.js gắn).
   Lúc nghỉ: display none — không lớp vẽ, không tốn máy. */
.cc-tuong-doi { position: relative; }
.cc-vien {
  display: none; position: absolute; inset: -1px; z-index: 2; pointer-events: none;
  border-radius: inherit; padding: 2px; overflow: hidden;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
.ai-bai > .cc-vien, .ai-nb-the > .cc-vien, .cc-anh > .cc-vien { inset: 0; }   /* khối cắt mép: viền nằm trong */
.cc-vien > i {
  position: absolute; left: 50%; top: 50%; width: 0; height: 0;
  /* nền sáng: dải XANH ĐÊM → xanh → đầu mũi vàng */
  background: conic-gradient(from 0deg, transparent 0deg, transparent 205deg, #17344d 250deg, #2f5d80 288deg, #58a9c4 322deg, #FFC020 346deg, transparent 360deg);
  animation: cc-quay 4.2s linear infinite; will-change: transform;
}
/* nền tối (khối Môn AI ở trang chủ): VÀNG ÁNH KIM — dải trắng ngà ở giữa mới ra chất kim loại */
.ai-nb-the > .cc-vien > i {
  background: conic-gradient(from 0deg, transparent 0deg, transparent 195deg, #8a6a00 240deg, #FFC020 285deg, #FFF3C4 310deg, #FFC020 330deg, transparent 360deg);
}
/* quanh ẢNH: viền dày hơn và sáng hơn (xanh → vàng → trắng ngà) để nổi trên nền ảnh nhiều màu */
.cc-anh > .cc-vien { padding: 3px; }
.cc-anh > .cc-vien > i {
  background: conic-gradient(from 0deg, transparent 0deg, transparent 170deg, #2f5d80 215deg, #58a9c4 262deg, #FFC020 312deg, #FFF3C4 344deg, transparent 360deg);
}
.cc-vien-luon { display: block; animation: cc-hien .5s ease both; }
.cc-ngoai > .cc-vien-luon { display: none; }
@media (hover: hover) {
  .cc-co-vien:hover > .cc-vien { display: block; animation: cc-hien .35s ease both; }
}
.cc-co-vien:focus-visible > .cc-vien { display: block; animation: cc-hien .35s ease both; }

/* 6.2 Ảnh: nổi lên + phóng nhẹ khi rê (khung .cc-anh do cao-cap.js bọc quanh ảnh) */
.cc-anh {
  display: block; position: relative; overflow: hidden; border-radius: 14px;
  box-shadow: 0 6px 18px rgba(47, 93, 128, .10);
  transition: transform .35s ease, box-shadow .35s ease;
}
.cc-anh > img { transition: transform .6s ease; }
.ai-anh .cc-anh > img, .ai-hero-anh .cc-anh > img { border-radius: 0; box-shadow: none; }
.ai-hero-anh .cc-anh { border-radius: 20px; box-shadow: 0 16px 38px rgba(47, 93, 128, .20); }
/* ảnh thật ở các trang tiếng Anh (.photo-wide / .photo-tall): khung nhận lại bo góc, bóng và lề của ảnh */
.cc-anh-rong { border-radius: 16px; box-shadow: 0 10px 28px rgba(43, 43, 43, .10); }
.cc-anh-doc { border-radius: 16px; box-shadow: 0 12px 32px rgba(74, 127, 165, .14); max-width: 400px; margin: 16px auto 0; }
.cc-anh > img.photo-wide, .cc-anh > img.photo-tall { border-radius: 0; box-shadow: none; margin: 0; max-width: 100%; }
@media (hover: hover) {
  .cc-anh:hover { transform: translateY(-6px); box-shadow: 0 22px 44px rgba(47, 93, 128, .26); }
  .cc-anh:hover > img { transform: scale(1.04); }
}
@media (hover: none) {
  .cc-anh:active { transform: scale(.992); }
}

/* 6.3 Số thứ tự của bước nhảy lên khi rê vào bước */
.path .st:hover::before { animation: cc-nhay .75s cubic-bezier(.3, .7, .3, 1) 1; }

/* ---------- 7. Máy báo “giảm chuyển động” ----------
   style.css đặt  * { transition: none !important }  cho trường hợp này. Thầy yêu cầu trang có
   chuyển động và máy Thầy đang báo “giảm” ⇒ ở đây BẬT LẠI các chuyển tiếp rê chuột (ngắn, êm)
   và cho các vòng lặp chạy CHẬM hơn, quãng NGẮN hơn. Không có rung, chớp, hay trượt ngang màn hình. */
@media (prefers-reduced-motion: reduce) {
  :root { --cc-bien: -2px; }
  .cc-vien > i { animation-duration: 8s; }
  .card, .path .st, .pain, .btn, .cc-anh, .cc-anh > img,
  .ai-th, .ai-nhom li, .ai-bai, .ai-bai > img, .ai-dl li, .ai-chuoi > div, .ai-nb-anh img {
    transition-property: transform, box-shadow, border-color, background-color, filter !important;
    transition-duration: .3s !important;
    transition-timing-function: ease !important;
  }
}
@media (forced-colors: active) {
  .hero h1, .cta-band h2, .eyebrow { background: none; -webkit-text-fill-color: currentColor; color: CanvasText; }
  body::before, body::after, .cc-vien { display: none !important; }
  mark.cc-dau { background: Mark; color: MarkText; }
}
@media print {
  body::before, body::after, .cc-vien { display: none !important; }
  .hero h1, .cta-band h2, .eyebrow { background: none; -webkit-text-fill-color: currentColor; color: #000; }
  [data-cc-cho] { opacity: 1 !important; }
}