.container {
  width: 100%; margin:0 auto; padding:0 2rem;
}

@media (min-width: 640px) {
  .container {
    max-width: 640px;
  }
 
}

@media (min-width: 768px) {
  .container {
    max-width: 900px;
  }
}

@media (min-width: 1024px) {
  .container {
    max-width: 1024px;
  }
}

@media (min-width: 1280px) {
  .container {
    max-width: 1280px;
  }
    .container.size-02{
    max-width: 1100px;
  }
}

@media (min-width: 1536px) {
  .container {
    max-width: 1536px;
  }

}



/* ====== Base Grid System ====== */
.grid {
  display: grid;
}

.gap-0 { gap: 0; }
.gap-1 { gap: 0.25rem; }
.gap-2 { gap: 0.5rem; }
.gap-4 { gap: 1rem; }
.gap-8 { gap: 2rem; }

/* ==== Grid Columns ==== */
.grid-cols-1  { grid-template-columns: repeat(1, 1fr); }
.grid-cols-2  { grid-template-columns: repeat(2, 1fr); }
.grid-cols-3  { grid-template-columns: repeat(3, 1fr); }
.grid-cols-4  { grid-template-columns: repeat(4, 1fr); }
.grid-cols-5  { grid-template-columns: repeat(5, 1fr); }
.grid-cols-6  { grid-template-columns: repeat(6, 1fr); }
.grid-cols-7  { grid-template-columns: repeat(7, 1fr); }
.grid-cols-8  { grid-template-columns: repeat(8, 1fr); }
.grid-cols-9  { grid-template-columns: repeat(9, 1fr); }
.grid-cols-10 { grid-template-columns: repeat(10, 1fr); }
.grid-cols-11 { grid-template-columns: repeat(11, 1fr); }
.grid-cols-12 { grid-template-columns: repeat(12, 1fr); }

/* ==== Column Span ==== */
[class*="col-span-"] {
  min-width: 0;
}

.col-span-1  { grid-column: span 1 / span 1; }
.col-span-2  { grid-column: span 2 / span 2; }
.col-span-3  { grid-column: span 3 / span 3; }
.col-span-4  { grid-column: span 4 / span 4; }
.col-span-5  { grid-column: span 5 / span 5; }
.col-span-6  { grid-column: span 6 / span 6; }
.col-span-7  { grid-column: span 7 / span 7; }
.col-span-8  { grid-column: span 8 / span 8; }
.col-span-9  { grid-column: span 9 / span 9; }
.col-span-10 { grid-column: span 10 / span 10; }
.col-span-11 { grid-column: span 11 / span 11; }
.col-span-12 { grid-column: span 12 / span 12; }

/* ====== Responsive Breakpoints ====== */
/* sm = ≥640px */
@media (min-width: 640px) {
  .sm\:grid-cols-1  { grid-template-columns: repeat(1, 1fr); }
  .sm\:grid-cols-2  { grid-template-columns: repeat(2, 1fr); }
  .sm\:grid-cols-3  { grid-template-columns: repeat(3, 1fr); }
  .sm\:grid-cols-4  { grid-template-columns: repeat(4, 1fr); }
  .sm\:grid-cols-6  { grid-template-columns: repeat(6, 1fr); }
  .sm\:grid-cols-12 { grid-template-columns: repeat(12, 1fr); }

  .sm\:col-span-1  { grid-column: span 1 / span 1; }
  .sm\:col-span-2  { grid-column: span 2 / span 2; }
  .sm\:col-span-3  { grid-column: span 3 / span 3; }
  .sm\:col-span-4  { grid-column: span 4 / span 4; }
  .sm\:col-span-5  { grid-column: span 5 / span 5; }
  .sm\:col-span-6  { grid-column: span 6 / span 6; }
  .sm\:col-span-7  { grid-column: span 7 / span 7; }
  .sm\:col-span-8  { grid-column: span 8 / span 8; }
  .sm\:col-span-9  { grid-column: span 9 / span 9; }
  .sm\:col-span-12 { grid-column: span 12 / span 12; }
}

/* md = ≥768px */
@media (min-width: 768px) {
  .md\:grid-cols-1  { grid-template-columns: repeat(1, 1fr); }
  .md\:grid-cols-2  { grid-template-columns: repeat(2, 1fr); }
  .md\:grid-cols-3  { grid-template-columns: repeat(3, 1fr); }
  .md\:grid-cols-4  { grid-template-columns: repeat(4, 1fr); }
  .md\:grid-cols-6  { grid-template-columns: repeat(6, 1fr); }
  .md\:grid-cols-12 { grid-template-columns: repeat(12, 1fr); }

  .md\:col-span-1  { grid-column: span 1 / span 1; }
  .md\:col-span-2  { grid-column: span 2 / span 2; }
  .md\:col-span-3  { grid-column: span 3 / span 3; }
  .md\:col-span-4  { grid-column: span 4 / span 4; }
  .md\:col-span-5  { grid-column: span 5 / span 5; }
  .md\:col-span-6  { grid-column: span 6 / span 6; }
  .md\:col-span-7  { grid-column: span 7 / span 7; }
  .md\:col-span-8  { grid-column: span 8 / span 8; }
  .md\:col-span-9  { grid-column: span 9 / span 9; }
  .md\:col-span-12 { grid-column: span 12 / span 12; }
}

/* lg = ≥1024px */
@media (min-width: 1024px) {
  .lg\:grid-cols-1  { grid-template-columns: repeat(1, 1fr); }
  .lg\:grid-cols-2  { grid-template-columns: repeat(2, 1fr); }
  .lg\:grid-cols-3  { grid-template-columns: repeat(3, 1fr); }
  .lg\:grid-cols-4  { grid-template-columns: repeat(4, 1fr); }
  .lg\:grid-cols-6  { grid-template-columns: repeat(6, 1fr); }
  .lg\:grid-cols-12 { grid-template-columns: repeat(12, 1fr); }

  .lg\:col-span-1  { grid-column: span 1 / span 1; }
  .lg\:col-span-2  { grid-column: span 2 / span 2; }
  .lg\:col-span-3  { grid-column: span 3 / span 3; }
  .lg\:col-span-4  { grid-column: span 4 / span 4; }
  .lg\:col-span-6  { grid-column: span 6 / span 6; }
  .lg\:col-span-7  { grid-column: span 7 / span 7; }
  .lg\:col-span-8  { grid-column: span 8 / span 8; }
  .lg\:col-span-9  { grid-column: span 9 / span 9; }
  .lg\:col-span-12 { grid-column: span 12 / span 12; }
}

/* xl = ≥1280px */
@media (min-width: 1280px) {
  .xl\:grid-cols-12 { grid-template-columns: repeat(12, 1fr); }
  .xl\:col-span-6  { grid-column: span 6 / span 6; }
  .xl\:col-span-12 { grid-column: span 12 / span 12; }
}

/* ====== DISPLAY ====== */
.flex { display: flex; }
.inline-flex { display: inline-flex; }

/* ====== DIRECTION ====== */
.flex-row { flex-direction: row; }
.flex-row-reverse { flex-direction: row-reverse; }
.flex-col { flex-direction: column; }
.flex-col-reverse { flex-direction: column-reverse; }

/* ====== WRAP ====== */
.flex-wrap { flex-wrap: wrap; }
.flex-nowrap { flex-wrap: nowrap; }
.flex-wrap-reverse { flex-wrap: wrap-reverse; }

/* ====== JUSTIFY CONTENT ====== */
.justify-start   { justify-content: flex-start; }
.justify-center  { justify-content: center; }
.justify-end     { justify-content: flex-end; }
.justify-between { justify-content: space-between; }
.justify-around  { justify-content: space-around; }
.justify-evenly  { justify-content: space-evenly; }

/* ====== ALIGN ITEMS ====== */
.items-start   { align-items: flex-start; }
.items-center  { align-items: center; }
.items-end     { align-items: flex-end; }
.items-baseline{ align-items: baseline; }
.items-stretch { align-items: stretch; }

/* ====== ALIGN SELF ====== */
.self-auto    { align-self: auto; }
.self-start   { align-self: flex-start; }
.self-center  { align-self: center; }
.self-end     { align-self: flex-end; }
.self-stretch { align-self: stretch; }

/* ====== ALIGN CONTENT ====== */
.content-start   { align-content: flex-start; }
.content-center  { align-content: center; }
.content-end     { align-content: flex-end; }
.content-between { align-content: space-between; }
.content-around  { align-content: space-around; }
.content-evenly  { align-content: space-evenly; }

/* ====== FLEX GROW / SHRINK ====== */
.flex-1 { flex: 1 1 0%; }
.flex-auto { flex: 1 1 auto; }
.flex-initial { flex: 0 1 auto; }
.flex-none { flex: none; }

/* ====== GAP (ช่องว่างระหว่าง item) ====== */
.gap-0 { gap: 0; }
.gap-1 { gap: 0.25rem; }
.gap-2 { gap: 0.5rem; }
.gap-4 { gap: 1rem; }
.gap-8 { gap: 2rem; }

/* ====== Responsive Breakpoints ====== */
/* sm ≥640px */
@media (min-width: 640px) {
  .sm\:flex { display: flex; }
  .sm\:flex-col { flex-direction: column; }
  .sm\:justify-center { justify-content: center; }
  .sm\:items-center { align-items: center; }
}

/* md ≥768px */
@media (min-width: 768px) {
  .md\:flex { display: flex; }
  .md\:flex-row { flex-direction: row; }
  .md\:justify-between { justify-content: space-between; }
  .md\:items-center { align-items: center; }
}

/* lg ≥1024px */
@media (min-width: 1024px) {
  .lg\:flex { display: flex; }
  .lg\:flex-row { flex-direction: row; }
  .lg\:justify-around { justify-content: space-around; }
  .lg\:items-center { align-items: center; }
}

/* xl ≥1280px */
@media (min-width: 1280px) {
  .xl\:flex { display: flex; }
  .xl\:justify-between { justify-content: space-between; }
  .xl\:items-center { align-items: center; }
}