:root {
  --l1: #845bcb;
  --l2: #a384d8;
  --l3: #c1ade5;
  --l4: #e0d6f2;
  --l5: #f6f3fb;
  --d1: #5d34a4;
  --d4: #3e236d;
}
.w3-theme-l5 {
  color: #000 !important;
  background-color: #f6f3fb !important;
}
.w3-theme-l4 {
  color: #000 !important;
  background-color: #e0d6f2 !important;
}
.w3-theme-l3 {
  color: #000 !important;
  background-color: #c1ade5 !important;
}
.w3-theme-l2 {
  color: #fff !important;
  background-color: #a384d8 !important;
}
.w3-theme-l1 {
  color: #fff !important;
  background-color: #845bcb !important;
}
.w3-theme-d1 {
  color: #fff !important;
  background-color: #5d34a4 !important;
}
.w3-theme-d2 {
  color: #fff !important;
  background-color: #532e92 !important;
}
.w3-theme-d3 {
  color: #fff !important;
  background-color: #482880 !important;
}
.w3-theme-d4 {
  color: #fff !important;
  background-color: #3e236d !important;
}
.w3-theme-d5 {
  color: #fff !important;
  background-color: #341d5b !important;
}

.w3-theme-light {
  color: #000 !important;
  background-color: #f6f3fb !important;
}
.w3-theme-dark {
  color: #fff !important;
  background-color: #341d5b !important;
}
.w3-theme-action {
  color: #fff !important;
  background-color: #341d5b !important;
}

.w3-theme {
  color: #fff !important;
  background-color: #673ab7 !important;
}
.w3-text-theme {
  color: #673ab7 !important;
}
.w3-border-theme {
  border-color: #673ab7 !important;
}

.w3-hover-theme:hover {
  color: #fff !important;
  background-color: #673ab7 !important;
}
.w3-hover-text-theme:hover {
  color: #673ab7 !important;
}
.w3-hover-border-theme:hover {
  border-color: #673ab7 !important;
}

/* ชุดที่ 1 (Header / Navbar / Banner) */
.w3-theme-gradient1 {
  color: #000 !important;
  background: linear-gradient(
    to bottom,
    var(--l3) 0%,
    /* l3 */ var(--l1) 40%,
    /* l1 */ var(--d1) 100% /* d1 */
  );
}

/* ชุดที่ 2 (Footer / Hero / Admin) */
.w3-theme-gradient2 {
  color: #000 !important;
  background: linear-gradient(
    to bottom,
    var(--l2) 0%,
    /* l2 */ var(--d1) 45%,
    /* d1 */ var(--d4) 100% /* d4 */
  );
}

/* ชุดที่ 3 (Content / Page Background) */
.w3-theme-gradient3 {
  color: #000 !important;
  background: linear-gradient(
    to bottom,
    var(--l5) 0%,
    /* l5 */ var(--l4) 45%,
    /* l4 */ var(--l3) 100% /* l3 */
  );
}