/* ===== Utilities (Padding & Margin like Tailwind) ===== */

/* Root spacing scale */
:root {
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
}

/* Padding */
.p-0  { padding: var(--space-0); }
.p-1  { padding: var(--space-1); }
.p-2  { padding: var(--space-2); }
.p-3  { padding: var(--space-3); }
.p-4  { padding: var(--space-4); }
.p-5  { padding: var(--space-5); }
.p-6  { padding: var(--space-6); }
.p-8  { padding: var(--space-8); }
.p-10 { padding: var(--space-10); }
.p-12 { padding: var(--space-12); }
.p-16 { padding: var(--space-16); }

/* Padding X and Y */
.px-0 { padding-left: var(--space-0); padding-right: var(--space-0); }
.px-1 { padding-left: var(--space-1); padding-right: var(--space-1); }
.px-2 { padding-left: var(--space-2); padding-right: var(--space-2); }
.px-3 { padding-left: var(--space-3); padding-right: var(--space-3); }
.px-4 { padding-left: var(--space-4); padding-right: var(--space-4); }
.px-5 { padding-left: var(--space-5); padding-right: var(--space-5); }
.px-6 { padding-left: var(--space-6); padding-right: var(--space-6); }
.px-8 { padding-left: var(--space-8); padding-right: var(--space-8); }
.px-10{ padding-left: var(--space-10); padding-right: var(--space-10); }
.px-12{ padding-left: var(--space-12); padding-right: var(--space-12); }
.px-16{ padding-left: var(--space-16); padding-right: var(--space-16); }

.py-0 { padding-top: var(--space-0); padding-bottom: var(--space-0); }
.py-1 { padding-top: var(--space-1); padding-bottom: var(--space-1); }
.py-2 { padding-top: var(--space-2); padding-bottom: var(--space-2); }
.py-3 { padding-top: var(--space-3); padding-bottom: var(--space-3); }
.py-4 { padding-top: var(--space-4); padding-bottom: var(--space-4); }
.py-5 { padding-top: var(--space-5); padding-bottom: var(--space-5); }
.py-6 { padding-top: var(--space-6); padding-bottom: var(--space-6); }
.py-8 { padding-top: var(--space-8); padding-bottom: var(--space-8); }
.py-10{ padding-top: var(--space-10); padding-bottom: var(--space-10); }
.py-12{ padding-top: var(--space-12); padding-bottom: var(--space-12); }
.py-16{ padding-top: var(--space-16); padding-bottom: var(--space-16); }

/* Padding individual */
.pt-0 { padding-top: var(--space-0); }
.pt-1 { padding-top: var(--space-1); }
.pt-2 { padding-top: var(--space-2); }
.pt-3 { padding-top: var(--space-3); }
.pt-4 { padding-top: var(--space-4); }
.pt-5 { padding-top: var(--space-5); }
.pt-6 { padding-top: var(--space-6); }
.pt-8 { padding-top: var(--space-8); }
.pt-10{ padding-top: var(--space-10); }
.pt-12{ padding-top: var(--space-12); }
.pt-16{ padding-top: var(--space-16); }

.pr-0 { padding-right: var(--space-0); }
.pr-1 { padding-right: var(--space-1); }
.pr-2 { padding-right: var(--space-2); }
.pr-3 { padding-right: var(--space-3); }
.pr-4 { padding-right: var(--space-4); }
.pr-5 { padding-right: var(--space-5); }
.pr-6 { padding-right: var(--space-6); }
.pr-8 { padding-right: var(--space-8); }
.pr-10{ padding-right: var(--space-10); }
.pr-12{ padding-right: var(--space-12); }
.pr-16{ padding-right: var(--space-16); }

.pb-0 { padding-bottom: var(--space-0); }
.pb-1 { padding-bottom: var(--space-1); }
.pb-2 { padding-bottom: var(--space-2); }
.pb-3 { padding-bottom: var(--space-3); }
.pb-4 { padding-bottom: var(--space-4); }
.pb-5 { padding-bottom: var(--space-5); }
.pb-6 { padding-bottom: var(--space-6); }
.pb-8 { padding-bottom: var(--space-8); }
.pb-10{ padding-bottom: var(--space-10); }
.pb-12{ padding-bottom: var(--space-12); }
.pb-16{ padding-bottom: var(--space-16); }

.pl-0 { padding-left: var(--space-0); }
.pl-1 { padding-left: var(--space-1); }
.pl-2 { padding-left: var(--space-2); }
.pl-3 { padding-left: var(--space-3); }
.pl-4 { padding-left: var(--space-4); }
.pl-5 { padding-left: var(--space-5); }
.pl-6 { padding-left: var(--space-6); }
.pl-8 { padding-left: var(--space-8); }
.pl-10{ padding-left: var(--space-10); }
.pl-12{ padding-left: var(--space-12); }
.pl-16{ padding-left: var(--space-16); }

/* Margin */
.m-0  { margin: var(--space-0); }
.m-1  { margin: var(--space-1); }
.m-2  { margin: var(--space-2); }
.m-3  { margin: var(--space-3); }
.m-4  { margin: var(--space-4); }
.m-5  { margin: var(--space-5); }
.m-6  { margin: var(--space-6); }
.m-8  { margin: var(--space-8); }
.m-10 { margin: var(--space-10); }
.m-12 { margin: var(--space-12); }
.m-16 { margin: var(--space-16); }

/* Margin X and Y */
.mx-0 { margin-left: var(--space-0); margin-right: var(--space-0); }
.mx-1 { margin-left: var(--space-1); margin-right: var(--space-1); }
.mx-2 { margin-left: var(--space-2); margin-right: var(--space-2); }
.mx-3 { margin-left: var(--space-3); margin-right: var(--space-3); }
.mx-4 { margin-left: var(--space-4); margin-right: var(--space-4); }
.mx-5 { margin-left: var(--space-5); margin-right: var(--space-5); }
.mx-6 { margin-left: var(--space-6); margin-right: var(--space-6); }
.mx-8 { margin-left: var(--space-8); margin-right: var(--space-8); }
.mx-10{ margin-left: var(--space-10); margin-right: var(--space-10); }
.mx-12{ margin-left: var(--space-12); margin-right: var(--space-12); }
.mx-16{ margin-left: var(--space-16); margin-right: var(--space-16); }

.my-0 { margin-top: var(--space-0); margin-bottom: var(--space-0); }
.my-1 { margin-top: var(--space-1); margin-bottom: var(--space-1); }
.my-2 { margin-top: var(--space-2); margin-bottom: var(--space-2); }
.my-3 { margin-top: var(--space-3); margin-bottom: var(--space-3); }
.my-4 { margin-top: var(--space-4); margin-bottom: var(--space-4); }
.my-5 { margin-top: var(--space-5); margin-bottom: var(--space-5); }
.my-6 { margin-top: var(--space-6); margin-bottom: var(--space-6); }
.my-8 { margin-top: var(--space-8); margin-bottom: var(--space-8); }
.my-10{ margin-top: var(--space-10); margin-bottom: var(--space-10); }
.my-12{ margin-top: var(--space-12); margin-bottom: var(--space-12); }
.my-16{ margin-top: var(--space-16); margin-bottom: var(--space-16); }

/* Margin individual */
.mt-0 { margin-top: var(--space-0); }
.mt-1 { margin-top: var(--space-1); }
.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }
.mt-5 { margin-top: var(--space-5); }
.mt-6 { margin-top: var(--space-6); }
.mt-8 { margin-top: var(--space-8); }
.mt-10{ margin-top: var(--space-10); }
.mt-12{ margin-top: var(--space-12); }
.mt-16{ margin-top: var(--space-16); }

.mr-0 { margin-right: var(--space-0); }
.mr-1 { margin-right: var(--space-1); }
.mr-2 { margin-right: var(--space-2); }
.mr-3 { margin-right: var(--space-3); }
.mr-4 { margin-right: var(--space-4); }
.mr-5 { margin-right: var(--space-5); }
.mr-6 { margin-right: var(--space-6); }
.mr-8 { margin-right: var(--space-8); }
.mr-10{ margin-right: var(--space-10); }
.mr-12{ margin-right: var(--space-12); }
.mr-16{ margin-right: var(--space-16); }

.mb-0 { margin-bottom: var(--space-0); }
.mb-1 { margin-bottom: var(--space-1); }
.mb-2 { margin-bottom: var(--space-2); }
.mb-3 { margin-bottom: var(--space-3); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-5 { margin-bottom: var(--space-5); }
.mb-6 { margin-bottom: var(--space-6); }
.mb-8 { margin-bottom: var(--space-8); }
.mb-10{ margin-bottom: var(--space-10); }
.mb-12{ margin-bottom: var(--space-12); }
.mb-16{ margin-bottom: var(--space-16); }

.ml-0 { margin-left: var(--space-0); }
.ml-1 { margin-left: var(--space-1); }
.ml-2 { margin-left: var(--space-2); }
.ml-3 { margin-left: var(--space-3); }
.ml-4 { margin-left: var(--space-4); }
.ml-5 { margin-left: var(--space-5); }
.ml-6 { margin-left: var(--space-6); }
.ml-8 { margin-left: var(--space-8); }
.ml-10{ margin-left: var(--space-10); }
.ml-12{ margin-left: var(--space-12); }
.ml-16{ margin-left: var(--space-16); }

/* ให้ยูทิลิตี้ p-* เซ็ต --pad เมื่อใช้กับ li ใน mp-sol__list */
.mp-sol__list li.p-0  { --pad: var(--space-0); }
.mp-sol__list li.p-1  { --pad: var(--space-1); }
.mp-sol__list li.p-2  { --pad: var(--space-2); }
.mp-sol__list li.p-3  { --pad: var(--space-3); }
.mp-sol__list li.p-4  { --pad: var(--space-4); }
.mp-sol__list li.p-5  { --pad: var(--space-5); }
.mp-sol__list li.p-6  { --pad: var(--space-6); }
.mp-sol__list li.p-8  { --pad: var(--space-8); }
.mp-sol__list li.p-10 { --pad: var(--space-10); }
.mp-sol__list li.p-12 { --pad: var(--space-12); }
.mp-sol__list li.p-16 { --pad: var(--space-16); }

/* ให้ยูทิลิตี้ px/py และ pl/pr/pt/pb เซ็ตตัวแปรรายด้านเมื่อใช้กับ li ใน mp-sol__list */
.mp-sol__list li.px-0  { --pad-left: var(--space-0);  --pad-right: var(--space-0); }
.mp-sol__list li.px-1  { --pad-left: var(--space-1);  --pad-right: var(--space-1); }
.mp-sol__list li.px-2  { --pad-left: var(--space-2);  --pad-right: var(--space-2); }
.mp-sol__list li.px-3  { --pad-left: var(--space-3);  --pad-right: var(--space-3); }
.mp-sol__list li.px-4  { --pad-left: var(--space-4);  --pad-right: var(--space-4); }
.mp-sol__list li.px-5  { --pad-left: var(--space-5);  --pad-right: var(--space-5); }
.mp-sol__list li.px-6  { --pad-left: var(--space-6);  --pad-right: var(--space-6); }
.mp-sol__list li.px-8  { --pad-left: var(--space-8);  --pad-right: var(--space-8); }
.mp-sol__list li.px-10 { --pad-left: var(--space-10); --pad-right: var(--space-10); }
.mp-sol__list li.px-12 { --pad-left: var(--space-12); --pad-right: var(--space-12); }
.mp-sol__list li.px-16 { --pad-left: var(--space-16); --pad-right: var(--space-16); }

.mp-sol__list li.py-0  { --pad-top: var(--space-0);  --pad-bottom: var(--space-0); }
.mp-sol__list li.py-1  { --pad-top: var(--space-1);  --pad-bottom: var(--space-1); }
.mp-sol__list li.py-2  { --pad-top: var(--space-2);  --pad-bottom: var(--space-2); }
.mp-sol__list li.py-3  { --pad-top: var(--space-3);  --pad-bottom: var(--space-3); }
.mp-sol__list li.py-4  { --pad-top: var(--space-4);  --pad-bottom: var(--space-4); }
.mp-sol__list li.py-5  { --pad-top: var(--space-5);  --pad-bottom: var(--space-5); }
.mp-sol__list li.py-6  { --pad-top: var(--space-6);  --pad-bottom: var(--space-6); }
.mp-sol__list li.py-8  { --pad-top: var(--space-8);  --pad-bottom: var(--space-8); }
.mp-sol__list li.py-10 { --pad-top: var(--space-10); --pad-bottom: var(--space-10); }
.mp-sol__list li.py-12 { --pad-top: var(--space-12); --pad-bottom: var(--space-12); }
.mp-sol__list li.py-16 { --pad-top: var(--space-16); --pad-bottom: var(--space-16); }

.mp-sol__list li.pl-0  { --pad-left: var(--space-0);  }
.mp-sol__list li.pl-1  { --pad-left: var(--space-1);  }
.mp-sol__list li.pl-2  { --pad-left: var(--space-2);  }
.mp-sol__list li.pl-3  { --pad-left: var(--space-3);  }
.mp-sol__list li.pl-4  { --pad-left: var(--space-4);  }
.mp-sol__list li.pl-5  { --pad-left: var(--space-5);  }
.mp-sol__list li.pl-6  { --pad-left: var(--space-6);  }
.mp-sol__list li.pl-8  { --pad-left: var(--space-8);  }
.mp-sol__list li.pl-10 { --pad-left: var(--space-10); }
.mp-sol__list li.pl-12 { --pad-left: var(--space-12); }
.mp-sol__list li.pl-16 { --pad-left: var(--space-16); }

.mp-sol__list li.pr-0  { --pad-right: var(--space-0);  }
.mp-sol__list li.pr-1  { --pad-right: var(--space-1);  }
.mp-sol__list li.pr-2  { --pad-right: var(--space-2);  }
.mp-sol__list li.pr-3  { --pad-right: var(--space-3);  }
.mp-sol__list li.pr-4  { --pad-right: var(--space-4);  }
.mp-sol__list li.pr-5  { --pad-right: var(--space-5);  }
.mp-sol__list li.pr-6  { --pad-right: var(--space-6);  }
.mp-sol__list li.pr-8  { --pad-right: var(--space-8);  }
.mp-sol__list li.pr-10 { --pad-right: var(--space-10); }
.mp-sol__list li.pr-12 { --pad-right: var(--space-12); }
.mp-sol__list li.pr-16 { --pad-right: var(--space-16); }

.mp-sol__list li.pt-0  { --pad-top: var(--space-0);  }
.mp-sol__list li.pt-1  { --pad-top: var(--space-1);  }
.mp-sol__list li.pt-2  { --pad-top: var(--space-2);  }
.mp-sol__list li.pt-3  { --pad-top: var(--space-3);  }
.mp-sol__list li.pt-4  { --pad-top: var(--space-4);  }
.mp-sol__list li.pt-5  { --pad-top: var(--space-5);  }
.mp-sol__list li.pt-6  { --pad-top: var(--space-6);  }
.mp-sol__list li.pt-8  { --pad-top: var(--space-8);  }
.mp-sol__list li.pt-10 { --pad-top: var(--space-10); }
.mp-sol__list li.pt-12 { --pad-top: var(--space-12); }
.mp-sol__list li.pt-16 { --pad-top: var(--space-16); }

.mp-sol__list li.pb-0  { --pad-bottom: var(--space-0);  }
.mp-sol__list li.pb-1  { --pad-bottom: var(--space-1);  }
.mp-sol__list li.pb-2  { --pad-bottom: var(--space-2);  }
.mp-sol__list li.pb-3  { --pad-bottom: var(--space-3);  }
.mp-sol__list li.pb-4  { --pad-bottom: var(--space-4);  }
.mp-sol__list li.pb-5  { --pad-bottom: var(--space-5);  }
.mp-sol__list li.pb-6  { --pad-bottom: var(--space-6);  }
.mp-sol__list li.pb-8  { --pad-bottom: var(--space-8);  }
.mp-sol__list li.pb-10 { --pad-bottom: var(--space-10); }
.mp-sol__list li.pb-12 { --pad-bottom: var(--space-12); }
.mp-sol__list li.pb-16 { --pad-bottom: var(--space-16); }