/* ==========================================================================
   K-Tech Helper / Utility Classes
   ========================================================================== */

/* ==========================================================================
   Custom Fonts (PP Neue Montreal & PP Right Grotesk)
   ========================================================================== */

/* --- PP Neue Montreal (Standard Family) --- */
@font-face {
  font-family: 'PP Neue Montreal';
  src: url('../fonts/PPNeueMontreal-Book.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'PP Neue Montreal';
  src: url('../fonts/PPNeueMontreal-Italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'PP Neue Montreal';
  src: url('../fonts/PPNeueMontreal-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'PP Neue Montreal';
  src: url('../fonts/PPNeueMontreal-SemiBoldItalic.woff2') format('woff2');
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'PP Neue Montreal';
  src: url('../fonts/PPNeueMontreal-Medium.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'PP Neue Montreal';
  src: url('../fonts/PPNeueMontreal-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* --- PP Right Grotesk (Standard Family) --- */
@font-face {
  font-family: 'PP Right Grotesk';
  src: url('../fonts/PPRightGrotesk-Medium.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'PP Right Grotesk';
  src: url('../fonts/PPRightGrotesk-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'PP Right Grotesk';
  src: url('../fonts/PPRightGrotesk-Medium.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'PP Right Grotesk';
  src: url('../fonts/PPRightGrotesk-Medium.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'PP Right Grotesk Compact';
  src: url('../fonts/PPRightGrotesk-CompactBlack.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'PP Right Grotesk Compact';
  src: url('../fonts/PPRightGrotesk-CompactBlack.woff2') format('woff2');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'PP Right Grotesk Compact';
  src: url('../fonts/PPRightGrotesk-CompactBlack.woff2') format('woff2');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

/* --- Fallback Aliases (Hỗ trợ tương thích khi copy CSS/HTML trực tiếp từ React/Framer) --- */
@font-face {
  font-family: 'PP Neue Montreal Book';
  src: url('../fonts/PPNeueMontreal-Book.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'PP Neue Montreal Medium';
  src: url('../fonts/PPNeueMontreal-Medium.woff2') format('woff2');
  font-weight: 400 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'PP Neue Montreal Bold';
  src: url('../fonts/PPNeueMontreal-Bold.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'PP Neue Montreal SemiBold italic';
  src: url('../fonts/PPNeueMontreal-SemiBoldItalic.woff2') format('woff2');
  font-weight: 400 600;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'PP Right Grotesk Medium';
  src: url('../fonts/PPRightGrotesk-Medium.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'PP Right Grotesk Compact Black';
  src: url('../fonts/PPRightGrotesk-CompactBlack.woff2') format('woff2');
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}

/* Fonts Utility Classes */
.font-neue,
.font-montreal {
  font-family: 'PP Neue Montreal', sans-serif !important;
}

.font-grotesk {
  font-family: 'PP Right Grotesk', sans-serif !important;
}

.font-grotesk-black {
  font-family: 'PP Right Grotesk Compact', sans-serif !important;
  font-weight: 900 !important;
}

.font-book {
  font-weight: 400 !important;
}

.font-medium {
  font-weight: 500 !important;
}

.font-semibold {
  font-weight: 600 !important;
}

.font-bold {
  font-weight: 700 !important;
}

.font-black {
  font-weight: 900 !important;
}

.font-italic {
  font-style: italic !important;
}



/* Radius */
.radius-0,
.radius-0 img {
  border-radius: 0px !important;
}

.radius-4,
.radius-4 img {
  border-radius: 4px !important;
}

.radius-8,
.radius-8 img {
  border-radius: 8px !important;
}

.radius-12,
.radius-12 img {
  border-radius: 12px !important;
}

.radius-16,
.radius-16 img {
  border-radius: 16px !important;
}

/* Padding & Margin - Base */
.p-0 {
  padding: 0 !important;
}

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

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

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

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

.px-0 {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.py-0 {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.p-20 {
  padding: 1.25rem !important;
}

.pt-20 {
  padding-top: 1.25rem !important;
}

.pb-20 {
  padding-bottom: 1.25rem !important;
}

.pl-20 {
  padding-left: 1.25rem !important;
}

.pr-20 {
  padding-right: 1.25rem !important;
}

.px-20 {
  padding-left: 1.25rem !important;
  padding-right: 1.25rem !important;
}

.py-20 {
  padding-top: 1.25rem !important;
  padding-bottom: 1.25rem !important;
}

.m-0 {
  margin: 0 !important;
}

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

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

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

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

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

.my-0 {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.m-20 {
  margin: 1.25rem !important;
}

.mt-20 {
  margin-top: 1.25rem !important;
}

.mb-12 {
  margin-bottom: .75rem !important;
}

.mb-20 {
  margin-bottom: 1.25rem !important;
}

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

.ml-20 {
  margin-left: 1.25rem !important;
}

.mr-20 {
  margin-right: 1.25rem !important;
}

.mx-20 {
  margin-left: 1.25rem !important;
  margin-right: 1.25rem !important;
}

.my-20 {
  margin-top: 1.25rem !important;
  margin-bottom: 1.25rem !important;
}

/* Responsive Utilities */
@media (max-width: 859px) {
  .md-p-0 {
    padding: 0 !important;
  }

  .md-pt-30 {
    padding-top: 1.875rem !important;
  }

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

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

  .md-pl-0 {
    padding-left: 0 !important;
  }

  .md-pr-0 {
    padding-right: 0 !important;
  }

  .md-px-0 {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .md-py-0 {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  .md-m-0 {
    margin: 0 !important;
  }

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

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

  .md-ml-0 {
    margin-left: 0 !important;
  }

  .md-mr-0 {
    margin-right: 0 !important;
  }

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

  .md-my-0 {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
}

@media (max-width: 430px) {
  .sm-p-0 {
    padding: 0 !important;
  }

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

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

  .sm-pl-0 {
    padding-left: 0 !important;
  }

  .sm-pr-0 {
    padding-right: 0 !important;
  }

  .sm-px-0 {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .sm-py-0 {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  .sm-m-0 {
    margin: 0 !important;
  }

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

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

  .sm-ml-0 {
    margin-left: 0 !important;
  }

  .sm-mr-0 {
    margin-right: 0 !important;
  }

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

  .sm-my-0 {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
}

/* Container */
.custom-container {
  max-width: 1280px;
  padding-left: 1rem;
  padding-right: 1rem;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}

/* Colors */
.text-primary {
  color: var(--fs-color-primary) !important;
}

.text-secondary {
  color: var(--fs-color-secondary) !important;
}

.text-dark {
  color: #0e2207 !important;
}

.text-light {
  color: #f8f9fa !important;
}

.text-black {
  color: #000000 !important;
}

.text-white {
  color: #ffffff !important;
}

/* Font Size */
.fs-12 {
  font-size: 12px !important;
}

.fs-13 {
  font-size: 13px !important;
}

.fs-14 {
  font-size: 14px !important;
}

.fs-16 {
  font-size: 16px !important;
}

.fs-18 {
  font-size: 18px !important;
}

.fs-20 {
  font-size: 20px !important;
}

.fs-22 {
  font-size: 22px !important;
}

.fs-24 {
  font-size: 24px !important;
}

.fs-26 {
  font-size: 26px !important;
}

.fs-28 {
  font-size: 28px !important;
}

.fs-30 {
  font-size: 30px !important;
}

.fs-32 {
  font-size: 32px !important;
}

.fs-36 {
  font-size: 36px !important;
}

.fs-40 {
  font-size: 40px !important;
}

.fs-44 {
  font-size: 44px !important;
}

.fs-46 {
  font-size: 46px !important;
}

.fs-50 {
  font-size: 50px !important;
}

/* Font Weight */
.fw-400 {
  font-weight: 400 !important;
}

.fw-500 {
  font-weight: 500 !important;
}

.fw-600 {
  font-weight: 600 !important;
}

.fw-700 {
  font-weight: 700 !important;
}

.fw-800 {
  font-weight: 800 !important;
}

.fw-900 {
  font-weight: 900 !important;
}

/* Custom Buttons */
.custom-btn-1 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 24px;
  background-color: var(--primary-color);
  color: #fff;
  border-radius: 4px;
  text-decoration: none;
  transition: all 0.3s ease;
}

.custom-btn-1:hover {
  background-color: var(--secondary-color);
  color: #fff;
}

.custom-btn-2 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 24px;
  border: 1px solid var(--primary-color);
  color: var(--primary-color);
  border-radius: 4px;
  text-decoration: none;
  background-color: transparent;
  transition: all 0.3s ease;
}

.custom-btn-2:hover {
  background-color: var(--primary-color);
  color: #fff;
}

/* ==========================================================================
   Flatsome Column & Flex Order Utility Classes
   ========================================================================== */
@media (max-width: 869px) {

  .order-md-first {
    order: -1 !important;
  }

  .order-md-0 {
    order: 0 !important;
  }

  .order-md-1 {
    order: 1 !important;
  }

  .order-md-2 {
    order: 2 !important;
  }

  .order-md-lastest {
    order: 99 !important;
  }
}