:root{--p:#105f68;--m:#3a9295;--a:#63c1bb;--l:#9ed5d1;--x:#c8e6e2;--ink:#12373b;--muted:#647b7e;--line:#dceceb;--shadow:0 18px 55px #105f681c}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#f7fbfa;color:var(--ink);font-family:"Be Vietnam Pro",Arial,sans-serif}button,input,textarea{font:inherit}button{cursor:pointer}.app{display:grid;grid-template-columns:264px 1fr;min-height:100vh}aside#side{position:fixed;inset:0 auto 0 0;width:264px;padding:27px 22px;background:linear-gradient(180deg,#0d5962,#0b6870 55%,#084b53);color:white;display:flex;flex-direction:column;z-index:50}.brand{display:flex;align-items:center;gap:12px;color:white;text-decoration:none;margin:0 7px 30px}.brand i{width:50px;height:50px;border:2px solid var(--l);border-radius:15px;display:grid;place-items:center;font:700 29px Georgia}.brand>b{font:700 17px Georgia;letter-spacing:1px}.brand small,.profile small,.overall small,.help small{display:block;font:8px Arial;color:var(--x);margin-top:4px}.profile,.overall,.help,.instructor{display:flex;align-items:center;gap:11px}.profile{padding:14px 8px;border-block:1px solid #ffffff22}.profile p,.overall p,.help p,.instructor p{margin:0}.profile b,.profile small,.overall b,.overall small,.help b,.help small,.instructor b,.instructor small{display:block}.avatar{width:49px;height:49px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(145deg,var(--x),var(--a));color:var(--p);font-weight:800;border:2px solid #ffffffaa}.overall{margin:24px 4px}.ring{width:92px;height:92px;border-radius:50%;display:grid;place-content:center;text-align:center;background:radial-gradient(circle,#0b626b 57%,transparent 59%),conic-gradient(var(--l) 68%,#ffffff22 0)}.ring b{font-size:20px}#side nav{display:flex;flex-direction:column;gap:7px}#side nav a{padding:12px 14px;border-radius:12px;text-decoration:none;color:#dff5f3;font-size:13px}#side nav a:hover,#side nav a.active{background:linear-gradient(90deg,#63c1bb77,#9ed5d122);color:white}.help{margin-top:auto;border-radius:14px;padding:13px;background:#ffffff12;border:1px solid #ffffff20}.help>p{font-size:10px}#closeSide{display:none}.app>main{grid-column:2;min-width:0}header{min-height:86px;position:sticky;top:0;z-index:30;background:#ffffffed;backdrop-filter:blur(18px);display:flex;align-items:center;gap:18px;padding:14px 34px;border-bottom:1px solid var(--line)}.tabs{display:flex;gap:8px}.tab{border:1px solid var(--line);background:white;border-radius:14px;padding:15px 25px;font-weight:700;color:var(--p)}.tab.active{background:var(--p);color:white}.search{margin-left:auto;width:min(280px,24vw);display:flex;gap:10px;align-items:center;border:1px solid var(--line);background:white;padding:11px 14px;border-radius:13px}.search input{border:0;outline:0;width:100%}.bell,#menu{border:0;background:#f3fbfa;width:42px;height:42px;border-radius:12px}#menu{display:none}.hero{display:grid;grid-template-columns:1fr 1.12fr;gap:35px;padding:48px 34px 28px;max-width:1400px;margin:auto;scroll-margin-top:100px}.heroText{align-self:center}.hero label,.title label,.notes label,.now>label,#modName{font-size:10px;font-weight:800;letter-spacing:1.8px;color:var(--m)}.hero h1{font-size:clamp(38px,4.2vw,66px);line-height:1.08;letter-spacing:-2.8px;margin:13px 0 18px}.hero h1 em{font-style:normal;color:var(--m)}.heroText>p{font-size:15px;line-height:1.75;color:var(--muted)}.heroText>div{display:flex;gap:22px;align-items:center;margin:25px 0}.primary,.now>button{border:0;border-radius:12px;padding:14px 22px;color:white;font-weight:700;background:linear-gradient(135deg,var(--m),var(--a));box-shadow:0 9px 22px #3a92953d}.heroText a{text-decoration:none;font-weight:700;color:var(--p)}.hero ul{display:flex;gap:30px;list-style:none;padding:0}.hero li{padding-right:28px;border-right:1px solid var(--line)}.hero li b,.hero li small{display:block}.hero li small{font-size:10px;color:var(--muted)}.heroVideo{min-height:340px;border:0;border-radius:24px;position:relative;overflow:hidden;color:white;background:radial-gradient(circle at 75% 30%,#9ed5d155,transparent 22%),linear-gradient(120deg,#0d3337,#277b7d);box-shadow:var(--shadow);text-align:left}.teacher{position:absolute;right:18%;bottom:0;width:31%;height:83%}.teacher i{position:absolute;top:2%;left:28%;width:43%;aspect-ratio:.82;border-radius:45%;background:linear-gradient(150deg,#d9a37e,#8c563b);box-shadow:inset 0 15px #172525}.teacher b{position:absolute;inset:30% 0 0;border-radius:45px 45px 0 0;background:linear-gradient(90deg,#111f21,#263a3c 55%,#0c1718)}.new{position:absolute;top:18px;left:18px;background:#052629cc;padding:8px 12px;border-radius:9px;font-size:10px}.bigPlay{position:absolute;left:50%;top:47%;transform:translate(-50%,-50%);width:74px;height:74px;border:3px solid var(--l);border-radius:50%;background:#105f68aa;display:grid;place-items:center;font-size:25px;z-index:2}.heroVideo>p{position:absolute;left:22px;bottom:18px;z-index:2}.heroVideo p b,.heroVideo p small{display:block}.heroVideo p small{font-size:10px;color:var(--x)}.dashboard{display:grid;grid-template-columns:1fr 280px;gap:20px;max-width:1400px;margin:auto;padding:12px 34px 34px}.curriculum,.videos,.notes,.awards{background:white;border:1px solid var(--line);border-radius:22px;box-shadow:0 10px 34px #105f680e;padding:20px;scroll-margin-top:100px}.title{display:flex;align-items:end;justify-content:space-between;margin-bottom:18px}.title p{margin:0}.title p>b{display:block;font-size:27px;margin-top:5px}.title>span{font-size:11px;color:var(--muted)}.module{border:1px solid var(--line);border-radius:14px;overflow:hidden;margin-top:9px}.module>button{width:100%;border:0;background:white;padding:15px;display:grid;grid-template-columns:38px 1fr auto auto;align-items:center;gap:11px;text-align:left}.module.open>button{background:linear-gradient(90deg,var(--p),#11727a);color:white}.num{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--p);color:white;font-weight:800}.module.open .num{background:var(--l);color:var(--p)}.modTitle b,.modTitle small{display:block}.modTitle b{font-size:13px}.modTitle small{font-size:9px;color:var(--muted)}.module.open .modTitle small{color:var(--x)}.mini{font-size:10px}.lessons{display:none}.module.open .lessons{display:block}.lesson{display:grid;grid-template-columns:1fr auto auto;gap:14px;align-items:center;padding:11px 14px;border-top:1px solid var(--line)}.lesson.current{background:#f3fbfa}.lesson>div{display:flex;align-items:center;gap:10px}.state{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--l);font-size:9px}.state.done{background:var(--a);color:white}.lesson b,.lesson small{display:block}.lesson b{font-size:11px}.lesson small,.time{font-size:8px;color:var(--muted)}.lesson>button{border:0;border-radius:8px;background:var(--p);color:white;font-size:9px;padding:8px 13px}.now{background:linear-gradient(155deg,var(--p),#0b7279);border-radius:22px;padding:24px 20px;color:white;align-self:start;box-shadow:var(--shadow)}.now>label{color:var(--l)}.now>span{display:table;margin:15px 0 12px;border:1px solid #ffffff44;border-radius:20px;padding:6px 10px;font-size:10px}.now h2{font-size:21px}.bar{display:flex;gap:9px;align-items:center}.bar>i{height:7px;border-radius:5px;background:linear-gradient(90deg,var(--l) 68%,#ffffff33 0);flex:1}.instructor{padding:23px 0;border-top:1px solid #ffffff26;margin-top:22px}.instructor small{font-size:8px;color:var(--x)}.now>button{width:100%;background:linear-gradient(135deg,var(--a),var(--l));color:var(--p)}.streak{background:white;color:var(--ink);border-radius:14px;padding:14px;margin-top:18px}.streak small,.streak b{display:block;font-size:9px}.streak b{font-size:12px}.streak p{display:flex;justify-content:space-between}.streak i{font-style:normal;font-size:7px;width:21px;height:21px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center}.streak i:not(.today){background:var(--a);color:white}.streak .today{border:2px solid var(--m)}.videos,.notes,.awards{max-width:calc(1400px - 68px);margin:0 auto 30px}.title>button{background:#f3fbfa;border:1px solid var(--line);border-radius:10px;padding:9px 12px;font-size:10px}#videoGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.videoCard{border:1px solid var(--line);border-radius:15px;overflow:hidden}.thumb{width:100%;height:168px;border:0;background:linear-gradient(135deg,#143f43,#397c7d);position:relative;overflow:hidden}.thumb:before{content:"";position:absolute;width:135px;height:180px;right:15%;bottom:-40px;border-radius:60px 60px 10px 10px;background:linear-gradient(#d2a183 28%,#142426 29%)}.thumb .play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:52px;height:52px;border:2px solid white;border-radius:50%;display:grid;place-items:center;background:#105f6899;color:white}.thumb .dur{position:absolute;right:9px;bottom:8px;background:#000a;color:white;padding:4px 7px;border-radius:5px;font-size:8px}.videoBody{padding:13px}.tag{font-size:8px;background:var(--x);padding:5px 8px;border-radius:20px}.videoBody h3{font-size:13px;min-height:38px}.videoBody footer{display:flex;justify-content:space-between;align-items:center}.videoBody footer button{border:1px solid var(--m);background:white;color:var(--p);border-radius:8px;padding:7px 11px;font-size:9px}.notes{display:grid;grid-template-columns:.7fr 1.3fr;gap:35px;background:linear-gradient(135deg,#f3fbfa,white)}.notes h2{margin-bottom:5px}.notes p{font-size:12px;color:var(--muted)}.notes textarea{width:100%;height:110px;border:1px solid var(--line);border-radius:12px;padding:13px;resize:vertical}.notes footer{display:flex;justify-content:space-between;align-items:center}.notes footer small{color:var(--muted)}.notes .primary{padding:9px 14px;font-size:10px}.awards>div:last-child{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.awards article{display:flex;gap:13px;align-items:center;border:1px solid var(--line);border-radius:13px;padding:16px;background:#f3fbfa}.awards article p{margin:0}.awards article b,.awards article small{display:block}.awards article small{font-size:8px;color:var(--muted)}.locked{opacity:.45}.pageFoot{padding:18px 34px 30px;font-size:9px;color:var(--muted);display:flex;justify-content:space-between}.modal{position:fixed;inset:0;z-index:100;display:none;place-items:center;padding:24px}.modal.open{display:grid}.shade{position:absolute;inset:0;background:#06272acc;backdrop-filter:blur(8px)}.modal>article{position:relative;width:min(900px,95vw);background:white;border-radius:20px;overflow:hidden}.x{position:absolute;z-index:2;right:14px;top:12px;width:38px;height:38px;border:0;border-radius:50%;background:#0009;color:white;font-size:25px}.frame{aspect-ratio:16/9;background:#073f45}.frame iframe{width:100%;height:100%;border:0}.modal article>section{padding:22px}.modal section p{color:var(--muted);font-size:12px}.modal section footer{display:flex;gap:22px;align-items:center;font-size:10px}.modal section footer button{margin-left:auto;border:0;border-radius:9px;padding:9px 12px;background:var(--x);color:var(--p);font-weight:700}#toast{position:fixed;right:25px;bottom:25px;background:var(--p);color:white;padding:13px 18px;border-radius:11px;transform:translateY(90px);opacity:0;transition:.25s;z-index:150;font-size:11px}#toast.show{transform:none;opacity:1}.empty{padding:30px;text-align:center;color:var(--muted)}
@media(max-width:1050px){.app{grid-template-columns:220px 1fr}aside#side{width:220px;padding-inline:15px}.hero{grid-template-columns:1fr}.dashboard{grid-template-columns:1fr}#videoGrid{grid-template-columns:repeat(2,1fr)}.tab{padding:13px 16px;font-size:12px}}
@media(max-width:760px){.app{display:block}aside#side{transform:translateX(-105%);transition:.25s;width:min(294px,88vw)}aside#side.open{transform:none}#closeSide{display:block;position:absolute;right:12px;top:10px;border:0;background:none;color:white;font-size:26px}.app>main{width:100%}header{padding:10px 15px;flex-wrap:wrap}#menu{display:block}.tabs{order:3;width:100%}.tab{flex:1;font-size:10px}.search{margin-left:auto;width:190px}.bell{display:none}.hero{padding:32px 16px 20px}.hero h1{font-size:39px}.heroVideo{min-height:275px}.dashboard{padding:10px 16px 25px}.module>button{grid-template-columns:32px 1fr auto}.mini{display:none}.lesson{grid-template-columns:1fr auto}.time{display:none}.videos,.notes,.awards{max-width:calc(100% - 32px);padding:16px}#videoGrid,.notes,.awards>div:last-child{grid-template-columns:1fr}.modal{padding:10px}.pageFoot{padding-inline:16px}}
/* Commercial course hierarchy */
#courseIntro{margin-bottom:24px}.courseCover{position:relative;display:grid;grid-template-columns:86px 1fr 210px;gap:20px;padding:24px;border-radius:18px;background:linear-gradient(135deg,#0e5b63 0%,#13727a 62%,#278f91 100%);color:white;overflow:hidden;box-shadow:0 16px 38px #105f6828}.courseCover:after{content:"";position:absolute;width:260px;height:260px;border-radius:50%;background:#9ed5d119;right:-90px;top:-130px}.courseIcon{width:74px;height:74px;border-radius:20px;display:grid;place-items:center;font-size:36px;background:linear-gradient(145deg,var(--l),var(--a));color:var(--p);box-shadow:inset 0 0 0 1px #ffffff55}.courseMain{position:relative;z-index:1}.commercialBadge{display:inline-block;font-size:8px;font-weight:800;letter-spacing:1.5px;color:var(--p);background:var(--l);border-radius:20px;padding:6px 9px}.courseMain h2{font-size:27px;line-height:1.25;margin:10px 0 5px;letter-spacing:-.6px}.courseMain h3{font-size:12px;font-weight:600;color:var(--x);margin:0}.courseMain>p{font-size:10px;line-height:1.65;color:#e8f8f6;max-width:660px;margin:10px 0 14px}.courseFacts{display:flex;gap:20px}.courseFacts span{padding-right:20px;border-right:1px solid #ffffff2e}.courseFacts span:last-child{border:0}.courseFacts b,.courseFacts small{display:block}.courseFacts b{font-size:11px}.courseFacts small{font-size:7px;color:var(--x);margin-top:3px}.courseAction{position:relative;z-index:1;align-self:center;background:#ffffff13;border:1px solid #ffffff26;border-radius:14px;padding:15px}.courseAction>span,.courseAction>small{display:block;font-size:8px;color:var(--x)}.courseAction>b{display:block;font-size:22px;margin:3px 0}.courseAction>i{display:block;height:6px;border-radius:10px;background:#ffffff30;overflow:hidden}.courseAction>i em{display:block;height:100%;background:var(--l)}.courseAction button{width:100%;margin:13px 0 8px;border:0;border-radius:9px;padding:10px;background:linear-gradient(135deg,var(--l),var(--a));color:var(--p);font-size:10px;font-weight:800}.module{transition:.2s}.module:hover{border-color:var(--l);box-shadow:0 8px 24px #105f6810}.module>.chapterHead{grid-template-columns:92px 1fr 100px 22px;padding:17px 18px}.chapterLabel{display:grid;place-items:center;min-height:40px;border-radius:10px;background:#e5f4f2;color:var(--p);font-size:9px;font-weight:800;letter-spacing:.7px}.module.open .chapterLabel{background:var(--l);color:var(--p)}.chapterMeta{text-align:right}.chapterMeta b,.chapterMeta small{display:block}.chapterMeta b{font-size:9px}.chapterMeta small{font-size:7px;color:var(--muted);margin-top:4px}.module.open .chapterMeta small{color:var(--x)}.chev{font-size:18px;transition:.2s}.module.open .chev{transform:rotate(180deg)}.lesson{padding:14px 18px;min-height:76px}.lessonText small,.lessonText b,.lessonText em{display:block}.lessonText small{font-size:7px;font-weight:800;letter-spacing:1px;color:var(--m);margin-bottom:4px}.lessonText b{font-size:12px}.lessonText em{font-style:normal;font-size:7px;color:var(--muted);margin-top:5px}.lesson .time{text-align:center;min-width:62px;padding:7px 10px;border-radius:9px;background:#f1f9f8}.lesson .time b,.lesson .time small{display:block}.lesson .time b{font-size:10px;color:var(--p)}.lesson .time small{font-size:7px;margin-top:2px}.lesson>button{min-width:112px;padding:10px 13px;font-weight:700}.lesson>button:hover{background:var(--m)}.state{flex:0 0 auto}
@media(max-width:1100px){.courseCover{grid-template-columns:70px 1fr}.courseAction{grid-column:1/-1;display:grid;grid-template-columns:auto auto 1fr 160px;align-items:center;gap:12px}.courseAction button{margin:0}.courseAction>small{display:none}.module>.chapterHead{grid-template-columns:82px 1fr 90px 20px}}
@media(max-width:760px){.courseCover{grid-template-columns:1fr;padding:18px}.courseIcon{width:58px;height:58px}.courseMain h2{font-size:22px}.courseFacts{display:grid;grid-template-columns:1fr 1fr;gap:10px}.courseFacts span{border:0}.courseAction{grid-column:auto;display:block}.courseAction button{margin:12px 0 6px}.module>.chapterHead{grid-template-columns:78px 1fr 20px}.chapterMeta{display:none}.lesson{grid-template-columns:1fr auto}.lesson .time{display:block}.lesson>button{grid-column:1/-1;width:100%}.lessonText b{font-size:11px}}
@media(max-width:430px){.courseCover{margin-inline:-5px}.courseMain h2{font-size:20px}.lesson>div{align-items:flex-start}.lesson{padding:13px 12px;gap:8px}.lesson .time{min-width:57px;padding-inline:6px}}
/* Homepage article slider */
.homeSlider{position:relative;height:clamp(470px,53vw,650px);max-width:calc(1400px - 68px);margin:32px auto 28px;border-radius:26px;overflow:hidden;background:var(--p);box-shadow:0 22px 60px #105f6828;scroll-margin-top:100px}.slides,.homeSlide{position:absolute;inset:0}.homeSlide{opacity:0;visibility:hidden;transform:scale(1.025);background-size:cover;background-position:center;transition:opacity .65s ease,transform 1.2s ease,visibility .65s}.homeSlide.active{opacity:1;visibility:visible;transform:scale(1)}.slideContent{position:absolute;left:clamp(32px,5vw,72px);top:50%;transform:translateY(-50%);width:min(600px,53%);color:white;z-index:2}.slideTag{display:inline-flex;align-items:center;gap:8px;background:#9ed5d125;border:1px solid #9ed5d15c;color:var(--x);padding:8px 12px;border-radius:30px;font-size:9px;font-weight:800;letter-spacing:1.3px}.slideTag:before{content:"";width:7px;height:7px;border-radius:50%;background:var(--a);box-shadow:0 0 0 5px #63c1bb22}.slideContent h1{font-size:clamp(34px,4.2vw,62px);line-height:1.09;letter-spacing:-2px;margin:17px 0;color:white}.slideContent h1 em{font-style:normal;color:var(--l)}.slideContent>p{font-size:13px;line-height:1.75;color:#e3f4f2;max-width:540px}.slideContent>div{display:flex;align-items:center;gap:18px;margin-top:24px}.slideCta{border:0;border-radius:12px;padding:14px 20px;background:linear-gradient(135deg,var(--l),var(--a));color:var(--p);font-weight:800;box-shadow:0 10px 28px #0003}.slideCta b{margin-left:12px}.slideContent>div>span{font-size:9px;color:var(--x)}.slideArrow{position:absolute;z-index:4;top:50%;transform:translateY(-50%);width:43px;height:43px;border-radius:50%;border:1px solid #ffffff55;background:#0a4c53aa;color:white;font-size:26px;display:grid;place-items:center}.slideArrow:hover{background:var(--m)}.slideArrow.prev{left:15px}.slideArrow.next{right:15px}.slideNav{position:absolute;z-index:4;left:clamp(32px,5vw,72px);bottom:27px;display:flex;gap:8px}.slideNav button{width:40px;height:5px;padding:0;border:0;border-radius:6px;background:#ffffff50;overflow:hidden}.slideNav button i{display:block;width:0;height:100%;background:var(--l)}.slideNav button.active i{width:100%;animation:slideTimer 6s linear}.slideCount{position:absolute;z-index:4;right:28px;bottom:23px;color:white;display:flex;align-items:baseline;gap:4px}.slideCount b{font-size:20px}.slideCount span{font-size:10px;color:var(--x)}@keyframes slideTimer{from{width:0}to{width:100%}}
.articleModal{position:fixed;inset:0;z-index:120;display:none;place-items:center;padding:24px}.articleModal.open{display:grid}.articleShade{position:absolute;inset:0;background:#06272ad9;backdrop-filter:blur(9px)}.articleReader{position:relative;width:min(860px,94vw);max-height:91vh;overflow:auto;background:white;border-radius:22px;box-shadow:0 30px 100px #0007}.articleReader>img{display:block;width:100%;height:320px;object-fit:cover}.articleClose{position:absolute;right:15px;top:14px;z-index:2;width:40px;height:40px;border:0;border-radius:50%;background:#082f33c9;color:white;font-size:25px}.articleBody{padding:28px 36px 35px}.articleBody>span{font-size:9px;font-weight:800;letter-spacing:1.4px;color:var(--m)}.articleBody h2{font-size:29px;line-height:1.35;margin:8px 0}.articleMeta{font-size:9px;color:var(--muted);padding-bottom:17px;border-bottom:1px solid var(--line)}#articleContent{font-size:12px;line-height:1.85;color:#435f62}#articleContent h3{font-size:17px;color:var(--ink);margin:22px 0 5px}#articleContent ul{padding-left:18px}.articleBody>.primary{margin-top:15px}
@media(max-width:1050px){.homeSlider{margin:24px 34px}.slideContent{width:63%}.slideContent h1{font-size:45px}}
@media(max-width:760px){.homeSlider{height:570px;margin:20px 16px;border-radius:20px}.homeSlide{background-position:68% center}.homeSlide:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,#073e44 0%,#073e44e8 42%,#073e4448 100%)}.slideContent{left:24px;right:24px;top:auto;bottom:60px;transform:none;width:auto}.slideContent h1{font-size:35px}.slideContent>p{font-size:11px}.slideArrow{top:37%;width:37px;height:37px}.slideNav{left:24px;bottom:24px}.slideCount{bottom:20px}.articleReader>img{height:220px}.articleBody{padding:22px}.articleBody h2{font-size:23px}}
@media(max-width:430px){.homeSlider{height:530px}.slideContent h1{font-size:30px;letter-spacing:-1px}.slideContent>div{align-items:flex-start;flex-direction:column;gap:10px;margin-top:16px}.slideContent>p{line-height:1.55}.slideArrow{top:30%}}
/* Learner-first commercial dashboard */
.learnerHub{max-width:calc(1400px - 68px);margin:0 auto 30px;padding:24px;background:white;border:1px solid var(--line);border-radius:22px;box-shadow:0 12px 38px #105f680d}.hubHeading{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:19px}.hubHeading span,.hubCard>span{font-size:8px;font-weight:800;letter-spacing:1.3px;color:var(--m)}.hubHeading h2{font-size:23px;margin:5px 0 3px;letter-spacing:-.5px}.hubHeading p{font-size:9px;color:var(--muted);margin:0}.hubHeading>a{font-size:9px;font-weight:700;color:var(--p);text-decoration:none}.hubGrid{display:grid;grid-template-columns:2fr repeat(3,1fr);gap:13px}.continueCard,.hubCard{border:1px solid var(--line);border-radius:16px;background:#fbfefe;transition:.2s}.continueCard:hover,.hubCard:hover{transform:translateY(-3px);box-shadow:0 12px 26px #105f6813;border-color:var(--l)}.continueCard{display:grid;grid-template-columns:145px 1fr;gap:16px;padding:13px;background:linear-gradient(135deg,#f0faf9,#fff)}.continueVisual{position:relative;min-height:150px;border-radius:12px;background:radial-gradient(circle at 70% 30%,#9ed5d155,transparent 25%),linear-gradient(145deg,#0a4850,#15747a);display:grid;place-items:center}.continueVisual>span{width:49px;height:49px;border-radius:50%;display:grid;place-items:center;background:#ffffffeb;color:var(--p);box-shadow:0 8px 25px #0004}.continueVisual small{position:absolute;right:8px;bottom:8px;background:#001e22bb;color:white;padding:4px 6px;border-radius:5px;font-size:7px}.continueCard>div:last-child{align-self:center}.hubBadge{font-size:7px;font-weight:800;letter-spacing:1px;color:var(--m)}.continueCard h3{font-size:15px;line-height:1.4;margin:5px 0}.continueCard p{font-size:8px;color:var(--muted);margin:0}.continueProgress{display:flex;align-items:center;gap:8px;margin:11px 0}.continueProgress>i{height:5px;border-radius:5px;background:var(--x);flex:1;overflow:hidden}.continueProgress>i em{display:block;width:42%;height:100%;background:var(--a)}.continueProgress span{font-size:7px;color:var(--muted)}.continueCard button{border:0;border-radius:9px;background:var(--p);color:white;padding:9px 13px;font-size:9px;font-weight:700}.hubCard{padding:15px;display:flex;flex-direction:column;align-items:flex-start}.hubIcon{width:35px;height:35px;border-radius:10px;display:grid;place-items:center;background:var(--x);color:var(--p);font-size:17px;margin-bottom:12px}.hubCard strong{font-size:20px;margin:5px 0}.hubCard p{font-size:8px;line-height:1.5;color:var(--muted);min-height:25px;margin:0 0 10px}.progressHub>i{display:block;width:100%;height:6px;background:var(--x);border-radius:5px;overflow:hidden}.progressHub>i em{display:block;width:68%;height:100%;background:var(--a)}.hubCard a,.hubCard button{margin-top:auto;font-size:8px;font-weight:700;color:var(--p);text-decoration:none}.hubCard button{border:1px solid var(--l);background:white;border-radius:8px;padding:7px 9px}.miniDays{display:flex;gap:4px;margin-bottom:9px}.miniDays i{font-style:normal;width:23px;height:23px;border-radius:50%;display:grid;place-items:center;background:var(--a);color:white;font-size:7px}.miniDays .next{background:white;color:var(--p);border:2px solid var(--m)}.miniDays i:last-child{background:#eef7f6;color:var(--muted)}.supportHub{background:linear-gradient(145deg,var(--p),#11737a);color:white;border:0}.supportHub .hubIcon{background:#ffffff1f;color:var(--l)}.supportHub>span{color:var(--l)}.supportHub p,.supportHub small{color:var(--x)}.supportHub button{color:var(--p);background:var(--l);border:0}.supportHub small{font-size:6px;margin-top:8px}
@media(max-width:1200px){.hubGrid{grid-template-columns:2fr 1fr 1fr}.supportHub{grid-column:1/-1;display:grid;grid-template-columns:auto 1fr 1fr auto;gap:12px;align-items:center}.supportHub .hubIcon{margin:0}.supportHub>span,.supportHub>small{display:none}.supportHub strong,.supportHub p{margin:0;min-height:0}.supportHub button{margin:0}}
@media(max-width:900px){.hubGrid{grid-template-columns:1fr 1fr}.continueCard{grid-column:1/-1}.supportHub{grid-column:auto;display:flex}.supportHub>span,.supportHub>small{display:block}.supportHub strong{margin:5px 0}.supportHub p{margin-bottom:10px}.supportHub button{margin-top:auto}}
@media(max-width:760px){.learnerHub{margin:0 16px 25px;padding:17px}.hubHeading{align-items:flex-start}.hubHeading>a{display:none}.hubHeading h2{font-size:20px}.hubGrid{grid-template-columns:1fr}.continueCard{grid-column:auto;grid-template-columns:110px 1fr}.continueVisual{min-height:145px}.supportHub{display:flex}.hubCard p{min-height:0}.hubCard{min-height:170px}}
@media(max-width:430px){.continueCard{grid-template-columns:1fr}.continueVisual{min-height:120px}.hubHeading h2{font-size:18px}}
/* Account, Q&A and managed content */
.accountBtn{margin-left:auto;border:0;border-radius:11px;background:var(--p);color:white;padding:11px 15px;font-size:9px;font-weight:700;white-space:nowrap}.search+.accountBtn{margin-left:0}.adminLink{border:1px solid var(--l);border-radius:11px;padding:10px 13px;color:var(--p);font-size:9px;font-weight:700;text-decoration:none}.loginModal{position:fixed;inset:0;z-index:160;display:none;place-items:center;padding:18px}.loginModal.open{display:grid}.loginShade{position:absolute;inset:0;background:#06272adb;backdrop-filter:blur(9px)}.loginCard{position:relative;width:min(440px,94vw);background:white;border-radius:22px;padding:30px;box-shadow:0 30px 100px #0007}.loginBrand{width:55px;height:55px;border-radius:16px;background:var(--p);color:white;display:grid;place-items:center;font:700 28px Georgia}.loginCard>span{display:block;font-size:8px;letter-spacing:1.5px;color:var(--m);font-weight:800;margin-top:11px}.loginCard h2{font-size:25px;margin:6px 0}.loginCard>p{font-size:10px;line-height:1.6;color:var(--muted)}.loginCard label{display:block;font-size:9px;font-weight:700;margin-top:12px}.loginCard input{display:block;width:100%;border:1px solid var(--line);border-radius:10px;padding:11px;margin-top:5px;outline-color:var(--a)}.loginCard>.primary{width:100%;margin-top:18px}.loginCard>small{display:block;text-align:center;font-size:7px;color:var(--muted);margin-top:10px}.loginClose{position:absolute;right:15px;top:13px;border:0;background:#f0f7f6;width:34px;height:34px;border-radius:50%;font-size:20px}.qaPanel{margin-top:23px;border-top:1px solid var(--line);padding-top:20px}.qaHeading{display:flex;justify-content:space-between;align-items:end}.qaHeading span{font-size:8px;color:var(--m);font-weight:800;letter-spacing:1.2px}.qaHeading h3{font-size:18px;margin:4px 0}.qaHeading>b{font-size:8px;color:var(--muted)}#qaList{display:flex;flex-direction:column;gap:9px;max-height:210px;overflow:auto;margin:13px 0}.qaItem{display:flex;gap:9px;padding:10px;border-radius:11px;background:#f4fafa}.qaItem>i,.qaAvatar{width:30px;height:30px;flex:0 0 auto;border-radius:50%;display:grid;place-items:center;background:var(--x);color:var(--p);font-style:normal;font-size:8px;font-weight:800}.qaItem b,.qaItem p,.qaItem small{display:block;margin:0}.qaItem b{font-size:9px}.qaItem p{font-size:9px;line-height:1.5;margin:3px 0}.qaItem small{font-size:7px;color:var(--muted)}#qaForm{display:grid;grid-template-columns:32px 1fr auto;gap:9px;align-items:start}#qaForm textarea{height:65px;resize:none;border:1px solid var(--line);border-radius:10px;padding:10px;font-size:9px}#qaForm button{border:0;border-radius:9px;background:var(--p);color:white;padding:10px;font-size:8px;font-weight:700}.qaPanel>small{display:block;font-size:7px;color:var(--muted);margin:8px 0 0 41px}.published{max-width:calc(1400px - 68px);margin:0 auto 30px;padding:22px;background:white;border:1px solid var(--line);border-radius:22px;box-shadow:0 10px 34px #105f680e}.published .title>span{font-size:8px}.publishedGrid,#publishedGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.managedCard{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#fff}.managedThumb{height:120px;background:linear-gradient(135deg,var(--p),var(--m));display:grid;place-items:center;color:white;font-size:30px}.managedCard>div:last-child{padding:12px}.managedCard span{font-size:7px;color:var(--m);font-weight:800}.managedCard h3{font-size:12px;line-height:1.4;margin:5px 0}.managedCard p{font-size:8px;color:var(--muted)}.managedCard button{border:0;background:none;color:var(--p);font-size:8px;font-weight:800;padding:0}.publishedEmpty{grid-column:1/-1;text-align:center;padding:30px;border:1px dashed var(--l);border-radius:13px;color:var(--muted);font-size:9px}
@media(max-width:760px){.accountBtn{margin-left:auto}.adminLink{display:none}.search{order:4;width:100%}.published{max-width:calc(100% - 32px);padding:16px}.publishedGrid,#publishedGrid{grid-template-columns:1fr}.qaHeading{align-items:flex-start}.qaHeading>b{display:none}#qaForm{grid-template-columns:1fr}.qaAvatar{display:none}#qaForm button{width:100%}.qaPanel>small{margin-left:0}.modal>article{max-height:95vh;overflow:auto}.frame{position:sticky;top:0;z-index:1}}
/* Admin page */
.adminPage{background:#f4f8f7}.adminSide{position:fixed;inset:0 auto 0 0;width:240px;padding:28px 18px;background:linear-gradient(180deg,#0d5962,#084b53);color:white;display:flex;flex-direction:column}.adminSide .brand{margin-left:8px}.adminSide nav{display:flex;flex-direction:column;gap:6px}.adminSide nav button{border:0;background:none;color:#dff5f3;text-align:left;padding:12px 14px;border-radius:10px;font-size:11px}.adminSide nav button.active,.adminSide nav button:hover{background:#63c1bb55;color:white}.adminSide>a:last-child{margin-top:auto;color:var(--x);font-size:9px;text-decoration:none;padding:12px}.adminMain{margin-left:240px;padding:30px;max-width:1500px}.adminMain>header{position:static;background:none;padding:0;min-height:auto;border:0;display:flex;justify-content:space-between}.adminMain>header span,.adminTitle span{font-size:8px;color:var(--m);font-weight:800;letter-spacing:1.4px}.adminMain>header h1{font-size:28px;margin:5px 0}.adminMain>header button{border:0;border-radius:11px;background:var(--p);color:white;padding:12px 16px;font-size:10px;font-weight:700}.adminStats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:26px 0}.adminStats article{display:flex;gap:13px;background:white;border:1px solid var(--line);border-radius:14px;padding:17px}.adminStats article>span{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;background:var(--x);color:var(--p)}.adminStats small,.adminStats b,.adminStats em{display:block}.adminStats small{font-size:8px;color:var(--muted)}.adminStats b{font-size:22px;margin:3px 0}.adminStats em{font-style:normal;font-size:7px;color:var(--m)}.adminWorkspace{background:white;border:1px solid var(--line);border-radius:18px;padding:22px}.adminTitle{display:flex;justify-content:space-between;align-items:end;margin-bottom:17px}.adminTitle h2{margin:4px 0;font-size:22px}.adminTitle input{border:1px solid var(--line);border-radius:10px;padding:10px;width:230px}.adminTable{overflow:auto}.adminRow{min-width:800px;display:grid;grid-template-columns:2fr .7fr .7fr .7fr .7fr;gap:12px;align-items:center;padding:13px;border-bottom:1px solid var(--line);font-size:9px}.adminHead{background:#f2f9f8;border-radius:10px;font-size:8px;font-weight:800;color:var(--muted)}.adminRow b,.adminRow small{display:block}.adminRow small{font-size:7px;color:var(--muted);margin-top:4px}.adminRow span:nth-child(2){display:flex;gap:5px;align-items:center}.adminRow i{font-style:normal}.adminRow em{font-style:normal;font-size:7px;padding:5px 8px;border-radius:20px}.adminRow em.published{background:#daf2e6;color:#277758}.adminRow em.draft{background:#edf1f1;color:#697a7b}.adminRow button{border:1px solid var(--line);background:white;border-radius:7px;padding:6px 8px;font-size:8px}.adminRow .danger{color:#a44141}.adminEmpty{text-align:center;padding:35px;color:var(--muted);font-size:10px}.contentEditor{position:fixed;inset:0;z-index:200;display:none;place-items:center;padding:20px}.contentEditor.open{display:grid}.editorShade{position:absolute;inset:0;background:#06272ad8;backdrop-filter:blur(8px)}#contentForm{position:relative;background:white;width:min(680px,95vw);max-height:94vh;overflow:auto;border-radius:20px;padding:26px}#contentForm>button:first-child{position:absolute;right:13px;top:12px;border:0;background:#edf6f5;width:35px;height:35px;border-radius:50%;font-size:20px}#contentForm>span{font-size:8px;color:var(--m);font-weight:800}#contentForm h2{margin:5px 0 17px}#contentForm label{font-size:8px;font-weight:700;display:block;margin-top:11px}#contentForm input,#contentForm select,#contentForm textarea{display:block;width:100%;border:1px solid var(--line);border-radius:9px;padding:10px;margin-top:5px}#contentForm textarea{height:70px;resize:vertical}#contentForm textarea.large{height:120px}.formGrid{display:grid;grid-template-columns:1fr 1fr;gap:12px}#contentForm footer{display:flex;justify-content:flex-end;gap:9px;margin-top:18px}#contentForm footer button{border:1px solid var(--line);background:white;border-radius:9px;padding:10px 14px;font-size:9px}#contentForm footer .primary{background:var(--p);color:white}
@media(max-width:900px){.adminStats{grid-template-columns:1fr 1fr}.adminSide{width:76px;padding-inline:10px}.adminSide .brand b,.adminSide nav button{font-size:0}.adminSide .brand{margin:0}.adminSide .brand i{width:48px}.adminSide nav button:first-letter{font-size:18px}.adminMain{margin-left:76px;padding:20px}}
@media(max-width:600px){.adminMain{padding:14px}.adminMain>header h1{font-size:21px}.adminMain>header button{padding:9px;font-size:8px}.adminStats{grid-template-columns:1fr}.adminTitle{align-items:flex-start;flex-direction:column}.adminTitle input{width:100%;margin-top:10px}.formGrid{grid-template-columns:1fr}}
/* Commercial course switcher */
.tabs{background:#edf7f6;padding:5px;border-radius:16px}.tab{display:flex;align-items:center;gap:10px;text-align:left;padding:10px 18px}.tab>i{width:30px;height:30px;border-radius:9px;background:var(--x);color:var(--p);display:grid;place-items:center;font-style:normal}.tab>span{font-size:10px}.tab small{display:block;font-size:6px;letter-spacing:1px;color:var(--m);margin-bottom:2px}.tab.active>i{background:#ffffff24;color:var(--l)}.tab.active small{color:var(--l)}
@media(max-width:760px){.tabs{padding:4px}.tab{padding:8px;gap:6px}.tab>i{width:26px;height:26px}.tab>span{font-size:8px}.tab small{font-size:5px}}
/* Rich visual identity and section imagery */
:root{--coral:#ef846f;--gold:#e7b84f;--violet:#8776c9;--sky:#5aa9c9}.courseCover{grid-template-columns:190px 1fr 210px;padding:18px}.courseImage{position:relative;min-height:190px;border-radius:15px;background-size:cover;background-position:center;overflow:hidden;box-shadow:inset 0 0 0 1px #ffffff38}.courseImage:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,#063d43aa,transparent 62%)}.courseImage>i{position:absolute;z-index:2;left:13px;bottom:13px;width:39px;height:39px;border-radius:11px;background:var(--l);color:var(--p);display:grid;place-items:center;font-style:normal;font-size:20px;box-shadow:0 8px 20px #0004}.courseMain{align-self:center}.courseAction{align-self:center}.title p>b,.hubHeading h2,.notes h2{background:linear-gradient(100deg,var(--p),var(--m) 70%,var(--a));-webkit-background-clip:text;background-clip:text;color:transparent}.title p>b:after{content:"";display:block;width:42px;height:3px;border-radius:4px;background:linear-gradient(90deg,var(--a),var(--gold));margin-top:7px}.module:nth-child(3n+1){--chapterColor:var(--a);--chapterBg:#e3f6f4}.module:nth-child(3n+2){--chapterColor:var(--violet);--chapterBg:#efecfa}.module:nth-child(3n){--chapterColor:var(--coral);--chapterBg:#fff0ec}.chapterLabel{background:var(--chapterBg);color:var(--chapterColor);display:flex;flex-direction:column;gap:3px}.chapterLabel:before{font-size:15px}.module:nth-child(3n+1) .chapterLabel:before{content:"◈"}.module:nth-child(3n+2) .chapterLabel:before{content:"✦"}.module:nth-child(3n) .chapterLabel:before{content:"↗"}.module.open .chapterLabel{background:var(--chapterBg);color:var(--chapterColor)}.lesson:hover{background:#f6fbfa}.lesson:hover .state{transform:scale(1.08)}.state{transition:.2s}.hubIcon{background:linear-gradient(145deg,var(--x),#fff);box-shadow:0 7px 18px #105f6815}.progressHub .hubIcon{color:var(--violet);background:#efecfa}.scheduleHub .hubIcon{color:var(--coral);background:#fff0ec}.continueVisual{background-image:linear-gradient(0deg,#063d43a6,#063d4322),url("assets/slide-business.png");background-size:cover;background-position:63% center}.thumb{background-size:cover;background-position:center}.videoCard:nth-child(3n+1) .thumb{background-image:linear-gradient(0deg,#063d4380,#063d4315),url("assets/slide-business.png")}.videoCard:nth-child(3n+2) .thumb{background-image:linear-gradient(0deg,#063d4380,#063d4315),url("assets/slide-content.png")}.videoCard:nth-child(3n) .thumb{background-image:linear-gradient(0deg,#063d4380,#063d4315),url("assets/slide-growth.png")}.videoCard .thumb:before{display:none}.videoCard .play{transition:.25s}.videoCard:hover .play{transform:translate(-50%,-50%) scale(1.1);background:var(--a);color:var(--p)}.notes{position:relative;overflow:hidden;background:linear-gradient(90deg,#f3fbfaf2 0%,#fffffff7 60%),url("assets/slide-growth.png");background-size:cover;background-position:right center}.notes:before{content:"✎";position:absolute;right:26px;top:20px;width:42px;height:42px;border-radius:13px;display:grid;place-items:center;background:#ffffffd9;color:var(--m);font-size:20px;box-shadow:0 8px 22px #105f6818}.notes>div{position:relative;z-index:1}.achievement-grid article:nth-child(1){background:linear-gradient(135deg,#fff8e7,#fff)}.achievement-grid article:nth-child(2){background:linear-gradient(135deg,#e7f8f6,#fff)}.achievement-grid article:nth-child(3){background:linear-gradient(135deg,#efecfa,#fff)}.achievement-grid article>span{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:white;box-shadow:0 7px 18px #105f6812}.managedCard:nth-child(3n+1) .managedThumb{background-image:linear-gradient(0deg,#063d4375,#063d4320),url("assets/slide-business.png");background-size:cover}.managedCard:nth-child(3n+2) .managedThumb{background-image:linear-gradient(0deg,#063d4375,#063d4320),url("assets/slide-content.png");background-size:cover}.managedCard:nth-child(3n) .managedThumb{background-image:linear-gradient(0deg,#063d4375,#063d4320),url("assets/slide-growth.png");background-size:cover}.side-nav a:nth-child(1) span{color:var(--gold)}.side-nav a:nth-child(2) span{color:var(--a)}.side-nav a:nth-child(3) span{color:var(--coral)}.side-nav a:nth-child(4) span{color:var(--sky)}.side-nav a:nth-child(5) span{color:#c3a7ee}.primary,.accent-button,.slideCta{background-size:200% 100%;transition:transform .2s,box-shadow .2s,background-position .35s}.primary:hover,.accent-button:hover,.slideCta:hover{background-position:100% 0;transform:translateY(-2px)}.curriculum-panel,.videos,.published,.notes,.awards,.learnerHub{transition:box-shadow .25s}.curriculum-panel:hover,.videos:hover,.published:hover,.notes:hover,.awards:hover,.learnerHub:hover{box-shadow:0 18px 48px #105f6814}
@media(max-width:1150px){.courseCover{grid-template-columns:150px 1fr}.courseAction{grid-column:1/-1}.courseImage{min-height:160px}}
@media(max-width:760px){.courseCover{grid-template-columns:1fr}.courseImage{min-height:210px}.courseAction{grid-column:auto}.title p>b:after{margin-top:5px}.notes{background-position:70% center}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation-duration:.01ms!important;transition-duration:.01ms!important}}
#side nav a:nth-child(1){--navAccent:var(--gold)}#side nav a:nth-child(2){--navAccent:var(--a)}#side nav a:nth-child(3){--navAccent:var(--coral)}#side nav a:nth-child(4){--navAccent:var(--sky)}#side nav a:nth-child(5){--navAccent:#c3a7ee}#side nav a:first-letter{color:var(--navAccent)}.title label:before{content:"";display:inline-block;width:7px;height:7px;border-radius:2px;background:var(--a);margin-right:7px;box-shadow:10px 0 0 #9ed5d188}.videos .title label:before{background:var(--coral)}.published .title label:before{background:var(--violet)}.awards .title label:before{background:var(--gold)}.awards article:nth-child(1){background:linear-gradient(135deg,#fff8e7,#fff)}.awards article:nth-child(2){background:linear-gradient(135deg,#e7f8f6,#fff)}.awards article:nth-child(3){background:linear-gradient(135deg,#efecfa,#fff)}.awards article>span{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:white;box-shadow:0 7px 18px #105f6812}/* Premium commercial icon and motion system */
#side nav a{font-size:0;position:relative;overflow:visible}#side nav a span{font-size:11px;font-weight:600}#side nav a:before{content:"";width:35px;height:35px;flex:0 0 auto;border-radius:11px;display:grid;place-items:center;font-size:17px;font-weight:700;background:linear-gradient(145deg,#ffffff26,#ffffff09);border:1px solid #ffffff20;box-shadow:inset 0 1px #ffffff35,0 8px 18px #002d3340;transition:.28s}#side nav a:nth-child(1):before{content:"⌂";color:var(--gold)}#side nav a:nth-child(2):before{content:"◇";color:var(--a)}#side nav a:nth-child(3):before{content:"▶";color:var(--coral);font-size:12px}#side nav a:nth-child(4):before{content:"✎";color:var(--sky)}#side nav a:nth-child(5):before{content:"★";color:#c3a7ee}#side nav a:hover:before,#side nav a.active:before{transform:translateY(-2px) scale(1.07);background:linear-gradient(145deg,#ffffff3d,#63c1bb25);box-shadow:inset 0 1px #ffffff55,0 11px 24px #002d3358}.tab i,.hubIcon,.courseImage>i,.achievement-grid article>span,.awards article>span{box-shadow:inset 0 1px #ffffffaa,0 8px 20px #105f6818;transition:transform .3s,box-shadow .3s}.tab:hover i,.hubCard:hover .hubIcon,.courseCover:hover .courseImage>i,.awards article:hover>span{transform:translateY(-3px) rotate(-3deg) scale(1.06);box-shadow:inset 0 1px #fff,0 13px 28px #105f6828}.siteProgressVisual{position:fixed;z-index:250;inset:0 0 auto;height:3px;background:linear-gradient(90deg,var(--gold),var(--a),var(--violet));background-size:200% 100%;animation:progressShine 3s linear infinite;box-shadow:0 0 12px var(--a);transform-origin:left}.hubCard,.continueCard,.videoCard,.managedCard,.module,.courseCover{transition:transform .32s cubic-bezier(.2,.8,.2,1),box-shadow .32s,border-color .32s}.hubCard:hover,.continueCard:hover,.videoCard:hover,.managedCard:hover{transform:translateY(-7px);box-shadow:0 20px 42px #105f6826;border-color:var(--l)}.module:hover{transform:translateX(5px);box-shadow:0 14px 34px #105f681b}.courseCover:before{content:"";position:absolute;z-index:0;inset:-80% -20%;background:linear-gradient(115deg,transparent 42%,#ffffff16 49%,transparent 56%);transform:translateX(-60%);transition:transform 1s}.courseCover:hover:before{transform:translateX(60%)}.courseCover>*{position:relative;z-index:1}.courseImage{transition:transform .75s cubic-bezier(.2,.8,.2,1),filter .4s}.courseCover:hover .courseImage{transform:scale(1.035);filter:saturate(1.08)}.play,.bigPlay{animation:softPulse 2.4s ease-out infinite}.title p>b:after{animation:accentFlow 3s ease-in-out infinite}.brand i{animation:brandGlow 3.2s ease-in-out infinite}.primary,.accent-button,.slideCta,.lesson>button{background-size:200% 100%;transition:transform .22s,box-shadow .22s,background-position .4s}.primary:hover,.accent-button:hover,.slideCta:hover,.lesson>button:hover{transform:translateY(-3px);box-shadow:0 12px 28px #105f6830;background-position:100% 0}.homeSlide.active .slideTag{animation:tagIn .5s both}.homeSlide.active .slideContent h1{animation:textRise .7s .08s both}.homeSlide.active .slideContent>p{animation:textRise .7s .16s both}.homeSlide.active .slideContent>div{animation:textRise .7s .24s both}.chapterLabel:before{animation:iconFloat 3s ease-in-out infinite}.notes:before{animation:iconFloat 3.2s ease-in-out infinite}.adminStats article:hover>span{transform:rotate(-4deg) scale(1.08)}.adminStats article>span{transition:.3s}
@keyframes progressShine{to{background-position:200% 0}}@keyframes softPulse{0%{box-shadow:0 0 0 0 #9ed5d155}70%{box-shadow:0 0 0 13px #9ed5d100}100%{box-shadow:0 0 0 0 #9ed5d100}}@keyframes accentFlow{0%,100%{width:38px}50%{width:74px}}@keyframes brandGlow{0%,100%{box-shadow:inset 0 0 0 4px #ffffff0c,0 0 0 0 #9ed5d100}50%{box-shadow:inset 0 0 0 4px #ffffff18,0 0 0 10px #9ed5d10e}}@keyframes textRise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}@keyframes tagIn{from{opacity:0;transform:translateX(-14px)}to{opacity:1;transform:none}}@keyframes iconFloat{50%{transform:translateY(-4px)}}@media(prefers-reduced-motion:reduce){*{animation:none!important;transition-duration:.01ms!important}.hubCard:hover,.continueCard:hover,.videoCard:hover,.managedCard:hover,.module:hover{transform:none}}

/* Desktop readability scale */
@media(min-width:761px){
body{font-size:16px;line-height:1.55}
#side nav a span,#side nav a b{font-size:13px}.profile b{font-size:14px}.profile small,.overall small,.help small,.brand small{font-size:10px}.overall>p>b{font-size:15px}
.tab>span{font-size:13px}.tab small{font-size:8px}.search input{font-size:13px}.accountBtn,.adminLink{font-size:11px}
.slideTag{font-size:11px}.slideContent>p{font-size:16px;line-height:1.7}.slideContent>div>span{font-size:12px}.slideCta{font-size:14px}
.hubHeading span,.hubCard>span{font-size:10px}.hubHeading h2{font-size:27px}.hubHeading p,.hubHeading>a{font-size:12px}.hubBadge{font-size:9px}.continueCard h3{font-size:18px}.continueCard p{font-size:12px}.continueProgress span{font-size:10px}.continueCard button{font-size:12px}.hubCard strong{font-size:24px}.hubCard p{font-size:12px;line-height:1.55}.hubCard a,.hubCard button{font-size:11px}.supportHub small{font-size:9px}
.title p>b{font-size:30px}.title label,.hero label,.notes label,.now>label{font-size:11px}.title>span,.courseSummary,.course-summary{font-size:12px}
.courseMain h2{font-size:31px}.courseMain h3{font-size:16px}.courseMain>p{font-size:13px;line-height:1.7}.commercialBadge{font-size:10px}.courseFacts b{font-size:14px}.courseFacts small{font-size:10px}.courseAction>span,.courseAction>small{font-size:10px}.courseAction>b{font-size:25px}.courseAction button{font-size:12px}
.chapterLabel{font-size:11px}.modTitle b{font-size:16px}.modTitle small{font-size:11px;line-height:1.45}.chapterMeta b{font-size:11px}.chapterMeta small{font-size:9px}.lessonText small{font-size:9px}.lessonText b{font-size:14px;line-height:1.45}.lessonText em{font-size:10px}.lesson .time b{font-size:12px}.lesson .time small{font-size:9px}.lesson>button{font-size:11px}.state{font-size:10px}
.now>span{font-size:12px}.now h2{font-size:24px}.instructor b{font-size:14px}.instructor small{font-size:10px}.now>button{font-size:13px}.streak small{font-size:10px}.streak b{font-size:14px}
.videoBody h3{font-size:16px;line-height:1.5}.tag,.videoBody footer label,.videoBody footer button{font-size:10px}.published .title>span{font-size:11px}.managedCard span{font-size:9px}.managedCard h3{font-size:15px}.managedCard p,.managedCard button{font-size:11px;line-height:1.55}
.notes h2{font-size:28px}.notes p{font-size:14px;line-height:1.7}.notes textarea{font-size:13px}.notes footer small{font-size:10px}.notes .primary{font-size:12px}
.awards article b{font-size:14px}.awards article small{font-size:11px}.pageFoot{font-size:11px}
.modal article>section label{font-size:11px}.modal article>section h2{font-size:26px}.modal article>section>p{font-size:14px;line-height:1.65}.modal section footer{font-size:12px}.qaHeading span{font-size:10px}.qaHeading h3{font-size:20px}.qaHeading>b{font-size:10px}.qaItem b,.qaItem p{font-size:12px}.qaItem small{font-size:9px}#qaForm textarea,#qaForm button{font-size:11px}.qaPanel>small{font-size:9px}
.loginCard>span{font-size:10px}.loginCard>p{font-size:13px}.loginCard label{font-size:11px}.loginCard input{font-size:13px}
.adminSide nav button{font-size:12px}.adminMain>header span,.adminTitle span{font-size:10px}.adminStats small{font-size:10px}.adminStats em{font-size:9px}.adminRow{font-size:11px}.adminRow small{font-size:9px}.adminRow em,.adminRow button{font-size:10px}
}
@media(min-width:1280px){.main-content,.app>main{font-size:17px}.homeSlider{height:min(650px,52vw)}}

/* Commercial typography color hierarchy */
:root{--text-strong:#103f44;--text-primary:#23484c;--text-body:#3f6063;--text-muted:#6b8082;--text-soft:#87999a;--action:#16727a;--action-hover:#0d5b63;--coral-text:#a64f43;--violet-text:#6252a0;--gold-text:#755800}
body{color:var(--text-primary)}h1,h2,h3,h4,strong,b{color:var(--text-strong)}p,li,textarea,input{color:var(--text-body)}small,.time,.courseSummary,.course-summary{color:var(--text-muted)}
.title p>b,.hubHeading h2,.notes h2{background:none!important;-webkit-background-clip:initial;background-clip:initial;color:var(--text-strong)!important;-webkit-text-fill-color:var(--text-strong)}.title label,.hero label,.hubHeading span,.commercialBadge,.hubBadge,.courseMain h3{color:var(--action)}.title label{font-weight:800}.title p>b:after{background:linear-gradient(90deg,var(--action),var(--a))}
.videos .title label,.videoBody footer label,.videoBody .tag{color:var(--coral-text)}.published .title label,.managedCard span{color:var(--violet-text)}.awards .title label{color:var(--gold-text)}.notes label{color:var(--action)}.eyebrow{color:var(--action)}
.heroText>p,.hubHeading p,.continueCard p,.hubCard p,.courseMain>p,.modTitle small,.lessonText em,.managedCard p,.notes p{color:var(--text-body)}.slideContent h1,.slideContent h1 em,.slideContent>p{color:#fff}.slideContent h1 em{color:#bce8e4}.slideTag,.slideContent>div>span{color:#d8f2ef}
#side,.sidebar{color:#fff}#side b,#side strong,.sidebar b,.sidebar strong{color:#fff}#side small,.sidebar small{color:#cce9e6}#side nav a,#side nav a b{color:#eaf7f5}#side nav a.active,#side nav a.active b{color:#fff}
.tab{color:var(--text-strong)}.tab small{color:var(--action)}.tab.active,.tab.active span{color:#fff}.tab.active small{color:#bce8e4}.search input{color:var(--text-primary)}.search input::placeholder{color:#8ba0a1}
.courseCover,.courseCover h2,.courseCover h3,.courseCover p,.courseCover b{color:#fff}.courseCover h3,.courseCover p,.courseFacts small,.courseAction span,.courseAction small{color:#d7efed}.commercialBadge{color:#0b5860}.courseAction button{color:#0d5158}
.module:not(.open) .modTitle b,.lessonText b{color:var(--text-strong)}.module:not(.open) .modTitle small{color:var(--text-muted)}.module.open .modTitle b,.module.open .chapterMeta b{color:#fff}.module.open .modTitle small,.module.open .chapterMeta small{color:#cce8e5}.lessonText small{color:var(--action)}.lesson .time b{color:var(--action)}.lesson>button{color:#fff}
.now,.learning-panel,.now h2,.learning-panel h3,.now b,.learning-panel b{color:#fff}.now small,.learning-panel small{color:#d1ebe8}.week-card,.week-card b,.week-card strong{color:var(--text-strong)}.week-card small,.week-card span{color:var(--text-muted)}
.category-tag,.tag{background:#e6f4f2;color:var(--action)}.watch-button,.managedCard button,.text-link,.hubCard a{color:var(--action)}.watch-button:hover,.managedCard button:hover,.text-link:hover,.hubCard a:hover{color:var(--action-hover)}
.qaHeading h3,.qaItem b,.articleBody h2,.loginCard h2{color:var(--text-strong)}.qaItem p,#articleContent,.loginCard>p{color:var(--text-body)}.qaItem small,.articleMeta,.qaPanel>small{color:var(--text-muted)}
.primary,.accent-button,.slideCta,.accountBtn{color:#fff}.supportHub,.supportHub strong,.supportHub b{color:#fff}.supportHub p,.supportHub small{color:#d7efed}.supportHub button{color:#0d5158}
.awards article b{color:var(--text-strong)}.awards article small{color:var(--text-muted)}.pageFoot,footer{color:var(--text-muted)}
.adminMain h1,.adminTitle h2,.adminRow b{color:var(--text-strong)}.adminStats b{color:var(--action)}.adminStats small,.adminRow small{color:var(--text-muted)}.adminSide,.adminSide b{color:#fff}
@media(max-width:760px){.title p>b,.hubHeading h2,.notes h2{color:var(--text-strong)!important}}

/* Emergency layout fix */
.notificationBtn{position:relative;flex:0 0 auto;border:0;width:40px;height:40px;border-radius:11px;background:#edf7f6;color:#105f68;font-size:18px}.notificationBtn i{position:absolute;right:-3px;top:-4px;width:18px;height:18px;border-radius:50%;background:#ef846f;color:#fff;font:8px Arial;display:grid;place-items:center}.notificationPanel{display:none!important;position:fixed;z-index:100;right:28px;top:76px;width:330px;padding:14px;background:#fff;border:1px solid #dceceb;border-radius:15px;box-shadow:0 18px 50px #105f6830}.notificationPanel.open{display:block!important}.notificationPanel>div{display:flex;justify-content:space-between;align-items:center;padding:5px}.notificationPanel>div button{border:0;background:none;color:#3a9295;font-size:10px}.notificationPanel article{display:flex;gap:10px;padding:11px;border-top:1px solid #dceceb}.notificationPanel article>i{font-style:normal;width:30px;height:30px;border-radius:9px;background:#c8e6e2;display:grid;place-items:center;color:#105f68}.notificationPanel p{margin:0}.notificationPanel b,.notificationPanel span{display:block}.notificationPanel b{font-size:12px}.notificationPanel span{font-size:10px;color:#6b8082;margin-top:2px}.lessonCommerce{display:flex;justify-content:space-between;align-items:center;padding:15px 0;border-block:1px solid #dceceb;margin:15px 0}.authorBlock{display:flex;align-items:center;gap:10px}.authorPhoto{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:#105f68;color:#fff;font-weight:800}.authorBlock small,.authorBlock b,.authorBlock span{display:block}.authorBlock small{font-size:9px;color:#3a9295}.authorBlock span{font-size:10px;color:#6b8082}.lessonActions{position:relative;display:flex;gap:7px}.lessonActions>button{border:1px solid #dceceb;background:#fff;border-radius:8px;padding:8px 10px}.shareMenu{display:none;position:absolute;right:0;top:40px;z-index:10;width:160px;padding:7px;background:#fff;border:1px solid #dceceb;border-radius:10px;box-shadow:0 12px 30px #105f6828}.shareMenu.open{display:grid;gap:5px}.shareMenu button{border:0;background:#f4fafa;padding:8px;text-align:left}.learningTools{max-width:calc(1400px - 68px);margin:0 auto 30px;padding:22px;background:#fff;border:1px solid #dceceb;border-radius:22px}.toolGrid{display:grid;grid-template-columns:repeat(4,1fr);gap:13px}.toolCard{padding:16px;border:1px solid #dceceb;border-radius:14px;background:#fbfefe}.toolCard>i{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;background:#c8e6e2;color:#105f68;font-style:normal}.toolCard>span{display:block;font-size:9px;color:#3a9295;font-weight:800;margin-top:10px}.toolCard h3{font-size:16px}.toolCard p{font-size:11px;color:#6b8082}.toolCard button{border:0;background:none;color:#105f68;font-weight:800}.quizModal,.certificateModal{display:none;position:fixed;inset:0;z-index:210;place-items:center}.quizModal.open,.certificateModal.open{display:grid}.quizShade{position:absolute;inset:0;background:#06272add}.quizCard,.certificate{position:relative;width:min(600px,94vw);background:#fff;border-radius:20px;padding:26px}.videoFallback{min-height:360px;display:grid;place-content:center;text-align:center;background:linear-gradient(135deg,#105f68,#06383e);color:#fff;padding:30px}.videoFallback h3{color:#fff}.videoFallback p{color:#c8e6e2}.videoFallback a{display:inline-block;margin:auto;padding:11px 16px;border-radius:9px;background:#63c1bb;color:#105f68;text-decoration:none;font-weight:800}@media(max-width:900px){.toolGrid{grid-template-columns:1fr 1fr}}@media(max-width:760px){.notificationPanel{left:16px;right:16px;width:auto}.toolGrid{grid-template-columns:1fr}.lessonCommerce{align-items:flex-start;flex-direction:column}.learningTools{max-width:calc(100% - 32px)}}
/* Functional controls polish */
.notificationBtn svg,.lessonActions svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.notificationBtn{display:grid;place-items:center}.lessonActions>button{display:flex;align-items:center;gap:7px;font-weight:700}.lessonActions>button.active{background:#fff0f1;color:#b34452;border-color:#efb7bd}.lessonActions>button.active svg{fill:#d95968;stroke:#d95968}.shareMenu button{font-weight:600}.shareMenu button:nth-child(1){color:#1877f2}.shareMenu button:nth-child(2){color:#168d45}.shareMenu button:nth-child(3){color:#c64235}.frame iframe:not([hidden]){display:block!important;width:100%;height:100%;min-height:480px;border:0;background:#111}.frame:has(iframe:not([hidden])) .videoFallback{display:none!important}@media(max-width:760px){.frame iframe:not([hidden]){min-height:260px}.lessonActions{width:100%}.lessonActions>button{flex:1;justify-content:center}}
/* Professional author and Q&A redesign */
.authorPhoto{overflow:hidden;background:#e5f3f1}.authorPhoto img{width:100%;height:100%;object-fit:cover;object-position:68% 25%;transform:scale(1.35)}.authorBlock{padding:3px}.authorBlock b{font-size:14px}.authorBlock span{font-size:10px}.qaPanel{background:#f9fcfc;border:1px solid #e0eeee;border-radius:16px;padding:20px;margin-top:22px}.qaHeading{padding-bottom:13px;border-bottom:1px solid #dceceb}.qaHeading h3{margin-bottom:0}.qaHeading>b{padding:6px 9px;border-radius:20px;background:#e5f3f1;color:#105f68}.qaEmpty{display:grid;place-items:center;text-align:center;padding:27px;border:1px dashed #9ed5d1;border-radius:13px;color:#6b8082}.qaEmpty i{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:#c8e6e2;color:#105f68;font-style:normal;font-weight:800}.qaEmpty b{color:#23484c;margin-top:8px}.qaEmpty p{font-size:10px;margin:3px}.commentCard{display:flex;gap:11px;padding:14px;background:#fff;border:1px solid #dceceb;border-radius:13px}.commentAvatar{width:38px;height:38px;flex:0 0 auto;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,#c8e6e2,#63c1bb);color:#105f68;font-size:10px;font-weight:800}.commentBody{flex:1;min-width:0}.commentTop{display:flex;justify-content:space-between;gap:10px}.commentTop b{font-size:12px}.commentTop time,.instructorReply time{font-size:8px;color:#87999a}.commentBody>p{font-size:11px;line-height:1.6;margin:5px 0}.commentActions{display:flex;gap:7px}.commentActions button{border:0;background:none;color:#3a9295;font-size:9px;padding:3px}.instructorReply{display:flex;gap:9px;margin-top:11px;padding:12px;border-radius:11px;background:linear-gradient(135deg,#edf8f6,#fff);border-left:3px solid #63c1bb}.instructorAvatar{width:34px;height:34px;flex:0 0 auto;border-radius:50%;overflow:hidden}.instructorAvatar img{width:100%;height:100%;object-fit:cover;object-position:68% 25%;transform:scale(1.35)}.instructorReply span,.instructorReply b,.instructorReply p,.instructorReply time{display:block}.instructorReply span{font-size:7px;color:#3a9295;font-weight:800}.instructorReply b{font-size:10px}.instructorReply b i{font-style:normal;color:#fff;background:#3a9295;border-radius:50%;padding:1px 3px}.instructorReply p{font-size:10px;line-height:1.55;margin:4px 0}.qaPanel #qaForm{margin-top:13px;padding:11px;background:#fff;border:1px solid #dceceb;border-radius:12px}.qaPanel #qaInput{border:0;outline:0;background:transparent;font-size:11px}.qaPanel #qaForm button{padding:11px 14px}.videoFallback{background-image:linear-gradient(90deg,#06383ee8,#06383e99),url("assets/slide-business.png");background-size:cover;background-position:center}.videoFallbackIcon{background:#ffffffed!important;box-shadow:0 0 0 12px #ffffff16,0 15px 35px #0004}.modal>article{width:min(980px,96vw)}@media(max-width:760px){.qaPanel{padding:14px}.commentTop{flex-direction:column;gap:2px}.instructorReply{align-items:flex-start}.qaPanel #qaForm{display:grid}.modal>article{width:98vw}}
/* Membership registration and customer database */
.memberButton{display:flex;align-items:center;gap:6px;border:1px solid #9ed5d1;background:linear-gradient(135deg,#f0faf9,#fff);color:#105f68;border-radius:11px;padding:10px 13px;font-size:10px;font-weight:800;white-space:nowrap}.memberButton span{color:#e7b84f;font-size:15px}.memberButton:hover{transform:translateY(-2px);box-shadow:0 9px 22px #105f6818}.memberModal{display:none;position:fixed;inset:0;z-index:240;place-items:center;padding:20px}.memberModal.open{display:grid}.memberShade{position:absolute;inset:0;background:#06272ae5;backdrop-filter:blur(9px)}.memberCard{position:relative;width:min(920px,96vw);max-height:94vh;overflow:auto;background:#fff;border-radius:24px;box-shadow:0 35px 110px #0007}.memberClose{position:absolute;z-index:2;right:15px;top:13px;width:38px;height:38px;border:0;border-radius:50%;background:#ffffff25;color:#fff;font-size:23px}.memberHeader{padding:25px 35px 22px;text-align:center;color:#fff;background:radial-gradient(circle at 80% 10%,#63c1bb55,transparent 25%),linear-gradient(135deg,#0d5962,#073e45)}.memberLogo{margin:auto;width:50px;height:50px;border-radius:15px;display:grid;place-items:center;border:2px solid #9ed5d1;font:700 27px Georgia}.memberHeader>span{display:block;font-size:8px;letter-spacing:1.6px;color:#9ed5d1;margin-top:10px}.memberHeader h2{color:#fff;font-size:26px;margin:5px}.memberHeader p{color:#c8e6e2;font-size:11px}.memberSteps{display:flex;justify-content:center;align-items:center;margin-top:18px}.memberSteps i{width:29px;height:29px;border-radius:50%;display:grid;place-items:center;background:#ffffff20;border:1px solid #ffffff30;color:#c8e6e2;font-style:normal;font-size:10px;position:relative}.memberSteps i.active{background:#63c1bb;color:#073e45}.memberSteps i small{position:absolute;top:34px;white-space:nowrap;font-size:7px;color:#c8e6e2}.memberSteps em{width:100px;height:1px;background:#ffffff30}.memberStep{display:none;padding:32px 36px}.memberStep.active{display:block}.planGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.plan{position:relative;display:flex;flex-direction:column;padding:19px;border:1px solid #dceceb;border-radius:16px;cursor:pointer;transition:.25s}.plan:has(input:checked){border:2px solid #3a9295;background:#f1fafa;box-shadow:0 12px 30px #105f6818}.plan input{position:absolute;right:14px;top:14px;accent-color:#3a9295}.planIcon{width:39px;height:39px;border-radius:11px;display:grid;place-items:center;background:#c8e6e2;color:#105f68;font-size:18px}.plan>b{font-size:15px;margin-top:12px}.plan>strong{font-size:21px;color:#105f68;margin:4px 0 10px}.plan>small{font-size:10px;color:#60787a;margin-top:6px}.plan.featured{border-color:#9ed5d1}.popular{position:absolute;right:12px;top:-9px;background:#e7b84f;color:#594100;padding:4px 7px;border-radius:20px;font-size:7px;font-weight:800}.memberStep footer{display:flex;justify-content:space-between;margin-top:22px}.memberStep footer button,.memberSuccess>button{border:0;border-radius:10px;padding:11px 17px;background:#105f68;color:#fff;font-weight:800}.memberFormGrid{display:grid;grid-template-columns:1fr 1fr;gap:13px}.memberFormGrid label{font-size:10px;font-weight:700}.memberFormGrid input,.memberFormGrid select{display:block;width:100%;margin-top:5px;border:1px solid #dceceb;border-radius:9px;padding:11px}.memberConsent{display:flex;gap:8px;margin-top:15px;font-size:10px}.memberSuccess{text-align:center;padding:45px}.successIcon{margin:auto;width:65px;height:65px;border-radius:50%;display:grid;place-items:center;background:#dff4e9;color:#23805b;font-size:27px}.memberSuccess>span{display:block;color:#3a9295;font-size:9px;font-weight:800;margin-top:16px}.memberCode{display:table;margin:20px auto;padding:12px 30px;border:1px dashed #63c1bb;border-radius:11px;background:#f1fafa}.memberCode small,.memberCode b{display:block}.memberCode b{font-size:20px;color:#105f68}.memberWorkspace{margin-top:22px;background:#fff;border:1px solid #dceceb;border-radius:18px;padding:22px}.memberAdminActions{display:flex;gap:8px}.memberAdminActions input{width:260px;border:1px solid #dceceb;border-radius:9px;padding:10px}.memberAdminActions button{border:0;border-radius:9px;background:#105f68;color:#fff;padding:10px}.memberMetrics{display:flex;gap:13px;margin-bottom:17px}.memberMetrics span{min-width:130px;padding:12px;border-radius:11px;background:#f2f9f8}.memberMetrics b,.memberMetrics small{display:block}.memberMetrics b{font-size:20px;color:#105f68}.memberMetrics small{font-size:8px;color:#6b8082}.memberTable{overflow:auto}.memberRow{min-width:850px;display:grid;grid-template-columns:1.5fr 1.3fr .8fr .8fr .7fr;gap:12px;padding:12px;border-bottom:1px solid #dceceb;align-items:center;font-size:10px}.memberHead{background:#f1f8f7;font-weight:800;color:#6b8082}.memberRow b,.memberRow small{display:block}.memberRow small{font-size:8px;color:#6b8082}.statusActive{display:inline-block;padding:5px 8px;border-radius:20px;background:#dff4e9;color:#237959;font-size:8px}@media(max-width:900px){.planGrid{grid-template-columns:1fr}.memberFormGrid{grid-template-columns:1fr}.memberAdminActions{flex-direction:column}.memberAdminActions input{width:100%}}@media(max-width:760px){.memberButton{font-size:0;padding:9px}.memberButton span{font-size:16px}.memberCard{max-height:97vh}.memberHeader{padding:22px}.memberHeader h2{font-size:21px}.memberStep{padding:22px 17px}.memberSteps em{width:55px}}
/* Enlarged commercial course selector */
@media(min-width:1101px){header,.topbar{min-height:104px;padding-top:16px;padding-bottom:16px}.tabs{flex:0 0 580px;min-width:580px;padding:7px;border-radius:19px;gap:9px}.tab{flex:1;min-height:68px;padding:12px 18px;border-radius:14px;gap:12px}.tab>i{width:43px;height:43px;flex:0 0 auto;border-radius:12px;font-size:20px}.tab>i svg{width:21px;height:21px}.tab>span,.tab .tabCopy{font-size:15px!important;line-height:1.35;font-weight:750}.tab small{font-size:9px!important;letter-spacing:1.1px;margin-bottom:4px}.tab.active{box-shadow:0 10px 28px #105f6830}.tab:hover{transform:translateY(-2px)}}
@media(min-width:761px) and (max-width:1100px){header,.topbar{flex-wrap:wrap;padding:13px 22px;min-height:158px}.tabs{order:3;flex:1 0 100%;width:100%;padding:6px}.tab{flex:1;min-height:61px;padding:10px 16px}.tab>i{width:38px;height:38px}.tab>span{font-size:14px!important}.tab small{font-size:8px!important}.search{margin-left:auto;width:240px}}
@media(max-width:760px){.tabs{gap:5px}.tab{min-height:54px}.tab>span{font-size:10px!important;line-height:1.3}.tab small{font-size:6px!important}.tab>i{width:30px;height:30px;flex:0 0 auto}}
/* Independent authentication and rich publishing */
.registerModal,.contentViewer{display:none;position:fixed;inset:0;z-index:190;place-items:center;padding:20px}.registerModal.open,.contentViewer.open{display:grid}.registerCard{width:min(620px,95vw)}.registerGrid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.authDivider{display:flex;align-items:center;gap:10px;margin:14px 0;color:#87999a;font-size:9px}.authDivider:before,.authDivider:after{content:"";height:1px;background:#dceceb;flex:1}.secondaryAuth{width:100%;border:1px solid #9ed5d1!important;background:#f4fbfa!important;color:#105f68!important;border-radius:10px;padding:11px;font-weight:700}.authConsent{display:flex!important;align-items:flex-start;gap:7px;font-weight:400!important}.authConsent input{width:auto!important;margin-top:2px!important}.registerAccountBtn{border:1px solid #9ed5d1;background:#fff;color:#105f68;border-radius:11px;padding:10px 12px;font-size:10px;font-weight:800;white-space:nowrap}.contentViewer .articleShade{position:absolute;inset:0}.contentViewer>article{position:relative;width:min(900px,95vw);max-height:93vh;overflow:auto;background:#fff;border-radius:20px;box-shadow:0 30px 100px #0007}.contentViewer>article>button{position:absolute;right:12px;top:12px;z-index:3;width:38px;height:38px;border:0;border-radius:50%;background:#082f33cc;color:#fff;font-size:22px}.contentViewer>article>section{padding:25px 30px}.contentViewer section>span{font-size:9px;color:#3a9295;font-weight:800}.contentViewer h2{font-size:28px;margin:6px 0}.contentViewer #viewerMeta{font-size:10px;color:#6b8082}.contentViewer #viewerSummary{font-size:14px}.contentViewer #viewerContent{font-size:13px;line-height:1.8;color:#3f6063}.viewerImage{width:100%;height:420px;object-fit:cover}.viewerVideo{display:block;width:100%;aspect-ratio:16/9;border:0;background:#062f34}.managedMedia{position:relative;height:160px;overflow:hidden;background:linear-gradient(135deg,#105f68,#3a9295)}.managedMedia img{width:100%;height:100%;object-fit:cover;transition:.4s}.managedCard:hover .managedMedia img{transform:scale(1.04)}.managedMedia .mediaType{position:absolute;left:9px;top:9px;padding:5px 8px;border-radius:20px;background:#062f34cc;color:#fff;font-size:8px}.managedMedia .playOverlay{position:absolute;inset:0;display:grid;place-items:center;color:#fff;font-size:25px;background:#062f3435}.managedMeta{display:flex;justify-content:space-between;gap:8px}.placementBadge{font-size:7px;padding:4px 7px;border-radius:20px;background:#edf7f6;color:#105f68}.mediaPreview{margin-top:13px;min-height:150px;border:1px dashed #9ed5d1;border-radius:12px;background:#f5fbfa;display:grid;place-items:center;overflow:hidden;color:#6b8082;font-size:9px}.mediaPreview img,.mediaPreview iframe{width:100%;height:180px;object-fit:cover;border:0}.contentRouting{margin-top:10px}@media(max-width:1000px){.registerAccountBtn{display:none}}@media(max-width:760px){.registerGrid{grid-template-columns:1fr}.contentViewer>article>section{padding:20px}.viewerImage{height:250px}}
/* Mobile-first Android Chrome and iOS Safari optimization */
html{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  width:100%;
}
body{
  overflow-x:hidden;
  min-height:100vh;
  min-height:100dvh;
  min-height:-webkit-fill-available;
}
button,a,input,select,textarea{
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}
input,select,textarea{
  -webkit-appearance:none;
  appearance:none;
}
img,video,svg,canvas{
  max-width:100%;
  height:auto;
  display:block;
}
@supports(padding:max(0px)){
  html{padding-left:max(env(safe-area-inset-left),0px);padding-right:max(env(safe-area-inset-right),0px);}
}
@media(max-width:767.98px){
:root{--mobile-gap:14px}html{scroll-padding-top:190px}body{font-size:14px;padding-bottom:env(safe-area-inset-bottom)}.app{display:block;width:100%;overflow:hidden}.app>main,.main-content{width:100%;min-width:0}
header,.topbar{position:sticky!important;top:0;z-index:60;display:flex!important;align-items:center;gap:8px!important;width:100%;min-height:auto!important;padding:calc(9px + env(safe-area-inset-top)) 12px 10px!important;background:#fffffffa!important;box-shadow:0 6px 22px #105f6812}
#menu,.mobile-menu,.notificationBtn{display:grid!important;place-items:center;width:44px!important;height:44px!important;flex:0 0 44px;border-radius:12px}.notificationBtn{order:2;margin-left:auto}.memberButton{order:3;width:44px;height:44px;padding:0!important;display:grid;place-items:center}.memberButton span{font-size:18px}.accountBtn{order:4;height:44px;max-width:92px;padding:0 12px!important;font-size:10px!important;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.registerAccountBtn,.adminLink,.bell{display:none!important}
.tabs{order:5;display:grid!important;grid-template-columns:1fr 1fr;width:100%!important;flex:1 0 100%!important;min-width:0!important;padding:4px!important;gap:5px!important;border-radius:14px!important}.tab{min-width:0!important;min-height:57px!important;padding:8px!important;gap:7px!important;border-radius:11px!important}.tab>i{width:31px!important;height:31px!important;flex:0 0 31px}.tab>span,.tab .tabCopy{font-size:10px!important;line-height:1.3!important;white-space:normal}.tab small{font-size:6px!important;margin-bottom:2px!important}
.search{order:6;width:100%!important;flex:1 0 100%;height:44px;margin:0!important;padding:9px 12px!important}.search input{font-size:16px!important}
#side,.sidebar{width:min(318px,88vw)!important;padding:calc(22px + env(safe-area-inset-top)) 17px calc(20px + env(safe-area-inset-bottom))!important;box-shadow:24px 0 60px #001d2250}.brand{margin-bottom:22px!important}#side nav a{min-height:49px}.sidebar-close,#closeSide{width:44px;height:44px}
.homeSlider{height:530px!important;margin:14px 12px 22px!important;border-radius:18px!important}.homeSlide{background-position:66% center!important}.homeSlide:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,#063e44 0%,#063e44ed 45%,#063e4430 100%)}.slideContent{left:20px!important;right:20px!important;bottom:58px!important;top:auto!important;transform:none!important;width:auto!important}.slideTag{font-size:8px!important;padding:7px 9px!important}.slideContent h1{font-size:31px!important;line-height:1.12!important;letter-spacing:-1px!important;margin:12px 0!important}.slideContent>p{font-size:13px!important;line-height:1.6!important}.slideContent>div{display:flex!important;flex-direction:column!important;align-items:flex-start!important;gap:8px!important;margin-top:15px!important}.slideCta{min-height:44px;font-size:12px!important}.slideArrow{top:28%!important;width:44px!important;height:44px!important}.slideNav{left:20px!important;bottom:22px!important}.slideCount{right:20px!important}
.learnerHub,.published,.videos,.notes,.awards,.learningTools{width:auto!important;max-width:none!important;margin:0 12px 20px!important;padding:16px!important;border-radius:17px!important}.hubHeading{align-items:flex-start!important}.hubHeading h2{font-size:20px!important;line-height:1.35}.hubHeading p{font-size:11px!important}.hubGrid,.lecture-grid,#videoGrid,#publishedGrid,.achievement-grid,.awards>div:last-child,.toolGrid{grid-template-columns:1fr!important}.continueCard{grid-template-columns:1fr!important}.continueVisual{min-height:160px!important}.hubCard{min-height:155px}
.dashboard{display:block!important;padding:0 12px 20px!important}.curriculum-panel{padding:15px!important;border-radius:17px!important}.learning-panel,.now{margin-top:15px!important;padding:19px!important;border-radius:17px!important}.section-heading,.title{align-items:flex-start!important}.title p>b,.section-heading h2{font-size:23px!important;line-height:1.3}.title>span,.course-summary{display:none!important}
.courseCover{grid-template-columns:1fr!important;padding:14px!important;border-radius:16px!important;gap:14px!important}.courseImage{min-height:210px!important}.courseMain h2{font-size:23px!important}.courseMain h3{font-size:13px!important}.courseMain>p{font-size:12px!important}.courseFacts{display:grid!important;grid-template-columns:1fr 1fr!important;gap:10px!important}.courseFacts span{border:0!important;padding:0!important}.courseAction{grid-column:auto!important;display:block!important}.courseAction button{min-height:44px}
.module>.chapterHead{grid-template-columns:76px 1fr 30px!important;padding:12px!important;gap:9px!important}.chapterMeta{display:none!important}.chapterLabel{font-size:9px!important;min-height:48px}.modTitle b{font-size:13px!important}.modTitle small{font-size:9px!important}.lesson{grid-template-columns:1fr auto!important;padding:13px 11px!important;gap:8px!important}.lesson>div{align-items:flex-start!important}.lessonText b{font-size:12px!important}.lessonText em{font-size:8px!important}.lesson .time{display:block!important;min-width:60px!important;padding:7px 5px!important}.lesson>button{grid-column:1/-1!important;width:100%;min-height:44px!important}.state{margin-top:2px}
.videoCard .thumb,.lecture-thumb{height:190px!important}.videoBody h3{font-size:14px!important;min-height:0}.notes{grid-template-columns:1fr!important}.notes textarea{font-size:16px!important}.notes footer{gap:8px}.notes footer small{max-width:55%}
.modal,.articleModal,.contentViewer,.loginModal,.registerModal,.memberModal,.quizModal,.certificateModal,.contentEditor{padding:0!important;align-items:end!important}.modal>article,.articleReader,.contentViewer>article,.loginCard,.memberCard,.quizCard,.certificate,#contentForm{width:100%!important;max-width:none!important;max-height:100dvh!important;border-radius:20px 20px 0 0!important;margin:0!important;padding-bottom:calc(20px + env(safe-area-inset-bottom))!important;overflow:auto!important}.modal>article{height:100dvh;border-radius:0!important}.frame{position:sticky!important;top:0;z-index:4;aspect-ratio:16/9!important;min-height:0!important}.frame iframe:not([hidden]){min-height:0!important;height:56.25vw!important;max-height:38dvh}.videoFallback{min-height:260px!important;padding:20px!important}.modal article>section{padding:18px 16px!important}.modal-content h2,#modTitle{font-size:22px!important;line-height:1.35}.lessonCommerce{align-items:flex-start!important;flex-direction:column!important}.lessonActions{width:100%!important}.lessonActions>button{flex:1;justify-content:center;min-height:44px}.shareMenu{left:0;right:0;top:50px;width:100%}.qaPanel{padding:13px!important}.qaHeading h3{font-size:17px!important}.commentCard{padding:11px!important}.qaPanel #qaForm{display:grid!important;grid-template-columns:1fr!important}.qaAvatar{display:none!important}.qaPanel #qaInput{font-size:16px!important;min-height:80px}.qaPanel #qaForm button{min-height:44px}
.loginCard,.registerCard{padding:24px 17px!important}.loginCard input,.registerCard input,.memberFormGrid input,.memberFormGrid select,#contentForm input,#contentForm select,#contentForm textarea{font-size:16px!important;min-height:44px}.registerGrid,.memberFormGrid,.formGrid{grid-template-columns:1fr!important}.memberCard{height:100dvh;border-radius:0!important}.memberHeader{padding:calc(20px + env(safe-area-inset-top)) 18px 20px!important}.memberStep{padding:20px 15px!important}.planGrid{grid-template-columns:1fr!important}.plan{min-height:170px}.memberStep footer{position:sticky;bottom:0;background:#fff;padding:10px 0 calc(8px + env(safe-area-inset-bottom));z-index:3}.memberStep footer button{min-height:44px}
.notificationPanel{position:fixed!important;left:10px!important;right:10px!important;top:calc(68px + env(safe-area-inset-top))!important;width:auto!important;max-height:70dvh;overflow:auto;border-radius:15px!important}.notificationPanel article{min-height:62px}
.courseOffers{margin:0 12px 20px!important;padding:16px!important}.offerGrid{grid-template-columns:1fr!important}
.pageFoot{padding:18px 16px calc(24px + env(safe-area-inset-bottom))!important;gap:12px;flex-direction:column}
.adminSide{width:64px!important;padding:calc(15px + env(safe-area-inset-top)) 8px!important}.adminMain{margin-left:64px!important;padding:12px!important}.adminMain>header{align-items:flex-start!important;gap:8px}.adminMain>header h1{font-size:19px!important}.adminMain>header button{min-height:40px}.adminStats{grid-template-columns:1fr!important}.adminWorkspace,.memberWorkspace{padding:14px!important}.adminTitle{flex-direction:column!important}.adminTitle input{width:100%!important}.adminTable,.memberTable{-webkit-overflow-scrolling:touch}.contentEditor #contentForm{height:100dvh;border-radius:0!important}
}
@media(max-width:374px){.tab>i{display:none!important}.tab{justify-content:center!important}.slideContent h1{font-size:27px!important}.accountBtn{max-width:78px}.homeSlider{height:500px!important}}
@supports(padding:max(0px)){@media(max-width:767.98px){header,.topbar{padding-left:max(12px,env(safe-area-inset-left))!important;padding-right:max(12px,env(safe-area-inset-right))!important}}}
/* Admin uploads, questions and role access */
.formSectionTitle{display:flex;gap:10px;align-items:center;margin:20px 0 10px;padding:12px;border-radius:11px;background:linear-gradient(90deg,#edf8f6,#fff);border-left:3px solid #3a9295}.formSectionTitle>i{width:28px;height:28px;border-radius:8px;display:grid;place-items:center;background:#105f68;color:#fff;font-style:normal;font-weight:800}.formSectionTitle b,.formSectionTitle small{display:block}.formSectionTitle b{font-size:11px}.formSectionTitle small{font-size:8px;color:#6b8082}.uploadField{display:block!important;margin-top:8px!important}.uploadField>input{position:absolute;opacity:0;pointer-events:none}.uploadField>span{min-height:105px;border:1px dashed #63c1bb;border-radius:12px;background:#f3fbfa;display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;transition:.2s}.uploadField>span:hover{border-color:#105f68;background:#eaf7f5}.uploadField i{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:#c8e6e2;color:#105f68;font-style:normal;font-size:18px}.uploadField b{font-size:10px;margin-top:6px}.uploadField small{font-size:8px;color:#6b8082;margin-top:3px}.questionWorkspace{margin-top:22px;background:#fff;border:1px solid #dceceb;border-radius:18px;padding:22px}.adminTitle h2>i{display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 5px;border-radius:20px;background:#ef846f;color:#fff;font-style:normal;font-size:9px}.questionFilters{display:flex;gap:6px}.questionFilters button{border:1px solid #dceceb;background:#fff;border-radius:20px;padding:7px 10px;font-size:8px}.questionFilters button.active{background:#105f68;color:#fff}.adminQuestion{display:grid;grid-template-columns:42px 1fr auto;gap:11px;padding:14px;border-top:1px solid #dceceb}.adminQAvatar{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:#c8e6e2;color:#105f68;font-size:9px;font-weight:800}.adminQuestion h3{font-size:12px;margin:0}.adminQuestion .qMeta{font-size:8px;color:#6b8082;margin:3px 0}.adminQuestion p{font-size:10px;margin:5px 0}.adminQuestion .qStatus{font-size:8px;padding:5px 8px;border-radius:20px;align-self:start}.qStatus.pending{background:#fff1dc;color:#8a5b00}.qStatus.answered{background:#dff4e9;color:#237959}.adminReply{display:flex;gap:7px;margin-top:8px}.adminReply textarea{flex:1;min-height:58px;border:1px solid #dceceb;border-radius:9px;padding:8px;font-size:10px}.adminReply button{border:0;border-radius:8px;background:#105f68;color:#fff;padding:8px 11px;font-size:9px}.memberRow{grid-template-columns:1.3fr 1.2fr .7fr .8fr .7fr 1.2fr!important}.roleControls{display:grid;grid-template-columns:1fr 1fr;gap:5px}.roleControls select{min-width:90px;border:1px solid #dceceb;border-radius:7px;padding:6px;font-size:8px}.accessNotice{display:none;margin:12px 0;padding:12px;border:1px solid #f0d9a7;border-radius:10px;background:#fff8e8;color:#755800;font-size:11px}.accessNotice.show{display:block}.accessLocked{display:none!important}@media(max-width:760px){.questionWorkspace{padding:14px}.adminQuestion{grid-template-columns:36px 1fr}.adminQuestion>.qStatus{grid-column:2}.adminReply{flex-direction:column}.questionFilters{overflow:auto;width:100%;margin-top:8px}.formSectionTitle{margin-top:15px}.roleControls{grid-template-columns:1fr}}
.navQuestionBadge{float:right;margin-left:auto;min-width:18px;height:18px;padding:0 5px;border-radius:20px;background:#ef846f;color:#fff;font-style:normal;font-size:8px;display:inline-grid;place-items:center}.adminSide nav button{display:flex;align-items:center;gap:7px;width:100%}.adminSide nav button.active .navQuestionBadge{background:#fff;color:#a64f43}.uploadField.hasFile>span{border-style:solid;background:#e9f7f4}
/* Login password utilities */
.loginPasswordOptions{display:flex;align-items:center;justify-content:space-between;gap:24px;margin:14px 0 22px;padding:0 2px;color:#315e64;font-size:13px;font-weight:600}.loginPasswordOptions label{display:flex!important;align-items:center;gap:9px;margin:0!important;line-height:1.3;cursor:pointer;white-space:nowrap}.loginPasswordOptions input{display:inline-block!important;flex:0 0 18px;width:18px!important;height:18px!important;min-height:18px!important;padding:0!important;margin:0!important;border-radius:4px!important;accent-color:#105f68;cursor:pointer}@media(max-width:400px){.loginPasswordOptions{gap:12px;font-size:12px}}

.passwordField{position:relative}.passwordField input{padding-right:52px!important}.showPasswordButton{position:absolute;right:8px;top:50%;transform:translateY(-50%);width:38px!important;height:38px!important;padding:0!important;border:0!important;background:transparent!important;color:#10656d!important;box-shadow:none!important;font-size:20px!important}

/* Visual polish, media thumbnails and compact library */
.dashboard{position:relative;background:radial-gradient(circle at 92% 8%,#c8eee8 0,transparent 24%),linear-gradient(145deg,#f8fcfb 0%,#eef8f6 100%);border:1px solid #d7e9e7;border-radius:28px;padding:24px;box-shadow:0 20px 55px #0a5d6510}.now{position:sticky;top:118px;overflow:hidden;box-shadow:0 24px 55px #07545c2b}.now:before{content:'✦';position:absolute;right:-22px;top:-28px;width:110px;height:110px;border-radius:50%;background:#6fd2ca22;color:#8fe0d9;font-size:24px;display:grid;place-items:center}.now>*{position:relative;z-index:1}.managedCard{transition:transform .24s ease,box-shadow .24s ease,border-color .24s ease}.managedCard:hover{transform:translateY(-5px);border-color:#8acfc9;box-shadow:0 18px 38px #07545c20}.managedMedia{position:relative;display:block;width:100%;height:190px;padding:0!important;border:0;overflow:hidden;background:#0c626a;cursor:pointer}.managedMedia img{width:100%;height:100%;display:block;object-fit:cover;transition:transform .45s ease,filter .45s ease}.managedMedia:after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,#052d3305 35%,#052d3385 100%)}.managedCard:hover .managedMedia img{transform:scale(1.055);filter:saturate(1.08)}.managedMedia .mediaType{position:absolute;z-index:3;left:12px;top:12px;padding:6px 9px;border-radius:999px;background:#073f46dd;color:#fff;font-size:9px;font-weight:700;backdrop-filter:blur(8px)}.managedMedia .playOverlay{z-index:3;width:52px;height:52px;border:2px solid #fff;background:#0d656fc4;box-shadow:0 9px 25px #022b3070;transition:transform .25s ease,background .25s ease}.managedMedia:hover .playOverlay{transform:translate(-50%,-50%) scale(1.1);background:#54bdb5}.managedCard>div:last-child{padding:18px}.managedCard h3{font-size:15px}.managedCard p{min-height:38px}.managedCard button[data-rich]{display:inline-flex;align-items:center;gap:7px}.managedCard button[data-rich] span{transition:transform .2s ease}.managedCard button[data-rich]:hover span{transform:translateX(4px)}#videoGrid:not(.videoGridExpanded) .videoCard:nth-child(n+7){display:none}.videoLibraryMore{display:flex;align-items:center;justify-content:center;gap:10px;width:min(420px,100%);min-height:52px;margin:22px auto 2px;padding:12px 20px;border:1px solid #8ccfc9;border-radius:14px;background:linear-gradient(135deg,#f6fcfb,#e6f6f3);color:#0d626a;font:600 12px 'Be Vietnam Pro',sans-serif;cursor:pointer;box-shadow:0 10px 24px #0a5d6512;transition:.22s ease}.videoLibraryMore:hover{transform:translateY(-2px);background:#dff4f0;box-shadow:0 15px 30px #0a5d6520}.videoLibraryMore>span{color:#6c8588;font-size:10px;font-weight:500}.videoLibraryMore[hidden]{display:none}@media(max-width:760px){.dashboard{padding:12px;border-radius:20px}.now{position:relative;top:auto}.managedMedia{height:180px}.videoLibraryMore{flex-wrap:wrap}.videoLibraryMore>span{width:100%;text-align:center}}

/* Fix empty learning-column space */
.dashboard>.now{position:relative!important;top:auto!important;align-self:stretch!important;min-height:100%!important}.dashboard>.now:after{content:'';position:absolute;inset:auto -80px -100px auto;width:230px;height:230px;border-radius:50%;background:radial-gradient(circle,#8ce0d72b,transparent 70%);pointer-events:none}@media(max-width:1050px){.dashboard{display:flex!important;flex-direction:column!important;width:calc(100% - 24px)!important;max-width:none!important;margin:0 12px 24px!important;padding:14px!important;gap:16px!important}.dashboard>.curriculum,.dashboard>.curriculum-panel,.dashboard>.now{width:100%!important;max-width:none!important;min-width:0!important;margin:0!important}.dashboard>.now{min-height:auto!important}}@media(min-width:1051px){.dashboard>.now{border-radius:24px!important}}

/* Refined weekly streak panel */
.now .streak{background:linear-gradient(145deg,#dff5f2 0%,#bfe7e2 100%)!important;color:#0b535b!important;border:1px solid #ffffff80!important;box-shadow:inset 0 1px 0 #fff,0 12px 28px #032f341f!important}.now .streak small{color:#35767c!important;font-weight:600!important}.now .streak b{color:#0b535b!important}.now .streak p{align-items:center;margin-bottom:2px!important}.now .streak i{border-color:#79c8c1!important;background:#55bdb5!important;color:#fff!important;box-shadow:0 4px 9px #1a777d26}.now .streak i.today{background:#fff!important;color:#0d626a!important;border:2px solid #16818a!important;box-shadow:0 0 0 3px #ffffff70!important}

/* Final learning-card height correction */
.dashboard{background:transparent!important;border-color:transparent!important;box-shadow:none!important}.dashboard>.now{position:relative!important;top:auto!important;align-self:start!important;min-height:0!important;height:auto!important}.dashboard>.now:after{display:none!important}@media(max-width:1050px){.dashboard>.now{align-self:auto!important}}

/* Password recovery */
.forgotPasswordButton{display:block;width:max-content;margin:11px 0 0 auto;padding:4px 0;border:0;background:transparent;color:#16737b;font-size:11px;font-weight:700}.forgotPasswordButton:hover{text-decoration:underline}.forgotModal{position:fixed;inset:0;z-index:190;display:none;place-items:center;padding:18px}.forgotModal.open{display:grid}.forgotShade{position:absolute;inset:0;background:#06272add;backdrop-filter:blur(10px)}.forgotCard{position:relative;width:min(450px,94vw);padding:30px;background:#fff;border:1px solid #d7e9e7;border-radius:22px;box-shadow:0 30px 90px #001d2266}.forgotClose{position:absolute;right:14px;top:14px;width:35px;height:35px;border:0;border-radius:50%;background:#edf7f5;color:#105f68;font-size:19px}.forgotIcon{display:grid;place-items:center;width:54px;height:54px;border-radius:15px;background:linear-gradient(145deg,#105f68,#3a9295);color:#fff;font-size:25px}.forgotCard>span{display:block;margin-top:12px;color:#3a9295;font-size:9px;font-weight:800;letter-spacing:1.4px}.forgotCard h2{margin:6px 0;font-size:26px}.forgotCard>p{color:#647b7e;font-size:11px;line-height:1.6}.forgotCard label{display:block;margin-top:13px;color:#315e64;font-size:10px;font-weight:700}.forgotCard input{display:block;width:100%;min-height:46px;margin-top:6px;padding:11px 13px;border:1px solid #cfe4e2;border-radius:11px;outline-color:#63c1bb}.forgotCard>.primary{width:100%;margin-top:20px}.forgotCard>small{display:block;margin-top:10px;text-align:center;color:#789093;font-size:8px}

/* Admin notification center */
.adminMain>header{position:relative}.adminHeaderActions{display:flex;align-items:center;gap:10px}.adminNotificationButton{position:relative;display:grid;place-items:center;width:46px;height:46px;padding:0;border:1px solid #cfe4e2;border-radius:13px;background:#fff!important;color:#105f68!important;box-shadow:0 8px 22px #105f6812}.adminNotificationButton>span{font-size:21px}.adminNotificationButton>i{position:absolute;right:-4px;top:-5px;display:grid;place-items:center;min-width:20px;height:20px;padding:0 5px;border:2px solid #fff;border-radius:20px;background:#ef846f;color:#fff;font-size:8px;font-style:normal}.adminNotificationPanel{position:absolute;z-index:180;right:0;top:calc(100% + 10px);display:none;width:min(400px,92vw);overflow:hidden;background:#fff;border:1px solid #d7e9e7;border-radius:18px;box-shadow:0 25px 65px #06272a38}.adminNotificationPanel.open{display:block;animation:accountMenuIn .18s ease}.adminNotificationPanel>header{position:static!important;display:flex!important;justify-content:space-between;align-items:center;min-height:0!important;padding:16px!important;background:linear-gradient(135deg,#eef9f7,#fff)!important;box-shadow:none!important}.adminNotificationPanel h3,.adminNotificationPanel small{display:block;margin:0}.adminNotificationPanel h3{margin-top:3px;font-size:16px}.adminNotificationPanel small{color:#3a9295;font-size:8px;font-weight:800;letter-spacing:1px}.adminNotificationPanel>header button,.adminNotificationPanel>footer button{border:0;background:transparent;color:#16737b;font-size:9px;font-weight:700}.adminNotificationPanel>div{max-height:390px;overflow:auto}.adminNotificationPanel>div>button{display:grid;grid-template-columns:36px 1fr;gap:10px;width:100%;padding:12px 15px;border:0;border-top:1px solid #e3efed;background:#fff;text-align:left}.adminNotificationPanel>div>button:hover{background:#f2faf8}.adminNotificationPanel>div>button>i{display:grid;place-items:center;width:35px;height:35px;border-radius:10px;background:#dff3ef;color:#10656d;font-style:normal;font-weight:800}.adminNotificationPanel>div span,.adminNotificationPanel>div b,.adminNotificationPanel>div small,.adminNotificationPanel>div em{display:block}.adminNotificationPanel>div b{color:#173f44;font-size:10px}.adminNotificationPanel>div small{margin-top:3px;color:#607b7e;font-size:9px;line-height:1.4;letter-spacing:0;font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.adminNotificationPanel>div em{margin-top:4px;color:#91a5a7;font-size:7px;font-style:normal}.adminNotificationPanel>footer{padding:11px;border-top:1px solid #e3efed;text-align:center}.adminNoticeEmpty{padding:35px 15px;text-align:center;color:#6d888b;font-size:10px}@media(max-width:760px){.forgotCard{padding:24px 18px}.adminHeaderActions{width:100%;justify-content:flex-end}.adminNotificationPanel{right:8px;left:8px;width:auto;top:100%}}

/* Admin question quick-reply popup */
.adminQuickReplyModal{position:fixed;inset:0;z-index:260;display:none;place-items:center;padding:18px}.adminQuickReplyModal.open{display:grid}.adminReplyShade{position:absolute;inset:0;background:#06272adb;backdrop-filter:blur(10px)}.adminQuickReplyCard{position:relative;width:min(620px,95vw);max-height:92vh;overflow:auto;padding:28px;background:#fff;border:1px solid #d5e8e6;border-radius:22px;box-shadow:0 35px 100px #001d2270;animation:quickReplyIn .22s ease-out}.adminQuickReplyClose{position:absolute;right:15px;top:15px;width:36px;height:36px;border:0;border-radius:50%;background:#edf7f5;color:#105f68;font-size:20px}.quickReplyHead{display:flex;align-items:center;gap:13px;padding-right:45px}.quickReplyIcon{display:grid;place-items:center;width:50px;height:50px;border-radius:14px;background:linear-gradient(145deg,#105f68,#3a9295);color:#fff;font-size:22px;font-weight:800}.quickReplyHead span{color:#3a9295;font-size:8px;font-weight:800;letter-spacing:1.3px}.quickReplyHead h2{margin:4px 0 0;color:#123f44;font-size:23px}.quickStudent{display:flex;align-items:center;gap:11px;margin-top:20px;padding:13px;border:1px solid #dceceb;border-radius:14px;background:linear-gradient(135deg,#f1faf8,#fff)}.quickStudent>div{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:#bfe7e2;color:#105f68;font-size:11px;font-weight:800}.quickStudent p,.quickStudent b,.quickStudent small,.quickStudent em{display:block;margin:0}.quickStudent b{font-size:11px}.quickStudent small{margin-top:2px;color:#477278;font-size:9px}.quickStudent em{margin-top:3px;color:#8aa1a3;font-size:8px;font-style:normal}.adminQuickReplyCard blockquote{position:relative;margin:14px 0;padding:16px 17px 16px 38px;border:0;border-radius:14px;background:#0f666e;color:#fff;font-size:12px;line-height:1.65}.adminQuickReplyCard blockquote:before{content:'“';position:absolute;left:14px;top:5px;color:#8edbd4;font:700 30px Georgia}.adminQuickReplyCard>label{display:block;color:#315e64;font-size:10px;font-weight:700}.adminQuickReplyCard textarea{display:block;width:100%;min-height:125px;margin-top:7px;padding:13px;border:1px solid #cfe4e2;border-radius:13px;outline-color:#63c1bb;resize:vertical;font-size:12px;line-height:1.6}.quickReplyHint{margin-top:9px;padding:9px 11px;border-radius:9px;background:#edf8f6;color:#4b7377;font-size:9px}.adminQuickReplyCard footer{display:flex;justify-content:flex-end;gap:9px;margin-top:18px}.adminQuickReplyCard footer button{min-height:42px;padding:9px 16px;border:1px solid #cfe4e2;border-radius:10px;background:#fff;color:#315e64;font-size:10px;font-weight:700}.adminQuickReplyCard footer button[type=submit]{border-color:#105f68;background:#105f68;color:#fff;box-shadow:0 9px 20px #105f682c}@keyframes quickReplyIn{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}@media(max-width:600px){.adminQuickReplyCard{padding:21px 15px;border-radius:18px}.quickReplyHead h2{font-size:20px}.adminQuickReplyCard footer{display:grid;grid-template-columns:1fr 1fr}.adminQuickReplyCard footer button{width:100%}}

.accountArea{position:relative;flex:0 0 auto}.accountArea .accountBtn{margin:0;min-height:44px}.accountMenu{position:absolute;z-index:150;right:0;top:calc(100% + 12px);display:none;width:245px;padding:10px;background:#fff;border:1px solid #d7e9e7;border-radius:16px;box-shadow:0 20px 50px #06363c2b}.accountMenu.open{display:block;animation:accountMenuIn .18s ease-out}.accountMenuIdentity{display:flex;align-items:center;gap:11px;padding:8px 8px 13px;border-bottom:1px solid #e1eeec}.accountMenuIdentity>span{display:grid;place-items:center;width:38px;height:38px;border-radius:11px;background:#10656d;color:#fff;font:700 17px Georgia}.accountMenuIdentity p,.accountMenuIdentity b,.accountMenuIdentity small{display:block;margin:0}.accountMenuIdentity b{color:#103e43;font-size:13px;line-height:1.35}.accountMenuIdentity small{margin-top:3px;color:#6c8588;font-size:10px}.accountMenu>a,.accountMenu>button{display:flex;width:100%;align-items:center;gap:9px;margin-top:6px;padding:11px 10px;border:0;border-radius:10px;background:transparent;color:#17484e;font:600 12px 'Be Vietnam Pro',sans-serif;text-decoration:none;cursor:pointer;text-align:left}.accountMenu>a:hover{background:#edf8f6;color:#0e666e}.accountMenu>button:hover{background:#fff1ee;color:#b84c3c}.adminLinkMoved{display:none!important}@keyframes accountMenuIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}@media(max-width:760px){.accountArea{width:100%}.accountArea .accountBtn{width:100%}.accountMenu{position:static;width:100%;margin-top:8px;box-shadow:0 10px 25px #06363c1c}.accountMenu.open{display:block}}

/* ==========================================================================
   PREMIUM CARD DEPTH, GLASSMORPHISM & VISUAL CONTRAST UPGRADE
   ========================================================================== */

/* 1. Richer Background Layer to fix "nền trắng bị sáng quá làm mờ card" */
body {
  background: radial-gradient(circle at 15% 10%, #dcefe8 0%, #e6f3f0 45%, #dbedea 100%) !important;
  color: var(--ink);
}
.adminPage {
  background: radial-gradient(circle at 85% 15%, #dff0ee 0%, #e8f4f3 50%, #dceeea 100%) !important;
}

/* 2. Frosted Glass Containers (Outer Panels) */
.learnerHub, .curriculum, .videos, .notes, .awards, .published, .learningTools, .questionWorkspace, .memberWorkspace, .adminWorkspace, .curriculum-panel, .learning-panel, .courseOffers {
  background: rgba(255, 255, 255, 0.82) !important;
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
  border: 1px solid rgba(255, 255, 255, 0.95) !important;
  box-shadow: 0 18px 48px rgba(16, 95, 104, 0.08), 0 2px 8px rgba(16, 95, 104, 0.03) !important;
}
.dashboard {
  background: radial-gradient(circle at 92% 8%, rgba(200, 238, 232, 0.5) 0, transparent 35%), linear-gradient(145deg, rgba(248, 252, 251, 0.85) 0%, rgba(238, 248, 246, 0.75) 100%) !important;
  backdrop-filter: blur(16px) !important;
  border: 1px solid rgba(255, 255, 255, 0.9) !important;
  box-shadow: 0 20px 55px rgba(10, 93, 101, 0.09) !important;
}

/* 3. Distinct High-Contrast Cards with Permanent Elevation */
.hubCard, .continueCard, .videoCard, .managedCard, .toolCard, .awards article, .commentCard, .plan, .offerCard {
  background: #ffffff !important;
  border: 1px solid #c8e2df !important;
  border-top: 1px solid #ffffff !important;
  box-shadow: 0 8px 26px rgba(16, 95, 104, 0.09), 0 2px 6px rgba(16, 95, 104, 0.04) !important;
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.35s, background 0.35s !important;
  position: relative;
  overflow: hidden;
}

/* Special styling for Continue Card to make it stand out as primary CTA */
.continueCard {
  background: linear-gradient(135deg, #ffffff 0%, #effaf9 100%) !important;
  border: 1px solid #bce2de !important;
  box-shadow: 0 12px 32px rgba(16, 95, 104, 0.12), 0 3px 10px rgba(16, 95, 104, 0.05) !important;
}

/* 4. Interactive Micro-Animations & Glowing Hover Effects */
.hubCard:hover, .continueCard:hover, .videoCard:hover, .managedCard:hover, .toolCard:hover, .awards article:not(.locked):hover, .plan:hover, .offerCard:hover {
  transform: translateY(-8px) scale(1.018) !important;
  border-color: var(--a) !important;
  box-shadow: 0 22px 55px rgba(16, 95, 104, 0.22), 0 0 0 2px rgba(99, 193, 187, 0.35) !important;
  background: #ffffff !important;
  z-index: 5;
}

/* Hover Shimmer Sweep Effect */
.hubCard::after, .continueCard::after, .videoCard::after, .toolCard::after, .offerCard::after {
  content: "";
  position: absolute;
  top: 0;
  left: -150%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.65), transparent);
  transform: skewX(-25deg);
  transition: left 0.75s ease;
  pointer-events: none;
  z-index: 2;
}
.hubCard:hover::after, .continueCard:hover::after, .videoCard:hover::after, .toolCard:hover::after, .offerCard:hover::after {
  left: 150%;
}

/* 5. Enhanced Card Icons & Buttons on Hover */
.hubCard:hover .hubIcon, .toolCard:hover i {
  transform: translateY(-4px) rotate(-8deg) scale(1.15) !important;
  background: linear-gradient(135deg, var(--l), var(--a)) !important;
  color: var(--p) !important;
  box-shadow: 0 10px 22px rgba(16, 95, 104, 0.25) !important;
}

.continueCard:hover button, .toolCard:hover button, .hubCard:hover button, .offerCard:hover button {
  background: linear-gradient(135deg, var(--m), var(--a)) !important;
  color: white !important;
  box-shadow: 0 8px 20px rgba(58, 146, 149, 0.35) !important;
  transform: translateY(-2px);
}

/* 6. Course Module Items Polish */
.module {
  background: #ffffff !important;
  border: 1px solid #cbe4e1 !important;
  box-shadow: 0 6px 18px rgba(16, 95, 104, 0.06) !important;
}
.module:hover {
  border-color: var(--a) !important;
  box-shadow: 0 14px 35px rgba(16, 95, 104, 0.15) !important;
  transform: translateX(6px) !important;
}

/* 7. Video Card & Media Thumbnails Polish */
.videoCard .thumb, .managedMedia {
  position: relative;
  overflow: hidden;
}
.videoCard:hover .thumb::before, .managedCard:hover .managedMedia::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, rgba(99, 193, 187, 0.25), transparent 70%);
  z-index: 1;
  pointer-events: none;
}
.videoCard:hover .play, .managedMedia:hover .playOverlay {
  transform: translate(-50%, -50%) scale(1.18) !important;
  background: var(--a) !important;
  color: var(--p) !important;
  box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.4), 0 12px 30px rgba(0, 0, 0, 0.4) !important;
}

/* 8. Sleek Deep Emerald Glass Header & Controls Upgrade (Fixing bright header bar) */
header, .topbar {
  background: linear-gradient(135deg, rgba(13, 89, 98, 0.94) 0%, rgba(8, 75, 83, 0.95) 100%) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border-bottom: 1px solid rgba(158, 213, 209, 0.22) !important;
  box-shadow: 0 10px 32px rgba(4, 40, 44, 0.28) !important;
  color: #ffffff !important;
}

header .tabs, .topbar .tabs, .tabs {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  display: flex !important;
  gap: 12px !important;
}

header .tab, .topbar .tab, .tab {
  background: rgba(255, 255, 255, 0.07) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  border-radius: 16px !important;
  padding: 10px 18px !important;
  color: #c8e6e2 !important;
  transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.12) !important;
}
header .tab:hover, .topbar .tab:hover, .tab:hover {
  background: rgba(255, 255, 255, 0.15) !important;
  border-color: rgba(255, 255, 255, 0.45) !important;
  color: #ffffff !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2) !important;
}
header .tab small, .topbar .tab small, .tab small {
  color: #9ed5d1 !important;
}

header .tab.active, .topbar .tab.active, .tab.active {
  background: linear-gradient(135deg, #105f68 0%, #1a8894 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.5) !important;
  color: #ffffff !important;
  box-shadow: 0 8px 25px rgba(16, 95, 104, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
}
header .tab.active small, .topbar .tab.active small, .tab.active small {
  color: #ffd875 !important;
  font-weight: 800 !important;
}

header .search, .topbar .search {
  background: rgba(4, 40, 44, 0.45) !important;
  border: 1px solid rgba(158, 213, 209, 0.25) !important;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.25) !important;
  color: #ffffff !important;
}
header .search input, .topbar .search input {
  background: transparent !important;
  color: #ffffff !important;
}
header .search input::placeholder, .topbar .search input::placeholder {
  color: #9ed5d1 !important;
  opacity: 0.8 !important;
}

header .bell, header #menu, header .notificationBtn, .topbar .bell, .topbar #menu, .topbar .notificationBtn {
  background: rgba(4, 40, 44, 0.45) !important;
  border: 1px solid rgba(158, 213, 209, 0.25) !important;
  color: #ffffff !important;
}
header .bell:hover, header #menu:hover, header .notificationBtn:hover, .topbar .bell:hover, .topbar #menu:hover, .topbar .notificationBtn:hover {
  background: rgba(158, 213, 209, 0.2) !important;
  border-color: #63c1bb !important;
}

header .memberButton, .topbar .memberButton {
  background: linear-gradient(135deg, rgba(231, 184, 79, 0.22) 0%, rgba(13, 89, 98, 0.6) 100%) !important;
  border: 1px solid #e7b84f !important;
  color: #ffffff !important;
  box-shadow: 0 4px 15px rgba(231, 184, 79, 0.18) !important;
}
header .memberButton span, .topbar .memberButton span {
  color: #ffd875 !important;
}
header .memberButton:hover, .topbar .memberButton:hover {
  background: linear-gradient(135deg, rgba(231, 184, 79, 0.35) 0%, rgba(13, 89, 98, 0.8) 100%) !important;
  box-shadow: 0 6px 20px rgba(231, 184, 79, 0.35) !important;
  transform: translateY(-2px);
}

header .registerAccountBtn, .topbar .registerAccountBtn, header .secondaryAuth, .topbar .secondaryAuth {
  background: rgba(255, 255, 255, 0.12) !important;
  border: 1px solid rgba(158, 213, 209, 0.35) !important;
  color: #ffffff !important;
}
header .registerAccountBtn:hover, .topbar .registerAccountBtn:hover {
  background: rgba(255, 255, 255, 0.22) !important;
  border-color: #ffffff !important;
}

header .accountBtn, .topbar .accountBtn {
  background: linear-gradient(135deg, #63c1bb 0%, #9ed5d1 100%) !important;
  color: #084b53 !important;
  font-weight: 800 !important;
  border: 1px solid #ffffff !important;
  box-shadow: 0 6px 18px rgba(99, 193, 187, 0.35) !important;
}
header .accountBtn:hover, .topbar .accountBtn:hover {
  background: linear-gradient(135deg, #ffffff 0%, #63c1bb 100%) !important;
  box-shadow: 0 8px 24px rgba(99, 193, 187, 0.5) !important;
  transform: translateY(-2px);
}

/* ==========================================================================
   9. THE MASTERCLASS PRINCIPAL UI/UX DESIGNER OVERHAUL (APPLE & STRIPE LEVEL AESTHETICS)
   ========================================================================== */

/* --- A. EXECUTIVE AMBIENT COLOR PALETTE & GLASS MESH --- */
body {
  background: radial-gradient(circle at 10% 5%, #d5eee7 0%, #e3f4f0 35%, #d9ede9 70%, #cfe6e1 100%) !important;
  color: #0f3238 !important;
  font-feature-settings: "cv02", "cv03", "cv04", "cv11";
  letter-spacing: -0.01em;
}

/* Custom Luxury Scrollbar */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: rgba(220, 238, 235, 0.6);
}
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #63c1bb, #3a9295);
  border-radius: 10px;
  border: 2px solid #e3f4f0;
}
::-webkit-scrollbar-thumb:hover {
  background: #105f68;
}

/* --- B. SIDEBAR EXECUTIVE OBSIDIAN CONSOLE --- */
aside#side {
  background: linear-gradient(180deg, #09474f 0%, #06383e 50%, #04292e 100%) !important;
  box-shadow: 10px 0 35px rgba(4, 41, 46, 0.35) !important;
  border-right: 1px solid rgba(158, 213, 209, 0.15) !important;
}
aside#side .brand {
  padding-bottom: 25px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
}
aside#side .brand i {
  background: linear-gradient(135deg, #187f8a, #105f68) !important;
  border: 2px solid #63c1bb !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4), inset 0 2px 4px rgba(255, 255, 255, 0.3) !important;
  color: #ffffff !important;
}
aside#side .profile {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 16px !important;
  margin: 15px 0 !important;
  padding: 14px 12px !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15) !important;
}
aside#side .avatar {
  background: linear-gradient(135deg, #e7b84f, #d99b26) !important;
  color: #06383e !important;
  border: 2px solid #ffffff !important;
  box-shadow: 0 4px 12px rgba(231, 184, 79, 0.4) !important;
  font-size: 15px !important;
}

/* Nav Links with Sculpted Jewel Icons */
aside#side nav a {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 13px 16px !important;
  margin-bottom: 4px !important;
  border-radius: 14px !important;
  color: #bde4e0 !important;
  font-weight: 600 !important;
  transition: all 0.28s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
  border: 1px solid transparent !important;
}
aside#side nav a:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #ffffff !important;
  transform: translateX(6px) !important;
  border-color: rgba(158, 213, 209, 0.2) !important;
}
aside#side nav a.active {
  background: linear-gradient(90deg, rgba(99, 193, 187, 0.25) 0%, rgba(16, 95, 104, 0.4) 100%) !important;
  color: #ffffff !important;
  border-left: 4px solid #63c1bb !important;
  border-top: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-right: 1px solid rgba(255, 255, 255, 0.15) !important;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.25) !important;
}

/* --- C. SECTION TITLES & TYPOGRAPHY HIERARCHY --- */
.title p > b, .hubHeading h2, .notes h2, .courseMain h2, .now h2, .qaHeading h3 {
  color: #0b3d43 !important;
  font-weight: 800 !important;
  letter-spacing: -0.03em !important;
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.8) !important;
}
.title label, .hubHeading span, .now > label, .courseMain h3 {
  color: #167680 !important;
  font-weight: 800 !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
}

/* --- D. PANORAMIC HERO SLIDER & WELCOME BANNER --- */
.homeSlider {
  border-radius: 30px !important;
  box-shadow: 0 28px 70px rgba(10, 80, 88, 0.22), 0 0 0 1px rgba(255, 255, 255, 0.8) !important;
  border: 4px solid #ffffff !important;
}
.slideTag {
  background: rgba(16, 95, 104, 0.85) !important;
  backdrop-filter: blur(10px) !important;
  border: 1px solid rgba(255, 255, 255, 0.4) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.25) !important;
  padding: 8px 16px !important;
}
.slideCta {
  background: linear-gradient(135deg, #e7b84f 0%, #d99b26 100%) !important;
  color: #08383e !important;
  border: 1px solid #ffffff !important;
  box-shadow: 0 10px 25px rgba(217, 155, 38, 0.4) !important;
  font-size: 13px !important;
  letter-spacing: 0.02em !important;
}
.slideCta:hover {
  background: linear-gradient(135deg, #ffffff 0%, #e7b84f 100%) !important;
  box-shadow: 0 14px 32px rgba(217, 155, 38, 0.6) !important;
  transform: translateY(-3px) scale(1.02) !important;
}

/* --- E. EXECUTIVE LEARNER HUB & 3D JEWEL CARDS --- */
.learnerHub {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.92) 0%, rgba(240, 250, 248, 0.85) 100%) !important;
  backdrop-filter: blur(24px) !important;
  border: 1px solid #ffffff !important;
  box-shadow: 0 22px 60px rgba(16, 95, 104, 0.09), 0 4px 15px rgba(16, 95, 104, 0.03) !important;
  border-radius: 28px !important;
  padding: 30px !important;
}

/* Continue Card - Primary VIP Box */
.continueCard {
  background: linear-gradient(135deg, #ffffff 0%, #e8f8f5 100%) !important;
  border: 2px solid #63c1bb !important;
  border-top: 2px solid #ffffff !important;
  box-shadow: 0 16px 40px rgba(16, 95, 104, 0.14), 0 0 0 6px rgba(99, 193, 187, 0.12) !important;
  border-radius: 22px !important;
  padding: 18px !important;
}
.continueVisual {
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25) !important;
  border: 2px solid #ffffff !important;
}
.continueCard button {
  background: linear-gradient(135deg, #105f68, #18828e) !important;
  color: #ffffff !important;
  box-shadow: 0 8px 20px rgba(16, 95, 104, 0.3) !important;
  font-size: 11px !important;
  padding: 12px 18px !important;
  border-radius: 12px !important;
}
.continueCard button:hover {
  background: linear-gradient(135deg, #e7b84f, #d99b26) !important;
  color: #06383e !important;
  box-shadow: 0 10px 25px rgba(231, 184, 79, 0.45) !important;
}

/* Hub Cards & Tool Cards - Jewel Iconography */
.hubCard, .toolCard {
  background: #ffffff !important;
  border: 1px solid #cbe6e2 !important;
  border-top: 1px solid #ffffff !important;
  border-radius: 20px !important;
  box-shadow: 0 10px 30px rgba(16, 95, 104, 0.07) !important;
  padding: 20px !important;
}

/* Glowing Sculpted Icons */
.hubIcon, .toolCard i {
  width: 44px !important;
  height: 44px !important;
  border-radius: 14px !important;
  display: grid !important;
  place-items: center !important;
  font-size: 20px !important;
  font-weight: 800 !important;
  background: linear-gradient(135deg, #e5f6f4 0%, #c1e8e3 100%) !important;
  color: #105f68 !important;
  border: 1px solid #ffffff !important;
  box-shadow: 0 6px 16px rgba(16, 95, 104, 0.15) !important;
  transition: all 0.35s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
}

/* Progress Hub Icon - Emerald Jewel */
.progressHub .hubIcon {
  background: linear-gradient(135deg, #105f68, #238993) !important;
  color: #ffffff !important;
  box-shadow: 0 8px 20px rgba(16, 95, 104, 0.3) !important;
}

/* Schedule Hub Icon - Gold Jewel */
.scheduleHub .hubIcon {
  background: linear-gradient(135deg, #e7b84f, #d99b26) !important;
  color: #ffffff !important;
  box-shadow: 0 8px 20px rgba(217, 155, 38, 0.3) !important;
}

/* Support Hub - Deep Obsidian/Teal Card */
.supportHub {
  background: linear-gradient(145deg, #0d5962 0%, #06383e 100%) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  box-shadow: 0 16px 40px rgba(6, 56, 62, 0.35) !important;
}
.supportHub .hubIcon {
  background: rgba(255, 255, 255, 0.15) !important;
  color: #ffd875 !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
}
.supportHub button {
  background: linear-gradient(135deg, #e7b84f, #ffd875) !important;
  color: #06383e !important;
  font-weight: 800 !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25) !important;
}
.supportHub button:hover {
  background: #ffffff !important;
  transform: translateY(-2px) !important;
}

/* --- F. COURSE MODULES & VIDEO LIBRARY POLISH --- */
.curriculum, .videos, .notes, .awards, .learningTools {
  background: rgba(255, 255, 255, 0.88) !important;
  backdrop-filter: blur(20px) !important;
  border: 1px solid #ffffff !important;
  border-radius: 26px !important;
  box-shadow: 0 20px 55px rgba(16, 95, 104, 0.08) !important;
  padding: 26px !important;
}

/* Course Module Folders */
.module {
  border: 1px solid #c8e2df !important;
  border-radius: 18px !important;
  background: #ffffff !important;
  margin-top: 14px !important;
  box-shadow: 0 4px 14px rgba(16, 95, 104, 0.04) !important;
}
.module > button {
  padding: 18px 20px !important;
}
.module.open {
  border-color: #63c1bb !important;
  box-shadow: 0 14px 36px rgba(16, 95, 104, 0.12) !important;
}
.module.open > button {
  background: linear-gradient(90deg, #105f68, #18808a) !important;
  color: white !important;
}

/* Live Study Console (.now right sidebar) */
.now {
  background: linear-gradient(155deg, #0d5962 0%, #08434a 50%, #052c30 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  border-radius: 26px !important;
  box-shadow: 0 25px 65px rgba(6, 56, 62, 0.35) !important;
  padding: 28px !important;
}
.now > button {
  background: linear-gradient(135deg, #e7b84f, #ffd875) !important;
  color: #06383e !important;
  font-weight: 800 !important;
  font-size: 13px !important;
  padding: 16px !important;
  border-radius: 14px !important;
  box-shadow: 0 10px 25px rgba(231, 184, 79, 0.35) !important;
  border: 1px solid #ffffff !important;
}
.now > button:hover {
  background: linear-gradient(135deg, #ffffff, #e7b84f) !important;
  box-shadow: 0 14px 32px rgba(231, 184, 79, 0.55) !important;
  transform: translateY(-3px) scale(1.02) !important;
}

/* Video Cards Hover Enhancement */
.videoCard {
  border: 1px solid #c8e2df !important;
  border-radius: 20px !important;
  background: #ffffff !important;
  box-shadow: 0 8px 25px rgba(16, 95, 104, 0.07) !important;
  transition: all 0.35s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
}
.videoCard:hover {
  transform: translateY(-8px) !important;
  border-color: #63c1bb !important;
  box-shadow: 0 20px 50px rgba(16, 95, 104, 0.18) !important;
}
.videoCard .play {
  background: linear-gradient(135deg, #e7b84f, #d99b26) !important;
  color: #06383e !important;
  border: 3px solid #ffffff !important;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4) !important;
}

/* --- G. PULSING & SHIMMER EFFECTS (MICRO-ANIMATIONS) --- */
@keyframes pulseGlow {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(239, 132, 111, 0.7); }
  50% { transform: scale(1.08); box-shadow: 0 0 0 8px rgba(239, 132, 111, 0); }
}
#notificationBadge, .streak .today {
  animation: pulseGlow 2.5s infinite ease-in-out !important;
}

/* --- H. BORDERLESS PREMIUM TAB SELECTOR (REMOVING THICK OUTER BORDER) --- */
.tabs, header .tabs, .topbar .tabs {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  display: flex !important;
  gap: 12px !important;
}
.tab, header .tab, .topbar .tab {
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  border-radius: 16px !important;
  padding: 11px 20px !important;
  color: #c8e6e2 !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.12) !important;
}
.tab:hover, header .tab:hover, .topbar .tab:hover {
  background: rgba(255, 255, 255, 0.16) !important;
  border-color: rgba(255, 255, 255, 0.45) !important;
  color: #ffffff !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2) !important;
}
.tab.active, header .tab.active, .topbar .tab.active {
  background: linear-gradient(135deg, #105f68 0%, #1c8894 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.5) !important;
  color: #ffffff !important;
  box-shadow: 0 8px 25px rgba(16, 95, 104, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
}

/* --- I. COMPLETE OVERHAUL FOR 5 USER REQUESTS (BANNER, LEARNER HUB, FEATURED COURSE, LIVE CARD) --- */

/* 2. Banner expanded to cover empty space */
.homeSlider {
  max-width: 100% !important;
  width: 100% !important;
  margin: 16px 0 32px 0 !important;
  border-radius: 28px !important;
  height: clamp(520px, 58vw, 700px) !important;
  box-shadow: 0 25px 70px rgba(4, 40, 44, 0.25) !important;
}

/* 3. LearnerHub cards crystal clear & high-contrast (Fixing blurry/pale look) */
.learnerHub {
  background: #f0f9f8 !important;
  border: 2px solid #bde4e0 !important;
  box-shadow: 0 20px 50px rgba(16, 95, 104, 0.12) !important;
  border-radius: 28px !important;
  padding: 30px !important;
}
.learnerHub > p, .learnerHub > span {
  color: #0b3d43 !important;
  font-weight: 700 !important;
}
.learnerHub h2, .learnerHub h1 {
  color: #0b3d43 !important;
  font-weight: 800 !important;
}
.continueCard {
  background: #ffffff !important;
  border: 2px solid #105f68 !important;
  box-shadow: 0 16px 40px rgba(16, 95, 104, 0.2) !important;
  border-radius: 22px !important;
  padding: 24px !important;
}
.continueCard h3 {
  color: #0b3d43 !important;
  font-weight: 800 !important;
  font-size: 18px !important;
  text-shadow: none !important;
  background: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
}
.continueCard p {
  color: #3b747a !important;
  font-weight: 600 !important;
}
.hubCard, .supportHub {
  background: #ffffff !important;
  border: 2px solid #bce2de !important;
  box-shadow: 0 12px 30px rgba(16, 95, 104, 0.12) !important;
  border-radius: 22px !important;
  padding: 22px !important;
}
.hubCard:hover, .supportHub:hover {
  border-color: #105f68 !important;
  transform: translateY(-4px) !important;
  box-shadow: 0 20px 45px rgba(16, 95, 104, 0.22) !important;
}
.hubCard strong, .supportHub strong {
  color: #0b3d43 !important;
  font-weight: 800 !important;
  font-size: 26px !important;
  text-shadow: none !important;
}
.hubCard span, .supportHub span {
  color: #167680 !important;
  font-weight: 800 !important;
}
.hubCard p, .supportHub p {
  color: #3b747a !important;
  font-weight: 600 !important;
}

/* 4. Featured Course Cover redesign (Fixing dark/blurry text on emerald background) */
.courseCover {
  background: linear-gradient(135deg, #09474f 0%, #0d5962 50%, #167680 100%) !important;
  border: 2px solid #63c1bb !important;
  box-shadow: 0 25px 65px rgba(9, 71, 79, 0.4) !important;
  border-radius: 26px !important;
  padding: 32px !important;
  color: #ffffff !important;
}
.courseMain h2 {
  color: #ffffff !important;
  background: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6) !important;
  font-size: 32px !important;
  font-weight: 800 !important;
  line-height: 1.3 !important;
  margin: 14px 0 10px 0 !important;
  letter-spacing: -0.5px !important;
}
.courseMain h3 {
  color: #ffd875 !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  margin-bottom: 14px !important;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4) !important;
}
.courseMain > p {
  color: #e3f6f4 !important;
  font-size: 14px !important;
  line-height: 1.7 !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
  margin-bottom: 20px !important;
}
.commercialBadge {
  background: linear-gradient(135deg, #ffd875 0%, #e7b84f 50%, #d99b26 100%) !important;
  color: #04292e !important;
  font-weight: 800 !important;
  padding: 6px 14px !important;
  border-radius: 20px !important;
  box-shadow: 0 4px 15px rgba(231, 184, 79, 0.5) !important;
  font-size: 11px !important;
  letter-spacing: 1px !important;
  display: inline-block !important;
}
.courseFacts span b {
  color: #ffffff !important;
  font-size: 15px !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4) !important;
}
.courseFacts span small {
  color: #9ed5d1 !important;
  font-size: 11px !important;
}
.courseAction {
  background: rgba(4, 40, 44, 0.45) !important;
  border: 1px solid rgba(158, 213, 209, 0.3) !important;
  border-radius: 20px !important;
  padding: 20px !important;
}
.courseAction b {
  color: #ffd875 !important;
  font-size: 20px !important;
}
.courseAction button {
  background: linear-gradient(135deg, #ffd875 0%, #e7b84f 100%) !important;
  color: #04292e !important;
  font-weight: 800 !important;
  border: none !important;
  box-shadow: 0 6px 20px rgba(231, 184, 79, 0.4) !important;
  padding: 12px 24px !important;
  border-radius: 14px !important;
  font-size: 14px !important;
}
.courseAction button:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 25px rgba(231, 184, 79, 0.6) !important;
}

/* 5. Live Study Card redesign (Fixing dark/blurry text in right sidebar) */
.now {
  background: linear-gradient(155deg, #09474f 0%, #06383e 50%, #04292e 100%) !important;
  border: 2px solid #63c1bb !important;
  box-shadow: 0 25px 65px rgba(6, 56, 62, 0.4) !important;
  border-radius: 26px !important;
  padding: 28px !important;
  color: #ffffff !important;
}
.now > label {
  color: #ffd875 !important;
  font-weight: 800 !important;
  letter-spacing: 1.5px !important;
}
.now > span {
  background: rgba(255, 255, 255, 0.12) !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  padding: 4px 12px !important;
  border-radius: 12px !important;
}
.now h2 {
  color: #ffffff !important;
  background: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6) !important;
  font-size: 24px !important;
  font-weight: 800 !important;
  line-height: 1.35 !important;
  margin: 16px 0 !important;
}
.now .instructor p b {
  color: #ffffff !important;
  font-size: 14px !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4) !important;
}
.now .instructor p small {
  color: #9ed5d1 !important;
}
.now .bar {
  background: rgba(255, 255, 255, 0.15) !important;
  height: 10px !important;
  border-radius: 6px !important;
}
.now .bar i {
  background: linear-gradient(90deg, #63c1bb, #ffd875) !important;
  box-shadow: 0 0 10px rgba(99, 193, 187, 0.8) !important;
}
.now .bar b {
  color: #ffd875 !important;
  font-weight: 800 !important;
}
.now button[data-play] {
  background: linear-gradient(135deg, #ffd875 0%, #e7b84f 100%) !important;
  color: #04292e !important;
  font-weight: 800 !important;
  border: none !important;
  box-shadow: 0 6px 20px rgba(231, 184, 79, 0.4) !important;
  padding: 14px 24px !important;
  border-radius: 16px !important;
  font-size: 15px !important;
  width: 100% !important;
  margin-top: 10px !important;
}
.now button[data-play]:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 25px rgba(231, 184, 79, 0.6) !important;
}
.streak {
  background: rgba(255, 255, 255, 0.07) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-radius: 16px !important;
  padding: 14px !important;
  margin-top: 20px !important;
}
.streak small {
  color: #9ed5d1 !important;
}
.streak b {
  color: #ffd875 !important;
  font-weight: 800 !important;
}

/* --- J. MASTERCLASS CRYSTAL-CLEAR HIGH-CONTRAST OVERHAUL (FIXING 5 BLURRY CARDS & BANNER MARGIN) --- */

/* 1. Banner margin - leaving balanced breathing room */
.homeSlider {
  max-width: calc(100% - 48px) !important;
  width: calc(100% - 48px) !important;
  margin: 24px auto 36px auto !important;
  border-radius: 28px !important;
  height: clamp(520px, 58vw, 700px) !important;
  box-shadow: 0 25px 70px rgba(4, 40, 44, 0.25) !important;
}

/* GLOBAL SECTION CONTAINERS: Crisp mint-ice framing with strong contrast */
.dashboard .curriculum, .published, .learningTools, .videos, .notes, .awards {
  background: #f0f9f8 !important;
  border: 2px solid #bce2de !important;
  border-radius: 28px !important;
  padding: 32px !important;
  box-shadow: 0 20px 50px rgba(16, 95, 104, 0.12) !important;
  margin-bottom: 36px !important;
}
.title p > b, .title h2, .published .title b, .learningTools .title b, .videos .title b {
  color: #0b3d43 !important;
  font-weight: 800 !important;
  font-size: 26px !important;
  text-shadow: none !important;
  background: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
}
.title p > label, .title label {
  color: #105f68 !important;
  font-weight: 800 !important;
  letter-spacing: 1.5px !important;
}

/* 2. Curriculum & Module Cards (Image 2) - Crisp high-contrast redesign */
.module {
  background: #ffffff !important;
  border: 2px solid #105f68 !important;
  border-radius: 22px !important;
  box-shadow: 0 14px 35px rgba(16, 95, 104, 0.15) !important;
  margin-bottom: 24px !important;
  overflow: hidden !important;
}
.chapterHead {
  background: linear-gradient(135deg, #0d5962 0%, #167680 100%) !important;
  color: #ffffff !important;
  padding: 20px 24px !important;
  border-bottom: 2px solid #105f68 !important;
}
.chapterHead .chapterLabel {
  background: linear-gradient(135deg, #ffd875, #e7b84f) !important;
  color: #06383e !important;
  font-weight: 800 !important;
  padding: 6px 14px !important;
  border-radius: 12px !important;
  font-size: 11px !important;
}
.chapterHead .modTitle b {
  color: #ffffff !important;
  font-size: 19px !important;
  font-weight: 800 !important;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.4) !important;
}
.chapterHead .modTitle small {
  color: #e3f6f4 !important;
  font-size: 13px !important;
}
.chapterHead .chapterMeta b {
  color: #ffd875 !important;
  font-size: 14px !important;
}
.chapterHead .chapterMeta small {
  color: #9ed5d1 !important;
}
.lesson {
  background: #ffffff !important;
  border-bottom: 1px solid #e0f2f0 !important;
  padding: 16px 24px !important;
  transition: all 0.25s ease !important;
}
.lesson:hover {
  background: #f4fbfa !important;
}
.lesson .state {
  background: #edf7f6 !important;
  color: #105f68 !important;
  border: 1px solid #c8e6e2 !important;
  font-weight: 800 !important;
}
.lesson .state.done {
  background: linear-gradient(135deg, #105f68, #1c8894) !important;
  color: #ffffff !important;
  border-color: #105f68 !important;
}
.lesson .lessonText b {
  color: #0b3d43 !important;
  font-weight: 800 !important;
  font-size: 16px !important;
  text-shadow: none !important;
}
.lesson .lessonText em {
  color: #3b747a !important;
  font-weight: 600 !important;
}
.lesson .time b {
  color: #105f68 !important;
  font-weight: 800 !important;
}
.lesson button[data-play] {
  background: #105f68 !important;
  color: #ffffff !important;
  font-weight: 800 !important;
  padding: 10px 18px !important;
  border-radius: 12px !important;
  border: none !important;
  box-shadow: 0 4px 12px rgba(16, 95, 104, 0.25) !important;
}
.lesson button[data-play]:hover {
  background: #0d5962 !important;
  transform: translateX(4px) !important;
}

/* 3. Published Articles & Videos (Image 3) - Crisp high-contrast cards */
.managedCard {
  background: #ffffff !important;
  border: 2px solid #105f68 !important;
  border-radius: 22px !important;
  box-shadow: 0 16px 40px rgba(16, 95, 104, 0.16) !important;
  overflow: hidden !important;
  transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
}
.managedCard:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 24px 55px rgba(16, 95, 104, 0.26) !important;
  border-color: #0d5962 !important;
}
.managedCard > div:last-child {
  padding: 24px !important;
  background: #ffffff !important;
}
.managedCard h3 {
  color: #0b3d43 !important;
  font-weight: 800 !important;
  font-size: 19px !important;
  line-height: 1.4 !important;
  margin: 12px 0 8px 0 !important;
  text-shadow: none !important;
}
.managedCard p {
  color: #2c6368 !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
}
.managedCard .managedMeta span {
  color: #105f68 !important;
  font-weight: 800 !important;
}
.managedCard button {
  color: #105f68 !important;
  font-weight: 800 !important;
  font-size: 15px !important;
  margin-top: 14px !important;
}

/* 4. Learning Tools Cards (Image 4) - Crisp high-contrast cards */
.toolCard {
  background: #ffffff !important;
  border: 2px solid #105f68 !important;
  border-radius: 22px !important;
  padding: 26px !important;
  box-shadow: 0 16px 40px rgba(16, 95, 104, 0.16) !important;
  transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
}
.toolCard:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 24px 55px rgba(16, 95, 104, 0.26) !important;
  border-color: #0d5962 !important;
}
.toolCard i {
  background: linear-gradient(135deg, #105f68, #1c8894) !important;
  color: #ffffff !important;
  width: 52px !important;
  height: 52px !important;
  border-radius: 16px !important;
  font-size: 24px !important;
  box-shadow: 0 6px 18px rgba(16, 95, 104, 0.3) !important;
}
.toolCard span {
  color: #105f68 !important;
  font-weight: 800 !important;
  letter-spacing: 1px !important;
  font-size: 12px !important;
}
.toolCard h3 {
  color: #0b3d43 !important;
  font-weight: 800 !important;
  font-size: 22px !important;
  text-shadow: none !important;
  margin: 12px 0 8px 0 !important;
}
.toolCard p {
  color: #2c6368 !important;
  font-weight: 600 !important;
  font-size: 14px !important;
}
.toolCard button {
  background: #edf7f6 !important;
  color: #105f68 !important;
  border: 2px solid #105f68 !important;
  font-weight: 800 !important;
  padding: 12px 20px !important;
  border-radius: 14px !important;
  width: 100% !important;
  margin-top: 16px !important;
  font-size: 14px !important;
  transition: all 0.2s ease !important;
}
.toolCard button:hover {
  background: #105f68 !important;
  color: #ffffff !important;
}

/* 5. Video Library Cards (Image 5) - Crisp high-contrast redesign */
.videoCard {
  background: #ffffff !important;
  border: 2px solid #105f68 !important;
  border-radius: 22px !important;
  box-shadow: 0 16px 40px rgba(16, 95, 104, 0.16) !important;
  overflow: hidden !important;
  transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
}
.videoCard:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 24px 55px rgba(16, 95, 104, 0.28) !important;
  border-color: #0d5962 !important;
}
.videoBody {
  padding: 22px !important;
  background: #ffffff !important;
}
.videoBody .tag {
  background: linear-gradient(135deg, #ffd875, #e7b84f) !important;
  color: #06383e !important;
  font-weight: 800 !important;
  padding: 6px 14px !important;
  border-radius: 12px !important;
  font-size: 11px !important;
  letter-spacing: 0.5px !important;
  display: inline-block !important;
}
.videoBody h3 {
  color: #0b3d43 !important;
  font-weight: 800 !important;
  font-size: 18px !important;
  line-height: 1.4 !important;
  margin: 12px 0 16px 0 !important;
  text-shadow: none !important;
}
.videoBody footer label {
  color: #105f68 !important;
  font-weight: 800 !important;
  font-size: 13px !important;
}
.videoBody footer button {
  background: #105f68 !important;
  color: #ffffff !important;
  font-weight: 800 !important;
  padding: 10px 18px !important;
  border-radius: 12px !important;
  border: none !important;
  box-shadow: 0 4px 12px rgba(16, 95, 104, 0.3) !important;
  transition: all 0.2s ease !important;
}
.videoBody footer button:hover {
  background: #0d5962 !important;
  transform: translateX(4px) !important;
}

/* --- K. COMPLETE OVERHAUL FOR LATEST 3 USER REQUESTS --- */

/* 1. Banner extra breathing space / margin */
.homeSlider {
  max-width: calc(100% - 140px) !important;
  margin: 40px auto 52px auto !important;
  border-radius: 36px !important;
  box-shadow: 0 30px 80px rgba(6, 56, 62, 0.45) !important;
}
@media (max-width: 900px) {
  .homeSlider {
    max-width: calc(100% - 40px) !important;
    margin: 24px auto 32px auto !important;
  }
}

/* 2. Cover Image Resize - Perfectly fit aspect ratio */
.managedMedia {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  aspect-ratio: 16 / 9 !important;
  height: auto !important;
  min-height: 180px !important;
  max-height: 250px !important;
  padding: 0 !important;
  border: none !important;
  border-bottom: 2px solid #105f68 !important;
  overflow: hidden !important;
  background: #0c626a !important;
}
.managedMedia img {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  object-fit: cover !important;
  object-position: center !important;
  transition: transform 0.45s ease, filter 0.45s ease !important;
}
.managedCard:hover .managedMedia img {
  transform: scale(1.08) !important;
  filter: saturate(1.1) !important;
}

/* 3. Notes & Awards Section redesign (Image 3) - Eliminating all blurry text and cards */
.notes, .awards {
  background: #f0f9f8 !important;
  border: 2px solid #bce2de !important;
  border-radius: 28px !important;
  padding: 34px !important;
  box-shadow: 0 20px 55px rgba(16, 95, 104, 0.12) !important;
  margin-bottom: 40px !important;
}
.notes label, .awards .title label {
  color: #105f68 !important;
  font-weight: 800 !important;
  letter-spacing: 1.5px !important;
  font-size: 13px !important;
}
.notes h2, .awards .title b {
  color: #0b3d43 !important;
  font-weight: 800 !important;
  font-size: 26px !important;
  text-shadow: none !important;
  background: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
  margin: 6px 0 !important;
  display: block !important;
}
.notes > div:first-child p, .awards .title p > span, .awards .title span {
  color: #2c6368 !important;
  font-weight: 600 !important;
  font-size: 15px !important;
}
.notes textarea, #note {
  background: #ffffff !important;
  border: 2px solid #105f68 !important;
  border-radius: 18px !important;
  padding: 18px !important;
  color: #0b3d43 !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  line-height: 1.6 !important;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.06), 0 8px 25px rgba(16, 95, 104, 0.1) !important;
  width: 100% !important;
  min-height: 140px !important;
  margin-top: 14px !important;
}
.notes textarea::placeholder, #note::placeholder {
  color: #5d8e92 !important;
  font-weight: 500 !important;
}
.notes footer {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-top: 16px !important;
}
.notes button, #save, .notes .primary {
  background: linear-gradient(135deg, #105f68, #18828e) !important;
  color: #ffffff !important;
  font-weight: 800 !important;
  padding: 12px 26px !important;
  border-radius: 14px !important;
  border: none !important;
  box-shadow: 0 6px 20px rgba(16, 95, 104, 0.3) !important;
  font-size: 14px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}
.notes button:hover, #save:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 28px rgba(16, 95, 104, 0.45) !important;
  background: #0d5962 !important;
}
.notes small, #noteStatus {
  color: #105f68 !important;
  font-weight: 700 !important;
  font-size: 13px !important;
}

/* Awards Grid & Cards */
.awards > div:last-child {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important;
  gap: 20px !important;
  margin-top: 24px !important;
}
.awards article {
  background: #ffffff !important;
  border: 2px solid #105f68 !important;
  border-radius: 22px !important;
  padding: 24px !important;
  box-shadow: 0 14px 35px rgba(16, 95, 104, 0.14) !important;
  display: flex !important;
  align-items: center !important;
  gap: 18px !important;
  transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
}
.awards article:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 24px 55px rgba(16, 95, 104, 0.26) !important;
  border-color: #0d5962 !important;
  background: #ffffff !important;
}
.awards article p {
  margin: 0 !important;
}
.awards article b {
  color: #0b3d43 !important;
  font-weight: 800 !important;
  font-size: 18px !important;
  display: block !important;
  margin-bottom: 4px !important;
  text-shadow: none !important;
}
.awards article small {
  color: #2c6368 !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  display: block !important;
}

/* ==========================================================================
   L. LUXURY ACCURACY UPGRADE FOR 6 LATEST USER REQUESTS
   ========================================================================== */

/* 1. Article Viewing Popup - High Contrast, Prominent & Easy to Read (Request 1) */
.articleModal, .contentViewer {
  background: rgba(6, 39, 42, 0.88) !important;
  backdrop-filter: blur(14px) !important;
  z-index: 500 !important;
}
.articleReader, .contentViewer > article {
  background: #ffffff !important;
  border: 2px solid #105f68 !important;
  border-radius: 28px !important;
  box-shadow: 0 35px 100px rgba(6, 39, 42, 0.6) !important;
  width: min(880px, 94vw) !important;
  max-height: 90vh !important;
  overflow-y: auto !important;
  position: relative !important;
}
.articleReader > img, .contentViewer img {
  height: 340px !important;
  width: 100% !important;
  object-fit: cover !important;
  border-bottom: 3px solid #105f68 !important;
  display: block !important;
}
.articleBody, #viewerContent {
  padding: 36px 44px !important;
}
.articleBody > span, #viewerCategory {
  background: #e0f2f0 !important;
  color: #105f68 !important;
  font-weight: 800 !important;
  font-size: 11px !important;
  padding: 6px 14px !important;
  border-radius: 20px !important;
  letter-spacing: 1.5px !important;
  display: inline-block !important;
  border: 1px solid #63c1bb !important;
  margin-bottom: 12px !important;
}
.articleBody h2, #viewerTitle {
  color: #06272a !important;
  font-size: 30px !important;
  font-weight: 800 !important;
  line-height: 1.35 !important;
  margin: 8px 0 16px 0 !important;
  letter-spacing: -0.5px !important;
}
.articleMeta, #viewerMeta {
  color: #52757a !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  padding-bottom: 20px !important;
  margin-bottom: 24px !important;
  border-bottom: 2px solid #e0f2f0 !important;
}
#articleContent, #viewerSummary {
  color: #1a4449 !important;
  font-size: 16px !important;
  line-height: 1.85 !important;
  font-weight: 500 !important;
}
#articleContent p, #viewerSummary p {
  margin-bottom: 18px !important;
}
#articleContent h3 {
  color: #0b3d43 !important;
  font-size: 21px !important;
  font-weight: 800 !important;
  margin: 32px 0 14px 0 !important;
  padding-left: 16px !important;
  border-left: 4px solid #105f68 !important;
}
.articleBody .primary, button[data-close-article], button[data-close-viewer] {
  background: linear-gradient(135deg, #105f68, #18828e) !important;
  color: #ffffff !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  padding: 14px 32px !important;
  border-radius: 16px !important;
  border: none !important;
  box-shadow: 0 8px 25px rgba(16, 95, 104, 0.3) !important;
  cursor: pointer !important;
  transition: all 0.25s ease !important;
  display: inline-block !important;
  margin-top: 20px !important;
}
.articleBody .primary:hover, button[data-close-article]:hover, button[data-close-viewer]:hover {
  background: linear-gradient(135deg, #e7b84f, #d99b26) !important;
  color: #06272a !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 12px 30px rgba(231, 184, 79, 0.45) !important;
}

/* 2. Notification Bell & Popup Panel - High Visibility & Crisp Styling (Request 2) */
#notificationButton, .notificationBtn {
  background: linear-gradient(135deg, #105f68, #18828e) !important;
  color: #ffffff !important;
  border: 2px solid #ffffff !important;
  box-shadow: 0 4px 15px rgba(16, 95, 104, 0.35) !important;
  border-radius: 14px !important;
  padding: 10px !important;
  position: relative !important;
  transition: all 0.2s ease !important;
}
#notificationButton:hover, .notificationBtn:hover {
  background: linear-gradient(135deg, #e7b84f, #d99b26) !important;
  color: #06272a !important;
  transform: scale(1.08) !important;
}
#notificationBadge {
  background: #d9383a !important;
  color: #ffffff !important;
  font-weight: 800 !important;
  font-size: 11px !important;
  padding: 2px 6px !important;
  border-radius: 10px !important;
  border: 2px solid #ffffff !important;
  position: absolute !important;
  top: -6px !important;
  right: -6px !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3) !important;
  font-style: normal !important;
}
#notificationPanel, .notificationPanel {
  background: #ffffff !important;
  border: 2px solid #105f68 !important;
  border-radius: 24px !important;
  box-shadow: 0 25px 80px rgba(6, 56, 62, 0.45) !important;
  width: min(400px, 92vw) !important;
  padding: 0 !important;
  overflow: hidden !important;
  z-index: 1000 !important;
}
#notificationPanel > div:first-child, .notificationPanel > div:first-child {
  background: linear-gradient(135deg, #105f68, #1a8894) !important;
  color: #ffffff !important;
  padding: 18px 22px !important;
  border-bottom: 2px solid #0d5962 !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
}
#notificationPanel > div:first-child b, .notificationPanel > div:first-child b {
  color: #ffffff !important;
  font-size: 16px !important;
  font-weight: 800 !important;
}
#markRead {
  background: rgba(0, 0, 0, 0.25) !important;
  color: #ffd875 !important;
  border: 1px solid rgba(255, 255, 255, 0.4) !important;
  border-radius: 8px !important;
  padding: 6px 12px !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  transition: all 0.2s !important;
  cursor: pointer !important;
}
#markRead:hover {
  background: #ffd875 !important;
  color: #06272a !important;
}
#notificationPanel article, .notificationPanel article {
  background: #ffffff !important;
  border-bottom: 1px solid #e0f2f0 !important;
  padding: 16px 20px !important;
  display: flex !important;
  align-items: flex-start !important;
  gap: 14px !important;
  transition: all 0.2s ease !important;
  cursor: pointer !important;
}
#notificationPanel article:last-child, .notificationPanel article:last-child {
  border-bottom: none !important;
}
#notificationPanel article:hover, .notificationPanel article:hover {
  background: #f0fbfa !important;
  padding-left: 24px !important;
  border-left: 4px solid #105f68 !important;
}
#notificationPanel article b, .notificationPanel article b {
  color: #0b3d43 !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  display: block !important;
  margin-bottom: 4px !important;
}
#notificationPanel article span, .notificationPanel article span {
  color: #2c6368 !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  line-height: 1.45 !important;
  margin: 0 !important;
  display: block !important;
}

/* 3 & 4. Prominent Modal Close Buttons & Responsive Shades (Requests 3 & 4) */
.loginClose, .registerClose, .memberClose, .articleClose, .forgotClose, .x, [data-close-login], [data-close-register] {
  position: absolute !important;
  right: 18px !important;
  top: 18px !important;
  width: 42px !important;
  height: 42px !important;
  border-radius: 50% !important;
  background: #f0f9f8 !important;
  color: #105f68 !important;
  border: 2px solid #105f68 !important;
  font-size: 24px !important;
  font-weight: 800 !important;
  display: grid !important;
  place-items: center !important;
  z-index: 9999 !important;
  cursor: pointer !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
  transition: all 0.2s ease !important;
}
.loginClose:hover, .registerClose:hover, .memberClose:hover, .articleClose:hover, .forgotClose:hover, .x:hover, [data-close-login]:hover, [data-close-register]:hover {
  background: #d9383a !important;
  color: #ffffff !important;
  border-color: #d9383a !important;
  transform: scale(1.15) rotate(90deg) !important;
  box-shadow: 0 6px 18px rgba(217, 56, 58, 0.45) !important;
}
.loginShade, .memberShade, .articleShade, .shade, .quizShade, .forgotShade, .modalShade {
  cursor: pointer !important;
}

/* 5. Crisp Solid Borders for Lessons and Cards (Request 5) */
.lesson {
  background: #ffffff !important;
  border: 2px solid #105f68 !important;
  border-radius: 16px !important;
  margin: 10px 16px !important;
  padding: 14px 18px !important;
  box-shadow: 0 6px 18px rgba(16, 95, 104, 0.12) !important;
  transition: all 0.25s ease !important;
}
.lesson:hover {
  background: #f0fbfa !important;
  border-color: #0d5962 !important;
  transform: translateX(6px) !important;
  box-shadow: 0 10px 25px rgba(16, 95, 104, 0.22) !important;
}
.module, .videoCard, .managedCard, .continueCard, .hubCard, .toolCard, .commentCard, .qaItem {
  border: 2px solid #105f68 !important;
  box-shadow: 0 10px 28px rgba(16, 95, 104, 0.12) !important;
}

/* 6. Perfect Equal Widths & Vertical Alignment Across All Sections (Request 6) */
.homeSlider,
.learnerHub,
.dashboard,
.published,
.learningTools,
.videos,
.notes,
.awards {
  width: calc(100% - 80px) !important;
  max-width: 1360px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
}
@media (max-width: 900px) {
  .homeSlider,
  .learnerHub,
  .dashboard,
  .published,
  .learningTools,
  .videos,
  .notes,
  .awards {
    width: calc(100% - 32px) !important;
  }
}
@media (max-width: 760px) {
  .articleBody, #viewerContent {
    padding: 24px !important;
  }
  .articleBody h2, #viewerTitle {
    font-size: 24px !important;
  }
  .loginClose, .registerClose, .memberClose, .articleClose, .forgotClose, .x {
    right: 12px !important;
    top: 12px !important;
    width: 36px !important;
    height: 36px !important;
    font-size: 20px !important;
  }
}

/* ==========================================================================
   SECTION M: CHECKPOINT 11 REFINEMENTS
   1. Banner height expanded slightly to fill empty space elegantly without losing balance (Request 2)
   2. Frosted glass notification bell & pulsing badge styling (Request 3)
   3. VIP Student Membership Pass styling for registration success & profile display (Request 4)
   ========================================================================== */

/* 1. Banner Height Expanded Further to Cover Empty Space (Request 2) */
.homeSlider {
  height: clamp(580px, 64vw, 780px) !important;
  margin: 24px auto 38px auto !important;
}
.homeSlide {
  background-size: cover !important;
  background-position: center !important;
}

/* 2. Frosted Glass Notification Bell & Pulsing Ruby Badge */
#notificationButton, .notificationBtn {
  background: rgba(255, 255, 255, 0.15) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.35) !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2) !important;
  backdrop-filter: blur(8px) !important;
}
#notificationButton:hover, .notificationBtn:hover {
  background: rgba(255, 255, 255, 0.28) !important;
  border-color: rgba(255, 255, 255, 0.6) !important;
  color: #ffd875 !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35) !important;
}
#notificationBadge {
  background: linear-gradient(135deg, #ef4444, #dc2626) !important;
  color: #ffffff !important;
  font-weight: 800 !important;
  font-size: 11px !important;
  padding: 2px 6px !important;
  border-radius: 12px !important;
  border: 2px solid #0d5962 !important;
  position: absolute !important;
  top: -6px !important;
  right: -6px !important;
  box-shadow: 0 2px 8px rgba(239, 68, 68, 0.6) !important;
  animation: badgePulse 2s infinite ease-in-out !important;
}
@keyframes badgePulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.15); box-shadow: 0 4px 12px rgba(239, 68, 68, 0.8) !important; }
}

/* 3. VIP Student Membership Pass (Request 4) */
.vipMemberPass {
  background: linear-gradient(135deg, #0d5962 0%, #08434a 50%, #052c30 100%) !important;
  border: 2px solid #63c1bb !important;
  border-radius: 24px !important;
  padding: 24px !important;
  margin: 22px auto !important;
  max-width: 580px !important;
  color: #ffffff !important;
  box-shadow: 0 20px 50px rgba(6, 56, 62, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
  text-align: left !important;
  position: relative !important;
  overflow: hidden !important;
}
.vipMemberPass::after {
  content: "👑" !important;
  position: absolute !important;
  right: -15px !important;
  top: -15px !important;
  font-size: 120px !important;
  opacity: 0.08 !important;
  pointer-events: none !important;
}
.vipPassHeader {
  display: flex !important;
  align-items: center !important;
  gap: 18px !important;
  padding-bottom: 18px !important;
  border-bottom: 1px solid rgba(158, 213, 209, 0.25) !important;
}
.vipAvatar {
  width: 68px !important;
  height: 68px !important;
  border-radius: 20px !important;
  background: linear-gradient(145deg, #e7b84f, #d99b26) !important;
  color: #06383e !important;
  font: 800 24px Georgia, serif !important;
  display: grid !important;
  place-items: center !important;
  border: 3px solid #ffffff !important;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4) !important;
  flex: 0 0 auto !important;
}
.vipTitle {
  flex: 1 !important;
}
.vipTitle small {
  font-size: 11px !important;
  letter-spacing: 1.5px !important;
  font-weight: 800 !important;
  color: #9ed5d1 !important;
  display: block !important;
}
.vipTitle h3 {
  font-size: 24px !important;
  color: #ffffff !important;
  margin: 4px 0 6px 0 !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
}
.vipStatusBadge {
  display: inline-block !important;
  background: rgba(99, 193, 187, 0.2) !important;
  border: 1px solid #63c1bb !important;
  color: #c8e6e2 !important;
  padding: 4px 10px !important;
  border-radius: 20px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
}
.vipPassBody {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 14px !important;
  padding: 18px 0 !important;
}
.vipField {
  background: rgba(0, 0, 0, 0.28) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-radius: 16px !important;
  padding: 14px !important;
}
.vipField small {
  font-size: 10px !important;
  letter-spacing: 1px !important;
  color: #9ed5d1 !important;
  display: block !important;
  margin-bottom: 6px !important;
  font-weight: 700 !important;
}
.vipField b {
  font-size: 14px !important;
  color: #ffd875 !important;
  display: block !important;
  font-weight: 800 !important;
  word-break: break-word !important;
}
.vipPassFooter {
  padding-top: 14px !important;
  border-top: 1px solid rgba(158, 213, 209, 0.25) !important;
  font-size: 13px !important;
  color: #c8e6e2 !important;
  text-align: center !important;
  font-weight: 500 !important;
}
@media (max-width: 650px) {
  .vipPassBody {
    grid-template-columns: 1fr !important;
  }
}

/* ==========================================================================
   N. REFINEMENTS FOR CHECKPOINT 14 (RED DOT, BANNER HEIGHT, SECTION MARGINS)
   ========================================================================== */

/* 1. Eliminate Top-Left Artifacts & Unwanted Red Dots (Request 1) */
.siteProgressVisual,
aside#side::before, aside#side::after,
.brand::before, .brand::after {
  display: none !important;
  content: none !important;
}

/* 2. Responsive Banner Height Adjustment (Request 2) */
@media (max-width: 760px) {
  .homeSlider {
    height: 580px !important;
    margin-bottom: 34px !important;
  }
}

/* 3. Consistent Spacing Between Dashboard and Published Sections (Request 3) */
.homeSlider,
.learnerHub,
.dashboard,
.published,
.learningTools,
.videos,
.notes,
.awards {
  margin-bottom: 48px !important;
}
.dashboard {
  padding-bottom: 14px !important;
}
.curriculum, .now {
  margin-bottom: 24px !important;
}
@media (max-width: 900px) {
  .homeSlider,
  .learnerHub,
  .dashboard,
  .published,
  .learningTools,
  .videos,
  .notes,
  .awards {
    margin-bottom: 38px !important;
  }
}

/* ==========================================================================
   SECTION O: ADVANCED ADMIN DASHBOARD REDESIGN & AVATAR UPLOAD (Request 1 & 3)
   ========================================================================== */

/* 1. Avatar Hover & Upload Tooltip in Left Sidebar */
aside#side .avatar {
  position: relative !important;
  cursor: pointer !important;
  overflow: hidden !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease !important;
}
aside#side .avatar:hover {
  transform: scale(1.08) !important;
  box-shadow: 0 4px 14px rgba(99, 193, 187, 0.4) !important;
}
aside#side .avatar::after {
  content: "📷";
  position: absolute;
  inset: 0;
  background: rgba(13, 89, 98, 0.75);
  color: #fff;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
  backdrop-filter: blur(2px);
}
aside#side .avatar:hover::after {
  opacity: 1;
}

/* 2. Total Redesign of Admin Page (.adminPage) */
body.adminPage {
  background: linear-gradient(135deg, #f0f7f6 0%, #e6f2f0 100%) !important;
  color: #12373b !important;
  font-family: 'Be Vietnam Pro', sans-serif !important;
  min-height: 100vh !important;
}

/* 3. Sleek Premium Sidebar (.adminSide) */
.adminSide {
  background: linear-gradient(180deg, #07353b 0%, #0d5962 55%, #052c30 100%) !important;
  box-shadow: 4px 0 24px rgba(7, 53, 59, 0.25) !important;
  border-right: 1px solid rgba(255, 255, 255, 0.08) !important;
  padding: 28px 20px !important;
  z-index: 100 !important;
}
.adminSide .brand b {
  font-size: 16px !important;
  letter-spacing: 0.5px !important;
  color: #ffffff !important;
}
.adminSide .brand small {
  font-size: 10px !important;
  color: #63c1bb !important;
  letter-spacing: 1.5px !important;
  font-weight: 700 !important;
  margin-top: 3px !important;
}
.adminSide nav {
  gap: 8px !important;
  margin-top: 24px !important;
}
.adminSide nav button {
  padding: 14px 16px !important;
  border-radius: 14px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #c4ebe7 !important;
  transition: all 0.25s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
  border: 1px solid transparent !important;
}
.adminSide nav button:hover {
  background: rgba(99, 193, 187, 0.18) !important;
  color: #ffffff !important;
  transform: translateX(4px) !important;
}
.adminSide nav button.active {
  background: linear-gradient(135deg, #106f7a, #0d5962) !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2) !important;
  border: 1px solid rgba(99, 193, 187, 0.35) !important;
}

/* 4. Admin Main Content Area & Header */
.adminMain {
  padding: 36px 42px !important;
  max-width: 1600px !important;
}
.adminMain > header {
  margin-bottom: 32px !important;
  align-items: center !important;
}
.adminMain > header span {
  font-size: 11px !important;
  font-weight: 800 !important;
  color: #3a9295 !important;
  letter-spacing: 2px !important;
}
.adminMain > header h1 {
  font-size: 32px !important;
  font-weight: 800 !important;
  color: #0d5962 !important;
  margin-top: 6px !important;
  letter-spacing: -0.5px !important;
}
#newContent {
  background: linear-gradient(135deg, #0d5962, #07353b) !important;
  color: #ffffff !important;
  border: 1px solid #63c1bb !important;
  border-radius: 14px !important;
  padding: 14px 26px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  box-shadow: 0 10px 25px rgba(13, 89, 98, 0.25) !important;
  transition: all 0.25s ease !important;
}
#newContent:hover {
  transform: translateY(-3px) scale(1.03) !important;
  box-shadow: 0 16px 32px rgba(13, 89, 98, 0.35) !important;
  background: linear-gradient(135deg, #106f7a, #0d5962) !important;
}

/* 5. Modern Stat Cards (.adminStats) */
.adminStats {
  gap: 20px !important;
  margin: 32px 0 38px !important;
}
.adminStats article {
  background: #ffffff !important;
  border: 1px solid rgba(16, 95, 104, 0.15) !important;
  border-radius: 20px !important;
  padding: 24px 22px !important;
  box-shadow: 0 10px 30px rgba(16, 95, 104, 0.07) !important;
  display: flex !important;
  align-items: center !important;
  gap: 18px !important;
  transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
  position: relative !important;
  overflow: hidden !important;
}
.adminStats article:hover {
  transform: translateY(-6px) scale(1.02) !important;
  box-shadow: 0 20px 45px rgba(16, 95, 104, 0.16) !important;
  border-color: #63c1bb !important;
}
.adminStats article::before {
  content: "";
  position: absolute;
  top: -30px; right: -30px; width: 110px; height: 110px;
  background: radial-gradient(circle, rgba(99, 193, 187, 0.18) 0%, transparent 70%);
  pointer-events: none;
}
.adminStats article > span {
  width: 56px !important;
  height: 56px !important;
  border-radius: 16px !important;
  display: grid !important;
  place-items: center !important;
  font-size: 24px !important;
  background: linear-gradient(135deg, #e4f6f4, #c8e6e2) !important;
  color: #0d5962 !important;
  box-shadow: 0 8px 18px rgba(16, 95, 104, 0.12) !important;
  flex: 0 0 auto !important;
}
.adminStats small {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #12373b !important;
  margin-bottom: 4px !important;
}
.adminStats b {
  font-size: 28px !important;
  font-weight: 800 !important;
  color: #0d5962 !important;
  line-height: 1.1 !important;
}
.adminStats em {
  font-size: 11px !important;
  color: #3a9295 !important;
  font-weight: 600 !important;
  margin-top: 4px !important;
}

/* 6. High-Contrast Workspaces & Tables */
.adminWorkspace, .questionWorkspace, .memberWorkspace {
  background: #ffffff !important;
  border: 1px solid rgba(16, 95, 104, 0.15) !important;
  border-radius: 24px !important;
  padding: 30px !important;
  box-shadow: 0 16px 40px rgba(16, 95, 104, 0.07) !important;
  margin-bottom: 34px !important;
  transition: box-shadow 0.3s ease !important;
}
.adminWorkspace:hover, .questionWorkspace:hover, .memberWorkspace:hover {
  box-shadow: 0 20px 50px rgba(16, 95, 104, 0.11) !important;
}
.adminTitle {
  margin-bottom: 24px !important;
  padding-bottom: 18px !important;
  border-bottom: 2px solid rgba(16, 95, 104, 0.08) !important;
}
.adminTitle span {
  font-size: 11px !important;
  font-weight: 800 !important;
  color: #3a9295 !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
}
.adminTitle h2 {
  font-size: 24px !important;
  font-weight: 800 !important;
  color: #12373b !important;
  margin-top: 6px !important;
}
.adminTitle input, #memberSearch, #adminSearch {
  border: 1.5px solid rgba(16, 95, 104, 0.25) !important;
  border-radius: 12px !important;
  padding: 12px 18px !important;
  font-size: 13px !important;
  background: #f8fcfb !important;
  color: #12373b !important;
  transition: all 0.25s !important;
  width: 280px !important;
}
.adminTitle input:focus, #memberSearch:focus, #adminSearch:focus {
  border-color: #0d5962 !important;
  background: #ffffff !important;
  box-shadow: 0 0 0 4px rgba(99, 193, 187, 0.25) !important;
  outline: none !important;
}
.adminHead, .memberHead {
  background: linear-gradient(90deg, #e4f4f2, #edf7f6) !important;
  color: #0d5962 !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  padding: 16px !important;
  border-radius: 12px !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
  border: none !important;
}
.adminRow, .memberRow {
  font-size: 13px !important;
  padding: 18px 16px !important;
  border-bottom: 1px solid rgba(16, 95, 104, 0.1) !important;
  transition: all 0.2s ease !important;
  color: #12373b !important;
  align-items: center !important;
}
.adminRow:hover, .memberRow:hover {
  background: #f4fcfa !important;
  transform: scale(1.005) !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 16px rgba(16, 95, 104, 0.06) !important;
}
.adminRow b, .memberRow b {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #0d5962 !important;
}
.adminRow small, .memberRow small {
  font-size: 11px !important;
  color: #647b7e !important;
  margin-top: 4px !important;
}
.adminRow em.published {
  background: linear-gradient(135deg, #d3f3e3, #b8eae1) !important;
  color: #0d5962 !important;
  font-weight: 800 !important;
  font-size: 11px !important;
  padding: 6px 14px !important;
  border-radius: 20px !important;
  display: inline-block !important;
  box-shadow: 0 2px 6px rgba(13, 89, 98, 0.12) !important;
}
.adminRow em.draft {
  background: #e9f0f0 !important;
  color: #556869 !important;
  font-weight: 700 !important;
  font-size: 11px !important;
  padding: 6px 14px !important;
  border-radius: 20px !important;
  display: inline-block !important;
}
.adminRow button, .memberRow button, #exportMembers {
  font-family: 'Be Vietnam Pro', sans-serif !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: all 0.25s !important;
}
.adminRow button, .memberRow button {
  border: 1.5px solid rgba(16, 95, 104, 0.25) !important;
  background: #ffffff !important;
  color: #0d5962 !important;
  border-radius: 8px !important;
  padding: 8px 14px !important;
  font-size: 12px !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.03) !important;
}
.adminRow button:hover, .memberRow button:hover {
  background: #0d5962 !important;
  color: #ffffff !important;
  border-color: #0d5962 !important;
  box-shadow: 0 6px 14px rgba(13, 89, 98, 0.2) !important;
  transform: translateY(-2px) !important;
}
.adminRow button.danger:hover {
  background: #ef4444 !important;
  border-color: #ef4444 !important;
  color: #ffffff !important;
  box-shadow: 0 6px 14px rgba(239, 68, 68, 0.25) !important;
}
#exportMembers {
  background: linear-gradient(135deg, #0d5962, #08434a) !important;
  color: #ffffff !important;
  border: 1px solid #63c1bb !important;
  border-radius: 12px !important;
  padding: 12px 22px !important;
  font-size: 13px !important;
  box-shadow: 0 8px 20px rgba(13, 89, 98, 0.2) !important;
}
#exportMembers:hover {
  transform: translateY(-2px) scale(1.02) !important;
  box-shadow: 0 12px 28px rgba(13, 89, 98, 0.3) !important;
  background: linear-gradient(135deg, #106f7a, #0d5962) !important;
}

/* 7. Member Metrics & Q&A Cards */
.memberMetrics span {
  background: #ffffff !important;
  border: 1px solid rgba(16, 95, 104, 0.15) !important;
  border-radius: 16px !important;
  padding: 18px !important;
  box-shadow: 0 6px 18px rgba(16, 95, 104, 0.05) !important;
  transition: all 0.25s ease !important;
}
.memberMetrics span:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 12px 26px rgba(16, 95, 104, 0.12) !important;
  border-color: #63c1bb !important;
}
.memberMetrics b {
  font-size: 26px !important;
  font-weight: 800 !important;
  color: #0d5962 !important;
}
.memberMetrics small {
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #647b7e !important;
}
.adminQuestion {
  padding: 18px !important;
  border-top: 1px solid rgba(16, 95, 104, 0.1) !important;
  transition: background 0.2s ease !important;
}
.adminQuestion:hover {
  background: #f4fcfa !important;
  border-radius: 12px !important;
}
.adminQuestion h3 {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #0d5962 !important;
}
.adminQuestion p {
  font-size: 13px !important;
  color: #12373b !important;
  margin: 8px 0 !important;
  line-height: 1.5 !important;
}

/* 8. Content Editor Modal */
#contentForm {
  border: 1px solid rgba(16, 95, 104, 0.2) !important;
  box-shadow: 0 25px 60px rgba(6, 39, 42, 0.35) !important;
  border-radius: 24px !important;
  padding: 34px !important;
}
#contentForm h2 {
  font-size: 24px !important;
  color: #0d5962 !important;
  font-weight: 800 !important;
}
#contentForm label {
  font-size: 12px !important;
  color: #12373b !important;
  margin-top: 16px !important;
}
#contentForm input, #contentForm select, #contentForm textarea {
  border: 1.5px solid rgba(16, 95, 104, 0.25) !important;
  border-radius: 10px !important;
  padding: 12px 14px !important;
  font-size: 13px !important;
  transition: border-color 0.2s !important;
}
#contentForm input:focus, #contentForm select:focus, #contentForm textarea:focus {
  border-color: #0d5962 !important;
  box-shadow: 0 0 0 4px rgba(99, 193, 187, 0.2) !important;
  outline: none !important;
}

@media (max-width: 900px) {
  .adminMain {
    padding: 24px 18px !important;
  }
}

/* ==========================================================================
   SECTION P: CHECKPOINT 16 REFINEMENTS (Request 1 to 5)
   ========================================================================== */

/* 1. Expand width horizontally to cover empty space, revert height to original (Request 1) */
.homeSlider, .learnerHub, .dashboard, .published, .learningTools, .videos, .notes, .awards {
  width: calc(100% - 36px) !important;
  max-width: 1560px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
.homeSlider {
  height: clamp(480px, 52vw, 650px) !important;
  margin: 24px auto 36px auto !important;
}
@media (max-width: 1050px) {
  .homeSlider, .learnerHub, .dashboard, .published, .learningTools, .videos, .notes, .awards {
    width: calc(100% - 24px) !important;
  }
}
@media (max-width: 760px) {
  .homeSlider {
    height: 530px !important;
    width: calc(100% - 18px) !important;
  }
}

/* 2. Enlarge banner text for stronger readability and emphasis (Request 2) */
.slideContent h1 {
  font-size: 46px !important;
  line-height: 1.15 !important;
  margin: 16px 0 !important;
  font-weight: 800 !important;
}
.slideContent > p {
  font-size: 17px !important;
  line-height: 1.65 !important;
  color: #f0faf9 !important;
}
@media (max-width: 1050px) {
  .slideContent h1 { font-size: 38px !important; }
  .slideContent > p { font-size: 15px !important; }
}
@media (max-width: 600px) {
  .slideContent h1 { font-size: 28px !important; }
  .slideContent > p { font-size: 14px !important; }
}

/* 3. Featured Course (.courseCover) frame adjustment & image resize (Request 3) */
.courseCover {
  grid-template-columns: 320px 1fr 240px !important;
  gap: 28px !important;
  padding: 24px !important;
  align-items: center !important;
}
.courseImage {
  width: 100% !important;
  min-height: 190px !important;
  height: 190px !important;
  background-size: cover !important;
  background-position: center !important;
  border-radius: 16px !important;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.28) !important;
}
@media (max-width: 1150px) {
  .courseCover {
    grid-template-columns: 260px 1fr !important;
  }
  .courseAction {
    grid-column: 1 / -1 !important;
  }
}
@media (max-width: 760px) {
  .courseCover {
    grid-template-columns: 1fr !important;
  }
  .courseImage {
    height: 210px !important;
    min-height: 210px !important;
  }
}

/* 4. Fix dark text on dark header in Admin Dashboard (.adminMain header) (Request 4) */
.adminMain > header {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-bottom: none !important;
  box-shadow: none !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 0 !important;
  margin-bottom: 32px !important;
}
.adminMain > header span {
  font-size: 12px !important;
  font-weight: 800 !important;
  color: #3a9295 !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
}
.adminMain > header h1 {
  font-size: 34px !important;
  font-weight: 800 !important;
  color: #0d5962 !important;
  margin-top: 6px !important;
  letter-spacing: -0.5px !important;
  text-shadow: none !important;
}

/* 5. Eliminate blurry/washed out cards & text across Admin & Hub (Request 4 & 5) */
.adminWorkspace, .questionWorkspace, .memberWorkspace, .adminStats article,
.hubCard, .continueCard, .videoCard, .managedCard, .toolCard, .awards article, .commentCard, .plan, .offerCard {
  background: #ffffff !important;
  border: 2px solid #8ccac4 !important;
  box-shadow: 0 12px 35px rgba(13, 89, 98, 0.12), 0 2px 8px rgba(13, 89, 98, 0.05) !important;
}
.adminWorkspace:hover, .questionWorkspace:hover, .memberWorkspace:hover, .adminStats article:hover,
.hubCard:hover, .continueCard:hover, .videoCard:hover, .managedCard:hover, .toolCard:hover, .awards article:hover {
  border-color: #0d5962 !important;
  box-shadow: 0 20px 50px rgba(13, 89, 98, 0.2) !important;
}

/* Ensure all card typography and headings are sharp and high contrast */
.adminWorkspace *, .questionWorkspace *, .memberWorkspace *,
.hubCard *, .continueCard *, .videoCard *, .managedCard * {
  text-shadow: none !important;
}
.adminWorkspace p, .questionWorkspace p, .memberWorkspace p,
.hubCard p, .continueCard p, .videoCard p, .managedCard p,
.adminRow small, .memberRow small, .adminQuestion p {
  color: #12373b !important;
  font-weight: 500 !important;
}
.adminTitle h2, .adminRow b, .memberRow b, .adminQuestion h3,
.hubCard h3, .continueCard h3, .videoCard h3, .managedCard h3 {
  color: #07353b !important;
  font-weight: 800 !important;
}

/* High contrast table headers & rows for Admin Dashboard */
.adminHead, .memberHead {
  background: linear-gradient(90deg, #0d5962, #106f7a) !important;
  color: #ffffff !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  padding: 18px 20px !important;
  border-radius: 14px !important;
  letter-spacing: 0.8px !important;
  text-transform: uppercase !important;
  box-shadow: 0 6px 16px rgba(13, 89, 98, 0.2) !important;
}
.adminRow, .memberRow {
  font-size: 14px !important;
  padding: 20px 18px !important;
  border-bottom: 1px solid #d0ebe8 !important;
  color: #07353b !important;
  font-weight: 600 !important;
}
.adminRow:hover, .memberRow:hover {
  background: #eaf8f6 !important;
  border-color: #63c1bb !important;
}
.adminQuestion {
  padding: 22px !important;
  border: 1.5px solid #d0ebe8 !important;
  border-radius: 16px !important;
  margin-bottom: 14px !important;
  background: #fdfefd !important;
  box-shadow: 0 4px 14px rgba(7, 53, 59, 0.04) !important;
}
.adminQuestion:hover {
  background: #f0faf8 !important;
  border-color: #63c1bb !important;
  transform: translateX(4px) !important;
}

/* ==========================================================================
   SECTION Q: CHECKPOINT 18 REFINEMENTS (Items 1 to 4)
   ========================================================================== */

/* ITEM 2: Nổi bật số thứ tự chương học (.chapterLabel) */
.module .chapterLabel {
  width: 58px !important;
  min-height: 58px !important;
  border-radius: 16px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  font-weight: 900 !important;
  font-size: 13px !important;
  letter-spacing: 0.5px !important;
  box-shadow: 0 8px 22px rgba(16, 95, 104, 0.2), inset 0 2px 0 rgba(255, 255, 255, 0.8) !important;
  border: 2px solid rgba(255, 255, 255, 0.85) !important;
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15) !important;
}
.module:nth-child(3n+1) .chapterLabel {
  background: linear-gradient(135deg, #106f7a 0%, #063d43 100%) !important;
  color: #ffffff !important;
  border-color: #5aa9c9 !important;
  box-shadow: 0 8px 20px rgba(16, 111, 122, 0.35), inset 0 2px 0 rgba(255, 255, 255, 0.4) !important;
}
.module:nth-child(3n+2) .chapterLabel {
  background: linear-gradient(135deg, #8776c9 0%, #5b47a8 100%) !important;
  color: #ffffff !important;
  border-color: #c3a7ee !important;
  box-shadow: 0 8px 20px rgba(135, 118, 201, 0.35), inset 0 2px 0 rgba(255, 255, 255, 0.4) !important;
}
.module:nth-child(3n) .chapterLabel {
  background: linear-gradient(135deg, #ef846f 0%, #d65539 100%) !important;
  color: #ffffff !important;
  border-color: #f7b3a6 !important;
  box-shadow: 0 8px 20px rgba(239, 132, 111, 0.35), inset 0 2px 0 rgba(255, 255, 255, 0.4) !important;
}
.module:hover .chapterLabel {
  transform: scale(1.08) translateY(-2px) !important;
}

/* ITEM 3: Icon Play giữa khung ảnh, thiết kế nổi bật & hiện đại */
.managedMedia .playOverlay, .videoCard .play, .play-badge span, .videoCard .thumb .play {
  position: absolute !important;
  inset: auto !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 60px !important;
  height: 60px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, rgba(239, 132, 111, 0.96), rgba(225, 95, 68, 0.96)) !important;
  color: #ffffff !important;
  font-size: 22px !important;
  border: 3px solid rgba(255, 255, 255, 0.95) !important;
  box-shadow: 0 10px 28px rgba(239, 132, 111, 0.55), 0 0 0 8px rgba(239, 132, 111, 0.2) !important;
  display: grid !important;
  place-items: center !important;
  padding-left: 4px !important;
  transition: all 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
  z-index: 10 !important;
}
.managedMedia:hover .playOverlay, .videoCard:hover .play, .thumb-box:hover .play-badge span, .thumb:hover .play {
  transform: translate(-50%, -50%) scale(1.18) !important;
  background: linear-gradient(135deg, #e7b84f, #ef846f) !important;
  color: #07353b !important;
  border-color: #ffffff !important;
  box-shadow: 0 14px 34px rgba(231, 184, 79, 0.65), 0 0 0 12px rgba(231, 184, 79, 0.28) !important;
}

/* ITEM 4: Thêm màu sắc sống động ở icon và chữ (Công cụ học tập & các thẻ card) */
#toolGrid .toolCard:nth-child(1) i, #toolGrid .toolCard:nth-child(1) .toolIcon {
  background: linear-gradient(135deg, #ef846f 0%, #e15f44 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 6px 18px rgba(239, 132, 111, 0.35) !important;
}
#toolGrid .toolCard:nth-child(1) span.tag { color: #d65539 !important; font-weight: 800 !important; background: #fff3f0 !important; padding: 4px 10px !important; border-radius: 6px !important; }
#toolGrid .toolCard:nth-child(1) h3 { color: #9f3620 !important; font-weight: 800 !important; }
#toolGrid .toolCard:nth-child(1):hover { border-color: #ef846f !important; background: #fffaf9 !important; transform: translateY(-4px) !important; }
#toolGrid .toolCard:nth-child(1) button { color: #d65539 !important; font-weight: 800 !important; }
#toolGrid .toolCard:nth-child(1):hover button { background: #ef846f !important; color: #fff !important; padding: 8px 14px !important; border-radius: 8px !important; }

#toolGrid .toolCard:nth-child(2) i, #toolGrid .toolCard:nth-child(2) .toolIcon {
  background: linear-gradient(135deg, #e7b84f 0%, #d49a1c 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 6px 18px rgba(231, 184, 79, 0.35) !important;
}
#toolGrid .toolCard:nth-child(2) span.tag { color: #c2880c !important; font-weight: 800 !important; background: #fffaf0 !important; padding: 4px 10px !important; border-radius: 6px !important; }
#toolGrid .toolCard:nth-child(2) h3 { color: #825a04 !important; font-weight: 800 !important; }
#toolGrid .toolCard:nth-child(2):hover { border-color: #e7b84f !important; background: #fffcf5 !important; transform: translateY(-4px) !important; }
#toolGrid .toolCard:nth-child(2) button { color: #c2880c !important; font-weight: 800 !important; }
#toolGrid .toolCard:nth-child(2):hover button { background: #e7b84f !important; color: #07353b !important; padding: 8px 14px !important; border-radius: 8px !important; font-weight: 900 !important; }

#toolGrid .toolCard:nth-child(3) i, #toolGrid .toolCard:nth-child(3) .toolIcon {
  background: linear-gradient(135deg, #38bdf8 0%, #0284c7 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 6px 18px rgba(56, 189, 248, 0.35) !important;
}
#toolGrid .toolCard:nth-child(3) span.tag { color: #0284c7 !important; font-weight: 800 !important; background: #f0f9ff !important; padding: 4px 10px !important; border-radius: 6px !important; }
#toolGrid .toolCard:nth-child(3) h3 { color: #035b88 !important; font-weight: 800 !important; }
#toolGrid .toolCard:nth-child(3):hover { border-color: #38bdf8 !important; background: #f3fafc !important; transform: translateY(-4px) !important; }
#toolGrid .toolCard:nth-child(3) button { color: #0284c7 !important; font-weight: 800 !important; }
#toolGrid .toolCard:nth-child(3):hover button { background: #0284c7 !important; color: #fff !important; padding: 8px 14px !important; border-radius: 8px !important; }

#toolGrid .toolCard:nth-child(4) i, #toolGrid .toolCard:nth-child(4) .toolIcon {
  background: linear-gradient(135deg, #a78bfa 0%, #7c3aed 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 6px 18px rgba(167, 139, 250, 0.35) !important;
}
#toolGrid .toolCard:nth-child(4) span.tag { color: #7c3aed !important; font-weight: 800 !important; background: #f5f3ff !important; padding: 4px 10px !important; border-radius: 6px !important; }
#toolGrid .toolCard:nth-child(4) h3 { color: #5521b5 !important; font-weight: 800 !important; }
#toolGrid .toolCard:nth-child(4):hover { border-color: #a78bfa !important; background: #f9f7ff !important; transform: translateY(-4px) !important; }
#toolGrid .toolCard:nth-child(4) button { color: #7c3aed !important; font-weight: 800 !important; }
#toolGrid .toolCard:nth-child(4):hover button { background: #7c3aed !important; color: #fff !important; padding: 8px 14px !important; border-radius: 8px !important; }

/* ==========================================================================
   SECTION R: COMPLETE IOS & ANDROID MOBILE OPTIMIZATION (CHECKPOINT 19)
   ========================================================================== */

/* REQUEST 1: Chấm đỏ thông báo không hiển thị số, thiết kế chuẩn IOS/Android */
.notificationBtn i, #notificationBadge, .bell i, .topbar .bell i {
  position: absolute !important;
  right: 6px !important;
  top: 6px !important;
  width: 10px !important;
  height: 10px !important;
  min-width: 0 !important;
  min-height: 0 !important;
  border-radius: 50% !important;
  background: #ef846f !important;
  color: transparent !important;
  font-size: 0 !important;
  line-height: 0 !important;
  padding: 0 !important;
  border: 2px solid #ffffff !important;
  box-shadow: 0 0 0 2px rgba(239, 132, 111, 0.35) !important;
  display: block !important;
  overflow: hidden !important;
  text-indent: -9999px !important;
}

/* REQUEST 4: Tối ưu toàn bộ giao diện cho điện thoại Android & IOS (< 768px) */
@media (max-width: 768px) {
  html, body {
    overflow-x: hidden !important;
    width: 100% !important;
    -webkit-tap-highlight-color: transparent !important;
    -webkit-overflow-scrolling: touch !important;
  }
  .app {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
  }
  main, .adminMain {
    width: 100% !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
    padding-bottom: 80px !important;
  }

  /* Header & Top Navigation Bar */
  header, .topbar {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    padding: 10px 14px !important;
    min-height: auto !important;
  }
  header #menu, .topbar #menu {
    display: grid !important;
    place-items: center !important;
    width: 42px !important;
    height: 42px !important;
    border-radius: 12px !important;
  }
  .tabs {
    order: 3 !important;
    width: 100% !important;
    display: flex !important;
    gap: 6px !important;
    margin-top: 4px !important;
  }
  .tab {
    flex: 1 !important;
    min-height: 44px !important;
    padding: 6px 10px !important;
    justify-content: center !important;
  }
  .tab span {
    font-size: 11px !important;
    line-height: 1.2 !important;
  }
  .search {
    order: 4 !important;
    width: 100% !important;
    margin: 4px 0 !important;
  }
  .search input {
    width: 100% !important;
    height: 44px !important;
    font-size: 14px !important;
  }

  /* Banner Slider */
  .homeSlider {
    height: auto !important;
    min-height: 420px !important;
    margin: 14px 12px !important;
    border-radius: 20px !important;
  }
  .slideContent {
    width: 100% !important;
    max-width: 100% !important;
    padding: 24px 18px !important;
  }
  .slideContent h1 {
    font-size: 24px !important;
    line-height: 1.3 !important;
    letter-spacing: -0.5px !important;
  }
  .slideContent p {
    font-size: 13px !important;
    line-height: 1.5 !important;
  }

  /* Grids & Cards */
  .curriculum, .videos, .notes, .awards, .learningTools, .learnerHub {
    padding: 16px 12px !important;
    margin: 0 10px 20px !important;
    border-radius: 18px !important;
  }
  .toolGrid, .videoGrid, .notesGrid, .statGrid, .adminGrid, .grid-3, .grid-4 {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .courseCover {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    padding: 14px !important;
  }
  .courseImage {
    width: 100% !important;
    height: 180px !important;
  }
  .module {
    padding: 14px 12px !important;
    gap: 10px !important;
  }
  .module .chapterLabel {
    width: 48px !important;
    min-height: 48px !important;
    font-size: 11px !important;
    border-radius: 12px !important;
  }

  /* Modals */
  .modal, .articleModal, .contentViewer, .loginModal, .registerModal, .memberModal, .quizModal, .certificateModal, .contentEditor {
    padding: 10px !important;
  }
  .modal>div, .articleModal>div, .loginCard, .registerCard, .memberCard, .quizCard, .certificate, .editorCard {
    width: 100% !important;
    max-width: 96vw !important;
    max-height: 90vh !important;
    overflow-y: auto !important;
    padding: 20px 16px !important;
    border-radius: 20px !important;
  }
  .notificationPanel {
    position: fixed !important;
    top: 70px !important;
    left: 12px !important;
    right: 12px !important;
    width: auto !important;
    max-width: none !important;
    border-radius: 16px !important;
  }

  /* Admin Table for Mobile */
  .adminTable {
    display: block !important;
    width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  .adminRow {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    padding: 12px !important;
    border-bottom: 1px solid #e2f0ef !important;
  }
  .adminHead {
    display: none !important;
  }
  .adminRow > div, .adminRow > span {
    width: 100% !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    font-size: 13px !important;
  }
  .rowActions {
    justify-content: flex-end !important;
    margin-top: 6px !important;
  }
}

/* SMALL MOBILE PHONES (< 430px) */
@media (max-width: 430px) {
  header, .topbar { padding: 8px 10px !important; }
  .slideContent h1 { font-size: 22px !important; }
  .toolCard { padding: 14px !important; }
  .module h4 { font-size: 14px !important; }
}

/* ==========================================================================
   SECTION S: CHECKPOINT 20 ULTRA-PREMIUM MOBILE AND ADMIN OPTIMIZATION
   ========================================================================== */

/* ITEMS 1 & 2: Khắc phục chữ mờ trong Admin, tăng độ tương phản và nổi bật với icon sinh động */
.adminStats article, .memberMetrics span {
  background: #ffffff !important;
  border: 1.5px solid #cbe5e2 !important;
  box-shadow: 0 10px 25px rgba(16, 95, 104, 0.08) !important;
  padding: 16px 20px !important;
  border-radius: 18px !important;
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease !important;
}
.adminStats article:hover, .memberMetrics span:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 14px 32px rgba(16, 95, 104, 0.15) !important;
  border-color: #106f7a !important;
}
.adminStats article b, .memberMetrics b {
  color: #07353b !important;
  font-weight: 900 !important;
  font-size: 28px !important;
  line-height: 1.1 !important;
  display: block !important;
}
.adminStats article small, .memberMetrics small {
  color: #0d5962 !important;
  font-weight: 800 !important;
  font-size: 13px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  display: block !important;
  margin-bottom: 2px !important;
}
.adminStats article em {
  color: #4a777a !important;
  font-style: normal !important;
  font-weight: 600 !important;
  font-size: 12px !important;
}
.adminTable .adminRow {
  color: #07353b !important;
  font-weight: 600 !important;
}
.adminTable .adminRow small {
  color: #38686d !important;
  font-weight: 500 !important;
}

/* ITEM 5: Tối ưu hình ảnh & bố cục trên điện thoại IOS/Android chuyên nghiệp hơn */
@media (max-width: 768px) {
  .homeSlider {
    min-height: 380px !important;
    margin: 12px 10px !important;
    border-radius: 18px !important;
    overflow: hidden !important;
  }
  .homeSlide {
    background-size: cover !important;
    background-position: center top !important;
  }
  .courseImage, .thumb, .customAvatarImg, #articleImage {
    object-fit: cover !important;
    border-radius: 14px !important;
    width: 100% !important;
  }
  .courseImage {
    height: 190px !important;
  }
  .videoCard .thumb {
    height: 170px !important;
  }
  /* Bố cục giỏ học, thẻ card trên điện thoại */
  .curriculum, .videos, .notes, .awards, .learningTools, .learnerHub {
    padding: 18px 14px !important;
    margin: 0 8px 20px !important;
    border-radius: 20px !important;
    box-shadow: 0 8px 24px rgba(16, 95, 104, 0.06) !important;
  }
  .module {
    padding: 16px 14px !important;
    border-radius: 16px !important;
    gap: 12px !important;
  }
  .module h4 {
    font-size: 15px !important;
    font-weight: 800 !important;
    color: #07353b !important;
  }
  /* Bố cục Quản Trị Viên (Admin) trên điện thoại iOS/Android */
  .adminStats {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .adminStats article {
    padding: 18px 16px !important;
  }
  .memberMetrics {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
  }
  .memberMetrics span {
    width: 100% !important;
    padding: 16px !important;
  }
  /* Thẻ bảng điều khiển mượt mà trên di động */
  .adminTable .adminRow {
    padding: 14px 12px !important;
    border-radius: 14px !important;
    margin-bottom: 10px !important;
    background: #fdfefd !important;
    border: 1px solid #dceceb !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.03) !important;
  }
  .adminTable .adminRow > div {
    margin-bottom: 6px !important;
  }
  .adminTable .adminRow b {
    font-size: 15px !important;
    color: #07353b !important;
  }
  .rowActions button {
    padding: 8px 16px !important;
    font-size: 13px !important;
    border-radius: 8px !important;
  }
}
@media (max-width: 430px) {
  header, .topbar {
    padding: 8px !important;
  }
  .registerBtn, .accountBtn, .memberButton {
    padding: 6px 10px !important;
    font-size: 12px !important;
  }
  .slideContent h1 {
    font-size: 20px !important;
  }
}

/* ==========================================================================
   SECTION T: CHECKPOINT 21 CHAPTER LABEL & BUTTON REFINEMENT
   ========================================================================== */

/* REQUEST 2: Thiết kế lại toàn bộ ô chữ Chương 1 2 3 4 5 ngang mượt mà, không bị bóp nghẹt hay rớt dòng */
.module .chapterLabel, .chapterHead .chapterLabel {
  width: auto !important;
  min-width: 115px !important;
  height: 40px !important;
  min-height: 40px !important;
  padding: 0 18px !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  font-weight: 800 !important;
  font-size: 13px !important;
  white-space: nowrap !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
  box-shadow: 0 4px 14px rgba(0,0,0,0.12) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.45) !important;
  flex-shrink: 0 !important;
}
.module:nth-child(3n+1) .chapterLabel {
  background: linear-gradient(135deg, #106f7a 0%, #063d43 100%) !important;
  color: #ffffff !important;
  border-color: #63c1bb !important;
  box-shadow: 0 4px 15px rgba(16, 111, 122, 0.3) !important;
}
.module:nth-child(3n+2) .chapterLabel {
  background: linear-gradient(135deg, #8776c9 0%, #5b47a8 100%) !important;
  color: #ffffff !important;
  border-color: #c3a7ee !important;
  box-shadow: 0 4px 15px rgba(135, 118, 201, 0.3) !important;
}
.module:nth-child(3n) .chapterLabel {
  background: linear-gradient(135deg, #ef846f 0%, #d65539 100%) !important;
  color: #ffffff !important;
  border-color: #f7b3a6 !important;
  box-shadow: 0 4px 15px rgba(239, 132, 111, 0.3) !important;
}
.module:nth-child(3n+1) .chapterLabel:before { content: "◈"; font-size: 14px; margin-right: 4px; display: inline-block; }
.module:nth-child(3n+2) .chapterLabel:before { content: "✦"; font-size: 14px; margin-right: 4px; display: inline-block; }
.module:nth-child(3n) .chapterLabel:before { content: "↗"; font-size: 14px; margin-right: 4px; display: inline-block; }
.module > .chapterHead, .chapterHead {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  padding: 16px 20px !important;
}
.chapterHead .modTitle {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}
.chapterHead .modTitle b {
  font-size: 18px !important;
  font-weight: 800 !important;
  color: #07353b !important;
  line-height: 1.3 !important;
}
@media (max-width: 430px) {
  .module .chapterLabel, .chapterHead .chapterLabel {
    min-width: 95px !important;
    height: 36px !important;
    padding: 0 12px !important;
    font-size: 11px !important;
  }
}

/* Antigravity Custom Improvements */

/* Fix Video View Frame Aspect Ratio (16:9) */
.frame {
  position: relative !important;
  width: 100% !important;
  padding-bottom: 56.25% !important; /* 16:9 aspect ratio */
  height: 0 !important;
  overflow: hidden !important;
  background: #073f45 !important;
  border-radius: 12px 12px 0 0 !important;
}
.frame iframe {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  border: 0 !important;
}

/* Modal content sizing and scrolling on desktop */
.modal>article {
  max-height: 90vh !important;
  overflow-y: auto !important;
}

/* Redesign Video Details Section */
.modal article > section {
  padding: 24px 28px !important;
  background: #ffffff !important;
}
#modName {
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: 1.5px !important;
  color: var(--m) !important;
  text-transform: uppercase !important;
  display: block !important;
  margin-bottom: 6px !important;
}
#modTitle {
  font-size: 24px !important;
  font-weight: 800 !important;
  line-height: 1.35 !important;
  background: linear-gradient(100deg, var(--p), var(--m) 70%, var(--a)) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  margin: 0 0 12px 0 !important;
}
#modDesc {
  font-size: 13px !important;
  line-height: 1.7 !important;
  color: var(--muted) !important;
  margin: 0 0 24px 0 !important;
}
.lessonCommerce {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 16px 20px !important;
  background: linear-gradient(135deg, #f5fbfc, #edf7f6) !important;
  border-radius: 16px !important;
  border: 1px solid rgba(16, 95, 104, 0.08) !important;
  margin-bottom: 24px !important;
  flex-wrap: wrap !important;
  gap: 16px !important;
}
.authorBlock {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}
.authorPhoto {
  width: 48px !important;
  height: 48px !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  border: 2px solid var(--a) !important;
  box-shadow: 0 4px 10px rgba(16, 95, 104, 0.1) !important;
}
.authorPhoto img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}
.authorBlock div {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}
.authorBlock small {
  font-size: 8px !important;
  font-weight: 800 !important;
  letter-spacing: 1px !important;
  color: var(--m) !important;
  margin: 0 !important;
}
.authorBlock b {
  font-size: 14px !important;
  color: var(--p) !important;
}
.authorBlock span {
  font-size: 10px !important;
  color: var(--muted) !important;
}
.lessonActions {
  display: flex !important;
  gap: 10px !important;
  position: relative !important;
}
.lessonActions button {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  border: 1px solid var(--line) !important;
  background: white !important;
  color: var(--p) !important;
  border-radius: 10px !important;
  padding: 8px 16px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  transition: all 0.25s ease !important;
  box-shadow: 0 2px 6px rgba(16, 95, 104, 0.04) !important;
}
.lessonActions button:hover {
  border-color: var(--a) !important;
  background: #f3fbfa !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 12px rgba(16, 95, 104, 0.08) !important;
}
.lessonActions button svg {
  width: 14px !important;
  height: 14px !important;
  fill: currentColor !important;
}
.shareMenu {
  position: absolute !important;
  bottom: 100% !important;
  right: 0 !important;
  margin-bottom: 8px !important;
  background: white !important;
  border: 1px solid var(--line) !important;
  border-radius: 12px !important;
  box-shadow: 0 10px 30px rgba(0,0,0,0.15) !important;
  display: none !important;
  flex-direction: column !important;
  padding: 6px !important;
  z-index: 10 !important;
  min-width: 150px !important;
}
.shareMenu.open {
  display: flex !important;
}
.shareMenu button {
  border: 0 !important;
  background: none !important;
  text-align: left !important;
  padding: 8px 12px !important;
  font-size: 11px !important;
  border-radius: 6px !important;
  width: 100% !important;
  box-shadow: none !important;
}
.shareMenu button:hover {
  background: #f3fbfa !important;
  transform: none !important;
}

/* Modal footer design */
.modal section footer {
  display: flex !important;
  gap: 16px !important;
  align-items: center !important;
  padding-top: 18px !important;
  border-top: 1px solid rgba(16, 95, 104, 0.08) !important;
  font-size: 11px !important;
  color: var(--muted) !important;
  margin-top: 24px !important;
}
.modal section footer span {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}
#complete {
  margin-left: auto !important;
  border: 0 !important;
  border-radius: 10px !important;
  padding: 10px 20px !important;
  background: linear-gradient(135deg, var(--a), var(--m)) !important;
  color: white !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 12px rgba(99, 193, 187, 0.3) !important;
  transition: all 0.25s ease !important;
}
#complete:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 16px rgba(99, 193, 187, 0.4) !important;
}

/* Premium Q&A Panel */
.qaPanel {
  margin-top: 32px !important;
  border-top: 1px solid rgba(16, 95, 104, 0.08) !important;
  padding-top: 24px !important;
}
.commentCard {
  display: flex !important;
  gap: 12px !important;
  padding: 16px !important;
  border-radius: 12px !important;
  background: #f8fbfb !important;
  border: 1px solid rgba(16, 95, 104, 0.05) !important;
  margin-bottom: 12px !important;
  box-shadow: 0 4px 12px rgba(16, 95, 104, 0.02) !important;
}
.commentAvatar {
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  background: var(--x) !important;
  color: var(--p) !important;
  display: grid !important;
  place-items: center !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  flex-shrink: 0 !important;
}
.commentBody {
  flex-grow: 1 !important;
}
.commentTop {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin-bottom: 6px !important;
}
.commentTop b {
  font-size: 12px !important;
  color: var(--p) !important;
}
.commentTop time {
  font-size: 10px !important;
  color: var(--muted) !important;
}
.commentBody p {
  font-size: 12px !important;
  line-height: 1.6 !important;
  color: var(--ink) !important;
  margin: 0 0 10px 0 !important;
}
.commentActions {
  display: flex !important;
  gap: 14px !important;
}
.commentActions button {
  border: 0 !important;
  background: none !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  color: var(--muted) !important;
  padding: 0 !important;
  cursor: pointer !important;
  transition: color 0.2s !important;
  box-shadow: none !important;
}
.commentActions button:hover {
  color: var(--m) !important;
}
.instructorReply {
  display: flex !important;
  gap: 10px !important;
  padding: 12px !important;
  background: white !important;
  border-radius: 8px !important;
  border: 1px solid rgba(16, 95, 104, 0.06) !important;
  margin-top: 12px !important;
}
.instructorAvatar {
  width: 28px !important;
  height: 28px !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  flex-shrink: 0 !important;
}
.instructorAvatar img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}
.instructorReply span {
  display: block !important;
  font-size: 8px !important;
  font-weight: 800 !important;
  color: var(--gold) !important;
  letter-spacing: 0.5px !important;
}
.instructorReply b {
  font-size: 11px !important;
  color: var(--p) !important;
}
.instructorReply b i {
  color: var(--a) !important;
  font-style: normal !important;
}
.instructorReply p {
  font-size: 11px !important;
  line-height: 1.5 !important;
  color: var(--ink) !important;
  margin: 4px 0 !important;
}
.instructorReply time {
  font-size: 9px !important;
  color: var(--muted) !important;
}
#qaForm {
  display: flex !important;
  gap: 12px !important;
  align-items: flex-start !important;
  margin-top: 20px !important;
}
#qaInput {
  flex-grow: 1 !important;
  height: 70px !important;
  border: 1px solid var(--line) !important;
  border-radius: 12px !important;
  padding: 10px 14px !important;
  font-size: 12px !important;
  resize: none !important;
  outline-color: var(--a) !important;
}
#qaForm button {
  height: 42px !important;
  border: 0 !important;
  border-radius: 10px !important;
  padding: 0 16px !important;
  background: var(--p) !important;
  color: white !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  transition: all 0.2s !important;
  box-shadow: none !important;
}
.qaPanel > small {
  display: block !important;
  font-size: 9px !important;
  color: var(--muted) !important;
  margin: 8px 0 0 0 !important;
}

/* Local Video Fallback Styling */
.videoFallback {
  position: absolute !important;
  inset: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  text-align: center !important;
  color: white !important;
  padding: 24px !important;
  background: linear-gradient(135deg, #0a3d43, #052225) !important;
}
.videoFallbackIcon {
  font-size: 42px !important;
  color: var(--a) !important;
  margin-bottom: 12px !important;
  animation: softPulse 2.4s ease-out infinite !important;
}
.videoFallback h3 {
  font-size: 18px !important;
  margin: 8px 0 4px !important;
  color: white !important;
  font-weight: 750 !important;
}
.videoFallback p {
  font-size: 12px !important;
  color: var(--x) !important;
  margin: 0 0 16px 0 !important;
  max-width: 320px !important;
}
.videoFallback a {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 10px 20px !important;
  background: linear-gradient(135deg, var(--l), var(--a)) !important;
  color: var(--p) !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  border-radius: 10px !important;
  font-size: 12px !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25) !important;
  transition: all 0.2s !important;
}
.videoFallback a:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35) !important;
}

/* Highlight state/lesson numbers and soften frames */
.state {
  width: 28px !important;
  height: 28px !important;
  border-radius: 50% !important;
  display: grid !important;
  place-items: center !important;
  border: 1px solid rgba(16, 95, 104, 0.15) !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  color: var(--p) !important;
  background: #f3fbfa !important;
  transition: all 0.2s ease !important;
}
.state.done {
  background: linear-gradient(135deg, var(--a), var(--m)) !important;
  color: white !important;
  border-color: transparent !important;
  box-shadow: 0 4px 10px rgba(99, 193, 187, 0.3) !important;
}
.module {
  border: 1px solid rgba(16, 95, 104, 0.08) !important;
  box-shadow: 0 4px 18px rgba(16, 95, 104, 0.04) !important;
}
.lesson {
  border-top: 1px solid rgba(16, 95, 104, 0.06) !important;
}

/* Make Sidebar Avatar Larger */
aside#side .avatar, .profile .avatar {
  width: 72px !important;
  height: 72px !important;
  min-width: 72px !important;
  min-height: 72px !important;
  font-size: 22px !important;
  font-weight: 900 !important;
  flex-shrink: 0 !important;
}

/* Improve contrast of profile greeting and subtitle */
.profile p b {
  color: #ffffff !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  display: block !important;
  margin-bottom: 3px !important;
}
.profile p small {
  color: #a3ded9 !important;
  font-size: 11.5px !important;
  line-height: 1.5 !important;
  font-weight: 500 !important;
  display: block !important;
}

/* Fix blurry/low-contrast text when module is open */
.module.open .chapterHead .modTitle b {
  color: #ffffff !important;
}
.module.open .chapterHead .chapterMeta b {
  color: var(--gold) !important;
}
.module.open .chapterHead .chapterMeta small {
  color: rgba(255, 255, 255, 0.85) !important;
}

/* Sync desktop styling overrides to mobile screens */
@media(max-width: 760px) {
  /* Stack Q&A form elements vertically on mobile to prevent narrow textareas */
  #qaForm {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
  }
  #qaForm textarea {
    width: 100% !important;
    height: 80px !important;
  }
  #qaForm button {
    align-self: stretch !important;
    width: 100% !important;
    text-align: center !important;
    padding: 12px !important;
  }
  
  /* Horizontal scroll for course switcher tabs on narrow screens to prevent text overlap */
  .tabs {
    display: flex !important;
    overflow-x: auto !important;
    white-space: nowrap !important;
    width: 100% !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    padding: 4px !important;
    gap: 8px !important;
  }
  .tabs::-webkit-scrollbar {
    display: none !important;
  }
  .tab {
    flex: 0 0 auto !important;
    padding: 8px 14px !important;
  }
  
  /* Guarantee course image layout scale and constraints on mobile */
  .courseImage {
    width: 100% !important;
    min-height: 180px !important;
    max-height: 240px !important;
    border-radius: 12px !important;
  }
  .courseCover {
    padding: 16px !important;
    gap: 16px !important;
  }
  
  /* Stacking adjustments for dialog contents */
  .lessonCommerce {
    flex-direction: column !important;
    align-items: stretch !important;
    padding: 14px 16px !important;
  }
  .lessonActions {
    width: 100% !important;
    justify-content: space-between !important;
  }
  .lessonActions button {
    flex: 1 !important;
    justify-content: center !important;
  }
}

/* Hide the floating notification dot that appears over auth modals. */
#notificationBadge,
.notificationBtn > i,
#notificationButton > i {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  animation: none !important;
}

/* Hide Codex browser's injected comment marker when previewing the site. */
#codex-browser-sidebar-comments-root {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Remove auth overlay blur that creates a white halo over the sidebar logo. */
.loginModal .loginShade,
.registerModal .loginShade,
.loginShade[data-close-login],
.loginShade[data-close-register] {
  background: rgba(6, 39, 42, 0.82) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  filter: none !important;
}

/* Final mobile app pass for Android/iOS: synchronized layout, media, and motion. */
@media (max-width: 768px) {
  :root {
    --mobile-pad: 14px;
    --mobile-radius: 16px;
  }

  html {
    scroll-padding-top: 132px !important;
    -webkit-text-size-adjust: 100% !important;
    text-size-adjust: 100% !important;
  }

  body {
    width: 100% !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
    background: #f4fbf9 !important;
    padding-bottom: env(safe-area-inset-bottom) !important;
  }

  img,
  iframe,
  video,
  canvas {
    max-width: 100% !important;
  }

  .app {
    display: block !important;
    width: 100% !important;
    min-height: 100svh !important;
    overflow-x: hidden !important;
  }

  aside#side {
    width: min(318px, 88vw) !important;
    max-width: 88vw !important;
    padding: calc(18px + env(safe-area-inset-top)) 16px calc(18px + env(safe-area-inset-bottom)) !important;
    transform: translateX(-105%) !important;
    transition: transform .24s ease !important;
    will-change: transform !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  aside#side.open {
    transform: translateX(0) !important;
  }

  aside#side .brand {
    margin: 0 4px 20px !important;
    padding-bottom: 18px !important;
    gap: 10px !important;
  }

  aside#side .brand i {
    width: 44px !important;
    height: 44px !important;
    font-size: 25px !important;
    border-radius: 13px !important;
    flex: 0 0 auto !important;
  }

  aside#side .brand b {
    min-width: 0 !important;
    font-size: 15px !important;
    line-height: 1.2 !important;
  }

  aside#side .brand small {
    font-size: 7px !important;
    white-space: normal !important;
  }

  aside#side .profile {
    margin: 12px 0 18px !important;
    padding: 12px !important;
    gap: 12px !important;
  }

  aside#side .avatar,
  .profile .avatar {
    width: 58px !important;
    height: 58px !important;
    min-width: 58px !important;
    min-height: 58px !important;
    font-size: 18px !important;
  }

  .overall {
    margin: 18px 4px !important;
  }

  .ring {
    width: 76px !important;
    height: 76px !important;
  }

  #closeSide,
  #menu {
    min-width: 44px !important;
    min-height: 44px !important;
  }

  .app > main {
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    overflow-x: hidden !important;
  }

  header {
    position: sticky !important;
    top: 0 !important;
    z-index: 70 !important;
    display: grid !important;
    grid-template-columns: 44px minmax(0, 1fr) 44px 44px !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100% !important;
    min-height: 0 !important;
    padding: calc(8px + env(safe-area-inset-top)) var(--mobile-pad) 10px !important;
    background: rgba(255, 255, 255, .96) !important;
    border-bottom: 1px solid #d7e9e7 !important;
    box-shadow: 0 8px 22px rgba(16, 95, 104, .10) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  .tabs {
    grid-column: 1 / -1 !important;
    order: initial !important;
    display: flex !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    gap: 8px !important;
    padding: 4px 0 2px !important;
    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .tabs::-webkit-scrollbar {
    display: none !important;
  }

  .tab {
    flex: 0 0 min(265px, 78vw) !important;
    min-height: 54px !important;
    padding: 9px 12px !important;
    border-radius: 14px !important;
    white-space: normal !important;
  }

  .tab > i {
    width: 34px !important;
    height: 34px !important;
    flex: 0 0 34px !important;
  }

  .tab span,
  .tab .tabCopy {
    min-width: 0 !important;
    font-size: 12px !important;
    line-height: 1.25 !important;
  }

  .tab small {
    font-size: 7px !important;
    line-height: 1.2 !important;
  }

  .search {
    grid-column: 2 / 3 !important;
    order: initial !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 10px 12px !important;
    border-radius: 12px !important;
  }

  .search input {
    min-width: 0 !important;
    font-size: 16px !important;
  }

  #notificationButton,
  .notificationBtn,
  .memberButton,
  .accountArea .accountBtn,
  .accountBtn {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    padding: 0 !important;
    border-radius: 12px !important;
  }

  .memberButton {
    font-size: 0 !important;
  }

  .memberButton span {
    font-size: 18px !important;
  }

  .accountArea {
    grid-column: 4 / 5 !important;
    width: 44px !important;
  }

  .accountArea .accountBtn,
  header > .accountBtn {
    font-size: 0 !important;
    overflow: hidden !important;
  }

  .accountArea .accountBtn::before,
  header > .accountBtn::before {
    content: "HV" !important;
    font-size: 11px !important;
    font-weight: 800 !important;
  }

  .accountMenu {
    position: fixed !important;
    left: var(--mobile-pad) !important;
    right: var(--mobile-pad) !important;
    top: calc(112px + env(safe-area-inset-top)) !important;
    width: auto !important;
    max-width: none !important;
    z-index: 95 !important;
  }

  .homeSlider,
  .learnerHub,
  .dashboard,
  .published,
  .learningTools,
  .videos,
  .notes,
  .awards {
    width: calc(100% - (var(--mobile-pad) * 2)) !important;
    max-width: none !important;
    margin: 18px var(--mobile-pad) 22px !important;
  }

  .homeSlider {
    height: clamp(430px, 112vw, 570px) !important;
    border-radius: 20px !important;
    box-shadow: 0 16px 34px rgba(16, 95, 104, .18) !important;
  }

  .homeSlide {
    background-position: center top !important;
    transform: none !important;
  }

  .slideContent {
    left: 18px !important;
    right: 18px !important;
    top: auto !important;
    bottom: 58px !important;
    width: auto !important;
    transform: none !important;
  }

  .slideTag {
    max-width: 100% !important;
    font-size: 8px !important;
    padding: 7px 10px !important;
  }

  .slideContent h1 {
    margin: 12px 0 10px !important;
    font-size: clamp(27px, 8.2vw, 36px) !important;
    line-height: 1.12 !important;
    letter-spacing: 0 !important;
  }

  .slideContent > p {
    max-width: 100% !important;
    font-size: 12px !important;
    line-height: 1.6 !important;
  }

  .slideContent > div {
    flex-wrap: wrap !important;
    gap: 10px !important;
    margin-top: 16px !important;
  }

  .slideCta {
    min-height: 44px !important;
    padding: 11px 14px !important;
  }

  .slideArrow {
    width: 38px !important;
    height: 38px !important;
  }

  .slideNav {
    left: 18px !important;
    bottom: 24px !important;
  }

  .slideCount {
    right: 18px !important;
    bottom: 18px !important;
  }

  .learnerHub,
  .published,
  .learningTools,
  .videos,
  .notes,
  .awards,
  .curriculum {
    border-radius: var(--mobile-radius) !important;
    padding: 16px !important;
  }

  .hubHeading,
  .title,
  .notes {
    display: block !important;
  }

  .title p > b,
  .hubHeading h2,
  .notes h2 {
    font-size: clamp(21px, 6.3vw, 26px) !important;
    line-height: 1.25 !important;
    letter-spacing: 0 !important;
  }

  .hubHeading p,
  .notes p,
  .title > span {
    font-size: 12px !important;
    line-height: 1.55 !important;
  }

  .hubGrid,
  .toolGrid,
  #publishedGrid,
  .publishedGrid,
  #videoGrid,
  .awards > div:last-child {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  .continueCard,
  .hubCard,
  .toolCard,
  .managedCard,
  .videoCard,
  .awards article {
    border-radius: 14px !important;
    min-width: 0 !important;
    transform: none !important;
  }

  .continueCard {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    padding: 14px !important;
  }

  .continueVisual,
  .courseImage,
  .managedMedia,
  .videoCard .thumb,
  .thumb,
  .articleReader > img,
  #articleImage,
  .viewerImage {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 16 / 9 !important;
    object-fit: cover !important;
    object-position: center !important;
    border-radius: 14px !important;
    overflow: hidden !important;
  }

  .courseCover {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    padding: 16px !important;
    border-radius: var(--mobile-radius) !important;
  }

  .courseCover::after {
    display: none !important;
  }

  .courseMain h2 {
    font-size: clamp(21px, 6.4vw, 27px) !important;
    line-height: 1.25 !important;
    letter-spacing: 0 !important;
  }

  .courseMain h3,
  .courseMain > p {
    font-size: 12px !important;
    line-height: 1.55 !important;
  }

  .courseFacts {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  .courseFacts span {
    padding: 10px !important;
    border: 1px solid rgba(255, 255, 255, .18) !important;
    border-radius: 12px !important;
  }

  .courseAction {
    display: block !important;
    padding: 14px !important;
  }

  .module {
    border-radius: 14px !important;
  }

  .module > .chapterHead,
  .module > button {
    grid-template-columns: 1fr auto !important;
    gap: 10px !important;
    padding: 14px !important;
  }

  .chapterLabel {
    grid-column: 1 / 2 !important;
    justify-self: start !important;
    min-height: 32px !important;
    padding: 6px 10px !important;
    font-size: 8px !important;
  }

  .modTitle {
    grid-column: 1 / -1 !important;
    min-width: 0 !important;
  }

  .modTitle b {
    font-size: 13px !important;
    line-height: 1.35 !important;
  }

  .chapterMeta,
  .mini {
    display: none !important;
  }

  .lesson {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    min-height: 0 !important;
    padding: 13px !important;
  }

  .lesson > div {
    align-items: flex-start !important;
    min-width: 0 !important;
  }

  .lessonText b {
    font-size: 13px !important;
    line-height: 1.4 !important;
  }

  .lessonText em {
    font-size: 10px !important;
    line-height: 1.4 !important;
  }

  .lesson .time,
  .time {
    display: inline-flex !important;
    width: max-content !important;
    min-width: 0 !important;
    padding: 6px 9px !important;
  }

  .lesson > button {
    grid-column: auto !important;
    width: 100% !important;
    min-height: 44px !important;
    font-size: 11px !important;
  }

  .dashboard {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    padding: 0 !important;
    background: transparent !important;
  }

  .dashboard > .curriculum,
  .dashboard > .now {
    width: 100% !important;
    margin: 0 !important;
  }

  .now {
    position: relative !important;
    top: auto !important;
    padding: 18px !important;
    border-radius: var(--mobile-radius) !important;
  }

  .managedCard > div:last-child,
  .videoBody,
  .toolCard,
  .hubCard {
    padding: 14px !important;
  }

  .managedCard h3,
  .videoBody h3,
  .toolCard h3,
  .hubCard strong {
    font-size: 16px !important;
    line-height: 1.35 !important;
    min-height: 0 !important;
  }

  .managedCard p,
  .videoBody p,
  .toolCard p,
  .hubCard p {
    min-height: 0 !important;
    font-size: 12px !important;
    line-height: 1.55 !important;
  }

  .notes textarea,
  #note,
  #qaInput,
  .loginCard input,
  .registerCard input,
  .memberFormGrid input,
  .memberFormGrid select {
    min-height: 46px !important;
    font-size: 16px !important;
  }

  .notes footer,
  .modal section footer,
  .memberStep footer {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .modal,
  .articleModal,
  .contentViewer,
  .loginModal,
  .registerModal,
  .memberModal,
  .quizModal,
  .certificateModal,
  .forgotModal,
  .contentEditor {
    align-items: end !important;
    padding: 0 !important;
  }

  .modal > article,
  .articleReader,
  .contentViewer > article,
  .loginCard,
  .registerCard,
  .memberCard,
  .quizCard,
  .certificate,
  .forgotCard,
  #contentForm {
    width: 100% !important;
    max-width: none !important;
    max-height: 100dvh !important;
    margin: 0 !important;
    border-radius: 20px 20px 0 0 !important;
    overflow: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .loginCard,
  .registerCard,
  .forgotCard {
    padding: 24px 18px calc(22px + env(safe-area-inset-bottom)) !important;
  }

  .registerGrid,
  .memberFormGrid,
  .formGrid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  .loginPasswordOptions {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    font-size: 12px !important;
  }

  .frame,
  .viewerVideo {
    width: 100% !important;
    aspect-ratio: 16 / 9 !important;
    min-height: 0 !important;
  }

  .frame iframe:not([hidden]) {
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 16 / 9 !important;
  }

  .pageFoot {
    display: grid !important;
    gap: 8px !important;
    padding: 20px var(--mobile-pad) calc(24px + env(safe-area-inset-bottom)) !important;
  }

  .pageFoot span {
    line-height: 1.6 !important;
  }
}

@media (max-width: 430px) {
  :root {
    --mobile-pad: 12px;
  }

  header {
    grid-template-columns: 42px minmax(0, 1fr) 42px 42px !important;
    gap: 7px !important;
  }

  .tab {
    flex-basis: min(245px, 82vw) !important;
  }

  .homeSlider {
    height: clamp(405px, 120vw, 520px) !important;
  }

  .slideContent h1 {
    font-size: clamp(25px, 8.5vw, 32px) !important;
  }

  .courseFacts {
    grid-template-columns: 1fr !important;
  }

  .loginPasswordOptions {
    grid-template-columns: 1fr !important;
  }
}

@media (hover: none) and (pointer: coarse) {
  .hubCard:hover,
  .continueCard:hover,
  .videoCard:hover,
  .managedCard:hover,
  .toolCard:hover,
  .awards article:hover,
  .plan:hover,
  .module:hover,
  .tab:hover,
  .memberButton:hover,
  .slideCta:hover,
  .videoLibraryMore:hover {
    transform: none !important;
    box-shadow: inherit !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
}

/* Codex contrast repair: keep white text only on dark surfaces, never on white cards. */
body:not(.adminPage) .learnerHub .continueCard,
body:not(.adminPage) .learnerHub .hubCard,
body:not(.adminPage) .continueCard,
body:not(.adminPage) .hubCard,
body:not(.adminPage) .managedCard,
body:not(.adminPage) .videoCard,
body:not(.adminPage) .toolCard {
  color: var(--codex-ink-900) !important;
}

body:not(.adminPage) .learnerHub .continueCard h3,
body:not(.adminPage) .learnerHub .continueCard b,
body:not(.adminPage) .learnerHub .continueCard strong,
body:not(.adminPage) .learnerHub .continueCard span:not(.hubBadge),
body:not(.adminPage) .learnerHub .hubCard h3,
body:not(.adminPage) .learnerHub .hubCard b,
body:not(.adminPage) .learnerHub .hubCard strong,
body:not(.adminPage) .learnerHub .hubCard span:not(.hubBadge),
body:not(.adminPage) .continueCard h3,
body:not(.adminPage) .continueCard b,
body:not(.adminPage) .continueCard strong,
body:not(.adminPage) .continueCard span:not(.hubBadge),
body:not(.adminPage) .hubCard h3,
body:not(.adminPage) .hubCard b,
body:not(.adminPage) .hubCard strong,
body:not(.adminPage) .hubCard span:not(.hubBadge),
body:not(.adminPage) .managedCard h3,
body:not(.adminPage) .managedCard b,
body:not(.adminPage) .videoCard h3,
body:not(.adminPage) .toolCard h3,
body:not(.adminPage) .toolCard strong {
  color: var(--codex-ink-900) !important;
}

body:not(.adminPage) .learnerHub .continueCard p,
body:not(.adminPage) .learnerHub .hubCard p,
body:not(.adminPage) .continueCard p,
body:not(.adminPage) .hubCard p,
body:not(.adminPage) .managedCard p,
body:not(.adminPage) .videoCard p,
body:not(.adminPage) .toolCard p,
body:not(.adminPage) .continueProgress span,
body:not(.adminPage) .hubCard small {
  color: var(--codex-muted) !important;
}

body:not(.adminPage) .hubBadge,
body:not(.adminPage) .toolCard > span,
body:not(.adminPage) .managedMeta span,
body:not(.adminPage) .title label,
body:not(.adminPage) .commercialBadge {
  color: #0b6a73 !important;
}

body:not(.adminPage) .continueVisual,
body:not(.adminPage) .continueVisual span,
body:not(.adminPage) .continueVisual small {
  color: #ffffff !important;
}

body:not(.adminPage) .hubIcon,
body:not(.adminPage) .toolCard > i,
body:not(.adminPage) .codexRouteGrid i {
  color: #07353b !important;
}

body:not(.adminPage) .miniDays i {
  background: #0f737b !important;
  color: #ffffff !important;
}

body:not(.adminPage) .miniDays i.next {
  background: var(--codex-gold) !important;
  color: #07353b !important;
}

body:not(.adminPage) .slideCta,
body:not(.adminPage) .slideCta b,
body:not(.adminPage) .slideCta span {
  color: #07353b !important;
}

body:not(.adminPage) .homeSlider .slideCounter,
body:not(.adminPage) .homeSlider .slideCounter b,
body:not(.adminPage) .homeSlider .slideCounter span {
  color: #ffffff !important;
}

body:not(.adminPage) .curriculum,
body:not(.adminPage) .videos,
body:not(.adminPage) .notes,
body:not(.adminPage) .awards,
body:not(.adminPage) .published,
body:not(.adminPage) .learningTools {
  color: var(--codex-ink-900) !important;
}

body:not(.adminPage) .curriculum p,
body:not(.adminPage) .videos p,
body:not(.adminPage) .notes p,
body:not(.adminPage) .awards p,
body:not(.adminPage) .published p,
body:not(.adminPage) .learningTools p {
  color: var(--codex-muted) !important;
}

body:not(.adminPage) main > header .tab:not(.active) {
  color: #0b5962 !important;
  background: rgba(255,255,255,.94) !important;
}

body:not(.adminPage) main > header .tab.active,
body:not(.adminPage) main > header .tab.active span,
body:not(.adminPage) main > header .tab.active i {
  color: #ffffff !important;
}

/* Final compact mobile header alignment */
@media (max-width: 768px) {
  header {
    grid-template-columns: 44px minmax(0, 1fr) 44px 44px 44px !important;
    grid-auto-flow: row !important;
  }

  header > #menu {
    grid-column: 1 / 2 !important;
  }

  header > .tabs {
    grid-column: 2 / -1 !important;
  }

  header > .search {
    grid-column: 1 / 4 !important;
    grid-row: 2 !important;
  }

  header > #registerButton,
  header > #accountButton,
  header > #memberButton,
  header > #notificationButton {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    max-width: 44px !important;
    padding: 0 !important;
    margin: 0 !important;
    display: grid !important;
    place-items: center !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    text-indent: -999px !important;
    font-size: 0 !important;
    line-height: 1 !important;
  }

  header > #registerButton {
    grid-column: 4 / 5 !important;
    grid-row: 2 !important;
  }

  header > #accountButton {
    grid-column: 5 / 6 !important;
    grid-row: 2 !important;
  }

  header > .accountArea {
    grid-column: 5 / 6 !important;
    grid-row: 2 !important;
    width: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    margin: 0 !important;
  }

  header > .accountArea > #accountButton {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    max-width: 44px !important;
    padding: 0 !important;
    margin: 0 !important;
    display: grid !important;
    place-items: center !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    text-indent: -999px !important;
    font-size: 0 !important;
    line-height: 1 !important;
  }

  header > #memberButton,
  header > #notificationButton {
    display: none !important;
  }

  header > #registerButton::before,
  header > #accountButton::before,
  header > .accountArea > #accountButton::before {
    text-indent: 0 !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
  }

  header > #registerButton::before {
    content: "+" !important;
  }

  header > #accountButton::before {
    content: "HV" !important;
  }

  header > .accountArea > #accountButton::before {
    content: "HV" !important;
  }
}

@media (max-width: 430px) {
  header {
    grid-template-columns: 42px minmax(0, 1fr) 42px 42px 42px !important;
  }
}

/* Final profile avatar and chapter contrast polish */
aside#side .profile {
  display: grid !important;
  grid-template-columns: 86px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 14px !important;
  min-height: 132px !important;
  padding: 18px 14px !important;
  border-radius: 18px !important;
}

aside#side .profile .avatar,
aside#side .avatar {
  width: 84px !important;
  height: 84px !important;
  min-width: 84px !important;
  min-height: 84px !important;
  border: 3px solid rgba(255, 255, 255, .9) !important;
  box-shadow: 0 10px 26px rgba(0, 0, 0, .24), 0 0 0 5px rgba(158, 213, 209, .22) !important;
}

aside#side .profile p {
  min-width: 0 !important;
}

aside#side .profile p b {
  font-size: 16px !important;
  line-height: 1.35 !important;
}

aside#side .profile p small {
  font-size: 12px !important;
  line-height: 1.55 !important;
  color: #d7f3ef !important;
}

.avatar .customAvatarImg,
.profile .customAvatarImg,
.accountMenuIdentity .customAvatarImg,
#vipAvatar .customAvatarImg,
.adminAvatar .customAvatarImg {
  border-radius: 50% !important;
  object-fit: cover !important;
  object-position: center !important;
}

.module > .chapterHead,
.chapterHead {
  background: linear-gradient(135deg, #0c646d 0%, #147982 100%) !important;
}

.module .chapterHead .modTitle b,
.module.open .chapterHead .modTitle b,
.module:not(.open) .chapterHead .modTitle b {
  color: #ffffff !important;
  opacity: 1 !important;
  filter: none !important;
  text-shadow: 0 2px 8px rgba(0, 24, 28, .45) !important;
  -webkit-text-fill-color: #ffffff !important;
}

.module .chapterHead .modTitle small,
.module.open .chapterHead .modTitle small,
.module:not(.open) .chapterHead .modTitle small {
  color: #e9fffc !important;
  opacity: 1 !important;
  filter: none !important;
  text-shadow: 0 1px 5px rgba(0, 24, 28, .35) !important;
}

.module .chapterHead .chapterMeta b,
.module.open .chapterHead .chapterMeta b,
.module:not(.open) .chapterHead .chapterMeta b {
  color: #ffe082 !important;
  opacity: 1 !important;
  text-shadow: 0 1px 5px rgba(0, 24, 28, .35) !important;
}

.module .chapterHead .chapterMeta small,
.module.open .chapterHead .chapterMeta small,
.module:not(.open) .chapterHead .chapterMeta small {
  color: #d8f5f1 !important;
  opacity: 1 !important;
}

@media (max-width: 768px) {
  aside#side .profile {
    grid-template-columns: 74px minmax(0, 1fr) !important;
    min-height: 112px !important;
    padding: 14px !important;
  }

  aside#side .profile .avatar,
  aside#side .avatar {
    width: 72px !important;
    height: 72px !important;
    min-width: 72px !important;
    min-height: 72px !important;
  }
}

/* Final admin navigation, editor and permission polish */
.adminStats[hidden],
.adminWorkspace[hidden],
.questionWorkspace[hidden],
.memberWorkspace[hidden] {
  display: none !important;
}

.adminSide nav button {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  min-height: 52px !important;
  font-size: 14px !important;
  font-weight: 800 !important;
}

.adminSide nav button::first-letter {
  color: #9ed5d1 !important;
}

.adminMain > header {
  gap: 18px !important;
}

.adminHeaderActions {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

#adminNotificationButton {
  position: relative !important;
  display: grid !important;
  place-items: center !important;
  width: 48px !important;
  height: 48px !important;
  padding: 0 !important;
  border: 1px solid rgba(16, 95, 104, .18) !important;
  border-radius: 14px !important;
  background: #ffffff !important;
  color: #105f68 !important;
  box-shadow: 0 10px 24px rgba(16, 95, 104, .12) !important;
}

#adminNotificationButton svg {
  width: 21px !important;
  height: 21px !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

#adminBellCount {
  position: absolute !important;
  right: -5px !important;
  top: -6px !important;
  min-width: 20px !important;
  height: 20px !important;
  padding: 0 5px !important;
  border: 2px solid #fff !important;
  border-radius: 20px !important;
  background: #ef5d5d !important;
  color: #fff !important;
  font-size: 10px !important;
  font-style: normal !important;
  font-weight: 900 !important;
  place-items: center !important;
}

.adminRow.adminHead,
.adminContentRow {
  grid-template-columns: minmax(260px, 2fr) .65fr .95fr .7fr .75fr .75fr !important;
  min-width: 980px !important;
}

.adminRoute {
  display: inline-flex !important;
  width: max-content !important;
  max-width: 100% !important;
  margin-top: 8px !important;
  padding: 5px 8px !important;
  border-radius: 999px !important;
  background: #edf8f6 !important;
  color: #0d5962 !important;
  font-weight: 800 !important;
}

.memberRow {
  grid-template-columns: minmax(180px, 1.2fr) minmax(190px, 1.2fr) .8fr minmax(220px, 1.25fr) .85fr .75fr !important;
  min-width: 1080px !important;
}

.memberMetrics span:nth-child(2) {
  display: none !important;
}

.memberMetrics {
  grid-template-columns: repeat(2, minmax(180px, 1fr)) !important;
}

.memberRow select,
.roleControls select {
  width: 100% !important;
  min-height: 40px !important;
  border: 1px solid #b9dcda !important;
  border-radius: 10px !important;
  background: #fff !important;
  color: #0d5962 !important;
  font-weight: 800 !important;
  padding: 8px 10px !important;
}

#contentForm {
  width: min(920px, 96vw) !important;
  padding: 34px !important;
}

#contentForm h2 {
  font-size: 30px !important;
}

.formSectionTitle {
  display: grid !important;
  grid-template-columns: 42px 1fr !important;
  align-items: center !important;
  gap: 12px !important;
  margin: 24px 0 14px !important;
  padding: 12px 14px !important;
  border: 1px solid #d7ece9 !important;
  border-left: 4px solid #2c9895 !important;
  border-radius: 14px !important;
  background: linear-gradient(135deg, #f0fbf9, #ffffff) !important;
}

.formSectionTitle i {
  display: grid !important;
  place-items: center !important;
  width: 34px !important;
  height: 34px !important;
  border-radius: 10px !important;
  background: #0d6871 !important;
  color: #fff !important;
  font-style: normal !important;
  font-weight: 900 !important;
}

.formSectionTitle b,
.formSectionTitle small {
  display: block !important;
}

.formSectionTitle b {
  color: #073e45 !important;
  font-size: 13px !important;
}

.formSectionTitle small {
  margin-top: 3px !important;
  color: #60787a !important;
  font-size: 10px !important;
}

#contentForm .formGrid,
#contentForm .contentRouting {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 14px !important;
}

#contentForm label {
  color: #073e45 !important;
  font-size: 13px !important;
}

#contentForm input,
#contentForm select,
#contentForm textarea {
  min-height: 46px !important;
  border-color: #b9dcda !important;
  font-size: 14px !important;
}

#contentForm textarea.large {
  min-height: 170px !important;
}

.uploadField > span {
  border-radius: 16px !important;
  background: linear-gradient(135deg, #f4fbfa, #fff) !important;
}

.mediaPreview {
  min-height: 210px !important;
}

.contentEditor.open {
  align-items: center !important;
}

@media (max-width: 900px) {
  .adminSide nav button {
    justify-content: center !important;
    font-size: 0 !important;
  }

  .adminSide nav button::first-letter {
    font-size: 18px !important;
  }

  #contentForm .formGrid,
  #contentForm .contentRouting {
    grid-template-columns: 1fr !important;
  }

  #contentForm {
    padding: 24px 18px !important;
  }
}

/* Hide legacy membership registration completely */
#memberButton,
.memberButton,
#memberModal,
.memberModal,
.planGrid,
[data-next-member],
[data-prev-member],
[data-close-member] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Final clarity pass: professional square avatar, sharp admin tables/cards, web-app mobile */
aside#side .profile {
  grid-template-columns: 92px minmax(0, 1fr) !important;
  min-height: 142px !important;
  padding: 18px !important;
  background: linear-gradient(145deg, rgba(255,255,255,.13), rgba(255,255,255,.07)) !important;
  border: 1px solid rgba(158, 213, 209, .35) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.18), 0 18px 34px rgba(0, 35, 40, .22) !important;
}

aside#side .profile .avatar,
aside#side .avatar {
  width: 88px !important;
  height: 88px !important;
  min-width: 88px !important;
  min-height: 88px !important;
  border-radius: 22px !important;
  border: 3px solid rgba(255,255,255,.92) !important;
  box-shadow: 0 14px 30px rgba(0,0,0,.28), 0 0 0 5px rgba(158,213,209,.20) !important;
}

.avatar .customAvatarImg,
.profile .customAvatarImg,
.accountMenuIdentity .customAvatarImg,
#vipAvatar .customAvatarImg,
.adminAvatar .customAvatarImg {
  border-radius: 18px !important;
}

aside#side .profile p b {
  color: #ffffff !important;
  font-size: 17px !important;
  line-height: 1.3 !important;
  text-shadow: 0 2px 8px rgba(0,0,0,.22) !important;
}

aside#side .profile p small {
  color: #dff8f4 !important;
  font-size: 12px !important;
  line-height: 1.5 !important;
  font-weight: 700 !important;
}

.profileJoinDate {
  display: inline-flex !important;
  width: max-content !important;
  max-width: 100% !important;
  margin-top: 8px !important;
  padding: 5px 8px !important;
  border-radius: 8px !important;
  background: rgba(255,255,255,.14) !important;
  color: #ffffff !important;
  font-size: 10px !important;
  font-style: normal !important;
  font-weight: 800 !important;
}

.adminWorkspace,
.questionWorkspace,
.memberWorkspace,
.adminStats article,
.memberMetrics span {
  background: #ffffff !important;
  border: 2px solid #73c9c2 !important;
  box-shadow: 0 20px 42px rgba(9, 82, 89, .14) !important;
}

.adminHead,
.memberHead,
.adminRow.adminHead {
  background: linear-gradient(135deg, #0d6a72, #137e86) !important;
  color: #ffffff !important;
  box-shadow: 0 12px 24px rgba(8, 82, 89, .24) !important;
}

.adminHead span,
.memberHead span,
.adminRow.adminHead span {
  color: #ffffff !important;
  opacity: 1 !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  letter-spacing: .8px !important;
  text-shadow: 0 2px 6px rgba(0,0,0,.22) !important;
}

.adminRow,
.memberRow {
  background: #ffffff !important;
  border-bottom: 1.5px solid #b8e3df !important;
}

.adminRow b,
.memberRow b,
.adminTitle h2,
.questionWorkspace h2,
.memberWorkspace h2 {
  color: #063f46 !important;
  font-weight: 900 !important;
  opacity: 1 !important;
}

.adminRow small,
.memberRow small,
.adminQuestion p {
  color: #285f66 !important;
  font-weight: 700 !important;
  opacity: 1 !important;
}

.adminRow em.published,
.statusActive {
  background: #bdf1e6 !important;
  color: #064f55 !important;
  border: 1px solid #8ddbd0 !important;
  box-shadow: 0 8px 16px rgba(8, 113, 120, .16) !important;
  font-weight: 900 !important;
}

.adminRow button,
.memberRow button {
  color: #075d65 !important;
  border-color: #9ccfcb !important;
  box-shadow: 0 6px 14px rgba(8, 82, 89, .08) !important;
  font-weight: 900 !important;
}

@media (max-width: 768px) {
  body {
    background: #eef8f6 !important;
  }

  .app {
    display: block !important;
  }

  main,
  .app > main {
    padding-bottom: calc(18px + env(safe-area-inset-bottom)) !important;
  }

  header {
    min-height: 118px !important;
    border-bottom: 1px solid #cae8e5 !important;
    box-shadow: 0 12px 28px rgba(8, 82, 89, .12) !important;
  }

  .homeSlider,
  .learnerHub,
  .dashboard,
  .published,
  .learningTools,
  .videos,
  .notes,
  .awards {
    width: calc(100% - 24px) !important;
    margin: 14px 12px 18px !important;
    border-radius: 18px !important;
    border: 1.5px solid #bde4e0 !important;
    box-shadow: 0 16px 32px rgba(8, 82, 89, .12) !important;
  }

  .dashboard {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
  }

  .curriculum,
  .now,
  .published,
  .learningTools,
  .videos,
  .notes,
  .awards {
    padding: 16px !important;
  }

  .module,
  .managedCard,
  .videoCard,
  .toolCard,
  .awards article {
    border-radius: 16px !important;
    border: 1.5px solid #b8e0dc !important;
    box-shadow: 0 12px 24px rgba(8, 82, 89, .10) !important;
  }

  aside#side .profile {
    grid-template-columns: 76px minmax(0, 1fr) !important;
    min-height: 118px !important;
  }

  aside#side .profile .avatar,
  aside#side .avatar {
    width: 72px !important;
    height: 72px !important;
    min-width: 72px !important;
    min-height: 72px !important;
    border-radius: 18px !important;
  }
}

/* Final profile card and Q&A comment layout */
aside#side .profile {
  grid-template-columns: 96px minmax(0, 1fr) !important;
  min-height: 154px !important;
  padding: 18px 16px !important;
  gap: 14px !important;
  overflow: hidden !important;
}

aside#side .profile::before {
  content: "👋" !important;
  position: absolute !important;
  right: 14px !important;
  top: 12px !important;
  width: 28px !important;
  height: 28px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 10px !important;
  background: rgba(255,255,255,.13) !important;
  font-size: 14px !important;
}

aside#side .profile p {
  display: grid !important;
  gap: 5px !important;
  align-content: center !important;
}

aside#side .profile p b {
  max-width: 100% !important;
  font-size: 17px !important;
  line-height: 1.2 !important;
  word-break: normal !important;
}

aside#side .profile p small {
  max-width: 100% !important;
  font-size: 11px !important;
  line-height: 1.4 !important;
}

.profileJoinDate {
  width: 100% !important;
  margin-top: 4px !important;
  padding: 6px 8px !important;
  line-height: 1.35 !important;
}

.qaPanel {
  border: 1.5px solid #c8e7e4 !important;
  box-shadow: 0 16px 34px rgba(8, 82, 89, .10) !important;
}

#qaForm {
  display: grid !important;
  grid-template-columns: 54px 170px minmax(0, 1fr) 120px !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 16px !important;
  border: 1.5px solid #c7e5e2 !important;
  border-radius: 16px !important;
  background: #ffffff !important;
  box-shadow: 0 10px 24px rgba(8, 82, 89, .08) !important;
}

.qaStudentAvatar,
.commentAvatar {
  width: 48px !important;
  height: 48px !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  background: #dff5f1 !important;
  border: 2px solid #ffffff !important;
  box-shadow: 0 8px 18px rgba(8, 82, 89, .16) !important;
}

.qaStudentAvatar img,
.commentAvatar img {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  object-fit: cover !important;
  border-radius: 12px !important;
}

.qaStudentMeta {
  min-width: 0 !important;
}

.qaStudentMeta b,
.qaStudentMeta small {
  display: block !important;
}

.qaStudentMeta b {
  color: #073e45 !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.qaStudentMeta small {
  margin-top: 3px !important;
  color: #477378 !important;
  font-size: 10px !important;
  line-height: 1.35 !important;
}

#qaInput {
  min-height: 50px !important;
  border: 1px solid #cbe5e2 !important;
  border-radius: 12px !important;
  padding: 14px !important;
  background: #f9fdfc !important;
}

#qaForm button {
  min-height: 50px !important;
  border-radius: 12px !important;
  font-weight: 900 !important;
}

.finalCommentCard,
.commentCard {
  display: grid !important;
  grid-template-columns: 52px minmax(0, 1fr) !important;
  gap: 14px !important;
  align-items: start !important;
  border: 1.5px solid #d4ebe8 !important;
  border-radius: 16px !important;
  box-shadow: 0 10px 22px rgba(8, 82, 89, .08) !important;
}

.commentTop {
  align-items: start !important;
}

.commentTop span b,
.commentTop span small {
  display: block !important;
}

.commentTop span b {
  color: #073e45 !important;
  font-size: 14px !important;
  font-weight: 900 !important;
}

.commentTop span small {
  margin-top: 2px !important;
  color: #5d7e82 !important;
  font-size: 10px !important;
  font-weight: 700 !important;
}

@media (max-width: 768px) {
  aside#side .profile {
    grid-template-columns: 78px minmax(0, 1fr) !important;
    min-height: 126px !important;
  }

  #qaForm {
    grid-template-columns: 46px minmax(0, 1fr) !important;
  }

  .qaStudentMeta {
    grid-column: 2 / 3 !important;
  }

  #qaInput,
  #qaForm button {
    grid-column: 1 / -1 !important;
  }
}

/* Final sidebar profile fit: compact avatar, readable greeting, clear joined-date chip */
aside#side .profile {
  grid-template-columns: 76px minmax(0, 1fr) !important;
  min-height: 138px !important;
  padding: 16px 14px !important;
  gap: 12px !important;
  align-items: center !important;
}

aside#side .profile .avatar,
aside#side .avatar {
  width: 72px !important;
  height: 72px !important;
  min-width: 72px !important;
  min-height: 72px !important;
  border-radius: 18px !important;
}

aside#side .profile p {
  min-width: 0 !important;
}

aside#side .profile p b {
  font-size: 16px !important;
  line-height: 1.22 !important;
  overflow-wrap: anywhere !important;
}

aside#side .profile p small {
  font-size: 10.5px !important;
  line-height: 1.35 !important;
}

aside#side .profile::before {
  right: 10px !important;
  top: 10px !important;
  width: 24px !important;
  height: 24px !important;
  font-size: 12px !important;
  opacity: .9 !important;
}

.profileJoinDate {
  max-width: 100% !important;
  padding: 5px 7px !important;
  border-radius: 9px !important;
  font-size: 9.5px !important;
  font-style: normal !important;
  color: #ffffff !important;
  background: rgba(255,255,255,.14) !important;
  border: 1px solid rgba(255,255,255,.16) !important;
}

.profileJoinDate::before {
  content: "◷ ";
  color: #ffe178;
}

.qaStudentMeta b::before {
  content: "👤 ";
}

@media (max-width: 768px) {
  aside#side .profile {
    grid-template-columns: 74px minmax(0, 1fr) !important;
    min-height: 128px !important;
    padding: 14px !important;
  }

  aside#side .profile .avatar,
  aside#side .avatar {
    width: 68px !important;
    height: 68px !important;
    min-width: 68px !important;
    min-height: 68px !important;
    border-radius: 17px !important;
  }
}

/* Final learner profile: no time row, popup owns avatar upload */
aside#side .profile {
  grid-template-columns: 72px minmax(0, 1fr) !important;
  min-height: 146px !important;
  padding: 14px !important;
  gap: 12px !important;
  border: 1px solid rgba(158,213,209,.22) !important;
  border-radius: 16px !important;
  background: linear-gradient(145deg, rgba(255,255,255,.08), rgba(255,255,255,.035)) !important;
}

aside#side .profile .avatar,
aside#side .avatar {
  width: 70px !important;
  height: 70px !important;
  min-width: 70px !important;
  min-height: 70px !important;
  border-radius: 18px !important;
  cursor: pointer !important;
}

aside#side .profile .avatar img,
aside#side .avatar .customAvatarImg,
.profile .customAvatarImg {
  border-radius: 16px !important;
}

aside#side .profile p {
  gap: 4px !important;
}

aside#side .profile p b {
  font-size: 15px !important;
  line-height: 1.22 !important;
}

aside#side .profile p small {
  font-size: 10px !important;
  line-height: 1.32 !important;
}

.profileJoinDate {
  margin-top: 4px !important;
  padding: 4px 7px !important;
  font-size: 9px !important;
  line-height: 1.25 !important;
  color: #e9fffb !important;
}

.profileOpenLink {
  width: fit-content !important;
  margin-top: 5px !important;
  padding: 6px 10px !important;
  border: 1px solid rgba(99,193,187,.55) !important;
  border-radius: 999px !important;
  background: rgba(99,193,187,.16) !important;
  color: #ffffff !important;
  font-size: 10px !important;
  font-weight: 900 !important;
  box-shadow: none !important;
}

.profileOpenLink::before {
  content: "▣ ";
  color: #ffe178;
}

.profileOpenLink:hover {
  background: rgba(99,193,187,.28) !important;
  transform: translateY(-1px);
}

.learnerProfileModal {
  position: fixed;
  inset: 0;
  z-index: 260;
  display: none;
  place-items: center;
  padding: 18px;
}

.learnerProfileModal.open {
  display: grid;
}

.learnerProfileShade {
  position: absolute;
  inset: 0;
  background: rgba(4, 37, 42, .62);
  backdrop-filter: blur(12px);
}

.learnerProfileCard {
  position: relative;
  width: min(760px, calc(100vw - 28px));
  max-height: calc(100vh - 32px);
  overflow: auto;
  border: 1.5px solid rgba(158,213,209,.48);
  border-radius: 22px;
  background:
    radial-gradient(circle at 18% 18%, rgba(99,193,187,.18), transparent 32%),
    linear-gradient(145deg, #073f47, #0b5f67 58%, #083b43);
  color: #ffffff;
  box-shadow: 0 30px 90px rgba(0,0,0,.36);
}

.learnerProfileClose {
  position: absolute;
  right: 16px;
  top: 16px;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(255,255,255,.24);
  border-radius: 13px;
  background: rgba(255,255,255,.12);
  color: #ffffff;
  font-size: 20px;
  font-weight: 900;
}

.learnerProfileHero {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 24px;
  align-items: center;
  padding: 36px 38px 26px;
  border-bottom: 1px solid rgba(255,255,255,.12);
}

.learnerProfileAvatar {
  width: 142px;
  height: 142px;
  border-radius: 28px;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: linear-gradient(135deg, #73d79a, #11636c);
  border: 3px solid rgba(126,225,186,.8);
  box-shadow: 0 18px 40px rgba(0,0,0,.28);
}

.learnerProfileAvatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.learnerProfileAvatar b {
  color: #ffffff;
  font-size: 44px;
  font-weight: 900;
}

.learnerProfileTitle span {
  color: #7ee1ba;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 1.5px;
}

.learnerProfileTitle h2 {
  margin: 8px 0 4px;
  color: #ffffff;
  font-size: clamp(28px, 4vw, 42px);
  line-height: 1.08;
}

.learnerProfileTitle p {
  margin: 0 0 16px;
  color: rgba(233,255,251,.76);
  font-weight: 700;
}

#learnerAvatarUpload {
  min-height: 42px;
  padding: 0 16px;
  border: 1px solid rgba(126,225,186,.62);
  border-radius: 999px;
  background: linear-gradient(135deg, #52c987, #17816f);
  color: #ffffff;
  font-weight: 900;
  box-shadow: 0 10px 22px rgba(0,0,0,.22);
}

#learnerAvatarUpload::before {
  content: "▤ ";
}

.learnerProfileGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding: 26px 38px 38px;
}

.learnerProfileItem {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 3px 12px;
  align-items: center;
  min-height: 74px;
  padding: 14px;
  border: 1px solid rgba(158,213,209,.22);
  border-radius: 16px;
  background: rgba(255,255,255,.07);
}

.learnerProfileItem i {
  grid-row: 1 / 3;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  background: rgba(126,225,186,.14);
  color: #7ee1ba;
  font-style: normal;
  font-weight: 900;
}

.learnerProfileItem span {
  color: rgba(233,255,251,.64);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .8px;
}

.learnerProfileItem b {
  min-width: 0;
  overflow-wrap: anywhere;
  color: #ffffff;
  font-size: 15px;
}

@media (max-width: 760px) {
  .learnerProfileCard {
    border-radius: 18px;
  }

  .learnerProfileHero {
    grid-template-columns: 92px minmax(0, 1fr);
    gap: 14px;
    padding: 28px 18px 20px;
  }

  .learnerProfileAvatar {
    width: 88px;
    height: 88px;
    border-radius: 22px;
  }

  .learnerProfileTitle h2 {
    font-size: 25px;
  }

  .learnerProfileGrid {
    grid-template-columns: 1fr;
    padding: 18px;
  }
}

/* Final fit for the sidebar member card requested in screenshot */
aside#side .profile {
  grid-template-columns: 78px minmax(0, 1fr) !important;
  min-height: 178px !important;
  padding: 16px 14px !important;
  gap: 14px !important;
  align-items: center !important;
  overflow: visible !important;
}

aside#side .profile .avatar,
aside#side .avatar {
  width: 76px !important;
  height: 76px !important;
  min-width: 76px !important;
  min-height: 76px !important;
  border-radius: 18px !important;
}

aside#side .profile p {
  min-width: 0 !important;
  display: grid !important;
  gap: 6px !important;
  align-content: center !important;
}

aside#side .profile p b {
  font-size: 16px !important;
  line-height: 1.22 !important;
  max-width: 100% !important;
  overflow-wrap: normal !important;
}

aside#side .profile p small {
  font-size: 10.5px !important;
  line-height: 1.36 !important;
  max-width: 100% !important;
  overflow-wrap: anywhere !important;
}

aside#side .profile .profileJoinDate {
  width: 100% !important;
  max-width: 100% !important;
  margin-top: 2px !important;
  padding: 6px 8px !important;
  font-size: 9.5px !important;
  line-height: 1.28 !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}

aside#side .profile .profileOpenLink {
  width: 100% !important;
  margin-top: 2px !important;
  padding: 7px 10px !important;
  text-align: center !important;
  justify-content: center !important;
}

@media (max-width: 760px) {
  aside#side .profile {
    grid-template-columns: 76px minmax(0, 1fr) !important;
    min-height: 174px !important;
    padding: 15px 13px !important;
  }

  aside#side .profile .avatar,
  aside#side .avatar {
    width: 72px !important;
    height: 72px !important;
    min-width: 72px !important;
    min-height: 72px !important;
  }
}

/* Final requested arrangement: profile button under avatar, wider readable text area */
aside#side .profile {
  grid-template-columns: 82px minmax(0, 1fr) !important;
  min-height: 186px !important;
  padding: 17px 14px !important;
  gap: 14px !important;
  align-items: center !important;
}

aside#side .profile .avatar,
aside#side .avatar {
  align-self: center !important;
  width: 78px !important;
  height: 78px !important;
  min-width: 78px !important;
  min-height: 78px !important;
}

aside#side .profile .profileOpenLink {
  grid-column: 1 / 2 !important;
  grid-row: 2 !important;
  width: 78px !important;
  min-height: 30px !important;
  margin-top: -8px !important;
  padding: 6px 4px !important;
  font-size: 9.5px !important;
  line-height: 1 !important;
}

aside#side .profile p {
  grid-column: 2 / 3 !important;
  grid-row: 1 / 3 !important;
  align-self: center !important;
  gap: 7px !important;
}

aside#side .profile p b {
  font-size: 16px !important;
  line-height: 1.22 !important;
}

aside#side .profile p small {
  font-size: 10.5px !important;
  line-height: 1.35 !important;
}

aside#side .profile .profileJoinDate {
  padding: 7px 8px !important;
  font-size: 9.5px !important;
  line-height: 1.25 !important;
}

/* Final cleanup: profile button under avatar, plain join date, no floating hand icon */
aside#side .profile::before,
aside#side .profile::after {
  content: none !important;
  display: none !important;
}

aside#side .profile {
  display: grid !important;
  grid-template-columns: 82px minmax(0, 1fr) !important;
  grid-template-rows: auto auto !important;
  min-height: 190px !important;
  align-items: center !important;
}

aside#side .profile .avatar {
  grid-column: 1 !important;
  grid-row: 1 !important;
  justify-self: center !important;
}

aside#side .profile > .profileOpenLink {
  grid-column: 1 !important;
  grid-row: 2 !important;
  justify-self: center !important;
  align-self: start !important;
  width: 78px !important;
  margin: 8px 0 0 !important;
}

aside#side .profile > p {
  grid-column: 2 !important;
  grid-row: 1 / 3 !important;
  align-self: center !important;
}

aside#side .profile .profileJoinDate::before,
.profileJoinDate::before {
  content: none !important;
  display: none !important;
}

aside#side .profile .profileJoinDate {
  padding-left: 8px !important;
  text-align: left !important;
}

/* Remove legacy camera/upload icon from avatar */
aside#side .avatar::after,
aside#side .profile .avatar::after,
.profile .avatar::after {
  content: none !important;
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

/* Final larger learner card/avatar in sidebar */
aside#side .profile {
  grid-template-columns: 94px minmax(0, 1fr) !important;
  min-height: 214px !important;
  padding: 18px 16px !important;
  gap: 14px !important;
}

aside#side .profile .avatar,
aside#side .avatar {
  width: 90px !important;
  height: 90px !important;
  min-width: 90px !important;
  min-height: 90px !important;
  border-radius: 20px !important;
}

aside#side .profile .avatar img,
aside#side .avatar .customAvatarImg,
.profile .customAvatarImg {
  border-radius: 18px !important;
}

aside#side .profile > .profileOpenLink {
  width: 90px !important;
  min-height: 34px !important;
  margin-top: 10px !important;
  font-size: 10px !important;
}

aside#side .profile > p {
  gap: 8px !important;
}

aside#side .profile p b {
  font-size: 17px !important;
}

aside#side .profile p small {
  font-size: 10.5px !important;
}

aside#side .profile .profileJoinDate {
  padding: 8px 9px !important;
}

/* Final sidebar fit: prevent support/profile text from being clipped */
.app {
  grid-template-columns: 284px 1fr !important;
}

aside#side {
  width: 284px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  scrollbar-width: thin;
  scrollbar-color: rgba(158,213,209,.55) transparent;
}

main {
  margin-left: 20px;
}

aside#side .profile {
  width: 100% !important;
  grid-template-columns: 92px minmax(0, 1fr) !important;
  min-height: 214px !important;
  overflow: hidden !important;
}

aside#side .profile .avatar,
aside#side .avatar {
  width: 88px !important;
  height: 88px !important;
  min-width: 88px !important;
  min-height: 88px !important;
}

aside#side .profile > .profileOpenLink {
  width: 88px !important;
}

aside#side .profile .profileJoinDate {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  padding: 7px 8px !important;
  font-size: 9px !important;
  line-height: 1.25 !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: normal !important;
}

aside#side .profile p small {
  font-size: 10px !important;
}

aside#side .help {
  flex: 0 0 auto !important;
  margin-top: 16px !important;
  margin-bottom: 18px !important;
}

@media (max-width: 760px) {
  .app {
    grid-template-columns: 1fr !important;
  }

  aside#side {
    width: min(284px, 86vw) !important;
  }

  main {
    margin-left: 0;
  }
}

/* Keep the support card visible after enlarging the profile card */
.app > main {
  grid-column: 2 !important;
  margin-left: 0 !important;
}

aside#side .brand {
  margin-bottom: 22px !important;
}

aside#side .overall {
  margin: 18px 4px !important;
}

aside#side nav {
  gap: 6px !important;
}

aside#side nav a {
  min-height: 54px !important;
  padding: 10px 14px !important;
}

aside#side .help {
  min-height: 52px !important;
  padding: 11px 13px !important;
}

/* Final profile cleanup: remove joined date and sharpen popup icons */
aside#side .profileJoinDate,
aside#side .profile .profileJoinDate {
  display: none !important;
}

.learnerProfileItem i {
  background: linear-gradient(135deg, rgba(126,225,186,.32), rgba(58,146,149,.24)) !important;
  color: #baffea !important;
  border: 1px solid rgba(126,225,186,.32) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), 0 10px 20px rgba(0,0,0,.14) !important;
  font-size: 17px !important;
}

.learnerProfileItem span {
  color: #bfe9e4 !important;
}

.learnerProfileItem b {
  color: #ffffff !important;
}

.learnerProfileItem.profileInfo-id i { color: #9df0ff !important; }
.learnerProfileItem.profileInfo-phone i { color: #7ee1ba !important; }
.learnerProfileItem.profileInfo-email i { color: #a7d8ff !important; }
.learnerProfileItem.profileInfo-role i { color: #ffe178 !important; }
.learnerProfileItem.profileInfo-access i { color: #c9b8ff !important; }
.learnerProfileItem.profileInfo-status i { color: #7ff0a8 !important; }

/* Final admin content library: filters and placement clarity */
.contentAdminTools {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

.contentAdminTools select {
  min-height: 42px;
  min-width: 210px;
  border: 1.5px solid #b7deda;
  border-radius: 12px;
  background: #ffffff;
  color: #073e45;
  font-weight: 800;
  padding: 0 12px;
  outline: 0;
}

.adminTable .adminHead,
.adminContentRow {
  grid-template-columns: minmax(280px, 1.6fr) minmax(130px, .7fr) minmax(180px, .9fr) minmax(160px, .8fr) minmax(120px, .6fr) minmax(120px, .6fr) !important;
}

.unifiedContentRow .placementPill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: 7px 11px;
  border-radius: 999px;
  background: #e7f7f4;
  color: #075f68;
  border: 1px solid #b7e4de;
  font-size: 11px;
  font-weight: 900;
  box-shadow: 0 8px 18px rgba(7, 95, 104, .08);
}

.unifiedContentRow .adminRoute {
  margin-top: 6px;
  color: #27757b !important;
  font-weight: 800;
}

.unifiedContentRow > span:nth-child(2) {
  color: #073e45;
  font-weight: 900;
}

.unifiedContentRow > span:nth-child(2) i {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  margin-right: 7px;
  border-radius: 9px;
  background: #dff4f0;
  color: #075f68;
  font-style: normal;
}

/* Final profile card composition based on the provided reference */
aside#side .profile {
  display: grid !important;
  grid-template-columns: 116px minmax(0, 1fr) !important;
  grid-template-rows: 126px auto !important;
  min-height: 236px !important;
  padding: 16px !important;
  gap: 14px 14px !important;
  align-items: center !important;
  border-radius: 22px !important;
  border: 1.5px solid rgba(111, 218, 210, .34) !important;
  background:
    radial-gradient(circle at 24% 15%, rgba(126,225,186,.12), transparent 38%),
    linear-gradient(145deg, rgba(255,255,255,.09), rgba(255,255,255,.035)) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.045), 0 16px 34px rgba(0,0,0,.12) !important;
  overflow: hidden !important;
}

aside#side .profile .avatar,
aside#side .avatar {
  grid-column: 1 !important;
  grid-row: 1 !important;
  justify-self: center !important;
  align-self: center !important;
  width: 112px !important;
  height: 112px !important;
  min-width: 112px !important;
  min-height: 112px !important;
  border-radius: 24px !important;
  border: 3px solid rgba(158, 213, 209, .92) !important;
  box-shadow: 0 14px 28px rgba(0,0,0,.22), inset 0 0 0 2px rgba(255,255,255,.08) !important;
}

aside#side .profile .avatar img,
aside#side .avatar .customAvatarImg,
.profile .customAvatarImg {
  border-radius: 20px !important;
}

aside#side .profile > p {
  grid-column: 2 !important;
  grid-row: 1 !important;
  align-self: center !important;
  display: grid !important;
  gap: 8px !important;
  min-width: 0 !important;
}

aside#side .profile p b {
  font-size: 20px !important;
  line-height: 1.12 !important;
  color: #ffffff !important;
  text-shadow: 0 2px 8px rgba(0,0,0,.18) !important;
}

aside#side .profile p small {
  display: grid !important;
  gap: 9px !important;
  font-size: 11px !important;
  line-height: 1.45 !important;
  color: #e6fffb !important;
}

aside#side .profile p small::before {
  content: "✦";
  display: block;
  width: 100%;
  color: #ffe178;
  font-size: 22px;
  line-height: 1;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(111, 218, 210, .42);
}

aside#side .profile > .profileOpenLink {
  grid-column: 1 / -1 !important;
  grid-row: 2 !important;
  justify-self: stretch !important;
  width: 100% !important;
  min-height: 52px !important;
  margin: 0 !important;
  padding: 0 16px !important;
  border-radius: 16px !important;
  border: 1.5px solid rgba(111, 218, 210, .42) !important;
  background: linear-gradient(135deg, rgba(18, 101, 109, .82), rgba(8, 79, 88, .78)) !important;
  color: #ffffff !important;
  font-size: 15px !important;
  font-weight: 900 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 9px !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.045), 0 10px 22px rgba(0,0,0,.14) !important;
}

aside#side .profile > .profileOpenLink::before {
  content: "▣" !important;
  display: inline-grid !important;
  place-items: center !important;
  width: 24px !important;
  height: 24px !important;
  border-radius: 7px !important;
  background: #ffd95a !important;
  color: #073e45 !important;
  font-size: 14px !important;
}

/* Final admin table contrast: make member headers readable */
.memberTable .memberHead,
.adminTable .adminHead,
.memberRow.memberHead,
.adminRow.adminHead {
  background: linear-gradient(135deg, #075f68, #0d7f88) !important;
  color: #ffffff !important;
  border: 0 !important;
  border-radius: 12px !important;
  box-shadow: 0 12px 26px rgba(7, 95, 104, .18) !important;
}

.memberTable .memberHead span,
.adminTable .adminHead span,
.memberRow.memberHead span,
.adminRow.adminHead span {
  color: #ffffff !important;
  font-weight: 900 !important;
  text-shadow: none !important;
  background: transparent !important;
  letter-spacing: .7px !important;
}

.memberTable .memberHead span::selection,
.adminTable .adminHead span::selection,
.memberRow.memberHead span::selection,
.adminRow.adminHead span::selection {
  background: rgba(255,255,255,.22) !important;
  color: #ffffff !important;
}

.memberWorkspace,
.adminWorkspace {
  color: #073e45 !important;
}

/* Final sidebar profile layout: match the provided avatar reference */
.app {
  grid-template-columns: 330px 1fr !important;
}

aside#side {
  width: 330px !important;
  padding: 28px 26px 22px !important;
}

.app > main {
  grid-column: 2 !important;
  margin-left: 0 !important;
}

aside#side .profile {
  width: 100% !important;
  min-height: 292px !important;
  padding: 18px !important;
  display: grid !important;
  grid-template-columns: 132px minmax(0, 1fr) !important;
  grid-template-rows: 166px 56px !important;
  column-gap: 18px !important;
  row-gap: 16px !important;
  align-items: center !important;
  border-radius: 24px !important;
  background:
    radial-gradient(circle at 22% 16%, rgba(126, 225, 186, .18), transparent 42%),
    linear-gradient(145deg, rgba(255,255,255,.105), rgba(255,255,255,.04)) !important;
  border: 1.5px solid rgba(127, 218, 211, .34) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.045), 0 18px 34px rgba(0,0,0,.16) !important;
  overflow: hidden !important;
}

aside#side .profile .avatar,
aside#side .avatar {
  grid-column: 1 !important;
  grid-row: 1 !important;
  align-self: center !important;
  justify-self: center !important;
  width: 132px !important;
  height: 132px !important;
  min-width: 132px !important;
  min-height: 132px !important;
  border-radius: 25px !important;
  border: 3px solid rgba(172, 229, 219, .94) !important;
  box-shadow: 0 18px 34px rgba(0,0,0,.24), inset 0 0 0 2px rgba(255,255,255,.08) !important;
}

aside#side .profile .avatar img,
aside#side .avatar .customAvatarImg,
.profile .customAvatarImg {
  border-radius: 20px !important;
}

aside#side .profile > p {
  grid-column: 2 !important;
  grid-row: 1 !important;
  align-self: center !important;
  display: block !important;
  min-width: 0 !important;
  margin: 0 !important;
}

aside#side .profile p b {
  display: block !important;
  max-width: 100% !important;
  font-size: 20px !important;
  line-height: 1.12 !important;
  color: #ffffff !important;
  overflow-wrap: anywhere !important;
  text-shadow: 0 2px 8px rgba(0,0,0,.2) !important;
}

aside#side .profile p small {
  display: block !important;
  margin-top: 12px !important;
  font-size: 13px !important;
  line-height: 1.45 !important;
  color: #ecfffb !important;
  overflow-wrap: anywhere !important;
}

aside#side .profile p small::before {
  content: "★" !important;
  display: block !important;
  width: 100% !important;
  margin-bottom: 12px !important;
  padding-bottom: 12px !important;
  border-bottom: 1px solid rgba(111, 218, 210, .42) !important;
  color: #ffd95a !important;
  font-size: 24px !important;
  line-height: 1 !important;
}

aside#side .profile > .profileOpenLink {
  grid-column: 1 / -1 !important;
  grid-row: 2 !important;
  align-self: stretch !important;
  justify-self: stretch !important;
  width: 100% !important;
  min-height: 56px !important;
  margin: 0 !important;
  border-radius: 17px !important;
  border: 1.5px solid rgba(111, 218, 210, .42) !important;
  background: linear-gradient(135deg, rgba(18, 101, 109, .86), rgba(8, 79, 88, .82)) !important;
  color: #ffffff !important;
  font-size: 16px !important;
  font-weight: 900 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.055), 0 12px 24px rgba(0,0,0,.16) !important;
}

aside#side .profile > .profileOpenLink::before {
  content: "ID" !important;
  display: inline-grid !important;
  place-items: center !important;
  width: 29px !important;
  height: 24px !important;
  border-radius: 7px !important;
  background: #ffd95a !important;
  color: #073e45 !important;
  font-size: 11px !important;
  font-weight: 1000 !important;
  letter-spacing: 0 !important;
}

@media (max-width: 900px) {
  .app {
    grid-template-columns: 1fr !important;
  }

  aside#side {
    width: min(330px, 86vw) !important;
  }
}

/* Wider profile card pass: give the greeting the same spacious feel as the mockup */
@media (min-width: 901px) {
  .app {
    grid-template-columns: 360px 1fr !important;
  }

  aside#side {
    width: 360px !important;
    padding-inline: 24px !important;
  }

  aside#side .profile {
    min-height: 266px !important;
    grid-template-columns: 118px minmax(0, 1fr) !important;
    grid-template-rows: 148px 54px !important;
    column-gap: 15px !important;
    padding: 17px !important;
  }

  aside#side .profile .avatar,
  aside#side .avatar {
    width: 118px !important;
    height: 118px !important;
    min-width: 118px !important;
    min-height: 118px !important;
    border-radius: 23px !important;
  }

  aside#side .profile .avatar img,
  aside#side .avatar .customAvatarImg,
  .profile .customAvatarImg {
    border-radius: 18px !important;
  }

  aside#side .profile p b {
    font-size: 20px !important;
  }

  aside#side .profile p small {
    font-size: 12px !important;
  }

  aside#side .profile > .profileOpenLink {
    min-height: 54px !important;
  }
}

/* Fit the full sidebar on a 720px desktop viewport */
@media (min-width: 901px) {
  aside#side {
    padding: 20px 24px 16px !important;
    gap: 0 !important;
  }

  aside#side .brand {
    min-height: 58px !important;
    padding-bottom: 14px !important;
    margin-bottom: 18px !important;
  }

  aside#side .brand i {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    font-size: 30px !important;
  }

  aside#side .brand b {
    font-size: 17px !important;
    line-height: 1.1 !important;
  }

  aside#side .brand small {
    font-size: 9px !important;
    margin-top: 4px !important;
  }

  aside#side .profile {
    min-height: 218px !important;
    grid-template-columns: 98px minmax(0, 1fr) !important;
    grid-template-rows: 118px 46px !important;
    column-gap: 14px !important;
    row-gap: 12px !important;
    padding: 14px !important;
    margin-bottom: 18px !important;
  }

  aside#side .profile .avatar,
  aside#side .avatar {
    width: 98px !important;
    height: 98px !important;
    min-width: 98px !important;
    min-height: 98px !important;
    border-radius: 20px !important;
  }

  aside#side .profile .avatar img,
  aside#side .avatar .customAvatarImg,
  .profile .customAvatarImg {
    border-radius: 16px !important;
  }

  aside#side .profile p b {
    font-size: 18px !important;
    line-height: 1.1 !important;
  }

  aside#side .profile p small {
    margin-top: 8px !important;
    font-size: 11px !important;
    line-height: 1.35 !important;
  }

  aside#side .profile p small::before {
    margin-bottom: 8px !important;
    padding-bottom: 8px !important;
    font-size: 19px !important;
  }

  aside#side .profile > .profileOpenLink {
    min-height: 46px !important;
    border-radius: 14px !important;
    font-size: 14px !important;
  }

  aside#side .profile > .profileOpenLink::before {
    width: 25px !important;
    height: 21px !important;
    font-size: 10px !important;
  }

  aside#side .overall {
    height: 74px !important;
    margin-bottom: 14px !important;
    gap: 12px !important;
  }

  aside#side .overall .ring {
    width: 74px !important;
    height: 74px !important;
    min-width: 74px !important;
  }

  aside#side .overall .ring b {
    font-size: 21px !important;
  }

  aside#side .overall .ring small {
    font-size: 9px !important;
  }

  aside#side .overall p b {
    font-size: 15px !important;
  }

  aside#side .overall p small {
    font-size: 10px !important;
  }

  aside#side nav {
    gap: 7px !important;
    margin-bottom: 12px !important;
  }

  aside#side nav a {
    min-height: 43px !important;
    padding: 6px 12px !important;
    border-radius: 13px !important;
    gap: 12px !important;
    font-size: 13px !important;
  }

  aside#side nav a::first-letter {
    font-size: 15px !important;
  }

  aside#side .help {
    min-height: 50px !important;
    padding: 10px 12px !important;
    margin-top: 0 !important;
    border-radius: 13px !important;
  }

  aside#side .help p b {
    font-size: 12px !important;
  }

  aside#side .help p small {
    font-size: 9px !important;
  }
}

/* Final sidebar readability pass */
@media (min-width: 901px) {
  aside#side .overall p b {
    font-size: 17px !important;
    line-height: 1.15 !important;
  }

  aside#side .overall p small {
    font-size: 11px !important;
    line-height: 1.35 !important;
  }

  aside#side nav a {
    font-size: 15px !important;
    font-weight: 900 !important;
    line-height: 1.1 !important;
  }

  aside#side nav a span {
    font-size: 15px !important;
    font-weight: 900 !important;
  }

  aside#side .help p b {
    font-size: 14px !important;
    line-height: 1.15 !important;
  }

  aside#side .help p small {
    font-size: 10px !important;
    line-height: 1.25 !important;
  }
}

/* Smart article rendering for admin-created posts */
.smartArticle {
  display: grid;
  gap: 18px;
  color: #073e45;
}

.smartArticleLead {
  padding: 18px 20px;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(13,127,136,.12), rgba(111,218,210,.16));
  border: 1px solid rgba(13,127,136,.18);
  color: #073e45;
  font-size: 17px;
  line-height: 1.7;
  font-weight: 700;
}

.smartArticle h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 10px 0 0;
  color: #075f68;
  font-size: 24px;
  line-height: 1.22;
  letter-spacing: 0;
}

.smartArticle h3::before {
  content: "✦";
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: #ffd95a;
  color: #073e45;
  font-size: 16px;
  flex: 0 0 auto;
}

.smartArticle p {
  margin: 0;
  color: #174e55;
  font-size: 16px;
  line-height: 1.78;
  font-weight: 600;
}

.smartArticle p strong,
.smartArticle li strong {
  color: #075f68;
  font-weight: 900;
}

.smartArticle p em,
.smartArticle li em {
  color: #0d7f88;
  font-style: italic;
  font-weight: 800;
}

.smartArticle ul,
.smartArticle ol {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 18px 20px;
  border-radius: 18px;
  background: rgba(238, 251, 249, .88);
  border: 1px solid rgba(13,127,136,.16);
  list-style: none;
}

.smartArticle li {
  position: relative;
  padding-left: 34px;
  color: #123f45;
  font-size: 16px;
  line-height: 1.55;
  font-weight: 700;
}

.smartArticle li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 1px;
  display: grid;
  place-items: center;
  width: 23px;
  height: 23px;
  border-radius: 8px;
  background: #0d7f88;
  color: #fff;
  font-size: 12px;
}

.smartArticleQuote {
  padding: 18px 20px 18px 22px;
  border-left: 5px solid #ffd95a;
  border-radius: 16px;
  background: #073e45;
  color: #f4fffd;
  font-size: 17px;
  line-height: 1.65;
  font-weight: 800;
}

.smartComposerHint {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: center;
  margin: 12px 0 18px;
  padding: 14px 16px;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(13,127,136,.1), rgba(255,217,90,.14));
  border: 1px solid rgba(13,127,136,.18);
  color: #073e45;
}

.smartComposerHint i {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 13px;
  background: #075f68;
  color: #ffd95a;
  font-style: normal;
  font-weight: 900;
}

.smartComposerHint b {
  display: block;
  font-size: 14px;
  font-weight: 900;
}


.smartComposerHint small {
  display: block;
  margin-top: 3px;
  color: #4a7177;
  font-size: 11px;
  font-weight: 700;
}

/* ============================================================
   ✅ MASTERCLASS VN — DESIGN SYSTEM v2.0
   UI/UX Audit Fixes — 08/07/2026
   All issues from UI-AUDIT.md addressed below.
   No functionality changes. CSS-only improvements.
   ============================================================ */

/* -----------------------------------------------------------
   PHASE 1 · DESIGN TOKENS (M-01, M-03, M-05)
   Consolidated color, spacing, radius, z-index, shadow tokens.
   These override hardcoded values via higher specificity.
   ----------------------------------------------------------- */
:root {
  /* --- Color Palette (brand scale) --- */
  --brand-950: #031e21;
  --brand-900: #04292e;
  --brand-800: #063d43;
  --brand-750: #084b53;
  --brand-700: #0d5962;
  --brand-600: #105f68;   /* = legacy --p, primary action */
  --brand-500: #18828e;
  --brand-400: #3a9295;   /* = legacy --m */
  --brand-300: #63c1bb;   /* = legacy --a, accent */
  --brand-200: #9ed5d1;   /* = legacy --l */
  --brand-100: #c8e6e2;   /* = legacy --x */
  --brand-50:  #e3f4f0;
  --brand-25:  #f0f9f8;   /* = surface */

  /* --- Gold / Accent 2 --- */
  --gold-600: #d49a1c;
  --gold-500: #e7b84f;
  --gold-400: #ffd875;

  /* --- Semantic --- */
  --color-text-primary:   #0b3d43;
  --color-text-secondary: #2c6368;
  --color-text-muted:     #647b7e;
  --color-surface:        #f0f9f8;
  --color-border:         #bce2de;
  --color-border-light:   #dceceb;  /* = legacy --line */
  --color-danger:         #d9383a;
  --color-danger-light:   #fff0f0;
  --color-success:        #10b981;
  --color-success-light:  #d1fae5;
  --color-warning:        #f59e0b;

  /* --- Typography Scale --- */
  --text-2xs:  11px;  /* minimum WCAG accessible */
  --text-xs:   12px;
  --text-sm:   13px;
  --text-base: 15px;
  --text-md:   17px;
  --text-lg:   20px;
  --text-xl:   24px;
  --text-2xl:  28px;
  --text-3xl:  clamp(28px, 3vw, 36px);
  --text-hero: clamp(36px, 4.2vw, 62px);

  /* --- Line Height --- */
  --leading-tight:  1.25;
  --leading-snug:   1.4;
  --leading-normal: 1.55;
  --leading-relaxed:1.7;
  --leading-loose:  1.85;

  /* --- Border Radius (5-step scale) --- */
  --radius-xs:  6px;
  --radius-sm:  8px;
  --radius-md:  12px;
  --radius-lg:  16px;
  --radius-xl:  20px;
  --radius-2xl: 24px;
  --radius-3xl: 28px;
  --radius-full: 9999px;

  /* --- Spacing (4px base grid) --- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-7:  28px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* --- Shadow (5-step elevation) --- */
  --shadow-xs:  0 1px 3px rgba(16,95,104,.08);
  --shadow-sm:  0 4px 12px rgba(16,95,104,.10);
  --shadow-md:  0 8px 24px rgba(16,95,104,.12);
  --shadow-lg:  0 16px 40px rgba(16,95,104,.16);
  --shadow-xl:  0 28px 60px rgba(16,95,104,.22);
  --shadow-brand: 0 18px 55px rgba(16,95,104,.14);

  /* --- Z-Index Layer Map (M-05) --- */
  --z-below:    -1;
  --z-base:      0;
  --z-raised:   10;
  --z-header:   30;
  --z-sidebar:  50;
  --z-dropdown: 100;
  --z-modal:    200;
  --z-toast:    300;
  --z-tooltip:  400;
  --z-top:      9999;

  /* --- Transition --- */
  --transition-fast:   0.15s ease;
  --transition-base:   0.25s ease;
  --transition-slow:   0.4s cubic-bezier(.2,.8,.2,1);
}

/* -----------------------------------------------------------
   PHASE 2 · TYPOGRAPHY FIXES (M-02)
   Raise all sub-11px text to minimum 11px (WCAG 1.4.4)
   ----------------------------------------------------------- */

/* Fix 6px → 11px: supportHub small */
.supportHub small { font-size: var(--text-2xs) !important; }

/* Fix 7px small texts → 11px */
.hubBadge,
.continueCard p,
.continueProgress span,
.continueVisual small,
.hubCard a,
.hubCard button,
.hubCard p,
.miniDays i,
.lessonText small,
.lessonText em,
.lesson .time small,
.chapterMeta small,
.courseAction > span,
.courseAction > small,
.managedCard span,
.managedCard p,
.managedCard button,
.publishedEmpty,
.qaItem b,
.qaItem p,
.qaItem small,
.qaPanel > small,
#qaForm textarea,
#qaForm button,
.slideContent > div > span,
.slideTag,
.pageFoot,
.adminStats small,
.adminStats em,
.adminRow,
.adminRow small,
.adminRow button,
.adminHead,
.adminMain > header span,
.adminTitle span,
.contentForm > span,
#contentForm > span,
#contentForm label,
#contentForm footer button,
.courseAction > small,
.tab small,
.videoBody footer button,
.videoBody footer label,
.tag,
.new,
.loginCard > small,
.loginCard > span,
.loginCard label,
.lessonText small,
.streak small,
.streak i,
.now > span,
.now > label {
  font-size: var(--text-2xs) !important;
}

/* Fix 8px → 12px: secondary labels */
.title > span,
.published .title > span,
.hubHeading > a,
.hubHeading p,
.hubHeading span,
.hubCard > span,
.toolCard span,
.articleBody > span,
.articleMeta,
.adminLink,
.accountBtn,
.managedCard h3,
.notes p,
.videoBody h3 { font-size: var(--text-xs) !important; }

/* Ensure body text is at least 13px */
.lessonText b { font-size: var(--text-sm) !important; }
.lesson > button { font-size: var(--text-sm) !important; }

/* -----------------------------------------------------------
   PHASE 3 · ACCESSIBILITY (m-02, m-09, m-11)
   ----------------------------------------------------------- */

/* m-02: Global focus-visible ring */
:focus-visible {
  outline: 3px solid var(--brand-300) !important;
  outline-offset: 2px !important;
  border-radius: var(--radius-sm) !important;
}

/* Allow clean override for round elements */
button:focus-visible,
[role="button"]:focus-visible {
  border-radius: var(--radius-md) !important;
}

/* m-09: prefers-reduced-motion — enforce with high specificity */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .siteProgressVisual {
    animation: none !important;
  }

  .hubCard:hover,
  .continueCard:hover,
  .videoCard:hover,
  .managedCard:hover,
  .module:hover,
  .lesson:hover,
  .toolCard:hover,
  .awards article:hover {
    transform: none !important;
  }
}

/* m-11: Close button hover — remove rotate, keep scale + color */
.loginClose:hover,
.registerClose:hover,
.memberClose:hover,
.articleClose:hover,
.forgotClose:hover,
.x:hover,
[data-close-login]:hover,
[data-close-register]:hover,
[data-close]:hover,
[data-close-quiz]:hover,
[data-close-cert]:hover,
[data-close-member]:hover,
[data-close-viewer]:hover,
[data-close-article]:hover,
[data-close-editor]:hover {
  transform: scale(1.1) !important;
  /* Remove the rotate(90deg) that was set by previous !important rule */
}

/* -----------------------------------------------------------
   PHASE 4 · COMPONENT POLISH (m-05, m-10, button states)
   ----------------------------------------------------------- */

/* m-10: Scope #save correctly */
.notes #save,
.notes button.primary {
  background: linear-gradient(135deg, var(--brand-600), var(--brand-500)) !important;
  color: #fff !important;
  border: none !important;
  font-weight: 700 !important;
  cursor: pointer !important;
}

/* Button disabled state */
button:disabled,
button[disabled],
input:disabled {
  opacity: 0.45 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

button:disabled:hover,
button[disabled]:hover {
  transform: none !important;
  box-shadow: none !important;
}

/* registerModal: add shade overlay */
.registerModal {
  position: fixed !important;
  inset: 0 !important;
  z-index: var(--z-modal) !important;
  display: none !important;
  place-items: center !important;
  padding: 18px !important;
  background: rgba(6, 39, 42, 0.82) !important;
  backdrop-filter: blur(10px) !important;
}
.registerModal.open {
  display: grid !important;
}

/* Fix articleModal z-index conflict (was 120 in one place, 500 in another) */
.articleModal,
.contentViewer {
  z-index: var(--z-modal) !important;  /* 200 — consistent */
}

/* Fix quizModal, certificateModal, memberModal z-index */
.quizModal,
.certificateModal {
  z-index: calc(var(--z-modal) + 50) !important; /* 250 */
}
.memberModal {
  z-index: calc(var(--z-modal) + 50) !important;
}
.loginModal {
  z-index: calc(var(--z-modal) + 100) !important; /* 300 */
}
.contentEditor {
  z-index: calc(var(--z-modal) + 100) !important; /* 300 */
}
#toast {
  z-index: var(--z-toast) !important; /* 300 */
}

/* m-05: Fix anchor security attribute (CSS can't fix rel, but we note it) */

/* -----------------------------------------------------------
   PHASE 5 · ADMIN IMPROVEMENTS (M-06, M-07)
   ----------------------------------------------------------- */

/* M-07: Admin table responsive wrapper */
.adminTable {
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
  border-radius: var(--radius-md) !important;
}

@media (max-width: 768px) {
  /* Stacked table view on mobile */
  .adminRow {
    min-width: unset !important;
    grid-template-columns: 1fr !important;
    gap: var(--space-2) !important;
    padding: var(--space-4) !important;
    border: 1px solid var(--color-border-light) !important;
    border-radius: var(--radius-md) !important;
    margin-bottom: var(--space-2) !important;
  }

  .adminRow.adminHead {
    display: none !important; /* Hide table header on mobile */
  }

  .adminRow > span:before {
    font-size: var(--text-2xs) !important;
    font-weight: 800 !important;
    color: var(--color-text-muted) !important;
    letter-spacing: 0.08em !important;
    display: block !important;
    margin-bottom: 2px !important;
    text-transform: uppercase !important;
  }

  .adminRow > span:nth-child(1):before { content: "Nội dung"; }
  .adminRow > span:nth-child(2):before { content: "Loại"; }
  .adminRow > span:nth-child(3):before { content: "Ngày"; }
  .adminRow > span:nth-child(4):before { content: "Trạng thái"; }
  .adminRow > span:nth-child(5):before { content: "Thao tác"; }
}

/* M-06: Admin sidebar collapsed state — add tooltip labels */
@media (max-width: 900px) {
  .adminSide nav button {
    position: relative !important;
  }

  .adminSide nav button:first-letter {
    font-size: 20px !important;
    font-weight: 800 !important;
    color: #9ed5d1 !important;
  }

  /* Tooltip on hover */
  .adminSide nav button[data-label]:hover::after {
    content: attr(data-label) !important;
    position: absolute !important;
    left: calc(100% + 10px) !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    background: var(--brand-700) !important;
    color: #fff !important;
    padding: 5px 10px !important;
    border-radius: var(--radius-sm) !important;
    font-size: var(--text-2xs) !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
    z-index: var(--z-tooltip) !important;
    box-shadow: var(--shadow-md) !important;
    pointer-events: none !important;
  }
}

/* -----------------------------------------------------------
   PHASE 6 · GLOBAL CONSISTENCY POLISH
   ----------------------------------------------------------- */

/* Consistent font on admin table */
.adminRow {
  font-size: var(--text-sm) !important;
}
.adminRow small {
  font-size: var(--text-2xs) !important;
}
.adminRow button {
  font-size: var(--text-2xs) !important;
}
.adminHead {
  font-size: var(--text-2xs) !important;
}
.adminStats small {
  font-size: var(--text-2xs) !important;
}
.adminStats em {
  font-size: var(--text-2xs) !important;
}
.adminStats b {
  font-size: var(--text-xl) !important;
}

/* Unified border-radius for form inputs */
#contentForm input,
#contentForm select,
#contentForm textarea,
.loginCard input,
.notes textarea,
#note {
  border-radius: var(--radius-md) !important;
}

/* Consistent section padding — override the conflicting values */
.learnerHub {
  padding: var(--space-7) !important;
}

/* Make the homeSlider consistent — single definitive rule */
.homeSlider {
  max-width: calc(100% - 80px) !important;
  width: calc(100% - 80px) !important;
  margin: var(--space-8) auto var(--space-10) !important;
  border-radius: var(--radius-3xl) !important;
  box-sizing: border-box !important;
}

@media (max-width: 1050px) {
  .homeSlider {
    max-width: calc(100% - 68px) !important;
    width: calc(100% - 68px) !important;
    margin: var(--space-6) auto var(--space-8) !important;
  }
}

@media (max-width: 760px) {
  .homeSlider {
    max-width: calc(100% - 32px) !important;
    width: calc(100% - 32px) !important;
    margin: var(--space-5) auto var(--space-6) !important;
    border-radius: var(--radius-2xl) !important;
  }
}

/* Section container alignment — consistent max-width + centering */
.learnerHub,
.published,
.learningTools,
.videos,
.notes,
.awards {
  max-width: 1360px !important;
  width: calc(100% - 80px) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
}

@media (max-width: 760px) {
  .learnerHub,
  .published,
  .learningTools,
  .videos,
  .notes,
  .awards {
    width: calc(100% - 32px) !important;
  }
}

/* .dashboard width fix to not conflict with grid */
.dashboard {
  max-width: 1360px !important;
  width: calc(100% - 80px) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
  padding: 12px 0 34px !important;
}

@media (max-width: 760px) {
  .dashboard {
    width: calc(100% - 32px) !important;
    padding: 10px 0 25px !important;
  }
}

/* Fix awards grid — single template */
.awards > div:last-child {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important;
  gap: var(--space-5) !important;
  margin-top: var(--space-5) !important;
}

/* Fix continueCard padding — single value */
.continueCard {
  padding: var(--space-4) !important;
}

/* Consistent page footer */
.pageFoot {
  padding: var(--space-5) var(--space-8) var(--space-8) !important;
  font-size: var(--text-2xs) !important;
  color: var(--color-text-muted) !important;
}

/* Toast accessibility */
#toast {
  role: "status" !important; /* Note: role attr cannot be set in CSS, see HTML */
}

/* -----------------------------------------------------------
   MOBILE WEB APP FINAL PASS
   Android/iOS layout built from the desktop visual system.
   ----------------------------------------------------------- */
@media (max-width: 768px) {
  html,
  body {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    background: #eef8f6 !important;
  }

  body {
    color: #12373b !important;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }

  .app {
    display: block !important;
    width: 100% !important;
    min-height: 100dvh !important;
  }

  .app > main {
    width: 100% !important;
    min-width: 0 !important;
    padding-bottom: calc(20px + env(safe-area-inset-bottom)) !important;
  }

  body:not(.adminPage) header {
    position: sticky !important;
    top: 0 !important;
    z-index: 90 !important;
    display: grid !important;
    grid-template-columns: 44px 1fr 44px !important;
    gap: 10px !important;
    align-items: center !important;
    min-height: 72px !important;
    padding: calc(8px + env(safe-area-inset-top)) 14px 10px !important;
    background: rgba(246, 252, 251, .96) !important;
    border-bottom: 1px solid #cfe6e3 !important;
    box-shadow: 0 12px 30px rgba(7, 69, 76, .12) !important;
    backdrop-filter: blur(18px) !important;
  }

  #menu {
    display: grid !important;
    place-items: center !important;
    width: 44px !important;
    height: 44px !important;
    border: 1px solid #bfe0dc !important;
    border-radius: 14px !important;
    background: #ffffff !important;
    color: #105f68 !important;
    font-size: 20px !important;
    box-shadow: 0 8px 20px rgba(16, 95, 104, .12) !important;
  }

  body:not(.adminPage) header .tabs {
    order: 0 !important;
    grid-column: 2 / 3 !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 6px !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  body:not(.adminPage) header .tab {
    min-width: 0 !important;
    min-height: 44px !important;
    padding: 7px 8px !important;
    border-radius: 13px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    font-size: 0 !important;
    line-height: 1.2 !important;
    box-shadow: none !important;
  }

  body:not(.adminPage) header .tab i {
    width: 24px !important;
    height: 24px !important;
    flex: 0 0 auto !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 9px !important;
    font-size: 12px !important;
  }

  body:not(.adminPage) header .tab span {
    min-width: 0 !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    letter-spacing: 0 !important;
  }

  body:not(.adminPage) header .tab small {
    display: none !important;
  }

  .notificationBtn {
    grid-column: 3 / 4 !important;
    width: 44px !important;
    height: 44px !important;
    border: 1px solid #bfe0dc !important;
    border-radius: 14px !important;
    background: #fff !important;
    color: #105f68 !important;
    box-shadow: 0 8px 20px rgba(16, 95, 104, .12) !important;
  }

  body:not(.adminPage) header .search {
    grid-column: 1 / -1 !important;
    order: 4 !important;
    width: 100% !important;
    height: 46px !important;
    margin: 0 !important;
    padding: 0 13px !important;
    border-radius: 15px !important;
    background: #fff !important;
    border-color: #c7e2df !important;
  }

  body:not(.adminPage) header .registerBtn,
  body:not(.adminPage) header .memberButton {
    display: none !important;
  }

  header > .accountArea {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    order: 5 !important;
  }

  header > .accountArea > #accountButton,
  body:not(.adminPage) header > #accountButton {
    width: 100% !important;
    min-height: 44px !important;
    border-radius: 15px !important;
    background: linear-gradient(135deg, #105f68, #0b7279) !important;
    color: #fff !important;
    font-size: 12px !important;
    box-shadow: 0 12px 24px rgba(16, 95, 104, .22) !important;
  }

  aside#side {
    width: min(330px, 92vw) !important;
    max-width: 92vw !important;
    padding: calc(18px + env(safe-area-inset-top)) 16px calc(18px + env(safe-area-inset-bottom)) !important;
    transform: translateX(-105%) !important;
    transition: transform .24s ease !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    box-shadow: 24px 0 60px rgba(0, 35, 39, .34) !important;
  }

  aside#side.open {
    transform: translateX(0) !important;
  }

  #closeSide {
    display: grid !important;
    place-items: center !important;
    width: 36px !important;
    height: 36px !important;
    right: 12px !important;
    top: calc(12px + env(safe-area-inset-top)) !important;
    border-radius: 12px !important;
    background: rgba(255,255,255,.14) !important;
    color: #fff !important;
    font-size: 22px !important;
  }

  aside#side .brand {
    margin: 0 44px 16px 0 !important;
    gap: 10px !important;
  }

  aside#side .brand i {
    width: 44px !important;
    height: 44px !important;
    border-radius: 13px !important;
    font-size: 25px !important;
  }

  aside#side .brand b {
    font-size: 15px !important;
    line-height: 1.1 !important;
  }

  aside#side .brand small {
    font-size: 8px !important;
    letter-spacing: .9px !important;
  }

  aside#side .profile {
    width: 100% !important;
    min-height: 0 !important;
    margin: 0 0 16px !important;
    padding: 16px !important;
    display: grid !important;
    grid-template-columns: 116px 1fr !important;
    gap: 14px !important;
    align-items: center !important;
    border-radius: 22px !important;
    background: linear-gradient(145deg, rgba(255,255,255,.13), rgba(99,193,187,.09)) !important;
    border: 1px solid rgba(158,213,209,.35) !important;
    box-shadow: inset 0 1px rgba(255,255,255,.13), 0 16px 32px rgba(0, 35, 39, .2) !important;
  }

  aside#side .profile .avatar,
  aside#side .avatar {
    width: 116px !important;
    height: 116px !important;
    border-radius: 21px !important;
    border: 4px solid rgba(255,255,255,.84) !important;
    box-shadow: 0 12px 26px rgba(0,0,0,.22) !important;
  }

  aside#side .profile .avatar img,
  aside#side .avatar .customAvatarImg,
  .profile .customAvatarImg {
    border-radius: 16px !important;
    object-fit: cover !important;
    object-position: center !important;
  }

  aside#side .profile > p {
    min-width: 0 !important;
    margin: 0 !important;
    display: grid !important;
    gap: 8px !important;
  }

  aside#side .profile p b {
    font-size: 20px !important;
    line-height: 1.15 !important;
    color: #fff !important;
    text-shadow: 0 2px 10px rgba(0,0,0,.25) !important;
    overflow-wrap: anywhere !important;
  }

  aside#side .profile p small {
    font-size: 12px !important;
    line-height: 1.45 !important;
    color: #d7f4f1 !important;
    max-width: 100% !important;
  }

  aside#side .profile > .profileOpenLink {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    min-height: 46px !important;
    margin: 2px 0 0 !important;
    border-radius: 15px !important;
    font-size: 13px !important;
    justify-content: center !important;
  }

  aside#side .overall {
    margin: 12px 4px 16px !important;
    padding: 0 !important;
    gap: 14px !important;
  }

  aside#side .overall .ring {
    width: 76px !important;
    height: 76px !important;
  }

  aside#side .overall p b {
    font-size: 16px !important;
  }

  aside#side nav {
    gap: 8px !important;
  }

  aside#side nav a {
    min-height: 52px !important;
    padding: 9px 11px !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    border-radius: 16px !important;
  }

  aside#side nav a span {
    font-size: 13px !important;
    font-weight: 800 !important;
  }

  aside#side .help {
    margin-top: 14px !important;
    padding: 12px !important;
    border-radius: 16px !important;
    flex-shrink: 0 !important;
  }

  aside#side .help p b {
    font-size: 13px !important;
  }

  aside#side .help p small {
    font-size: 10px !important;
  }

  .homeSlider,
  .learnerHub,
  .dashboard,
  .published,
  .learningTools,
  .videos,
  .notes,
  .awards {
    width: calc(100% - 24px) !important;
    max-width: none !important;
    margin-left: 12px !important;
    margin-right: 12px !important;
    box-sizing: border-box !important;
  }

  .homeSlider {
    height: min(560px, calc(100dvh - 160px)) !important;
    min-height: 430px !important;
    margin-top: 14px !important;
    margin-bottom: 18px !important;
    border-radius: 22px !important;
  }

  .homeSlide {
    background-position: 66% center !important;
  }

  .homeSlide::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(0deg, rgba(6,62,68,.98) 0%, rgba(6,62,68,.88) 43%, rgba(6,62,68,.25) 100%) !important;
  }

  .slideContent {
    left: 18px !important;
    right: 18px !important;
    bottom: 54px !important;
    top: auto !important;
    transform: none !important;
    width: auto !important;
  }

  .slideTag {
    font-size: 8px !important;
    max-width: 100% !important;
    white-space: normal !important;
  }

  .slideContent h1 {
    font-size: clamp(27px, 8vw, 34px) !important;
    line-height: 1.13 !important;
    letter-spacing: 0 !important;
    margin: 12px 0 !important;
  }

  .slideContent > p {
    font-size: 13px !important;
    line-height: 1.58 !important;
    color: #e8fbf8 !important;
  }

  .slideContent > div {
    display: grid !important;
    gap: 10px !important;
    align-items: start !important;
  }

  .slideCta {
    width: 100% !important;
    min-height: 46px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 15px !important;
    font-size: 13px !important;
  }

  .slideArrow {
    top: 29% !important;
    width: 40px !important;
    height: 40px !important;
    background: rgba(5,47,52,.72) !important;
  }

  .slideNav {
    left: 18px !important;
    bottom: 20px !important;
  }

  .slideCount {
    right: 18px !important;
    bottom: 15px !important;
  }

  .learnerHub,
  .published,
  .learningTools,
  .videos,
  .notes,
  .awards,
  .curriculum,
  .now {
    padding: 16px !important;
    border-radius: 20px !important;
    border: 1px solid #d2e9e6 !important;
    box-shadow: 0 14px 36px rgba(16, 95, 104, .1) !important;
  }

  .hubHeading,
  .title {
    display: grid !important;
    gap: 6px !important;
    align-items: start !important;
    margin-bottom: 14px !important;
  }

  .hubHeading h2,
  .title p > b,
  .title h2,
  .published .title b,
  .learningTools .title b,
  .videos .title b,
  .notes h2,
  .awards .title b {
    font-size: 21px !important;
    line-height: 1.25 !important;
    letter-spacing: 0 !important;
    color: #103e43 !important;
    background: none !important;
    -webkit-background-clip: initial !important;
    background-clip: initial !important;
  }

  .hubHeading p,
  .title > span {
    font-size: 11px !important;
    line-height: 1.5 !important;
  }

  .hubGrid,
  .toolGrid,
  #publishedGrid,
  .publishedGrid,
  #videoGrid,
  .awards > div:last-child {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  .continueCard {
    grid-template-columns: 1fr !important;
    padding: 14px !important;
    border-radius: 18px !important;
  }

  .continueVisual,
  .managedMedia,
  .videoCard .thumb {
    height: auto !important;
    min-height: 180px !important;
    aspect-ratio: 16 / 10 !important;
    border-radius: 16px !important;
  }

  .hubCard,
  .toolCard,
  .managedCard,
  .videoCard,
  .awards article {
    min-height: 0 !important;
    border-radius: 18px !important;
    overflow: hidden !important;
    background: #fff !important;
    border: 1px solid #d7e9e7 !important;
    box-shadow: 0 10px 26px rgba(16, 95, 104, .08) !important;
  }

  .managedCard h3,
  .videoBody h3,
  .toolCard h3,
  .hubCard strong {
    font-size: 17px !important;
    line-height: 1.35 !important;
    min-height: 0 !important;
    color: #103e43 !important;
  }

  .managedCard p,
  .videoBody p,
  .toolCard p,
  .hubCard p {
    font-size: 12px !important;
    line-height: 1.55 !important;
    min-height: 0 !important;
  }

  .dashboard {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    padding: 0 !important;
  }

  .courseCover {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    padding: 14px !important;
    border-radius: 18px !important;
  }

  .courseImage {
    min-height: 190px !important;
    aspect-ratio: 16 / 10 !important;
  }

  .courseMain h2 {
    font-size: 21px !important;
    line-height: 1.25 !important;
  }

  .courseFacts {
    grid-template-columns: 1fr 1fr !important;
  }

  .module {
    border-radius: 17px !important;
    margin-top: 10px !important;
  }

  .module > .chapterHead,
  .module > button {
    grid-template-columns: 78px 1fr 24px !important;
    gap: 10px !important;
    padding: 13px !important;
  }

  .chapterMeta {
    display: none !important;
  }

  .modTitle b {
    font-size: 14px !important;
    line-height: 1.35 !important;
    color: #103e43 !important;
  }

  .module.open .modTitle b {
    color: #fff !important;
  }

  .lesson {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    padding: 13px !important;
  }

  .lesson > div {
    align-items: flex-start !important;
  }

  .lessonText b {
    font-size: 13px !important;
    line-height: 1.4 !important;
  }

  .lesson .time {
    display: inline-flex !important;
    width: max-content !important;
  }

  .lesson > button {
    width: 100% !important;
    min-height: 42px !important;
    border-radius: 13px !important;
    font-size: 12px !important;
  }

  .now {
    position: relative !important;
    top: auto !important;
    align-self: stretch !important;
  }

  .notes {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  .notes textarea,
  #note,
  #qaForm textarea {
    min-height: 120px !important;
    font-size: 16px !important;
    line-height: 1.55 !important;
  }

  .notes footer {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .notes footer small {
    max-width: none !important;
  }

  .notes footer button,
  #qaForm button,
  .toolCard button,
  .managedCard button,
  .videoBody footer button {
    width: 100% !important;
    min-height: 42px !important;
    border-radius: 13px !important;
    font-size: 12px !important;
  }

  .modal,
  .contentViewer,
  .articleModal,
  .loginModal,
  .registerModal,
  .memberModal,
  .quizModal,
  .certificateModal,
  .learnerProfileModal {
    padding: 10px !important;
    align-items: end !important;
  }

  .modal > article,
  .contentViewer article,
  .articleReader,
  .loginCard,
  .registerCard,
  .quizCard,
  .certificate,
  .learnerProfileCard {
    width: 100% !important;
    max-width: none !important;
    max-height: calc(100dvh - 20px) !important;
    overflow: auto !important;
    border-radius: 22px 22px 18px 18px !important;
  }

  .modal > article {
    display: grid !important;
    grid-template-rows: auto 1fr !important;
  }

  .frame {
    position: sticky !important;
    top: 0 !important;
    z-index: 2 !important;
    border-radius: 0 !important;
  }

  #qaForm {
    display: grid !important;
    grid-template-columns: 52px 1fr !important;
    gap: 10px !important;
  }

  #qaForm .qaAvatar {
    display: grid !important;
    width: 46px !important;
    height: 46px !important;
    border-radius: 14px !important;
  }

  #qaForm .qaStudentMeta {
    grid-column: 2 / 3 !important;
  }

  #qaForm textarea,
  #qaForm button {
    grid-column: 1 / -1 !important;
  }

  .commentCard {
    border-radius: 16px !important;
    padding: 12px !important;
  }

  .commentTop {
    align-items: flex-start !important;
    gap: 6px !important;
  }

  .commentTop time {
    font-size: 9px !important;
  }

  .learnerProfileHero {
    display: grid !important;
    grid-template-columns: 96px 1fr !important;
    gap: 14px !important;
    align-items: center !important;
  }

  .learnerProfileAvatar {
    width: 96px !important;
    height: 96px !important;
    border-radius: 20px !important;
  }

  .learnerProfileTitle h2 {
    font-size: 24px !important;
    line-height: 1.15 !important;
  }

  .learnerProfileGrid {
    grid-template-columns: 1fr !important;
  }

  #toast {
    left: 12px !important;
    right: 12px !important;
    bottom: calc(12px + env(safe-area-inset-bottom)) !important;
    width: auto !important;
    text-align: center !important;
    border-radius: 15px !important;
    font-size: 12px !important;
  }
}

@media (max-width: 430px) {
  body:not(.adminPage) header {
    grid-template-columns: 42px 1fr 42px !important;
    gap: 8px !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  body:not(.adminPage) header .tab {
    padding-inline: 5px !important;
  }

  body:not(.adminPage) header .tab span {
    font-size: 9px !important;
  }

  aside#side .profile {
    grid-template-columns: 102px 1fr !important;
    padding: 13px !important;
  }

  aside#side .profile .avatar,
  aside#side .avatar {
    width: 102px !important;
    height: 102px !important;
  }

  aside#side .profile p b {
    font-size: 18px !important;
  }

  .homeSlider {
    min-height: 400px !important;
    height: min(510px, calc(100dvh - 150px)) !important;
  }

  .slideContent h1 {
    font-size: 27px !important;
  }

  .learnerProfileHero {
    grid-template-columns: 1fr !important;
    text-align: center !important;
  }

  .learnerProfileAvatar {
    margin: 0 auto !important;
  }
}

/* Admin mobile should behave like an app screen, not a squeezed desktop table. */
@media (max-width: 768px) {
  body.adminPage {
    background: #eef8f6 !important;
    overflow-x: hidden !important;
  }

  .adminSide {
    position: sticky !important;
    top: 0 !important;
    z-index: 80 !important;
    width: 100% !important;
    height: auto !important;
    padding: calc(10px + env(safe-area-inset-top)) 12px 12px !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    border-radius: 0 0 22px 22px !important;
    box-shadow: 0 14px 34px rgba(5, 47, 52, .22) !important;
  }

  .adminSide .brand {
    margin: 0 !important;
  }

  .adminSide .brand b {
    font-size: 15px !important;
  }

  .adminSide nav {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 7px !important;
    overflow-x: auto !important;
    padding-bottom: 2px !important;
  }

  .adminSide nav button {
    min-height: 44px !important;
    padding: 8px 6px !important;
    display: grid !important;
    place-items: center !important;
    text-align: center !important;
    white-space: normal !important;
    border-radius: 13px !important;
    background: rgba(255,255,255,.1) !important;
    color: #e8fbf8 !important;
    font-size: 10px !important;
    line-height: 1.2 !important;
  }

  .adminSide nav button:first-letter {
    font-size: inherit !important;
  }

  .adminSide > a:last-child {
    display: none !important;
  }

  .adminMain {
    margin-left: 0 !important;
    padding: 14px 12px calc(20px + env(safe-area-inset-bottom)) !important;
  }

  .adminMain > header {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    padding: 0 !important;
  }

  .adminMain > header h1 {
    font-size: 23px !important;
    line-height: 1.2 !important;
  }

  .adminHeaderActions {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: 48px 1fr !important;
    gap: 10px !important;
  }

  .adminHeaderActions #newContent,
  .adminMain > header > #newContent {
    width: 100% !important;
    min-height: 48px !important;
    border-radius: 15px !important;
    font-size: 12px !important;
  }

  .adminStats {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    margin: 18px 0 !important;
  }

  .adminStats article,
  .adminWorkspace,
  .memberWorkspace,
  .questionWorkspace {
    border-radius: 20px !important;
    padding: 15px !important;
    box-shadow: 0 12px 32px rgba(16,95,104,.1) !important;
  }

  .adminTitle {
    display: grid !important;
    gap: 12px !important;
    align-items: start !important;
  }

  .adminTitle h2 {
    font-size: 21px !important;
    line-height: 1.25 !important;
  }

  .adminTitle input,
  .memberAdminActions input,
  .contentAdminTools select {
    width: 100% !important;
    min-height: 46px !important;
    border-radius: 14px !important;
    font-size: 13px !important;
  }

  .contentAdminTools,
  .memberAdminActions {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 9px !important;
  }

  .adminRow,
  .memberRow {
    min-width: 0 !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 9px !important;
    margin-bottom: 12px !important;
    padding: 14px !important;
    border: 1px solid #d7e9e7 !important;
    border-radius: 17px !important;
    background: #fff !important;
  }

  .adminRow.adminHead,
  .memberRow.memberHead {
    display: none !important;
  }

  .adminRow > span,
  .memberRow > span {
    min-width: 0 !important;
  }

  .adminRow b,
  .memberRow b {
    font-size: 14px !important;
    line-height: 1.35 !important;
    overflow-wrap: anywhere !important;
  }

  .adminRow small,
  .memberRow small {
    font-size: 11px !important;
    line-height: 1.45 !important;
  }

  .adminRow span:last-child,
  .memberRow span:last-child {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }

  .adminRow button,
  .memberRow select {
    width: 100% !important;
    min-height: 40px !important;
    border-radius: 12px !important;
    font-size: 12px !important;
  }

  .contentEditor {
    padding: 0 !important;
    align-items: stretch !important;
  }

  #contentForm {
    width: 100% !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
    padding: calc(18px + env(safe-area-inset-top)) 14px calc(20px + env(safe-area-inset-bottom)) !important;
  }

  #contentForm h2 {
    font-size: 24px !important;
    line-height: 1.2 !important;
    padding-right: 42px !important;
  }

  .formGrid,
  .formGrid.contentRouting {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  #contentForm input,
  #contentForm select,
  #contentForm textarea {
    min-height: 46px !important;
    border-radius: 14px !important;
    font-size: 14px !important;
  }

  #contentForm textarea.large {
    min-height: 170px !important;
  }

  #contentForm footer {
    position: sticky !important;
    bottom: 0 !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 9px !important;
    padding-top: 12px !important;
    background: linear-gradient(180deg, rgba(255,255,255,.82), #fff 42%) !important;
  }
}

/* Q&A identity polish: full student name with avatar beside the comment box. */
#qaForm {
  align-items: center !important;
}

/* Final author avatar sync: use the course author's portrait crop everywhere in articles. */
.authorBlock .authorPhoto,
.lessonCommerce .authorPhoto,
.instructorReply .instructorAvatar {
  background: #e5f3f1 !important;
  border-color: #63c1bb !important;
}

.authorBlock .authorPhoto img,
.lessonCommerce .authorPhoto img,
.instructorReply .instructorAvatar img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: 70% 24% !important;
  transform: scale(1.72) !important;
  transform-origin: 70% 24% !important;
}

.authorBlock .authorPhoto {
  width: 52px !important;
  height: 52px !important;
  box-shadow: 0 8px 18px rgba(16, 95, 104, 0.16) !important;
}

.authorBlock .authorPhoto img.authorAvatarImg,
.lessonCommerce .authorPhoto img.authorAvatarImg,
.instructorReply .instructorAvatar img.authorAvatarImg {
  object-position: center !important;
  transform: none !important;
  transform-origin: center !important;
  border-radius: 50% !important;
}

#qaForm .qaAvatar,
#qaForm .qaStudentAvatar {
  width: 52px !important;
  height: 52px !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  border: 1px solid #cfe8e5 !important;
  background: #e3f6f3 !important;
  box-shadow: 0 8px 18px rgba(16, 95, 104, .12) !important;
}

#qaForm .qaAvatar img,
#qaForm .qaStudentAvatar img,
.commentAvatar img {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  object-fit: cover !important;
  object-position: center !important;
}

#qaForm .qaStudentMeta {
  min-width: 150px !important;
  max-width: 210px !important;
}

#qaForm .qaStudentMeta b {
  display: block !important;
  max-width: 100% !important;
  color: #083f46 !important;
  font-size: 13px !important;
  line-height: 1.25 !important;
  font-weight: 900 !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}

#qaForm .qaStudentMeta small {
  display: block !important;
  margin-top: 3px !important;
  color: #54767a !important;
  font-size: 10px !important;
  line-height: 1.35 !important;
}

.finalCommentCard {
  display: grid !important;
  grid-template-columns: 52px 1fr !important;
  gap: 12px !important;
  align-items: start !important;
}

.finalCommentCard .commentAvatar {
  width: 52px !important;
  height: 52px !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  border: 1px solid #cfe8e5 !important;
  background: #e3f6f3 !important;
  box-shadow: 0 8px 18px rgba(16, 95, 104, .12) !important;
}

.finalCommentCard .commentTop {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 12px !important;
}

.finalCommentCard .commentTop span {
  min-width: 0 !important;
}

.finalCommentCard .commentTop b {
  display: block !important;
  color: #083f46 !important;
  font-size: 14px !important;
  line-height: 1.3 !important;
  font-weight: 900 !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}

.finalCommentCard .commentTop small {
  display: block !important;
  margin-top: 2px !important;
  color: #54767a !important;
  font-size: 10px !important;
  line-height: 1.35 !important;
}

@media (min-width: 769px) {
  #qaForm {
    grid-template-columns: 52px minmax(155px, 210px) 1fr auto !important;
    gap: 12px !important;
  }

  #qaForm textarea {
    min-height: 70px !important;
  }

  #qaForm button {
    min-width: 120px !important;
    min-height: 52px !important;
  }
}

@media (max-width: 768px) {
  #qaForm {
    grid-template-columns: 52px 1fr !important;
    gap: 10px !important;
  }

  #qaForm .qaStudentMeta {
    max-width: none !important;
    min-width: 0 !important;
  }

  #qaForm textarea,
  #qaForm button {
    grid-column: 1 / -1 !important;
  }

  .finalCommentCard {
    grid-template-columns: 46px 1fr !important;
  }

  .finalCommentCard .commentAvatar {
    width: 46px !important;
    height: 46px !important;
  }
}

/* Final mobile top-edge fix: remove the white strip above the app header. */
@media (max-width: 768px) {
  html,
  body,
  body:not(.adminPage),
  body:not(.adminPage) .app,
  body:not(.adminPage) .app > main {
    background: #eaf7f5 !important;
  }

  html,
  body {
    margin: 0 !important;
    padding: 0 !important;
    min-height: 100dvh !important;
  }

  body:not(.adminPage)::before {
    content: "" !important;
    position: fixed !important;
    z-index: 89 !important;
    left: 0 !important;
    right: 0 !important;
    top: 0 !important;
    height: calc(10px + env(safe-area-inset-top)) !important;
    background: #eaf7f5 !important;
    pointer-events: none !important;
  }

  body:not(.adminPage)::after {
    content: "" !important;
    position: fixed !important;
    z-index: 2147483647 !important;
    left: 0 !important;
    right: 0 !important;
    top: 0 !important;
    height: calc(8px + env(safe-area-inset-top)) !important;
    background: #d4e9e6 !important;
    pointer-events: none !important;
  }

  body:not(.adminPage) header {
    top: 0 !important;
    margin-top: 0 !important;
    background: #eaf7f5 !important;
    border-top: 0 !important;
    box-shadow: 0 10px 24px rgba(8, 82, 89, .10) !important;
  }

  body:not(.adminPage) .homeSlider {
    margin-top: 16px !important;
  }
}

/* Mobile rebuild v3: replace the stacked legacy mobile header and content flow. */
@media (max-width: 768px) {
  :root {
    --mobile-bg: #eaf7f5;
    --mobile-head-bg: #d4e9e6;
    --mobile-panel: #f7fcfb;
    --mobile-ink: #0b3f46;
    --mobile-muted: #5b777b;
    --mobile-line: #bfe2de;
    --mobile-teal: #106f78;
    --mobile-radius: 18px;
    --mobile-pad: 12px;
  }

  html,
  body,
  body:not(.adminPage),
  body:not(.adminPage) .app,
  body:not(.adminPage) main,
  body:not(.adminPage) .app > main {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    background: var(--mobile-bg) !important;
    overflow-x: hidden !important;
  }

  body:not(.adminPage) .app {
    display: block !important;
    min-height: 100dvh !important;
  }

  body:not(.adminPage) .app > main {
    display: block !important;
    padding: 0 0 calc(24px + env(safe-area-inset-bottom)) !important;
  }

  body:not(.adminPage) header {
    position: sticky !important;
    top: 0 !important;
    z-index: 180 !important;
    display: grid !important;
    grid-template-columns: 46px minmax(0, 1fr) !important;
    grid-auto-rows: auto !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: calc(10px + env(safe-area-inset-top)) var(--mobile-pad) 10px !important;
    background: linear-gradient(180deg, #c9dfdc 0%, var(--mobile-head-bg) 100%) !important;
    border: 0 !important;
    box-shadow: 0 8px 18px rgba(5, 76, 83, .10) !important;
    backdrop-filter: none !important;
  }

  body:not(.adminPage) header > #menu {
    grid-column: 1 !important;
    grid-row: 1 !important;
    display: grid !important;
    place-items: center !important;
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
    border: 0 !important;
    border-radius: 13px !important;
    background: #7f999b !important;
    color: #fff !important;
    font-size: 0 !important;
    box-shadow: 0 8px 18px rgba(5, 76, 83, .12) !important;
    position: relative !important;
    z-index: 170 !important;
  }

  body:not(.adminPage) header > #menu::before {
    content: "☰" !important;
    font-size: 24px !important;
    line-height: 1 !important;
  }

  body:not(.adminPage) header .tabs {
    grid-column: 2 !important;
    grid-row: 1 !important;
    order: 0 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, .92fr) !important;
    gap: 8px !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  body:not(.adminPage) header .tab {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 7px !important;
    min-width: 0 !important;
    width: 100% !important;
    min-height: 42px !important;
    max-height: 42px !important;
    padding: 7px 9px !important;
    border: 1px solid rgba(99, 193, 187, .28) !important;
    border-radius: 12px !important;
    background: rgba(255, 255, 255, .54) !important;
    color: rgba(16, 95, 104, .32) !important;
    box-shadow: none !important;
    opacity: 1 !important;
    overflow: hidden !important;
  }

  body:not(.adminPage) header .tab.active {
    background: linear-gradient(135deg, #0f7a83, #0b6670) !important;
    color: #fff !important;
    border-color: transparent !important;
    box-shadow: 0 8px 18px rgba(5, 76, 83, .20) !important;
  }

  body:not(.adminPage) header .tab i {
    display: grid !important;
    place-items: center !important;
    flex: 0 0 24px !important;
    width: 24px !important;
    height: 24px !important;
    border-radius: 8px !important;
    background: rgba(255, 255, 255, .22) !important;
    color: currentColor !important;
    font-size: 12px !important;
    font-style: normal !important;
  }

  body:not(.adminPage) header .tab span {
    display: block !important;
    min-width: 0 !important;
    color: currentColor !important;
    font-size: 10px !important;
    font-weight: 900 !important;
    line-height: 1.15 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    letter-spacing: 0 !important;
  }

  body:not(.adminPage) header .tab small {
    display: none !important;
  }

  body:not(.adminPage) header .search {
    grid-column: 1 / 5 !important;
    grid-row: 2 !important;
    order: 0 !important;
    display: flex !important;
    justify-self: stretch !important;
    align-self: stretch !important;
    width: 100% !important;
    max-width: none !important;
    height: 44px !important;
    min-height: 44px !important;
    margin: 0 !important;
    padding: 0 14px !important;
    border: 1px solid var(--mobile-line) !important;
    border-radius: 14px !important;
    background: #fff !important;
    color: #7dbfba !important;
    box-shadow: inset 0 2px 6px rgba(5, 76, 83, .08), 0 6px 14px rgba(5, 76, 83, .10) !important;
  }

  body:not(.adminPage) header .search input {
    color: var(--mobile-ink) !important;
    font-size: 14px !important;
    font-weight: 700 !important;
  }

  body:not(.adminPage) header .search input::placeholder {
    color: #9ed5d1 !important;
    opacity: 1 !important;
  }

  body:not(.adminPage) header > .accountArea,
  body:not(.adminPage) header > #accountButton,
  body:not(.adminPage) header > #registerButton,
  body:not(.adminPage) header > #memberButton,
  body:not(.adminPage) header > #notificationButton,
  body:not(.adminPage) header > .notificationBtn,
  body:not(.adminPage) header > .registerBtn,
  body:not(.adminPage) header > .memberButton,
  body:not(.adminPage) header > .notificationPanel {
    display: none !important;
  }

  body:not(.adminPage) .homeSlider,
  body:not(.adminPage) .learnerHub,
  body:not(.adminPage) .dashboard,
  body:not(.adminPage) .published,
  body:not(.adminPage) .learningTools,
  body:not(.adminPage) .videos,
  body:not(.adminPage) .notes,
  body:not(.adminPage) .awards {
    width: calc(100% - 24px) !important;
    max-width: none !important;
    margin: 18px 12px !important;
    padding: 16px !important;
    border-radius: var(--mobile-radius) !important;
    border: 1px solid var(--mobile-line) !important;
    background: var(--mobile-panel) !important;
    box-shadow: 0 12px 28px rgba(5, 76, 83, .10) !important;
  }

  body:not(.adminPage) .homeSlider {
    position: relative !important;
    height: clamp(460px, 72vh, 560px) !important;
    min-height: 460px !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: #073f46 !important;
  }

  body:not(.adminPage) .homeSlide {
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background-size: cover !important;
    background-position: 62% center !important;
  }

  body:not(.adminPage) .homeSlide::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(0deg, rgba(4, 61, 67, .98) 0%, rgba(4, 61, 67, .90) 45%, rgba(4, 61, 67, .28) 100%) !important;
  }

  body:not(.adminPage) .slideContent {
    position: absolute !important;
    z-index: 2 !important;
    left: 32px !important;
    right: 32px !important;
    bottom: 70px !important;
    top: auto !important;
    width: auto !important;
    transform: none !important;
    color: #fff !important;
  }

  body:not(.adminPage) .slideTag {
    display: inline-flex !important;
    max-width: 100% !important;
    padding: 7px 11px !important;
    border-radius: 999px !important;
    background: rgba(16, 111, 120, .86) !important;
    border: 1px solid rgba(158, 213, 209, .65) !important;
    color: #fff !important;
    font-size: 8px !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  body:not(.adminPage) .slideContent h1 {
    margin: 13px 0 10px !important;
    color: #fff !important;
    font-size: clamp(28px, 7.6vw, 36px) !important;
    line-height: 1.12 !important;
    letter-spacing: 0 !important;
    text-wrap: balance !important;
  }

  body:not(.adminPage) .slideContent h1 em {
    color: #fff !important;
  }

  body:not(.adminPage) .slideContent > p {
    margin: 0 !important;
    color: #fff !important;
    font-size: 13px !important;
    line-height: 1.55 !important;
    font-weight: 650 !important;
  }

  body:not(.adminPage) .slideContent > div {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    align-items: stretch !important;
    margin-top: 18px !important;
  }

  body:not(.adminPage) .slideCta {
    width: 100% !important;
    min-height: 46px !important;
    border-radius: 13px !important;
    background: linear-gradient(135deg, #f5c04c, #e29b22) !important;
    color: #082e33 !important;
    font-size: 13px !important;
    font-weight: 900 !important;
  }

  body:not(.adminPage) .slideContent > div > span {
    color: #e8fbf8 !important;
    font-size: 10px !important;
    font-weight: 800 !important;
  }

  body:not(.adminPage) .slideArrow {
    z-index: 3 !important;
    top: 37% !important;
    width: 40px !important;
    height: 40px !important;
    border-radius: 999px !important;
    background: rgba(8, 69, 76, .62) !important;
    border: 1px solid rgba(255, 255, 255, .45) !important;
    color: #fff !important;
    font-size: 28px !important;
  }

  body:not(.adminPage) .slideArrow.prev {
    left: 18px !important;
  }

  body:not(.adminPage) .slideArrow.next {
    right: 18px !important;
  }

  body:not(.adminPage) .slideNav {
    z-index: 3 !important;
    left: 32px !important;
    bottom: 20px !important;
  }

  body:not(.adminPage) .slideCount {
    z-index: 3 !important;
    right: 24px !important;
    bottom: 20px !important;
    color: #e8fbf8 !important;
  }

  body:not(.adminPage) .learnerHub {
    margin-top: 18px !important;
  }

  body:not(.adminPage) .hubHeading {
    display: block !important;
  }

  body:not(.adminPage) .hubHeading label,
  body:not(.adminPage) .title label {
    color: #1d8991 !important;
    font-size: 10px !important;
    letter-spacing: 1.6px !important;
  }

  body:not(.adminPage) .hubHeading h2,
  body:not(.adminPage) .title p > b {
    color: var(--mobile-ink) !important;
    background: none !important;
    font-size: 22px !important;
    line-height: 1.22 !important;
    letter-spacing: 0 !important;
  }

  body:not(.adminPage) .hubHeading p,
  body:not(.adminPage) .title > span {
    color: var(--mobile-muted) !important;
    font-size: 12px !important;
    line-height: 1.45 !important;
  }

  body:not(.adminPage) .hubGrid,
  body:not(.adminPage) #publishedGrid,
  body:not(.adminPage) #videoGrid,
  body:not(.adminPage) .toolGrid,
  body:not(.adminPage) .awards > div:last-child {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  body:not(.adminPage) .continueCard,
  body:not(.adminPage) .hubCard,
  body:not(.adminPage) .managedCard,
  body:not(.adminPage) .videoCard,
  body:not(.adminPage) .toolCard,
  body:not(.adminPage) .awards article {
    width: 100% !important;
    min-width: 0 !important;
    border-radius: 16px !important;
    overflow: hidden !important;
  }

  body:not(.adminPage) .dashboard {
    display: block !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  body:not(.adminPage) .dashboard > .curriculum,
  body:not(.adminPage) .dashboard > .now {
    width: 100% !important;
    max-width: none !important;
    margin: 0 0 18px !important;
    border-radius: var(--mobile-radius) !important;
  }

  body:not(.adminPage) .courseCover,
  body:not(.adminPage) .continueCard,
  body:not(.adminPage) .notes {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 430px) {
  body:not(.adminPage) header {
    --mobile-pad: 10px;
    gap: 7px !important;
  }

  body:not(.adminPage) header .tab {
    padding-inline: 7px !important;
  }

  body:not(.adminPage) header .tab span {
    font-size: 9px !important;
  }

  body:not(.adminPage) .homeSlider {
    height: 470px !important;
    min-height: 470px !important;
  }

  body:not(.adminPage) .slideContent {
    left: 24px !important;
    right: 24px !important;
    bottom: 62px !important;
  }
}

/* Mobile drawer auth layout and reliable close affordance. */
@media (max-width: 768px) {
  body:not(.adminPage)::before {
    opacity: 0 !important;
    transition: opacity .22s ease !important;
  }

  body:not(.adminPage).mobileDrawerOpen::before {
    content: "" !important;
    position: fixed !important;
    inset: 0 !important;
    z-index: 92 !important;
    height: auto !important;
    background: rgba(2, 32, 36, .48) !important;
    backdrop-filter: blur(2px) !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  body:not(.adminPage) #side {
    z-index: 130 !important;
    width: min(296px, 82vw) !important;
    padding: calc(16px + env(safe-area-inset-top)) 14px calc(18px + env(safe-area-inset-bottom)) !important;
    border-right: 1px solid rgba(158, 213, 209, .25) !important;
    box-shadow: 28px 0 70px rgba(0, 28, 32, .46) !important;
    gap: 10px !important;
    overflow-y: auto !important;
  }

  body:not(.adminPage) #menu.isOpen {
    background: #0c5861 !important;
    color: #fff !important;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, .22), 0 8px 18px rgba(5, 76, 83, .18) !important;
    z-index: 180 !important;
  }

  body:not(.adminPage) #menu.isOpen::before {
    content: "×" !important;
    font-size: 30px !important;
    font-weight: 700 !important;
    transform: translateY(-1px) !important;
  }

  body:not(.adminPage) #closeSide {
    display: grid !important;
    place-items: center !important;
    width: 36px !important;
    height: 36px !important;
    right: 12px !important;
    top: calc(12px + env(safe-area-inset-top)) !important;
    border-radius: 12px !important;
    background: rgba(255, 255, 255, .12) !important;
    color: #fff !important;
    font-size: 24px !important;
  }

  .mobileAuthPanel {
    display: block !important;
    margin: 10px 2px 12px !important;
    padding: 12px !important;
    border-radius: 17px !important;
    background: linear-gradient(145deg, rgba(255,255,255,.16), rgba(255,255,255,.07)) !important;
    border: 1px solid rgba(158, 213, 209, .24) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.10) !important;
  }

  .mobileAuthPanel span,
  .mobileAuthPanel b,
  .mobileAuthPanel p {
    display: block !important;
    margin: 0 !important;
  }

  .mobileAuthPanel span {
    color: #9ed5d1 !important;
    font-size: 8px !important;
    font-weight: 900 !important;
    letter-spacing: 1.4px !important;
  }

  .mobileAuthPanel b {
    margin-top: 5px !important;
    color: #fff !important;
    font-size: 13px !important;
    line-height: 1.3 !important;
  }

  .mobileAuthPanel p {
    margin-top: 4px !important;
    color: #c8e6e2 !important;
    font-size: 10px !important;
    line-height: 1.45 !important;
  }

  .mobileAuthPanel div {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    margin-top: 11px !important;
  }

  .mobileAuthPanel button {
    min-height: 39px !important;
    border-radius: 12px !important;
    border: 1px solid rgba(158, 213, 209, .36) !important;
    font-size: 11px !important;
    font-weight: 900 !important;
  }

  .mobileAuthPanel [data-mobile-login] {
    background: #e7b84f !important;
    color: #073b42 !important;
  }

  .mobileAuthPanel [data-mobile-register] {
    background: rgba(255, 255, 255, .10) !important;
    color: #fff !important;
  }

  body:not(.adminPage) #side.isGuest .overall {
    display: none !important;
  }

  body:not(.adminPage) #side.isGuest .profile {
    display: none !important;
  }

  body:not(.adminPage) #side:has(.mobileAuthPanel:not([hidden])) .overall {
    display: none !important;
  }

  body:not(.adminPage) #side:has(.mobileAuthPanel:not([hidden])) .profile {
    display: none !important;
  }

  body:not(.adminPage) #side.isLoggedIn .overall {
    display: flex !important;
  }

  body:not(.adminPage) #side.isGuest .profile {
    margin-bottom: 0 !important;
  }

  body:not(.adminPage) #side.isGuest nav {
    margin-top: 2px !important;
  }

  body:not(.adminPage) #side .brand {
    margin-bottom: 12px !important;
  }

  body:not(.adminPage) #side .profile {
    min-height: auto !important;
    padding: 12px !important;
  }

  body:not(.adminPage) #side nav {
    gap: 7px !important;
  }

  body:not(.adminPage) #side nav a {
    min-height: 50px !important;
    padding: 10px 12px !important;
  }

  body:not(.adminPage) #side .help {
    margin-top: auto !important;
    min-height: 52px !important;
    padding: 10px 12px !important;
  }
}

/* -----------------------------------------------------------
   END OF DESIGN SYSTEM v2.0
   ============================================================ */

/* Final simplified admin publishing pack */
.publishingRoutePack {
  margin: 18px 0 22px !important;
  padding: 18px !important;
  border: 1px solid #bfe2de !important;
  border-radius: 18px !important;
  background: linear-gradient(135deg, #f3fbfa, #ffffff) !important;
}

.publishPackHead span,
.publishPackHead h3,
.publishPackHead p {
  display: block !important;
  margin: 0 !important;
}

.publishPackHead span {
  color: #278b91 !important;
  font-size: 9px !important;
  font-weight: 900 !important;
  letter-spacing: 1.4px !important;
}

.publishPackHead h3 {
  margin-top: 5px !important;
  color: #073f46 !important;
  font-size: 20px !important;
  line-height: 1.25 !important;
}

.publishPackHead p {
  margin-top: 6px !important;
  max-width: 680px !important;
  color: #587b7f !important;
  font-size: 12px !important;
  line-height: 1.55 !important;
}

.publishRouteGrid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 10px !important;
  margin-top: 15px !important;
}

.publishRouteGrid button {
  display: grid !important;
  grid-template-columns: 42px 1fr !important;
  grid-template-rows: auto auto !important;
  align-items: center !important;
  gap: 4px 10px !important;
  min-height: 118px !important;
  padding: 13px !important;
  border: 1px solid #c9e4e1 !important;
  border-radius: 15px !important;
  background: #fff !important;
  color: #0a4d55 !important;
  text-align: left !important;
  box-shadow: 0 10px 22px rgba(5, 76, 83, .08) !important;
}

.publishRouteGrid button i {
  grid-row: 1 / 3 !important;
  display: grid !important;
  place-items: center !important;
  width: 42px !important;
  height: 42px !important;
  border-radius: 13px !important;
  background: #e2f5f2 !important;
  color: #0e777f !important;
  font-style: normal !important;
  font-size: 18px !important;
  font-weight: 900 !important;
}

.publishRouteGrid button b {
  color: #073f46 !important;
  font-size: 13px !important;
  line-height: 1.25 !important;
}

.publishRouteGrid button small {
  color: #5c7e82 !important;
  font-size: 10px !important;
  line-height: 1.4 !important;
}

.publishRouteGrid button.active {
  border-color: #0f7a83 !important;
  background: linear-gradient(135deg, #0f737c, #0b5c65) !important;
  color: #fff !important;
  box-shadow: 0 14px 30px rgba(5, 76, 83, .22) !important;
}

.publishRouteGrid button.active i {
  background: rgba(255, 255, 255, .16) !important;
  color: #fff !important;
}

.publishRouteGrid button.active b,
.publishRouteGrid button.active small {
  color: #fff !important;
}

.publishRoutePreview {
  margin-top: 12px !important;
  padding: 12px 14px !important;
  border-radius: 13px !important;
  background: #eaf7f5 !important;
  border: 1px solid #bee3df !important;
  color: #0b535b !important;
  font-size: 12px !important;
  line-height: 1.45 !important;
}

.publishRoutePreview b,
.publishRoutePreview small {
  display: block !important;
}

.publishRoutePreview b {
  font-size: 12px !important;
  font-weight: 900 !important;
}

.publishRoutePreview small {
  margin-top: 3px !important;
  color: #53797d !important;
  font-size: 11px !important;
}

.publishingAdvanced {
  margin-top: 12px !important;
  border-radius: 13px !important;
  background: rgba(255, 255, 255, .72) !important;
}

.publishingAdvanced summary {
  cursor: pointer !important;
  padding: 11px 12px !important;
  color: #0d6870 !important;
  font-size: 11px !important;
  font-weight: 900 !important;
}

.publishingAdvancedInner {
  display: grid !important;
  gap: 10px !important;
  padding: 0 12px 12px !important;
}

@media (max-width: 1100px) {
  .publishRouteGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 640px) {
  .publishRouteGrid {
    grid-template-columns: 1fr !important;
  }
}

/* ==========================================================================
   SECTION U: CHECKPOINT 22 SIDEBAR & MOBILE AUTH CARD REDESIGN
   ========================================================================== */

/* Clean up nav links layout */
aside#side nav a {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  text-decoration: none !important;
}
aside#side nav a span {
  font-size: 14px !important;
  font-weight: 800 !important;
}

/* Luxury Mobile Auth Panel for Guest Users */
.mobileAuthPanel {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.03)) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  border-radius: 18px !important;
  padding: 18px 16px !important;
  margin: 14px 0 18px 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.25) !important;
}
.mobileAuthBadge {
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 0.8px !important;
  color: #e7b84f !important;
  text-transform: uppercase !important;
}
.mobileAuthTitle {
  font-size: 16px !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  line-height: 1.35 !important;
  margin: 0 !important;
}
.mobileAuthDesc {
  font-size: 13px !important;
  color: #cce9e6 !important;
  line-height: 1.45 !important;
  margin: 0 !important;
}
.mobileAuthButtons {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 10px !important;
  margin-top: 8px !important;
}
.mobileLoginBtn {
  background: linear-gradient(135deg, #e7b84f, #d19f36) !important;
  color: #0c3338 !important;
  font-weight: 800 !important;
  font-size: 13px !important;
  padding: 11px 14px !important;
  border-radius: 12px !important;
  border: none !important;
  cursor: pointer !important;
  text-align: center !important;
  box-shadow: 0 4px 12px rgba(231, 184, 79, 0.3) !important;
  transition: all 0.25s ease !important;
}
.mobileRegisterBtn {
  background: rgba(255, 255, 255, 0.12) !important;
  color: #ffffff !important;
  font-weight: 800 !important;
  font-size: 13px !important;
  padding: 11px 14px !important;
  border-radius: 12px !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  cursor: pointer !important;
  text-align: center !important;
  transition: all 0.25s ease !important;
}
.mobileLoginBtn:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 16px rgba(231, 184, 79, 0.45) !important;
}
.mobileRegisterBtn:hover {
  background: rgba(255, 255, 255, 0.22) !important;
}

/* ==========================================================================
   SECTION V: CHECKPOINT 23 SEARCH BAR & COMPACT HUB CARDS
   ========================================================================== */

/* REQUEST 1: Chỉ để lại phần ô tìm kiếm, xóa nút vuông xanh thừa cạnh ô tìm kiếm trên mobile */
@media (max-width: 1100px) {
  header > .search,
  body:not(.adminPage) header .search {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    margin: 0 !important;
  }
  header > #registerButton,
  body:not(.adminPage) header > #registerButton,
  header > .registerAccountBtn {
    display: none !important;
  }
}

/* REQUEST 2: Thu gọn toàn bộ 3 khối (Tiến độ, Lịch học, Hỗ trợ học viên) cực kỳ gọn gàng sang trọng */
.learnerHub {
  padding: 16px 20px !important;
  margin-bottom: 20px !important;
}
.hubGrid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important;
  gap: 12px !important;
}
.hubCard {
  padding: 14px 16px !important;
  border-radius: 14px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  min-height: auto !important;
}
.hubCard .hubIcon {
  width: 36px !important;
  height: 36px !important;
  font-size: 16px !important;
  margin-bottom: 4px !important;
  border-radius: 10px !important;
}
.hubCard > span {
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: 0.6px !important;
  margin: 0 !important;
}
.hubCard strong {
  font-size: 17px !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  margin: 2px 0 !important;
}
.hubCard p {
  font-size: 12px !important;
  line-height: 1.35 !important;
  margin: 0 0 6px 0 !important;
}
.hubCard a,
.hubCard button,
#scheduleButton,
#supportButton {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 6px 12px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  height: 32px !important;
  border-radius: 8px !important;
  margin-top: auto !important;
  width: fit-content !important;
}
.scheduleHub .miniDays {
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  margin: 4px 0 6px 0 !important;
}
.scheduleHub .miniDays i {
  width: 22px !important;
  height: 22px !important;
  font-size: 10px !important;
  border-radius: 6px !important;
  display: grid !important;
  place-items: center !important;
}
.supportHub small {
  font-size: 10px !important;
  margin-top: 4px !important;
}

/* Super compact on small mobile screens */
@media (max-width: 768px) {
  body:not(.adminPage) .learnerHub {
    padding: 12px 14px !important;
    margin: 12px 12px 18px !important;
    border-radius: 16px !important;
  }
  body:not(.adminPage) .hubGrid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  body:not(.adminPage) .hubCard {
    padding: 12px 14px !important;
    border-radius: 12px !important;
    gap: 3px !important;
  }
  body:not(.adminPage) .hubCard strong {
    font-size: 15px !important;
  }
  body:not(.adminPage) .hubCard p {
    font-size: 11px !important;
  }
}

/* ==========================================================================
   SECTION W: CHECKPOINT 24 MOBILE HEADER BRAND LOGO & REMOVE SEARCH
   ========================================================================== */

/* Desktop: hide headerBrand because sidebar already has brand logo */
@media (min-width: 1101px) {
  .headerBrand {
    display: none !important;
  }
}

/* Mobile & Tablet (<= 1100px): Show headerBrand at Top Left, Hide Search Bar completely */
@media (max-width: 1100px) {
  /* Hide search bar completely as requested (bỏ luôn phần khoanh đỏ trên mobile) */
  header > .search,
  body:not(.adminPage) header .search,
  body:not(.adminPage) header > .search {
    display: none !important;
  }

  /* Style mobile header grid */
  body:not(.adminPage) header {
    display: grid !important;
    grid-template-columns: auto 1fr auto !important;
    grid-template-rows: auto auto !important;
    align-items: center !important;
    gap: 12px 10px !important;
    padding: calc(10px + env(safe-area-inset-top)) 14px 12px !important;
  }

  /* Row 1, Col 1: Menu Button */
  body:not(.adminPage) header > #menu {
    grid-column: 1 !important;
    grid-row: 1 !important;
  }

  /* Row 1, Col 2: Brand Logo (chèn lên đầu trang giao diện mobile) */
  .headerBrand {
    grid-column: 2 !important;
    grid-row: 1 !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    text-decoration: none !important;
  }
  .headerBrand i {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    border-radius: 11px !important;
    background: linear-gradient(135deg, #106f7a, #083c42) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    box-shadow: 0 4px 12px rgba(16, 95, 104, 0.3) !important;
    color: #fff !important;
    font-size: 20px !important;
    font-weight: 900 !important;
    font-style: normal !important;
    display: grid !important;
    place-items: center !important;
  }
  .headerBrand b {
    color: #0d3b40 !important;
    font-size: 15px !important;
    font-weight: 900 !important;
    line-height: 1.15 !important;
    letter-spacing: 0.3px !important;
    display: flex !important;
    flex-direction: column !important;
  }
  .headerBrand small {
    color: #106f7a !important;
    font-size: 9px !important;
    font-weight: 800 !important;
    letter-spacing: 1px !important;
    margin-top: 2px !important;
  }

  /* Row 1, Col 3: Login button or Account Area on top right */
  body:not(.adminPage) header > #accountButton,
  body:not(.adminPage) header > .accountArea {
    grid-column: 3 !important;
    grid-row: 1 !important;
    display: inline-flex !important;
    margin-left: auto !important;
  }
  body:not(.adminPage) header > #accountButton {
    background: linear-gradient(135deg, #106f7a, #083c42) !important;
    color: #ffffff !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    padding: 7px 12px !important;
    border-radius: 10px !important;
    border: none !important;
    width: auto !important;
    height: auto !important;
    text-indent: 0 !important;
  }

  /* Row 2, Col 1-3: Course Tabs spanning full width */
  body:not(.adminPage) header .tabs {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    width: 100% !important;
  }
}

/* Compact adjustments for small mobile screens <= 480px */
@media (max-width: 480px) {
  .headerBrand b {
    font-size: 14px !important;
  }
  .headerBrand small {
    font-size: 8px !important;
  }
}

/* ==========================================================================
   SECTION V: RESTORE ORIGINAL CLASSIC BRAND LOGO & SIDEBAR
   ========================================================================== */
aside#side .brand, a.brand {
  display: flex !important;
  align-items: center !important;
  gap: 13px !important;
  text-decoration: none !important;
  color: #ffffff !important;
  margin-bottom: 22px !important;
}
aside#side .brand i, a.brand i {
  width: 44px !important;
  height: 44px !important;
  border-radius: 14px !important;
  background: linear-gradient(135deg, #187f8a, #0c4d54) !important;
  border: 2px solid #63c1bb !important;
  display: grid !important;
  place-items: center !important;
  font-style: normal !important;
  font-weight: 900 !important;
  font-size: 22px !important;
  color: #ffffff !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35) !important;
  flex-shrink: 0 !important;
}
aside#side .brand b, a.brand b {
  display: flex !important;
  flex-direction: column !important;
  font-size: 16px !important;
  font-weight: 900 !important;
  color: #ffffff !important;
  letter-spacing: 0.5px !important;
  line-height: 1.15 !important;
}
aside#side .brand small, a.brand small {
  font-size: 9px !important;
  font-weight: 700 !important;
  color: #a3ded9 !important;
  letter-spacing: 1px !important;
  margin-top: 3px !important;
  display: block !important;
}
aside#side nav a {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  text-decoration: none !important;
  color: #eaf7f5 !important;
}
aside#side nav a.active {
  color: #ffffff !important;
}

/* Ensure headerBrand is hidden if any remains */
.headerBrand { display: none !important; }


/* ==========================================================================
   CHECKPOINT 23: 3-TIER UPGRADE MODAL STYLING
   ========================================================================== */
.upgrade999Modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  place-items: center;
  padding: 20px;
}
.upgrade999Modal.open {
  display: grid;
}
.upgradeShade {
  position: absolute;
  inset: 0;
  background: rgba(6, 39, 42, 0.88);
  backdrop-filter: blur(12px);
}
.upgradeCard {
  position: relative;
  width: min(500px, 94vw);
  background: linear-gradient(145deg, #0d5962, #083c42);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 24px;
  padding: 32px 28px;
  color: #ffffff;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.6);
  text-align: center;
}
.upgradeClose {
  position: absolute;
  right: 16px;
  top: 16px;
  border: 0;
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  font-size: 22px;
  cursor: pointer;
}
.upgradeIcon {
  width: 60px;
  height: 60px;
  margin: 0 auto 14px;
  border-radius: 18px;
  background: linear-gradient(135deg, #e7b84f, #d19f36);
  color: #0c3338;
  display: grid;
  place-items: center;
  font-size: 30px;
  font-weight: 900;
  box-shadow: 0 8px 24px rgba(231, 184, 79, 0.35);
}
.upgradeBadge {
  display: block;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.5px;
  color: #e7b84f;
  margin-bottom: 6px;
}
.upgradeCard h2 {
  font-size: 24px;
  font-weight: 900;
  margin: 6px 0 12px;
  color: #ffffff;
}
.upgradeCard p {
  font-size: 13px;
  line-height: 1.55;
  color: #cce9e6;
  margin: 0 0 20px;
}
.upgradeBenefits {
  background: rgba(0, 0, 0, 0.22);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: 16px;
  text-align: left;
  font-size: 13px;
  line-height: 1.8;
  margin-bottom: 24px;
  color: #ffffff;
}
.upgradeCta {
  width: 100%;
  padding: 14px 20px !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  border-radius: 14px !important;
  background: linear-gradient(135deg, #e7b84f, #d19f36) !important;
  color: #0c3338 !important;
  border: none !important;
  cursor: pointer !important;
  box-shadow: 0 8px 24px rgba(231, 184, 79, 0.4) !important;
}


/* ==========================================================================



/* ==========================================================================
   CHECKPOINT 28: STATE-OF-THE-ART FULL-EDGE MOBILE DESIGN SYSTEM
   Full-edge edge-to-edge mobile layout, sleek native-app card stretching
   ========================================================================== */
@media (max-width: 768px) {
  /* 1. Reset Global Container & Prevent Horizontal Overflow */
  html, body {
    overflow-x: hidden !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #f4faf9 !important;
    -webkit-tap-highlight-color: transparent;
  }

  .app {
    display: block !important;
    width: 100% !important;
  }

  .app > main {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: hidden !important;
  }

  /* 2. Full-Width Sleek Header & Top Bar */
  header, .topbar {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 12px 16px !important;
    background: #ffffff !important;
    border-bottom: 1px solid #e2f0ee !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
  }
  .menuBtn {
    order: 1 !important;
  }
  .notificationBtn {
    order: 2 !important;
    margin-left: auto !important;
  }
  .accountArea {
    order: 2 !important;
  }
  .tabs {
    order: 3 !important;
    width: 100% !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    margin: 6px 0 2px !important;
    padding: 4px !important;
    background: #edf7f6 !important;
    border-radius: 14px !important;
  }
  .tab {
    min-height: 48px !important;
    padding: 10px 6px !important;
    border-radius: 11px !important;
  }
  .tab > span {
    font-size: 12px !important;
    font-weight: 800 !important;
  }

  /* 3. FULL-EDGE HERO BANNER SLIDER (100% Screen Width Horizontal Stretch) */
  .hero {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  .homeSlider {
    width: 100% !important;
    max-width: 100% !important;
    height: 520px !important;
    margin: 0 !important;
    border-radius: 0 !important;
    border: none !important;
    box-shadow: none !important;
  }
  .homeSlide {
    border-radius: 0 !important;
  }
  .slideContent {
    left: 20px !important;
    right: 20px !important;
    bottom: 46px !important;
    width: auto !important;
  }
  .slideContent h1 {
    font-size: 26px !important;
    line-height: 1.3 !important;
    margin-bottom: 8px !important;
    word-break: break-word !important;
  }
  .slideContent > p {
    font-size: 13.5px !important;
    line-height: 1.5 !important;
    margin-bottom: 14px !important;
  }
  .slideArrow {
    top: 40% !important;
    width: 36px !important;
    height: 36px !important;
  }

  /* 4. FULL-EDGE LEARNER HUB & DASHBOARD (Full screen width cards) */
  .learnerHub {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 16px !important;
    padding: 22px 16px !important;
    border-radius: 0 !important;
    border-left: none !important;
    border-right: none !important;
    box-sizing: border-box !important;
  }
  .hubGrid {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    gap: 14px !important;
  }
  .continueCard, .hubCard {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    border-radius: 18px !important;
    margin: 0 !important;
  }
  .continueCard {
    display: flex !important;
    flex-direction: column !important;
    padding: 16px !important;
  }
  .continueVisual {
    width: 100% !important;
    min-height: 180px !important;
    border-radius: 14px !important;
    margin-bottom: 12px !important;
  }

  /* 5. FULL-EDGE PROGRAMS & COURSE COVERS */
  .programs {
    width: 100% !important;
    max-width: 100% !important;
    padding: 16px 0 !important;
    margin: 0 !important;
  }
  .programCard {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 20px !important;
    border-radius: 0 !important;
    border-left: none !important;
    border-right: none !important;
    box-shadow: none !important;
  }
  .courseCover {
    width: 100% !important;
    max-width: 100% !important;
    padding: 20px 16px !important;
    box-sizing: border-box !important;
    border-radius: 0 !important;
  }
  .courseMain h2 {
    font-size: 21px !important;
    line-height: 1.35 !important;
  }

  /* 6. FULL-WIDTH LESSON ITEMS */
  .lesson {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 12px 16px !important;
    box-sizing: border-box !important;
  }
  .lessonItem {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    border-radius: 16px !important;
    padding: 14px 14px !important;
    margin-bottom: 10px !important;
  }
  .lessonItem h4 {
    font-size: 15px !important;
    line-height: 1.4 !important;
  }

  /* 7. FULL-EDGE ARTICLES & MEDIA CARDS */
  .published, .notes, .qaSection {
    width: 100% !important;
    max-width: 100% !important;
    padding: 20px 16px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }
  .publishedGrid, #publishedGrid {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    gap: 16px !important;
  }
  .managedCard {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    border-radius: 18px !important;
    margin: 0 !important;
  }
}




/* ==========================================================================
   CHECKPOINT 30: GRAND VISUAL HARMONY & PRESTIGIOUS TYPOGRAPHY SYSTEM
   Standardized typography, cohesive colors, crystal-clear icons, and luxury interactive cards across Desktop & Mobile
   ========================================================================== */

/* --- 1. HARMONIZED TYPOGRAPHY SYSTEM & HIERARCHY --- */
body, .app {
  font-family: 'Be Vietnam Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  color: #1a363a !important;
  -webkit-font-smoothing: antialiased;
}

/* Headings: Deep Emerald Teal with Sharp Contrast */
h1, h2, h3, h4, .slideContent h1, .courseMain h2, .hubHeading h2 {
  font-weight: 800 !important;
  color: #0c3e44 !important;
  letter-spacing: -0.4px;
}

/* Highlighted Accents & VIP Badges */
.hubBadge, .miniDays .next, .authorRole {
  color: #d19f36 !important;
  font-weight: 800 !important;
}

/* Subtitles & Descriptions */
p, .hubCard p, .slideContent > p, .continueCard p {
  color: #4a6a6e !important;
  line-height: 1.6 !important;
}

/* --- 2. LUXURY INTERACTIVE CARDS WITH SMOOTH HOVER MICRO-ANIMATIONS --- */
.continueCard, .hubCard, .courseCover, .lessonItem, .managedCard {
  background: #ffffff !important;
  border: 1px solid rgba(16, 95, 104, 0.12) !important;
  border-radius: 20px !important;
  box-shadow: 0 10px 32px rgba(16, 95, 104, 0.06) !important;
  transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.continueCard:hover, .hubCard:hover, .courseCover:hover, .lessonItem:hover, .managedCard:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 18px 44px rgba(16, 95, 104, 0.13) !important;
  border-color: rgba(16, 95, 104, 0.32) !important;
}

/* --- 3. CRYSTAL-CLEAR SECTION ICONS & BADGES --- */
.hubIcon, .courseIcon {
  width: 44px !important;
  height: 44px !important;
  border-radius: 14px !important;
  display: grid !important;
  place-items: center !important;
  background: linear-gradient(135deg, #e5f5f3, #cdebe7) !important;
  color: #105f68 !important;
  font-size: 20px !important;
  box-shadow: 0 4px 14px rgba(16, 95, 104, 0.12) !important;
}

/* Interactive CTA Buttons with Glowing Elevation */
button.primaryBtn, .continueCard button, .hubCard button, .slideContent button {
  font-weight: 700 !important;
  border-radius: 12px !important;
  transition: all 0.22s ease !important;
}

button.primaryBtn:hover, .continueCard button:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 22px rgba(16, 95, 104, 0.28) !important;
}

/* --- 4. STANDARDIZED MOBILE FULL-EDGE VISUAL HARMONY --- */
@media (max-width: 768px) {
  h1, .slideContent h1 {
    font-size: 25px !important;
    line-height: 1.32 !important;
  }
  h2, .courseMain h2, .hubHeading h2 {
    font-size: 21px !important;
    line-height: 1.35 !important;
  }
  .continueCard, .hubCard, .courseCover, .lessonItem, .managedCard {
    border-radius: 16px !important;
  }
}




/* ==========================================================================
   CHECKPOINT 31: GRAND MOBILE HERO BANNER POLISH
   Full-edge 100% width, taller majestic height (640px), brighter portrait, prominent display
   ========================================================================== */
@media (max-width: 768px) {
  /* 1. Full-Edge 100% Width & Zero Margins */
  .hero {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .homeSlider {
    width: 100% !important;
    max-width: 100% !important;
    height: 640px !important;
    margin: 0 0 24px !important;
    border-radius: 0 !important;
    border: none !important;
    box-shadow: none !important;
  }

  .homeSlide {
    width: 100% !important;
    height: 100% !important;
    border-radius: 0 !important;
    background-position: center 15% !important;
    background-size: cover !important;
  }

  /* 2. Brighter Top Overlay so Figure/Face Shines Clearly */
  .homeSlide:after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(0deg, #063e44 0%, #063e44f2 38%, #063e4435 75%, transparent 100%) !important;
  }

  /* 3. Balanced Typography & Bottom Content Alignment */
  .slideContent {
    left: 20px !important;
    right: 20px !important;
    bottom: 52px !important;
    top: auto !important;
    transform: none !important;
    width: auto !important;
    z-index: 5 !important;
  }

  .slideTag {
    font-size: 10px !important;
    padding: 7px 12px !important;
    margin-bottom: 4px !important;
  }

  .slideContent h1 {
    font-size: 29px !important;
    line-height: 1.25 !important;
    letter-spacing: -0.6px !important;
    margin: 10px 0 10px !important;
    color: #ffffff !important;
    text-shadow: 0 2px 10px rgba(0,0,0,0.35) !important;
  }

  .slideContent > p {
    font-size: 14px !important;
    line-height: 1.55 !important;
    color: #e5f7f5 !important;
    margin-bottom: 16px !important;
  }

  /* 4. Navigation Arrows & Dots */
  .slideArrow {
    top: 36% !important;
    width: 42px !important;
    height: 42px !important;
    background: rgba(10, 76, 83, 0.75) !important;
    z-index: 6 !important;
  }

  .slideNav {
    left: 20px !important;
    bottom: 20px !important;
    z-index: 6 !important;
  }

  .slideCount {
    right: 20px !important;
    bottom: 18px !important;
    z-index: 6 !important;
  }
}




/* ==========================================================================
   CHECKPOINT 32: GRAND MOBILE COURSE MODULES REDESIGN (CHƯƠNG TRÌNH HỌC CHI TIẾT)
   Clean, spacious, harmonious Native-App Accordion & Lesson Card List on Mobile
   ========================================================================== */
@media (max-width: 768px) {
  /* 1. Full-Edge Container for Modules Section */
  .programs, #modules {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .module {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 16px !important;
    border-radius: 0 !important;
    border-left: none !important;
    border-right: none !important;
    border-top: 1px solid #e1f0ee !important;
    border-bottom: 1px solid #e1f0ee !important;
    background: #ffffff !important;
    box-shadow: none !important;
  }

  /* 2. Chapter Accordion Header - Beautiful Vertical Stack */
  .chapterHead {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
    padding: 18px 16px !important;
    width: 100% !important;
    text-align: left !important;
    position: relative !important;
    background: #ffffff !important;
    border: none !important;
  }

  .chapterLabel {
    display: inline-block !important;
    background: #0c3e44 !important;
    color: #ffffff !important;
    padding: 5px 14px !important;
    border-radius: 20px !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    letter-spacing: 1px !important;
  }

  .modTitle {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    padding-right: 28px !important;
  }

  .modTitle b {
    font-size: 18px !important;
    font-weight: 800 !important;
    color: #0c3e44 !important;
    line-height: 1.35 !important;
    margin-top: 2px !important;
  }

  .modTitle small {
    font-size: 13px !important;
    color: #4a6a6e !important;
    line-height: 1.5 !important;
    margin-top: 4px !important;
  }

  .chapterMeta {
    font-size: 11px !important;
    color: #105f68 !important;
    font-weight: 700 !important;
    margin-top: 4px !important;
  }

  .chev {
    position: absolute !important;
    right: 18px !important;
    top: 22px !important;
    font-size: 20px !important;
    color: #105f68 !important;
  }

  /* 3. Lesson List & Cards - Crisp, Uncluttered, Elegant Cards */
  .lessons {
    padding: 8px 14px 16px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
  }

  .lesson {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
    padding: 15px 14px !important;
    background: #f9fdfc !important;
    border: 1px solid #e2f1ef !important;
    border-radius: 16px !important;
    box-shadow: 0 4px 14px rgba(16, 95, 104, 0.04) !important;
  }

  .lesson > div:first-child {
    display: flex !important;
    align-items: flex-start !important;
    gap: 12px !important;
    width: 100% !important;
  }

  .state {
    width: 36px !important;
    height: 36px !important;
    flex: 0 0 36px !important;
    border-radius: 50% !important;
    display: grid !important;
    place-items: center !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    background: #e5f5f3 !important;
    color: #105f68 !important;
  }

  .state.done {
    background: #105f68 !important;
    color: #ffffff !important;
  }

  .lessonText {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
  }

  .lessonText small {
    font-size: 10px !important;
    font-weight: 800 !important;
    letter-spacing: 1px !important;
    color: #105f68 !important;
    text-transform: uppercase !important;
  }

  .lessonText b {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #0c3e44 !important;
    line-height: 1.38 !important;
    margin: 3px 0 4px !important;
  }

  .lessonText em {
    font-size: 11.5px !important;
    font-style: normal !important;
    color: #5a767a !important;
  }

  /* Bottom Row of Lesson Card: Time & CTA Button */
  .time {
    font-size: 11px !important;
    font-weight: 700 !important;
    color: #5a767a !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
  }

  .lesson button[data-play] {
    width: 100% !important;
    background: linear-gradient(135deg, #105f68, #0a4c53) !important;
    color: #ffffff !important;
    padding: 11px 16px !important;
    border-radius: 12px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    border: none !important;
    box-shadow: 0 6px 18px rgba(16, 95, 104, 0.22) !important;
    text-align: center !important;
    justify-content: center !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
  }
}




/* ==========================================================================
   CHECKPOINT 33: UNIVERSAL CROSS-BROWSER MOBILE NORMALIZATION
   Pixel-perfect synchronization across Chrome, Safari (iOS/WebKit), Opera, and Firefox Mobile
   ========================================================================== */

/* 1. Prevent Orientation Scaling & Swipe-Wobble across WebKit, Blink, & Gecko */
html {
  -webkit-text-size-adjust: 100% !important;
  -moz-text-size-adjust: 100% !important;
  text-size-adjust: 100% !important;
  overscroll-behavior-x: none !important;
  scroll-behavior: smooth;
}

body, .app {
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  text-rendering: optimizeLegibility !important;
}

/* 2. Remove Native iOS Safari / Firefox / Opera Button & Input Glare */
button, input, select, textarea {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  font-family: inherit;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

/* Fix iOS Safari search input border radius & inner shadow */
input[type="search"], input[type="text"], input[type="email"], input[type="tel"] {
  -webkit-appearance: none !important;
  border-radius: 12px;
}

/* 3. Dynamic Viewport Normalization (Safari iOS Address Bar Compatibility) */
@media (max-width: 768px) {
  .modal, .registerModal, .contentViewer, aside#side.open {
    min-height: -webkit-fill-available !important;
    min-height: 100dvh !important;
  }

  /* Safe Area Notch & Home Indicator Padding for iPhone / Modern Android */
  header, .topbar {
    padding-left: max(14px, env(safe-area-inset-left)) !important;
    padding-right: max(14px, env(safe-area-inset-right)) !important;
  }

  /* Prevent Firefox Mobile flexbox overflow */
  .app > main, .hero, .programs, .learnerHub {
    min-width: 0 !important;
  }

  /* Normalize image rendering on Chrome Mobile & iOS Safari */
  img, iframe, video {
    max-width: 100% !important;
    height: auto;
  }
}




/* ==========================================================================
   CHECKPOINT 34: FULL-WIDTH LESSON CARDS STANDARDIZATION
   Ensure lesson cards stretch 100% full horizontal width equal to containers below
   ========================================================================== */
@media (max-width: 768px) {
  /* 1. Eliminate Double Padding on Parent Dashboard & Curriculum Containers */
  .dashboard,
  body:not(.adminPage) .dashboard,
  .dashboard > .curriculum,
  #curriculum,
  .programs {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
  }

  /* Keep inner title header aligned with clean side padding */
  .curriculum > .title {
    padding: 16px 16px 12px !important;
    margin: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* 2. Full-Width Module Accordion Container */
  #modules, .module {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 16px !important;
    padding: 0 !important;
    border-radius: 0 !important;
    border-left: none !important;
    border-right: none !important;
    box-sizing: border-box !important;
  }

  .lessons {
    width: 100% !important;
    padding: 10px 14px 18px !important;
    box-sizing: border-box !important;
  }

  /* 3. Ensure Each Lesson Card Spans Exactly Full Horizontal Width */
  .lesson {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    margin: 0 0 12px !important;
    padding: 16px 16px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
    background: #ffffff !important;
    border: 1px solid rgba(16, 95, 104, 0.15) !important;
    border-radius: 16px !important;
    box-shadow: 0 6px 20px rgba(16, 95, 104, 0.05) !important;
  }

  /* Left Index & Title Layout */
  .lesson > div:first-child {
    display: flex !important;
    align-items: flex-start !important;
    gap: 12px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .state {
    width: 36px !important;
    height: 36px !important;
    flex: 0 0 36px !important;
    border-radius: 50% !important;
  }

  /* Action Button Full Width inside Lesson Card */
  .lesson button[data-play] {
    width: 100% !important;
    box-sizing: border-box !important;
  }
}




/* ==========================================================================
   CHECKPOINT 35: PERFECT FULL-WIDTH COURSE MODULES & ANTI-OVERFLOW STANDARDIZATION
   High specificity override ensuring 100% full width alignment and zero text overflow (không kệch chữ)
   ========================================================================== */
@media (max-width: 768px) {
  /* 1. Eliminate All Teal/Light-Green Outer Box Borders & Padding */
  body .app .dashboard,
  body:not(.adminPage) .dashboard,
  body .app .dashboard > .curriculum,
  body .app #curriculum,
  body .app .curriculum-panel {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }

  body .app .curriculum > .title {
    padding: 18px 16px 14px !important;
    margin: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* 2. Full-Edge Module Container */
  body .app #modules,
  body .app .module {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 16px !important;
    padding: 0 !important;
    border-radius: 0 !important;
    border-left: none !important;
    border-right: none !important;
    border-top: 1px solid #e1f0ee !important;
    border-bottom: 1px solid #e1f0ee !important;
    background: #ffffff !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
  }

  /* 3. Clean Stacked Chapter Header (Override 3-Column Grid) */
  body .app .module > .chapterHead,
  body .app .chapterHead,
  body .app .module > button.chapterHead {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    grid-template-columns: none !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 18px 16px !important;
    gap: 8px !important;
    box-sizing: border-box !important;
    background: #ffffff !important;
    position: relative !important;
    text-align: left !important;
  }

  body .app .chapterHead .chapterLabel {
    display: inline-block !important;
    background: #0c3e44 !important;
    color: #ffffff !important;
    padding: 5px 14px !important;
    border-radius: 20px !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    letter-spacing: 1px !important;
  }

  body .app .chapterHead .modTitle {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    padding-right: 28px !important;
    box-sizing: border-box !important;
  }

  body .app .chapterHead .modTitle b {
    font-size: 18px !important;
    font-weight: 800 !important;
    color: #0c3e44 !important;
    line-height: 1.35 !important;
    margin-top: 2px !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
  }

  body .app .chapterHead .chev {
    position: absolute !important;
    right: 18px !important;
    top: 22px !important;
    font-size: 20px !important;
    color: #105f68 !important;
  }

  /* 4. Lesson List & Cards - Full Width & Anti-Overflow (Không kệch chữ) */
  body .app .module .lessons {
    width: 100% !important;
    max-width: 100% !important;
    padding: 10px 14px 18px !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
  }

  body .app .module .lesson {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 16px 14px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
    background: #f9fdfc !important;
    border: 1px solid #e1f0ee !important;
    border-radius: 16px !important;
    box-shadow: 0 4px 14px rgba(16, 95, 104, 0.04) !important;
    overflow: hidden !important;
  }

  body .app .lesson > div:first-child {
    display: flex !important;
    align-items: flex-start !important;
    gap: 12px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  body .app .lesson .state {
    width: 34px !important;
    height: 34px !important;
    flex: 0 0 34px !important;
    border-radius: 50% !important;
  }

  body .app .lesson .lessonText {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
    min-width: 0 !important;
    max-width: calc(100% - 46px) !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
  }

  body .app .lessonText b {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #0c3e44 !important;
    line-height: 1.38 !important;
    margin: 3px 0 4px !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
    white-space: normal !important;
  }

  body .app .lessonText em {
    font-size: 11.5px !important;
    color: #5a767a !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
  }

  body .app .lesson button[data-play] {
    width: 100% !important;
    box-sizing: border-box !important;
    background: linear-gradient(135deg, #105f68, #0a4c53) !important;
    color: #ffffff !important;
    padding: 11px 16px !important;
    border-radius: 12px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    border: none !important;
    box-shadow: 0 6px 18px rgba(16, 95, 104, 0.2) !important;
  }
}




/* ==========================================================================
   CHECKPOINT 36: LUXURY LEARNER HUB REDESIGN (TRUNG TÂM HỌC TẬP)
   State-of-the-Art Typography, 3D Glowing Icons, Glassmorphic Interactive Cards, & Vibrant Executive Aesthetic
   ========================================================================== */

/* 1. Executive Hub Section Container */
body .learnerHub,
body:not(.adminPage) .learnerHub {
  background: linear-gradient(160deg, #ffffff 0%, #f4fbf9 100%) !important;
  border: 1px solid rgba(16, 95, 104, 0.16) !important;
  border-radius: 28px !important;
  box-shadow: 0 24px 70px rgba(16, 95, 104, 0.07) !important;
  padding: 36px 36px !important;
  margin: 0 auto 36px !important;
  position: relative !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

/* 2. Stunning Hub Heading & Subtitle */
.hubHeading {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 20px !important;
  flex-wrap: wrap !important;
}

.hubHeading > div > span {
  display: inline-block !important;
  background: linear-gradient(135deg, #0c3e44, #105f68) !important;
  color: #e7b84f !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: 1.8px !important;
  padding: 6px 16px !important;
  border-radius: 20px !important;
  box-shadow: 0 4px 14px rgba(12, 62, 68, 0.22) !important;
  margin-bottom: 12px !important;
}

.hubHeading h2 {
  font-family: 'Be Vietnam Pro', sans-serif !important;
  font-size: 28px !important;
  font-weight: 800 !important;
  color: #0c3e44 !important;
  letter-spacing: -0.6px !important;
  line-height: 1.28 !important;
  margin: 4px 0 8px !important;
}

.hubHeading p {
  font-size: 14.5px !important;
  color: #4a6a6e !important;
  line-height: 1.6 !important;
  margin: 0 !important;
}

.hubHeading > a {
  color: #105f68 !important;
  font-weight: 800 !important;
  font-size: 13.5px !important;
  padding: 11px 22px !important;
  border-radius: 14px !important;
  background: #e6f5f3 !important;
  border: 1px solid #c8ebe6 !important;
  transition: all 0.25s ease !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.hubHeading > a:hover {
  background: #105f68 !important;
  color: #ffffff !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 20px rgba(16, 95, 104, 0.25) !important;
}

/* 3. Executive Grid Spacing */
.hubGrid {
  display: grid !important;
  grid-template-columns: 1.45fr 1fr 1fr 1fr !important;
  gap: 22px !important;
  align-items: stretch !important;
  margin-top: 30px !important;
}

@media (max-width: 1200px) {
  .hubGrid {
    grid-template-columns: 1fr 1fr !important;
  }
  .continueCard {
    grid-column: 1 / -1 !important;
  }
}

/* 4. Continue Lesson Featured Card (.continueCard) */
body .continueCard,
body:not(.adminPage) .continueCard {
  background: #ffffff !important;
  border: 1.5px solid #c6e8e3 !important;
  border-radius: 24px !important;
  padding: 24px !important;
  box-shadow: 0 14px 40px rgba(16, 95, 104, 0.08) !important;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
  display: grid !important;
  grid-template-columns: 160px 1fr !important;
  gap: 24px !important;
  align-items: center !important;
}

.continueCard:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 24px 55px rgba(16, 95, 104, 0.16) !important;
  border-color: #105f68 !important;
}

.continueVisual {
  border-radius: 18px !important;
  min-height: 210px !important;
  height: 100% !important;
  box-shadow: 0 10px 26px rgba(0,0,0,0.18) !important;
  position: relative !important;
  overflow: hidden !important;
  background-size: cover !important;
  background-position: center top !important;
}

.continueCard .hubBadge {
  color: #d19f36 !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 1.2px !important;
  display: inline-block !important;
  margin-bottom: 4px !important;
}

.continueCard h3 {
  font-size: 20px !important;
  font-weight: 800 !important;
  color: #0c3e44 !important;
  line-height: 1.35 !important;
  margin: 6px 0 8px !important;
}

.continueCard p {
  font-size: 13.5px !important;
  color: #5a767a !important;
  line-height: 1.55 !important;
  margin-bottom: 14px !important;
}

.continueProgress {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  margin-bottom: 16px !important;
}

.continueProgress i {
  flex: 1 !important;
  height: 8px !important;
  border-radius: 10px !important;
  background: #e3f3f1 !important;
  overflow: hidden !important;
  display: block !important;
}

.continueProgress i em {
  display: block !important;
  height: 100% !important;
  background: linear-gradient(90deg, #105f68, #35b3aa) !important;
  border-radius: 10px !important;
}

.continueProgress span {
  font-size: 12px !important;
  font-weight: 800 !important;
  color: #105f68 !important;
}

.continueCard button {
  background: linear-gradient(135deg, #105f68, #0b454c) !important;
  color: #ffffff !important;
  font-weight: 800 !important;
  font-size: 13.5px !important;
  padding: 13px 24px !important;
  border-radius: 14px !important;
  border: none !important;
  box-shadow: 0 8px 22px rgba(16, 95, 104, 0.28) !important;
  transition: all 0.25s ease !important;
  cursor: pointer !important;
}

.continueCard button:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 12px 30px rgba(16, 95, 104, 0.38) !important;
}

/* 5. Luxury Stat & Support Cards (.hubCard) */
body .hubCard,
body:not(.adminPage) .hubCard {
  background: #ffffff !important;
  border: 1px solid rgba(16, 95, 104, 0.14) !important;
  border-radius: 24px !important;
  padding: 26px 22px !important;
  box-shadow: 0 10px 32px rgba(16, 95, 104, 0.05) !important;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  position: relative !important;
  overflow: hidden !important;
}

.hubCard:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 22px 50px rgba(16, 95, 104, 0.14) !important;
  border-color: rgba(16, 95, 104, 0.35) !important;
}

/* 3D Glowing Icons */
.hubCard .hubIcon {
  width: 52px !important;
  height: 52px !important;
  border-radius: 16px !important;
  font-size: 22px !important;
  display: grid !important;
  place-items: center !important;
  margin-bottom: 16px !important;
  font-weight: 800 !important;
}

.progressHub .hubIcon {
  background: linear-gradient(135deg, #105f68, #35b3aa) !important;
  color: #ffffff !important;
  box-shadow: 0 8px 20px rgba(16, 95, 104, 0.28) !important;
}

.scheduleHub .hubIcon {
  background: linear-gradient(135deg, #f39c12, #e67e22) !important;
  color: #ffffff !important;
  box-shadow: 0 8px 20px rgba(243, 156, 18, 0.28) !important;
}

.supportHub .hubIcon {
  background: linear-gradient(135deg, #0c3e44, #105f68) !important;
  color: #e7b84f !important;
  box-shadow: 0 8px 20px rgba(12, 62, 68, 0.28) !important;
}

.hubCard > span {
  font-size: 10.5px !important;
  font-weight: 800 !important;
  color: #105f68 !important;
  letter-spacing: 1.3px !important;
  margin-bottom: 4px !important;
  display: block !important;
}

.hubCard strong {
  font-size: 32px !important;
  font-weight: 800 !important;
  color: #0c3e44 !important;
  line-height: 1.15 !important;
  display: block !important;
  margin: 4px 0 8px !important;
}

.hubCard p {
  font-size: 13.5px !important;
  color: #5a767a !important;
  line-height: 1.55 !important;
  margin-bottom: 16px !important;
}

/* Progress bar inside Progress Card */
.progressHub > i {
  height: 8px !important;
  border-radius: 10px !important;
  background: #e3f3f1 !important;
  overflow: hidden !important;
  display: block !important;
  margin-bottom: 14px !important;
}

.progressHub > i em {
  display: block !important;
  height: 100% !important;
  background: linear-gradient(90deg, #105f68, #35b3aa) !important;
  border-radius: 10px !important;
}

.hubCard a {
  color: #105f68 !important;
  font-weight: 800 !important;
  font-size: 13px !important;
  text-decoration: none !important;
}

/* Buttons inside Schedule & Support Cards */
#scheduleButton {
  background: #f2fbf9 !important;
  color: #105f68 !important;
  border: 1.5px solid #bce2dd !important;
  font-weight: 700 !important;
  border-radius: 12px !important;
  padding: 11px 16px !important;
  transition: all 0.25s ease !important;
  width: 100% !important;
  cursor: pointer !important;
}

#scheduleButton:hover {
  background: #105f68 !important;
  color: #ffffff !important;
}

#supportButton {
  background: linear-gradient(135deg, #f39c12, #e67e22) !important;
  color: #ffffff !important;
  border: none !important;
  font-weight: 800 !important;
  border-radius: 12px !important;
  padding: 12px 18px !important;
  box-shadow: 0 6px 18px rgba(243, 156, 18, 0.3) !important;
  transition: all 0.25s ease !important;
  width: 100% !important;
  cursor: pointer !important;
}

#supportButton:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 24px rgba(243, 156, 18, 0.4) !important;
}

/* 6. Mobile Responsive Full-Edge Luxury Alignment */
@media (max-width: 768px) {
  body .learnerHub,
  body:not(.adminPage) .learnerHub {
    width: 100% !important;
    max-width: 100% !important;
    padding: 24px 18px !important;
    margin: 0 0 24px !important;
    border-radius: 0 !important;
    border-left: none !important;
    border-right: none !important;
  }

  .hubHeading h2 {
    font-size: 22px !important;
  }

  .hubGrid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    margin-top: 20px !important;
  }

  body .continueCard,
  body:not(.adminPage) .continueCard {
    grid-template-columns: 1fr !important;
    padding: 18px !important;
    gap: 16px !important;
  }

  .continueVisual {
    min-height: 180px !important;
  }
}




/* ==========================================================================
   CHECKPOINT 37: HIGH-CONTRAST BOLD EXECUTIVE LEARNER HUB CARDS
   Crisp borders, bold ink text, elevated shadows, and color-coded top accent bars (Khắc phục hoàn toàn thẻ card bị mờ)
   ========================================================================== */

/* 1. Rich Executive Container Background for High Card Contrast */
body .learnerHub,
body:not(.adminPage) .learnerHub {
  background: linear-gradient(145deg, #eaf6f4 0%, #dceeed 100%) !important;
  border: 2px solid #afd7d3 !important;
  border-radius: 28px !important;
  box-shadow: 0 20px 60px rgba(16, 95, 104, 0.12) !important;
  padding: 38px 38px !important;
}

/* 2. Crisp, Bold, High-Contrast Cards (.continueCard & .hubCard) */
body .continueCard,
body:not(.adminPage) .continueCard {
  background: #ffffff !important;
  border: 2px solid #91c9c3 !important;
  border-top: 6px solid #105f68 !important;
  border-radius: 24px !important;
  padding: 26px !important;
  box-shadow: 0 16px 42px rgba(16, 95, 104, 0.15), 0 4px 14px rgba(0, 0, 0, 0.05) !important;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

body .continueCard:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 26px 60px rgba(16, 95, 104, 0.24) !important;
  border-color: #0c3e44 !important;
}

body .hubCard,
body:not(.adminPage) .hubCard {
  background: #ffffff !important;
  border: 2px solid #91c9c3 !important;
  border-radius: 24px !important;
  padding: 26px 24px !important;
  box-shadow: 0 16px 42px rgba(16, 95, 104, 0.15), 0 4px 14px rgba(0, 0, 0, 0.05) !important;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

body .progressHub {
  border-top: 6px solid #1fa39b !important;
}

body .scheduleHub {
  border-top: 6px solid #f39c12 !important;
}

body .supportHub {
  border-top: 6px solid #0c3e44 !important;
}

body .hubCard:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 26px 60px rgba(16, 95, 104, 0.24) !important;
  border-color: #0c3e44 !important;
}

/* 3. Bold, Deep, Crisp Typography (Never Blurry or Washed Out) */
.continueCard .hubBadge {
  background: #fdf5e6 !important;
  color: #b88218 !important;
  border: 1.5px solid #ebd098 !important;
  padding: 5px 12px !important;
  border-radius: 12px !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 1.2px !important;
  display: inline-block !important;
  margin-bottom: 6px !important;
}

.continueCard h3 {
  font-size: 21px !important;
  font-weight: 800 !important;
  color: #062327 !important;
  line-height: 1.35 !important;
  margin: 8px 0 8px !important;
}

.continueCard p {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #274e53 !important;
  line-height: 1.55 !important;
  margin-bottom: 16px !important;
}

.hubCard > span {
  font-size: 11px !important;
  font-weight: 800 !important;
  color: #0c3e44 !important;
  letter-spacing: 1.4px !important;
  margin-bottom: 6px !important;
  display: block !important;
}

.hubCard strong {
  font-size: 34px !important;
  font-weight: 800 !important;
  color: #062327 !important;
  line-height: 1.15 !important;
  display: block !important;
  margin: 4px 0 8px !important;
}

.hubCard p {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #274e53 !important;
  line-height: 1.55 !important;
  margin-bottom: 18px !important;
}

/* 4. Crisp 3D Icons with Deep Contrast Shadow */
.hubCard .hubIcon {
  width: 56px !important;
  height: 56px !important;
  border-radius: 16px !important;
  font-size: 24px !important;
  display: grid !important;
  place-items: center !important;
  margin-bottom: 18px !important;
  font-weight: 800 !important;
  color: #ffffff !important;
}

.progressHub .hubIcon {
  background: linear-gradient(135deg, #105f68, #269c94) !important;
  box-shadow: 0 10px 24px rgba(16, 95, 104, 0.35) !important;
}

.scheduleHub .hubIcon {
  background: linear-gradient(135deg, #f39c12, #d35400) !important;
  box-shadow: 0 10px 24px rgba(243, 156, 18, 0.35) !important;
}

.supportHub .hubIcon {
  background: linear-gradient(135deg, #0c3e44, #105f68) !important;
  color: #f7d584 !important;
  box-shadow: 0 10px 24px rgba(12, 62, 68, 0.35) !important;
}

/* 5. Sharp High-Impact Action Buttons */
.continueCard button {
  background: linear-gradient(135deg, #0c3e44, #105f68) !important;
  color: #ffffff !important;
  font-weight: 800 !important;
  font-size: 14px !important;
  padding: 14px 26px !important;
  border-radius: 14px !important;
  border: 2px solid #082a2e !important;
  box-shadow: 0 10px 24px rgba(12, 62, 68, 0.35) !important;
  cursor: pointer !important;
}

.continueCard button:hover {
  background: #082a2e !important;
  transform: translateY(-2px) !important;
}

#scheduleButton {
  background: #ffffff !important;
  color: #0c3e44 !important;
  border: 2px solid #105f68 !important;
  font-weight: 800 !important;
  border-radius: 14px !important;
  padding: 12px 18px !important;
  transition: all 0.25s ease !important;
  width: 100% !important;
  box-shadow: 0 4px 14px rgba(16, 95, 104, 0.12) !important;
}

#scheduleButton:hover {
  background: #105f68 !important;
  color: #ffffff !important;
}

#supportButton {
  background: linear-gradient(135deg, #e67e22, #d35400) !important;
  color: #ffffff !important;
  border: 2px solid #a84300 !important;
  font-weight: 800 !important;
  border-radius: 14px !important;
  padding: 13px 20px !important;
  box-shadow: 0 8px 22px rgba(230, 126, 34, 0.38) !important;
  width: 100% !important;
}

#supportButton:hover {
  background: #c0392b !important;
  transform: translateY(-2px) !important;
}




/* ==========================================================================
   CHECKPOINT 38: LUXURY HIGH-CONTRAST FEATURED COURSE COVER REDESIGN
   Eliminate white-on-white text clash, restore deep high-contrast ink typography, luxury stat pills, & crisp borders
   ========================================================================== */

/* 1. Executive Card Background & Crisp Border */
body .courseCover,
body:not(.adminPage) .courseCover {
  background: linear-gradient(135deg, #ffffff 0%, #f0f8f7 100%) !important;
  border: 2px solid #91c9c3 !important;
  border-top: 6px solid #105f68 !important;
  border-radius: 28px !important;
  box-shadow: 0 20px 60px rgba(16, 95, 104, 0.12), 0 4px 14px rgba(0, 0, 0, 0.05) !important;
  padding: 28px !important;
  display: grid !important;
  grid-template-columns: 240px 1fr 240px !important;
  gap: 26px !important;
  align-items: stretch !important;
  box-sizing: border-box !important;
}

/* 2. Sleek Rounded Video Image */
body .courseImage {
  border-radius: 20px !important;
  min-height: 220px !important;
  height: 100% !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18) !important;
  position: relative !important;
  overflow: hidden !important;
  background-size: cover !important;
  background-position: center top !important;
}

body .courseImage i {
  position: absolute !important;
  bottom: 14px !important;
  left: 14px !important;
  width: 44px !important;
  height: 44px !important;
  border-radius: 12px !important;
  background: rgba(16, 95, 104, 0.9) !important;
  color: #ffffff !important;
  display: grid !important;
  place-items: center !important;
  font-size: 20px !important;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25) !important;
}

/* 3. Deep High-Contrast Executive Typography (Khắc phục tuyệt đối lỗi chữ trắng trên nền trắng!) */
body .courseCover .commercialBadge,
body .courseMain .commercialBadge {
  background: linear-gradient(135deg, #f39c12, #e67e22) !important;
  color: #ffffff !important;
  font-weight: 800 !important;
  font-size: 11px !important;
  letter-spacing: 1.4px !important;
  padding: 6px 16px !important;
  border-radius: 20px !important;
  box-shadow: 0 4px 12px rgba(243, 156, 18, 0.3) !important;
  display: inline-block !important;
  margin-bottom: 12px !important;
}

body .courseCover h2,
body .courseMain h2 {
  font-family: 'Be Vietnam Pro', sans-serif !important;
  font-size: 28px !important;
  font-weight: 800 !important;
  color: #062327 !important;
  letter-spacing: -0.6px !important;
  line-height: 1.25 !important;
  margin: 4px 0 10px !important;
  text-shadow: none !important;
}

body .courseCover h3,
body .courseMain h3 {
  font-size: 17px !important;
  font-weight: 700 !important;
  color: #105f68 !important;
  line-height: 1.45 !important;
  margin-bottom: 12px !important;
  text-shadow: none !important;
}

body .courseCover p,
body .courseMain > p {
  font-size: 14.2px !important;
  font-weight: 600 !important;
  color: #274e53 !important;
  line-height: 1.6 !important;
  margin-bottom: 22px !important;
  text-shadow: none !important;
}

/* 4. Luxury Stat Pills (Học viên, Đánh giá, Thời lượng, Trình độ) */
body .courseFacts {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 12px !important;
  background: #e6f5f3 !important;
  border: 1.5px solid #afd7d3 !important;
  border-radius: 18px !important;
  padding: 14px 16px !important;
  margin-top: 16px !important;
}

body .courseFacts span {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
}

body .courseFacts b,
body .courseCover b {
  font-size: 17px !important;
  font-weight: 800 !important;
  color: #062327 !important;
  line-height: 1.2 !important;
  text-shadow: none !important;
}

body .courseFacts small {
  font-size: 11.5px !important;
  font-weight: 700 !important;
  color: #105f68 !important;
  margin-top: 4px !important;
  text-shadow: none !important;
}

/* 5. Right Action Box (.courseAction) */
body .courseAction {
  background: #ffffff !important;
  border: 2px solid #91c9c3 !important;
  border-radius: 24px !important;
  padding: 24px 20px !important;
  box-shadow: 0 12px 30px rgba(16, 95, 104, 0.08) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  box-sizing: border-box !important;
}

body .courseAction > span {
  font-size: 12px !important;
  font-weight: 800 !important;
  color: #105f68 !important;
  letter-spacing: 0.8px !important;
}

body .courseAction > b {
  font-size: 36px !important;
  font-weight: 800 !important;
  color: #062327 !important;
  margin: 6px 0 14px !important;
}

body .courseAction i {
  height: 8px !important;
  border-radius: 10px !important;
  background: #e3f3f1 !important;
  overflow: hidden !important;
  display: block !important;
  margin-bottom: 18px !important;
}

body .courseAction i em {
  display: block !important;
  height: 100% !important;
  background: linear-gradient(90deg, #105f68, #35b3aa) !important;
  border-radius: 10px !important;
}

body .courseAction button {
  background: linear-gradient(135deg, #105f68, #0b454c) !important;
  color: #ffffff !important;
  font-weight: 800 !important;
  font-size: 14.5px !important;
  padding: 14px 22px !important;
  border-radius: 14px !important;
  border: 2px solid #082a2e !important;
  box-shadow: 0 8px 22px rgba(16, 95, 104, 0.3) !important;
  transition: all 0.25s ease !important;
  cursor: pointer !important;
  width: 100% !important;
}

body .courseAction button:hover {
  transform: translateY(-2px) !important;
  background: #082a2e !important;
}

body .courseAction small {
  font-size: 11.5px !important;
  font-weight: 600 !important;
  color: #4a6a6e !important;
  margin-top: 12px !important;
  text-align: center !important;
  display: block !important;
}

/* Responsive Course Cover Alignment */
@media (max-width: 1100px) {
  body .courseCover {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
body .courseFacts {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* Codex final override must stay at EOF: reliable mobile drawer toggle. */
.mobileAuthPanel {
  display: none !important;
}

@media (max-width: 768px) {
  body:not(.adminPage).mobileDrawerOpen main > header {
    z-index: 260 !important;
    pointer-events: none !important;
  }

  body:not(.adminPage) #menu.isOpen,
  body:not(.adminPage).mobileDrawerOpen #menu {
    position: fixed !important;
    left: min(312px, calc(82vw + 10px)) !important;
    top: calc(10px + env(safe-area-inset-top)) !important;
    z-index: 280 !important;
    pointer-events: auto !important;
    background: #0b5962 !important;
    color: #fff !important;
  }

  body:not(.adminPage) #menu.isOpen::before {
    content: "×" !important;
    font-size: 30px !important;
    line-height: 1 !important;
  }

  body:not(.adminPage) #menu.isOpen {
    font-size: 0 !important;
  }

  body:not(.adminPage) #side.isGuest .profile,
  body:not(.adminPage) #side.isGuest .overall {
    display: none !important;
  }

  body:not(.adminPage) #side.isGuest .mobileAuthPanel {
    display: block !important;
  }

  body:not(.adminPage) #side.open {
    left: 0 !important;
    right: auto !important;
    transform: translateX(0) !important;
  }
}

body:not(.adminPage) #side.isDesktopViewport .mobileAuthPanel {
  display: none !important;
}

/* Codex visual system pass: clearer typography, stronger contrast, unified accents. */
:root {
  --codex-ink-900: #062f35;
  --codex-ink-800: #083f46;
  --codex-muted: #426c72;
  --codex-line: #b9dedb;
  --codex-teal: #105f68;
  --codex-teal-2: #238b91;
  --codex-mint: #63c1bb;
  --codex-gold: #e7b84f;
  --codex-gold-2: #ffd875;
  --codex-shadow: 0 16px 38px rgba(5, 61, 68, .14);
  --codex-shadow-hover: 0 22px 48px rgba(5, 61, 68, .22);
}

body {
  color: var(--codex-ink-900) !important;
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
}

body p,
body small,
body span,
body label,
body input,
body textarea,
body select,
body button {
  letter-spacing: 0 !important;
}

body p,
body .hubHeading p,
body .courseMain > p,
body .managedCard p,
body .toolCard p,
body .videoBody p,
body .articleBody p,
body .modal section p {
  color: var(--codex-muted) !important;
  font-weight: 500 !important;
  line-height: 1.65 !important;
}

body h1,
body h2,
body h3,
body .title p > b,
body .slideContent h2,
body .courseMain h2,
body .hubHeading h2,
body .module b,
body .lessonText b,
body .managedCard h3,
body .toolCard h3,
body .adminMain h1,
body .adminWorkspace h2,
body .memberWorkspace h2,
body .questionWorkspace h2 {
  color: var(--codex-ink-900) !important;
  font-weight: 900 !important;
  letter-spacing: 0 !important;
}

body:not(.adminPage) .slideContent h2,
body:not(.adminPage) .slideContent p,
body:not(.adminPage) .now h2,
body:not(.adminPage) .now b,
body:not(.adminPage) .now small,
body:not(.adminPage) .courseCover h2,
body:not(.adminPage) .courseCover h3,
body:not(.adminPage) .courseCover p,
body:not(.adminPage) .learnerHub h2,
body:not(.adminPage) .learnerHub p,
body:not(.adminPage) #side b,
body:not(.adminPage) #side small,
body:not(.adminPage) #side span {
  color: #fff !important;
}

body:not(.adminPage) #side small,
body:not(.adminPage) .now small,
body:not(.adminPage) .courseCover small,
body:not(.adminPage) .learnerHub p {
  color: #d9f4f1 !important;
}

body .title label,
body .hubBadge,
body .slideTag,
body .commercialBadge,
body .managedMeta span,
body .toolCard > span,
body .adminMain > header span,
body .codexPublishHead span,
body .mobileAuthBadge {
  color: var(--codex-teal-2) !important;
  font-size: max(10px, .72rem) !important;
  font-weight: 900 !important;
  letter-spacing: 1.2px !important;
}

body small,
body .brand small,
body .profile small,
body .overall small,
body .help small,
body .lessonText em,
body .chapterMeta small,
body .adminRow small,
body .memberRow small {
  font-size: max(10px, .7rem) !important;
  line-height: 1.45 !important;
}

body .profile b,
body #side nav a,
body .help b,
body .accountBtn,
body .memberButton,
body .registerBtn,
body .tab,
body .primary,
body .now > button,
body .lesson > button,
body .videoBody footer button,
body .toolCard button,
body .codexRouteGrid b {
  font-size: max(12px, .82rem) !important;
  font-weight: 900 !important;
}

body .title p > b,
body .hubHeading h2 {
  font-size: clamp(24px, 2.4vw, 36px) !important;
  line-height: 1.18 !important;
}

body .managedCard h3,
body .toolCard h3,
body .videoBody h3,
body .module .modTitle b {
  font-size: clamp(15px, 1.35vw, 20px) !important;
  line-height: 1.35 !important;
}

body button,
body .primary,
body .accountBtn,
body .memberButton,
body .registerBtn,
body .lesson > button,
body .managedCard button,
body .toolCard button,
body .videoLibraryMore,
body .codexRouteGrid button {
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease, color .18s ease !important;
}

body button:hover,
body .primary:hover,
body .accountBtn:hover,
body .memberButton:hover,
body .registerBtn:hover,
body .lesson > button:hover,
body .managedCard button:hover,
body .toolCard button:hover,
body .codexRouteGrid button:hover {
  transform: translateY(-1px) !important;
}

body .primary,
body .now > button,
body .managedCard button,
body .toolCard button,
body .videoLibraryMore,
body .mobileAuthButtons [data-mobile-login],
body .codexRouteGrid button.active {
  background: linear-gradient(135deg, var(--codex-gold), #f4c95d) !important;
  color: #07353b !important;
  border: 1px solid rgba(255,255,255,.55) !important;
  box-shadow: 0 12px 26px rgba(231, 184, 79, .32) !important;
}

body .primary:hover,
body .now > button:hover,
body .managedCard button:hover,
body .toolCard button:hover,
body .videoLibraryMore:hover {
  box-shadow: 0 18px 36px rgba(231, 184, 79, .42) !important;
}

body .curriculum,
body .videos,
body .notes,
body .awards,
body .published,
body .learningTools,
body .managedCard,
body .videoCard,
body .toolCard,
body .adminWorkspace,
body .memberWorkspace,
body .questionWorkspace,
body .codexPublishAssistant {
  border-color: var(--codex-line) !important;
  box-shadow: var(--codex-shadow) !important;
}

body .managedCard:hover,
body .videoCard:hover,
body .toolCard:hover,
body .module:hover,
body .codexRouteGrid button:hover {
  border-color: var(--codex-mint) !important;
  box-shadow: var(--codex-shadow-hover) !important;
}

body .hubIcon,
body .courseIcon,
body .planIcon,
body .adminNotificationButton,
body .codexRouteGrid i,
body .toolCard > i,
body .adminQAvatar,
body .quickReplyIcon {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.24), 0 10px 22px rgba(5, 61, 68, .18) !important;
}

body .hubIcon,
body .toolCard > i,
body .codexRouteGrid i {
  background: linear-gradient(145deg, var(--codex-gold), var(--codex-gold-2)) !important;
  color: #07353b !important;
}

body .notificationBtn,
body .adminNotificationButton,
body #menu,
body #closeSide,
body .loginClose,
body .forgotClose,
body .memberClose {
  border-radius: 14px !important;
  background: linear-gradient(145deg, #ffffff, #edf8f6) !important;
  color: var(--codex-teal) !important;
  border: 1px solid var(--codex-line) !important;
  box-shadow: 0 10px 22px rgba(5, 61, 68, .12) !important;
}

body .notificationBtn:hover,
body .adminNotificationButton:hover,
body #menu:hover {
  background: var(--codex-teal) !important;
  color: #fff !important;
}

body .adminHead,
body .memberHead {
  background: linear-gradient(135deg, #0e6b74, #0a5961) !important;
  color: #fff !important;
  box-shadow: 0 12px 28px rgba(5, 61, 68, .18) !important;
}

body .adminHead span,
body .memberHead span {
  color: #fff !important;
  font-size: 12px !important;
  font-weight: 900 !important;
}

body .adminRow b,
body .memberRow b,
body .adminQuestion h3 {
  color: var(--codex-ink-900) !important;
  font-size: 14px !important;
  font-weight: 900 !important;
}

body .adminRow,
body .memberRow {
  color: var(--codex-ink-800) !important;
}

body .published,
body .learningTools,
body .curriculum,
body .videos,
body .notes,
body .awards {
  background: rgba(255,255,255,.96) !important;
}

body .homeSlide::after,
body .slideOverlay {
  background: linear-gradient(90deg, rgba(2, 40, 45, .88) 0%, rgba(2, 40, 45, .58) 48%, rgba(2, 40, 45, .18) 100%) !important;
}

body .slideContent h2 {
  text-shadow: 0 4px 18px rgba(0,0,0,.36) !important;
}

body .slideContent p {
  color: #f3fffd !important;
  text-shadow: 0 2px 10px rgba(0,0,0,.32) !important;
}

body:not(.adminPage) #side.isDesktopViewport .mobileAuthPanel {
  display: none !important;
}

@media (max-width: 768px) {
  body {
    font-size: 14px !important;
  }

  body:not(.adminPage) #menu.isOpen::before {
    content: "\00d7" !important;
  }

  body .slideContent h2 {
    font-size: clamp(28px, 8vw, 38px) !important;
    line-height: 1.12 !important;
  }

  body .slideContent p,
  body .hubHeading p,
  body .courseMain > p,
  body .managedCard p,
  body .toolCard p {
    font-size: 13px !important;
  }

  body #side nav a,
  body .mobileAuthTitle,
  body .mobileAuthButtons button {
    font-size: 13px !important;
  }

  body small,
  body .brand small,
  body .profile small,
  body .overall small,
  body .help small {
    font-size: 10.5px !important;
  }

  body .curriculum,
  body .videos,
  body .notes,
  body .awards,
  body .published,
  body .learningTools {
    border-radius: 20px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
}

/* Codex stability pass: cleaner admin publishing assistant. */
.adminPage .codexPublishAssistant {
  margin: 18px 0 22px !important;
  padding: 18px !important;
  border-radius: 18px !important;
  border: 1px solid rgba(44, 161, 155, .34) !important;
  background: linear-gradient(135deg, #f2fbfa 0%, #ffffff 58%, #fff8e4 100%) !important;
  box-shadow: 0 16px 34px rgba(8, 76, 83, .10) !important;
}

.adminPage .codexPublishHead span {
  display: block !important;
  color: #238b91 !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  letter-spacing: 1.5px !important;
}

.adminPage .codexPublishHead h3 {
  margin: 6px 0 5px !important;
  color: #073b42 !important;
  font-size: clamp(21px, 2.3vw, 30px) !important;
  line-height: 1.12 !important;
}

.adminPage .codexPublishHead p {
  margin: 0 !important;
  max-width: 780px !important;
  color: #355f64 !important;
  font-size: 13px !important;
  line-height: 1.55 !important;
}

.adminPage .codexRouteGrid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 12px !important;
  margin-top: 16px !important;
}

.adminPage .codexRouteGrid button {
  min-height: 126px !important;
  padding: 14px !important;
  border-radius: 16px !important;
  border: 1px solid #b9dfdc !important;
  background: #fff !important;
  color: #083f46 !important;
  text-align: left !important;
  cursor: pointer !important;
  box-shadow: 0 10px 22px rgba(8, 76, 83, .08) !important;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease !important;
}

.adminPage .codexRouteGrid button:hover,
.adminPage .codexRouteGrid button.active {
  transform: translateY(-2px) !important;
  border-color: #2ca19b !important;
  box-shadow: 0 16px 30px rgba(8, 76, 83, .16) !important;
}

.adminPage .codexRouteGrid button.active {
  background: linear-gradient(145deg, #0f737b, #084a51) !important;
  color: #fff !important;
}

.adminPage .codexRouteGrid i {
  display: grid !important;
  place-items: center !important;
  width: 34px !important;
  height: 34px !important;
  margin-bottom: 10px !important;
  border-radius: 11px !important;
  background: #e7b84f !important;
  color: #073b42 !important;
  font-style: normal !important;
  font-weight: 900 !important;
}

.adminPage .codexRouteGrid b {
  display: block !important;
  font-size: 14px !important;
  line-height: 1.25 !important;
}

.adminPage .codexRouteGrid small {
  display: block !important;
  margin-top: 6px !important;
  color: inherit !important;
  opacity: .74 !important;
  font-size: 11px !important;
  line-height: 1.45 !important;
}

.adminPage .codexRoutePreview {
  display: grid !important;
  gap: 4px !important;
  margin-top: 14px !important;
  padding: 13px 14px !important;
  border-radius: 14px !important;
  background: rgba(44, 161, 155, .11) !important;
  border: 1px solid rgba(44, 161, 155, .26) !important;
  color: #073b42 !important;
}

.adminPage .codexRoutePreview b {
  font-size: 13px !important;
}

.adminPage .codexRoutePreview small {
  color: #4d6e73 !important;
  font-size: 11px !important;
}

.adminPage .codexAdvancedFields {
  margin-top: 12px !important;
}

.adminPage .codexAdvancedFields summary {
  cursor: pointer !important;
  color: #0b6870 !important;
  font-size: 12px !important;
  font-weight: 900 !important;
}

.adminPage .codexAdvancedInner {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 12px !important;
  margin-top: 12px !important;
}

@media (max-width: 980px) {
  .adminPage .codexRouteGrid,
  .adminPage .codexAdvancedInner {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 640px) {
  .adminPage .codexRouteGrid,
  .adminPage .codexAdvancedInner {
    grid-template-columns: 1fr !important;
  }
}

/* Codex stability pass: final mobile web-app shell. */
@media (max-width: 768px) {
  html,
  body:not(.adminPage) {
    background: #0b4248 !important;
  }

  body:not(.adminPage) .app {
    background: #e7f5f3 !important;
    min-height: 100vh !important;
  }

  body:not(.adminPage) main > header {
    position: sticky !important;
    top: 0 !important;
    z-index: 90 !important;
    display: grid !important;
    grid-template-columns: 48px 1fr !important;
    gap: 10px !important;
    align-items: center !important;
    padding: calc(10px + env(safe-area-inset-top)) 10px 12px !important;
    background: linear-gradient(180deg, #093f46 0%, #105f68 100%) !important;
    border: 0 !important;
    box-shadow: 0 10px 28px rgba(0, 34, 38, .24) !important;
  }

  body:not(.adminPage) #menu {
    grid-column: 1 !important;
    width: 48px !important;
    height: 48px !important;
    border-radius: 14px !important;
    background: rgba(255,255,255,.18) !important;
    color: #fff !important;
    border: 1px solid rgba(255,255,255,.22) !important;
  }

  body:not(.adminPage) #menu.isOpen {
    background: #0b5962 !important;
    position: fixed !important;
    left: min(312px, calc(82vw + 10px)) !important;
    top: calc(10px + env(safe-area-inset-top)) !important;
    z-index: 220 !important;
  }

  body:not(.adminPage).mobileDrawerOpen main > header {
    z-index: 230 !important;
    pointer-events: none !important;
  }

  body:not(.adminPage).mobileDrawerOpen #menu {
    pointer-events: auto !important;
  }

  body:not(.adminPage) #menu.isOpen::before {
    content: "×" !important;
    color: #fff !important;
    font-size: 30px !important;
    line-height: 1 !important;
  }

  body:not(.adminPage) #menu.isOpen {
    font-size: 0 !important;
  }

  body:not(.adminPage) header .tabs {
    grid-column: 2 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: 8px !important;
    min-width: 0 !important;
  }

  body:not(.adminPage) header .tab {
    min-width: 0 !important;
    height: 42px !important;
    padding: 0 10px !important;
    border-radius: 13px !important;
    overflow: hidden !important;
  }

  body:not(.adminPage) header .tab small {
    display: none !important;
  }

  body:not(.adminPage) header .tab span {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font-size: 10px !important;
  }

  body:not(.adminPage) header .search {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    height: 42px !important;
    margin: 0 !important;
    border-radius: 14px !important;
    background: #fff !important;
    border: 1px solid #b9dedb !important;
    box-shadow: inset 0 2px 8px rgba(6, 52, 58, .12) !important;
  }

  body:not(.adminPage) header .notificationBtn,
  body:not(.adminPage) header .memberButton,
  body:not(.adminPage) header #registerButton,
  body:not(.adminPage) header #accountButton {
    display: none !important;
  }

  body:not(.adminPage).mobileDrawerOpen::before {
    content: "" !important;
    position: fixed !important;
    inset: 0 !important;
    z-index: 120 !important;
    background: rgba(0, 24, 28, .58) !important;
    backdrop-filter: blur(3px) !important;
    pointer-events: auto !important;
  }

  body:not(.adminPage) #side {
    z-index: 150 !important;
    width: min(300px, 82vw) !important;
    max-width: 300px !important;
    padding: calc(18px + env(safe-area-inset-top)) 14px calc(18px + env(safe-area-inset-bottom)) !important;
    background: linear-gradient(180deg, #07545d 0%, #03363c 100%) !important;
    border-right: 1px solid rgba(164, 226, 220, .32) !important;
    box-shadow: 26px 0 60px rgba(0, 20, 23, .48) !important;
    overflow-y: auto !important;
  }

  body:not(.adminPage) #side.isGuest .profile,
  body:not(.adminPage) #side.isGuest .overall {
    display: none !important;
  }

  body:not(.adminPage) #side.isLoggedIn .profile {
    display: grid !important;
  }

  body:not(.adminPage) #side.isLoggedIn .overall {
    display: flex !important;
  }

  body:not(.adminPage) #side .mobileAuthPanel {
    display: block !important;
    margin: 12px 0 14px !important;
    padding: 14px !important;
    border-radius: 18px !important;
    background: linear-gradient(145deg, rgba(255,255,255,.17), rgba(255,255,255,.07)) !important;
    border: 1px solid rgba(167, 226, 221, .28) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.14) !important;
  }

  body:not(.adminPage) #side .mobileAuthPanel[hidden] {
    display: none !important;
  }

  body:not(.adminPage) .mobileAuthBadge {
    display: block !important;
    color: #9fe1dc !important;
    font-size: 9px !important;
    font-weight: 900 !important;
    letter-spacing: 1.2px !important;
  }

  body:not(.adminPage) .mobileAuthTitle {
    display: block !important;
    margin-top: 6px !important;
    color: #fff !important;
    font-size: 15px !important;
    line-height: 1.3 !important;
  }

  body:not(.adminPage) .mobileAuthDesc {
    margin: 5px 0 0 !important;
    color: #d4efec !important;
    font-size: 11px !important;
    line-height: 1.45 !important;
  }

  body:not(.adminPage) .mobileAuthButtons {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    margin-top: 12px !important;
  }

  body:not(.adminPage) .mobileAuthButtons button {
    min-height: 42px !important;
    border-radius: 13px !important;
    font-size: 12px !important;
    font-weight: 900 !important;
  }

  body:not(.adminPage) .mobileAuthButtons [data-mobile-login] {
    background: #e7b84f !important;
    color: #07353b !important;
    border: 0 !important;
  }

  body:not(.adminPage) .mobileAuthButtons [data-mobile-register] {
    background: rgba(255,255,255,.10) !important;
    color: #fff !important;
    border: 1px solid rgba(255,255,255,.25) !important;
  }

  body:not(.adminPage) #side nav {
    margin-top: 8px !important;
  }

  body:not(.adminPage) #side .help {
    margin-top: 12px !important;
    min-height: 58px !important;
  }
}




/* ==========================================================================
   CHECKPOINT 39: EXECUTIVE DARK-SLATE LUXURY HERO & HUB REDESIGN
   Jaw-dropping Deep Midnight Emerald Slate aesthetics, Glassmorphism, Diamond Contrast, & 3D Depth
   ========================================================================== */

/* ==========================================================================
   1. FEATURED COURSE COVER (.courseCover) - ROYAL MIDNIGHT EMERALD SLATE
   ========================================================================== */
body .courseCover,
body:not(.adminPage) .courseCover {
  background: linear-gradient(135deg, #072327 0%, #0c3e44 50%, #0f4f57 100%) !important;
  border: 1.5px solid rgba(231, 184, 79, 0.45) !important;
  border-top: 5px solid #e7b84f !important;
  border-radius: 30px !important;
  box-shadow: 0 28px 75px rgba(7, 35, 39, 0.48), 0 0 0 1px rgba(255, 255, 255, 0.08) inset !important;
  padding: 30px !important;
  display: grid !important;
  grid-template-columns: 260px 1fr 255px !important;
  gap: 28px !important;
  align-items: stretch !important;
  box-sizing: border-box !important;
  color: #ffffff !important;
  position: relative !important;
  overflow: hidden !important;
}

body .courseImage {
  border-radius: 22px !important;
  min-height: 240px !important;
  height: 100% !important;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.38) !important;
  position: relative !important;
  overflow: hidden !important;
  background-size: cover !important;
  background-position: center top !important;
  border: 2px solid rgba(255, 255, 255, 0.18) !important;
}

body .courseImage i {
  position: absolute !important;
  bottom: 14px !important;
  left: 14px !important;
  width: 48px !important;
  height: 48px !important;
  border-radius: 14px !important;
  background: rgba(12, 62, 68, 0.92) !important;
  color: #e7b84f !important;
  display: grid !important;
  place-items: center !important;
  font-size: 22px !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35) !important;
}

body .courseCover .commercialBadge,
body .courseMain .commercialBadge {
  background: linear-gradient(135deg, #f39c12, #e67e22) !important;
  color: #ffffff !important;
  font-weight: 800 !important;
  font-size: 11px !important;
  letter-spacing: 1.6px !important;
  padding: 6px 16px !important;
  border-radius: 20px !important;
  box-shadow: 0 4px 14px rgba(243, 156, 18, 0.4) !important;
  display: inline-block !important;
  margin-bottom: 14px !important;
}

body .courseCover h2,
body .courseMain h2 {
  font-family: 'Be Vietnam Pro', sans-serif !important;
  font-size: 30px !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  letter-spacing: -0.6px !important;
  line-height: 1.25 !important;
  margin: 4px 0 10px !important;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.25) !important;
}

body .courseCover h3,
body .courseMain h3 {
  font-size: 17px !important;
  font-weight: 700 !important;
  color: #63c1bb !important;
  line-height: 1.45 !important;
  margin-bottom: 14px !important;
  text-shadow: none !important;
}

body .courseCover p,
body .courseMain > p {
  font-size: 14.5px !important;
  font-weight: 500 !important;
  color: #d8eded !important;
  line-height: 1.65 !important;
  margin-bottom: 24px !important;
  text-shadow: none !important;
}

/* Translucent Emerald Glass Stat Pills */
body .courseFacts {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 12px !important;
  background: rgba(255, 255, 255, 0.09) !important;
  backdrop-filter: blur(14px) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  border-radius: 18px !important;
  padding: 16px 14px !important;
  margin-top: 18px !important;
}

body .courseFacts span {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
}

body .courseFacts b,
body .courseCover b {
  font-size: 18px !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  line-height: 1.2 !important;
}

body .courseFacts small {
  font-size: 11.5px !important;
  font-weight: 700 !important;
  color: #9ed5d1 !important;
  margin-top: 4px !important;
}

/* Right Action Box (.courseAction) - Glassmorphic Royal Card */
body .courseAction {
  background: rgba(14, 69, 75, 0.88) !important;
  backdrop-filter: blur(18px) !important;
  border: 1.5px solid rgba(231, 184, 79, 0.4) !important;
  border-radius: 24px !important;
  padding: 26px 22px !important;
  box-shadow: 0 16px 45px rgba(0, 0, 0, 0.35) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  box-sizing: border-box !important;
}

body .courseAction > span {
  font-size: 12px !important;
  font-weight: 800 !important;
  color: #9ed5d1 !important;
  letter-spacing: 0.8px !important;
}

body .courseAction > b {
  font-size: 38px !important;
  font-weight: 800 !important;
  color: #e7b84f !important;
  margin: 6px 0 14px !important;
  text-shadow: 0 2px 10px rgba(231, 184, 79, 0.3) !important;
}

body .courseAction i {
  height: 9px !important;
  border-radius: 10px !important;
  background: rgba(255, 255, 255, 0.15) !important;
  overflow: hidden !important;
  display: block !important;
  margin-bottom: 18px !important;
}

body .courseAction i em {
  display: block !important;
  height: 100% !important;
  background: linear-gradient(90deg, #e7b84f, #63c1bb) !important;
  border-radius: 10px !important;
}

body .courseAction button {
  background: linear-gradient(135deg, #e7b84f, #d19f36) !important;
  color: #072327 !important;
  font-weight: 800 !important;
  font-size: 14.5px !important;
  padding: 15px 22px !important;
  border-radius: 14px !important;
  border: none !important;
  box-shadow: 0 10px 26px rgba(231, 184, 79, 0.4) !important;
  transition: all 0.25s ease !important;
  cursor: pointer !important;
  width: 100% !important;
}

body .courseAction button:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 14px 34px rgba(231, 184, 79, 0.55) !important;
}

body .courseAction small {
  font-size: 11.5px !important;
  font-weight: 600 !important;
  color: #bce2dd !important;
  margin-top: 12px !important;
  text-align: center !important;
  display: block !important;
}

/* ==========================================================================
   2. LEARNER HUB (.learnerHub) - EXECUTIVE MIDNIGHT TEAL SLATE
   ========================================================================== */
body .learnerHub,
body:not(.adminPage) .learnerHub {
  background: linear-gradient(145deg, #08292e 0%, #0e444b 100%) !important;
  border: 1.5px solid rgba(99, 193, 187, 0.35) !important;
  border-top: 5px solid #63c1bb !important;
  border-radius: 30px !important;
  box-shadow: 0 25px 70px rgba(8, 41, 46, 0.4) !important;
  padding: 38px 38px !important;
  color: #ffffff !important;
}

.hubHeading h2 {
  color: #ffffff !important;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.25) !important;
}

.hubHeading p {
  color: #bce2dd !important;
}

.hubHeading > a {
  background: rgba(231, 184, 79, 0.15) !important;
  color: #e7b84f !important;
  border: 1px solid rgba(231, 184, 79, 0.45) !important;
}

.hubHeading > a:hover {
  background: #e7b84f !important;
  color: #072327 !important;
}

/* 4 Floating Pristine White Cards inside Dark Slate Hub */
body .continueCard,
body:not(.adminPage) .continueCard,
body .hubCard,
body:not(.adminPage) .hubCard {
  background: #ffffff !important;
  border: 2px solid #ffffff !important;
  border-radius: 24px !important;
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.28) !important;
}

body .continueCard {
  border-top: 6px solid #105f68 !important;
}

body .progressHub {
  border-top: 6px solid #2ca19b !important;
}

body .scheduleHub {
  border-top: 6px solid #f39c12 !important;
}

body .supportHub {
  border-top: 6px solid #0c3e44 !important;
}

/* Responsive Overrides */
@media (max-width: 1100px) {
  body .courseCover {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
  body .courseFacts {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* Codex final override must stay at EOF: reliable mobile drawer toggle. */
@media (max-width: 768px) {
  body:not(.adminPage).mobileDrawerOpen main > header {
    z-index: 260 !important;
    pointer-events: none !important;
  }

  body:not(.adminPage) #menu.isOpen,
  body:not(.adminPage).mobileDrawerOpen #menu {
    position: fixed !important;
    left: min(312px, calc(82vw + 10px)) !important;
    top: calc(10px + env(safe-area-inset-top)) !important;
    z-index: 280 !important;
    pointer-events: auto !important;
    background: #0b5962 !important;
    color: #fff !important;
  }

  body:not(.adminPage) #menu.isOpen::before {
    content: "×" !important;
    font-size: 30px !important;
    line-height: 1 !important;
  }

  body:not(.adminPage) #menu.isOpen {
    font-size: 0 !important;
  }

  body:not(.adminPage) #side.isGuest .profile,
  body:not(.adminPage) #side.isGuest .overall {
    display: none !important;
  }

  body:not(.adminPage) #side.isGuest .mobileAuthPanel {
    display: block !important;
  }
}

/* Custom override to make the homepage slide headings white and readable as requested */
body:not(.adminPage) .slideContent h1,
body:not(.adminPage) .slideContent h1 em {
  color: #ffffff !important;
}