.w-100{
    width: 100%;
}
/* 🔤 Text Transform */
.text-uppercase     { text-transform: uppercase; }
.text-lowercase     { text-transform: lowercase; }
.text-capitalize    { text-transform: capitalize; }

/* 📐 Text Alignment */
.text-left          { text-align: left; }     /* Bootstrap 4 */
.text-right         { text-align: right; }
.text-center        { text-align: center; }
.text-start         { text-align: left; }     /* Bootstrap 5 */
.text-end           { text-align: right; }

/* 🔠 Font Weight */
.fw-bold            { font-weight: 700; }
.fw-semibold        { font-weight: 600; }
.fw-normal          { font-weight: 400; }
.fw-light           { font-weight: 300; }
.fw-lighter         { font-weight: lighter; }
.fw-bolder          { font-weight: bolder; }

/* 🅰️ Font Style */
.fst-italic         { font-style: italic; }
.fst-normal         { font-style: normal; }

/* 🌀 Text Wrapping */
.text-wrap          { white-space: normal; }
.text-nowrap        { white-space: nowrap; }

/* ✂️ Truncate text (dùng trong div có chiều rộng cố định) */
.text-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
  max-width: 100%; /* cần set max-width hoặc width cụ thể ở phần tử cha */
}

/* 🎨 Text Color (tuỳ biến theo theme hoặc tự định nghĩa màu) */
.text-primary       { color: #0d6efd; }
.text-secondary     { color: #6c757d; }
.text-success       { color: #198754; }
.text-danger        { color: #dc3545; }
.text-warning       { color: #ffc107; }
.text-info          { color: #0dcaf0; }
.text-light         { color: #f8f9fa; }
.text-dark          { color: #212529; }
.text-muted         { color: #6c757d; }
.text-white         { color: #fff; }

/*  */

.overflow-hidden {
    overflow: hidden;
}
.position-relative{
    position: relative;
}
/* Display */
.d-block {
    display: block;
}

.d-inline {
    display: inline;
}

.d-inline-block {
    display: inline-block;
}

.d-flex {
    display: flex;
}

.d-inline-flex {
    display: inline-flex;
}

.d-none {
    display: none;
}
/* Base (xs < 576px) */

/* SM ≥ 576px */
@media (min-width: 576px) {
  .d-sm-none         { display: none !important; }
  .d-sm-inline       { display: inline !important; }
  .d-sm-inline-block { display: inline-block !important; }
  .d-sm-block        { display: block !important; }
  .d-sm-flex         { display: flex !important; }
  .d-sm-inline-flex  { display: inline-flex !important; }
  .d-sm-grid         { display: grid !important; }
  .d-sm-inline-grid  { display: inline-grid !important; }
}

/* MD ≥ 768px */
@media (min-width: 768px) {
  .d-md-none         { display: none !important; }
  .d-md-inline       { display: inline !important; }
  .d-md-inline-block { display: inline-block !important; }
  .d-md-block        { display: block !important; }
  .d-md-flex         { display: flex !important; }
  .d-md-inline-flex  { display: inline-flex !important; }
  .d-md-grid         { display: grid !important; }
  .d-md-inline-grid  { display: inline-grid !important; }
}

/* LG ≥ 992px */
@media (min-width: 992px) {
  .d-lg-none         { display: none !important; }
  .d-lg-inline       { display: inline !important; }
  .d-lg-inline-block { display: inline-block !important; }
  .d-lg-block        { display: block !important; }
  .d-lg-flex         { display: flex !important; }
  .d-lg-inline-flex  { display: inline-flex !important; }
  .d-lg-grid         { display: grid !important; }
  .d-lg-inline-grid  { display: inline-grid !important; }
}

/* XL ≥ 1200px */
@media (min-width: 1200px) {
  .d-xl-none         { display: none !important; }
  .d-xl-inline       { display: inline !important; }
  .d-xl-inline-block { display: inline-block !important; }
  .d-xl-block        { display: block !important; }
  .d-xl-flex         { display: flex !important; }
  .d-xl-inline-flex  { display: inline-flex !important; }
  .d-xl-grid         { display: grid !important; }
  .d-xl-inline-grid  { display: inline-grid !important; }
}

/* XXL ≥ 1400px */
@media (min-width: 1400px) {
  .d-xxl-none         { display: none !important; }
  .d-xxl-inline       { display: inline !important; }
  .d-xxl-inline-block { display: inline-block !important; }
  .d-xxl-block        { display: block !important; }
  .d-xxl-flex         { display: flex !important; }
  .d-xxl-inline-flex  { display: inline-flex !important; }
  .d-xxl-grid         { display: grid !important; }
  .d-xxl-inline-grid  { display: inline-grid !important; }
}

/* Flex Direction */
.flex-row {
    flex-direction: row;
}

.flex-column {
    flex-direction: column;
}

.flex-row-reverse {
    flex-direction: row-reverse;
}

.flex-column-reverse {
    flex-direction: column-reverse;
}

/* Flex Wrap */
.flex-wrap {
    flex-wrap: wrap;
}

.flex-nowrap {
    flex-wrap: nowrap;
}

.flex-wrap-reverse {
    flex-wrap: wrap-reverse;
}

/* Justify Content */
.justify-content-start {
    justify-content: flex-start;
}

.justify-content-end {
    justify-content: flex-end;
}

.justify-content-center {
    justify-content: center;
}

.justify-content-between {
    justify-content: space-between;
}

.justify-content-around {
    justify-content: space-around;
}

.justify-content-evenly {
    justify-content: space-evenly;
}

/* Align Items */
.align-items-start {
    align-items: flex-start;
}

.align-items-end {
    align-items: flex-end;
}

.align-items-center {
    align-items: center;
}

.align-items-baseline {
    align-items: baseline;
}

.align-items-stretch {
    align-items: stretch;
}

/* Align Content */
.align-content-start {
    align-content: flex-start;
}

.align-content-end {
    align-content: flex-end;
}

.align-content-center {
    align-content: center;
}

.align-content-between {
    align-content: space-between;
}

.align-content-around {
    align-content: space-around;
}

.align-content-stretch {
    align-content: stretch;
}

/* Align Self */
.align-self-auto {
    align-self: auto;
}

.align-self-start {
    align-self: flex-start;
}

.align-self-end {
    align-self: flex-end;
}

.align-self-center {
    align-self: center;
}

.align-self-baseline {
    align-self: baseline;
}

.align-self-stretch {
    align-self: stretch;
}

/* Order */
.order-0 {
    order: 0;
}

.order-1 {
    order: 1;
}

.order-2 {
    order: 2;
}

.order-3 {
    order: 3;
}

.order-4 {
    order: 4;
}

.order-5 {
    order: 5;
}

/* Medium (≥768px) */
@media (min-width: 768px) {
  .order-md-0 { order: 0; }
  .order-md-1 { order: 1; }
  .order-md-2 { order: 2; }
  .order-md-3 { order: 3; }
  .order-md-4 { order: 4; }
  .order-md-5 { order: 5; }
}

/* Large (≥992px) */
@media (min-width: 992px) {
  .order-lg-0 { order: 0; }
  .order-lg-1 { order: 1; }
  .order-lg-2 { order: 2; }
  .order-lg-3 { order: 3; }
  .order-lg-4 { order: 4; }
  .order-lg-5 { order: 5; }
}

/* Extra Large (≥1200px) */
@media (min-width: 1200px) {
  .order-xl-0 { order: 0; }
  .order-xl-1 { order: 1; }
  .order-xl-2 { order: 2; }
  .order-xl-3 { order: 3; }
  .order-xl-4 { order: 4; }
  .order-xl-5 { order: 5; }
}

/* Grow / Shrink */
.flex-grow-0 {
    flex-grow: 0;
}

.flex-grow-1 {
    flex-grow: 1;
}

.flex-shrink-0 {
    flex-shrink: 0;
}

.flex-shrink-1 {
    flex-shrink: 1;
}


/* Margin utilities */
.m-0 {
    margin: 0 !important;
}

.m-1 {
    margin: 0.25rem !important;
}

.m-2 {
    margin: 0.5rem !important;
}

.m-3 {
    margin: 1rem !important;
}

.m-4 {
    margin: 1.5rem !important;
}

.m-5 {
    margin: 3rem !important;
}

.mt-0 {
    margin-top: 0 !important;
}

.mt-1 {
    margin-top: 0.25rem !important;
}

.mt-2 {
    margin-top: 0.5rem !important;
}

.mt-3 {
    margin-top: 1rem !important;
}

.mt-4 {
    margin-top: 1.5rem !important;
}

.mt-5 {
    margin-top: 3rem !important;
}

.mb-0 {
    margin-bottom: 0 !important;
}

.mb-1 {
    margin-bottom: 0.25rem !important;
}

.mb-2 {
    margin-bottom: 0.5rem !important;
}

.mb-3 {
    margin-bottom: 1rem !important;
}

.mb-4 {
    margin-bottom: 1.5rem !important;
}

.mb-5 {
    margin-bottom: 3rem !important;
}

.ms-0 {
    margin-left: 0 !important;
}

.ms-1 {
    margin-left: 0.25rem !important;
}

.ms-2 {
    margin-left: 0.5rem !important;
}

.ms-3 {
    margin-left: 1rem !important;
}

.ms-4 {
    margin-left: 1.5rem !important;
}

.ms-5 {
    margin-left: 3rem !important;
}

.me-0 {
    margin-right: 0 !important;
}

.me-1 {
    margin-right: 0.25rem !important;
}

.me-2 {
    margin-right: 0.5rem !important;
}

.me-3 {
    margin-right: 1rem !important;
}

.me-4 {
    margin-right: 1.5rem !important;
}

.me-5 {
    margin-right: 3rem !important;
}

.mx-auto {
    margin-left: auto !important;
    margin-right: auto !important;
}


/* Padding utilities */
.p-0 {
    padding: 0 !important;
}

.p-1 {
    padding: 0.25rem !important;
}

.p-2 {
    padding: 0.5rem !important;
}

.p-3 {
    padding: 1rem !important;
}

.p-4 {
    padding: 1.5rem !important;
}

.p-5 {
    padding: 3rem !important;
}

.pt-0 {
    padding-top: 0 !important;
}

.pt-1 {
    padding-top: 0.25rem !important;
}

.pt-2 {
    padding-top: 0.5rem !important;
}

.pt-3 {
    padding-top: 1rem !important;
}

.pt-4 {
    padding-top: 1.5rem !important;
}

.pt-5 {
    padding-top: 3rem !important;
}

.pb-0 {
    padding-bottom: 0 !important;
}

.pb-1 {
    padding-bottom: 0.25rem !important;
}

.pb-2 {
    padding-bottom: 0.5rem !important;
}

.pb-3 {
    padding-bottom: 1rem !important;
}

.pb-4 {
    padding-bottom: 1.5rem !important;
}

.pb-5 {
    padding-bottom: 3rem !important;
}

.ps-0 {
    padding-left: 0 !important;
}

.ps-1 {
    padding-left: 0.25rem !important;
}

.ps-2 {
    padding-left: 0.5rem !important;
}

.ps-3 {
    padding-left: 1rem !important;
}

.ps-4 {
    padding-left: 1.5rem !important;
}

.ps-5 {
    padding-left: 3rem !important;
}

.pe-0 {
    padding-right: 0 !important;
}

.pe-1 {
    padding-right: 0.25rem !important;
}

.pe-2 {
    padding-right: 0.5rem !important;
}

.pe-3 {
    padding-right: 1rem !important;
}

.pe-4 {
    padding-right: 1.5rem !important;
}

.pe-5 {
    padding-right: 3rem !important;
}

/*  */
/* ===== Default (không breakpoint) ===== */
.flex-row {
  display: flex;
  flex-direction: row;
}
.flex-row-reverse {
  display: flex;
  flex-direction: row-reverse;
}
.flex-column {
  display: flex;
  flex-direction: column;
}
.flex-column-reverse {
  display: flex;
  flex-direction: column-reverse;
}

/* ===== Small (≥576px) ===== */
@media (min-width: 576px) {
  .flex-sm-row {
    display: flex;
    flex-direction: row;
  }
  .flex-sm-row-reverse {
    display: flex;
    flex-direction: row-reverse;
  }
  .flex-sm-column {
    display: flex;
    flex-direction: column;
  }
  .flex-sm-column-reverse {
    display: flex;
    flex-direction: column-reverse;
  }
}

/* ===== Medium (≥768px) ===== */
@media (min-width: 768px) {
  .flex-md-row {
    display: flex;
    flex-direction: row;
  }
  .flex-md-row-reverse {
    display: flex;
    flex-direction: row-reverse;
  }
  .flex-md-column {
    display: flex;
    flex-direction: column;
  }
  .flex-md-column-reverse {
    display: flex;
    flex-direction: column-reverse;
  }
}

/* ===== Large (≥992px) ===== */
@media (min-width: 992px) {
  .flex-lg-row {
    display: flex;
    flex-direction: row;
  }
  .flex-lg-row-reverse {
    display: flex;
    flex-direction: row-reverse;
  }
  .flex-lg-column {
    display: flex;
    flex-direction: column;
  }
  .flex-lg-column-reverse {
    display: flex;
    flex-direction: column-reverse;
  }
}

/* ===== Extra Large (≥1200px) ===== */
@media (min-width: 1200px) {
  .flex-xl-row {
    display: flex;
    flex-direction: row;
  }
  .flex-xl-row-reverse {
    display: flex;
    flex-direction: row-reverse;
  }
  .flex-xl-column {
    display: flex;
    flex-direction: column;
  }
  .flex-xl-column-reverse {
    display: flex;
    flex-direction: column-reverse;
  }
}

/* ===== Extra Extra Large (≥1400px) ===== */
@media (min-width: 1400px) {
  .flex-xxl-row {
    display: flex;
    flex-direction: row;
  }
  .flex-xxl-row-reverse {
    display: flex;
    flex-direction: row-reverse;
  }
  .flex-xxl-column {
    display: flex;
    flex-direction: column;
  }
  .flex-xxl-column-reverse {
    display: flex;
    flex-direction: column-reverse;
  }
}