/* ============================================================
   HÒA CƯỜNG M&E — Polish v3 (Homepage Premium — 4-round synthesis)
   Focus: color refine, card lock, stat counters, segmentation,
          certifications strip, timeline, premium hover
   ============================================================ */

/* ============================================================
   1. COLOR TOKENS REFINE — add brand red (Hoà Cường logo)
   ============================================================ */
:root {
  --hc-red:       #c8102e;  /* logo đỏ Hoà Cường */
  --hc-red-dark:  #a00d24;
  --hc-red-light: #ff3550;
  /* Existing tokens stay — red joins as accent */
}

/* ============================================================
   2. KILL GUTENBERG ORPHAN COLORS LEAK
   ============================================================ */
.has-vivid-red-color, .has-luminous-vivid-orange-color,
.has-luminous-vivid-amber-color, .has-light-green-cyan-color,
.has-vivid-green-cyan-color, .has-pale-cyan-blue-color,
.has-vivid-cyan-blue-color, .has-vivid-purple-color,
.has-cyan-bluish-gray-color, .has-pale-pink-color {
  color: inherit !important;
}
.has-vivid-red-background-color, .has-luminous-vivid-orange-background-color,
.has-luminous-vivid-amber-background-color, .has-light-green-cyan-background-color,
.has-vivid-green-cyan-background-color, .has-pale-cyan-blue-background-color,
.has-vivid-cyan-blue-background-color, .has-vivid-purple-background-color,
.has-cyan-bluish-gray-background-color, .has-pale-pink-background-color {
  background: transparent !important;
}

/* ============================================================
   3. HERO TYPOGRAPHY — bigger PC + logo red micro-accent
   ============================================================ */
@media (min-width: 1024px) {
  .hc-hero-overlay { padding: 112px 24px 96px !important; }
  .hc-hero-overlay .hc-hero-h1 { font-size: clamp(2.75rem, 4.8vw, 3.75rem) !important; line-height: 1.08 !important; }
}
/* Brand red accent on key word (M&E) */
.hc-hero-overlay .hc-accent {
  background: linear-gradient(135deg, #ffb061 0%, #ff8a3d 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  position: relative;
}

/* ============================================================
   4. STAT COUNTERS — bigger PC, gradient num, premium feel
   ============================================================ */
.hc-trust-stats { gap: 24px !important; }
@media (min-width: 1024px) {
  .hc-trust-strip { padding: 64px 24px !important; }
  .hc-stat-num {
    font-size: clamp(2.25rem, 4vw, 3.25rem) !important;
    font-weight: 800 !important;
  }
  .hc-stat-label { font-size: 14px !important; }
}
/* Counter animation hooks (data-target driven) */
.hc-stat-num[data-counting] {
  font-variant-numeric: tabular-nums;
  transition: opacity 0.3s ease;
}

/* ============================================================
   5. AUDIENCE SEGMENTATION STRIP — Häfele pattern (3 cards after trust strip)
   ============================================================ */
.hc-audience-strip {
  padding: 64px 24px !important;
  background: var(--hc-gray-50);
}
.hc-audience-inner {
  max-width: 1280px; margin: 0 auto;
}
.hc-audience-heading {
  text-align: center; margin-bottom: 40px;
}
.hc-audience-heading h2 {
  font-size: clamp(1.5rem, 3vw, 2rem) !important;
  font-weight: 800 !important;
  color: var(--hc-navy) !important;
  margin: 0 0 8px !important;
  letter-spacing: -0.01em;
}
.hc-audience-heading p {
  font-size: 15px; color: var(--hc-gray-700);
  margin: 0;
}
.hc-audience-grid {
  display: grid; gap: 24px;
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  .hc-audience-grid { grid-template-columns: repeat(3, 1fr); }
}
.hc-audience-card {
  background: white;
  border-radius: var(--hc-r-lg);
  padding: 32px 24px;
  border: 1px solid var(--hc-gray-200);
  text-align: center;
  transition: all var(--hc-tr-base);
  text-decoration: none !important;
  color: inherit !important;
  display: block;
  position: relative;
  overflow: hidden;
}
.hc-audience-card::after {
  content: "";
  position: absolute; left: 0; right: 0; top: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--hc-navy), var(--hc-orange));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--hc-tr-base);
}
.hc-audience-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--hc-sh-3);
  border-color: var(--hc-orange);
}
.hc-audience-card:hover::after { transform: scaleX(1); }
.hc-audience-icon {
  width: 56px; height: 56px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--hc-navy) 0%, var(--hc-navy-dark) 100%);
  color: white;
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 20px;
}
.hc-audience-icon svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 2; }
.hc-audience-title {
  font-size: 18px; font-weight: 700;
  color: var(--hc-navy);
  margin: 0 0 8px;
}
.hc-audience-desc {
  font-size: 14px; color: var(--hc-gray-700);
  line-height: 1.55;
  margin: 0 0 16px;
}
.hc-audience-cta {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--hc-orange);
  font-weight: 600; font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.hc-audience-cta svg {
  width: 14px; height: 14px;
  transition: transform var(--hc-tr-base);
}
.hc-audience-card:hover .hc-audience-cta svg { transform: translateX(4px); }

/* ============================================================
   6. CERTIFICATIONS / PARTNERS STRIP
   ============================================================ */
.hc-certs-strip {
  padding: 48px 24px !important;
  background: white;
  border-top: 1px solid var(--hc-gray-100);
}
.hc-certs-inner {
  max-width: 1280px; margin: 0 auto;
  text-align: center;
}
.hc-certs-label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--hc-gray-500);
  font-weight: 600;
  margin-bottom: 24px;
}
.hc-certs-row {
  display: flex; flex-wrap: wrap; gap: 20px 40px;
  justify-content: center; align-items: center;
}
.hc-cert-badge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 18px;
  border-radius: var(--hc-r-md);
  background: var(--hc-gray-50);
  border: 1px solid var(--hc-gray-200);
  font-size: 13px; font-weight: 600;
  color: var(--hc-gray-700);
  transition: all var(--hc-tr-base);
}
.hc-cert-badge:hover {
  background: white;
  border-color: var(--hc-navy);
  transform: translateY(-2px);
  box-shadow: var(--hc-sh-2);
}
.hc-cert-badge svg {
  width: 18px; height: 18px;
  color: var(--hc-navy);
  fill: none; stroke: currentColor; stroke-width: 2;
}

/* ============================================================
   7. BRAND TIMELINE — "11 năm hành trình"
   ============================================================ */
.hc-timeline-section {
  padding: 80px 24px !important;
  background: linear-gradient(180deg, white 0%, var(--hc-gray-50) 100%);
}
.hc-timeline-inner { max-width: 1280px; margin: 0 auto; }
.hc-timeline-header {
  text-align: center; margin-bottom: 48px;
}
.hc-timeline-header h2 {
  font-size: clamp(1.5rem, 3vw, 2rem) !important;
  font-weight: 800 !important;
  color: var(--hc-navy) !important;
  margin: 0 0 12px !important;
  letter-spacing: -0.01em;
}
.hc-timeline-header p {
  font-size: 15px; color: var(--hc-gray-700);
  max-width: 640px; margin: 0 auto;
}
.hc-timeline {
  display: flex; gap: 16px;
  overflow-x: auto;
  padding-bottom: 16px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
.hc-timeline::-webkit-scrollbar { height: 6px; }
.hc-timeline::-webkit-scrollbar-thumb { background: var(--hc-gray-200); border-radius: 3px; }
.hc-timeline-item {
  flex: 0 0 240px;
  background: white;
  border-radius: var(--hc-r-lg);
  padding: 24px;
  border: 1px solid var(--hc-gray-200);
  scroll-snap-align: start;
  position: relative;
  transition: all var(--hc-tr-base);
}
.hc-timeline-item:hover {
  transform: translateY(-4px);
  box-shadow: var(--hc-sh-2);
  border-color: var(--hc-orange);
}
.hc-timeline-year {
  display: inline-block;
  font-size: 12px; font-weight: 700;
  color: var(--hc-orange);
  background: rgba(255,106,0,0.1);
  padding: 4px 10px;
  border-radius: 999px;
  letter-spacing: 0.5px;
  margin-bottom: 12px;
}
.hc-timeline-title {
  font-size: 16px; font-weight: 700;
  color: var(--hc-navy);
  margin: 0 0 6px;
  line-height: 1.3;
}
.hc-timeline-desc {
  font-size: 13px; color: var(--hc-gray-700);
  line-height: 1.55;
  margin: 0;
}
@media (min-width: 1024px) {
  .hc-timeline { gap: 20px; overflow-x: visible; flex-wrap: wrap; justify-content: center; }
  .hc-timeline-item { flex: 1 1 200px; max-width: 240px; }
}

/* ============================================================
   8. PRODUCT CARD — homepage carousel normalize + premium
   ============================================================ */
/* Force image 1:1 aspect ratio + object-fit cover */
.product-small .box-image,
.product-small .image-cover {
  aspect-ratio: 1 / 1 !important;
  overflow: hidden;
  background: var(--hc-gray-50);
}
.product-small .box-image img,
.product-small .image-cover img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  padding: 12px;
}
/* Title min-height (2 lines clamp) — anti zig-zag */
.product-small .product-title,
.product-small .product-title a {
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  min-height: 42px !important;
  line-height: 1.4 !important;
  font-size: 14px !important;
  font-weight: 600 !important;
}
/* Premium hover lift universal */
.product-small {
  transition: all var(--hc-tr-base) !important;
}
.product-small:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 12px 32px rgba(13,77,140,0.12) !important;
}

/* ============================================================
   9. SECTION RHYTHM — alternate backgrounds + bigger PC padding
   ============================================================ */
@media (min-width: 1024px) {
  .section { padding-top: 100px !important; padding-bottom: 100px !important; }
}
/* Specific alternation for homepage flow */
body.home .section:nth-of-type(odd) { background: white; }
body.home .section:nth-of-type(even) { background: var(--hc-gray-50); }
body.home .hc-trust-strip { background: white !important; }
body.home .hc-audience-strip { background: var(--hc-gray-50) !important; }
body.home .hc-certs-strip { background: white !important; }

/* ============================================================
   10. RED LOGO INTEGRATION — micro-accents
   ============================================================ */
/* Red dot on active nav item (subtle brand seal) */
.header-bottom .nav > li.active > a {
  border-bottom-color: var(--hc-red) !important;
}
/* Red highlight cho hotline trong ribbon */
.hc-hotline-ribbon a {
  color: #ffd34d !important;
}
.hc-hotline-ribbon a:hover {
  color: white !important;
  text-shadow: 0 0 8px rgba(255,255,255,0.5);
}
/* Floating Zalo bubble pulse — red ring at outer edge */
.hc-zalo-bubble::after {
  background: var(--hc-red) !important;
}

/* ============================================================
   11. HERO BADGES — bigger PC, gradient number
   ============================================================ */
@media (min-width: 1024px) {
  .hc-hero-badges {
    margin-top: 48px !important;
    padding-top: 36px !important;
    gap: 20px 56px !important;
  }
  .hc-hero-badge { font-size: 15px !important; }
  .hc-hero-badge strong {
    font-size: 24px !important;
    background: linear-gradient(135deg, #ffd34d 0%, #ff8a3d 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}

/* ============================================================
   12. SECTION TITLE — refinement v3
   ============================================================ */
.section-title-normal > span::after,
.section-title-center > span::after,
.section-title-bold > span::after,
.section-title-main > span::after,
.section-title > span:not(.is-divider)::after {
  background: linear-gradient(90deg, var(--hc-orange) 0%, var(--hc-red) 100%) !important;
  width: 72px !important;
  height: 4px !important;
  bottom: -16px !important;
}

/* ============================================================
   13. PDP — price visible + CTA bigger above-fold
   ============================================================ */
body.single-product .product-info .price {
  margin: 8px 0 16px !important;
}
body.single-product .product-info .price ins span,
body.single-product .product-info .price .amount {
  font-size: clamp(1.5rem, 3vw, 2rem) !important;
  font-weight: 800 !important;
  color: var(--hc-red) !important;
}

/* ============================================================
   14. CATEGORY PAGE — show price + improve card
   ============================================================ */
.archive .product-small .price,
.category-section .product-small .price {
  display: block !important;
  margin: 8px 12px !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  color: var(--hc-red) !important;
}
.archive .product-small .price del,
.category-section .product-small .price del {
  font-size: 12px !important;
  color: var(--hc-gray-400) !important;
}

/* ============================================================
   15. HEADER SEARCH overlay trigger — clean PC default
   ============================================================ */
@media (min-width: 1024px) {
  .searchform-wrapper.ux-search-box { max-width: 440px !important; }
}