:root {
  --l1: #a1d9ef;
  --l2: #b8e2f3;
  --l3: #d0ecf7;
  --l4: #e7f5fb;
  --l5: #f8fcfe;
  --d1: #69c2e6;
  --d4: #2092bf;
}
.w3-theme-l5 {
  color: #000 !important;
  background-color: #f8fcfe !important;
}
.w3-theme-l4 {
  color: #000 !important;
  background-color: #e7f5fb !important;
}
.w3-theme-l3 {
  color: #000 !important;
  background-color: #d0ecf7 !important;
}
.w3-theme-l2 {
  color: #000 !important;
  background-color: #b8e2f3 !important;
}
.w3-theme-l1 {
  color: #000 !important;
  background-color: #a1d9ef !important;
}
.w3-theme-d1 {
  color: #000 !important;
  background-color: #69c2e6 !important;
}
.w3-theme-d2 {
  color: #fff !important;
  background-color: #4ab6e0 !important;
}
.w3-theme-d3 {
  color: #fff !important;
  background-color: #2aa9db !important;
}
.w3-theme-d4 {
  color: #fff !important;
  background-color: #2092bf !important;
}
.w3-theme-d5 {
  color: #fff !important;
  background-color: #1b7a9f !important;
}

.w3-theme-light {
  color: #000 !important;
  background-color: #f8fcfe !important;
}
.w3-theme-dark {
  color: #fff !important;
  background-color: #1b7a9f !important;
}
.w3-theme-action {
  color: #fff !important;
  background-color: #1b7a9f !important;
}

.w3-theme {
  color: #000 !important;
  background-color: #87ceeb !important;
}
.w3-text-theme {
  color: #87ceeb !important;
}
.w3-border-theme {
  border-color: #87ceeb !important;
}

.w3-hover-theme:hover {
  color: #000 !important;
  background-color: #87ceeb !important;
}
.w3-hover-text-theme:hover {
  color: #87ceeb !important;
}
.w3-hover-border-theme:hover {
  border-color: #87ceeb !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 */
  );
}