:root{
  --bg-1:#f3f7ff;
  --bg-2:#f8fbff;
  --bg-3:#f7f1ff;
  --surface:#ffffff;
  --surface-soft:#f7f8ff;
  --surface-tint:#f3f8ff;
  --border:#d9e2f4;
  --border-strong:#c7d2fe;
  --text:#16213e;
  --text-soft:#5f6b85;
  --heading:#25337a;
  --primary:#5b3df5;
  --primary-dark:#432dd6;
  --secondary:#0f9f8f;
  --ring:rgba(91,61,245,.16);
  --success:#16a34a;
  --danger:#e11d48;
  --warning:#f59e0b;
  --shadow:0 18px 42px rgba(48,56,113,.10);
  --shadow-soft:0 10px 24px rgba(48,56,113,.08);
}

body{
  background:linear-gradient(180deg,var(--bg-1) 0%, var(--bg-2) 52%, var(--bg-3) 100%) !important;
  color:var(--text) !important;
}

.main,.box,.wrap,.modal{
  border-color:var(--border) !important;
  box-shadow:var(--shadow) !important;
}

.brand,
.muted,
.hint,
.note,
small{
  color:var(--text-soft) !important;
}

.brand h1,
h1,h2,h3,
.title,
.section-title,
.modal-title{
  color:var(--heading) !important;
}

a{
  color:var(--primary-dark) !important;
}

a:hover{
  color:var(--primary) !important;
}

.inputx,
input[type="text"],
input[type="password"],
input[type="date"],
input[type="datetime-local"],
input[type="number"],
select,
textarea{
  border-color:var(--border) !important;
  background:#fbfcff !important;
  color:var(--text) !important;
}

.inputx:focus,
input[type="text"]:focus,
input[type="password"]:focus,
input[type="date"]:focus,
input[type="datetime-local"]:focus,
input[type="number"]:focus,
select:focus,
textarea:focus{
  outline:none !important;
  border-color:rgba(91,61,245,.46) !important;
  box-shadow:0 0 0 4px var(--ring) !important;
  background:#ffffff !important;
}

.btn,
button.btn,
.savebtn,
.logout a,
#switch2ans,
button[type="submit"]:not(.ds-chip):not(.p1-label),
.p1-radio:checked + .p1-label,
.pager .on{
  background:linear-gradient(135deg,var(--primary) 0%, var(--secondary) 100%) !important;
  color:#ffffff !important;
  border-color:transparent !important;
  box-shadow:0 12px 24px rgba(91,61,245,.18) !important;
}

.savebtn.neutral{
  background:linear-gradient(135deg,#586174 0%, #374151 100%) !important;
}

.savebtn.danger,
.logout a,
button.danger{
  background:linear-gradient(135deg,#ef476f 0%, var(--danger) 100%) !important;
}

.pager a,
.progress-pill,
.badge,
.p2-letter,
.info,
.stat,
.defaults,
.phancauhoi,
.score,
.note,
.pwbox{
  border-color:var(--border) !important;
}

table th,
.p1-table th,
.sticky th{
  background:#f4f6ff !important;
  color:var(--heading) !important;
}

table td,
table th{
  border-color:var(--border) !important;
}

.info,
.stat,
.phancauhoi{
  background:linear-gradient(180deg,#ffffff 0%, #fafcff 100%) !important;
}

.score{
  background:linear-gradient(180deg,#effcf4 0%, #f8fffb 100%) !important;
  border-color:#b9e8c8 !important;
}

.note,
.defaults{
  background:linear-gradient(180deg,#fffaf0 0%, #fff7ed 100%) !important;
}

.progress-bar span,
.progress-bar-inner{
  background:linear-gradient(90deg,var(--primary) 0%, var(--secondary) 100%) !important;
}

.radio span,
.circle-radio span,
.p1-label{
  border-color:var(--border-strong) !important;
  color:var(--primary-dark) !important;
  background:#ffffff !important;
  box-shadow:0 8px 18px rgba(48,56,113,.06) !important;
}

.radio input:checked + span,
.circle-radio input:checked + span{
  background:linear-gradient(180deg,#7c62ff 0%, var(--primary) 100%) !important;
  color:#ffffff !important;
  border-color:transparent !important;
  box-shadow:0 10px 20px rgba(91,61,245,.22) !important;
}

.p2-section .circle-radio input[value="DUNG"]:checked + span,
.radio-ds input[type=radio].dung:checked + label{
  background:linear-gradient(180deg,#2dd4bf 0%, var(--success) 100%) !important;
  border-color:transparent !important;
  color:#ffffff !important;
  box-shadow:0 10px 20px rgba(22,163,74,.24) !important;
}

.p2-section .circle-radio input[value="SAI"]:checked + span,
.radio-ds input[type=radio].sai:checked + label{
  background:linear-gradient(180deg,#fb7185 0%, var(--danger) 100%) !important;
  border-color:transparent !important;
  color:#ffffff !important;
  box-shadow:0 10px 20px rgba(225,29,72,.24) !important;
}

.ok{color:var(--success) !important;}
.ko{color:var(--danger) !important;}

::selection{
  background:rgba(91,61,245,.16);
}