/* ==========================================================================
   UTILITIES — class tiện ích dùng chung (kiểu Bootstrap), mỗi class làm 1 việc.
   Dùng kèm class thành phần, ví dụ:
     <div class="weather-detail d-grid gap-4 mt-4">
     <a class="city-card d-flex align-items-center justify-content-between">

   Thang khoảng cách (dùng cho gap-*, m*-*, p*-*):
     0 = 0      1 = 4px    2 = 8px    3 = 12px   4 = 16px   5 = 24px
     6 = 32px   7 = 40px   8 = 48px   9 = 56px

   Breakpoint: md >= 768px, lg >= 1024px
   ========================================================================== */

/* --------------------------------------------------------------------------
   Display
   -------------------------------------------------------------------------- */
.d-none        { display: none !important; }
.d-block       { display: block !important; }
.d-inline-flex { display: inline-flex !important; }
.d-flex        { display: flex !important; }
.d-grid        { display: grid !important; }

/* --------------------------------------------------------------------------
   Flexbox
   -------------------------------------------------------------------------- */
.flex-row      { flex-direction: row !important; }
.flex-column   { flex-direction: column !important; }
.flex-wrap     { flex-wrap: wrap !important; }
.flex-nowrap   { flex-wrap: nowrap !important; }
.flex-1        { flex: 1 1 0% !important; min-width: 0; }
.flex-none     { flex: none !important; }
.flex-grow-1 { flex-grow: 1 !important; min-width: 0; }

.align-items-start   { align-items: flex-start !important; }
.align-items-center  { align-items: center !important; }
.align-items-end     { align-items: flex-end !important; }

.justify-content-start   { justify-content: flex-start !important; }
.justify-content-center  { justify-content: center !important; }
.justify-content-end     { justify-content: flex-end !important; }
.justify-content-between { justify-content: space-between !important; }

/* --------------------------------------------------------------------------
   Gap
   -------------------------------------------------------------------------- */
.gap-0 { gap: 0 !important; }
.gap-1 { gap: 4px !important; }
.gap-2 { gap: 8px !important; }
.gap-3 { gap: 12px !important; }
.gap-4 { gap: 16px !important; }
.gap-5 { gap: 24px !important; }
.gap-6 { gap: 32px !important; }

/* --------------------------------------------------------------------------
   Margin
   -------------------------------------------------------------------------- */
.m-0  { margin: 0 !important; }
.mx-auto { margin-left: auto !important; margin-right: auto !important; }

.mt-0 { margin-top: 0 !important; }
.mt-1 { margin-top: 4px !important; }
.mt-2 { margin-top: 8px !important; }
.mt-3 { margin-top: 12px !important; }
.mt-4 { margin-top: 16px !important; }
.mt-5 { margin-top: 24px !important; }

.mb-0 { margin-bottom: 0 !important; }
.mb-1 { margin-bottom: 4px !important; }
.mb-2 { margin-bottom: 8px !important; }
.mb-3 { margin-bottom: 12px !important; }
.mb-4 { margin-bottom: 16px !important; }
.mb-5 { margin-bottom: 24px !important; }
.mb-6 { margin-bottom: 32px !important; }
.mb-7 { margin-bottom: 40px !important; }
.mb-8 { margin-bottom: 48px !important; }
.mb-9 { margin-bottom: 56px !important; }

/* --------------------------------------------------------------------------
   Padding
   -------------------------------------------------------------------------- */
.p-0  { padding: 0 !important; }
.py-3 { padding-top: 12px !important; padding-bottom: 12px !important; }
.pt-5 { padding-top: 24px !important; }
.pt-7 { padding-top: 40px !important; }
.pb-9 { padding-bottom: 56px !important; }

/* --------------------------------------------------------------------------
   Text
   -------------------------------------------------------------------------- */
.text-start  { text-align: left !important; }
.text-center { text-align: center !important; }
.text-end    { text-align: right !important; }
.text-muted  { color: var(--color-subtext) !important; }
.text-nowrap { white-space: nowrap !important; }
.fw-500 { font-weight: 500 !important; }
.fw-600 { font-weight: 600 !important; }
.fw-700 { font-weight: 700 !important; }

/* --------------------------------------------------------------------------
   Grid 12 cột (row / col-*)
   -------------------------------------------------------------------------- */
.row {
  --gutter-x: 32px;
  --gutter-y: 24px;
  display: flex;
  flex-wrap: wrap;
  row-gap: var(--gutter-y);
  margin-left: calc(var(--gutter-x) / -2);
  margin-right: calc(var(--gutter-x) / -2);
}

.row > * {
  flex-shrink: 0;
  width: 100%;
  max-width: 100%;
  padding-left: calc(var(--gutter-x) / 2);
  padding-right: calc(var(--gutter-x) / 2);
}

.col    { flex: 1 0 0%; }
.col-12 { flex: 0 0 auto; width: 100%; }
.col-6  { flex: 0 0 auto; width: 50%; }

@media (min-width: 768px) {
  .col-md-4  { flex: 0 0 auto; width: 33.3333%; }
  .col-md-6  { flex: 0 0 auto; width: 50%; }
  .col-md-8  { flex: 0 0 auto; width: 66.6667%; }
  .col-md-12 { flex: 0 0 auto; width: 100%; }
  .d-md-none  { display: none !important; }
  .d-md-block { display: block !important; }
  .d-md-flex  { display: flex !important; }
}

@media (min-width: 1024px) {
  .col-lg-4 { flex: 0 0 auto; width: 33.3333%; }
  .col-lg-6 { flex: 0 0 auto; width: 50%; }
  .col-lg-8 { flex: 0 0 auto; width: 66.6667%; }
}