html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.box-shadow {
  box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05);
}

.btn:focus,
.btn:active:focus,
.btn-link.nav-link:focus,
.form-control:focus,
.form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {}

.form-floating>.form-control-plaintext::placeholder,
.form-floating>.form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating>.form-control-plaintext:focus::placeholder,
.form-floating>.form-control:focus::placeholder {
  text-align: start;
}

/* =========================================================
   BOOTSTRAP 5 PRO UTILITIES
   Author: dùng cho SPA / Landing / Service / CRM
   Load AFTER bootstrap.min.css
   ========================================================= */

/* ===============================
   1. SPACING (TO – CAO)
   =============================== */

/* Base (mobile-first) */
.p-6 {
  padding: 1.25rem !important;
}

/* 20px */
.p-7 {
  padding: 1.5rem !important;
}

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

.p-9 {
  padding: 2.5rem !important;
}

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

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

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

.pt-9 {
  padding-top: 2.5rem !important;
}

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

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

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

/* Axis */
.px-6 {
  padding-left: 4rem !important;
  padding-right: 4rem !important;
}

.py-6 {
  padding-top: 4rem !important;
  padding-bottom: 4rem !important;
}

.px-7 {
  padding-left: 5rem !important;
  padding-right: 5rem !important;
}

.py-7 {
  padding-top: 5rem !important;
  padding-bottom: 5rem !important;
}

/* Tablet */
@media (min-width:768px) {
  .p-6 {
    padding: 1.5rem !important;
  }

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

  .p-8 {
    padding: 2.5rem !important;
  }

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

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

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


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

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

/* Desktop */
@media (min-width:992px) {
  .p-8 {
    padding: 2.75rem !important;
  }

  .p-9 {
    padding: 3.5rem !important;
  }
}

/* ===============================
   2. GAP (FLEX / GRID)
   =============================== */

.gap-6 {
  gap: 1.25rem !important;
}

.gap-7 {
  gap: 1.5rem !important;
}

.gap-8 {
  gap: 2rem !important;
}

@media (min-width:768px) {
  .gap-6 {
    gap: 1.5rem !important;
  }

  .gap-7 {
    gap: 2rem !important;
  }
}

@media (min-width:992px) {
  .gap-8 {
    gap: 2.5rem !important;
  }
}

/* ===============================
   3. BORDER RADIUS (SPA LOOK)
   =============================== */

.rounded-xl {
  border-radius: 1rem !important;
}

.rounded-2xl {
  border-radius: 1.25rem !important;
}

.rounded-3xl {
  border-radius: 1.5rem !important;
}

@media (min-width:992px) {
  .rounded-2xl {
    border-radius: 1.5rem !important;
  }

  .rounded-3xl {
    border-radius: 2rem !important;
  }
}

/* ===============================
   4. FONT SIZE / LINE HEIGHT
   =============================== */

.fs-xs {
  font-size: .75rem !important;
}

.fs-sm {
  font-size: .875rem !important;
}

.fs-md {
  font-size: 1rem !important;
}

.fs-lg {
  font-size: 1.05rem !important;
}

.fs-xl {
  font-size: 1.15rem !important;
}

.fs-2xl {
  font-size: 1.4rem !important;
}

@media (min-width:768px) {
  .fs-lg {
    font-size: 1.125rem !important;
  }

  .fs-xl {
    font-size: 1.25rem !important;
  }
}

@media (min-width:992px) {
  .fs-xl {
    font-size: 1.35rem !important;
  }

  .fs-2xl {
    font-size: 1.75rem !important;
  }
}

.lh-tight {
  line-height: 1.25;
}

.lh-normal {
  line-height: 1.5;
}

.lh-loose {
  line-height: 1.7;
}

/* ===============================
   5. MOTION / HOVER (MƯỢT)
   =============================== */

.motion {
  transition: transform .18s ease, box-shadow .18s ease;
}

.motion-up:hover {
  transform: translateY(-4px);
}

.motion-soft:hover {
  transform: scale(1.02);
}

/* Disable hover motion on touch devices */
@media (hover: none) {

  .motion-up:hover,
  .motion-soft:hover {
    transform: none;
  }
}

/* ===============================
   6. WIDTH / HELPER
   =============================== */

.w-fit {
  width: fit-content;
}

/* ===============================
   7. MARGIN AXIS (X / Y)
   =============================== */

/* Mobile-first */
.mx-6 {
  margin-left: 1.25rem !important;
  margin-right: 1.25rem !important;
}

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

/* Single side */
.ms-6 {
  margin-left: 1.25rem !important;
}

.me-6 {
  margin-right: 1.25rem !important;
}

/* Tablet */
@media (min-width: 768px) {
  .mx-6 {
    margin-left: 1.5rem !important;
    margin-right: 1.5rem !important;
  }

  .my-6 {
    margin-top: 1.5rem !important;
    margin-bottom: 1.5rem !important;
  }

  .mx-7 {
    margin-left: 2rem !important;
    margin-right: 2rem !important;
  }

  .my-7 {
    margin-top: 2rem !important;
    margin-bottom: 2rem !important;
  }
}

/* Desktop */
@media (min-width: 992px) {
  .mx-8 {
    margin-left: 2.5rem !important;
    margin-right: 2.5rem !important;
  }

  .my-8 {
    margin-top: 2.5rem !important;
    margin-bottom: 2.5rem !important;
  }
}

/* Max width scale */
.max-w-xs {
  max-width: 20rem;
}

/* 320px */
.max-w-sm {
  max-width: 24rem;
}

.max-w-md {
  max-width: 28rem;
}

.max-w-lg {
  max-width: 32rem;
}

.max-w-xl {
  max-width: 36rem;
}

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

.h-100vh {
  height: 100vh;
}

.min-h-100vh {
  min-height: 100vh;
}

@media (min-width:768px) {
  .text-md-start {
    text-align: left !important;
  }

  .text-md-center {
    text-align: center !important;
  }
}

.object-cover {
  object-fit: cover;
}

.object-contain {
  object-fit: contain;
}

.z-1 {
  z-index: 1;
}

.z-10 {
  z-index: 10;
}

.z-50 {
  z-index: 50;
}

.overflow-hidden {
  overflow: hidden;
}

.overflow-x-hidden {
  overflow-x: hidden;
}

.cursor-pointer {
  cursor: pointer;
}

.pointer-none {
  pointer-events: none;
}

.shadow-soft {
  box-shadow: 0 10px 25px rgba(0, 0, 0, .06);
}

.shadow-hover:hover {
  box-shadow: 0 14px 30px rgba(0, 0, 0, .08);
}