/* ============================================================
   HÒA CƯỜNG M&E — Polish v5 (Tighten spacing — kill excessive whitespace)
   Focus: Hero bottom, section vertical rhythm, brand section card
          empty padding, gaps between sections
   ============================================================ */

/* ============================================================
   1. SECTION VERTICAL PADDING — significantly reduce
   Was 100px PC (too generous), now 64px PC / 40px mobile
   ============================================================ */
.section,
section[class*="section"] {
  padding-top: 48px !important;
  padding-bottom: 48px !important;
}
@media (min-width: 1024px) {
  .section,
  section[class*="section"] {
    padding-top: 64px !important;
    padding-bottom: 64px !important;
  }
}
@media (max-width: 549px) {
  .section,
  section[class*="section"] {
    padding-top: 32px !important;
    padding-bottom: 32px !important;
  }
}

/* ============================================================
   2. HERO — tighter bottom (no empty navy space below badges)
   ============================================================ */
.hc-hero-overlay {
  padding-top: 64px !important;
  padding-bottom: 48px !important;
}
@media (min-width: 1024px) {
  .hc-hero-overlay {
    padding-top: 88px !important;
    padding-bottom: 56px !important;
  }
}

/* Reduce gap inside hero between elements */
.hc-hero-overlay .hc-hero-h1 { margin-bottom: 14px !important; }
.hc-hero-overlay .hc-hero-sub { margin-bottom: 28px !important; }
.hc-hero-overlay .hc-hero-ctas { margin-top: 0 !important; }
.hc-hero-overlay .hc-hero-badges {
  margin-top: 28px !important;
  padding-top: 24px !important;
}

/* ============================================================
   3. TRUST STRIP — tighter (was 64px)
   ============================================================ */
.hc-trust-strip {
  padding: 40px 16px !important;
}
@media (min-width: 1024px) {
  .hc-trust-strip {
    padding: 48px 24px !important;
  }
}
.hc-trust-strip .hc-trust-inner {
  gap: 24px !important;
}

/* ============================================================
   4. AUDIENCE STRIP — tighter
   ============================================================ */
.hc-audience-strip {
  padding: 48px 16px !important;
}
@media (min-width: 1024px) {
  .hc-audience-strip {
    padding: 56px 24px !important;
  }
}
.hc-audience-heading { margin-bottom: 28px !important; }

/* ============================================================
   5. CERTS STRIP — tighter
   ============================================================ */
.hc-certs-strip {
  padding: 32px 16px !important;
}
@media (min-width: 1024px) {
  .hc-certs-strip { padding: 40px 24px !important; }
}
.hc-certs-label { margin-bottom: 18px !important; }

/* ============================================================
   6. TIMELINE — tighter
   ============================================================ */
.hc-timeline-section {
  padding: 56px 16px !important;
}
@media (min-width: 1024px) {
  .hc-timeline-section { padding: 64px 24px !important; }
}
.hc-timeline-header { margin-bottom: 32px !important; }

/* ============================================================
   7. BRAND SECTION (DANH MỤC SẢN PHẨM) — KILL excessive padding
   The white "card" effect + huge internal empty space
   ============================================================ */
#section_1830580576,
.section.has-mask.mask-arrow,
section[class*="has-mask"][class*="mask-arrow"] {
  padding: 32px 0 40px !important;
  background: white !important;
  margin: 0 !important;
}
@media (min-width: 1024px) {
  #section_1830580576,
  .section.has-mask.mask-arrow {
    padding: 40px 0 48px !important;
  }
}

/* Kill the inner white "card" effect — make row width match content */
#section_1830580576 .row.category-section,
.section.has-mask .row.category-section {
  background: transparent !important;
  padding: 0 16px !important;
  margin: 0 auto !important;
  max-width: 1280px !important;
}

/* Brand card cells — uniform compact */
.row.category-section.large-columns-6 .col-inner,
.row.category-section.large-columns-8 .col-inner {
  height: 76px !important;
  padding: 12px 10px !important;
}
@media (min-width: 1024px) {
  .row.category-section.large-columns-6 .col-inner,
  .row.category-section.large-columns-8 .col-inner {
    height: 84px !important;
  }
}

/* Brand logo max-height tighter */
/* REMOVED: max-height 48-52px on products was a bug — caused tiny product images.
   Product cards now get proper image size via hc-iter-2-card.css aspect-ratio rules. */

/* Section title above brand — tighter margin */
#section_1830580576 + .container.section-title-container,
#section_1830580576 ~ .container.section-title-container,
.section.has-mask + .container.section-title-container,
body.home .section-title-container {
  margin-top: 8px !important;
  margin-bottom: 12px !important;
}

/* Intro paragraph tighter */
#section_1830580576 ~ p,
.section.has-mask + p,
.section-title-container + p,
body.home > p[style*="text-align: center"] {
  margin: 0 auto 24px !important;
  max-width: 720px;
  padding: 0 24px;
}

/* ============================================================
   8. ALL CATEGORY-SECTION (product carousels) — TIGHTER
   ============================================================ */
.section.category-section,
section.category-section {
  padding: 40px 0 !important;
}
@media (min-width: 1024px) {
  .section.category-section,
  section.category-section {
    padding: 56px 0 !important;
  }
}

/* Section-title-container reduce its own margin */
.section-title-container {
  margin-bottom: 24px !important;
  padding-top: 0 !important;
}
@media (min-width: 1024px) {
  .section-title-container { margin-bottom: 32px !important; }
}

/* ============================================================
   9. KILL INTRO PARAGRAPH SPACING after section title
   ============================================================ */
.section-title + p,
.section-title-container + p,
h2.section-title + p {
  margin-top: 16px !important;
  margin-bottom: 24px !important;
}

/* ============================================================
   10. ROW (Flatsome) internal — kill bottom padding of last row
   ============================================================ */
.row.large-12 { padding-bottom: 0 !important; }
.section .row:last-child { padding-bottom: 0 !important; }
.section .row > .col:last-child .col-inner > *:last-child { margin-bottom: 0 !important; }

/* ============================================================
   11. FOOTER WRAPPER — kill negative margin trick + tighten
   ============================================================ */
.footer-wrapper { margin-top: 0 !important; }
.footer-wrapper .row > .col {
  padding-top: 16px !important;
  padding-bottom: 16px !important;
}

/* ============================================================
   12. TAI SAO (Why us) — tighten padding
   ============================================================ */
.section.tai-sao {
  padding: 48px 0 !important;
}
@media (min-width: 1024px) {
  .section.tai-sao { padding: 64px 0 !important; }
}

/* ============================================================
   13. DU AN NOI BAT + TIN TUC — tighten
   ============================================================ */
.section.du-an-noi-bat,
.section.tin-tuc {
  padding: 48px 0 !important;
}
@media (min-width: 1024px) {
  .section.du-an-noi-bat,
  .section.tin-tuc { padding: 64px 0 !important; }
}

/* ============================================================
   14. BAN DO + QUOTE — tighten
   ============================================================ */
.section.ban-do { padding: 48px 0 !important; }

/* ============================================================
   15. PAGE TITLE banner (single product, category) — tighten
   ============================================================ */
.page-title:not(.dark) {
  padding: 16px 0 !important;
  min-height: 0 !important;
}
.page-title .page-title-inner { padding: 8px 0 !important; }
.page-title-inner.flex-row { min-height: 0 !important; }

/* ============================================================
   16. HOMEPAGE H1 (visually hidden was OK for SEO) — verify intro spacing
   ============================================================ */
body.home h1.screen-reader-text { position: absolute !important; }

/* ============================================================
   17. SECTION TITLE inside brand section — match h2 visible
   ============================================================ */
#section_1830580576 .section-title,
#section_1830580576 ~ .section-title-container .section-title {
  margin-bottom: 0 !important;
}