/* =====================================================================
   Exalda · self-paced course page (exalda.com/courses/<slug>) and the
   certificate check page (exalda.com/verify). Builds on exalda.css + main.css;
   the course page also loads enroll.css for the checkout pop-up.
   Layout: a tinted band with the course's name, a buy card that floats over
   the band and stays in view on wide screens, and the details beside it.
   ===================================================================== */

.cx.hdr-off{--cx-top:0px}
.cx{--cx-line:#e6ebf2;--cx-soft:#f4f6fa;--cx-text:#33425e;--cx-muted:#5b6b86;--cx-faint:#7a879c;--cx-ok:#13805a;--cx-top:66px}
.cx-grid{display:grid;grid-template-columns:minmax(0,1fr) 376px;grid-template-areas:"hero aside" "body aside";column-gap:clamp(36px,4.4vw,64px);align-items:start}

/* ---------- Band + heading ---------- */
.cx-hero{grid-area:hero;position:relative;display:flex;flex-direction:column;gap:16px;min-width:0;
  padding-top:calc(150px + env(safe-area-inset-top,0px));padding-bottom:clamp(44px,5vw,64px);
  border-image:linear-gradient(var(--hero-bg) calc(100% - 1px),rgba(20,34,61,.07) 0) fill 0 / / 0 100vw}
.cx-tags{display:flex;flex-wrap:wrap;gap:8px}
.cx-tag{display:inline-flex;align-items:center;gap:7px;height:30px;padding:0 12px;border-radius:999px;background:#fff;border:1px solid #f0dcb4;font-size:12.5px;font-weight:600;color:#14223d;white-space:nowrap}
.cx-tag .ic{width:15px;height:15px;color:#b06f00}
.cx-tag.dark{background:#14223d;border-color:#14223d;color:#fff}
.cx-tag.dark .ic{color:#fba412}
.cx-lvl{display:inline-flex;align-items:flex-end;gap:2px;height:12px}
.cx-lvl i{width:4px;border-radius:1.5px;background:#e2cfa6}
.cx-lvl i:nth-child(1){height:5px}.cx-lvl i:nth-child(2){height:8.5px}.cx-lvl i:nth-child(3){height:12px}
.cx-lvl[data-n="1"] i:nth-child(-n+1),.cx-lvl[data-n="2"] i:nth-child(-n+2),.cx-lvl[data-n="3"] i{background:#fba412}
.cx-title{font-family:var(--font-head);font-weight:800;font-size:clamp(2rem,1.3rem + 2vw,2.85rem);line-height:1.1;letter-spacing:-.022em;color:#14223d;text-wrap:balance;max-width:20ch}
.cx-lead{font-size:clamp(1.02rem,.96rem + .3vw,1.16rem);line-height:1.6;color:var(--cx-text);max-width:56ch}
.cx-stats{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;font-size:14px;color:var(--cx-muted)}
.cx-stats>span{display:inline-flex;align-items:center;gap:6px}
.cx-stats .ic{width:17px;height:17px}
.cx-stats b{color:#14223d;font-weight:700}
.cx-rate{color:#14223d}
.cx-rate a{color:inherit;text-decoration:underline;text-decoration-color:rgba(20,34,61,.25);text-underline-offset:3px}
.stars{display:inline-flex;gap:1px;vertical-align:-2px}
.stars .ic{width:16px;height:16px;fill:#e3e8ef;stroke:none}
.stars .ic.on{fill:#fba412}
.cx-by{display:flex;align-items:center;gap:12px;margin-top:4px}
.cx-by .av{width:42px;height:42px}
.cx-by small{display:block;font-size:12.5px;color:var(--cx-muted)}
.cx-by b{font-size:15px;color:#14223d}
.cx-staff{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 14px;border-radius:12px;background:#14223d;color:#fff;font-size:13.5px;max-width:640px}
.cx-staff .ic{width:17px;height:17px;color:#fba412;flex:none}
.cx-staff a{color:#fba412;font-weight:700}

.av{position:relative;display:grid;place-items:center;flex:none;border-radius:50%;overflow:hidden;background:#14223d;color:#fba412;font:800 15px/1 var(--font-head);letter-spacing:.02em}
.av img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* ---------- Buy card ---------- */
.cx-aside{grid-area:aside;position:sticky;top:calc(var(--cx-top) + 18px);transition:top .55s var(--ease-out);margin-top:calc(128px + env(safe-area-inset-top,0px));z-index:3;display:flex;flex-direction:column;gap:12px;min-width:0}
.buy{background:#fff;border:1px solid var(--cx-line);border-radius:20px;box-shadow:0 2px 6px rgba(20,34,61,.05),0 26px 64px rgba(20,34,61,.14);overflow:hidden}
.buy-media{position:relative;display:block;width:100%;aspect-ratio:16/9;border:0;padding:0;background:#14223d;cursor:pointer;overflow:hidden;color:#fff;text-align:left}
.buy-media[disabled]{cursor:default}
.buy-media img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease-out)}
.buy-media:not([disabled]):hover img{transform:scale(1.04)}
.buy-media .pl{position:absolute;inset:0;display:flex;align-items:flex-end;padding:14px;background:linear-gradient(180deg,rgba(10,18,33,0) 45%,rgba(10,18,33,.62) 100%)}
.buy-media .pl-in{display:inline-flex;align-items:center;gap:10px;padding:5px 14px 5px 5px;border-radius:999px;background:rgba(10,18,33,.72);backdrop-filter:blur(4px);box-shadow:0 6px 20px rgba(0,0,0,.25);transition:background-color .3s}
.buy-media:hover .pl-in{background:rgba(10,18,33,.88)}
.buy-media .pl-b{width:34px;height:34px;border-radius:50%;background:#fba412;color:#14223d;display:grid;place-items:center;transition:transform .5s var(--ease-spring)}
.buy-media:hover .pl-b{transform:scale(1.1)}
.buy-media .pl-b svg{width:15px;height:15px;margin-left:2px;fill:currentColor;stroke:none}
.buy-media .pl-t{font-size:13px;font-weight:700;letter-spacing:.01em;color:#fff}
.cv-art{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;gap:8px;padding:20px 22px;background:radial-gradient(420px 220px at 90% 0%,rgba(251,164,18,.22),transparent 60%),#14223d;color:#fff}
.cv-art small{font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#fba412}
.cv-art b{font:800 clamp(1.2rem,1rem + .7vw,1.45rem)/1.15 var(--font-head);letter-spacing:-.01em;max-width:80%;text-wrap:balance}
.cv-art .bars{position:absolute;right:20px;top:20px;display:flex;flex-direction:column;gap:5px;align-items:flex-start}
.cv-art .bars i{height:9px;border-radius:3px;background:rgba(255,255,255,.16)}
.cv-art .bars i:nth-child(1){width:46px;background:#fba412}.cv-art .bars i:nth-child(2){width:32px}.cv-art .bars i:nth-child(3){width:20px}

.buy-b{display:flex;flex-direction:column;gap:14px;padding:22px 22px 20px}
.buy-price{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 10px}
.buy-price b{font:800 2.05rem/1 var(--font-head);letter-spacing:-.02em;color:#14223d}
.buy-price s{font-size:15px;color:var(--cx-faint)}
.buy-off{align-self:center;font-size:12px;font-weight:700;padding:4px 9px;border-radius:999px;background:#e7f6ef;color:#0f6b4b}
.buy-note{font-size:13px;line-height:1.5;color:var(--cx-muted)}
.buy .btn{width:100%;height:54px;font-size:15px}
.buy .btn[aria-disabled="true"]{opacity:.5;pointer-events:none}
.buy-own{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;background:#e7f6ef;color:#0f6b4b;font-size:14px;font-weight:600}
.buy-own .ic{width:18px;height:18px;flex:none}
.buy-inc{display:flex;flex-direction:column;gap:9px;padding-top:14px;border-top:1px dashed #e1e6ee}
.buy-inc h3{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--cx-muted);margin-bottom:2px}
.buy-inc li{display:flex;align-items:center;gap:10px;font-size:14px;color:#22314d}
.buy-inc .ic{width:18px;height:18px;flex:none;color:#b06f00}
.buy-sec{display:flex;align-items:center;justify-content:center;gap:7px;font-size:12.5px;color:var(--cx-muted)}
.buy-sec .ic{width:14px;height:14px}
.buy-help{display:flex;align-items:center;gap:10px;padding:12px 16px;border-radius:14px;background:#fff;border:1px solid var(--cx-line);font-size:13.5px;color:var(--cx-muted)}
.buy-help .ic{width:20px;height:20px;color:#13805a;flex:none}
.buy-help a{color:#14223d;font-weight:700}

/* ---------- Details column ---------- */
.cx-body{grid-area:body;min-width:0;padding-bottom:clamp(56px,7vw,96px)}
.cx-tabs{position:sticky;top:var(--cx-top);transition:top .55s var(--ease-out);z-index:4;display:flex;gap:4px;margin:0 0 8px;padding:10px 0 0;background:#fff;border-bottom:1px solid var(--cx-line);overflow-x:auto;scrollbar-width:none}
.cx-tabs::-webkit-scrollbar{display:none}
.cx-tabs a{position:relative;flex:none;padding:10px 12px 14px;font-size:14px;font-weight:600;color:var(--cx-muted);text-decoration:none;transition:color .25s}
.cx-tabs a::after{content:"";position:absolute;left:12px;right:12px;bottom:-1px;height:3px;border-radius:3px 3px 0 0;background:#fba412;transform:scaleX(0);transition:transform .35s var(--ease-out)}
.cx-tabs a:hover{color:#14223d}
.cx-tabs a.on{color:#14223d}
.cx-tabs a.on::after{transform:none}
.cx-sec{padding-top:clamp(36px,4vw,48px);scroll-margin-top:calc(var(--cx-top) + 56px)}
.cx-h{font-family:var(--font-head);font-weight:800;font-size:clamp(1.35rem,1.1rem + .7vw,1.65rem);line-height:1.2;letter-spacing:-.014em;color:#14223d;margin-bottom:16px}
.cx-h-row{display:flex;align-items:flex-end;justify-content:space-between;gap:10px 20px;flex-wrap:wrap;margin-bottom:16px}
.cx-h-row .cx-h{margin-bottom:0}
.cx-h-row p{font-size:14px;color:var(--cx-muted)}

.learn-box{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 28px;padding:24px 26px;border:1px solid var(--cx-line);border-radius:18px;background:linear-gradient(180deg,#fffdf8,#fff)}
.learn-box li{display:flex;gap:12px;font-size:14.5px;line-height:1.5;color:#22314d}
.learn-box li::before{content:"";flex:none;width:22px;height:22px;margin-top:-1px;border-radius:7px;background:#14223d url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FBA412' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4 8-9'/%3E%3C/svg%3E") center/14px no-repeat}

.prose{color:var(--cx-text);font-size:15.5px;line-height:1.75;max-width:70ch}
.prose>*+*{margin-top:14px}
.prose b{color:#14223d}
.prose ul,.prose ol{padding-left:20px}
.prose ul{list-style:disc}.prose ol{list-style:decimal}
.prose li+li{margin-top:6px}
.prose h4{font-family:var(--font-head);font-size:1.1rem;color:#14223d}
.prose a{color:#14223d;font-weight:600;text-decoration-color:#fba412;text-underline-offset:3px}
.prose code{font-family:var(--mono);font-size:.88em;background:var(--cx-soft);padding:1px 5px;border-radius:5px}
.cx-more{position:relative}
.cx-more.shut .prose{max-height:260px;overflow:hidden;-webkit-mask-image:linear-gradient(#000 60%,transparent);mask-image:linear-gradient(#000 60%,transparent)}
.cx-more-btn{margin-top:10px;border:0;background:none;padding:4px 0;font:700 14px/1 var(--font);color:#14223d;text-decoration:underline;text-decoration-color:#fba412;text-underline-offset:4px;cursor:pointer}

/* Curriculum */
.cx-mods{display:flex;flex-direction:column;gap:12px}
.cx-mod{border:1px solid var(--cx-line);border-radius:16px;background:#fff;overflow:hidden;transition:box-shadow .3s,border-color .3s}
.cx-mod.open{border-color:#d5dce7;box-shadow:0 10px 30px rgba(20,34,61,.06)}
.cx-mod-h{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:14px;width:100%;padding:16px 18px;border:0;background:none;text-align:left;cursor:pointer}
.cx-mod-n{width:40px;height:40px;border-radius:11px;background:var(--cx-soft);display:grid;place-items:center;font:800 14px/1 var(--font-head);color:#14223d;position:relative;overflow:hidden;transition:background-color .3s,color .3s}
.cx-mod-n::after{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:#fba412;transform:scaleY(0);transition:transform .35s var(--ease-out)}
.cx-mod.open .cx-mod-n{background:#14223d;color:#fff}
.cx-mod.open .cx-mod-n::after{transform:none}
.cx-mod-t b{display:block;font-size:15.5px;font-weight:700;color:#14223d;line-height:1.35}
.cx-mod-t span{display:flex;flex-wrap:wrap;gap:4px 12px;margin-top:3px;font-size:13px;color:var(--cx-muted)}
.cx-mod-t .drip{color:#8a5600;font-weight:600;display:inline-flex;align-items:center;gap:5px}
.cx-mod-t .drip .ic{width:14px;height:14px}
.cx-mod-h>.ic{width:20px;height:20px;color:var(--cx-muted);transition:transform .35s var(--ease-out)}
.cx-mod.open .cx-mod-h>.ic{transform:rotate(180deg)}
.cx-mod-b{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s var(--ease-out)}
.cx-mod.open .cx-mod-b{grid-template-rows:1fr}
.cx-mod-b>div{overflow:hidden;min-height:0}
.les{border-top:1px solid #eef1f6;margin:0 18px}
.les li{display:grid;grid-template-columns:22px minmax(0,1fr) auto;align-items:center;gap:12px;padding:12px 0;font-size:14.5px;color:#22314d}
.les li+li{border-top:1px dashed #eef1f6}
.les .k{width:20px;height:20px;color:var(--cx-faint)}
.les .t{min-width:0;line-height:1.4}
.les .r{display:flex;align-items:center;gap:12px;font-size:13px;color:var(--cx-faint);white-space:nowrap}
.les .r .ic{width:15px;height:15px}
.pv-btn{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 11px;border-radius:999px;border:1.5px solid #f0c46f;background:#fff8ec;color:#8a5600;font:700 12.5px/1 var(--font);cursor:pointer;transition:background-color .25s,border-color .25s,color .25s}
.pv-btn .ic{width:14px;height:14px}
.pv-btn:hover{background:#fba412;border-color:#fba412;color:#14223d}
.les li.les-pv .t{color:#14223d;font-weight:600}
.expand{display:inline-flex;align-items:center;gap:6px;border:0;background:none;padding:6px 0;font:700 13.5px/1 var(--font);color:#14223d;cursor:pointer}
.expand .ic{width:16px;height:16px}

/* For / before */
.cx-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.cx-two.one{grid-template-columns:minmax(0,1fr)}
.cx-box{border:1px solid var(--cx-line);border-radius:18px;padding:22px 24px;background:#fff}
.cx-box h3{display:flex;align-items:center;gap:10px;font-family:var(--font-head);font-size:1.1rem;font-weight:800;color:#14223d;margin-bottom:12px}
.cx-box h3 .ic{width:20px;height:20px;color:#b06f00}
.cx-box li{position:relative;padding-left:18px;font-size:14.5px;line-height:1.55;color:#22314d}
.cx-box li+li{margin-top:8px}
.cx-box li::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:7px;border-radius:2px;background:#fba412}

/* Instructor */
.tch{display:grid;grid-template-columns:auto minmax(0,1fr);gap:18px 22px;align-items:start;padding:24px;border:1px solid var(--cx-line);border-radius:18px;background:#fff}
.tch .av{width:76px;height:76px;font-size:24px;border-radius:22px}
.tch h3{font-family:var(--font-head);font-weight:800;font-size:1.25rem;color:#14223d}
.tch .hl{font-size:14px;color:var(--cx-muted);margin-top:2px}
.tch .prose{grid-column:1/-1;font-size:15px}

/* Reviews */
.rs{display:grid;grid-template-columns:200px minmax(0,1fr);gap:24px 36px;align-items:center;padding:22px 24px;border:1px solid var(--cx-line);border-radius:18px;background:#fff;margin-bottom:16px}
.rs-big{display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.rs-big b{font:800 3rem/1 var(--font-head);color:#14223d;letter-spacing:-.02em}
.rs-big .stars .ic{width:20px;height:20px}
.rs-big small{font-size:13px;color:var(--cx-muted)}
.rs-bars{display:flex;flex-direction:column;gap:7px}
.rs-bars div{display:grid;grid-template-columns:44px minmax(0,1fr) 40px;align-items:center;gap:10px;font-size:13px;color:var(--cx-muted)}
.rs-bars span:first-child{display:inline-flex;align-items:center;gap:3px}
.rs-bars span:first-child .ic{width:13px;height:13px;fill:#fba412;stroke:none}
.rs-bars i{height:8px;border-radius:8px;background:#eef2f8;overflow:hidden}
.rs-bars i::after{content:"";display:block;height:100%;width:var(--w,0%);background:#fba412;border-radius:inherit}
.rs-bars span:last-child{text-align:right}
.cx-revs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.cx-rev{display:flex;flex-direction:column;gap:10px;padding:20px 22px;border:1px solid var(--cx-line);border-radius:16px;background:#fff}
.cx-rev p{font-size:14.5px;line-height:1.65;color:#22314d}
.cx-rev-who{display:flex;align-items:center;gap:10px;margin-top:auto;font-size:13px;color:var(--cx-muted)}
.cx-rev-who .av{width:32px;height:32px;font-size:12px}
.cx-rev-who b{color:#14223d;font-size:14px}
.cx-rev-reply{padding:10px 14px;border-left:3px solid #fba412;background:#fff8ec;border-radius:0 10px 10px 0;font-size:13.5px;line-height:1.55;color:#22314d}
.cx-rev-reply b{display:block;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:#8a5600;margin-bottom:2px}

/* Questions */
.faq{border:1px solid var(--cx-line);border-radius:18px;background:#fff;overflow:hidden}
.faq details+details{border-top:1px solid #eef1f6}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 22px;font-size:15px;font-weight:700;color:#14223d;cursor:pointer;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary .ic{width:20px;height:20px;flex:none;color:var(--cx-muted);transition:transform .35s var(--ease-out)}
.faq details[open] summary .ic{transform:rotate(180deg)}
.faq .a{padding:0 22px 18px;font-size:14.5px;line-height:1.7;color:var(--cx-text);max-width:72ch}

/* ---------- Closing band ---------- */
.cx-end{background:var(--hero-bg);color:#14223d;position:relative;overflow:hidden;isolation:isolate;border-top:1px solid rgba(20,34,61,.06)}
.cx-end-in{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px 48px;align-items:center;padding-block:clamp(48px,6vw,80px)}
.cx-end small{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#b06f00}
.cx-end h2{font-family:var(--font-head);font-weight:800;font-size:clamp(1.6rem,1.2rem + 1.3vw,2.2rem);line-height:1.15;letter-spacing:-.016em;margin-top:8px;text-wrap:balance}
.cx-end p{color:var(--cx-text);margin-top:10px;font-size:15px}
.cx-end-act{display:flex;flex-direction:column;align-items:flex-end;gap:10px;position:relative}
.cx-end-act b{font:800 1.8rem/1 var(--font-head)}
.cx-end-act b s{font:500 15px var(--font);color:var(--cx-faint);margin-left:8px}
.cx-end .btn{min-width:220px;height:54px}

/* ---------- Phone bar ---------- */
.cx-bar{position:fixed;left:0;right:0;bottom:0;z-index:60;display:none;align-items:center;gap:14px;padding:12px max(16px,env(safe-area-inset-right,0px)) calc(12px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px));background:rgba(255,255,255,.97);backdrop-filter:blur(8px);border-top:1px solid var(--cx-line);box-shadow:0 -10px 30px rgba(20,34,61,.08);transform:translateY(110%);visibility:hidden;transition:transform .45s var(--ease-out),visibility 0s linear .45s}
.cx-bar.show{transform:none;visibility:visible;transition:transform .45s var(--ease-out)}
.cx-bar-p{display:flex;flex-direction:column;min-width:0;line-height:1.15}
.cx-bar-p b{font:800 1.25rem/1.1 var(--font-head);color:#14223d}
.cx-bar-p s{font-size:12.5px;color:var(--cx-faint)}
.cx-bar-p span{font-size:12.5px;color:var(--cx-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cx-bar .btn{margin-left:auto;height:48px;flex:none}

/* ---------- Loading, not found ---------- */
.sk{display:block;border-radius:10px;background:linear-gradient(90deg,rgba(20,34,61,.06) 0%,rgba(20,34,61,.1) 50%,rgba(20,34,61,.06) 100%);background-size:200% 100%;animation:cxSk 1.2s linear infinite}
@keyframes cxSk{to{background-position:-200% 0}}
.cx-spin{display:block;width:28px;height:28px;border-radius:50%;border:3px solid #c77f00;border-right-color:transparent;animation:cxSpin .7s linear infinite}
@keyframes cxSpin{to{transform:rotate(360deg)}}
.sk-t{height:44px;width:min(560px,90%)}
.sk-p{height:18px;width:min(460px,80%)}
.sk-short{width:min(300px,55%)}
.sk-media{height:auto;aspect-ratio:16/9;border-radius:0}
.sk-btn{height:54px;width:100%}
.buy-sk .buy-b{gap:16px}
.cx-msg{grid-column:1/-1;display:flex;flex-direction:column;align-items:flex-start;gap:16px;max-width:620px}
.cx-msg .hx-actions{display:flex;align-items:center;flex-wrap:wrap;gap:14px 22px}
.cx-nojs{padding:24px 0 64px;color:var(--cx-text)}
.cx-err .cx-aside{display:none}

/* ---------- Free preview pop-up ---------- */
.pv{position:fixed;inset:0;z-index:89;display:grid;place-items:center;padding:max(20px,env(safe-area-inset-top,0px)) 16px max(20px,env(safe-area-inset-bottom,0px))}
.pv[hidden]{display:none}
.pv-scrim{position:absolute;inset:0;background:rgba(6,12,24,.8);opacity:0;transition:opacity .35s ease}
.pv.open .pv-scrim{opacity:1}
.pv-card{position:relative;width:min(960px,100%);max-height:100%;overflow:auto;overscroll-behavior:contain;display:grid;grid-template-columns:minmax(0,1fr) 280px;background:#0e1a30;color:#fff;border-radius:20px;box-shadow:0 40px 90px rgba(0,0,0,.45);opacity:0;transform:translateY(20px) scale(.98);transition:opacity .3s ease,transform .5s var(--ease-out)}
.pv.open .pv-card{opacity:1;transform:none}
.pv-card.solo{grid-template-columns:minmax(0,1fr);width:min(820px,100%)}
.pv-main{min-width:0}
.pv-vid{position:relative;aspect-ratio:16/9;background:#000;border-radius:20px 0 0 0;overflow:hidden}
.pv-card.solo .pv-vid{border-radius:20px 20px 0 0}
.pv-vid iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.pv-vid .pv-wait{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:24px;color:#c9d1df;font-size:14.5px}
.pv-txt{padding:22px 26px;max-height:56vh;overflow:auto;background:#fff;color:#22314d;border-radius:20px 0 0 0}
.pv-cap{padding:16px 22px 20px}
.pv-cap small{font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#fba412}
.pv-cap h2{font-family:var(--font-head);font-weight:800;font-size:1.2rem;line-height:1.25;margin-top:4px}
.pv-list{border-left:1px solid rgba(255,255,255,.1);padding:56px 0 12px;display:flex;flex-direction:column}
.pv-list h3{padding:0 18px 10px;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#a9b4c8}
.pv-list [data-pv]{display:grid;grid-template-columns:20px minmax(0,1fr) auto;align-items:center;gap:10px;width:100%;padding:11px 18px;border:0;background:none;color:#dfe5ef;text-align:left;font-size:13.5px;line-height:1.35;cursor:pointer;transition:background-color .2s}
.pv-list [data-pv]:hover{background:rgba(255,255,255,.06)}
.pv-list [data-pv].on{background:rgba(251,164,18,.14);color:#fff;font-weight:600}
.pv-list [data-pv] .ic{width:18px;height:18px;color:#fba412}
.pv-list [data-pv] small{color:#a9b4c8;font-size:12px}
.pv-buy{margin:auto 18px 6px;padding-top:14px;border-top:1px solid rgba(255,255,255,.1);display:flex;flex-direction:column;gap:10px}
.pv-buy .btn{width:100%;height:48px}
.pv-buy>span{font-size:12.5px;color:#a9b4c8}
.pv .x{top:12px;right:12px;width:40px;height:40px;z-index:3;--ink:#fff;--ghost-line:rgba(255,255,255,.3);background:rgba(14,26,48,.7)}

/* ---------- Checkout pop-up (on top of enroll.css) ---------- */
.co-sum{display:flex;flex-direction:column;border:1.5px solid #dde3ec;border-radius:16px;overflow:hidden}
.co-item{display:grid;grid-template-columns:72px minmax(0,1fr);gap:14px;align-items:center;padding:14px}
.co-th{position:relative;width:72px;aspect-ratio:16/10;border-radius:9px;overflow:hidden;background:#14223d}
.co-th img{width:100%;height:100%;object-fit:cover}
.co-th .cv-art{padding:6px}.co-th .cv-art b,.co-th .cv-art small{display:none}
.co-th .cv-art .bars{right:8px;top:8px;gap:3px}.co-th .cv-art .bars i{height:5px}
.co-item b{display:block;font-size:15px;font-weight:700;color:#14223d;line-height:1.3}
.co-item span{font-size:12.5px;color:#5b6b86}
.co-lines{display:flex;flex-direction:column;gap:8px;padding:12px 16px 14px;background:#f8fafc;border-top:1px solid #e6ebf2;font-size:14px}
.co-lines div{display:flex;justify-content:space-between;gap:12px;color:#5b6b86}
.co-lines div b{color:#14223d}
.co-lines .off{color:#0f6b4b}
.co-lines .off b{color:#0f6b4b}
.co-lines .tot{padding-top:8px;border-top:1px dashed #dde3ec;font-size:15px;color:#14223d;font-weight:700}
.co-lines .tot b{font:800 1.2rem/1 var(--font-head)}
.co-lines button{border:0;background:none;padding:0 0 0 8px;font:600 12.5px/1 var(--font);color:#8a5600;text-decoration:underline;cursor:pointer}
.co-cp{display:flex;flex-direction:column;gap:8px}
.co-cp-t{align-self:flex-start;display:inline-flex;align-items:center;gap:7px;border:0;background:none;padding:2px 0;font:700 13.5px/1.2 var(--font);color:#14223d;cursor:pointer;text-decoration:underline;text-decoration-color:#fba412;text-underline-offset:4px}
.co-cp-t .ic{width:16px;height:16px;color:#b06f00}
.co-cp-row{display:flex;gap:8px}
.co-cp-row input{flex:1;min-width:0;height:46px;border:1.5px solid #dde3ec;border-radius:10px;padding:0 14px;font:600 14px/1 var(--mono);letter-spacing:.04em;text-transform:uppercase;outline:none;transition:border-color .25s,box-shadow .25s}
.co-cp-row input:focus{border-color:#14223d;box-shadow:0 0 0 3px var(--amber-soft)}
.co-cp-row .btn{height:46px;padding:0 18px}
.co-cp .err{font-size:12.5px;color:#b33a3a}
.co-who-note{font-size:12.5px;color:#5b6b86;margin-top:-6px}
.co-who-note button{border:0;background:none;padding:0;font:600 12.5px/1 var(--font);color:#8a5600;text-decoration:underline;cursor:pointer}

/* ---------- Certificate check (verify.html) ---------- */
.vf-in{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,72px);align-items:center;padding-top:calc(148px + env(safe-area-inset-top,0px));padding-bottom:clamp(64px,8vw,112px);min-height:min(720px,100svh)}
.vf-copy{display:flex;flex-direction:column;gap:18px;min-width:0;max-width:520px}
.vf-form{display:flex;gap:10px;max-width:460px}
.vf-form input{flex:1;min-width:0;height:54px;border:1.5px solid #dde3ec;border-radius:12px;background:#fff;padding:0 16px;font:600 16px/1 var(--mono);letter-spacing:.04em;color:#14223d;outline:none;transition:border-color .25s,box-shadow .25s}
.vf-form input:focus{border-color:#14223d;box-shadow:0 0 0 3px var(--amber-soft)}
.vf-form .btn{height:54px}
.vf-err{font-size:14px;color:#8f2424;background:#fdeeee;border:1px solid #f4cccc;border-radius:12px;padding:11px 14px;max-width:460px}
.vf-out{min-width:0}
.vf-card{position:relative;background:#fff;border:1px solid #e6ebf2;border-radius:22px;box-shadow:0 2px 6px rgba(20,34,61,.05),0 26px 64px rgba(20,34,61,.14);overflow:hidden}
.vf-top{display:flex;align-items:center;gap:12px;padding:18px 24px;background:#e7f6ef;color:#0f6b4b;font-weight:700;font-size:15px}
.vf-top .ic{width:22px;height:22px;flex:none}
.vf-card.bad .vf-top{background:#fdeeee;color:#8f2424}
.vf-b{padding:26px 26px 24px;display:flex;flex-direction:column;gap:4px}
.vf-b small{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#5b6b86}
.vf-name{font-family:var(--font-head);font-weight:800;font-size:clamp(1.5rem,1.2rem + 1vw,2rem);line-height:1.15;color:#14223d;margin-bottom:14px}
.vf-row{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:11px 0;border-top:1px dashed #e1e6ee;font-size:14.5px}
.vf-row span{color:#5b6b86}
.vf-row b{color:#14223d;text-align:right}
.vf-row b.code{font-family:var(--mono);font-size:13.5px;background:#fff8ec;padding:3px 8px;border-radius:6px}
.vf-foot{display:flex;align-items:center;gap:10px;padding:14px 24px;border-top:1px solid #eef1f6;font-size:12.5px;color:#5b6b86}
.vf-foot svg{width:90px;height:18px;flex:none}
.vf-empty{display:flex;flex-direction:column;gap:12px;align-items:flex-start;padding:30px;border:1.5px dashed #e2cfa6;border-radius:22px;color:#5b6b86;font-size:14.5px;line-height:1.6}
.vf-empty .ic{width:36px;height:36px;color:#b06f00}

/* ---------- Narrower screens ---------- */
@media (max-width:1080px){
  .cx-grid{grid-template-columns:minmax(0,1fr) 340px;column-gap:32px}
}
@media (max-width:960px){
  .cx{--cx-top:66px}
  .cx-grid{grid-template-columns:minmax(0,1fr);grid-template-areas:"hero" "aside" "body"}
  .cx-hero{padding-top:calc(128px + env(safe-area-inset-top,0px));padding-bottom:116px}
  .cx-aside{position:relative;top:auto;margin-top:-92px;max-width:560px;width:100%}
  .cx-bar{display:flex}
  .cx-end-in{grid-template-columns:minmax(0,1fr)}
  .cx-end-act{align-items:flex-start}
  .pv-card{grid-template-columns:minmax(0,1fr)}
  .pv-vid{border-radius:20px 20px 0 0}
  .pv-txt{border-radius:20px 20px 0 0}
  .pv-list{border-left:0;border-top:1px solid rgba(255,255,255,.1);padding-top:14px}
  .vf-in{grid-template-columns:minmax(0,1fr);min-height:0}
}
@media (max-width:640px){
  .cx-title{font-size:clamp(1.75rem,1.3rem + 2.4vw,2.2rem)}
  .learn-box{grid-template-columns:minmax(0,1fr);padding:20px}
  .cx-two{grid-template-columns:minmax(0,1fr)}
  .rs{grid-template-columns:minmax(0,1fr);gap:16px;padding:20px}
  .cx-revs{grid-template-columns:minmax(0,1fr)}
  .tch{grid-template-columns:minmax(0,1fr);padding:20px}
  .cx-mod-h{padding:14px;gap:12px}
  .les{margin:0 14px}
  .les li{grid-template-columns:20px minmax(0,1fr);row-gap:4px}
  .les .r{grid-column:2;justify-content:flex-start}
  .buy-b{padding:18px}
  .cx-end .btn{width:100%}
  .cx-end-act{align-items:stretch}
  .vf-form{flex-direction:column}
  .vf-form .btn{width:100%}
  .cx-body{padding-bottom:110px}
}
@media (prefers-reduced-motion:reduce){
  .sk,.cx-spin{animation:none}
  .cx-mod-b,.cx-bar,.pv-card,.buy-media img{transition:none}
}
@media print{.cx-bar,.cx-tabs,.pv{display:none!important}.cx-aside{position:static}}

/* ---------- /training/courses: the courses that are Live (courses.js) ---------- */
.cl-title{font-family:var(--font-head);font-weight:800;font-size:clamp(1.75rem,1.35rem + 1.1vw,2.3rem);line-height:1.1;letter-spacing:-.02em;color:#14223d;margin-bottom:clamp(16px,2vw,24px)}

.cl-list{padding-top:calc(150px + env(safe-area-inset-top,0px));padding-bottom:clamp(64px,8vw,104px);background:#fff;min-height:70vh}
.cl-bar{display:flex;align-items:center;justify-content:space-between;gap:14px 24px;flex-wrap:wrap;padding-bottom:16px;margin-bottom:6px;border-bottom:1px solid #e6ebf2}
.cl-tabs{display:flex;gap:8px;flex-wrap:wrap;min-width:0}
.cl-tabs button{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 15px;border-radius:999px;border:1.5px solid #dde3ec;background:#fff;font:600 14px/1 var(--font);color:#33425e;cursor:pointer;transition:border-color .25s,background-color .25s,color .25s}
.cl-tabs button small{font-size:12px;font-weight:700;color:#7a879c;transition:color .25s}
.cl-tabs button:hover{border-color:#14223d;color:#14223d}
.cl-tabs button[aria-pressed="true"]{background:#14223d;border-color:#14223d;color:#fff}
.cl-tabs button[aria-pressed="true"] small{color:#fba412}
.cl-tools{display:flex;align-items:center;gap:10px;margin-left:auto}
.cl-search{display:flex;align-items:center;gap:8px;height:42px;padding:0 14px;border:1.5px solid #dde3ec;border-radius:12px;background:#fff;transition:border-color .25s,box-shadow .25s}
.cl-search:focus-within{border-color:#14223d;box-shadow:0 0 0 3px var(--amber-soft)}
.cl-search .ic{width:17px;height:17px;color:#7a879c;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.cl-search input{border:0;outline:0;background:none;font:500 14px/1 var(--font);color:#14223d;width:190px;min-width:0}
.cl-sort{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:#5b6b86}
.cl-sort select{height:42px;padding:0 34px 0 12px;border:1.5px solid #dde3ec;border-radius:12px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b6b86' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E") right 10px center/16px no-repeat;font:600 14px/1 var(--font);color:#14223d;-webkit-appearance:none;appearance:none;cursor:pointer}
.cl-sort select:focus{outline:0;border-color:#14223d;box-shadow:0 0 0 3px var(--amber-soft)}
.cl-count{font-size:13.5px;color:#5b6b86;margin:12px 0 16px;min-height:1px}
.cl-count:empty{margin:0 0 22px}

.cl-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.ck{position:relative;display:flex;flex-direction:column;border:1px solid #e6ebf2;border-radius:18px;background:#fff;overflow:hidden;text-decoration:none;color:#14223d;box-shadow:0 1px 2px rgba(20,34,61,.04);transition:transform .55s var(--ease-out),box-shadow .55s var(--ease-out),border-color .3s}
.motion .ck:not(.ck-sk){animation:ckIn .7s var(--ease-out) both;animation-delay:calc(var(--i,0) * 70ms)}
@keyframes ckIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.ck:hover,.ck:focus-visible{transform:translateY(-6px);box-shadow:0 26px 54px rgba(20,34,61,.14);border-color:#d5dce7}
.ck:focus-visible{outline:2px solid #fba412;outline-offset:3px}
.ck-cv{position:relative;display:block;aspect-ratio:16/9;background:#14223d;overflow:hidden}
.ck-cv img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease-out)}
.ck:hover .ck-cv img{transform:scale(1.05)}
.ck-cv .cv-art{padding:18px 20px}
.ck-cv .cv-art b{font-size:1.2rem;max-width:72%}
.ck-cv .cv-art .bars{top:auto;bottom:20px}
.ck-cv.has-pv .cv-art{padding-bottom:52px}
.ck-lv{position:absolute;left:12px;top:12px;display:inline-flex;align-items:center;gap:7px;height:28px;padding:0 11px;border-radius:999px;background:rgba(255,255,255,.95);font-size:12px;font-weight:700;color:#14223d;box-shadow:0 2px 10px rgba(0,0,0,.16)}
.ck-pv{position:absolute;left:12px;bottom:12px;display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 11px 0 8px;border-radius:999px;background:rgba(10,18,33,.78);backdrop-filter:blur(4px);font-size:12px;font-weight:700;color:#fff}
.ck-pv .ic{width:15px;height:15px;color:#fba412}
.ck-b{display:flex;flex-direction:column;gap:7px;padding:18px 20px 4px;flex:1}
.ck-cat{font-size:11.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:#b06f00}
.ck-t{font:700 1.14rem/1.3 var(--font-head);letter-spacing:-.008em;color:#14223d;text-wrap:balance}
.ck-s{font-size:14px;line-height:1.5;color:#5b6b86;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ck-meta{display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:4px;font-size:13px;color:#5b6b86}
.ck-meta span,.ck-ln{display:inline-flex;align-items:center;gap:6px}
.ck-meta .ic,.ck-ln .ic{width:15px;height:15px;color:#7a879c}
.ck-so{display:flex;flex-wrap:wrap;align-items:center;gap:4px 14px;font-size:13px;color:#5b6b86}
.ck-rt{display:inline-flex;align-items:center;gap:6px}
.ck-rt b{font-weight:800;color:#14223d}
.ck-stars{display:inline-flex;gap:1px}
.ck-stars .ic{width:14px;height:14px;fill:#e3e8ef;stroke:none}
.ck-stars .ic.on{fill:#fba412}
.ck-rt small{font-size:12.5px}
.ck-f{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:14px;padding:14px 20px 18px;border-top:1px dashed #e6ebf2}
.ck-p{display:flex;align-items:baseline;flex-wrap:wrap;gap:2px 8px}
.ck-p b{font:800 1.3rem/1.1 var(--font-head);letter-spacing:-.01em}
.ck-p s{font-size:13px;color:#7a879c}
.ck-off{position:absolute;right:12px;top:12px;display:inline-flex;align-items:center;height:28px;padding:0 11px;border-radius:999px;background:#e7f6ef;font-size:12px;font-weight:800;color:#0f6b4b;box-shadow:0 2px 10px rgba(0,0,0,.16)}
.ck-p{flex-wrap:nowrap;white-space:nowrap}
.ck-go{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 6px 0 14px;border-radius:999px;background:#fff8ec;font-size:13.5px;font-weight:700;color:#14223d;transition:background-color .35s,color .35s;white-space:nowrap}
.ck-go .ic{width:28px;height:28px;padding:6px;border-radius:50%;background:#fba412;color:#14223d;transition:transform .45s var(--ease-out)}
.ck:hover .ck-go{background:#14223d;color:#fff}
.ck:hover .ck-go .ic{transform:translateX(3px)}
/* one course: a wide card, picture beside the details */
.cl-grid.one{grid-template-columns:minmax(0,1fr)}
.cl-grid.one .ck{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);grid-template-rows:1fr auto;max-width:1000px}
.cl-grid.one .ck-cv{grid-row:1/3;aspect-ratio:auto;min-height:100%}
.cl-grid.one .ck-cv img{position:absolute;inset:0}
.cl-grid.one .ck-b{padding:26px 28px 6px;justify-content:center}
.cl-grid.one .ck-t{font-size:1.5rem}
.cl-grid.one .ck-s{-webkit-line-clamp:3;font-size:15px}
.cl-grid.one .ck-f{padding:16px 28px 24px}
/* loading */
.ck-sk{pointer-events:none}
.ck-sk .ck-cv,.ck-sk .ck-b i{background:linear-gradient(90deg,#eef2f7 0%,#f6f8fb 50%,#eef2f7 100%);background-size:200% 100%;animation:cxSk 1.2s linear infinite}
.ck-sk .ck-b{padding-bottom:22px}
.ck-sk .ck-b i{display:block;height:14px;border-radius:7px}
.ck-sk .ck-b i:nth-child(1){width:35%}.ck-sk .ck-b i:nth-child(2){width:85%;height:20px}.ck-sk .ck-b i:nth-child(3){width:65%}
/* nothing open, nothing found, could not load */
.cl-msg{display:flex;flex-direction:column;align-items:flex-start;gap:12px;max-width:640px;padding:clamp(26px,3vw,38px);border:1.5px dashed #ecc98a;border-radius:20px;background:#fffdf8}
.cl-msg-ic{width:52px;height:52px;border-radius:15px;display:grid;place-items:center;background:#14223d;color:#fba412}
.cl-msg-ic .ic{width:24px;height:24px}
.cl-msg h3{font:800 1.35rem/1.25 var(--font-head);color:#14223d}
.cl-msg p,.cl-msg-p{font-size:15px;line-height:1.6;color:#33425e}
.cl-msg-a{display:flex;align-items:center;flex-wrap:wrap;gap:12px 22px;margin-top:6px}
.cl-none{grid-column:1/-1;display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:28px 0;color:#5b6b86}
.cl-none b{font:800 1.15rem/1.3 var(--font-head);color:#14223d}
@media (max-width:1024px){.cl-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:760px){
  .cl-grid.one .ck{display:flex}
  .cl-grid.one .ck-cv{aspect-ratio:16/9;min-height:0}
  .cl-grid.one .ck-b{padding:18px 20px 4px}.cl-grid.one .ck-f{padding:14px 20px 18px}
  .cl-grid.one .ck-t{font-size:1.2rem}
}
@media (max-width:640px){
  .cl-list{padding-top:calc(144px + env(safe-area-inset-top,0px))}
  .cl-grid{grid-template-columns:minmax(0,1fr);gap:16px}
  .cl-bar{align-items:stretch}
  .cl-tabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:0 calc(-1 * var(--gut));padding:0 var(--gut)}
  .cl-tabs::-webkit-scrollbar{display:none}
  .cl-tabs button{flex:none}
  .cl-tools{width:100%;margin-left:0}
  .cl-search{flex:1}.cl-search input{width:100%}
  .cl-sort span{display:none}
}
@media (prefers-reduced-motion:reduce){.ck,.ck-cv img{transition:none}.ck-sk .ck-cv,.ck-sk .ck-b i{animation:none}}