/* E30 — Mobile horizontal scroll for dot-driven sections */
@media (max-width: 767px) {
  .showcase-tabs,
  .showcase-subtabs,
  .service-showcase-tabs,
  .project-switch-row,
  .service-switch-row,
  .trust-nums,
  .why-tabs,
  .tdn-why-grid,
  .testimonial-authors-list,
  .townhouse-filters,
  .section-switcher-tabs,
  .section-switcher-levels,
  .tdn-gallery-grid > .row,
  .tdn-training-grid > .row {
    display: flex !important;
    flex-wrap: nowrap !important;
    flex-direction: row !important;
    justify-content: flex-start;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    gap: 8px;
    padding-bottom: 4px;
    will-change: transform;
    overscroll-behavior-x: contain;
  }

  .showcase-tabs::-webkit-scrollbar,
  .showcase-subtabs::-webkit-scrollbar,
  .service-showcase-tabs::-webkit-scrollbar,
  .project-switch-row::-webkit-scrollbar,
  .service-switch-row::-webkit-scrollbar,
  .trust-nums::-webkit-scrollbar,
  .why-tabs::-webkit-scrollbar,
  .tdn-why-grid::-webkit-scrollbar,
  .testimonial-authors-list::-webkit-scrollbar,
  .townhouse-filters::-webkit-scrollbar,
  .section-switcher-tabs::-webkit-scrollbar,
  .section-switcher-levels::-webkit-scrollbar,
  .tdn-gallery-grid > .row::-webkit-scrollbar,
  .tdn-training-grid > .row::-webkit-scrollbar {
    display: none;
  }

  .showcase-tab,
  .showcase-subtab,
  .service-showcase-tab,
  .project-switch,
  .service-switch,
  .trust-num,
  .why-tab,
  .tdn-why-grid > [class*="col-"],
  .author-btn,
  .townhouse-filter,
  .section-switcher-tab,
  .section-switcher-level,
  .tdn-gallery-grid > .row > [class*="col-"],
  .tdn-training-grid > .row > [class*="col-"] {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  .trust-num {
    flex: 0 0 auto;
  }

  .why-tabs {
    gap: 12px;
    padding-bottom: 8px;
    will-change: transform;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity !important;
  }

  .why-tab {
    flex: 0 0 78vw;
    max-width: 300px;
    scroll-snap-align: start;
    white-space: normal;
  }

  .tdn-why-grid {
    gap: 12px;
    padding-bottom: 8px;
    margin-left: 0;
    margin-right: 0;
    will-change: transform;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity !important;
  }

  .tdn-why-grid > [class*="col-"] {
    flex: 0 0 78vw;
    width: 78vw;
    max-width: 300px;
    white-space: normal;
    scroll-snap-align: start;
  }

  .testimonial-authors-list {
    gap: 10px;
    padding-bottom: 8px;
    will-change: transform;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity !important;
  }

  .author-btn {
    flex: 0 0 78vw;
    max-width: 300px;
    scroll-snap-align: start;
    white-space: normal;
  }

  .tdn-gallery-grid > .row,
  .tdn-training-grid > .row {
    gap: 12px;
    padding-bottom: 12px;
    margin-left: 0;
    margin-right: 0;
    will-change: transform;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity !important;
  }

  .tdn-gallery-grid > .row > [class*="col-"],
  .tdn-training-grid > .row > [class*="col-"] {
    flex: 0 0 78vw;
    width: 78vw;
    max-width: 300px;
    white-space: normal;
    scroll-snap-align: start;
  }

  .factory-track-viewport,
  .project-track-viewport,
  .showcase-track-viewport,
  .service-track-viewport,
  .workflow-track-viewport,
  .tdn-testimonial-track,
  .tdn-video-track,
  .sc_daingo-pics .sc_slide,
  .sc_tdung-sbsme-videos .sc_slide,
  .tuyen-dung-activities-grid {
    overflow-x: auto !important;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity !important;
    scrollbar-width: none;
    -ms-overflow-style: none;
    will-change: transform;
    overscroll-behavior-x: contain;
  }

  .factory-track-viewport::-webkit-scrollbar,
  .project-track-viewport::-webkit-scrollbar,
  .showcase-track-viewport::-webkit-scrollbar,
  .service-track-viewport::-webkit-scrollbar,
  .workflow-track-viewport::-webkit-scrollbar,
  .tdn-testimonial-track::-webkit-scrollbar,
  .tdn-video-track::-webkit-scrollbar,
  .sc_daingo-pics .sc_slide::-webkit-scrollbar,
  .sc_tdung-sbsme-videos .sc_slide::-webkit-scrollbar,
  .tuyen-dung-activities-grid::-webkit-scrollbar {
    display: none;
  }

  .factory-track,
  .project-track,
  .showcase-track,
  .service-track,
  .workflow-track {
    display: flex !important;
    flex-wrap: nowrap !important;
    transform: none !important;
    transition: none !important;
    width: max-content !important;
    will-change: transform !important;
  }

  .factory-card,
  .project-card,
  .showcase-card,
  .service-card,
  .workflow-card,
  .testimonial-card,
  .tdn-testimonial-card,
  .tdn-video-card,
  .sc_daingo-pics .sc_slide .item,
  .sc_tdung-sbsme-videos .sc_slide .item,
  .tuyen-dung-activity-card {
    flex: 0 0 78vw !important;
    max-width: 300px !important;
    scroll-snap-align: start !important;
  }

  .service-grid-5,
  .workflow-grid {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity !important;
    scrollbar-width: none;
    -ms-overflow-style: none;
    gap: 12px;
    padding-bottom: 12px;
    align-items: stretch;
    will-change: transform;
    overscroll-behavior-x: contain;
  }

  .service-grid-5::-webkit-scrollbar,
  .workflow-grid::-webkit-scrollbar {
    display: none;
  }

  .workflow-step,
  .service-tile {
    flex: 0 0 78vw;
    max-width: 300px;
    scroll-snap-align: start;
  }

  .workflow-arrow {
    flex: 0 0 auto;
    align-self: center;
  }

  .factory-dots,
  .project-dots,
  .workflow-dots {
    display: none;
  }

  @media (hover: none) and (pointer: coarse) {
    .factory-card,
    .project-card,
    .showcase-card,
    .service-card,
    .workflow-card,
    .tdn-testimonial-card,
    .tdn-video-card,
    .sc_daingo-pics .sc_slide .item,
    .sc_tdung-sbsme-videos .sc_slide .item,
    .tuyen-dung-activity-card,
    .tuyen-dung-training-card,
    .tdn-why-item,
    .why-tab,
    .author-btn,
    .townhouse-filter,
    .section-switcher-tab,
    .section-switcher-level,
    .service-tile,
    .workflow-step {
      transition: none !important;
      transform: none !important;
    }
    .factory-card img,
    .project-card img,
    .showcase-card img,
    .service-card img,
    .workflow-card img,
    .tdn-testimonial-card img,
    .tdn-video-card img,
    .sc_daingo-pics .sc_slide .item img,
    .sc_tdung-sbsme-videos .sc_slide .item img,
    .tuyen-dung-activity-card img,
    .tuyen-dung-training-card img {
      transition: none !important;
      transform: none !important;
    }
    .showcase-card::before,
    .service-card::before {
      transition: none !important;
    }
  }

  /* ==========================================================================
     GLOBAL MOBILE LAYOUT & SPACING POLISH (International Standards)
     ========================================================================== */

  /* Section Padding & Spacing */
  section, 
  .full-width-section,
  .services-intro,
  .services-grid-section,
  .team-section,
  .core,
  .featured-custom,
  .testimonials-section,
  .partners-custom,
  .contact-band {
    padding-top: 48px !important;
    padding-bottom: 48px !important;
    scroll-margin-top: 88px !important;
  }

  /* Headings & Typography Hierarchy */
  h1 {
    font-size: 28px !important;
    line-height: 1.2 !important;
  }
  h2, 
  .section-title,
  .org-title {
    font-size: 24px !important;
    line-height: 1.25 !important;
    margin-bottom: 16px !important;
    padding: 0 !important;
  }
  h3 {
    font-size: 14px !important;
    line-height: 1.3 !important;
  }
  p, 
  .section-subtitle,
  .services-intro .section-sub {
    font-size: 13px !important;
    line-height: 1.6 !important;
    margin-top: 0 !important;
    margin-bottom: 16px !important;
  }

  /* Stats Bar 4-in-a-row Layout */
  .stats-bar-custom {
    padding: 16px 0 !important;
    min-height: auto !important;
  }
  .stats-bar-custom .container {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: space-between !important;
    gap: 4px !important;
    overflow-x: visible !important;
    padding: 0 8px !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  .stats-bar-custom .stat-col {
    flex: 1 1 25% !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    padding: 4px 2px !important;
    gap: 4px !important;
    min-width: 0 !important;
    border-right: none !important;
  }
  .stats-bar-custom .stat-num {
    font-size: 20px !important;
    line-height: 1.1 !important;
  }
  .stats-bar-custom .stat-text {
    font-size: 7.5px !important;
    line-height: 1.2 !important;
    text-align: center !important;
    max-width: 100% !important;
    letter-spacing: 0px !important;
    white-space: normal !important;
  }

  /* Staff / Office Team Slider Snapping & Scroll */
  .staff-slider-container {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x proximity !important;
    -webkit-overflow-scrolling: touch;
    will-change: transform;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding: 50px 0 16px !important;
    margin-top: 0 !important;
  }
  .staff-slider-container::-webkit-scrollbar {
    display: none !important;
  }
  .staff-slider-track {
    display: flex !important;
    flex-wrap: nowrap !important;
    transform: none !important;
    transition: none !important;
    width: max-content;
    gap: 12px !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  .staff-card-custom {
    flex: 0 0 78vw !important;
    max-width: 280px !important;
    scroll-snap-align: start !important;
    margin-bottom: 0 !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) !important;
  }

  /* Tab Filters & Switcher Spacing and Overflow affordance */
  .showcase-tabs,
  .showcase-subtabs,
  .service-showcase-tabs,
  .project-switch-row,
  .service-switch-row,
  .why-tabs,
  .testimonial-authors-list,
  .townhouse-filters,
  .section-switcher-tabs,
  .section-switcher-levels {
    margin-bottom: 24px !important;
    padding-left: 16px !important;
    padding-right: 48px !important; /* Visual cue for scrolling overflow */
    gap: 10px !important;
  }

  /* Card Padding & Spacing */
  .testimonial-card,
  .tdn-testimonial-card,
  .factory-card,
  .project-card,
  .showcase-card,
  .service-card,
  .workflow-card,
  .tuyen-dung-activity-card {
    padding: 20px !important;
    border-radius: 12px !important;
  }

  /* Homepage Hero Video Parity Optimization */
  section.hero-panel {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    height: 56.25vw !important;
    min-height: 211px !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }
  section.hero-panel .hero-video-wrap {
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  section.hero-panel .hero-youtube {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    width: 100% !important;
    height: 100% !important;
    transform: translate(-50%, -50%) !important;
  }

  /* Center Homepage Services Cards */
  .services-luxury .service-card {
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* ============================================================
     Projects Slider — same swipe UX as Staff Slider
     makeInfiniteSlider already handles pointer events; these
     CSS rules make the container clipping and card sizing match
     the smooth-drag experience anh prefers on the staff slider.
     ============================================================ */
  .projects-slider-wrap {
    overflow: hidden !important;        /* clip cards outside view — required for smooth drag */
    width: 100% !important;
    max-width: 100% !important;
    touch-action: pan-y !important;     /* allow vertical scroll, hand off horizontal to JS */
    user-select: none !important;
    -webkit-user-select: none !important;
  }
  .projects-slider-track {
    cursor: grab !important;
    will-change: transform !important;
    transition: transform 450ms cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
  }
  .projects-slider-track:active,
  .projects-slider-wrap.is-dragging .projects-slider-track {
    cursor: grabbing !important;
    transition: none !important;        /* instant follow during drag */
  }
  /* Card sizing: show 1 full card + peek of next — mirrors staff slider 72% */
  .project-card-custom {
    flex: 0 0 calc(78% - 12px) !important;
    max-width: 320px !important;
    touch-action: pan-y !important;
  }
  /* Disable hover scale on touch — prevents flicker during swipe */
  @media (hover: none) and (pointer: coarse) {
    .project-card-custom:hover img {
      transform: none !important;
    }
    .project-card-custom img {
      transition: none !important;
    }
  }

  /* Featured Projects Filters Scale Down */
  .project-filters button {
    min-width: 90px !important;
    height: 28px !important;
    padding: 0 10px !important;
    font-size: 11px !important;
    line-height: 28px !important;
  }

  /* Testimonial Bubble Overflow, Title Centering and Padding Polish */
  .testimonials-left-side {
    min-height: auto !important;
    height: auto !important;
    text-align: center !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    padding-top: 0 !important;
    margin-bottom: 8px !important;
  }
  .testimonials-title-wrap {
    text-align: center !important;
    width: 100% !important;
    margin: 0 auto !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
  }
  .testimonials-title-wrap h2,
  .testimonials-left-side .testimonials-title-wrap h2 {
    text-align: center !important;
    width: 100% !important;
    margin: 0 auto 12px auto !important;
    line-height: 1.25 !important;
  }
  .testimonials-custom-row {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  .testimonial-right-side {
    width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }
  .testimonial-bubble {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    padding: 20px 16px !important;
    margin: 0 !important;
    overflow: hidden !important;
  }

  /* Compact Sticky Header & Mobile Drawer top offset */
  /* Logo left — hamburger right */
  .topbar {
    height: 70px !important;
    grid-template-columns: auto 1fr auto !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    gap: 0 !important;
    align-items: center !important;
  }
  .topbar .logo {
    order: 1 !important;
    justify-self: start !important;
  }
  .topbar .search-toggle {
    display: none !important;
  }
  .topbar .hamburger {
    order: 3 !important;
    justify-self: end !important;
    margin-left: auto !important;
  }
  .logo-box {
    width: 90px !important;
    height: 60px !important;
    font-size: 20px !important;
  }

  /* Fix sticky header offset on inner pages — match exact mobile header height (70px) to prevent 18px gap */
  body:not(.home) {
    padding-top: 70px !important;
  }
  body:not(.home) main > .full-width-section:first-child,
  body:not(.home) main > section:first-child {
    margin-top: 0 !important;
  }
  /* Also reduce scroll-margin-top for header-anchored sections */
  section,
  .full-width-section {
    scroll-margin-top: 70px !important;
  }
  .mobile-drawer {
    inset: 70px 0 0 auto !important;
    max-height: calc(100vh - 70px) !important;
  }
}


/* ============================================================
   DESIGNERO SAFE APPROVED UI OVERRIDES (APPEND ONLY)
   ============================================================ */

/* 1. Showcase Card Flex Column Layout (Title Below Image) */
html body .showcase-hero .showcase-card,
html body .showcase-card,
body .showcase-card,
.showcase-card {
  display: flex !important;
  flex-direction: column !important;
  position: relative !important;
  padding: 0 !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  background: var(--dsg-card-bg, #11120D) !important;
  border: 1px solid var(--dsg-line, rgba(216,207,188,0.32)) !important;
  box-shadow: 0 12px 24px rgba(0,0,0,0.45) !important;
  box-sizing: border-box !important;
}

html body .showcase-card .designero-project-card-link,
body .showcase-card .designero-project-card-link,
.showcase-card .designero-project-card-link {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  height: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  text-decoration: none !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

html body .showcase-card img,
body .showcase-card img,
.showcase-card img {
  width: 100% !important;
  height: calc(100% - 46px) !important;
  flex: 1 1 auto !important;
  object-fit: cover !important;
  display: block !important;
  pointer-events: none !important;
  user-select: none !important;
  -webkit-user-drag: none !important;
}

html body .showcase-card::after,
body .showcase-card::after,
.showcase-card::after,
html body .showcase-card a::after,
body .showcase-card a::after,
.showcase-card a::after {
  display: none !important;
  content: none !important;
}

html body .showcase-card-title,
body .showcase-card-title,
.showcase-card-title {
  position: relative !important;
  inset: auto !important;
  top: auto !important;
  bottom: auto !important;
  left: auto !important;
  right: auto !important;
  z-index: 3 !important;
  width: 100% !important;
  height: 46px !important;
  min-height: 46px !important;
  flex: 0 0 46px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 4px 12px !important;
  margin: 0 !important;
  background: var(--dsg-card-bg, #11120D) !important;
  color: var(--dsg-text-on-dark, #FFFBF4) !important;
  font-family: "UTM Avo", "Cal Sans", sans-serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  text-align: center !important;
  text-transform: uppercase !important;
  box-sizing: border-box !important;
  word-break: break-word !important;
  text-shadow: none !important;
  border-top: 1px solid rgba(216, 207, 188, 0.2) !important;
}



/* 3. Service Card High Intensity Outer Glow & Layout */
html body .service-hero .service-track-viewport,
html body .service-track-viewport,
body .service-track-viewport,
.service-track-viewport {
  padding: 24px 10px 36px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
}

html body .service-hero .service-card,
html body .service-card,
body .service-card,
.service-card {
  position: relative !important;
  display: block !important;
  border-radius: 20px !important;
  overflow: hidden !important;
  padding: 0 !important;
  border: 1.5px solid rgba(175, 220, 235, 0.65) !important;
  box-shadow: 0 0 12px rgba(130, 200, 225, 0.55), 0 0 32px rgba(100, 180, 210, 0.45), 0 0 55px rgba(70, 150, 180, 0.35), 0 16px 36px rgba(0, 0, 0, 0.75) !important;
  background: #11120D !important;
  box-sizing: border-box !important;
}

html body .service-card img,
body .service-card img,
.service-card img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  z-index: 1 !important;
  pointer-events: none !important;
  user-select: none !important;
  -webkit-user-drag: none !important;
}

html body .service-card::after,
body .service-card::after,
.service-card::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 2 !important;
  pointer-events: none !important;
  background: linear-gradient(180deg, rgba(17, 18, 13, 0.45) 0%, rgba(17, 18, 13, 0.88) 100%) !important;
}

html body .service-card .service-icon,
body .service-card .service-icon,
.service-card .service-icon {
  position: absolute !important;
  top: 18px !important;
  left: 18px !important;
  z-index: 3 !important;
  font-size: 38px !important;
  color: #ffffff !important;
  line-height: 1 !important;
  background: transparent !important;
}

html body .service-card .service-icon i,
body .service-card .service-icon i,
.service-card .service-icon i {
  font-size: 38px !important;
  color: #ffffff !important;
}

html body .service-card .service-icon-label,
body .service-card .service-icon-label,
.service-card .service-icon-label {
  position: absolute !important;
  top: 66px !important;
  left: 18px !important;
  right: 18px !important;
  max-width: calc(100% - 36px) !important;
  z-index: 3 !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  text-transform: uppercase !important;
  color: #ffffff !important;
  letter-spacing: 0.5px !important;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.85) !important;
}

html body .service-card .service-copy,
body .service-card .service-copy,
.service-card .service-copy {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  padding: 0 18px 18px 18px !important;
  z-index: 3 !important;
  background: transparent !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

html body .service-card .service-copy-row,
body .service-card .service-copy-row,
.service-card .service-copy-row {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-end !important;
  justify-content: space-between !important;
  gap: 12px !important;
  width: 100% !important;
}

html body .service-card .service-copy-text,
body .service-card .service-copy-text,
.service-card .service-copy-text {
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

html body .service-card .service-copy-text h3,
body .service-card .service-copy-text h3,
.service-card .service-copy-text h3 {
  display: none !important;
}

html body .service-card .service-copy-text p,
body .service-card .service-copy-text p,
.service-card .service-copy-text p {
  font-size: 12px !important;
  line-height: 1.38 !important;
  color: #ffffff !important;
  margin: 0 !important;
  font-weight: 400 !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85) !important;
}

html body .service-card a.service-more,
body .service-card a.service-more,
.service-card a.service-more {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto !important;
  padding: 8px 16px !important;
  background-color: #d8cfbc !important;
  color: #11120D !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  border-radius: 6px !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  align-self: flex-end !important;
  margin: 0 !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3) !important;
  line-height: 1.2 !important;
  transition: all 0.25s ease !important;
}

html body .service-card a.service-more:hover,
body .service-card a.service-more:hover,
.service-card a.service-more:hover {
  background-color: #FFFBF4 !important;
  color: #11120D !important;
}

/* Decor Pages ONLY — Orange Service More Button */
html body.designero-page--dich-vu-designero-decor .service-card a.service-more,
html body.page-id-290 .service-card a.service-more,
html body.term-decor .service-card a.service-more,
html body.tax-du_an_loai.term-decor .service-card a.service-more,
html body .decor-page .service-card a.service-more {
  background-color: #D45937 !important;
  color: #ffffff !important;
}

/* 4. Registration Form Side Outer Orange & Inner Solid Black Box (DECOR ONLY) */
html body .decor-contact-band .contact-form-side,
html body .designero-form-variant-decor .contact-form-side,
html body.designero-page--bang-gia-thiet-ke-decor .contact-form-side,
html body.designero-page--dich-vu-designero-decor .contact-form-side,
html body.term-decor .contact-form-side,
html body.tax-du_an_loai.term-decor .contact-form-side,
html body .decor-page .contact-form-side {
  background: #D45937 !important;
  background-color: #D45937 !important;
  padding: 16px !important;
  border-radius: 16px !important;
  border: none !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35) !important;
}

html body .decor-contact-band .contact-form-side::before,
html body .decor-contact-band .contact-form-side::after,
html body .designero-form-variant-decor .contact-form-side::before,
html body .designero-form-variant-decor .contact-form-side::after,
html body.designero-page--dich-vu-designero-decor .contact-form-side::before,
html body.designero-page--dich-vu-designero-decor .contact-form-side::after {
  display: none !important;
  content: none !important;
}

html body .decor-contact-band .contact-form-side .quote-form,
html body .designero-form-variant-decor .contact-form-side .quote-form,
html body.designero-page--bang-gia-thiet-ke-decor .contact-form-side .quote-form,
html body.designero-page--dich-vu-designero-decor .contact-form-side .quote-form,
html body.term-decor .contact-form-side .quote-form {
  background: #000000 !important;
  background-color: #000000 !important;
  border-radius: 12px !important;
  padding: 24px 28px !important;
  border: none !important;
  box-shadow: none !important;
}

html body .decor-contact-band .contact-form-side h3,
html body .decor-contact-band .contact-form-side .form-section-title,
html body .decor-contact-band .contact-form-side .quote-col-contact h3,
html body .decor-contact-band .contact-form-side .quote-col-need h3,
html body .designero-form-variant-decor .contact-form-side h3,
html body.designero-page--bang-gia-thiet-ke-decor .contact-form-side h3,
html body.designero-page--dich-vu-designero-decor .contact-form-side h3,
html body.term-decor .contact-form-side h3 {
  color: #D45937 !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  margin: 0 0 12px !important;
  letter-spacing: 0.04em !important;
}

html body .decor-contact-band .contact-form-side button[type="submit"],
html body .decor-contact-band .contact-form-side .quote-submit-btn,
html body .designero-form-variant-decor .contact-form-side button[type="submit"],
html body.designero-page--bang-gia-thiet-ke-decor .contact-form-side button[type="submit"],
html body.designero-page--dich-vu-designero-decor .contact-form-side button[type="submit"],
html body.term-decor .contact-form-side button[type="submit"] {
  background: #D45937 !important;
  color: #FFFFFF !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  border-radius: 8px !important;
  padding: 14px 28px !important;
  border: none !important;
  cursor: pointer !important;
}


/* Global Dynamic Width & Padding Fix for ALL Tabs, Filters & Menu Buttons */
.showcase-tab,
.showcase-subtab,
.decor-showcase-tab,
.decor-showcase-subtab,
.service-showcase-tab,
.project-switch,
.service-switch,
.project-filters button,
.figma-filters button,
.townhouse-filter,
.section-switcher-tab,
.section-switcher-level,
.price-tab,
.price-decor-tab,
.price-rough-tab,
.why-tab,
.tdn-subnav-tab,
.author-btn,
.nav-tab,
.filter-btn,
.project-filter-btn,
#showcase .showcase-tab,
#showcase .showcase-subtab,
#showcase .service-showcase-tab {
  width: auto !important;
  min-width: 80px !important;
  max-width: 100% !important;
  flex: 0 0 auto !important;
  padding-left: 14px !important;
  padding-right: 14px !important;
  box-sizing: border-box !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* -------------------------------------------------------------
 * 1. Pagination Dots Centering (Vertical & Horizontal centering for numbers inside dots on mobile)
 * ------------------------------------------------------------- */
html body .showcase-dots .showcase-dot,
html body .showcase-dots .dot,
html body .showcase-dot,
html body .slider-dots .dot,
html body .testimonial-dots .dot,
html body .workshop-dots .dot,
html body .project-dots .dot,
html body .dot {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  padding: 0 !important;
  text-align: center !important;
}

/* -------------------------------------------------------------
 * 2. Registration Form Variant Color Scheme Scoping:
 * - Decor pages: Outer Solid Orange (#D45937), Inner Solid Black (#000000)
 * - Standard / Homepage pages: Outer Dark Beige (#d8cfbc / #11120D), Inner Dark Olive Card (#565449)
 * ------------------------------------------------------------- */

/* Decor Form Variant */
html body .decor-contact-band .contact-form-side,
html body .designero-form-variant-decor .contact-form-side,
html body.designero-page--bang-gia-thiet-ke-decor .contact-form-side,
html body .decor-page .contact-form-side {
  background: #D45937 !important;
  background-color: #D45937 !important;
  padding: 16px !important;
  border-radius: 16px !important;
  border: none !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35) !important;
}

html body .decor-contact-band .contact-form-side .quote-form,
html body .designero-form-variant-decor .contact-form-side .quote-form,
html body.designero-page--bang-gia-thiet-ke-decor .contact-form-side .quote-form,
html body .decor-page .contact-form-side .quote-form {
  background: #000000 !important;
  background-color: #000000 !important;
  border-radius: 12px !important;
  padding: 24px 28px !important;
  border: none !important;
  box-shadow: none !important;
}

html body .decor-contact-band .contact-form-side h3,
html body .decor-contact-band .contact-form-side .form-section-title,
html body .designero-form-variant-decor .contact-form-side h3,
html body.designero-page--bang-gia-thiet-ke-decor .contact-form-side h3 {
  color: #D45937 !important;
}

/* Standard / Homepage Form Variant (Default for non-decor pages including /bang-gia-thiet-ke-kien-truc/ and Homepage) */
html body .contact-band:not(.decor-contact-band) .contact-form-side,
html body .designero-form-variant-home .contact-form-side,
html body:not(.designero-page--bang-gia-thiet-ke-decor) .contact-form-side {
  background: var(--dsg-form-outer-bg, #d8cfbc) !important;
  background-color: var(--dsg-form-outer-bg, #d8cfbc) !important;
  border: 2px solid rgba(216, 207, 188, 0.58) !important;
  border-radius: 16px !important;
  padding: 16px !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25) !important;
}

html body .contact-band:not(.decor-contact-band) .contact-form-side .quote-form,
html body .designero-form-variant-home .contact-form-side .quote-form,
html body:not(.designero-page--bang-gia-thiet-ke-decor) .contact-form-side .quote-form {
  background: var(--dsg-form-inner-bg, #565449) !important;
  background-color: var(--dsg-form-inner-bg, #565449) !important;
  border-radius: 12px !important;
  padding: 24px 28px !important;
  border: none !important;
  box-shadow: none !important;
}

html body .contact-band:not(.decor-contact-band) .contact-form-side h3,
html body .contact-band:not(.decor-contact-band) .contact-form-side .form-section-title,
html body .contact-band:not(.decor-contact-band) .contact-form-side .quote-col-contact h3,
html body .contact-band:not(.decor-contact-band) .contact-form-side .quote-col-need h3,
html body .designero-form-variant-home .contact-form-side h3,
html body:not(.designero-page--bang-gia-thiet-ke-decor) .contact-form-side h3 {
  color: var(--dsg-form-heading, var(--bone, #FFFBF4)) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  margin: 0 0 12px !important;
  letter-spacing: 0.04em !important;
}



/* ==========================================================================
 * ARCHITECTURE (KIẾN TRÚC) & HOMEPAGE MILK-GREY PALETTE STANDARDS
 * - NO ORANGE (#D45937) ON ARCHITECTURE / HOMEPAGE / STANDARD UI
 * - Orange (#D45937) is strictly reserved for DECOR pages (.decor-page, etc.)
 * ========================================================================== */

/* -------------------------------------------------------------
 * A. Pagination Dots (Kiến trúc & Standard: Milk-Grey Bone #d8cfbc / #565449)
 * ------------------------------------------------------------- */
html body .showcase-dots .showcase-dot,
html body .showcase-dots .dot,
html body .showcase-dot,
html body .slider-dots .dot,
html body .testimonial-dots .dot,
html body .workshop-dots .dot,
html body .project-dots .dot,
html body .dot {
  width: 26px !important;
  height: 26px !important;
  min-width: 26px !important;
  min-height: 26px !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  padding: 0 !important;
  margin: 0 4px !important;
  box-sizing: border-box !important;
  text-align: center !important;
  background: #565449 !important;
  color: #FFFBF4 !important;
  border: 1.5px solid rgba(216, 207, 188, 0.4) !important;
}

/* Inactive dot text & border */
html body .showcase-dots .showcase-dot:not(.active),
html body .showcase-dots .dot:not(.active),
html body .showcase-dot:not(.active),
html body .dot:not(.active) {
  background: #565449 !important;
  color: #FFFBF4 !important;
  border-color: rgba(216, 207, 188, 0.4) !important;
}

/* Active Dot (Milk-Grey Bone #d8cfbc / #FFFBF4) */
html body .showcase-dots .showcase-dot.active,
html body .showcase-dots .dot.active,
html body .showcase-dot.active,
html body .slider-dots .dot.active,
html body .testimonial-dots .dot.active,
html body .workshop-dots .dot.active,
html body .project-dots .dot.active,
html body .dot.active,
html body [data-showcase-dots="biet-thu"] .showcase-dot.active,
html body [data-showcase-dots="biet-thu"] .dot.active,
html body .showcase-dots[data-showcase-dots="biet-thu"] .showcase-dot.active,
html body .showcase-dots[data-showcase-dots="biet-thu"] .showcase-dot:last-child {
  background: #d8cfbc !important;
  background-color: #d8cfbc !important;
  color: #11120D !important;
  border-color: #FFFBF4 !important;
  box-shadow: 0 0 8px rgba(216, 207, 188, 0.5) !important;
}

/* Decor Active Dots ONLY (Solid Orange #D45937) */
html body.designero-page--bang-gia-thiet-ke-decor .showcase-dots .showcase-dot.active,
html body.designero-page--bang-gia-thiet-ke-decor .dot.active,
html body .decor-contact-band .showcase-dots .showcase-dot.active,
html body .decor-showcase-dots .showcase-dot.active {
  background: #D45937 !important;
  background-color: #D45937 !important;
  color: #FFFFFF !important;
  border-color: #D45937 !important;
  box-shadow: 0 0 8px rgba(212, 89, 55, 0.5) !important;
}

/* -------------------------------------------------------------
 * B. Registration Form Submit Button (Kiến trúc: Milk-Grey Gradient #565449 / #3d3a35)
 * ------------------------------------------------------------- */
html body .contact-band:not(.decor-contact-band) .contact-form-side button[type="submit"],
html body .contact-band:not(.decor-contact-band) .contact-form-side .quote-submit-btn,
html body .contact-band:not(.decor-contact-band) .btn-form-submit,
html body:not(.designero-page--bang-gia-thiet-ke-decor) .contact-form-side button[type="submit"],
html body:not(.designero-page--bang-gia-thiet-ke-decor) .contact-form-side .quote-submit-btn,
html body:not(.designero-page--bang-gia-thiet-ke-decor) .btn-form-submit {
  background: linear-gradient(135deg, #565449, #3d3a35) !important;
  background-color: #565449 !important;
  color: #FFFBF4 !important;
  border: 1px solid rgba(216, 207, 188, 0.4) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  border-radius: 8px !important;
  padding: 14px 28px !important;
  box-shadow: 0 4px 14px rgba(17, 18, 13, 0.3) !important;
  cursor: pointer !important;
}

html body .contact-band:not(.decor-contact-band) .contact-form-side button[type="submit"]:hover,
html body:not(.designero-page--bang-gia-thiet-ke-decor) .contact-form-side button[type="submit"]:hover {
  background: linear-gradient(135deg, #686558, #4a4740) !important;
  border-color: rgba(216, 207, 188, 0.8) !important;
}

/* Decor Form Submit Button ONLY (Solid Orange #D45937) */
html body .decor-contact-band .contact-form-side button[type="submit"],
html body .designero-form-variant-decor .contact-form-side button[type="submit"],
html body.designero-page--bang-gia-thiet-ke-decor .contact-form-side button[type="submit"] {
  background: #D45937 !important;
  background-color: #D45937 !important;
  color: #FFFFFF !important;
  border: none !important;
}

/* ============================================================
   SHOWCASE 3D KIẾN TRÚC MOBILE: 1 CARD 100% WIDTH + SNAP SWIPE
   ============================================================ */
@media (max-width: 767px) {
  html body.designero-page--3d-thuc-te-kien-truc .showcase-floors .showcase-track-viewport {
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    scroll-behavior: smooth !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-x pan-y !important;
  }

  html body.designero-page--3d-thuc-te-kien-truc .showcase-floors .showcase-track {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 0 !important;
    width: 100% !important;
  }

  html body.designero-page--3d-thuc-te-kien-truc .showcase-floors .showcase-card {
    flex: 0 0 100% !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    scroll-snap-align: start !important;
    scroll-snap-stop: normal !important;
    box-sizing: border-box !important;
  }
}

/* ============================================================
   HOMEPAGE SERVICE CARDS — Reset Service Page overrides
   The generic .service-card rules (for service pages) were
   collapsing these cards to 2px on mobile because:
   - margin: auto on CSS Grid items cancels stretch
   - all children (img, overlay, ::after) are position: absolute
   - in-flow content width = 0 → aspect-ratio 1/1 → height = 0
   - overflow: hidden clips everything → section "disappears"
   Fix: explicitly set width so aspect-ratio can compute height.
   ============================================================ */
@media (max-width: 767px) {
  .services-luxury .service-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    justify-items: center !important;
    gap: 20px !important;
  }

  .services-luxury .service-card {
    width: min(340px, calc(100vw - 48px)) !important;
    max-width: 340px !important;
    aspect-ratio: 1 / 1 !important;
    height: auto !important;
    margin-left: auto !important;
    margin-right: auto !important;
    border: 1px solid rgba(216, 207, 188, 0.12) !important;
    border-radius: 18px !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35) !important;
    background: transparent !important;
  }

  .services-luxury .service-card::after {
    display: none !important;
    content: none !important;
  }

  .services-luxury .service-card img {
    position: static !important;
    inset: auto !important;
    z-index: auto !important;
  }

  .services-luxury .service-overlay {
    z-index: 5 !important;
  }
}

/* ============================================================
   GLOBAL & HOMEPAGE WHITE GAP & ACCORDION ELIMINATION
   ============================================================ */

/* 1. Global Elimination of Empty Gutenberg Paragraphs */
p:empty,
p.wp-block-paragraph:empty,
main > p:empty,
.figma-page > p:empty,
article > p:empty {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
  height: 0 !important;
  min-height: 0 !important;
  line-height: 0 !important;
  font-size: 0 !important;
}

/* 2. Construction Tree Accordion (Homepage)
   When closed: absolutely 0 height, 0 padding, no visibility/display, no white gap */
.construction-tree-sec:not(.is-open) {
  display: none !important;
  height: 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  border: none !important;
  overflow: hidden !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

.construction-tree-sec.is-open {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  max-height: 3000px !important;
  background: #11120D !important;
  overflow: visible !important;
}

@media (max-width: 767px) {
  .construction-tree-sec:not(.is-open) {
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    border: none !important;
    overflow: hidden !important;
    visibility: hidden !important;
    opacity: 0 !important;
  }

  .construction-tree-sec.is-open {
    display: block !important;
    padding-top: 36px !important;
    padding-bottom: 48px !important;
    background: #11120D !important;
  }

  /* 3. Seamless full-width sections on mobile - eliminate external margins and margin-collapsing exposing body background */
  section.full-width-section,
  main > section.full-width-section,
  .full-width-section {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    display: flow-root !important; /* Prevents child margin collapsing from creating white gaps */
  }

  section.full-width-section > :last-child,
  .full-width-section .container > :last-child,
  .pack-intro-shell > :last-child {
    margin-bottom: 0 !important;
  }

  /* 4. Showcase & Project Filter Buttons: Equal Gap, Centered Alignment & Full Touch Swipe */
  .project-filters,
  .showcase-tabs,
  .showcase-subtabs,
  .decor-showcase-tabs,
  .decor-showcase-subtabs,
  .service-showcase-tabs,
  .project-switch-row,
  .townhouse-filters,
  .figma-filters {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-x pan-y !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
    overscroll-behavior-x: contain !important;
    padding-left: 16px !important;
    padding-right: 28px !important;
    gap: 10px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
    cursor: grab !important;
    user-select: none !important;
    -webkit-user-select: none !important;
  }

  .project-filters button,
  .showcase-tab,
  .showcase-subtab,
  .decor-showcase-tab,
  .decor-showcase-subtab,
  .service-showcase-tab,
  .project-switch,
  .filter-term,
  .townhouse-filter,
  .figma-filters button {
    flex: 0 0 auto !important;
    max-width: none !important;
    text-align: center !important;
    justify-content: center !important;
    align-items: center !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
    touch-action: pan-x pan-y !important;
  }
}

/* ============================================================
   GLOBAL SHOWCASE TABS & SUBTABS TOUCH SWIPE (UP TO 1024PX TABLET)
   Ultra-smooth touch scrolling and drag with hardware acceleration
   ============================================================ */
@media (max-width: 1024px) {
  html body #showcase .showcase-tabs,
  html body .showcase-hero .showcase-tabs,
  html body .showcase-tabs,
  html body #showcase .showcase-subtabs,
  html body .showcase-hero .showcase-subtabs,
  html body .showcase-subtabs,
  html body .decor-showcase-tabs,
  html body .decor-showcase-subtabs,
  html body .service-showcase-tabs,
  html body .project-switch-row,
  html body .townhouse-filters,
  html body .project-filters,
  html body .figma-filters {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-x pan-y !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
    overscroll-behavior-x: contain !important;
    padding-left: 16px !important;
    padding-right: 28px !important;
    gap: 10px !important;
    box-sizing: border-box !important;
    cursor: grab !important;
    user-select: none !important;
    -webkit-user-select: none !important;
  }

  html body #showcase .showcase-tabs:active,
  html body .showcase-tabs:active,
  html body #showcase .showcase-subtabs:active,
  html body .showcase-subtabs:active,
  html body .decor-showcase-tabs:active,
  html body .decor-showcase-subtabs:active,
  html body .service-showcase-tabs:active,
  html body .project-switch-row:active,
  html body .townhouse-filters:active,
  html body .project-filters:active,
  html body .figma-filters:active {
    cursor: grabbing !important;
  }

  html body #showcase .showcase-tabs::-webkit-scrollbar,
  html body .showcase-hero .showcase-tabs::-webkit-scrollbar,
  html body .showcase-tabs::-webkit-scrollbar,
  html body #showcase .showcase-subtabs::-webkit-scrollbar,
  html body .showcase-hero .showcase-subtabs::-webkit-scrollbar,
  html body .showcase-subtabs::-webkit-scrollbar,
  html body .decor-showcase-tabs::-webkit-scrollbar,
  html body .decor-showcase-subtabs::-webkit-scrollbar,
  html body .service-showcase-tabs::-webkit-scrollbar,
  html body .project-switch-row::-webkit-scrollbar,
  html body .townhouse-filters::-webkit-scrollbar,
  html body .project-filters::-webkit-scrollbar,
  html body .figma-filters::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
  }

  html body #showcase .showcase-tab,
  html body .showcase-tab,
  html body #showcase .showcase-subtab,
  html body .showcase-subtab,
  html body .decor-showcase-tab,
  html body .decor-showcase-subtab,
  html body .service-showcase-tab,
  html body .project-switch,
  html body .filter-term,
  html body .townhouse-filter,
  html body .project-filters button,
  html body .figma-filters button {
    flex: 0 0 auto !important;
    max-width: none !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
    touch-action: pan-x pan-y !important;
  }
}