
:root{--primary:#1976D2;--primary-2:#0D47A1;--primary-3:#42A5F5;--cyan:#00BCD4;--gold:#FFC107;--bg:#eef6ff;--surface:#fff;--text:#172033;--muted:#64748b;--border:#d9e6f5;--shadow:0 18px 50px rgba(13,71,161,.14);--shadow-soft:0 8px 24px rgba(13,71,161,.09)}
*{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth}body{font-family:"Segoe UI",Arial,sans-serif;color:var(--text);min-height:100vh;padding:20px;background:radial-gradient(circle at 10% 10%,rgba(66,165,245,.16),transparent 28%),radial-gradient(circle at 90% 15%,rgba(0,188,212,.10),transparent 25%),linear-gradient(145deg,#edf7ff,#f7fbff 48%,#eaf4ff);overflow-x:hidden;-webkit-user-select:none;user-select:none}
body:before,body:after{content:"";position:fixed;z-index:-1;border-radius:50%;pointer-events:none}.container{width:min(1080px,100%);margin:0 auto;background:rgba(255,255,255,.94);border:1px solid rgba(255,255,255,.9);border-radius:28px;overflow:hidden;box-shadow:var(--shadow);backdrop-filter:blur(12px)}
.header{position:relative;isolation:isolate;color:#fff;padding:34px 32px 30px;text-align:center;overflow:hidden;background:radial-gradient(circle at 15% 15%,rgba(255,255,255,.17),transparent 20%),radial-gradient(circle at 88% 25%,rgba(0,188,212,.25),transparent 24%),linear-gradient(135deg,#1976D2,#1255ad 52%,#0D47A1);border-bottom:4px solid var(--gold)}
.header:before{content:"";position:absolute;inset:0;z-index:-1;opacity:.20;background-image:linear-gradient(rgba(255,255,255,.25) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.25) 1px,transparent 1px);background-size:34px 34px}.header:after{content:"";position:absolute;width:420px;height:420px;right:-210px;top:-260px;border:1px solid rgba(255,255,255,.18);border-radius:50%;box-shadow:0 0 0 38px rgba(255,255,255,.035),0 0 0 78px rgba(255,255,255,.025)}
.header img{width:92px;height:92px;object-fit:contain;padding:9px;margin-bottom:13px;border-radius:24px;background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.32);box-shadow:0 12px 28px rgba(0,0,0,.16)}.header p{font-size:clamp(.82rem,1.7vw,1rem);font-weight:700;letter-spacing:.04em;font-family:"Times New Roman",serif;margin-bottom:12px;opacity:.96}.header h1{max-width:900px;margin:0 auto;font-family:"Times New Roman",serif;font-size:clamp(1.25rem,3vw,2rem);line-height:1.35;text-transform:uppercase;text-shadow:0 3px 12px rgba(0,0,0,.22)}
.phase-badge{position:relative;margin-top:18px;display:inline-flex;align-items:center;gap:8px;background:linear-gradient(135deg,#ffd54f,#ffc107);color:#7a4b00;padding:9px 22px;border-radius:999px;font-weight:800;font-size:.95rem;box-shadow:0 8px 20px rgba(0,0,0,.16)}.phase-badge:before{content:"";width:9px;height:9px;border-radius:50%;background:#16a34a;box-shadow:0 0 0 5px rgba(22,163,74,.16);animation:pulse 1.8s infinite}
.content{padding:36px clamp(20px,4vw,48px)}#registerForm.content{background:linear-gradient(180deg,#fff,#fafdff)}#registerForm h2:after{content:"";display:block;width:58px;height:4px;border-radius:10px;margin:12px auto 0;background:linear-gradient(90deg,var(--primary),var(--cyan))}.form-group{margin-bottom:20px}.form-group label{display:block;margin-bottom:8px;font-weight:700;color:#174b91;font-size:.96rem}.form-group input,.form-group select,#duDoanCuoi{width:100%;min-height:52px;padding:13px 16px;color:var(--text);background:#fff;border:1.5px solid var(--border);border-radius:13px;font-size:1rem;transition:.2s;box-shadow:0 3px 10px rgba(13,71,161,.035)}.form-group input:focus,.form-group select:focus,#duDoanCuoi:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 4px rgba(25,118,210,.11),0 7px 18px rgba(13,71,161,.07)}.form-group select{cursor:pointer}.note-text{font-size:.84rem;color:var(--muted);margin-top:7px;font-style:italic}
.btn{position:relative;overflow:hidden;min-height:54px;background:linear-gradient(135deg,#2196F3,#1976D2 45%,#0D47A1);color:#fff;border:none;padding:15px 28px;font-size:1rem;font-weight:800;letter-spacing:.025em;border-radius:14px;cursor:pointer;width:100%;transition:.18s;box-shadow:0 10px 22px rgba(25,118,210,.25)}.btn:hover{transform:translateY(-2px);box-shadow:0 14px 28px rgba(25,118,210,.30)}.btn:disabled{opacity:.65;cursor:not-allowed;transform:none}.btn-secondary{background:linear-gradient(135deg,#64748b,#475569);box-shadow:0 8px 18px rgba(71,85,105,.18)}.hidden{display:none!important}
#examSection{background:#f7fbff}.timer{position:sticky;top:12px;z-index:5;display:flex;justify-content:center;align-items:center;min-height:58px;padding:13px 18px;background:linear-gradient(135deg,#fff9e6,#fffdf5);border:1px solid #f6d46b;border-radius:15px;color:#174b91;font-size:1.12rem;font-weight:800;margin-bottom:18px;box-shadow:0 8px 20px rgba(180,130,0,.08)}.progress-bar{position:relative;background:#dceafa;border-radius:999px;height:11px;margin-bottom:20px;overflow:hidden}.progress-fill{background:linear-gradient(90deg,#1976D2,#2196F3,#00BCD4);height:100%;border-radius:999px;transition:width .35s ease}.q-nav-btn{width:42px;height:38px;border:1px solid #d5e2f1;border-radius:10px;background:#fff;color:#47627f;cursor:pointer;font-weight:800;margin:3px;transition:.18s}.q-nav-btn:hover{border-color:#7fb1e6;transform:translateY(-1px)}.q-nav-btn.answered{background:linear-gradient(135deg,#1976D2,#0D47A1);color:#fff;border-color:#1976D2;box-shadow:0 5px 12px rgba(25,118,210,.18)}.q-nav-btn.current{border-color:var(--gold);box-shadow:0 0 0 3px rgba(255,193,7,.22);transform:translateY(-1px)}
.question-box{background:#fff;padding:28px clamp(18px,4vw,34px);border-radius:20px;margin-bottom:22px;border:1px solid #dce9f7;border-left:5px solid #1976D2;box-shadow:var(--shadow-soft);animation:questionIn .24s ease}.question-number{display:inline-flex;color:#0D47A1;font-weight:800;margin-bottom:15px;font-size:1rem;border:1px solid #cfe2f6;background:#eef7ff;padding:7px 13px;border-radius:999px}.question-text{font-size:1.12rem;line-height:1.7;margin-bottom:21px;font-weight:650}.option{display:flex;align-items:center;min-height:58px;padding:12px 15px;background:#f8fbff;border:1.5px solid #dce7f3;border-radius:14px;cursor:pointer;margin-bottom:11px;transition:.18s}.option:hover{transform:translateX(3px);border-color:#83b7e7;background:#f0f8ff;box-shadow:0 6px 16px rgba(13,71,161,.07)}.option.selected{border-color:#1976D2;background:linear-gradient(90deg,#e6f3ff,#f5fbff);font-weight:700;color:#0D47A1;box-shadow:0 7px 18px rgba(25,118,210,.12)}.option input{margin-right:13px;transform:scale(1.25);accent-color:#1976D2;cursor:pointer}.option label{cursor:pointer;line-height:1.5}.nav-buttons{display:flex;gap:14px;margin-top:18px}.nav-buttons .btn{flex:1;padding:13px 10px;font-size:.93rem}#submitBox{margin-top:28px!important;padding:24px;background:#fff;border:1px solid #dce9f7;border-radius:20px;box-shadow:var(--shadow-soft)}#duDoanCuoi{max-width:360px;display:block;margin:0 auto 14px!important}.exam-note{background:#fff7f7;color:#b42318;padding:12px 14px;border-radius:12px;border:1px solid #fecaca;font-weight:650;margin-top:14px;font-size:.9rem}
#resultSection{background:radial-gradient(circle at 50% 0,rgba(66,165,245,.10),transparent 35%),#fff}#resultScore{display:flex;align-items:center;justify-content:center;width:180px;height:180px;margin:10px auto 20px;border-radius:50%;background:linear-gradient(145deg,#fff,#edf7ff);border:10px solid #dceeff;box-shadow:0 0 0 7px #fff,0 15px 38px rgba(25,118,210,.14);font-size:2.8rem!important;color:#0D47A1!important}#resultText{color:#0D47A1!important}#resultDetails{max-width:650px;margin:0 auto;background:#f7fbff!important;padding:22px!important;border-radius:18px!important;border:1px solid #dce9f7!important;box-shadow:var(--shadow-soft)}#resultDetails p{padding:10px 0!important;margin:0!important;border-bottom:1px dashed #d8e5f2!important}#resultDetails p:last-child{border-bottom:0!important}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(.82)}}@keyframes questionIn{from{opacity:.3;transform:translateY(5px)}to{opacity:1;transform:none}}
@media(max-width:700px){body{padding:7px}.container{border-radius:18px}.header{padding:24px 15px 22px}.header img{width:70px;height:70px;border-radius:18px;margin-bottom:9px}.header p{font-size:.78rem;line-height:1.4}.header h1{font-size:1.08rem;line-height:1.38}.phase-badge{font-size:.78rem;padding:8px 14px}.content{padding:24px 14px}.form-group input,.form-group select,#duDoanCuoi{min-height:50px;font-size:16px}.timer{top:6px;font-size:1rem}.q-nav-btn{width:37px;height:35px;font-size:.84rem}.question-box{padding:21px 15px;border-left-width:4px}.question-text{font-size:1rem;line-height:1.6}.option{min-height:55px;padding:10px 12px}.nav-buttons{gap:8px}.nav-buttons .btn{font-size:.78rem;min-height:48px}#submitBox{padding:18px}#resultScore{width:145px;height:145px;font-size:2.35rem!important}}@media(max-width:380px){.q-nav-btn{width:33px;height:33px;margin:2px}.header h1{font-size:1rem}}
