:root {
        --l0: #ffeb3b;
        --l1: #ffef64;
        --l2: #fff38b;
        --l3: #fff7b1;
        --l4: #fffbd8;
        --l5: #fffef3;
        --d1: #ffe81e;
        --d2: #fde400;
        --d3: #ddc700;
        --d4: #beab00;
        --d5: #9e8e00;
        --b: #000000;
        --w: #ffffff;
}

:root {
/* Functional Colors */
--main: var(--d1);
--light: var(--l5);
--dark: var(--d5);
--action: var(--d5);

/* Metallic Gradients */
--metal-1: linear-gradient(
180deg,
var(--l3) 0%,
var(--l5) 50%,
var(--l3) 100%
);
--metal-1-text:var(--b);

--metal-2: linear-gradient(
180deg,
var(--l1) 0%,
var(--l4) 45%,
var(--l4) 50%,
var(--l4) 55%,
var(--l1) 100%
);
--metal-2-text:var(--b);

--metal-3: linear-gradient(
180deg,
var(--d5) 0%,
var(--l1) 50%,
var(--d5) 100%
);
--metal-3-text:var(--w);

--metal-4: linear-gradient(
180deg,
var(--d3) 0%,
var(--main) 25%,
var(--l2) 50%,
var(--main) 75%,
var(--d3) 100%
);
--metal-4-text:var(--w);

--metal-5: linear-gradient(
180deg,
var(--d5) 0%,
var(--l2) 48%,
var(--l2) 50%,
var(--l2) 52%,
var(--d5) 100%
);
--metal-5-text:var(--w);
}

/* --- 2. W3.CSS CLASS OVERRIDES --- */

/* Light Variations */
.ch-l5 {
color: var(--b) !important;
background-color: var(--l5) !important;
}
.ch-l4 {
color: var(--b) !important;
background-color: var(--l4) !important;
}
.ch-l3 {
color: var(--b) !important;
background-color: var(--l3) !important;
}
.ch-l2 {
color: var(--b) !important;
background-color: var(--l2) !important;
}
.ch-l1 {
color: var(--w) !important;
background-color: var(--l1) !important;
}

/* Dark Variations */
.ch-d1 {
color: var(--w) !important;
background-color: var(--d1) !important;
}
.ch-d2 {
color: var(--w) !important;
background-color: var(--d2) !important;
}
.ch-d3 {
color: var(--w) !important;
background-color: var(--d3) !important;
}
.ch-d4 {
color: var(--w) !important;
background-color: var(--d4) !important;
}
.ch-d5 {
color: var(--w) !important;
background-color: var(--d5) !important;
}

/* Functional Classes */
.ch-light {
color: var(--b) !important;
background-color: var(--light) !important;
}

.ch-dark {
color: var(--w) !important;
background-color: var(--dark) !important;
}

.ch-action {
color: var(--w) !important;
background-color: var(--action) !important;
}

/* Main Theme & Text */
.ch-theme {
color: var(--w) !important;
background-color: var(--main) !important;
}

.ch-text-theme {
color: var(--main) !important;
}

.ch-border-theme {
border-color: var(--main) !important;
}

/* Hover States */
.ch-hover-theme:hover {
color: var(--w) !important;
background-color: var(--main) !important;
}

.ch-hover-text-theme:hover {
color: var(--main) !important;
}

.ch-hover-border-theme:hover {
border-color: var(--main) !important;
}

/* --- 3. METALLIC GRADIENT CLASSES --- */
.ch-metal-1 {
background: var(--metal-1) !important;
color: var(--b) !important;
}
.ch-metal-2 {
background: var(--metal-2) !important;
color: var(--b) !important;
}
.ch-metal-3 {
background: var(--metal-3) !important;
color: var(--w) !important;
}
.ch-metal-4 {
background: var(--metal-4) !important;
color: var(--w) !important;
}
.ch-metal-5 {
background: var(--metal-5) !important;
color: var(--w) !important;
}

/* 1. คลาสพื้นฐาน (โครงสร้างและขอบ) */
.ch-gradient {
//color: var(--text) !important;
border: 1px solid rgba(0, 0, 0, 0.15);
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* เพิ่มเงาเบาๆ ให้ดูนูนเหมือนโลหะจริง */
//display: inline-block;
//padding: 8px 16px;
//text-align: center;
transition: 0.3s; /* ทำให้เวลา Hover แล้วสีเปลี่ยนนุ่มนวล */
}

/* 3. เพิ่มลูกเล่นเมื่อเอาเมาส์ไปชี้ (Hover Effect) */
//ch-gradient:hover {
//filter: brightness(1.1); /* สว่างขึ้นเล็กน้อยเหมือนแสงตกกระทบ */
//cursor: pointer;
//}

.ch-theme-gradient1 {
color: var(--metal-1-text) !important;
background:var(--metal-1) !important;
border: 1px solid rgba(0, 0, 0, 0.15);
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* เพิ่มเงาเบาๆ ให้ดูนูนเหมือนโลหะจริง */
transition: 0.3s; /* ทำให้เวลา Hover แล้วสีเปลี่ยนนุ่มนวล */
}

.ch-theme-gradient2 {
color: var(--metal-2-text) !important;
background:var(--metal-2) !important;
border: 1px solid rgba(0, 0, 0, 0.15);
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* เพิ่มเงาเบาๆ ให้ดูนูนเหมือนโลหะจริง */
transition: 0.3s; /* ทำให้เวลา Hover แล้วสีเปลี่ยนนุ่มนวล */
}

.ch-theme-gradient3 {
color: var(--metal-3-text) !important;
background:var(--metal-3) !important;
border: 1px solid rgba(0, 0, 0, 0.15);
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* เพิ่มเงาเบาๆ ให้ดูนูนเหมือนโลหะจริง */
transition: 0.3s; /* ทำให้เวลา Hover แล้วสีเปลี่ยนนุ่มนวล */
}

.ch-theme-gradient4 {
color: var(--metal-4-text) !important;
background:var(--metal-4) !important;
border: 1px solid rgba(0, 0, 0, 0.15);
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* เพิ่มเงาเบาๆ ให้ดูนูนเหมือนโลหะจริง */
transition: 0.3s; /* ทำให้เวลา Hover แล้วสีเปลี่ยนนุ่มนวล */
}

.ch-theme-gradient5 {
color: var(--metal-5-text) !important;
background:var(--metal-3) !important;
border: 1px solid rgba(0, 0, 0, 0.15);
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* เพิ่มเงาเบาๆ ให้ดูนูนเหมือนโลหะจริง */
transition: 0.3s; /* ทำให้เวลา Hover แล้วสีเปลี่ยนนุ่มนวล */
}