/* ============================================================
   HÒA CƯỜNG M&E — Visual polish v2 (deep desktop refinement)
   Focus: section title bars cũ, container width loạn, section rhythm,
          testimonial/project/blog cards, sticky header, dated arrow shape
   Override hc-polish.css + Flatsome inline
   ============================================================ */

/* ============================================================
   1. CONTAINER MAX-WIDTH UNIFY — 1280px modern standard
   ============================================================ */
.container,
.container-width,
.full-width .ubermenu-nav,
.row {
  max-width: 1280px !important;
}
.row.row-collapse { max-width: 1280px !important; }
.row.row-small    { max-width: 1280px !important; }
.row.row-large    { max-width: 1280px !important; }

/* Section content tighter on desktop (anti-stretch) */
@media (min-width: 1281px) {
  .section .container,
  .section .row { padding-left: 24px !important; padding-right: 24px !important; }
}

/* ============================================================
   2. SECTION TITLE BAR — modern centered + accent underline
   Override: replace green gradient bar with clean navy centered title
   ============================================================ */
.section-title-container { margin-bottom: var(--hc-sp-8) !important; }

.section-title-normal,
.section-title-center,
.section-title-bold,
.section-title-main {
  background: none !important;
  background-image: none !important;
  border-bottom: 0 !important;
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
  text-align: center !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  padding: 0 0 var(--hc-sp-6) !important;
  position: relative;
}
.section-title-normal > span,
.section-title-center > span,
.section-title-bold > span,
.section-title-main > span,
.section-title > span:not(.is-divider) {
  background: none !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  color: var(--hc-navy) !important;
  font-family: "Barlow", "Be Vietnam Pro", sans-serif !important;
  font-size: clamp(1.5rem, 3vw, 2.125rem) !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  text-transform: none !important;
  letter-spacing: -0.01em !important;
  position: relative;
  display: inline-block !important;
}
.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 {
  content: "";
  position: absolute;
  left: 50%; bottom: -14px;
  width: 56px; height: 3px;
  background: var(--hc-orange);
  border-radius: 2px;
  transform: translateX(-50%);
}

/* "+ Xem tất cả" link bên phải title → reposition gọn */
.section-title a:not(.button) {
  margin: 0 !important;
  padding: 0 !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  color: var(--hc-orange) !important;
  position: absolute;
  right: 0; top: 50%;
  transform: translateY(-50%);
  text-decoration: none !important;
}
.section-title a::after {
  content: " →";
  transition: transform var(--hc-tr-base);
  display: inline-block;
}
.section-title a:hover::after { transform: translateX(3px); }
.section-title { position: relative !important; }
@media (max-width: 549px) {
  .section-title a:not(.button) { position: static; transform: none; display: block; margin-top: 8px !important; }
}

/* Hide the green gradient line divider */
.section-title .is-divider { display: none !important; }

/* ============================================================
   3. SECTION VERTICAL RHYTHM — consistent 80/48 padding
   ============================================================ */
.section,
.page-wrapper .section,
section[class*="section"] {
  padding-top: 80px !important;
  padding-bottom: 80px !important;
}
@media (max-width: 767px) {
  .section,
  section[class*="section"] { padding-top: 48px !important; padding-bottom: 48px !important; }
}

/* ============================================================
   4. SECTION BACKGROUND ALTERNATION — white / gray-50 rhythm
   ============================================================ */
.section.category-section,
.section.du-an-noi-bat,
.section.tin-tuc { background: white !important; }

.section.tai-sao { background: var(--hc-gray-50) !important; }
.section.ban-do { background: white !important; }

/* Strip green gradient backgrounds đan xen */
body:not(.single-product) .slider-style-shadow {
  background: transparent !important;
}

/* ============================================================
   5. TAI SAO — icon box modern card (replace dated hover)
   ============================================================ */
.tai-sao .icon-box {
  background: white !important;
  border-radius: var(--hc-r-lg) !important;
  padding: var(--hc-sp-6) var(--hc-sp-4) !important;
  border: 1px solid var(--hc-gray-100);
  text-align: center !important;
  transition: all var(--hc-tr-base);
  height: 100%;
  box-shadow: 0 1px 3px rgba(0,0,0,0.02);
}
.tai-sao .icon-box:hover {
  background: white !important;
  background-image: none !important;
  color: var(--hc-gray-900) !important;
  transform: translateY(-6px);
  box-shadow: 0 16px 36px rgba(13,77,140,0.12) !important;
  border-color: var(--hc-orange);
}
.tai-sao .icon-box:hover h3 {
  color: var(--hc-navy) !important;
}
.tai-sao .icon-box:hover img {
  border: 2px solid var(--hc-orange) !important;
  padding: 4px !important;
}
.tai-sao .icon-box h3 {
  font-size: 17px !important;
  font-weight: 700 !important;
  color: var(--hc-navy) !important;
  margin-top: var(--hc-sp-3) !important;
  margin-bottom: var(--hc-sp-2) !important;
  text-transform: none !important;
}
.tai-sao .icon-box .icon-box-text,
.tai-sao .icon-box .desc {
  font-size: 14px !important;
  color: var(--hc-gray-700) !important;
  line-height: 1.55 !important;
}
.tai-sao .icon-box img {
  border: 2px solid var(--hc-gray-200);
  padding: 4px;
  border-radius: 50%;
  width: 72px !important; height: 72px !important;
  transition: all var(--hc-tr-base);
}

/* ============================================================
   6. TESTIMONIAL — premium card style
   ============================================================ */
.testimonial-box.icon-box,
.icon-box.testimonial-box {
  background: white !important;
  padding: var(--hc-sp-6) !important;
  border-radius: var(--hc-r-lg) !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.04);
  border: 1px solid var(--hc-gray-100);
  height: 100%;
  position: relative;
}
.testimonial-box.icon-box::before {
  content: "\201C";
  position: absolute;
  top: 16px; right: 20px;
  font-family: Georgia, serif;
  font-size: 56px;
  color: var(--hc-orange);
  opacity: 0.18;
  line-height: 1;
}
.testimonial-box.icon-box:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(0,0,0,0.08);
}
.testimonial-image.circle img {
  width: 64px !important; height: 64px !important;
  border: 3px solid white !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.testimonial-name {
  font-size: 15px !important;
  color: var(--hc-navy) !important;
  font-weight: 700 !important;
  margin-bottom: 2px !important;
}
.testimonial-company {
  font-size: 13px !important;
  color: var(--hc-gray-500) !important;
}

/* ============================================================
   7. DỰ ÁN NỔI BẬT — modern gallery with overlay hover
   ============================================================ */
.du-an-noi-bat .post-item .col-inner {
  position: relative;
  background: transparent !important;
  padding: 0 !important;
  border-radius: var(--hc-r-lg) !important;
  overflow: hidden !important;
  transition: all var(--hc-tr-base);
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}
.du-an-noi-bat .post-item .col-inner:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 48px rgba(0,0,0,0.18);
}
.du-an-noi-bat .post-item .box-image,
.du-an-noi-bat .post-item .image-cover img {
  border-radius: 0 !important;
  width: 100%;
  height: auto;
  display: block;
}
.du-an-noi-bat .post-item .box-text {
  position: absolute !important;
  inset: 0 !important;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--hc-sp-4) !important;
  background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,0.85) 100%);
}
.du-an-noi-bat .post-item .post-title {
  color: white !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  margin-bottom: 4px !important;
  line-height: 1.3;
}
.du-an-noi-bat .post-item .from_the_blog_excerpt {
  color: rgba(255,255,255,0.85) !important;
  height: auto !important;
  font-size: 13px !important;
}

/* ============================================================
   8. TIN TỨC — blog card modern
   ============================================================ */
.tin-tuc .post-item .col-inner,
.tin-tuc .box-blog-post {
  background: white;
  border-radius: var(--hc-r-md);
  overflow: hidden;
  transition: all var(--hc-tr-base);
  border: 1px solid var(--hc-gray-100);
  height: 100%;
}
.tin-tuc .post-item:hover .col-inner,
.tin-tuc .box-blog-post:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(0,0,0,0.08);
  border-color: var(--hc-gray-200);
}
.tin-tuc .post-item .box-text {
  padding: var(--hc-sp-3) var(--hc-sp-4) var(--hc-sp-4) !important;
}
.tin-tuc .post-item .post-title {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--hc-gray-900) !important;
  line-height: 1.4 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}
.tin-tuc .post-item .post-title:hover { color: var(--hc-navy) !important; }
.tin-tuc .post-item .from_the_blog_excerpt {
  font-size: 13px !important;
  color: var(--hc-gray-500) !important;
}

/* ============================================================
   9. CHAM NGON SONG — replace dated green arrow shape with modern card
   ============================================================ */
.ban-do .cham-ngon-song .col-inner {
  background: linear-gradient(135deg, var(--hc-navy) 0%, var(--hc-navy-dark) 100%) !important;
  height: auto !important;
  min-height: 280px;
  padding: var(--hc-sp-8) !important;
  border-radius: var(--hc-r-lg) !important;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
.ban-do .cham-ngon-song .col-inner::before {
  content: "\201C";
  position: absolute;
  top: 12px; left: 24px;
  font-family: Georgia, serif;
  font-size: 100px;
  color: var(--hc-orange);
  opacity: 0.25;
  line-height: 1;
}
.ban-do .cham-ngon-song .col-inner::after {
  display: none !important;  /* kill the dated arrow shape */
}
.ban-do .cham-ngon-song h3 {
  color: white !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  margin-bottom: var(--hc-sp-3) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}
.ban-do .cham-ngon-song .ten-ceo {
  text-transform: none !important;
  border-top: 0 !important;
  padding-top: 0 !important;
  margin-top: var(--hc-sp-3) !important;
  color: var(--hc-orange-light) !important;
  font-weight: 700;
  font-size: 14px;
  display: inline-block;
  position: relative;
  padding-left: 36px;
}
.ban-do .cham-ngon-song .ten-ceo::before {
  content: "";
  position: absolute;
  left: 0; top: 50%; transform: translateY(-50%);
  width: 28px; height: 2px;
  background: var(--hc-orange);
}

/* ============================================================
   10. FOOTER REFINEMENT — better spacing + de-emphasize badge
   ============================================================ */
.footer-section,
.footer-wrapper {
  padding-top: var(--hc-sp-12) !important;
  padding-bottom: var(--hc-sp-8) !important;
}
.absolute-footer.dark {
  padding: var(--hc-sp-3) 0 !important;
  font-size: 12.5px !important;
}
/* "Đã thông báo" / DMCA badges - shrink */
.footer-wrapper img[alt*="thông báo"],
.footer-wrapper img[src*="dathongbao"],
.footer-wrapper img[src*="DMCA"] {
  max-height: 36px !important;
  width: auto !important;
  opacity: 0.85;
}

/* ============================================================
   11. STICKY HEADER COMPRESSION — when .stuck class active
   ============================================================ */
.stuck .header-main {
  min-height: 60px !important;
  background: rgba(255,255,255,0.98) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--hc-gray-100);
  box-shadow: 0 4px 16px rgba(0,0,0,0.06) !important;
}
.stuck #logo img { max-height: 44px !important; }
.stuck .searchform-wrapper.ux-search-box { max-width: 360px !important; }
.stuck #header-contact, .stuck .html_header_contact_2 {
  padding: 6px 12px 6px 38px !important;
}
.stuck #header-contact::before, .stuck .html_header_contact_2::before {
  width: 18px !important; height: 18px !important;
}
.stuck #header-contact li a,
.stuck .html_header_contact_2 li a { font-size: 14px !important; }
.stuck #header-contact li:first-child,
.stuck .html_header_contact_2 li:first-child { font-size: 9px !important; }

/* ============================================================
   12. SCROLL-REVEAL — pure CSS fade-in on view (no JS)
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {
  .section { animation: hcSectionReveal 0.6s ease-out backwards; }
  .section:nth-child(1) { animation-delay: 0s; }
  .section:nth-child(2) { animation-delay: 0.05s; }
  .section:nth-child(3) { animation-delay: 0.1s; }
}
@keyframes hcSectionReveal {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   13. HERO PC — tighter inner, more breathing
   ============================================================ */
@media (min-width: 1024px) {
  .hc-hero-overlay { padding: 96px 24px !important; }
  .hc-hero-inner { max-width: 920px !important; }
  .hc-hero-overlay .hc-hero-h1 { font-size: clamp(2.5rem, 4.5vw, 3.5rem) !important; }
  .hc-hero-overlay .hc-hero-sub { font-size: 1.15rem !important; max-width: 760px !important; }
  .hc-hero-badges {
    margin-top: 36px !important;
    padding-top: 28px !important;
    gap: 12px 32px !important;
  }
  .hc-hero-badge { font-size: 14.5px !important; }
  .hc-hero-badge strong { font-size: 20px !important; }
}

/* ============================================================
   14. CATEGORY SECTION cards — apply phase3 card v2 styles
   (Phase 3 chỉ target .archive — add cho homepage .category-section)
   ============================================================ */
.category-section .product-small {
  border: 1px solid var(--hc-gray-200) !important;
  border-radius: var(--hc-r-md) !important;
  overflow: hidden !important;
  transition: all var(--hc-tr-base) !important;
}
.category-section .product-small .col-inner {
  background: white !important;
  padding-bottom: 0 !important;
}
.category-section .product-small:hover {
  transform: translateY(-4px);
  box-shadow: var(--hc-sh-3) !important;
  border-color: var(--hc-gray-300) !important;
}
.category-section .product-small .price ins span,
.category-section .product-small .price .amount {
  color: var(--hc-orange) !important;
  font-weight: 700 !important;
}

/* ============================================================
   15. KILL legacy float-contact (Flatsome) — already have phase1 sticky+zalo
   ============================================================ */
.float-contact {
  display: none !important;
}

/* ============================================================
   16. BACK-TO-TOP — match phase3 scroll-top
   ============================================================ */
.back-to-top {
  background: var(--hc-navy) !important;
  border-radius: 50% !important;
  width: 44px !important; height: 44px !important;
}

/* ============================================================
   17. PRODUCT CAROUSEL ARROWS (Flickity nav) — premium round
   ============================================================ */
.slider-nav-circle .flickity-prev-next-button {
  background: white !important;
  border: 1px solid var(--hc-gray-200) !important;
  box-shadow: var(--hc-sh-2) !important;
  width: 40px !important; height: 40px !important;
}
.slider-nav-circle .flickity-prev-next-button:hover {
  background: var(--hc-navy) !important;
  border-color: var(--hc-navy) !important;
}
.slider-nav-circle .flickity-prev-next-button:hover svg,
.slider-nav-circle .flickity-prev-next-button:hover .arrow {
  fill: white !important;
}

/* ============================================================
   18. WIDGET TITLE (sidebar) — restyle dated
   ============================================================ */
span.widget-title,
.widget-title {
  background: var(--hc-navy) !important;
  border-radius: var(--hc-r-md) var(--hc-r-md) 0 0 !important;
  padding: 14px 18px !important;
  font-size: 15px !important;
  text-transform: none !important;
  font-weight: 700 !important;
  letter-spacing: 0.2px !important;
}

/* ============================================================
   19. PAGE TITLE banner — top of category/single pages
   ============================================================ */
.page-title:not(.dark) {
  background: linear-gradient(135deg, var(--hc-gray-50) 0%, white 100%) !important;
  border-bottom: 1px solid var(--hc-gray-100);
}
.page-title h1.entry-title,
.page-title .page-title-inner h1 {
  color: var(--hc-navy) !important;
  font-size: clamp(1.5rem, 3vw, 2rem) !important;
  font-weight: 800 !important;
  text-transform: none !important;
  letter-spacing: -0.01em !important;
}

/* ============================================================
   20. FIX trang KHUYẾN MÃI / promotion box vàng dated
   ============================================================ */
.khuyen-mai {
  background: linear-gradient(135deg, #fff8e1 0%, #ffecb3 100%) !important;
  border: 1px solid #ffd54f !important;
  border-radius: var(--hc-r-md) !important;
}