*{box-sizing:border-box}body{margin:0;background:#f6f7fb;color:#182033;font-family:"Leelawadee UI",Tahoma,sans-serif}button,input{font:inherit}.login-wrap{min-height:100vh;display:grid;grid-template-columns:1.1fr .9fr}.login-art{background:linear-gradient(145deg,#6242de,#7e61f5);color:white;padding:52px 70px;display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden}.login-art:after{content:"";position:absolute;width:520px;height:520px;border:1px solid #ffffff18;border-radius:50%;right:-160px;bottom:-180px;box-shadow:0 0 0 70px #ffffff08,0 0 0 140px #ffffff06}.logo{display:flex;gap:12px;align-items:center;position:relative;z-index:1}.logo>b{width:44px;height:44px;border-radius:13px;background:#fff;color:#6848e8;display:grid;place-items:center;font-size:22px}.logo span,.logo small{display:block}.logo span{font-size:18px;font-weight:800}.logo small{font-size:10px;font-weight:400;opacity:.75}.login-art>div:nth-child(2){position:relative;z-index:1}.login-art p{font-size:14px;opacity:.75}.login-art h1{font-size:42px;line-height:1.35;margin:15px 0}.login-art h2{font-size:17px;font-weight:400;opacity:.8}.login-art footer{font-size:12px;opacity:.7;z-index:1}.login-card{background:white;display:grid;place-items:center;padding:40px}.login-card>div{width:min(390px,100%)}.login-card h2{font-size:27px;margin:0 0 5px}.login-card>div>p{color:#7e8798;font-size:13px;margin-bottom:28px}.login-card form>label{font-size:12px;font-weight:700;display:block;margin-bottom:16px}.login-card input:not([type=checkbox]){display:block;width:100%;border:1px solid #dfe2e9;border-radius:10px;padding:12px 13px;margin-top:7px;outline:none}.login-card input:focus{border-color:#7050ef;box-shadow:0 0 0 3px #7050ef18}.form-row{display:flex;justify-content:space-between;font-size:11px;margin:0 0 18px}.form-row .check{font-weight:400}.form-row a{color:#6848e8}.btn-primary{border:0;background:linear-gradient(135deg,#7657f5,#6041df);color:white;border-radius:10px;padding:12px 18px;font-weight:700;cursor:pointer}.login-card .btn-primary{width:100%}.alert{background:#fff0f2;color:#c63550;padding:10px;border-radius:8px;font-size:11px;margin-bottom:14px}.demo{background:#f7f5ff;border:1px solid #ebe7ff;border-radius:10px;padding:12px;margin-top:18px;font-size:10px}.demo>*{display:block}.demo span{color:#6e7788;margin-top:4px}.sidebar{position:fixed;inset:0 auto 0 0;width:245px;background:#fff;border-right:1px solid #e7e9ef;padding:25px 18px;display:flex;flex-direction:column}.logo.dark{padding:0 10px 28px}.logo.dark>b{background:#6d4bec;color:#fff}.logo.dark span{color:#182033}.logo.dark small{color:#8d95a5}.sidebar nav{display:grid;gap:6px}.sidebar nav a{padding:11px 13px;border-radius:10px;color:#697286;font-size:12px}.sidebar nav a.active{background:#f0edff;color:#6949ea;font-weight:700}.help{margin-top:auto;background:#f0edff;border-radius:14px;padding:16px}.help>*{display:block}.help b{font-size:11px}.help small{font-size:8px;color:#7f8798;margin-top:4px}.dashboard{margin-left:245px}.dashboard>header{height:75px;background:#fff;border-bottom:1px solid #e7e9ef;display:flex;align-items:center;justify-content:space-between;padding:0 32px}.dashboard>header>input{width:350px;background:#f7f8fa;border:1px solid #eceef2;border-radius:10px;padding:11px 14px;font-size:10px}.account{display:flex;align-items:center;gap:10px}.account>i{width:38px;height:38px;border-radius:11px;background:#d88b70;color:#fff;display:grid;place-items:center;font-style:normal;font-weight:700}.account span>*{display:block}.account span b{font-size:10px}.account span small{font-size:8px;color:#838b9c}.account>a{font-size:9px;color:#7658ec;margin-left:10px}.page{padding:28px 32px 50px;max-width:1450px;margin:auto}.welcome{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:23px}.welcome small{font-size:9px;color:#858d9e}.welcome h1{font-size:23px;margin:5px 0 2px}.welcome p{font-size:10px;color:#7f8899;margin:0}.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.stats article{background:#fff;border:1px solid #e7e9ef;border-radius:14px;padding:15px;display:flex;gap:12px}.stats article>i{width:41px;height:41px;border-radius:12px;background:#eeeaff;color:#6f4fed;display:grid;place-items:center;font-style:normal}.stats article:nth-child(2)>i{background:#e6f4ff;color:#318fd8}.stats article:nth-child(3)>i{background:#e6f8ee;color:#2fa86e}.stats article:nth-child(4)>i{background:#fff0e5;color:#e9893e}.stats article small,.stats article b{display:block}.stats article small{font-size:8px;color:#838b9c}.stats article b{font-size:20px}.stats article p{font-size:8px;color:#7f8798;margin:0}.dash-grid{display:grid;grid-template-columns:1.8fr .8fr;gap:17px;margin-top:17px}.white-card{background:#fff;border:1px solid #e7e9ef;border-radius:15px;overflow:hidden}.card-title{padding:16px 18px;border-bottom:1px solid #eff0f3;display:flex;justify-content:space-between}.card-title h2{font-size:12px;margin:0}.card-title p{font-size:8px;color:#8c94a4;margin:3px 0 0}.card-title a{font-size:9px;color:#6848e9}.exam-row{padding:12px 18px;display:flex;gap:12px;align-items:center;border-bottom:1px solid #f0f1f4}.exam-row time{width:42px;height:46px;border-radius:9px;background:#f0edff;color:#6848e8;display:grid;place-items:center;padding:5px}.exam-row time>*{display:block}.exam-row time b{font-size:15px}.exam-row time small{font-size:7px}.exam-row>div{flex:1}.exam-row h3{font-size:10px;margin:0}.exam-row p,.exam-row div small{font-size:8px;color:#838c9c;margin:3px 0}.exam-row mark{font-size:8px;background:#e8f8ef;color:#269b64;padding:5px 8px;border-radius:14px}.report{padding-bottom:15px}.donut{width:130px;height:130px;border-radius:50%;background:conic-gradient(#6e4cec 0 92%,#eae7f8 92%);margin:18px auto;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative}.donut:after{content:"";position:absolute;width:96px;height:96px;background:#fff;border-radius:50%}.donut>*{z-index:1}.donut b{font-size:23px}.donut small{font-size:8px;color:#8c94a3}.report>p{font-size:8px;color:#737c8f;margin:7px 22px}.report>p b{float:right;color:#172033}.report>button{width:calc(100% - 38px);margin:10px 19px 0;border:1px solid #ded8fa;background:#faf9ff;color:#6848e7;border-radius:9px;padding:8px;font-size:8px}.courses{margin-top:17px}.course-list{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;padding:17px}.course-list article{border:1px solid #e7e9ef;border-radius:12px;overflow:hidden}.course-list article>div{height:55px;color:#fff;display:grid;place-items:center;font-weight:800}.course-list article>section{padding:12px}.course-list small{font-size:7px;color:#828b9b}.course-list h3{font-size:11px;margin:2px 0}.course-list p{font-size:8px;color:#7d8697;margin:0}@media(max-width:900px){.stats{grid-template-columns:repeat(2,1fr)}.dash-grid{grid-template-columns:1fr}.course-list{grid-template-columns:1fr}.login-wrap{grid-template-columns:1fr}.login-art{display:none}}@media(max-width:680px){.sidebar{display:none}.dashboard{margin:0}.dashboard>header{padding:0 14px}.dashboard>header>input{width:190px}.account span{display:none}.page{padding:19px 11px}.welcome h1{font-size:19px}.welcome p{display:none}.stats{gap:9px}.stats article{padding:11px}.stats article>i{display:none}.login-card{padding:25px}}

body{font-size:15px}.login-card h2{font-size:30px}.login-card>div>p{font-size:15px}.login-card form>label{font-size:14px}.form-row{font-size:13px}.demo{font-size:12px}.sidebar nav a{font-size:14px}.help b{font-size:13px}.help small{font-size:10px}.dashboard>header>input{font-size:13px}.account span b{font-size:13px}.account span small{font-size:11px}.account>a{font-size:11px}.welcome small{font-size:12px}.welcome h1{font-size:27px}.welcome p{font-size:13px}.stats article small{font-size:11px}.stats article b{font-size:24px}.stats article p{font-size:11px}.card-title h2{font-size:15px}.card-title p{font-size:11px}.card-title a{font-size:12px}.exam-row h3{font-size:13px}.exam-row p,.exam-row div small{font-size:11px}.exam-row mark{font-size:11px}.report>p{font-size:11px}.report>button{font-size:11px}.donut small{font-size:11px}.course-list small{font-size:10px}.course-list h3{font-size:14px}.course-list p{font-size:11px}@media(max-width:680px){.welcome h1{font-size:22px}}
.app-page h2{font-size:18px;margin:0 0 12px}.panel{background:#fff;border:1px solid #e7e9ef;border-radius:12px;padding:16px;margin-bottom:16px}.app-form{display:grid;gap:12px}.app-form label{display:grid;gap:6px;font-weight:700;color:#343d52}.app-form input,.app-form select,.app-form textarea{width:100%;border:1px solid #dfe2e9;border-radius:10px;padding:10px 12px;background:#fff}.app-form button,.mini,.inline-actions button,.exam-toolbar button{border:0;background:#6848e8;color:#fff;border-radius:10px;padding:10px 14px;font-weight:800;cursor:pointer}.mini{display:inline-block;font-size:12px;text-decoration:none}.grid2,.grid3,.grid4{display:grid;gap:16px}.grid2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid4{grid-template-columns:repeat(4,minmax(0,1fr))}.wide{grid-column:1/-1}.check{display:flex!important;grid-template-columns:auto 1fr!important;align-items:center;gap:8px}.check input{width:auto}.notice{padding:12px 14px;border-radius:10px;margin-bottom:15px;background:#ecfff4;color:#12683d}.notice.warn{background:#fff7e8;color:#855000}.notice.error{background:#fff0f2;color:#b42039}.table-card{padding:16px}.table table{font-size:13px}.tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}.tabs a{background:#fff;border:1px solid #e2e5ee;border-radius:10px;padding:10px 12px;color:#6041df;text-decoration:none;font-weight:800}.course{background:#fff;border:1px solid #e7e9ef;border-radius:12px;padding:14px 16px;display:grid;gap:4px;margin-bottom:10px;text-decoration:none;color:#182033}.course span{color:#6f7889}.course-head p{color:#6f7889}.app-course-list{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}.question-card{background:#fff;border:1px solid #e7e9ef;border-radius:12px;padding:16px;margin:14px 0}.question-card p{line-height:1.65}.question-card img{max-width:520px;width:100%;border-radius:10px;border:1px solid #e7e9ef}.choice{display:block;margin:10px 0}.exam-toolbar{position:sticky;top:75px;z-index:5;background:#172033;color:#fff;border-radius:12px;padding:12px 16px;display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.timer.danger{color:#ffd166}.question-nav{position:sticky;top:132px;background:#fff;border:1px solid #e7e9ef;border-radius:12px;padding:10px;display:flex;gap:7px;flex-wrap:wrap}.question-nav a{width:32px;height:32px;border-radius:8px;background:#f0edff;color:#6041df;display:grid;place-items:center;text-decoration:none;font-weight:800}.score-box{background:#fff;border:1px solid #e7e9ef;border-radius:14px;padding:22px;margin-bottom:16px}.score-box b{display:block;font-size:42px;color:#6041df}.bar{height:12px;background:#edf0f6;border-radius:30px;overflow:hidden}.bar span{display:block;height:100%;background:#32ae73}.muted{color:#6f7889}.inline-actions{display:flex;gap:10px;align-items:center}@media(max-width:900px){.grid2,.grid3,.grid4{grid-template-columns:1fr}.exam-toolbar{top:0}.question-nav{top:62px}}

:root{--blue-900:#0f2f5f;--blue-800:#16437d;--blue-700:#1d5fae;--blue-600:#2474d4;--blue-500:#3185e8;--blue-100:#eaf4ff;--blue-050:#f5faff;--line:#d9e6f5;--text:#10233f;--muted:#66788f;--white:#fff}html{background:var(--blue-050)}body{background:linear-gradient(180deg,#f7fbff 0,#eef6ff 100%);color:var(--text)}a,a:visited,a:hover,a:focus{text-decoration:none;color:var(--blue-700)}button,.btn-primary,.mini,.app-form button,.inline-actions button,.exam-toolbar button,.report>button,.tabs a,.question-nav a{min-height:42px;display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:10px;border:1px solid transparent;padding:0 18px;font-size:14px;font-weight:800;line-height:1;white-space:nowrap;text-decoration:none;cursor:pointer;transition:background .15s,border-color .15s,box-shadow .15s,transform .15s}.btn-primary,button,.app-form button,.inline-actions button,.exam-toolbar button{background:var(--blue-600)!important;color:#fff!important;border-color:var(--blue-600)!important;box-shadow:0 8px 18px rgba(36,116,212,.16)}button:hover,.btn-primary:hover,.app-form button:hover,.inline-actions button:hover,.exam-toolbar button:hover{background:var(--blue-700)!important;border-color:var(--blue-700)!important;transform:translateY(-1px)}.mini,.tabs a,.question-nav a,.report>button{background:#fff!important;color:var(--blue-700)!important;border-color:var(--line)!important;box-shadow:none}.mini:hover,.tabs a:hover,.question-nav a:hover,.report>button:hover{background:var(--blue-100)!important;border-color:#b8d5f2!important}.login-art{background:linear-gradient(145deg,var(--blue-800),var(--blue-500))}.logo>b{color:var(--blue-700)}.logo.dark>b{background:var(--blue-600);color:#fff}.logo.dark span,.welcome h1,.app-page h2,.course-list h3,.exam-row h3{color:var(--blue-900)}.sidebar{border-right-color:var(--line);box-shadow:8px 0 26px rgba(15,47,95,.04)}.sidebar nav a{color:#52647a;text-decoration:none}.sidebar nav a.active{background:var(--blue-100);color:var(--blue-800);box-shadow:inset 3px 0 0 var(--blue-600)}.help,.demo{background:var(--blue-100);border:1px solid var(--line)}.dashboard>header{border-bottom-color:var(--line);box-shadow:0 8px 22px rgba(15,47,95,.04)}.dashboard>header>input,.app-form input,.app-form select,.app-form textarea,.login-card input:not([type=checkbox]){border-color:var(--line);background:#fff;color:var(--text);min-height:44px}.dashboard>header>input:focus,.app-form input:focus,.app-form select:focus,.app-form textarea:focus,.login-card input:focus{outline:0;border-color:var(--blue-500);box-shadow:0 0 0 3px rgba(49,133,232,.14)}.panel,.white-card,.stats article,.course,.question-card,.score-box,.table{border-color:var(--line);box-shadow:0 10px 28px rgba(15,47,95,.06);border-radius:12px}.card-title{border-bottom-color:var(--line)}.stats article>i{background:var(--blue-100)!important;color:var(--blue-700)!important}.account>i{background:var(--blue-600)}.account>a{color:var(--blue-700);text-decoration:none}.exam-row time{background:var(--blue-100);color:var(--blue-800)}.exam-row mark{background:#e9f7ff;color:var(--blue-800)}.donut{background:conic-gradient(var(--blue-600) 0 92%,#dcecff 92%)}.score-box b,.bar span{color:var(--blue-700);background:var(--blue-600)}.exam-toolbar{background:var(--blue-900)}.question-nav a{width:36px;height:36px;padding:0}.app-form.grid4,.grid4{align-items:end}.app-form.grid4 button,.grid3 .app-form button,.panel.app-form button{width:100%;height:48px}.inline-actions{align-items:center}.inline-actions select{min-height:42px;border:1px solid var(--line);border-radius:10px;padding:0 12px}.login-link a{text-decoration:none;color:var(--blue-700);font-weight:800}.table a{text-decoration:none}.table th{background:var(--blue-100);color:var(--blue-900)}.table td,.table th{border-bottom-color:#edf4fb}@media(max-width:900px){button,.btn-primary,.mini,.app-form button,.inline-actions button,.exam-toolbar button,.report>button,.tabs a{width:100%}.tabs a,.question-nav a{width:auto}.exam-toolbar{gap:10px;align-items:stretch;flex-direction:column}}