@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800;900&family=Inter:wght@400;500;600;700;800&display=swap&subset=vietnamese');

/* ==========================================================================
   H77CONS HOMEPAGE MOBILE REDESIGN (100% EXACT MATCH TO USER MOCKUP)
   - Desktop (>= 768px): 100% Preserved Post 4 Original Layout & Assets
   - Mobile (< 768px): Exact Mockup Parity (Clean White Header, High-Contrast
     Hero with Real H77CONS Villa & Site Team, Stacked CTA Buttons with Arrows,
     3 Glass Commitment Cards, and Clean White 3-Button Sticky Bar)
   ========================================================================== */

/* ==========================================================================
   1. DESKTOP VIEW PRESERVATION (>= 768px)
   ========================================================================== */
@media (min-width: 768px) {
  body.page-id-1371 .h77-mobile-only-content,
  body.page-id-1371 .elementor-element.h77-mobile-only-content,
  body.page-id-4 .h77-mobile-only-content,
  body.page-id-4 .elementor-element.h77-mobile-only-content {
    display: none !important;
  }
  body.page-id-1371 .h77-desktop-only-content,
  body.page-id-1371 .elementor-element.h77-desktop-only-content,
  body.page-id-4 .h77-desktop-only-content,
  body.page-id-4 .elementor-element.h77-desktop-only-content {
    display: flex !important;
  }
  body.page-id-1371 .m-exact-sticky-bar,
  body.page-id-4 .m-exact-sticky-bar {
    display: none !important;
  }
  body.page-id-1371 .m-exact-menu-btn,
  body.page-id-4 .m-exact-menu-btn {
    display: none !important;
  }
  body.page-id-1371 .mobile-exact-header .mobile-menu,
  body.page-id-4 .mobile-exact-header .mobile-menu {
    display: none !important;
  }
}

/* ==========================================================================
   2. MOBILE VIEW SPECIFICATIONS (< 768px)
   ========================================================================== */
@media (max-width: 767px) {
  /* Layout switching */
  body.page-id-1371 .h77-desktop-only-content,
  body.page-id-1371 .elementor-element.h77-desktop-only-content,
  body.page-id-4 .h77-desktop-only-content,
  body.page-id-4 .elementor-element.h77-desktop-only-content {
    display: none !important;
  }
  body.page-id-1371 .h77-mobile-only-content,
  body.page-id-1371 .elementor-element.h77-mobile-only-content,
  body.page-id-4 .h77-mobile-only-content,
  body.page-id-4 .elementor-element.h77-mobile-only-content {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  body.page-id-1371 .header-main-nav,
  body.page-id-1371 .header-quote,
  body.page-id-1371 .header-top,
  body.page-id-4 .header-main-nav,
  body.page-id-4 .header-quote,
  body.page-id-4 .header-top {
    display: none !important;
  }

  /* Zero Horizontal Overflow */
  html, body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  body.page-id-1371 *,
  body.page-id-4 * {
    box-sizing: border-box !important;
  }

  /* Reset outer container margins/paddings */
  body.page-id-1371 .m-exact-body-content,
  body.page-id-4 .m-exact-body-content,
  body.page-id-1371 .m-exact-body-content > .e-con-inner,
  body.page-id-4 .m-exact-body-content > .e-con-inner {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* --------------------------------------------------------------------------
     A. HEADER MOBILE (Pure White with Crisp Navy Brand & Sleek Menu Button)
     -------------------------------------------------------------------------- */
  body.page-id-1371 .site-header,
  body.page-id-4 .site-header,
  body.home .site-header {
    background: #FFFFFF !important;
    border-bottom: 1px solid #EEF2F6 !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 1000 !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    height: 56px !important;
    min-height: 56px !important;
  }
  body.page-id-1371 .header-brand-row,
  body.page-id-4 .header-brand-row,
  body.home .site-header .header-brand-row,
  body.home .header-brand-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    height: 56px !important;
    min-height: 56px !important;
    padding: 0 16px !important;
    max-width: 100% !important;
    width: 100% !important;
  }
  body.page-id-1371 .brand-logo-img,
  body.page-id-4 .brand-logo-img {
    height: 38px !important;
    width: auto !important;
    display: block !important;
  }
  body.page-id-1371 .m-exact-menu-btn,
  body.page-id-4 .m-exact-menu-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: #FFFFFF !important;
    border: 1.5px solid #DCE3EB !important;
    border-radius: 8px !important;
    padding: 6px 14px !important;
    cursor: pointer !important;
    user-select: none !important;
    list-style: none !important;
    outline: none !important;
    transition: all 0.2s ease !important;
  }
  body.page-id-1371 .m-exact-menu-btn::-webkit-details-marker,
  body.page-id-4 .m-exact-menu-btn::-webkit-details-marker {
    display: none !important;
  }
  body.page-id-1371 .m-hamburger-icon,
  body.page-id-4 .m-hamburger-icon {
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    width: 16px !important;
    height: 11px !important;
  }
  body.page-id-1371 .m-hamburger-icon span,
  body.page-id-4 .m-hamburger-icon span {
    display: block !important;
    height: 2px !important;
    width: 100% !important;
    background-color: #06245F !important;
    border-radius: 2px !important;
  }
  body.page-id-1371 .m-menu-text,
  body.page-id-4 .m-menu-text {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #06245F !important;
    line-height: 1 !important;
  }

  /* Mobile Drawer Panel */
  body.page-id-1371 .mobile-menu-panel,
  body.page-id-4 .mobile-menu-panel {
    position: absolute !important;
    top: 60px !important;
    left: 0 !important;
    right: 0 !important;
    background: #FFFFFF !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15) !important;
    border-bottom: 2px solid #2563EB !important;
    padding: 16px 20px 24px 20px !important;
    z-index: 9999 !important;
    max-height: calc(100vh - 80px) !important;
    overflow-y: auto !important;
  }
  body.page-id-1371 .mobile-menu-panel a,
  body.page-id-4 .mobile-menu-panel a {
    display: block !important;
    padding: 11px 0 !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #0F172A !important;
    border-bottom: 1px solid #F1F5F9 !important;
    text-decoration: none !important;
  }
  body.page-id-1371 .mobile-menu-cta,
  body.page-id-4 .mobile-menu-cta {
    background: #0066FF !important;
    color: #FFFFFF !important;
    text-align: center !important;
    border-radius: 8px !important;
    margin-top: 14px !important;
    padding: 12px 0 !important;
    font-weight: 700 !important;
  }

  /* --------------------------------------------------------------------------
     B. HERO SECTION (100% Exact Mockup Match - Full Bleed)
     -------------------------------------------------------------------------- */
  body.page-id-1371 .m-exact-hero,
  body.page-id-4 .m-exact-hero {
    background-image: url('https://h77cons.vn/wp-content/uploads/2026/10/hero-mobile-exact-bg.webp?v=1792261000') !important;
    background-size: cover !important;
    background-position: right bottom 90px !important;
    background-repeat: no-repeat !important;
    padding: 24px 16px 24px 16px !important;
    position: relative !important;
    overflow: hidden !important;
    min-height: calc(100vh - 126px) !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    border-radius: 0 !important;
  }
  body.page-id-1371 .m-hero-exact-container,
  body.page-id-4 .m-hero-exact-container {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    flex: 1 !important;
  }
  body.page-id-1371 .m-hero-kicker-wrap,
  body.page-id-4 .m-hero-kicker-wrap {
    margin-bottom: 12px !important;
  }
  body.page-id-1371 .m-hero-kicker,
  body.page-id-4 .m-hero-kicker {
    display: inline-block !important;
    background: rgba(255, 255, 255, 0.12) !important;
    border: 1px solid rgba(255, 255, 255, 0.35) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    border-radius: 6px !important;
    padding: 5px 12px !important;
    color: #FFFFFF !important;
    font-size: 10.5px !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;
    font-family: 'Montserrat', sans-serif !important;
  }
  body.page-id-1371 .m-hero-h1,
  body.page-id-4 .m-hero-h1 {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 24px !important;
    font-weight: 800 !important;
    line-height: 1.25 !important;
    color: #FFFFFF !important;
    margin: 0 0 12px 0 !important;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.35) !important;
  }
  body.page-id-1371 .m-hero-desc,
  body.page-id-4 .m-hero-desc {
    font-family: 'Inter', sans-serif !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
    color: rgba(255, 255, 255, 0.92) !important;
    margin: 0 0 16px 0 !important;
    max-width: 88% !important;
    font-weight: 400 !important;
  }
  body.page-id-1371 .m-hero-btns,
  body.page-id-4 .m-hero-btns {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    margin-bottom: 16px !important;
    width: 100% !important;
  }
  body.page-id-1371 .m-btn-primary,
  body.page-id-4 .m-btn-primary {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    background: #0066FF !important;
    color: #FFFFFF !important;
    height: 48px !important;
    padding: 0 18px !important;
    border-radius: 8px !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    box-shadow: 0 4px 14px rgba(0, 102, 255, 0.35) !important;
    border: none !important;
  }
  body.page-id-1371 .m-btn-secondary,
  body.page-id-4 .m-btn-secondary {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    background: rgba(10, 32, 68, 0.65) !important;
    border: 1px solid rgba(255, 255, 255, 0.4) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    color: #FFFFFF !important;
    height: 48px !important;
    padding: 0 18px !important;
    border-radius: 8px !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
  }
  body.page-id-1371 .m-btn-arrow,
  body.page-id-4 .m-btn-arrow {
    font-size: 18px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
  }
  body.page-id-1371 .m-hero-trust-row,
  body.page-id-4 .m-hero-trust-row {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px !important;
    width: 100% !important;
    margin-top: auto !important;
  }
  body.page-id-1371 .m-trust-card,
  body.page-id-4 .m-trust-card {
    background: rgba(14, 38, 77, 0.65) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border-radius: 10px !important;
    padding: 10px 4px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 6px !important;
  }
  body.page-id-1371 .trust-badge-icon,
  body.page-id-4 .trust-badge-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  body.page-id-1371 .trust-text strong,
  body.page-id-4 .trust-text strong {
    display: block !important;
    color: #FFFFFF !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
  }
  body.page-id-1371 .trust-text span,
  body.page-id-4 .trust-text span {
    display: block !important;
    color: rgba(255, 255, 255, 0.9) !important;
    font-size: 10.5px !important;
    font-weight: 400 !important;
    line-height: 1.25 !important;
  }

  /* --------------------------------------------------------------------------
     C. BODY SECTIONS (Vertical Rhythm & SOP Spacing)
     -------------------------------------------------------------------------- */
  body.page-id-1371 .m-exact-body-content > *:not(.m-exact-hero),
  body.page-id-4 .m-exact-body-content > *:not(.m-exact-hero) {
    margin-bottom: 28px !important;
  }
  body.page-id-1371 .m-highlights-grid,
  body.page-id-4 .m-highlights-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 8px !important;
    padding: 0 12px !important;
  }
  body.page-id-1371 .m-highlight-card,
  body.page-id-4 .m-highlight-card {
    background: #FFFFFF !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06) !important;
    border: 1px solid #E2E8F0 !important;
    text-decoration: none !important;
    display: flex !important;
    flex-direction: column !important;
  }
  body.page-id-1371 .m-highlight-card .card-thumb,
  body.page-id-4 .m-highlight-card .card-thumb {
    aspect-ratio: 4 / 3 !important;
    height: 72px !important;
    overflow: hidden !important;
  }
  body.page-id-1371 .m-highlight-card .card-thumb img,
  body.page-id-4 .m-highlight-card .card-thumb img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }
  body.page-id-1371 .m-highlight-card .card-meta,
  body.page-id-4 .m-highlight-card .card-meta {
    padding: 8px 6px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
  }
  body.page-id-1371 .card-title,
  body.page-id-4 .card-title {
    font-size: 11px !important;
    font-weight: 700 !important;
    color: #06245F !important;
    line-height: 1.25 !important;
  }
  body.page-id-1371 .card-arrow,
  body.page-id-4 .card-arrow {
    color: #2563EB !important;
    font-size: 12px !important;
  }

  /* Trust Pills Row */
  body.page-id-1371 .m-trust-pills-row,
  body.page-id-4 .m-trust-pills-row {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px !important;
    padding: 0 12px !important;
  }
  body.page-id-1371 .m-trust-pill,
  body.page-id-4 .m-trust-pill {
    background: #FFFFFF !important;
    border-radius: 12px !important;
    padding: 10px 8px !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    border: 1px solid #E2E8F0 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
  }
  body.page-id-1371 .pill-text strong,
  body.page-id-4 .pill-text strong {
    display: block !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    color: #06245F !important;
  }
  body.page-id-1371 .pill-text span,
  body.page-id-4 .pill-text span {
    display: block !important;
    font-size: 10.5px !important;
    color: #64748B !important;
    line-height: 1.2 !important;
  }

  /* About Card */
  body.page-id-1371 .m-about-card,
  body.page-id-4 .m-about-card {
    background: #FFFFFF !important;
    border-radius: 16px !important;
    margin: 0 12px !important;
    overflow: hidden !important;
    border: 1px solid #E2E8F0 !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06) !important;
  }
  body.page-id-1371 .m-about-media img,
  body.page-id-4 .m-about-media img {
    width: 100% !important;
    height: 180px !important;
    object-fit: cover !important;
    display: block !important;
  }
  body.page-id-1371 .m-about-content,
  body.page-id-4 .m-about-content {
    padding: 16px !important;
  }
  body.page-id-1371 .m-about-eyebrow,
  body.page-id-4 .m-about-eyebrow {
    font-size: 11px !important;
    font-weight: 700 !important;
    color: #2563EB !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    display: block !important;
    margin-bottom: 6px !important;
  }
  body.page-id-1371 .m-about-title,
  body.page-id-4 .m-about-title {
    font-size: 16px !important;
    font-weight: 800 !important;
    color: #06245F !important;
    line-height: 1.35 !important;
    margin: 0 0 10px 0 !important;
  }
  body.page-id-1371 .m-about-desc,
  body.page-id-4 .m-about-desc {
    font-size: 12.5px !important;
    line-height: 1.5 !important;
    color: #475569 !important;
    margin: 0 0 14px 0 !important;
  }
  body.page-id-1371 .m-about-actions,
  body.page-id-4 .m-about-actions {
    display: flex !important;
    gap: 10px !important;
  }
  body.page-id-1371 .m-btn-navy,
  body.page-id-4 .m-btn-navy {
    flex: 1 !important;
    background: #06245F !important;
    color: #FFFFFF !important;
    text-align: center !important;
    padding: 10px 0 !important;
    border-radius: 8px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
  }
  body.page-id-1371 .m-btn-outline-navy,
  body.page-id-4 .m-btn-outline-navy {
    flex: 1 !important;
    border: 1.5px solid #06245F !important;
    color: #06245F !important;
    text-align: center !important;
    padding: 10px 0 !important;
    border-radius: 8px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
  }

  /* --------------------------------------------------------------------------
     D. STICKY BAR (White Container, Rounded Top 16px, 3 Bold Action Buttons)
     -------------------------------------------------------------------------- */
  body.page-id-1371 .m-exact-sticky-bar,
  body.page-id-4 .m-exact-sticky-bar {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 99999 !important;
    background: #FFFFFF !important;
    border-top-left-radius: 16px !important;
    border-top-right-radius: 16px !important;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.12) !important;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 8px)) 12px !important;
    display: flex !important;
    gap: 8px !important;
    align-items: center !important;
    justify-content: space-between !important;
  }
  body.page-id-1371 .m-sticky-btn,
  body.page-id-4 .m-sticky-btn {
    flex: 1 !important;
    height: 46px !important;
    border-radius: 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    text-decoration: none !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    transition: transform 0.15s ease !important;
  }
  body.page-id-1371 .m-sticky-btn:active,
  body.page-id-4 .m-sticky-btn:active {
    transform: scale(0.97) !important;
  }
  body.page-id-1371 .m-sticky-btn.btn-call,
  body.page-id-4 .m-sticky-btn.btn-call {
    background: #072B61 !important;
    color: #FFFFFF !important;
    border: none !important;
  }
  body.page-id-1371 .m-sticky-btn.btn-zalo,
  body.page-id-4 .m-sticky-btn.btn-zalo {
    background: #0078FF !important;
    color: #FFFFFF !important;
    border: none !important;
  }
  body.page-id-1371 .m-sticky-btn.btn-quote,
  body.page-id-4 .m-sticky-btn.btn-quote {
    background: #FFFFFF !important;
    color: #072B61 !important;
    border: 1.5px solid #CBD5E1 !important;
  }

  /* Footer safe area */
  body.page-id-1371 .site-footer,
  body.page-id-4 .site-footer,
  body.page-id-1371 .m-exact-footer-wrapper,
  body.page-id-4 .m-exact-footer-wrapper {
    padding-bottom: 95px !important;
  }

  /* ==========================================================================
     POST 4 NATIVE MOBILE HEADER FINE-TUNING (NO REBUILD)
     ========================================================================== */
  body.page-id-4 .site-header,
  body.home .site-header {
    background: #FFFFFF !important;
    border-bottom: 1px solid #E2E8F0 !important;
    padding: 0 !important;
    margin: 0 !important;
    height: 56px !important;
    min-height: 56px !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 1000 !important;
  }
  body.page-id-4 .site-header .header-brand-row,
  body.home .site-header .header-brand-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    height: 56px !important;
    min-height: 56px !important;
    padding: 0 16px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }
  body.page-id-4 .site-header .brand,
  body.home .site-header .brand,
  body.page-id-4 .site-header .brand a,
  body.home .site-header .brand a {
    display: flex !important;
    align-items: center !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  body.page-id-4 .site-header .brand img,
  body.home .site-header .brand img,
  body.page-id-4 .site-header .brand-logo-img,
  body.home .site-header .brand-logo-img {
    height: 38px !important;
    width: auto !important;
    max-height: 38px !important;
    max-width: 140px !important;
    object-fit: contain !important;
    display: block !important;
  }
  .h77e-site-header-wrapper .site-header .mobile-menu > summary.btn,
  body.page-id-4 .site-header .mobile-menu summary,
  body.home .site-header .mobile-menu summary {
    background: #FFFFFF !important;
    border: 1.5px solid #CBD5E1 !important;
    border-radius: 8px !important;
    padding: 6px 14px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    cursor: pointer !important;
    list-style: none !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
    font-size: 0 !important;
    color: transparent !important;
    outline: none !important;
    text-transform: none !important;
  }
  .h77e-site-header-wrapper .site-header .mobile-menu > summary.btn::-webkit-details-marker,
  body.page-id-4 .site-header .mobile-menu summary::-webkit-details-marker,
  body.home .site-header .mobile-menu summary::-webkit-details-marker {
    display: none !important;
  }
  .h77e-site-header-wrapper .site-header .mobile-menu > summary.btn::after,
  body.page-id-4 .site-header .mobile-menu summary::after,
  body.home .site-header .mobile-menu summary::after {
    content: "☰ Menu" !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    color: #071E4A !important;
    letter-spacing: 0.02em !important;
    text-transform: none !important;
    visibility: visible !important;
  }

  /* ==========================================================================
     POST 4 NATIVE MOBILE HERO FINE-TUNING (NO REBUILD)
     ========================================================================== */
  body.page-id-4.elementor-page .h77-home-v3-content > .elementor-element.h77-home-hero,
  body.page-id-4 .elementor-element.h77-home-hero,
  body.page-id-4 .elementor .h77-home-hero,
  body.home .elementor .h77-home-hero {
    position: relative !important;
    min-height: calc(100vh - 56px) !important;
    min-height: calc(100dvh - 56px) !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    padding: 18px 16px 75px 16px !important;
    background-image: url('https://h77cons.vn/wp-content/uploads/2026/10/hero-mobile-exact-bg.webp?v=1792261000') !important;
    background-size: cover !important;
    background-position: right bottom 90px !important;
    background-repeat: no-repeat !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }
  body.page-id-4 .elementor .h77-home-hero::before,
  body.home .elementor .h77-home-hero::before,
  body.page-id-4 .elementor .h77-home-hero::after,
  body.home .elementor .h77-home-hero::after {
    display: none !important;
  }
  body.page-id-4 .elementor .h77-home-hero .h77-home-hero-layout,
  body.home .elementor .h77-home-hero .h77-home-hero-layout {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: 1fr !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  body.page-id-4 .elementor .h77-home-hero .h77-home-hero-copy,
  body.home .elementor .h77-home-hero .h77-home-hero-copy {
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  body.page-id-4 .elementor .h77-home-hero .h77-home-hero-proof,
  body.home .elementor .h77-home-hero .h77-home-hero-proof {
    display: none !important;
  }

  /* Badge / Kicker */
  body.page-id-4 .elementor .h77-home-hero .h77-home-hero-kicker,
  body.home .elementor .h77-home-hero .h77-home-hero-kicker {
    margin: 0 0 10px 0 !important;
  }
  body.page-id-4 .elementor .h77-home-hero .h77-home-hero-kicker .elementor-heading-title,
  body.home .elementor .h77-home-hero .h77-home-hero-kicker .elementor-heading-title {
    display: inline-block !important;
    background: rgba(255, 255, 255, 0.12) !important;
    border: 1px solid rgba(255, 255, 255, 0.35) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    border-radius: 6px !important;
    padding: 4px 10px !important;
    color: #FFFFFF !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
    line-height: normal !important;
  }

  /* Title H1 */
  body.page-id-4 .elementor .h77-home-hero .h77-home-hero-title,
  body.home .elementor .h77-home-hero .h77-home-hero-title {
    margin: 0 0 10px 0 !important;
  }
  body.page-id-4 .elementor .h77-home-hero .h77-home-hero-title .elementor-heading-title,
  body.page-id-4 .elementor .h77-home-hero .h77-home-hero-title h1,
  body.home .elementor .h77-home-hero .h77-home-hero-title .elementor-heading-title,
  body.home .elementor .h77-home-hero .h77-home-hero-title h1 {
    font-size: 0 !important;
    line-height: 0 !important;
    margin: 0 !important;
  }
  body.page-id-4 .elementor .h77-home-hero .h77-home-hero-title .elementor-heading-title::after,
  body.page-id-4 .elementor .h77-home-hero .h77-home-hero-title h1::after,
  body.home .elementor .h77-home-hero .h77-home-hero-title .elementor-heading-title::after,
  body.home .elementor .h77-home-hero .h77-home-hero-title h1::after {
    content: "Xây nhà rõ chi phí,\A đúng tiến độ,\A kiểm soát chất lượng\A từng giai đoạn" !important;
    white-space: pre-line !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 22px !important;
    font-weight: 800 !important;
    line-height: 1.25 !important;
    letter-spacing: -0.02em !important;
    color: #FFFFFF !important;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.4) !important;
    display: block !important;
  }

  /* Lead text */
  body.page-id-4 .elementor .h77-home-hero .h77-home-hero-lead,
  body.home .elementor .h77-home-hero .h77-home-hero-lead {
    margin: 0 0 14px 0 !important;
    max-width: 90% !important;
  }
  body.page-id-4 .elementor .h77-home-hero .h77-home-hero-lead,
  body.page-id-4 .elementor .h77-home-hero .h77-home-hero-lead p,
  body.home .elementor .h77-home-hero .h77-home-hero-lead,
  body.home .elementor .h77-home-hero .h77-home-hero-lead p {
    color: rgba(255, 255, 255, 0.9) !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 12px !important;
    line-height: 1.5 !important;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.3) !important;
    margin: 0 !important;
  }

  /* 2 Action Buttons */
  body.page-id-4 .elementor .h77-home-hero .h77-home-hero-actions,
  body.home .elementor .h77-home-hero .h77-home-hero-actions {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    margin: 0 0 14px 0 !important;
    width: 100% !important;
  }
  body.page-id-4 .elementor .h77-home-hero .h77-home-hero-actions > .elementor-widget,
  body.home .elementor .h77-home-hero .h77-home-hero-actions > .elementor-widget {
    width: 100% !important;
    margin: 0 !important;
  }
  body.page-id-4 .h77-home-hero-button:not(.h77-home-hero-button-secondary) .elementor-button,
  body.home .h77-home-hero-button:not(.h77-home-hero-button-secondary) .elementor-button {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    height: 44px !important;
    padding: 0 16px !important;
    background: #0066FF !important;
    color: #FFFFFF !important;
    border: none !important;
    border-radius: 8px !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: 0.02em !important;
    text-transform: uppercase !important;
    box-shadow: 0 4px 14px rgba(0, 102, 255, 0.35) !important;
    box-sizing: border-box !important;
  }
  body.page-id-4 .h77-home-hero-button:not(.h77-home-hero-button-secondary) .elementor-button .elementor-button-content-wrapper,
  body.home .h77-home-hero-button:not(.h77-home-hero-button-secondary) .elementor-button .elementor-button-content-wrapper {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
  }
  body.page-id-4 .h77-home-hero-button:not(.h77-home-hero-button-secondary) .elementor-button .elementor-button-content-wrapper::after,
  body.home .h77-home-hero-button:not(.h77-home-hero-button-secondary) .elementor-button .elementor-button-content-wrapper::after {
    content: "→" !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    margin-left: auto !important;
  }

  body.page-id-4 .h77-home-hero-button-secondary .elementor-button,
  body.home .h77-home-hero-button-secondary .elementor-button {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    height: 44px !important;
    padding: 0 16px !important;
    background: rgba(14, 34, 68, 0.6) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(255, 255, 255, 0.4) !important;
    color: #FFFFFF !important;
    border-radius: 8px !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: 0.02em !important;
    text-transform: uppercase !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2) !important;
    box-sizing: border-box !important;
  }
  body.page-id-4 .h77-home-hero-button-secondary .elementor-button .elementor-button-content-wrapper,
  body.home .h77-home-hero-button-secondary .elementor-button .elementor-button-content-wrapper {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
  }
  body.page-id-4 .h77-home-hero-button-secondary .elementor-button .elementor-button-content-wrapper::after,
  body.home .h77-home-hero-button-secondary .elementor-button .elementor-button-content-wrapper::after {
    content: "→" !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    margin-left: auto !important;
  }

  /* 3 Trust Chips in ~63% Width */
  body.page-id-4 .elementor .h77-home-hero .h77-home-hero-assurance,
  body.home .elementor .h77-home-hero .h77-home-hero-assurance {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 5px !important;
    margin: 0 !important;
    width: 63% !important;
    max-width: 63% !important;
  }
  body.page-id-4 .elementor .h77-home-hero .h77-home-hero-assurance > .elementor-widget,
  body.home .elementor .h77-home-hero .h77-home-hero-assurance > .elementor-widget {
    width: 100% !important;
    margin: 0 !important;
  }
  body.page-id-4 .h77-home-hero-chip,
  body.home .h77-home-hero-chip {
    background: rgba(14, 38, 77, 0.65) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(255, 255, 255, 0.20) !important;
    border-radius: 8px !important;
    padding: 8px 2px !important;
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
  }
  body.page-id-4 .h77-home-hero-chip::before,
  body.home .h77-home-hero-chip::before {
    content: "" !important;
    display: block !important;
    width: 18px !important;
    height: 18px !important;
    margin: 0 auto 4px !important;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 2L4 5V11C4 16.5 7.5 21.3 12 22.5C16.5 21.3 20 16.5 20 11V5L12 2Z' fill='%2338BDF8'/%3E%3Cpath d='M9 12L11 14L15 10' stroke='%23FFFFFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
  }
  body.page-id-4 .h77-home-hero-chip .elementor-heading-title,
  body.home .h77-home-hero-chip .elementor-heading-title {
    font-size: 0 !important;
    line-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    background: none !important;
  }
  body.page-id-4 .elementor-element-742b7685 .elementor-heading-title::after,
  body.home .elementor-element-742b7685 .elementor-heading-title::after,
  body.page-id-4 .h77-home-hero-assurance > div:nth-child(1) .elementor-heading-title::after,
  body.home .h77-home-hero-assurance > div:nth-child(1) .elementor-heading-title::after {
    content: "Báo giá\A tách hạng mục" !important;
    white-space: pre-line !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 9.5px !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
    color: #FFFFFF !important;
    display: block !important;
  }
  body.page-id-4 .elementor-element-61768804 .elementor-heading-title::after,
  body.home .elementor-element-61768804 .elementor-heading-title::after,
  body.page-id-4 .h77-home-hero-assurance > div:nth-child(2) .elementor-heading-title::after,
  body.home .h77-home-hero-assurance > div:nth-child(2) .elementor-heading-title::after {
    content: "Nghiệm thu\A theo mốc" !important;
    white-space: pre-line !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 9.5px !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
    color: #FFFFFF !important;
    display: block !important;
  }
  body.page-id-4 .elementor-element-ac14e105 .elementor-heading-title::after,
  body.home .elementor-element-ac14e105 .elementor-heading-title::after,
  body.page-id-4 .h77-home-hero-assurance > div:nth-child(3) .elementor-heading-title::after,
  body.home .h77-home-hero-assurance > div:nth-child(3) .elementor-heading-title::after {
    content: "Bảo hành\A rõ phạm vi" !important;
    white-space: pre-line !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 9.5px !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
    color: #FFFFFF !important;
    display: block !important;
  }

  /* --- STICKY BAR ON POST 4 MOBILE --- */
  body.page-id-4 .bottom-cta,
  body.home .bottom-cta {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 99999 !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr 1.25fr !important;
    gap: 8px !important;
    padding: 8px 12px max(8px, env(safe-area-inset-bottom)) !important;
    background: #FFFFFF !important;
    border-top: 1px solid #E2E8F0 !important;
    border-radius: 16px 16px 0 0 !important;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.1) !important;
    box-sizing: border-box !important;
  }
  body.page-id-4 .bottom-cta a,
  body.home .bottom-cta a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    height: 42px !important;
    border-radius: 8px !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
  }
  /* Call */
  body.page-id-4 .bottom-cta a:nth-child(1),
  body.home .bottom-cta a:nth-child(1) {
    background: #071E4A !important;
    color: #FFFFFF !important;
  }
  body.page-id-4 .bottom-cta a:nth-child(1)::before,
  body.home .bottom-cta a:nth-child(1)::before {
    content: "" !important;
    display: inline-block !important;
    width: 16px !important;
    height: 16px !important;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z' stroke='%23FFFFFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
  }
  /* Zalo */
  body.page-id-4 .bottom-cta a:nth-child(2),
  body.home .bottom-cta a:nth-child(2) {
    background: #0068FF !important;
    color: #FFFFFF !important;
  }
  body.page-id-4 .bottom-cta a:nth-child(2)::before,
  body.home .bottom-cta a:nth-child(2)::before {
    content: "" !important;
    display: inline-block !important;
    width: 18px !important;
    height: 18px !important;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 48 48' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 23.5C10 16.0442 16.0442 10 23.5 10C30.9558 10 37 16.0442 37 23.5C37 30.9558 30.9558 37 23.5 37C21.1344 37 18.9038 36.3888 16.9665 35.3129L10 37L11.8398 30.4147C10.6698 28.3615 10 25.9996 10 23.5Z' fill='white'/%3E%3Ctext x='24' y='27' font-family='Arial, sans-serif' font-size='11' font-weight='bold' fill='%230068FF' text-anchor='middle'%3EZalo%3C/text%3E%3C/svg%3E") !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
  }
  /* Quote */
  body.page-id-4 .bottom-cta a:nth-child(3),
  body.home .bottom-cta a:nth-child(3) {
    background: #FFFFFF !important;
    border: 1.5px solid #CBD5E1 !important;
    color: #072B61 !important;
  }
  body.page-id-4 .bottom-cta a:nth-child(3)::before,
  body.home .bottom-cta a:nth-child(3)::before {
    content: "" !important;
    display: inline-block !important;
    width: 16px !important;
    height: 16px !important;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z' stroke='%23072B61' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpolyline points='14 2 14 8 20 8' stroke='%23072B61' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cline x1='16' y1='13' x2='8' y2='13' stroke='%23072B61' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cline x1='16' y1='17' x2='8' y2='17' stroke='%23072B61' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cline x1='10' y1='9' x2='8' y2='9' stroke='%23072B61' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
  }
  body.page-id-4 .floating-contact,
  body.home .floating-contact {
    display: none !important;
  }
}