/**
 * Gia Nguyên Home & Furniture - Luxury Architectural Navigation Stylesheet
 * Thiết kế lại toàn diện thanh Menu (Header & Topbar) đồng bộ trên toàn bộ 6 trang frontend
 * Căn chỉnh hoàn hảo, triệt tiêu lỗi kéo dài gạch chân, mang phong cách kiến trúc sang trọng hiện đại
 */

/* =========================================================
   1. TOPBAR SYNC: 1580px container & no-wrap styling
   ========================================================= */
div.bg-brand-dark > .max-w-7xl,
div.bg-brand-dark > div {
  max-width: 1580px !important;
  padding-left: clamp(16px, 2.2vw, 36px) !important;
  padding-right: clamp(16px, 2.2vw, 36px) !important;
  width: 100% !important;
}

.topbar-pricing-tag,
.cms-price-summary,
.cms-workshop,
.cms-address,
.cms-hotline-1,
.cms-hotline-2 {
  white-space: nowrap !important;
}

/* =========================================================
   2. HEADER CONTAINER: 1580px max-width, 82px balanced height
   ========================================================= */
header {
  position: sticky !important;
  top: 0 !important;
  z-index: 50 !important;
  background: rgba(255, 255, 255, 0.96) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  border-bottom: 1px solid rgba(226, 232, 240, 0.8) !important;
  box-shadow: 0 4px 20px -2px rgba(15, 23, 42, 0.04) !important;
  transition: all 0.3s ease !important;
}

header.is-scrolled {
  background: rgba(255, 255, 255, 0.99) !important;
  box-shadow: 0 10px 30px -4px rgba(15, 23, 42, 0.08) !important;
}

header > .max-w-7xl,
header > div.max-w-7xl,
header > div:first-child {
  max-width: 1580px !important;
  height: 82px !important;
  padding-left: clamp(16px, 2.2vw, 36px) !important;
  padding-right: clamp(16px, 2.2vw, 36px) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  box-sizing: border-box !important;
}

@media screen and (max-width: 1023px) {
  header > .max-w-7xl,
  header > div.max-w-7xl,
  header > div:first-child {
    height: 64px !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
}

/* =========================================================
   3. BRAND LOGO: Strictly Single Line, Never Wraps
   ========================================================= */
.nav-brand-logo,
header a.nav-brand-logo,
header > div > a:first-child {
  flex: 0 0 auto !important;
  width: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 12px !important;
  white-space: nowrap !important;
  text-decoration: none !important;
}

@media screen and (min-width: 1024px) {
  .nav-brand-logo,
  header a.nav-brand-logo,
  header > div > a:first-child {
    min-width: 235px !important;
  }
}

/* Logo Monogram Badge */
.nav-brand-logo .brand-badge,
img.brand-badge,
header > div > a:first-child > img:first-child,
header > div > a:first-child > div:first-child {
  width: 44px !important;
  height: 44px !important;
  border-radius: 12px !important;
  background: #0b111e !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #c5a880 !important;
  font-weight: 900 !important;
  font-size: 1.25rem !important;
  border: 1px solid rgba(197, 168, 128, 0.35) !important;
  box-shadow: 0 4px 12px rgba(11, 17, 30, 0.18) !important;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

.nav-brand-logo:hover .brand-badge,
header > div > a:first-child:hover > div:first-child {
  transform: scale(1.06) rotate(-2deg) !important;
}

/* Brand Text Lines */
.nav-brand-logo .brand-title,
header > div > a:first-child > div:last-child > span:first-child {
  display: block !important;
  white-space: nowrap !important;
  font-size: 1.05rem !important;
  font-weight: 900 !important;
  letter-spacing: 0.075em !important;
  line-height: 1.15 !important;
  color: #0b111e !important;
  text-transform: uppercase !important;
  transition: color 0.25s ease !important;
}

.nav-brand-logo:hover .brand-title,
header > div > a:first-child:hover > div:last-child > span:first-child {
  color: #aa8149 !important;
}

.nav-brand-logo .brand-sub,
header > div > a:first-child > div:last-child > span:last-child {
  display: block !important;
  white-space: nowrap !important;
  font-size: 9.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.22em !important;
  line-height: 1.3 !important;
  color: #c5a880 !important;
  text-transform: uppercase !important;
}

/* =========================================================
   4. DESKTOP NAVIGATION (1024px+): Refined Luxury Layout
   ========================================================= */
@media screen and (min-width: 1024px) {
  header nav,
  header nav.site-nav {
    flex: 1 1 auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: clamp(10px, 1.35vw, 26px) !important;
    margin: 0 clamp(12px, 1.6vw, 26px) !important;
    white-space: nowrap !important;
  }

  /* Triệt tiêu triệt để khoảng margin cứng do Tailwind space-x-7 */
  header nav > :not([hidden]) ~ :not([hidden]),
  header nav > * {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Mỗi liên kết menu: tinh tế, căn giữa, không gãy hàng */
  header nav > a,
  header nav a.nav-link {
    flex: 0 0 auto !important;
    min-width: 0 !important;
    width: auto !important;
    max-width: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    padding: 10px 8px !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    letter-spacing: 0.065em !important;
    line-height: 1.2 !important;
    text-transform: uppercase !important;
    color: #334155 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    border-bottom: none !important;
    transition: color 0.22s ease !important;
  }

  /* Chữ và icon bên trong menu */
  header nav > a span,
  header nav > a i {
    white-space: nowrap !important;
    line-height: 1 !important;
  }

  /* Hover state: màu vàng đồng ấm */
  header nav > a:hover {
    color: #aa8149 !important;
  }

  /* =========================================================
     4.1 CHỈ BÁO ACTIVE: Capsule vàng kim siêu mảnh, ôm sát chữ
     (Khắc phục triệt để lỗi gạch chân kéo dài 235px)
     ========================================================= */
  header nav > a::after {
    content: "" !important;
    position: absolute !important;
    bottom: 2px !important;
    left: 8px !important;
    right: 8px !important;
    height: 2.5px !important;
    border-radius: 999px !important;
    background: linear-gradient(90deg, #aa8149 0%, #c5a880 50%, #9e7e55 100%) !important;
    transform: scaleX(0) !important;
    transform-origin: center !important;
    transition: transform 0.26s cubic-bezier(0.4, 0, 0.2, 1) !important;
    pointer-events: none !important;
  }

  header nav > a:hover::after {
    transform: scaleX(1) !important;
  }

  header nav > a.active,
  header nav > a.nav-item-active,
  header nav > a[aria-current="page"] {
    color: #aa8149 !important;
    font-weight: 800 !important;
    border-bottom: none !important;
  }

  header nav > a.active::after,
  header nav > a.nav-item-active::after,
  header nav > a[aria-current="page"]::after {
    transform: scaleX(1) !important;
  }

  /* Huy hiệu HOT trên menu Cửa Hàng */
  .nav-badge-hot,
  header nav a span.bg-red-500 {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 1.5px 6.5px !important;
    border-radius: 999px !important;
    font-size: 8.5px !important;
    font-weight: 900 !important;
    letter-spacing: 0.03em !important;
    text-transform: uppercase !important;
    background: linear-gradient(135deg, #ef4444 0%, #f59e0b 100%) !important;
    color: #ffffff !important;
    margin-left: 5px !important;
    box-shadow: 0 2px 6px rgba(239, 68, 68, 0.35) !important;
    border: none !important;
    line-height: 1.2 !important;
  }
}

/* =========================================================
   5. DESKTOP ADAPTIVE BREAKPOINTS (1024px - 1280px)
   ========================================================= */
@media screen and (min-width: 1024px) and (max-width: 1280px) {
  .nav-brand-logo,
  header a.nav-brand-logo,
  header > div > a:first-child {
    min-width: 215px !important;
  }

  header nav,
  header nav.site-nav {
    gap: clamp(6px, 0.95vw, 14px) !important;
    margin: 0 8px !important;
  }

  header nav > a,
  header nav a.nav-link {
    font-size: 11px !important;
    letter-spacing: 0.04em !important;
    padding: 8px 5px !important;
  }

  header nav > a::after {
    left: 5px !important;
    right: 5px !important;
  }
}

/* =========================================================
   6. RIGHT ACTIONS: Luxury Suite (Cart, Zalo CTA, Mobile Toggle)
   ========================================================= */
.nav-actions-container,
header > div > div:last-child {
  flex: 0 0 auto !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  white-space: nowrap !important;
}

/* Nút Giỏ Hàng cao cấp */
.nav-btn-cart,
#cart-toggle-btn,
header > div > div:last-child > a[href*="cua-hang"],
header > div > div:last-child > button[onclick*="Cart"] {
  width: 44px !important;
  height: 44px !important;
  border-radius: 12px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  color: #1e293b !important;
  position: relative !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04) !important;
  transition: all 0.22s ease !important;
  text-decoration: none !important;
  cursor: pointer !important;
}

.nav-btn-cart:hover,
#cart-toggle-btn:hover,
header > div > div:last-child > a[href*="cua-hang"]:hover,
header > div > div:last-child > button[onclick*="Cart"]:hover {
  background: #ffffff !important;
  border-color: #c5a880 !important;
  color: #aa8149 !important;
  box-shadow: 0 6px 16px rgba(197, 168, 128, 0.20) !important;
  transform: translateY(-1px) !important;
}

/* Huy hiệu số lượng giỏ hàng */
.header-cart-badge,
#cart-badge {
  position: absolute !important;
  top: -4px !important;
  right: -4px !important;
  width: 20px !important;
  height: 20px !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, #e4d3bd 0%, #c5a880 100%) !important;
  color: #0b111e !important;
  font-size: 10.5px !important;
  font-weight: 900 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18) !important;
  border: 2px solid #ffffff !important;
  line-height: 1 !important;
}

/* Nút CTA Tư Vấn Zalo Sang Trọng */
.nav-btn-zalo,
header > div > div:last-child > a[href*="zalo"] {
  height: 44px !important;
  padding: 0 18px !important;
  border-radius: 12px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  background: linear-gradient(135deg, #c5a880 0%, #aa8149 100%) !important;
  color: #ffffff !important;
  font-size: 11.5px !important;
  font-weight: 800 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  box-shadow: 0 4px 14px rgba(170, 129, 73, 0.32) !important;
  transition: all 0.25s ease !important;
  white-space: nowrap !important;
  text-decoration: none !important;
  border: none !important;
}

.nav-btn-zalo:hover,
header > div > div:last-child > a[href*="zalo"]:hover {
  background: linear-gradient(135deg, #d1b58f 0%, #9e753b 100%) !important;
  box-shadow: 0 6px 20px rgba(170, 129, 73, 0.44) !important;
  transform: translateY(-1px) !important;
  color: #ffffff !important;
}

/* Nút Menu Di Động */
.nav-mobile-toggle,
#mobile-menu-toggle,
#mobile-menu-btn,
header button[onclick*="toggleMobileMenu"] {
  width: 44px !important;
  height: 44px !important;
  border-radius: 12px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  color: #1e293b !important;
  font-size: 1.15rem !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04) !important;
  transition: all 0.2s ease !important;
}

@media screen and (min-width: 1024px) {
  .nav-mobile-toggle,
  #mobile-menu-toggle,
  #mobile-menu-btn,
  header button[onclick*="toggleMobileMenu"] {
    display: none !important;
  }
}


/* =========================================================
   7. UNIFIED INTER TYPOGRAPHY & BULLETPROOF ICON SYSTEM
   ========================================================= */
html, body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

input, button, select, textarea, optgroup {
  font-family: inherit;
}

/* Scrollbar đồng bộ toàn hệ thống */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: #070d17; }
::-webkit-scrollbar-thumb { background: #c5a880; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #9e7e55; }

/* =========================================================
   8. STRICT FONT AWESOME 6 ICON PROTECTION
   Ngăn chặn triệt để xung đột font chữ làm mất icon
   ========================================================= */
.fa, .fas, .far, .fal, .fad, .fab,
.fa-solid, .fa-regular, .fa-brands,
[class^="fa-"], [class*=" fa-"], [class*="fa-"] {
  font-family: var(--fa-style-family, "Font Awesome 6 Free") !important;
  font-style: normal !important;
  font-variant: normal !important;
  text-rendering: auto !important;
  line-height: 1 !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.fa-brands, [class*="fa-brands"], .fab {
  font-family: "Font Awesome 6 Brands" !important;
}

.fa-solid, .fas {
  font-weight: 900 !important;
}

.fa-regular, .far {
  font-weight: 400 !important;
}

/* Bắt buộc pseudo-elements ::before và ::after kế thừa đúng font Font Awesome */
.fa::before, .fas::before, .far::before, .fab::before,
.fa-solid::before, .fa-regular::before, .fa-brands::before,
[class^="fa-"]::before, [class*=" fa-"]::before, [class*="fa-"]::before,
.fa::after, .fas::after, .far::after, .fab::after,
.fa-solid::after, .fa-regular::after, .fa-brands::after,
[class^="fa-"]::after, [class*=" fa-"]::after, [class*="fa-"]::after {
  font-family: inherit !important;
}


/* =========================================================
   9. COMPREHENSIVE MOBILE RESPONSIVE OPTIMIZATION SYSTEM
   Bảo vệ 100% không tràn ngang (Zero Overflow), tối ưu cảm ứng
   ========================================================= */

/* 9.1 Global Anti-Overflow & Box Reset */
html, body {
  overflow-x: hidden !important;
  width: 100% !important;
  max-width: 100vw !important;
  position: relative !important;
  -webkit-text-size-adjust: 100% !important;
  box-sizing: border-box !important;
}

*, *::before, *::after {
  box-sizing: border-box !important;
}

/* Ngăn chặn tuyệt đối các section và hình nền tràn màn hình điện thoại */
section, header, footer, main, article {
  max-width: 100vw !important;
  overflow-x: clip !important;
}

img, video, iframe {
  max-width: 100% !important;
  height: auto;
}

/* 9.2 Mobile Header & Logo (< 1024px) */
@media screen and (max-width: 1023px) {
  /* Logo thu gọn vừa vặn trên điện thoại */
  .nav-brand-logo,
  header a.nav-brand-logo,
  header > div > a:first-child {
    min-width: 0 !important;
    max-width: calc(100% - 95px) !important;
    gap: 8px !important;
    flex: 1 1 auto !important;
    overflow: hidden !important;
  }

  .nav-brand-logo .brand-badge,
  img.brand-badge,
  header > div > a:first-child > img:first-child,
  header > div > a:first-child > div:first-child {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    border-radius: 10px !important;
    font-size: 1rem !important;
    flex-shrink: 0 !important;
  }

  .nav-brand-logo .brand-title,
  header > div > a:first-child > div:last-child > span:first-child {
    font-size: clamp(0.85rem, 3.8vw, 1.05rem) !important;
    letter-spacing: 0.04em !important;
    line-height: 1.15 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .nav-brand-logo .brand-sub,
  header > div > a:first-child > div:last-child > span:last-child {
    font-size: 7.5px !important;
    letter-spacing: 0.12em !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
  }

  /* Khối nút bấm bên phải */
  .nav-actions-container,
  header > div > div:last-child {
    gap: 8px !important;
    flex: 0 0 auto !important;
    white-space: nowrap !important;
  }

  /* Ẩn nút Zalo trong Header trên màn hình nhỏ để không đẩy vỡ icon menu */
  .nav-btn-zalo,
  header > div > div:last-child > a[href*="zalo"] {
    display: none !important;
  }

  /* Nút Giỏ Hàng & Menu Mobile nhỏ gọn */
  .nav-btn-cart,
  #cart-toggle-btn,
  .nav-mobile-toggle,
  #mobile-menu-toggle,
  #mobile-menu-btn,
  header button[onclick*="toggleMobileMenu"] {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    border-radius: 10px !important;
    font-size: 1rem !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
}

/* Hiện lại nút Zalo trên máy tính bảng (640px - 1023px) */
@media screen and (min-width: 640px) and (max-width: 1023px) {
  .nav-btn-zalo,
  header > div > div:last-child > a[href*="zalo"] {
    display: inline-flex !important;
    height: 38px !important;
    padding: 0 12px !important;
    font-size: 10.5px !important;
    border-radius: 10px !important;
  }
}

/* 9.3 Topbar Mobile (< 768px): Tinh gọn, không tràn lề */
@media screen and (max-width: 768px) {
  div.bg-brand-dark {
    padding: 5px 12px !important;
  }

  div.bg-brand-dark > div {
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: 100% !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 6px !important;
  }

  /* Ẩn thông tin phụ trên topbar điện thoại */
  .topbar-pricing-tag,
  .cms-workshop,
  .cms-price-summary,
  div.bg-brand-dark .text-white\/20,
  div.bg-brand-dark span:has(.fa-industry) {
    display: none !important;
  }

  /* Hotline & Địa chỉ hiển thị rõ nét */
  .cms-address,
  .cms-hotline-1,
  .cms-hotline-2 {
    font-size: 11px !important;
    white-space: nowrap !important;
  }
}

/* 9.4 Ngăn chặn lỗi phóng to (Auto-zoom) trên iOS Safari khi chạm vào ô nhập */
@media screen and (max-width: 768px) {
  input, select, textarea {
    font-size: 16px !important; /* Bắt buộc để iOS Safari không zoom */
    border-radius: 12px !important;
  }

  button, a, input, select, textarea {
    touch-action: manipulation !important;
  }

  /* Tinh chỉnh thanh lọc sản phẩm / công trình có thể cuộn ngang mượt mà */
  #projects > div > .flex:first-child > div:last-child,
  #shop > div > .flex:first-child > div:last-child,
  .proj-filter-container,
  .shop-filter-container,
  .category-filter-bar {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 4px 2px 10px 2px !important;
    gap: 8px !important;
    max-width: 100% !important;
    scrollbar-width: none !important;
  }

  #projects > div > .flex:first-child > div:last-child::-webkit-scrollbar,
  #shop > div > .flex:first-child > div:last-child::-webkit-scrollbar {
    display: none !important;
  }

  .proj-filter-btn,
  .shop-filter-btn {
    flex: 0 0 auto !important;
    min-height: 38px !important;
    padding: 8px 15px !important;
    font-size: 11.5px !important;
  }

  /* Bảng biểu tự động cuộn ngang an toàn */
  table {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
}

/* 9.5 Mobile Drawer Navigation Menu (#mobile-menu) */
#mobile-menu {
  z-index: 99999 !important;
}

#mobile-menu > div {
  width: 85% !important;
  max-width: 320px !important;
  background: #09111f !important;
  border-left: 1px solid rgba(197, 168, 128, 0.25) !important;
  box-shadow: -15px 0 40px rgba(0, 0, 0, 0.6) !important;
}

#mobile-menu nav a {
  min-height: 44px !important;
  display: flex !important;
  align-items: center !important;
  padding: 10px 14px !important;
  border-radius: 12px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #e2e8f0 !important;
  transition: all 0.2s ease !important;
  text-decoration: none !important;
}

#mobile-menu nav a:hover,
#mobile-menu nav a:active,
#mobile-menu nav a.text-brand-gold {
  background: rgba(197, 168, 128, 0.15) !important;
  color: #c5a880 !important;
}

/* 9.6 Tối ưu khối nút bấm nổi góc phải dưới (Floating Buttons) */
@media screen and (max-width: 640px) {
  .fixed.bottom-6.right-6,
  .fixed.bottom-5.right-5 {
    bottom: 14px !important;
    right: 12px !important;
    gap: 8px !important;
    z-index: 45 !important;
  }

  .fixed.bottom-6.right-6 > button,
  .fixed.bottom-6.right-6 > a,
  .fixed.bottom-5.right-5 > button,
  .fixed.bottom-5.right-5 > a {
    width: 42px !important;
    height: 42px !important;
  }

  /* Form đăng ký trên mobile: padding thoáng, viền cong nhẹ nhàng */
  #quote form,
  #survey-form form,
  #form-lien-he form,
  #dang-ky-khao-sat form,
  #tu-van-chuyen-sau form,
  .luxury-consult-form {
    padding: 20px 14px !important;
    border-radius: 20px !important;
  }

  /* Giảm khoảng cách padding quá lớn trên các section */
  section.py-20,
  section.py-24,
  section.py-28,
  section.py-32 {
    padding-top: 48px !important;
    padding-bottom: 48px !important;
  }
}


/* =========================================================
   10. HOMEPAGE SPECIFIC MOBILE LUXURY ARCHITECTURE
   Khắc phục toàn diện khoảng đệm, cỡ chữ, lưới thẻ trên trang chủ
   ========================================================= */
@media screen and (max-width: 768px) {
  /* Khắc phục khoảng đệm quá lớn 108px/128px */
  #home {
    min-height: auto !important;
    padding-top: 36px !important;
    padding-bottom: 36px !important;
  }
  
  #why-us, #projects, #shop, #process, #quote {
    padding-top: 44px !important;
    padding-bottom: 44px !important;
  }

  /* Tiêu đề H1, H2 co giãn chuẩn */
  #home h1 {
    font-size: clamp(1.85rem, 7.8vw, 2.35rem) !important;
    line-height: 1.2 !important;
    margin-bottom: 14px !important;
    letter-spacing: -0.03em !important;
  }
  
  #home p {
    font-size: 13.5px !important;
    line-height: 1.65 !important;
    margin-bottom: 20px !important;
  }

  /* Stats 3 cột trong Hero */
  #home .grid.grid-cols-3 {
    margin-top: 20px !important;
    gap: 6px !important;
  }
  #home .grid.grid-cols-3 > div {
    padding: 10px 4px !important;
    border-radius: 14px !important;
  }
  #home .grid.grid-cols-3 .text-3xl,
  #home .grid.grid-cols-3 .text-2xl {
    font-size: 1.35rem !important;
    line-height: 1.1 !important;
  }

  /* Thẻ báo giá bên phải trong Hero */
  #home .lg\:col-span-5 > div {
    padding: 18px 14px !important;
    border-radius: 20px !important;
    margin-top: 10px !important;
  }

  /* 3 Trụ Cột Dịch Vụ Cốt Lõi */
  section.py-14 {
    padding-top: 32px !important;
    padding-bottom: 32px !important;
  }
  section.py-14 a.p-7 {
    padding: 20px 16px !important;
    border-radius: 20px !important;
  }

  /* Khu vực Công trình & Cửa hàng */
  #projects > div > .flex:first-child,
  #shop > div > .flex:first-child {
    padding: 20px 16px !important;
    border-radius: 20px !important;
    margin-bottom: 24px !important;
  }
  #projects h2, #shop h2, #process h2, #why-us h2 {
    font-size: clamp(1.75rem, 6.5vw, 2.2rem) !important;
    line-height: 1.15 !important;
  }

  /* Project card padding */
  #projects .project-card .p-6 {
    padding: 18px 16px !important;
  }

  /* Product card padding & button */
  #shop .product-item .p-5 {
    padding: 14px 14px !important;
  }
  #shop .product-item button.w-full {
    min-height: 40px !important;
    font-size: 11px !important;
  }

  /* Process steps */
  .process-step-card {
    padding: 20px 16px !important;
  }
  .process-watermark {
    font-size: 2.6rem !important;
    top: 8px !important;
    right: 14px !important;
  }

  /* Thẻ Form đăng ký #quote */
  .quote-form-card {
    padding: 20px 14px !important;
    border-radius: 20px !important;
  }
  
  /* Nút bấm lớn xem toàn bộ danh mục co giãn 100% không tràn màn hình */
  #projects a.px-8, #shop a.px-8, #process a.px-8 {
    width: 100% !important;
    max-width: 100% !important;
    padding: 14px 16px !important;
    white-space: normal !important;
    text-align: center !important;
    box-sizing: border-box !important;
  }
}