/* ============================================================
   HÒA CƯỜNG M&E — Polish v4 (Targeted fixes from Crys screenshots)
   Focus: hero typography wrap, brand section restructure,
          kill mask-arrow decoration, container balance
   ============================================================ */

/* ============================================================
   1. HERO — text-wrap balance + restructure headline
   ============================================================ */
.hc-hero-overlay .hc-hero-h1 {
  text-wrap: balance !important;     /* modern CSS — balanced line breaks */
  hyphens: none;
  max-width: 900px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
.hc-hero-overlay .hc-hero-sub {
  text-wrap: pretty !important;       /* avoid orphan last line */
  max-width: 620px !important;
}

/* "Hà Tĩnh" accent — tighter, no block feel, gold instead of orange-only */
.hc-hero-overlay .hc-accent-underline {
  white-space: nowrap;
  padding-bottom: 2px;
}
.hc-hero-overlay .hc-accent-underline::after {
  height: 4px !important;
  background: linear-gradient(90deg, #ffd34d 0%, var(--hc-orange) 100%) !important;
  border-radius: 3px;
  bottom: 0 !important;
  opacity: 1 !important;
}

/* "M&E" accent — gradient + slight emphasis */
.hc-hero-overlay .hc-accent {
  padding: 0 4px;
  font-weight: 900 !important;
}

/* PC hero — tighter content centering on widescreen */
@media (min-width: 1280px) {
  .hc-hero-overlay {
    padding: 100px 24px 88px !important;
  }
  .hc-hero-inner { max-width: 880px !important; }
  .hc-hero-overlay .hc-hero-h1 {
    font-size: clamp(2.5rem, 4vw, 3.5rem) !important;
    line-height: 1.15 !important;
  }
  .hc-hero-overlay .hc-hero-sub {
    font-size: 1.0625rem !important;
    line-height: 1.65 !important;
  }
}

/* ============================================================
   2. KILL Flatsome mask-arrow + ux-shape-divider decorations
   ============================================================ */
.section.has-mask::before,
.section.has-mask::after,
.section.mask-arrow::before,
.section.mask-arrow::after,
.ux-shape-divider--top,
.ux-shape-divider--bottom {
  display: none !important;
}
.section.has-mask,
.section.mask-arrow {
  mask: none !important;
  -webkit-mask: none !important;
}

/* ============================================================
   3. BRAND LOGO SECTION — restructure (was Danh mục sản phẩm broken)
   ============================================================ */

/* Tighten container that wraps brand carousel */
#section_1830580576,
.section.has-mask.mask-arrow {
  padding: 48px 0 64px !important;
  background: white !important;
  position: relative;
}
#section_1830580576 .bg.section-bg {
  display: none !important;
}

/* Fix section title above brand row — change wording via CSS content trick */
/* (We can't rewrite HTML, but we can make the section heading hierarchy clearer) */

/* The carousel row container — make it clean grid */
.row.category-section.large-columns-6,
.row.category-section.large-columns-8 {
  max-width: 1280px !important;
  margin: 0 auto !important;
  padding: 0 16px !important;
  flex-wrap: wrap !important;
  gap: 16px !important;
}
/* SCOPED TO BRAND GRID ONLY (#section_1830580576) — not product sections */
#section_1830580576 .row.large-columns-6 > .col,
#section_1830580576 .row.large-columns-8 > .col,
#section_1830580576 .row > .col {
  padding: 0 !important;
  flex: 1 1 calc(12.5% - 16px) !important;
  max-width: calc(12.5% - 16px) !important;
}
@media (max-width: 1023px) {
  #section_1830580576 .row > .col {
    flex: 1 1 calc(25% - 16px) !important;
    max-width: calc(25% - 16px) !important;
  }
}
@media (max-width: 549px) {
  #section_1830580576 .row > .col {
    flex: 1 1 calc(50% - 16px) !important;
    max-width: calc(50% - 16px) !important;
  }
}

/* Hide Flickity slider arrows on brand row (we made it grid) */
.row.category-section.large-columns-6 .flickity-prev-next-button,
.row.category-section.large-columns-6 .flickity-page-dots,
.row.category-section.large-columns-8 .flickity-prev-next-button,
.row.category-section.large-columns-8 .flickity-page-dots,
.row.category-section.large-columns-6 + .flickity-page-dots,
.row.category-section.large-columns-8 + .flickity-page-dots {
  display: none !important;
}

/* Brand logo card — premium uniform style */
.row.category-section.large-columns-6 .col-inner,
.row.category-section.large-columns-8 .col-inner {
  background: white !important;
  border: 1px solid var(--hc-gray-200) !important;
  border-radius: var(--hc-r-md) !important;
  padding: 16px 12px !important;
  transition: all var(--hc-tr-base) !important;
  height: 88px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.row.category-section.large-columns-6 .col-inner:hover,
.row.category-section.large-columns-8 .col-inner:hover {
  border-color: var(--hc-navy) !important;
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(13,77,140,0.12);
}
/* REMOVED brand-only override that wrongly matched product grid.
   Brand grid uses different selector now. */
.X_DISABLED_row.category-section.large-columns-6 .col-inner img,
.X_DISABLED_row.category-section.large-columns-8 .col-inner img {
  max-width: 100% !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  filter: grayscale(40%);
  opacity: 0.85;
  transition: all var(--hc-tr-base);
}
.row.category-section.large-columns-6 .col-inner:hover img,
.row.category-section.large-columns-8 .col-inner:hover img {
  filter: grayscale(0%);
  opacity: 1;
}

/* SCOPED: hide title/price ONLY for brand grid section (logos not products) */
#section_1830580576 .product-title,
#section_1830580576 .price {
  display: none !important;
}

/* Intro paragraph above brand row */
#section_1830580576 ~ p,
.section.has-mask + p,
.container.section-title-container + p,
.section-title-container + p {
  max-width: 720px;
  margin: 0 auto 40px !important;
  text-align: center;
  font-size: 15px !important;
  color: var(--hc-gray-500) !important;
  line-height: 1.6;
  padding: 0 24px;
}

/* Update misleading section title — visual indicator via ::after */
.section-title-container h2.section-title.section-title-center span.section-title-main {
  position: relative;
}

/* ============================================================
   4. SECTION TITLE — ensure underline visible (override fight)
   ============================================================ */
.section-title-container .section-title.section-title-center span.section-title-main::after {
  content: "" !important;
  position: absolute !important;
  left: 50% !important; bottom: -16px !important;
  width: 72px !important; height: 4px !important;
  background: linear-gradient(90deg, var(--hc-orange) 0%, var(--hc-red, #c8102e) 100%) !important;
  border-radius: 2px !important;
  transform: translateX(-50%) !important;
  display: block !important;
}

/* ============================================================
   5. HOTLINE RIBBON — close button refinement (the × visible)
   ============================================================ */
.hc-ribbon-close {
  width: 18px !important;
  height: 18px !important;
  font-size: 12px !important;
  background: rgba(255,255,255,0.08) !important;
  color: rgba(255,255,255,0.85) !important;
  right: 14px !important;
  opacity: 1 !important;
}
.hc-ribbon-close:hover {
  background: rgba(255,255,255,0.2) !important;
  color: white !important;
}

/* ============================================================
   6. PHONE CARD HEADER — improve when 2 phones (Mua hàng + Tư vấn)
   ============================================================ */
@media (min-width: 1024px) {
  #header-contact,
  .html_header_contact_2 {
    padding: 12px 18px 12px 52px !important;
    border-radius: var(--hc-r-md) !important;
  }
  #header-contact li:first-child,
  .html_header_contact_2 li:first-child {
    font-size: 10.5px !important;
    letter-spacing: 0.6px !important;
    line-height: 1.3 !important;
  }
  #header-contact li a,
  .html_header_contact_2 li a {
    font-size: 17px !important;
    line-height: 1.25 !important;
  }
  #header-contact::before,
  .html_header_contact_2::before {
    width: 26px !important; height: 26px !important;
    left: 16px !important;
  }
}

/* ============================================================
   7. ENSURE HERO BADGES VISIBLE — fix potential hide issue
   ============================================================ */
.hc-hero-badges {
  display: inline-flex !important;
  flex-wrap: wrap !important;
}
.hc-hero-badge {
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* ============================================================
   8. CTA HERO BUTTON — refinement (gọi báo giá button)
   ============================================================ */
.hc-hero-ctas .hc-btn-primary {
  font-weight: 700 !important;
  letter-spacing: 0.2px !important;
}
.hc-hero-ctas .hc-btn-outline {
  border-color: rgba(255,255,255,0.45) !important;
  background: rgba(255,255,255,0.05) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.hc-hero-ctas .hc-btn-outline:hover {
  background: rgba(255,255,255,0.15) !important;
  border-color: white !important;
}
.hc-hero-ctas .hc-btn svg {
  flex-shrink: 0;
}

/* ============================================================
   9. RIBBON BG — darker premium navy gradient
   ============================================================ */
.hc-hotline-ribbon {
  background: linear-gradient(90deg, #082a55 0%, #0d4d8c 50%, #082a55 100%) !important;
  font-weight: 500;
}

/* ============================================================
   10. RESPONSIVE TWEAKS — kill horizontal overflow
   ============================================================ */
body, html { overflow-x: hidden; }
.hc-hero-overlay, .hc-trust-strip,
.hc-audience-strip, .hc-certs-strip,
.hc-timeline-section { overflow-x: clip; }

/* ============================================================
   11. SCROLL BARS — hide ugly default scrollbars in carousels
   ============================================================ */
.row::-webkit-scrollbar,
.flickity-viewport::-webkit-scrollbar { display: none; }
.row, .flickity-viewport {
  scrollbar-width: none;
  -ms-overflow-style: none;
}