/* SwiftPost – sp-responsive.css v1.0 */

/* ════════════════════════════════
   DRAWER – ẩn mặc định mọi breakpoint
   Dùng display:none thay vì left:-100%
   để tuyệt đối không bao giờ lòi ra
════════════════════════════════ */
.sp-mobile-drawer {
  display: none;              /* ẨN hoàn toàn, không chiếm layout */
  position: fixed;
  top: 0; left: 0;
  width: 85vw; max-width: 320px;
  height: 100vh;
  background: var(--sp-white);
  z-index: 9990;
  box-shadow: 4px 0 32px rgba(0,0,0,.18);
  overflow-y: auto;
  padding: 20px;
  flex-direction: column;
  transform: translateX(-100%);
  transition: transform .28s ease;
}
/* Khi JS thêm .open: hiện + slide in */
.sp-mobile-drawer.open {
  display: flex;
  transform: translateX(0);
}

.sp-drawer-overlay {
  display: none;
  position: fixed; inset: 0;
  background: rgba(0,0,0,.5);
  z-index: 9989;
}
.sp-drawer-overlay.open { display: block; }

.sp-drawer-close {
  align-self: flex-end;
  background: none; border: none;
  font-size: 1.5rem; cursor: pointer;
  color: var(--sp-gray-700); margin-bottom: 20px;
  line-height: 1;
}
.sp-drawer-logo {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 24px;
}
.sp-drawer-menu { flex: 1; }
.sp-drawer-divider { height: 1px; background: var(--sp-gray-200); margin: 8px 0; }
.sp-drawer-cta {
  padding-top: 16px; margin-top: 16px;
  border-top: 1px solid var(--sp-gray-200);
  display: flex; flex-direction: column; gap: 8px;
}
.sp-drawer-cta .sp-btn { justify-content: center; width: 100%; }

/* ── Drawer ul/li ── */
ul.sp-drawer-ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 2px;
}
ul.sp-drawer-ul > li > a {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 14px; border-radius: 10px;
  font-size: .92rem; font-weight: 500;
  color: var(--sp-gray-700); text-decoration: none;
  transition: background .2s, color .2s;
}
ul.sp-drawer-ul > li > a:hover,
ul.sp-drawer-ul > li.current-menu-item > a {
  background: var(--sp-primary-light);
  color: var(--sp-primary); font-weight: 600;
}
ul.sp-drawer-ul .sub-menu {
  list-style: none; padding: 0 0 6px 28px; margin: 0;
}
ul.sp-drawer-ul .sub-menu li a {
  display: flex; align-items: center; gap: 6px;
  padding: 7px 10px; border-radius: 8px;
  font-size: .84rem; color: var(--sp-gray-500);
  text-decoration: none; transition: background .2s, color .2s;
}
ul.sp-drawer-ul .sub-menu li a::before {
  content: "–"; opacity: .4; font-size: .8rem;
}
ul.sp-drawer-ul .sub-menu li a:hover {
  color: var(--sp-primary); background: var(--sp-primary-light);
}

/* ════════════════════════════════
   TABLET ≤ 1024px
════════════════════════════════ */
@media (max-width: 1024px) {
  .sp-hero-inner        { grid-template-columns: 1fr; text-align: center; gap: 40px; }
  .sp-hero-btns         { justify-content: center; }
  .sp-hero-stats        { justify-content: center; }
  .sp-hero-content h1   { font-size: 2.2rem; }
  .sp-service-cards     { grid-template-columns: repeat(2, 1fr); }
  .sp-whyus-grid        { grid-template-columns: repeat(2, 1fr); }
  .sp-process-grid      { grid-template-columns: repeat(2, 1fr); }
  .sp-testi-grid        { grid-template-columns: 1fr 1fr; }
  .sp-archive-layout    { grid-template-columns: 240px 1fr; gap: 24px; }
  .sp-single-layout     { grid-template-columns: 1fr 240px; gap: 24px; }
  .sp-footer-top        { grid-template-columns: 1fr 1fr; gap: 32px; padding: 40px 24px 32px; }
  .sp-cta-inner         { flex-direction: column; text-align: center; }
  .sp-cta-btns          { justify-content: center; }
  .sp-nav-cta .sp-btn-outline { display: none; }
}

/* ════════════════════════════════
   MOBILE ≤ 768px
════════════════════════════════ */
@media (max-width: 768px) {
  ul.sp-nav-menu { display: none !important; }
  .sp-nav-cta    { display: none !important; }
  .sp-hamburger  { display: flex !important; }

  .sp-hero-content h1 { font-size: 1.9rem; }
  .sp-hero-badge      { font-size: .75rem; }

  .sp-archive-layout  { grid-template-columns: 1fr; }
  .sp-archive-sidebar { position: static; }
  .sp-single-layout   { grid-template-columns: 1fr; }
  .sp-single-sidebar  { position: static; }

  .sp-service-cards { grid-template-columns: 1fr; }
  .sp-whyus-grid    { grid-template-columns: 1fr 1fr; }
  .sp-testi-grid    { grid-template-columns: 1fr; }
  .sp-gallery-grid  { grid-template-columns: repeat(3, 1fr); }
  .sp-process-grid  { grid-template-columns: 1fr 1fr; }
  .sp-process-step:not(:last-child)::after { display: none; }

  .sp-footer-top    { grid-template-columns: 1fr 1fr; padding: 32px 16px 24px; gap: 24px; }
  .sp-footer-brand  { grid-column: 1 / -1; }
  .sp-footer-bottom { flex-direction: column; gap: 12px; text-align: center; padding: 16px; }

  .sp-mobile-nav { display: block; }
  body           { padding-bottom: 68px; }
  .sp-chat-btn   { bottom: 80px; right: 16px; }
  .sp-topbar-right { display: none; }
  .sp-cta-btns   { flex-direction: column; align-items: center; }
  .sp-filter-toggle-btn { display: flex; }
  .sp-filter-sidebar    { display: none; }
  .sp-filter-sidebar.sp-filter-open { display: block; }
  .sp-form-row   { grid-template-columns: 1fr; }
}

/* ════════════════════════════════
   SMALL MOBILE ≤ 480px
════════════════════════════════ */
@media (max-width: 480px) {
  .sp-container         { padding: 0 16px; }
  .sp-hero-content h1   { font-size: 1.65rem; }
  .sp-hero-stats        { gap: 20px; }
  .sp-whyus-grid        { grid-template-columns: 1fr; }
  .sp-gallery-grid      { grid-template-columns: repeat(2, 1fr); }
  .sp-footer-top        { grid-template-columns: 1fr; }
  .sp-section           { padding: 48px 0; }
  .sp-section-header h2 { font-size: 1.5rem; }
  .sp-price-tbl th:nth-child(4),
  .sp-price-tbl td:nth-child(4) { display: none; }
}