/*
 * Final layout contract
 * Loaded after the legacy/public layers so page-specific inline markup cannot
 * reintroduce viewport overflow or desktop geometry on small screens.
 */
html,
body {
  overflow-x: clip;
}

/* Customer hub hero: keep the AI artwork visible instead of burying it under
 * the near-black legacy overlay. Text remains white for contrast. */
body.cicc-light-ui:not(.home):not(.front-page):not(.search):not(.category).page-template-page-khach-hang .cicc-hero {
  background-image:
    linear-gradient(90deg, rgba(7, 55, 78, .78), rgba(7, 89, 133, .52) 54%, rgba(14, 116, 144, .2)),
    url('../images/cicc-ai-command-center-hero.webp') !important;
  background-position: center, center right;
  background-size: cover, cover;
  min-height: clamp(460px, 36vw, 560px);
  display: grid;
  align-items: center;
  padding-block: clamp(5.5rem, 8vw, 8rem) !important;
}

body.cicc-light-ui:not(.home):not(.front-page):not(.search):not(.category).page-template-page-khach-hang .cicc-hero__content {
  width: min(100% - 3rem, 920px);
  max-width: 920px;
  margin-inline: auto;
}

body.page-template-page-khach-hang .cicc-customer-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  margin-bottom: 1.35rem;
  padding: .48rem .78rem;
  border: 1px solid rgba(165, 243, 252, .35);
  border-radius: 999px;
  color: #a5f3fc;
  background: rgba(2, 24, 43, .34);
  box-shadow: 0 8px 24px rgba(2, 24, 43, .16);
  font-size: .64rem;
  font-weight: 900;
  letter-spacing: .18em;
}

body.page-template-page-khach-hang .cicc-customer-hero__eyebrow span {
  width: .45rem;
  height: .45rem;
  border-radius: 50%;
  background: #5eead4;
  box-shadow: 0 0 0 .25rem rgba(94, 234, 212, .14), 0 0 16px #5eead4;
}

body.page-template-page-khach-hang .cicc-customer-hero__eyebrow b {
  color: rgba(255, 255, 255, .46);
}

body.page-template-page-khach-hang .cicc-hero h1 {
  max-width: 980px;
  margin: 0 auto;
  font-size: clamp(2.7rem, 6vw, 5.8rem);
  line-height: .98;
  letter-spacing: -.07em;
  text-wrap: balance;
}

body.page-template-page-khach-hang .cicc-hero h1 em {
  display: inline-block;
  color: #7dd3fc !important;
  font-style: normal;
  background: linear-gradient(100deg, #a5f3fc, #7dd3fc 48%, #c4b5fd);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

body.page-template-page-khach-hang .cicc-customer-hero__lead {
  max-width: 700px;
  margin: 1.5rem auto 0;
  color: rgba(239, 250, 255, .82) !important;
  font-size: clamp(1rem, 1.4vw, 1.2rem);
  line-height: 1.75;
}

body.page-template-page-khach-hang .cicc-customer-hero__ecosystem {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: .55rem;
  margin-top: 1.75rem;
}

body.page-template-page-khach-hang .cicc-customer-hero__ecosystem a {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .62rem .82rem;
  border: 1px solid rgba(165, 243, 252, .24);
  border-radius: .7rem;
  color: #e0f2fe !important;
  background: rgba(2, 24, 43, .3);
  font-size: .72rem;
  font-weight: 800;
  text-decoration: none;
  backdrop-filter: blur(8px);
  transition: transform .2s ease, border-color .2s ease, background .2s ease;
}

body.page-template-page-khach-hang .cicc-customer-hero__ecosystem a:hover {
  border-color: rgba(165, 243, 252, .7);
  background: rgba(8, 145, 178, .3);
  transform: translateY(-2px);
}

body.page-template-page-khach-hang .cicc-customer-hero__ecosystem span {
  color: #67e8f9;
  font-size: .58rem;
  letter-spacing: .08em;
}

body.page-template-page-khach-hang .cicc-customer-hero__proof {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1.5rem 3rem;
  margin-top: 2.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(165, 243, 252, .2);
}

body.page-template-page-khach-hang .cicc-customer-hero__proof div {
  display: flex;
  align-items: baseline;
  gap: .45rem;
}

body.page-template-page-khach-hang .cicc-customer-hero__proof strong {
  color: #fff !important;
  font-size: 1.25rem;
  letter-spacing: -.04em;
}

body.page-template-page-khach-hang .cicc-customer-hero__proof span {
  color: rgba(224, 242, 254, .68) !important;
  font-size: .68rem;
}

/* Customer hub spacing scale: give the page a calmer editorial rhythm. */
body.page-template-page-khach-hang .cicc-section {
  padding-block: clamp(3.5rem, 5vw, 5.5rem) !important;
}

body.page-template-page-khach-hang .cicc-section[style*="padding-bottom:0"] {
  padding-top: clamp(2.25rem, 4vw, 3.5rem) !important;
  padding-bottom: 1rem !important;
}

body.page-template-page-khach-hang .cicc-filter {
  gap: 12px !important;
  padding: clamp(1.25rem, 2vw, 2rem) !important;
}

body.page-template-page-khach-hang #client-grid {
  gap: clamp(1.25rem, 2vw, 2rem) !important;
}

body.page-template-page-khach-hang #client-grid > .cicc-card {
  border-radius: 1.15rem !important;
}

@media (max-width: 768px) {
  body.cicc-light-ui:not(.home):not(.front-page):not(.search):not(.category).page-template-page-khach-hang .cicc-hero {
    min-height: 390px;
    padding-block: 5rem 4.5rem !important;
    background-image:
      linear-gradient(90deg, rgba(7, 55, 78, .8), rgba(7, 89, 133, .52) 58%, rgba(14, 116, 144, .2)),
      url('../images/cicc-ai-command-center-hero-mobile.webp') !important;
  }

  body.cicc-light-ui:not(.home):not(.front-page):not(.search):not(.category).page-template-page-khach-hang .cicc-hero__content {
    width: min(100% - 2rem, 560px);
  }

  body.page-template-page-khach-hang .cicc-hero h1 {
    font-size: clamp(2.25rem, 11vw, 4rem);
  }

  body.page-template-page-khach-hang .cicc-customer-hero__lead {
    font-size: .95rem;
    line-height: 1.65;
  }

  body.page-template-page-khach-hang .cicc-customer-hero__proof {
    gap: .8rem 1rem;
    margin-top: 1.75rem;
  }

  body.page-template-page-khach-hang .cicc-customer-hero__proof div {
    flex-direction: column;
    align-items: center;
    gap: .15rem;
    text-align: center;
  }

  body.page-template-page-khach-hang .cicc-customer-hero__proof span {
    max-width: 7rem;
  }

  body.page-template-page-khach-hang .cicc-section {
    padding-block: 2.75rem !important;
  }

  body.page-template-page-khach-hang .cicc-section[style*="padding-bottom:0"] {
    padding-top: 1.75rem !important;
    padding-bottom: .5rem !important;
  }

  body.page-template-page-khach-hang .cicc-filter {
    padding: 1rem !important;
  }

  body.page-template-page-khach-hang #client-grid {
    gap: 1rem !important;
  }

  body.page-template-page-khach-hang #client-grid > .cicc-card > div:last-child {
    padding: 1.15rem !important;
  }
}

img,
svg,
video,
iframe {
  max-width: 100%;
}

.container,
.cicc-section,
.cicc-news-page,
.cicc-news-page .container {
  min-width: 0;
}

.cicc-news-page {
  overflow-x: clip;
}

/* News slider: three cards on desktop, one swipeable card on small screens. */
.cicc-news-page #featured-track {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-inline: contain;
}

.cicc-news-page #featured-track > .cicc-news-featured-card {
  flex: 0 0 calc((100% - 40px) / 3) !important;
  min-width: 0 !important;
  max-width: calc((100% - 40px) / 3);
}

@media (max-width: 680px) {
  .cicc-news-page #post-filters {
    flex-wrap: nowrap !important;
    max-width: 100%;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-inline: contain;
  }

  .cicc-news-page #post-filters > .cicc-filter__btn {
    flex: 0 0 auto;
  }

  .cicc-news-page #featured-track > .cicc-news-featured-card {
    flex: 0 0 min(86vw, 320px) !important;
    max-width: min(86vw, 320px);
  }
}

/* The homepage logo rail is intentionally wider than the viewport. Keep that
 * animation inside its own paint box so it never changes document geometry. */
.logo-wall {
  overflow: clip !important;
  contain: paint;
}

/* AI landing uses the shared header; mobile must use the drawer only. */
@media (max-width: 1024px) {
  body.cicc-ai-platform-landing #site-header {
    overflow: clip;
  }

  body.cicc-ai-platform-landing #site-header .main-nav {
    display: none !important;
  }

  body.cicc-ai-platform-landing #site-header .header-inner {
    min-width: 0;
  }
}

/* Normalized customer/project drawer UI */
.cicc-project-filters{display:grid;gap:16px;padding:22px;border:1px solid rgba(15,23,42,.08);border-radius:20px;background:rgba(255,255,255,.92);box-shadow:0 12px 36px rgba(15,23,42,.06)}
.cicc-project-filters__search{display:flex;gap:10px}.cicc-project-filters input,.cicc-project-filters select{width:100%;min-height:46px;padding:0 14px;border:1px solid #dbe4ee;border-radius:12px;background:#fff;color:#10233f;font:inherit}.cicc-project-filters__search input{flex:1}.cicc-project-filters button{min-height:46px;padding:0 18px;border:0;border-radius:12px;background:#0b6b4b;color:#fff;font-weight:700;cursor:pointer}.cicc-project-filters__selects{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) auto;gap:12px;align-items:end}.cicc-project-filters label{display:grid;gap:7px;color:#516174;font-size:.78rem;font-weight:700}.cicc-project-filters__reset{background:#edf3f1!important;color:#0b6b4b!important}.cicc-project-results{margin:24px 0 14px;color:#64748b}.cicc-project-results p{margin:0}.cicc-project-pagination{display:flex;justify-content:center;gap:8px;margin-top:42px}.cicc-project-pagination .page-numbers{display:inline-flex;align-items:center;justify-content:center;min-width:40px;height:40px;padding:0 12px;border:1px solid #dbe4ee;border-radius:10px;color:#10233f;text-decoration:none}.cicc-project-pagination .current{background:#10233f;color:#fff;border-color:#10233f}
@media(max-width:760px){.cicc-project-filters__search{display:grid;grid-template-columns:1fr}.cicc-project-filters__selects{grid-template-columns:1fr}.cicc-project-filters__selects label,.cicc-project-filters__selects button{width:100%}}

/* Premium client logo rail directly under the customer hero. */
.cicc-client-logo-rail{position:relative;z-index:2;padding:38px 0 34px;background:linear-gradient(180deg,#f6fbf9 0%,#fff 100%);border-bottom:1px solid rgba(15,23,42,.07);overflow:hidden}.cicc-client-logo-rail__head{display:flex;justify-content:space-between;align-items:end;gap:24px;margin-bottom:20px}.cicc-client-logo-rail__kicker{display:block;margin-bottom:8px;color:#0b7a56;font-size:.68rem;font-weight:800;letter-spacing:.16em}.cicc-client-logo-rail h2{margin:0;color:#10233f;font-size:clamp(1.2rem,2vw,1.65rem);letter-spacing:-.03em}.cicc-client-logo-rail__controls{display:flex;gap:8px}.cicc-logo-control{display:grid;place-items:center;width:42px;height:42px;border:1px solid #d7e4df;border-radius:50%;background:#fff;color:#0b6b4b;font-size:1.1rem;cursor:pointer;transition:all .25s ease}.cicc-logo-control:hover,.cicc-logo-control:focus-visible{background:#0b6b4b;color:#fff;border-color:#0b6b4b;transform:translateY(-2px);box-shadow:0 8px 18px rgba(11,107,75,.2)}.cicc-client-logo-rail__viewport{position:relative;margin-inline:-8px;padding:8px;overflow:hidden;mask-image:linear-gradient(90deg,transparent 0,#000 4%,#000 96%,transparent 100%)}.cicc-client-logo-rail__track{display:flex;gap:14px;width:max-content;animation:ciccLogoMarquee 42s linear infinite;will-change:transform}.cicc-client-logo-rail__viewport:hover .cicc-client-logo-rail__track,.cicc-client-logo-rail__viewport:focus-within .cicc-client-logo-rail__track{animation-play-state:paused}.cicc-client-logo{position:relative;display:flex;align-items:center;gap:12px;width:218px;min-height:78px;padding:14px 16px;border:1px solid rgba(15,23,42,.08);border-radius:16px;background:rgba(255,255,255,.92);box-shadow:0 6px 22px rgba(15,23,42,.045);color:#263b52;text-decoration:none;transition:transform .28s ease,box-shadow .28s ease,border-color .28s ease;background-clip:padding-box}.cicc-client-logo:hover,.cicc-client-logo:focus-visible{transform:translateY(-5px);border-color:#65b89b;box-shadow:0 16px 30px rgba(11,107,75,.14);outline:none}.cicc-client-logo__mark{display:grid;place-items:center;flex:0 0 38px;width:38px;height:38px;border-radius:12px;background:linear-gradient(135deg,#0b6b4b,#8bd2ac);color:#fff;font-size:1rem;font-weight:800;box-shadow:inset 0 1px rgba(255,255,255,.35)}.cicc-client-logo__name{display:-webkit-box;overflow:hidden;color:#17324d;font-size:.82rem;font-weight:750;line-height:1.25;-webkit-box-orient:vertical;-webkit-line-clamp:2}.cicc-client-logo__arrow{position:absolute;top:9px;right:12px;color:#69a890;font-size:.9rem;opacity:0;transform:translate(-3px,3px);transition:all .25s ease}.cicc-client-logo:hover .cicc-client-logo__arrow,.cicc-client-logo:focus-visible .cicc-client-logo__arrow{opacity:1;transform:none}.cicc-client-logo-rail__meta{display:flex;justify-content:space-between;gap:12px;margin-top:14px;color:#8495a6;font-size:.7rem}.cicc-logo-progress{display:block;flex:1;max-width:180px;height:2px;margin:auto;background:linear-gradient(90deg,#0b6b4b 0 36%,#dceae4 36%);border-radius:99px}.cicc-logo-progress::after{content:'';display:block;width:36%;height:100%;background:#0b6b4b;border-radius:99px;animation:ciccLogoProgress 42s linear infinite}.cicc-client-logo-rail__viewport.is-dragging{cursor:grabbing}.cicc-client-logo-rail__viewport.is-dragging .cicc-client-logo-rail__track{animation-play-state:paused}@keyframes ciccLogoMarquee{from{transform:translateX(0)}to{transform:translateX(calc(-50% - 7px))}}@keyframes ciccLogoProgress{from{transform:translateX(0)}to{transform:translateX(178px)}}
@media(max-width:760px){.cicc-client-logo-rail{padding:28px 0 25px}.cicc-client-logo-rail__head{align-items:center}.cicc-client-logo-rail__controls{display:none}.cicc-client-logo-rail__viewport{overflow-x:auto;mask-image:none;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}.cicc-client-logo-rail__track{animation:none}.cicc-client-logo{width:205px;scroll-snap-align:start}.cicc-client-logo-rail__meta{font-size:.64rem}.cicc-client-logo-rail__meta span:first-child{display:none}.cicc-logo-progress{max-width:none}}
@media(prefers-reduced-motion:reduce){.cicc-client-logo-rail__track,.cicc-logo-progress::after{animation:none!important}.cicc-client-logo-rail__viewport{overflow-x:auto}.cicc-client-logo-rail__track{transform:none}}

/* Use the real customer featured/logo artwork, never generated initials. */
.cicc-client-logo__image{display:grid;place-items:center;flex:0 0 92px;width:92px;height:48px;padding:5px;border-radius:9px;background:#fff;overflow:hidden}.cicc-client-logo__image img{display:block;width:100%;height:100%;object-fit:contain;object-position:center;filter:saturate(.92);transition:transform .3s ease,filter .3s ease}.cicc-client-logo:hover .cicc-client-logo__image img,.cicc-client-logo:focus-visible .cicc-client-logo__image img{transform:scale(1.08);filter:saturate(1.08)}.cicc-client-logo__name{font-size:.72rem}.cicc-client-logo{width:250px;min-height:82px}
@media(max-width:760px){.cicc-client-logo{width:235px}.cicc-client-logo__image{flex-basis:88px;width:88px}}

/* The client rail must keep moving on every viewport. Touch scrolling and
 * hover-pause remain available, but responsive rules must not freeze it. */
.cicc-client-logo-rail__track{animation:ciccLogoMarquee 42s linear infinite!important}
@media(max-width:760px){.cicc-client-logo-rail__track{animation:ciccLogoMarquee 52s linear infinite!important}}
.cicc-client-logo-rail__viewport.is-manual .cicc-client-logo-rail__track{animation:none!important}

/* Interaction polish: clear hover state, contrast-safe color rendering and
 * touch-friendly feedback without turning the rail into visual noise. */
.cicc-client-logo-rail{background:radial-gradient(circle at 12% 0%,rgba(139,210,172,.18),transparent 32%),linear-gradient(180deg,#f4faf7 0%,#fff 78%)}.cicc-client-logo-rail__viewport{padding:12px 10px 14px}.cicc-client-logo-rail__viewport::before,.cicc-client-logo-rail__viewport::after{content:'';position:absolute;z-index:2;top:0;bottom:0;width:56px;pointer-events:none}.cicc-client-logo-rail__viewport::before{left:0;background:linear-gradient(90deg,#f4faf7,transparent)}.cicc-client-logo-rail__viewport::after{right:0;background:linear-gradient(270deg,#fff,transparent)}.cicc-client-logo{isolation:isolate;border-color:rgba(20,74,58,.1);background:linear-gradient(145deg,rgba(255,255,255,.98),rgba(248,252,250,.94));box-shadow:0 8px 24px rgba(15,58,45,.06);will-change:transform}.cicc-client-logo::before{content:'';position:absolute;inset:-1px;z-index:-1;border-radius:17px;background:linear-gradient(120deg,#68c49f,#d4eee3 45%,#83cdb0);opacity:0;transition:opacity .3s ease}.cicc-client-logo:hover,.cicc-client-logo:focus-visible{border-color:transparent;background:#fff;box-shadow:0 18px 38px rgba(11,107,75,.16),0 0 0 4px rgba(104,196,159,.12)}.cicc-client-logo:hover::before,.cicc-client-logo:focus-visible::before{opacity:1}.cicc-client-logo__image{background:linear-gradient(135deg,#fff,#f5faf8);border:1px solid rgba(15,23,42,.05);box-shadow:inset 0 0 0 1px rgba(255,255,255,.8)}.cicc-client-logo__name{color:#173b35;transition:color .25s ease}.cicc-client-logo:hover .cicc-client-logo__name,.cicc-client-logo:focus-visible .cicc-client-logo__name{color:#075b42}.cicc-client-logo__arrow{z-index:1}.cicc-logo-control:active{transform:translateY(0) scale(.94)}.cicc-client-logo-rail__viewport.is-touching .cicc-client-logo-rail__track{animation-play-state:paused!important}.cicc-client-logo-rail__meta span:first-child::before{content:'●';margin-right:6px;color:#0b9b68;font-size:.58rem;vertical-align:1px}.cicc-client-logo-rail__meta{align-items:center}
@media(max-width:760px){.cicc-client-logo-rail__viewport::before,.cicc-client-logo-rail__viewport::after{display:none}.cicc-client-logo-rail__viewport{padding-inline:2px}.cicc-client-logo{box-shadow:0 7px 20px rgba(15,58,45,.07)}}

/* Final showcase geometry: cards never shrink, so the real artwork remains
 * the visual focus instead of becoming a tiny inline thumbnail. */
.cicc-client-logo-rail__track{gap:18px}.cicc-client-logo{display:flex;flex:0 0 272px;width:272px;min-height:112px;padding:16px 18px;flex-direction:column;align-items:stretch;justify-content:center;gap:10px}.cicc-client-logo__image{flex:0 0 auto;width:100%;height:62px;padding:6px 12px}.cicc-client-logo__name{display:block;overflow:hidden;padding-right:20px;text-overflow:ellipsis;white-space:nowrap;font-size:.68rem;font-weight:800;letter-spacing:.02em;text-transform:uppercase}.cicc-client-logo__arrow{top:12px;right:14px}.cicc-client-logo-rail__meta{margin-top:16px}
.cicc-client-logo__image img{display:block!important;width:auto!important;height:auto!important;max-width:100%!important;max-height:62px!important;min-width:0!important;min-height:0!important;object-fit:contain!important;object-position:center!important;aspect-ratio:auto!important}
.cicc-client-logo-rail__viewport:hover .cicc-client-logo-rail__track,.cicc-client-logo-rail__viewport:focus-within .cicc-client-logo-rail__track{animation-play-state:paused!important}
.cicc-client-logo:hover,.cicc-client-logo:focus-visible{cursor:pointer}
.cicc-client-logo-rail__viewport.is-pointer-over .cicc-client-logo-rail__track{animation-play-state:paused!important}

/* Let the client showcase belong to the hero: a floating glass panel that
 * overlaps the hero edge without covering the proof metrics. */
.cicc-client-logo-rail{margin-top:-72px;padding:0 0 34px;background:transparent;border:0;position:relative;z-index:5}.cicc-client-logo-rail>.container{padding:26px 30px 22px;border:1px solid rgba(255,255,255,.78);border-radius:26px;background:rgba(255,255,255,.94);box-shadow:0 22px 55px rgba(4,44,37,.16),0 4px 16px rgba(4,44,37,.08);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}.cicc-client-logo-rail__head{margin-bottom:14px}.cicc-client-logo-rail__kicker{color:#087653}.cicc-client-logo-rail__viewport{background:linear-gradient(180deg,rgba(247,252,250,.86),rgba(255,255,255,.96));border:1px solid rgba(10,91,68,.08);border-radius:17px}.cicc-client-logo-rail__meta{margin-top:12px}
@media(max-width:760px){.cicc-client-logo-rail{margin-top:-40px;padding-bottom:24px}.cicc-client-logo-rail>.container{padding:18px 16px 16px;border-radius:20px}.cicc-client-logo-rail__head{margin-bottom:10px}.cicc-client-logo-rail__viewport{border-radius:14px}}
@media(max-width:760px){.cicc-client-logo{flex:0 0 238px;width:238px;min-height:104px}.cicc-client-logo__image{height:58px}}