/* BUILD109.2.38 — shared ISS frontend sticky/header guard + article title color. */
body.iss-theme{
  --iss-content-sticky-top:18px;
}
body.iss-theme.iss-header-sticky{
  --iss-content-sticky-top:calc(var(--ph-admin-toolbar-height,0px) + var(--header-main,74px) + 18px);
}
body.iss-theme.iss-topbar-sticky:not(.iss-header-sticky){
  --iss-content-sticky-top:calc(var(--ph-admin-toolbar-height,0px) + var(--header-top,42px) + 18px);
}
body.iss-theme.iss-header-sticky.iss-topbar-sticky{
  --iss-content-sticky-top:calc(var(--ph-admin-toolbar-height,0px) + var(--header-top,42px) + var(--header-main,74px) + 18px);
}

/* All frontend sticky category/article blocks stop below the visible sticky header stack. */
body.iss-theme .iss-product-sidebar,
body.iss-theme .topic-sidebar,
body.iss-theme .iss-other-articles,
body.iss-theme .iss-sharing-v2 .topic-sidebar,
body.iss-theme .iss-service-category__sidebar,
body.iss-theme .iss-service-sharing-category__sidebar{
  top:var(--iss-content-sticky-top)!important;
  scroll-margin-top:var(--iss-content-sticky-top);
}

/* Keep sticky panels visually behind the fixed/sticky header and opaque while scrolling. */
body.iss-theme .iss-product-sidebar,
body.iss-theme .topic-sidebar,
body.iss-theme .iss-other-articles,
body.iss-theme .iss-service-category__sidebar,
body.iss-theme .iss-service-sharing-category__sidebar{
  z-index:20;
  background:var(--iss-page-bg,#fff);
}

/* Related/article-category titles use the same black body ink instead of the theme accent. */
body.iss-theme .service-v2__other-grid h3,
body.iss-theme .service-sharing-card h3,
body.iss-theme .iss-service-v2__article-card .iss-service-v2__card-body strong,
body.iss-theme .iss-sharing-v2 .card__body h3,
body.iss-theme .iss-sharing-v2-detail .card__body h3{
  color:var(--iss-text,#000)!important;
}

/* Existing responsive CSS may switch these blocks to position:static; do not force sticky on small screens. */
@media(max-width:980px){
  body.iss-theme .iss-product-sidebar,
  body.iss-theme .topic-sidebar,
  body.iss-theme .iss-other-articles,
  body.iss-theme .iss-service-category__sidebar,
  body.iss-theme .iss-service-sharing-category__sidebar{
    top:auto!important;
    scroll-margin-top:0;
  }
  body.iss-theme .iss-other-articles{position:static!important;z-index:auto;}
}

/* BUILD109.2.39 — unified sidebar panel + equal-height frontend card contract. */
body.iss-theme{
  --iss-content-panel-border:var(--iss-theme-border,var(--ph-border-color,#c0c1c3));
  --iss-content-panel-radius:16px;
}

/* Category panels use one visual contract. The canonical other-articles component owns itself. */
body.iss-theme .iss-product-sidebar,
body.iss-theme .iss-sharing-v2 .topic-sidebar,
body.iss-theme .iss-service-category__sidebar,
body.iss-theme .iss-service-sharing-category__sidebar{
  border:1px solid var(--iss-content-panel-border)!important;
  border-radius:var(--iss-content-panel-radius)!important;
  background:var(--iss-page-bg,#fff)!important;
  overflow:hidden;
  box-sizing:border-box;
}

/* Product/category panel titles share one compact heading contract. */
body.iss-theme .iss-product-sidebar__title,
body.iss-theme .iss-sharing-v2 .sidebar__title,
body.iss-theme .iss-service-category__sidebar > h2,
body.iss-theme .iss-service-sharing-category__sidebar > h2{
  margin:0!important;
  padding:16px 18px!important;
  min-height:56px;
  display:flex;
  align-items:center;
  background:var(--iss-sidebar-title-bg,var(--iss-blue-900,#001b44))!important;
  border:0!important;
  border-bottom:1px solid var(--iss-content-panel-border)!important;
  color:var(--iss-sidebar-title-text,#fff)!important;
  font-size:1rem!important;
  line-height:1.3!important;
  font-weight:700!important;
}

/* Every card grid stretches items to the tallest card in that visual row. */
body.iss-theme .iss-sharing-list-grid,
body.iss-theme .iss-sharing-v2-detail .grid,
body.iss-theme .iss-news-grid,
body.iss-theme .iss-folder-grid,
body.iss-theme .iss-products-grid,
body.iss-theme .iss-product-five-grid,
body.iss-theme .iss-product-recent-grid,
body.iss-theme .iss-service-sharing-category__grid,
body.iss-theme .service-v2__other-grid,
body.iss-theme .about-product-grid,
body.iss-theme .about-activity-grid,
body.iss-theme .certificate-grid,
body.iss-theme .support-grid,
body.iss-theme .audience-grid{
  align-items:stretch!important;
}

body.iss-theme .iss-sharing-list-grid > .card,
body.iss-theme .iss-sharing-v2-detail .grid > .card,
body.iss-theme .iss-news-grid > .iss-news-card,
body.iss-theme .iss-folder-grid > .iss-folder-card,
body.iss-theme .iss-products-grid > .iss-product-card-v2,
body.iss-theme .iss-product-five-grid > .iss-product-card-v2,
body.iss-theme .iss-product-recent-grid > .iss-product-card-v2,
body.iss-theme .iss-service-sharing-category__grid > .iss-service-sharing-category__card,
body.iss-theme .service-v2__other-grid > .card,
body.iss-theme .about-product-grid > .about-product-card,
body.iss-theme .about-activity-grid > .about-activity-card,
body.iss-theme .certificate-grid > .certificate-card,
body.iss-theme .support-grid > .support-card,
body.iss-theme .audience-grid > .audience-card{
  height:100%!important;
  min-height:0;
  align-self:stretch!important;
  box-sizing:border-box;
}

/* Keep media fixed by its own ratio and let the text/body consume the remaining height. */
body.iss-theme .iss-sharing-list-grid > .card,
body.iss-theme .iss-sharing-v2-detail .grid > .card,
body.iss-theme .iss-folder-card,
body.iss-theme .iss-product-card-v2,
body.iss-theme .iss-service-sharing-category__card,
body.iss-theme .about-product-card,
body.iss-theme .about-activity-card,
body.iss-theme .certificate-card,
body.iss-theme .support-card{
  display:flex!important;
  flex-direction:column;
}
body.iss-theme .card__body,
body.iss-theme .iss-folder-card__body,
body.iss-theme .iss-product-card-v2__body,
body.iss-theme .iss-news-card__body,
body.iss-theme .certificate-card__body{
  flex:1 1 auto;
}
body.iss-theme .iss-news-card > a{
  height:100%;
  display:flex!important;
  flex-direction:column;
}
body.iss-theme .iss-service-sharing-category__card{
  display:flex!important;
  flex-direction:column;
}
body.iss-theme .iss-service-sharing-category__card > :last-child{
  flex:1 1 auto;
}

/* Horizontal card tracks also stretch siblings to a common track height. */
body.iss-theme .partner-track,
body.iss-theme .iss-service-v2__hscroll-track,
body.iss-theme .slider__track{
  align-items:stretch!important;
}
body.iss-theme .partner-card,
body.iss-theme .iss-service-v2__hscroll-item,
body.iss-theme .slider__item{
  align-self:stretch;
}

/* One-column mobile cards return to natural height; no artificial empty vertical space. */
@media(max-width:640px){
  body.iss-theme .iss-sharing-list-grid > .card,
  body.iss-theme .iss-sharing-v2-detail .grid > .card,
  body.iss-theme .iss-news-grid > .iss-news-card,
  body.iss-theme .iss-folder-grid > .iss-folder-card,
  body.iss-theme .iss-products-grid > .iss-product-card-v2,
  body.iss-theme .iss-product-five-grid > .iss-product-card-v2,
  body.iss-theme .iss-product-recent-grid > .iss-product-card-v2,
  body.iss-theme .iss-service-sharing-category__grid > .iss-service-sharing-category__card,
  body.iss-theme .service-v2__other-grid > .card,
  body.iss-theme .about-product-grid > .about-product-card,
  body.iss-theme .about-activity-grid > .about-activity-card,
  body.iss-theme .certificate-grid > .certificate-card,
  body.iss-theme .support-grid > .support-card,
  body.iss-theme .audience-grid > .audience-card{
    height:auto!important;
  }
}

/* BUILD109.2.40 — runtime fix for horizontal carousels whose cards kept intrinsic heights.
   A flex item's explicit height:100% prevents cross-axis stretch in these auto-height tracks.
   Reset the item cross-size to auto, then stretch the track and let the card body fill the remainder. */
body.iss-theme [data-iss-hscroll-track],
body.iss-theme [data-hscroll-track],
body.iss-theme .iss-service-v2__article-carousel .iss-service-v2__hscroll-track,
body.iss-theme .iss-service-v2__services-carousel .iss-service-v2__hscroll-track,
body.iss-theme .article-carousel .h-scroll__track,
body.iss-theme .service-carousel .h-scroll__track{
  align-items:stretch!important;
}

body.iss-theme .iss-service-v2__article-carousel .iss-service-v2__hscroll-item,
body.iss-theme .iss-service-v2__services-carousel .iss-service-v2__hscroll-item,
body.iss-theme .article-carousel .h-scroll__item,
body.iss-theme .service-carousel .h-scroll__item{
  height:auto!important;
  align-self:stretch!important;
}

body.iss-theme .iss-service-v2__article-carousel .iss-service-v2__article-card,
body.iss-theme .iss-service-v2__services-carousel .iss-service-v2__service-card,
body.iss-theme .article-carousel .h-scroll__item > .card,
body.iss-theme .service-carousel .h-scroll__item > .card{
  display:flex!important;
  flex-direction:column;
}

body.iss-theme .iss-service-v2__article-carousel .iss-service-v2__card-body,
body.iss-theme .iss-service-v2__services-carousel .iss-service-v2__service-card-content,
body.iss-theme .article-carousel .h-scroll__item > .card > .card__body,
body.iss-theme .service-carousel .h-scroll__item > .card > .card__body{
  flex:1 1 auto;
}

/* Exact ISS sharing/service article carousel shown on production: all sibling cards
   in the horizontal row inherit the tallest card height, regardless of title line count. */
body.iss-theme .iss-service-v2__article-carousel .iss-service-v2__hscroll-track{
  display:flex!important;
  align-items:stretch!important;
}
body.iss-theme .iss-service-v2__article-carousel .iss-service-v2__hscroll-item{
  display:flex!important;
  flex-direction:column;
  height:auto!important;
  min-height:0!important;
  align-self:stretch!important;
}
body.iss-theme .iss-service-v2__article-carousel .iss-service-v2__card-media{
  flex:0 0 auto;
}
body.iss-theme .iss-service-v2__article-carousel .iss-service-v2__card-body{
  display:flex!important;
  flex:1 1 auto;
  align-items:flex-start;
}

/* On a one-card mobile viewport keep natural card height. */
@media(max-width:620px){
  body.iss-theme .iss-service-v2__article-carousel .iss-service-v2__hscroll-item,
  body.iss-theme .iss-service-v2__services-carousel .iss-service-v2__hscroll-item,
  body.iss-theme .article-carousel .h-scroll__item,
  body.iss-theme .service-carousel .h-scroll__item{
    height:auto!important;
  }
}

/* BUILD109.2.96 — FOOTER / HEADER WIDTH PARITY RESTORE
   Restore the approved 109.2.33 contract without replacing home-v10.css:
   - footer background spans the viewport;
   - footer content uses the same --container shell/gutters as Header;
   - no extra horizontal inset on the footer panel/edge columns. */
body.iss-theme .iss-footer{
  width:100% !important;
  max-width:none !important;
  margin-left:0 !important;
  margin-right:0 !important;
}
body.iss-theme .iss-footer .iss-container{
  width:min(var(--container),calc(100% - 32px)) !important;
  margin-left:auto !important;
  margin-right:auto !important;
  padding-left:0 !important;
  padding-right:0 !important;
}
body.iss-theme .iss-footer__panel{
  width:100% !important;
  max-width:none !important;
  margin-left:0 !important;
  margin-right:0 !important;
  padding-left:0 !important;
  padding-right:0 !important;
}
@media(min-width:821px){
  body.iss-theme .iss-footer__left,
  body.iss-theme .iss-footer__right{
    padding-left:0 !important;
    padding-right:0 !important;
  }
}
@media(max-width:820px){
  body.iss-theme .iss-footer .iss-container{
    width:min(var(--container),calc(100% - 24px)) !important;
  }
}
@media(max-width:560px){
  body.iss-theme .iss-footer .iss-container{
    width:calc(100% - 20px) !important;
  }
}

/* BUILD109.2.111 + 109.2.114 — Home Audience media / border parity.
 * 109.2.114 corrects the image contract to natural height + white background.
 * Keep this in the late-loaded guard so Theme Customizer generic image rules do not re-stretch media.
 */
body.iss-theme.home .section--audience .audience-card{
  gap:0!important;
  padding:0!important;
  border:1px solid var(--iss-content-panel-border,#c0c1c3)!important;
  border-radius:var(--iss-content-panel-radius,16px)!important;
  overflow:hidden!important;
  box-sizing:border-box;
  background:#fff!important;
}
body.iss-theme.home .section--audience .audience-card__image{
  margin:0!important;
  padding:0!important;
  overflow:hidden!important;
  border:0!important;
  border-right:1px solid var(--iss-content-panel-border,#c0c1c3)!important;
  border-radius:0!important;
  box-sizing:border-box;
  background:#fff!important;
}
body.iss-theme.home .section--audience .audience-card__image img{
  display:block!important;
  width:100%!important;
  height:auto!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:#fff!important;
}
body.iss-theme.home .section--audience .audience-card__body{
  min-width:0;
  padding:20px!important;
  box-sizing:border-box;
}
@media(max-width:560px){
  body.iss-theme.home .section--audience .audience-card__image{
    border-right:0!important;
    border-bottom:1px solid var(--iss-content-panel-border,#c0c1c3)!important;
  }
}


/* BUILD109.2.113 — Home Products ADMIN-width correction.
 * 109.2.112 incorrectly let PRODUCTS escape to viewport/body width.
 * Correct contract: Theme Customizer/Admin container_width remains the single owner.
 * PRODUCTS uses the configured --iss-page-width shell, while brand rows remove only
 * their extra horizontal inset so the category grid reaches the two Admin-width edges.
 * Audience keeps the 109.2.111 media/border parity with square corners per owner request.
 */
body.iss-theme.home .section--audience .audience-card{
  border-radius:0!important;
}

body.iss-theme.home .product-brands > .iss-container{
  box-sizing:border-box!important;
  width:min(var(--iss-page-width,var(--container,1440px)),calc(100% - 32px))!important;
  max-width:var(--iss-page-width,var(--container,1440px))!important;
  margin-left:auto!important;
  margin-right:auto!important;
}
body.iss-theme.home .product-brands > .iss-container > .section-title{
  margin-left:0!important;
  margin-right:0!important;
}
body.iss-theme.home .product-brands .brand-row,
body.iss-theme.home .product-brands .brand-row:nth-child(even){
  padding-left:0!important;
  padding-right:0!important;
}
@media(max-width:560px){
  body.iss-theme.home .product-brands > .iss-container{
    width:calc(100% - 20px)!important;
  }
}

/* BUILD109.2.115 — Home Audience media column widen.
 * Keep the image on the natural-media contract from 109.2.114:
 * width:100% + height:auto, with no height/min-height constraint on <img>.
 * Only widen the media column so the natural image becomes taller and the
 * vertical white remainder inside equal-height audience cards is reduced.
 */
@media(min-width:821px){
  body.iss-theme.home .section--audience .audience-card{
    grid-template-columns:clamp(160px,22%,190px) minmax(0,1fr)!important;
  }
}
@media(min-width:561px) and (max-width:820px){
  body.iss-theme.home .section--audience .audience-card{
    grid-template-columns:180px minmax(0,1fr)!important;
  }
}

/* BUILD109.2.116 — Home Product-by-Brand category state contract.
 * Default category label is white/body text. Only hover/focus uses the Admin
 * Theme Customizer hover color. Do not hard-code a brand color here.
 */
body.iss-theme.home .product-brands .brand-cat,
body.iss-theme.home .product-brands .brand-cat__label{
  background:#fff!important;
  color:var(--iss-text,var(--ph-text-color,#000))!important;
}
body.iss-theme.home .product-brands .brand-cat:hover,
body.iss-theme.home .product-brands .brand-cat:focus-visible{
  border-color:var(--iss-button-hover,var(--ph-button-hover-color,var(--iss-active)))!important;
}
body.iss-theme.home .product-brands .brand-cat:hover .brand-cat__label,
body.iss-theme.home .product-brands .brand-cat:focus-visible .brand-cat__label{
  background:var(--iss-button-hover,var(--ph-button-hover-color,var(--iss-active)))!important;
  color:var(--iss-active-text,var(--iss-button-text,#fff))!important;
}


/* BUILD109.2.117 — Home Product category image/title divider.
 * 109.2.54 removed the media border for a seamless body; the current UI
 * explicitly requires one horizontal separator between image and title.
 */
body.iss-theme.home .product-brands .brand-cat__image{
  border-bottom:1px solid var(--iss-border,#c0c1c3)!important;
}


/* BUILD109.2.118 — Home Audience real-image gap zero.
 * Root cause: legacy .audience-card__image remains display:grid + place-items:center.
 * With equal-height cards, a natural 4:3 image that is a few px shorter than the row
 * gets the remainder split above/below. Do NOT reintroduce height:100%/min-height on img.
 * Real-image wrappers opt out of grid centering; placeholders keep centered numbering.
 * The media column is widened from the 109.2.115 ceiling 190px to 205px so a 4:3
 * natural image reaches the current card row height without forced/cropped height.
 */
body.iss-theme.home .section--audience .audience-card__image--has-image{
  display:block!important;
  place-items:initial!important;
  align-content:normal!important;
  justify-content:normal!important;
  min-height:0!important;
  line-height:0!important;
}
body.iss-theme.home .section--audience .audience-card__image--placeholder{
  display:grid!important;
  place-items:center!important;
  line-height:normal!important;
}
body.iss-theme.home .section--audience .audience-card__image--has-image img{
  display:block!important;
  width:100%!important;
  height:auto!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  vertical-align:top!important;
}
@media(min-width:821px){
  body.iss-theme.home .section--audience .audience-card{
    grid-template-columns:clamp(172px,24%,205px) minmax(0,1fr)!important;
  }
}
@media(min-width:561px) and (max-width:820px){
  body.iss-theme.home .section--audience .audience-card{
    grid-template-columns:195px minmax(0,1fr)!important;
  }
}

/* BUILD109.2.119 — Home Support uses the site-wide content spacing contract.
 * The generic equal-height guard must not force height:100% on these cards;
 * grid stretch + a single min-height is the canonical sizing model.
 */
body.iss-theme.home .section--support .support-grid{
  gap:var(--ph-content-gap,24px)!important;
}
body.iss-theme.home .section--support .support-grid > .support-card{
  height:auto!important;
  min-height:338px!important;
  align-self:stretch!important;
}
@media(max-width:560px){
  body.iss-theme.home .section--support .support-grid > .support-card{
    height:auto!important;
    min-height:0!important;
  }
}

/* BUILD109.2.188 — ISS LÀ ĐỐI TÁC TIN CẬY / Home Audience current-CSS restore.
 * Rebase the approved 109.2.111→109.2.118 visual contract on the current shared CSS.
 * Keep this final and narrowly scoped so later generic card/media rules cannot re-stretch
 * or re-center Audience images. This is presentation-only; data/runtime ownership is unchanged.
 */
body.iss-theme.home .section--audience .audience-card{
  gap:0!important;
  padding:0!important;
  grid-template-columns:clamp(172px,24%,205px) minmax(0,1fr)!important;
  border:1px solid var(--iss-content-panel-border,var(--iss-border,#c0c1c3))!important;
  border-radius:0!important;
  overflow:hidden!important;
  box-sizing:border-box!important;
  background:#fff!important;
}
body.iss-theme.home .section--audience .audience-card__image{
  margin:0!important;
  padding:0!important;
  overflow:hidden!important;
  border:0!important;
  border-right:1px solid var(--iss-content-panel-border,var(--iss-border,#c0c1c3))!important;
  border-radius:0!important;
  box-sizing:border-box!important;
  background:#fff!important;
}
body.iss-theme.home .section--audience .audience-card__image--has-image{
  display:block!important;
  place-items:initial!important;
  align-content:normal!important;
  justify-content:normal!important;
  min-height:0!important;
  line-height:0!important;
}
body.iss-theme.home .section--audience .audience-card__image--placeholder{
  display:grid!important;
  place-items:center!important;
  line-height:normal!important;
}
body.iss-theme.home .section--audience .audience-card__image--has-image img,
body.iss-theme.home .section--audience .audience-card__image img{
  display:block!important;
  width:100%!important;
  height:auto!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  vertical-align:top!important;
  background:#fff!important;
}
body.iss-theme.home .section--audience .audience-card__body{
  min-width:0!important;
  padding:20px!important;
  box-sizing:border-box!important;
}
@media (min-width:561px) and (max-width:820px){
  body.iss-theme.home .section--audience .audience-card{
    grid-template-columns:195px minmax(0,1fr)!important;
  }
}
@media (max-width:560px){
  body.iss-theme.home .section--audience .audience-card{
    grid-template-columns:1fr!important;
    height:auto!important;
    min-height:0!important;
  }
  body.iss-theme.home .section--audience .audience-card__image{
    border-right:0!important;
    border-bottom:1px solid var(--iss-content-panel-border,var(--iss-border,#c0c1c3))!important;
  }
}

/* BUILD109.2.354 — show the audience name cleanly when its image is unavailable. */
body.iss-theme.home .section--audience .audience-card__image-fallback{
  box-sizing:border-box;
  display:grid;
  width:100%;
  min-height:180px;
  place-items:center;
  padding:20px 14px;
  background:#f8fafc;
  color:var(--iss-accent,#b88b55);
  font-size:clamp(18px,2vw,26px);
  font-weight:700;
  line-height:1.25;
  text-align:center;
  overflow-wrap:anywhere;
}
body.iss-theme.home .section--audience .audience-card__image-fallback[hidden]{display:none!important}