/* AI University — course detail page (course.html). Uses home.css for fonts, modal and .rv2 reveal. */
.cx-hero{position:relative;overflow:hidden;isolation:isolate;color:#fff;background:#060a18;padding:56px 0 130px}
.cx-bg{position:absolute;inset:0;z-index:-2}
.cx-bg img{width:100%;height:100%;object-fit:cover;object-position:70% 40%;animation:kb 22s ease-out both;filter:saturate(1.05)}
.cx-hero::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(6,10,24,.97) 0%,rgba(6,10,24,.86) 45%,rgba(6,10,24,.35) 80%,rgba(6,10,24,.2)),linear-gradient(0deg,rgba(6,10,24,.9),transparent 45%)}
.cx-hero::after{content:"";position:absolute;width:760px;height:760px;left:-260px;top:-360px;z-index:-1;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--c1) 55%,transparent),transparent 62%);animation:float 11s ease-in-out infinite alternate;opacity:.75}
.cx-hero-in{position:relative}
.cx-hero-txt{max-width:720px}
.cx-hero .crumbs{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-family:var(--bn);font-size:14px;color:#a9b1d2;animation:rise .8s both}
.cx-hero .crumbs a:hover{color:#fff}.cx-hero .crumbs .i{width:14px;height:14px;opacity:.6}
.cx-pills{display:flex;gap:8px;flex-wrap:wrap;margin-top:22px;animation:rise .8s .08s both cubic-bezier(.16,1,.3,1)}
.cx-pill{display:inline-flex;align-items:center;gap:6px;padding:6px 13px;border-radius:99px;font-family:var(--bn);font-size:14px;font-weight:700;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);backdrop-filter:blur(6px)}
.cx-pill .i{width:15px;height:15px}
.cx-pill.live{background:rgba(61,220,151,.16);border-color:rgba(61,220,151,.5);color:#7ff0bd}
.cx-pill.soon{color:#ffd36e}.cx-pill.pv{background:rgba(245,185,66,.18);border-color:rgba(245,185,66,.5);color:#ffd36e}
.cx-pill.sim{background:rgba(77,141,255,.22);border-color:rgba(77,141,255,.6);color:#c8dcff}
.cx-title{font-family:var(--bn);font-weight:800;font-size:clamp(2.3rem,5.4vw,4.2rem);line-height:1.12;margin:18px 0 6px;color:#fff;animation:rise .9s .15s both cubic-bezier(.16,1,.3,1)}
.cx-en{font-family:'Inter',sans-serif;font-weight:600;color:#9fb0ff;font-size:1.02rem;animation:rise .9s .22s both cubic-bezier(.16,1,.3,1)}
.cx-desc{font-family:var(--bn);font-size:1.12rem;line-height:1.75;color:#cfd5ee;margin-top:16px;animation:rise .9s .3s both cubic-bezier(.16,1,.3,1)}
.cx-stats{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.cx-stats>div{display:grid;grid-template-columns:auto auto;grid-template-rows:auto auto;column-gap:12px;align-items:center;padding:12px 18px 12px 14px;border-radius:16px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);backdrop-filter:blur(8px);animation:rise .8s var(--d) both cubic-bezier(.16,1,.3,1)}
.cx-stats .i{grid-row:span 2;width:40px;height:40px;padding:9px;border-radius:12px;background:linear-gradient(140deg,var(--c1),var(--c2));color:#fff}
.cx-stats b{font-family:var(--bn);font-size:1.25rem;color:#fff;line-height:1.1}
.cx-stats span{font-family:var(--bn);font-size:13px;color:#a9b1d2}

.cx-layout{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:40px;align-items:start;margin-top:-90px;position:relative;z-index:2}
.cx-main{display:grid;gap:24px;padding-top:70px}
.cx-feats{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.cx-feat{display:flex;gap:14px;align-items:flex-start;padding:18px;border-radius:20px;background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow-sm);transition:transform .35s,box-shadow .35s}
.cx-feat:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.cx-feat>span{flex:none;width:46px;height:46px;border-radius:14px;display:grid;place-items:center;background:var(--brand-soft);color:var(--brand)}
.cx-feat b{display:block;font-family:var(--bn);font-size:1.02rem;color:var(--ink)}
.cx-feat small{font-family:var(--bn);font-size:13.5px;color:var(--mut);line-height:1.5}
.cx-box{padding:30px 32px;border-radius:26px;background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow-sm)}
.cx-box h2{display:flex;align-items:center;gap:12px;font-family:var(--bn);font-weight:800;font-size:1.55rem;color:var(--ink);margin-bottom:18px}
.cx-box h2 .i{width:38px;height:38px;padding:8px;border-radius:12px;background:var(--brand-soft);color:var(--brand)}
.cx-sub{margin:-8px 0 18px;font-family:var(--bn)}
.cx-learn{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.cx-learn li{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border-radius:16px;background:var(--soft);font-family:var(--bn);color:var(--ink);line-height:1.5;opacity:0;transform:translateX(-14px);transition:opacity .6s var(--d),transform .6s var(--d) cubic-bezier(.16,1,.3,1)}
.in .cx-learn li{opacity:1;transform:none}
.cx-learn .i{flex:none;width:24px;height:24px;padding:4px;border-radius:50%;background:var(--green);color:#fff;margin-top:1px}
.cx-curr{display:grid;gap:12px}
.cx-chap{border-radius:18px;border:1px solid var(--line);background:var(--bg);overflow:hidden;transition:border-color .3s,box-shadow .3s}
.cx-chap[open]{border-color:color-mix(in srgb,var(--brand) 55%,var(--line));box-shadow:var(--shadow-sm)}
.cx-chap summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:14px;padding:16px 18px}
.cx-chap summary::-webkit-details-marker{display:none}
.cx-chap .no{flex:none;width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:linear-gradient(140deg,var(--brand),var(--brand2));color:#fff;font-family:var(--bn);font-weight:800}
.cx-chap .no .i{width:18px;height:18px}
.cx-chap .tl{flex:1;font-family:var(--bn);font-weight:700;color:var(--ink);line-height:1.35}
.cx-chap .tl small{display:block;font-weight:500;font-size:13px;color:var(--mut);margin-top:2px}
.cx-chap .chev{transition:transform .3s;color:var(--mut)}.cx-chap[open] .chev{transform:rotate(180deg)}
.cx-mp{width:70px;height:6px;border-radius:6px;background:var(--soft2);overflow:hidden}.cx-mp i{display:block;height:100%;background:var(--green)}
.cx-chap ol{list-style:none;border-top:1px dashed var(--line);padding:6px 10px 10px}
.cx-chap li{display:flex;align-items:center;gap:12px;padding:10px 10px;border-radius:12px;font-family:var(--bn);font-size:15px;color:var(--txt)}
.cx-chap li:hover{background:var(--soft)}
.cx-chap li>span:first-of-type,.cx-chap li>a{flex:1}
.cx-chap li a{color:var(--ink);font-weight:600}.cx-chap li a:hover{color:var(--brand)}
.cx-chap li .i{width:18px;height:18px;color:var(--mut)}.cx-chap li .i.ok{color:var(--green)}
.cx-chap li.soon{color:var(--faint)}.cx-chap li.soon .i{color:var(--faint)}
.cx-chap .tt{font-size:12px;padding:2px 8px;border-radius:99px;background:var(--soft2);color:var(--mut)}
.cx-chap em{font-style:normal;font-size:13px;color:var(--faint);min-width:52px;text-align:right}
.cx-v{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:700;padding:2px 9px;border-radius:99px;background:color-mix(in srgb,#ec4899 14%,transparent);color:#db2777}
.cx-v.sim{background:color-mix(in srgb,#7c83ff 18%,transparent);color:var(--brand)}
.cx-v .i{width:13px!important;height:13px!important;color:inherit!important}
.cx-soonbox{display:flex;gap:14px;align-items:flex-start;padding:18px;border-radius:16px;background:var(--gold-soft);border:1px solid color-mix(in srgb,var(--gold) 35%,transparent);font-family:var(--bn)}
.cx-soonbox>.i{color:var(--gold);flex:none;margin-top:3px}
.cx-soonbox b{display:block;color:var(--ink)}.cx-soonbox span{color:var(--mut);font-size:14.5px}
.cx-plan{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:16px}
.cx-plan li{display:flex;gap:10px;align-items:center;padding:12px 14px;border-radius:14px;border:1px dashed var(--line2);font-family:var(--bn);color:var(--ink)}
.cx-plan .i{color:var(--faint)}
.cx-for{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.cx-for li{display:flex;gap:12px;align-items:center;padding:14px 16px;border-radius:16px;border:1px solid var(--line);font-family:var(--bn);color:var(--ink)}
.cx-for .i{flex:none;color:var(--brand)}
.cx-made{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.cx-made>div{padding:18px;border-radius:18px;background:var(--soft);font-family:var(--bn)}
.cx-made>div>span{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;background:linear-gradient(140deg,var(--brand),var(--brand2));color:#fff;margin-bottom:12px}
.cx-made b{display:block;color:var(--ink)}.cx-made small{color:var(--mut);font-size:13.5px;line-height:1.5}
.cx-note{display:flex;gap:8px;align-items:center;margin-top:16px;font-family:var(--bn);font-size:14px;color:var(--mut)}.cx-note .i{color:var(--gold)}
.cx-certbox{display:flex;align-items:center;justify-content:space-between;gap:24px;background:linear-gradient(120deg,var(--card),var(--gold-soft))}
.cx-certbox p{font-family:var(--bn)}
.cx-medal{flex:none;width:96px;height:96px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(from var(--a),#f5b942,#ffe6a3,#d4911f,#f5b942);animation:spin 6s linear infinite;box-shadow:0 14px 40px rgba(245,185,66,.4)}
.cx-medal .i{width:44px;height:44px;color:#5a3a00}

/* sticky enroll card */
.cx-side{position:sticky;top:96px}
.cx-card{border-radius:28px;overflow:hidden;background:var(--card);border:1px solid var(--line);box-shadow:0 40px 90px rgba(16,24,64,.22);animation:rise 1s .3s both cubic-bezier(.16,1,.3,1)}
.cx-thumb{position:relative;aspect-ratio:16/10;background:linear-gradient(140deg,var(--c1),var(--c2));display:grid;place-items:center;color:#fff;overflow:hidden}
.cx-thumb>.i{width:64px;height:64px}
.cx-thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.16,1,.3,1)}
.cx-card:hover .cx-thumb img{transform:scale(1.06)}
.cx-thumb::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(6,10,24,.75),transparent 60%)}
.cx-play{position:relative;z-index:2;width:76px;height:76px;border-radius:50%;border:0;cursor:pointer;background:rgba(255,255,255,.95);color:#0b1020;display:grid;place-items:center;box-shadow:0 18px 50px rgba(0,0,0,.5);transition:transform .3s}
.cx-play:hover{transform:scale(1.1)}
.cx-play::before{content:"";position:absolute;inset:-8px;border-radius:50%;border:2px solid rgba(255,255,255,.6);animation:ring 2s infinite}
.cx-play .i{width:28px;height:28px;fill:currentColor;margin-left:4px}
.cx-thumb-l{position:absolute;left:16px;bottom:14px;z-index:2;display:flex;align-items:center;gap:6px;font-family:var(--bn);font-weight:700;font-size:14px}
.cx-thumb-l .i{width:16px;height:16px}
.cx-pad{padding:24px 26px 26px}
.cx-price{font-family:var(--bn);font-size:2rem;font-weight:800;color:var(--ink);margin-bottom:16px}
.cx-price small{font-size:15px;font-weight:500;color:var(--mut)}
.cx-btn{width:100%;height:56px;border-radius:16px;font-family:var(--bn);font-size:17.5px;font-weight:800;color:#fff;background:linear-gradient(95deg,var(--brand),var(--brand2));box-shadow:0 16px 40px color-mix(in srgb,var(--brand) 40%,transparent);position:relative;overflow:hidden}
.cx-btn::after{content:"";position:absolute;top:0;bottom:0;width:60px;left:-80px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent);transform:skewX(-20deg);animation:shine 3.2s 1s infinite}
@keyframes shine{0%{left:-80px}40%,100%{left:120%}}
.cx-btn:hover{transform:translateY(-2px)}
.cx-pad .tiny{font-family:var(--bn);font-size:13px;color:var(--mut);text-align:center;margin-top:10px}
.cx-prog{margin-top:14px}.cx-prog>div{height:8px;border-radius:8px;background:var(--soft2);overflow:hidden}.cx-prog i{display:block;height:100%;background:linear-gradient(90deg,var(--brand),var(--brand2))}
.cx-prog span{display:block;margin-top:6px;font-family:var(--bn);font-size:13.5px;color:var(--mut)}
.cx-inc{list-style:none;display:grid;gap:11px;margin:22px 0 18px;padding-top:20px;border-top:1px dashed var(--line);font-family:var(--bn);font-size:15px;color:var(--txt)}
.cx-inc li{display:flex;align-items:center;gap:10px}.cx-inc .i{width:18px;height:18px;color:var(--brand)}
.cx-share{width:100%;height:44px;border-radius:12px;border:1px solid var(--line2);background:transparent;cursor:pointer;font-family:var(--bn);font-weight:600;color:var(--ink);display:flex;align-items:center;justify-content:center;gap:8px}
.cx-share:hover{border-color:var(--brand);color:var(--brand)}

@media (max-width:1000px){
  .cx-layout{grid-template-columns:1fr;margin-top:-70px}
  .cx-side{position:static;order:-1;max-width:520px;width:100%;margin:0 auto}
  .cx-main{padding-top:0}
}
@media (max-width:640px){
  .cx-hero{padding:34px 0 110px}
  .cx-hero::before{background:linear-gradient(0deg,rgba(6,10,24,.98) 30%,rgba(6,10,24,.7))}
  .cx-stats>div{padding:10px 14px 10px 10px}
  .cx-feats,.cx-learn,.cx-for,.cx-made,.cx-plan{grid-template-columns:1fr}
  .cx-box{padding:22px 18px}
  .cx-chap .tt{display:none}
  .cx-certbox{flex-direction:column;align-items:flex-start}
}

/* module feature images (content.modImages) */
.cx-chap.has-img summary{position:relative}
.cx-mimg{width:84px;height:56px;object-fit:cover;border-radius:10px;flex:none;box-shadow:var(--shadow-sm)}
@media (max-width:560px){.cx-mimg{width:60px;height:44px}}
.cx-v.free{background:var(--green-soft);color:var(--green)}
.cx-curr li .cx-v{flex:none}
.cx-mock{display:flex;align-items:center;gap:14px;padding:16px 18px;margin:12px 0 18px;border-radius:14px;background:linear-gradient(95deg,var(--navy),var(--brand));color:#fff;text-decoration:none}.cx-mock span{flex:1;display:grid}.cx-mock small{opacity:.85}.cx-mock svg{width:26px;height:26px}