html {
  font-size: 14px;
}

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

.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 {
  margin-bottom: 60px;
}

/* =========================================================
   PREVENT MOBILE / IOS AUTO-ZOOM ON INPUT CLICK / FOCUS
   ========================================================= */
@media screen and (max-width: 991.98px) {
  input,
  textarea,
  select,
  .form-control,
  .form-select,
  .form-control-sm,
  .form-select-sm,
  input[type="text"],
  input[type="number"],
  input[type="email"],
  input[type="password"],
  input[type="tel"],
  input[type="search"],
  input[type="url"],
  input[type="date"],
  input[type="datetime-local"] {
    font-size: 16px !important;
    touch-action: manipulation;
  }
}

/* Responsive tables with custom scrollbar */
.table-responsive {
  scrollbar-width: thin;
  scrollbar-color: #cbd5e1 #f8fafc;
  border-radius: 8px;
}

.table-responsive::-webkit-scrollbar {
  height: 6px;
  width: 6px;
}

.table-responsive::-webkit-scrollbar-track {
  background: #f8fafc;
}

.table-responsive::-webkit-scrollbar-thumb {
  background-color: #cbd5e1;
  border-radius: 10px;
}

/* Responsive adjustments for mobile screens */
@media (max-width: 767.98px) {
  /* Hero banner responsive adjustments */
  .display-4 {
    font-size: 2.0rem !important;
    line-height: 1.3;
  }
  
  .lead {
    font-size: 1.0rem !important;
  }

  /* Reduce filter form offset overlap on small screens to prevent layout bugs */
  .container > .card[style*="margin-top: -80px"] {
    margin-top: -40px !important;
    margin-bottom: 30px !important;
  }

  /* Tighter padding on mobile for cards */
  .card.p-4 {
    padding: 1.25rem !important;
  }

  /* Make responsive table header text smaller and compact */
  .table th, .table td {
    padding: 12px 10px !important;
    font-size: 0.85rem;
  }
  
  /* Stack navbar buttons neatly on mobile */
  .navbar-nav {
    padding-top: 10px;
    align-items: stretch !important;
  }

  .navbar-nav .nav-item {
    text-align: center;
    width: 100%;
  }

  .navbar-nav .nav-link {
    display: block;
    padding: 10px 15px !important;
  }
}

/* Global Print Stylesheet for 100% Clean PDF & A4 Printing */
@media print {
  @page {
    size: A4 portrait;
    margin: 8mm 10mm;
  }
  
  html, body {
    background: #ffffff !important;
    color: #000000 !important;
    margin: 0 !important;
    padding: 0 !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  /* Automatically hide non-printable elements across the entire website */
  nav,
  header,
  footer,
  .navbar,
  .premium-nav,
  .admin-sidebar,
  .admin-topbar,
  .admin-sidebar-overlay,
  .floating-contact-widget,
  #floatingContactWidget,
  .floating-btn,
  .btn-phone,
  .btn-zalo,
  .btn-messenger,
  .floating-tooltip,
  .d-print-none,
  .no-print,
  .btn:not(.print-btn-keep) {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
  }
}