/* Homepage redesign 2026-08-19 — scoped to .hp-redesign to avoid clashing with existing theme styles */

/* Site-wide `section{height:40px}` rule (styles.css) collapses every <section> unless overridden —
   this is the root cause of most layout breakage seen in review; must beat it on every new section. */
main.hp-redesign section { height: auto; }

.hp-redesign { color: #16305c; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }
/* Theme convention: sections are full-width (no boxed/centered container) — see
   `.area-inner{width:100%}` / `.section-intro{width:100%}` in styles.css. Match that
   instead of importing a narrower Bootstrap-style boxed container. */
.hp-redesign .container { width: 100%; max-width: 1600px; margin: 0 auto; padding: 0 40px; box-sizing: border-box; }
.hp-redesign h2.hp-title { font-size: 32px; font-weight: 700; text-align: center; color: #16305c; margin-bottom: 8px; letter-spacing: -.01em; }
.hp-redesign h2.hp-title .accent { color: #ff7a00; }
.hp-redesign p.hp-subtitle { text-align: center; color: #5b6b85; font-size: 16px; max-width: 640px; margin: 0 auto 40px; }
.hp-redesign .hp-divider { width: 60px; height: 3px; background: #ff7a00; margin: 12px auto 0; }
/* NOTE: this block used to sit ABOVE the base h2.hp-title/p.hp-subtitle rules
   above — since both have identical specificity, source order decided the
   winner, so the base (desktop 32px) rule was silently beating this mobile
   override on every real mobile screen the entire time (confirmed via a
   Playwright computed-style check: h2.hp-title measured 32px at a 390px
   viewport). Moved below its base rules so it actually applies. */
@media (max-width: 767px) {
  .hp-redesign .container { padding: 0 16px; }
  .hp-redesign h2.hp-title { font-size: 22px; margin-bottom: 6px; }
  .hp-redesign p.hp-subtitle { font-size: 14px; margin-bottom: 24px; }
}

/* Hero — full section background, set inline from the CMS (Admin > Slide/Banner,
   record with parent=5) via style="background-image:url(...)" in main.blade.php.
   No !important here: an inline style only beats an external rule that IS
   !important, so this gradient must stay plain — it's just the fallback shown
   when the CMS hasn't got a banner image set yet (or it fails to load). */
.hp-hero { background-color: #eaf1ff; background-image: linear-gradient(120deg,#eaf1ff 0%,#dce9ff 60%,#cfe0ff 100%); background-size: cover; background-position: center; background-repeat: no-repeat; padding: 18px 0; overflow: hidden; }
.hp-hero .row { display: flex; flex-wrap: wrap; align-items: center; gap: 32px; width: 100%; max-width: none; margin: 0; padding-left: max(40px, calc((100vw - 1600px) / 2)); padding-right: max(40px, calc((100vw - 1600px) / 2)); box-sizing: border-box; min-height: 320px; }
.hp-hero .hp-hero-text { flex: 1 1 420px; max-width: 620px; background: rgba(255,255,255,.55); border-radius: 16px; padding: 18px 22px; backdrop-filter: blur(2px); }
.hp-hero .hp-hero-text h1 { font-size: 32px; font-weight: 700; line-height: 1.2; color: #16305c; margin-bottom: 10px; }
.hp-hero .hp-hero-text h1 .accent { color: #ff7a00; }
.hp-hero .hp-hero-text p.lead { font-size: 16px; color: #3c4a63; margin-bottom: 14px; }
.hp-hero .hp-hero-stats { display: flex; gap: 24px; flex-wrap: wrap; margin-bottom: 16px; }
.hp-hero .hp-hero-stats .stat-icon { display: block; margin-bottom: 4px; }
.hp-hero .hp-hero-stats .stat-icon svg { width: 22px; height: 22px; color: #1e5fcc; }
.hp-hero .hp-hero-stats .stat-num { font-size: 22px; font-weight: 700; color: #16305c; }
.hp-hero .hp-hero-stats .stat-label { font-size: 12px; color: #5b6b85; }
.hp-hero .hp-hero-cta { display: flex; gap: 14px; flex-wrap: wrap; }
.hp-hero .hp-hero-cta .hp-btn { padding: 10px 20px; font-size: 14px; }
.hp-btn { display: inline-flex; align-items: center; gap: 8px; padding: 13px 26px; border-radius: 8px; font-weight: 700; text-decoration: none !important; transition: transform .15s ease, box-shadow .15s ease; border: 2px solid transparent; }
.hp-btn:hover { transform: translateY(-2px); text-decoration: none !important; }
.hp-btn-primary { background: #ff7a00 !important; color: #fff !important; }
.hp-btn-primary:hover { color: #fff !important; box-shadow: 0 8px 20px rgba(255,122,0,.35); }
.hp-btn-blue { background: #1e5fcc !important; color: #fff !important; }
.hp-btn-blue:hover { color: #fff !important; box-shadow: 0 8px 20px rgba(30,95,204,.35); }
.hp-btn-outline { background: #fff !important; color: #1e5fcc !important; border-color: #1e5fcc !important; }
.hp-btn-outline:hover { color: #1e5fcc !important; box-shadow: 0 8px 20px rgba(30,95,204,.2); }
@media (max-width: 767px) {
  /* Mobile design: text sits directly on the photo, image kept bright/clear
     (not washed out dark) — a light gradient + text-shadow keeps copy legible
     without hiding the banner image's own detail, and everything is sized down
     to read as one compact block like the mockup instead of a tall full-bleed
     panel. Image itself stays CMS-uploadable (Admin > Slide/Banner, parent=5). */
  .hp-hero { background-image: none !important; position: relative; padding: 18px 0 20px; }
  .hp-hero:before {
    content: ""; position: absolute; inset: 0;
    background-image: var(--hp-hero-mobile-img);
    background-size: cover; background-position: center; z-index: 0;
  }
  .hp-hero:after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(10,25,60,.38) 0%, rgba(10,25,60,.22) 50%, rgba(10,25,60,.05) 100%);
    z-index: 1;
  }
  .hp-hero .row { min-height: 0; position: relative; z-index: 2; gap: 14px; }
  .hp-hero .hp-hero-text { max-width: none; background: none; backdrop-filter: none; padding: 0; }
  .hp-hero .hp-hero-text h1 { font-size: 24px; margin-bottom: 6px; text-shadow: 0 1px 6px rgba(0,0,0,.35); }
  .hp-hero .hp-hero-text p.lead { font-size: 13px; margin-bottom: 12px; text-shadow: 0 1px 4px rgba(0,0,0,.3); }
  .hp-hero .hp-hero-cta { gap: 10px; }
  .hp-hero .hp-hero-cta .hp-btn { padding: 8px 16px; font-size: 13px; }
  .hp-hero .hp-hero-text h1,
  .hp-hero .hp-hero-text p.lead { color: #fff; }
  .hp-hero .hp-hero-text h1 .accent { color: #ffb066; }
  /* Design's mobile hero is just title + subtitle + 2 CTAs + image — the stat
     row belongs to the separate stats section instead, not duplicated here. */
  .hp-hero .hp-hero-stats { display: none !important; }
}

/* Why choose SIS — 6 cards */
.hp-why { padding: 64px 0; }
.hp-why-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
.hp-why-card { display: flex; gap: 16px; background: #fff !important; border: 1px solid #ecf0f7; border-radius: 12px; padding: 20px; box-shadow: 0 4px 16px rgba(22,48,92,.06); transition: transform .15s ease, box-shadow .15s ease; }
.hp-why-card:hover { transform: translateY(-4px); box-shadow: 0 10px 24px rgba(22,48,92,.12); }
.hp-why-card .icon-circle { flex: 0 0 56px; width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.hp-why-card .icon-circle svg { width: 28px; height: 28px; }
.hp-why-card h3 { font-size: 15px; font-weight: 700; margin: 0 0 6px; text-transform: uppercase; }
.hp-why-card p { font-size: 14px; color: #5b6b85; margin: 0; line-height: 1.5; }
.hp-why .hp-cta-center { text-align: center; margin-top: 28px; }

/* Ecosystem — 6 products. Swiper-powered: mobile shows a swipeable 1.25-card
   peek with dots; breakpoints raise slidesPerView until all 6 fit at once
   (>=992px), which reads as a plain static grid without needing to swipe. */
.hp-ecosystem { padding: 64px 0; background: #f7f9fc; }
.hp-eco-swiper { overflow: hidden; padding: 6px 6px 10px; }
.hp-eco-swiper .swiper-wrapper { align-items: stretch; }
.hp-eco-card { height: 100%; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; background: #fff !important; border: 1px solid #ecf0f7; border-radius: 16px; padding: 28px 20px 22px; text-align: center; box-shadow: 0 6px 20px rgba(22,48,92,.07); transition: transform .15s ease, box-shadow .15s ease; text-decoration: none !important; color: inherit; }
.hp-eco-card h4 { color: #16305c; }
.hp-eco-card:hover { transform: translateY(-4px); box-shadow: 0 12px 28px rgba(22,48,92,.13); }
.hp-eco-card .icon-circle { width: 60px; height: 60px; border-radius: 50%; margin: 0 auto 16px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; background: #eef4ff; }
.hp-eco-card .icon-circle img { width: 28px; height: 28px; object-fit: contain; }
/* Ảnh icon do admin upload qua CMS (bảng pro) không có màu nền riêng theo từng
   sản phẩm — luân phiên 6 màu nền theo vị trí thẻ để vẫn đa sắc như thiết kế. */
.hp-eco-card:nth-child(6n+1) .icon-circle { background: #e6f9ee; }
.hp-eco-card:nth-child(6n+2) .icon-circle { background: #fff0e0; }
.hp-eco-card:nth-child(6n+3) .icon-circle { background: #f2e9ff; }
.hp-eco-card:nth-child(6n+4) .icon-circle { background: #e6f0ff; }
.hp-eco-card:nth-child(6n+5) .icon-circle { background: #ffe6e6; }
.hp-eco-card:nth-child(6n+6) .icon-circle { background: #e0f7f5; }
.hp-eco-card h4 { font-size: 16px; font-weight: 700; margin: 0 0 8px; }
.hp-eco-card p { font-size: 13px; color: #5b6b85; margin: 0 0 18px; line-height: 1.5; }

/* Unified mobile category list (all 5, no "featured 3 + other 2" split — see
   the note in main.blade.php next to this markup for why). Reused the same
   compact-list visual originally built for the design's "Các giải pháp nổi
   bật khác" sub-section, since it already matched a single-card+divider look. */
.hp-eco-more { margin-top: 28px; }
/* Design shows one unified white card with a thin divider between rows, not
   a separate shadowed card per item — and each row's title/chevron tints to
   match that row's own icon color (green/red/blue cycle), matching
   01-desktop.png's card-arrow color-per-item pattern used elsewhere. */
.hp-eco-more-list { background: #fff !important; border: 1px solid #ecf0f7; border-radius: 12px; box-shadow: 0 2px 10px rgba(22,48,92,.05); overflow: hidden; }
.hp-eco-more-item { display: flex; align-items: center; gap: 12px; padding: 14px; text-decoration: none !important; border-bottom: 1px solid #f0f3f9; }
.hp-eco-more-item:last-child { border-bottom: none; }
.hp-eco-more-item .icon-circle { width: 40px; height: 40px; border-radius: 50%; flex: 0 0 40px; display: flex; align-items: center; justify-content: center; background: #e6f9ee; }
.hp-eco-more-item .icon-circle img { width: 20px; height: 20px; object-fit: contain; }
.hp-eco-more-item:nth-of-type(3n+2) .icon-circle { background: #ffe6e6; }
.hp-eco-more-item:nth-of-type(3n+3) .icon-circle { background: #e6f0ff; }
.hp-eco-more-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.hp-eco-more-text strong { font-size: 14px; color: #1f9d55 !important; }
.hp-eco-more-item:nth-of-type(3n+2) .hp-eco-more-text strong { color: #d9364a !important; }
.hp-eco-more-item:nth-of-type(3n+3) .hp-eco-more-text strong { color: #1e5fcc !important; }
.hp-eco-more-text span { font-size: 12px; color: #5b6b85; }
.hp-eco-more-chevron { width: 18px; height: 18px; color: #1f9d55; flex: 0 0 18px; }
.hp-eco-more-item:nth-of-type(3n+2) .hp-eco-more-chevron { color: #d9364a; }
.hp-eco-more-item:nth-of-type(3n+3) .hp-eco-more-chevron { color: #1e5fcc; }
.hp-eco-card .eco-arrow { margin-top: auto; width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #eef4ff; color: #1e5fcc; transition: background .15s ease; }
.hp-eco-card .eco-arrow svg { width: 16px; height: 16px; }
.hp-eco-card:hover .eco-arrow { background: #dbe8ff; }

/* Tint each card's arrow to match its own icon-circle color, same nth-child cycle. */
.hp-eco-card:nth-child(6n+1) .eco-arrow { background: #e6f9ee; color: #1f9d55; }
.hp-eco-card:nth-child(6n+2) .eco-arrow { background: #fff0e0; color: #e07b00; }
.hp-eco-card:nth-child(6n+3) .eco-arrow { background: #f2e9ff; color: #7b3fe4; }
.hp-eco-card:nth-child(6n+4) .eco-arrow { background: #e6f0ff; color: #1e5fcc; }
.hp-eco-card:nth-child(6n+5) .eco-arrow { background: #ffe6e6; color: #d9364a; }
.hp-eco-card:nth-child(6n+6) .eco-arrow { background: #e0f7f5; color: #0f9b8e; }
.hp-eco-card:nth-child(6n+1):hover .eco-arrow { background: #cdf0dc; }
.hp-eco-card:nth-child(6n+2):hover .eco-arrow { background: #ffe0bd; }
.hp-eco-card:nth-child(6n+3):hover .eco-arrow { background: #e3d1ff; }
.hp-eco-card:nth-child(6n+4):hover .eco-arrow { background: #cddffe; }
.hp-eco-card:nth-child(6n+5):hover .eco-arrow { background: #ffd0d0; }
.hp-eco-card:nth-child(6n+6):hover .eco-arrow { background: #c5efeb; }
/* Desktop design has no arrow button on these cards (mobile mockup does) —
   the desktop swiper (#ecoSwiper) is only ever visible >=768px anyway. */
@media (min-width: 768px) {
  .hp-eco-card .eco-arrow { display: none; }
  .hp-eco-card p { margin-bottom: 0; }
}

/* Process timeline — 7 steps. Each step is a real <a href="dich-vu"> link
   (whole card/column clickable, not just the "Tìm hiểu..." button below) —
   reset link styling so the site's global `a{color:...}` rule can't bleed
   link-blue/underline into the title or body text. */
.hp-process { padding: 64px 0; background: #f7f9fc; }
.hp-process-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 20px 16px; }
.hp-process-step { background: #fff !important; border: 1px solid #ecf0f7; border-radius: 12px; padding: 18px; position: relative; box-shadow: 0 4px 16px rgba(22,48,92,.06); transition: transform .15s ease, box-shadow .15s ease; text-decoration: none !important; color: inherit; display: block; }
.hp-process-step:hover { transform: translateY(-4px); box-shadow: 0 10px 24px rgba(22,48,92,.12); text-decoration: none !important; }
.hp-process-step .step-icon-wrap { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.hp-process-step .icon-circle { width: 44px; height: 44px; border-radius: 50%; background: #eaf1ff; display: flex; align-items: center; justify-content: center; flex: 0 0 44px; }
.hp-process-step .icon-circle svg { width: 22px; height: 22px; color: #1e5fcc; }
.hp-process-step .step-num { width: 26px; height: 26px; border-radius: 50%; background: #1e5fcc; color: #fff !important; font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.hp-process-step h4 { font-size: 14px; font-weight: 700; margin: 0 0 4px; color: #16305c !important; }
.hp-process-step p { font-size: 13px; color: #5b6b85 !important; margin: 0; }
.hp-process-step .step-chevron { display: none; }
/* Step 4 "Triển khai & tích hợp" is highlighted orange in the design (icon,
   number badge and heading) — the one step called out as the core of the
   engagement — same accent orange used for CTAs elsewhere on the page. */
.hp-process-step-highlight .icon-circle { background: #fff1e2; }
.hp-process-step-highlight .icon-circle svg { color: #ff7a00; }
.hp-process-step-highlight .step-num { background: #ff7a00; }
.hp-process-step-highlight h4 { color: #ff7a00 !important; }

/* Desktop design: one flat row of 7 — icon circle, number badge below it,
   connected by a dashed line with a chevron arrow between each pair — not
   the boxed-card layout above, which stays as the tablet/fallback look
   below 992px. */
@media (min-width: 992px) {
  .hp-process-grid { display: flex; justify-content: space-between; gap: 8px; position: relative; }
  .hp-process-step { flex: 1 1 0; background: none !important; border: none !important; box-shadow: none !important; padding: 0 6px; text-align: center; }
  .hp-process-step:hover { transform: none; box-shadow: none !important; }
  .hp-process-step .step-icon-wrap { display: block; margin-bottom: 10px; }
  .hp-process-step .icon-circle { margin: 0 auto; background: #fff; box-shadow: 0 0 0 6px #f7f9fc; position: relative; z-index: 1; }
  .hp-process-step .step-num { margin: 8px auto 0; width: 26px; height: 26px; font-size: 12px; }
  .hp-process-step h4 { font-size: 13px; margin-top: 10px; }
  .hp-process-step p { font-size: 11px; line-height: 1.45; }
  .hp-process-grid:before {
    content: ""; position: absolute; top: 22px; left: 7%; right: 7%;
    border-top: 2px dashed #b9cdf5; z-index: 0;
  }
  .hp-process-step .step-chevron {
    display: block; position: absolute; top: 22px; right: -13px; width: 18px; height: 18px;
    color: #9fb3e0; transform: translateY(-50%); z-index: 2; background: #f7f9fc; border-radius: 50%;
  }
  .hp-process-step:last-child .step-chevron { display: none; }
}

@media (max-width: 767px) {
  /* Mobile design: icon + horizontal text row, step number badge overlapping
     the icon's TOP-LEFT corner, a dashed connector running down between
     steps, and a trailing chevron — not the centered icon-over-number-over-
     text card used at wider widths. */
  .hp-process-grid { gap: 14px; }
  .hp-process-step { display: flex; align-items: flex-start; gap: 14px; padding: 16px; }
  .hp-process-step:not(:last-child):after {
    content: ""; position: absolute; left: 37px; top: 100%; height: 14px;
    border-left: 2px dashed #c7d6f5;
  }
  .hp-process-step .step-icon-wrap { position: relative; margin-bottom: 0; flex: 0 0 auto; }
  .hp-process-step .step-num { position: absolute; top: -6px; left: -6px; width: 20px; height: 20px; font-size: 10px; border: 2px solid #fff; box-sizing: content-box; }
  .hp-process-step .step-text { flex: 1; min-width: 0; }
  .hp-process-step .step-chevron { display: block; width: 18px; height: 18px; color: #b7c0d1; flex: 0 0 18px; margin-top: 4px; }
}

.hp-news { padding: 28px 0 48px; }
.hp-news .hp-title { margin-bottom: 16px; }

/* News tabs */
.hp-news-tabs { display: flex; gap: 28px; justify-content: center; flex-wrap: wrap; margin-bottom: 20px; border-bottom: 1px solid #e5eaf2; padding-bottom: 2px; }
@media (max-width: 767px) {
  .hp-news-tabs {
    flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; -webkit-overflow-scrolling: touch; gap: 20px;
    /* fade the right edge so it reads as "more tabs, scroll →" instead of a hard cut */
    mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent 100%);
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent 100%);
  }
  .hp-news-tabs .tab { flex: 0 0 auto; }
}
.hp-news-tabs .tab { font-size: 14px; font-weight: 700; color: #5b6b85 !important; text-decoration: none !important; padding-bottom: 12px; border-bottom: 2px solid transparent; }
.hp-news-tabs .tab.active { color: #1e5fcc !important; border-bottom-color: #1e5fcc; }
.hp-news-tabs .tab:hover { color: #1e5fcc !important; }

/* Featured projects / news cards */
.hp-projects { padding: 64px 0; background: #f7f9fc; }
/* Swiper-powered on mobile (dot-indicator peek carousel per design), settles into a
   plain 3-up row at >=768px once all slides fit without needing to swipe. */
.hp-projects-swiper { overflow: hidden; padding-bottom: 4px; }
.hp-projects-swiper .swiper-wrapper { align-items: stretch; }
.hp-projects-swiper .hp-project-card { height: 100%; box-sizing: border-box; }

/* Dot pagination shared by the ecosystem/projects mobile carousels — hidden once the
   breakpoints above make every slide visible at once (no more swiping needed). */
.hp-swiper-dots { text-align: center; margin-top: 20px; line-height: 1; }
.hp-swiper-dots .swiper-pagination-bullet { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #d5dced; opacity: 1; margin: 0 4px; cursor: pointer; }
.hp-swiper-dots .swiper-pagination-bullet-active { background: #1e5fcc; }
@media (min-width: 768px) { .hp-swiper-dots { display: none; } }
.hp-projects-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
.hp-project-card { background: #fff !important; border-radius: 12px; overflow: hidden; border: 1px solid #ecf0f7; box-shadow: 0 4px 16px rgba(22,48,92,.06); transition: transform .15s ease, box-shadow .15s ease; }
.hp-project-card:hover { transform: translateY(-4px); box-shadow: 0 10px 24px rgba(22,48,92,.12); }
.hp-project-card img { width: 100%; height: 170px; object-fit: cover; display: block; }
.hp-project-media { position: relative; display: block; }
.hp-project-logo-chip { position: absolute !important; top: 12px; right: 12px; width: auto !important; max-width: 96px; height: 32px !important; object-fit: contain; background: #fff; border-radius: 8px; padding: 4px 8px; box-shadow: 0 2px 8px rgba(22,48,92,.18); }
.hp-project-card .body { padding: 18px; }
.hp-project-card .hp-news-badge { display: inline-block; font-size: 11px; font-weight: 700; color: #ff7a00 !important; text-transform: uppercase; letter-spacing: .02em; margin-bottom: 8px; }
.hp-project-badge { display: inline-block; font-size: 11px; font-weight: 700; color: #1e5fcc !important; background: #eaf1ff; padding: 3px 10px; border-radius: 20px; margin-bottom: 10px; }
.hp-project-card h4 { font-size: 15px; font-weight: 700; margin: 0 0 10px; line-height: 1.4; min-height: 42px; }
.hp-project-card h4 a { color: #16305c !important; text-decoration: none !important; }
.hp-project-card .hp-news-date { display: block; font-size: 12px; color: #8a97ab; margin-bottom: 10px; }
.hp-project-card .hp-news-date:before { content: "📅 "; }
.hp-project-card a.more { font-size: 13px; font-weight: 700; color: #1e5fcc !important; text-decoration: none !important; }
.hp-news .hp-projects-grid { grid-template-columns: repeat(4,1fr); }

/* Mobile-only project card detail block (industry badge overlay, description,
   3 feature highlights, full-width CTA) — matches 02-mobile.png. Hidden at
   desktop (d-md-none), where the card stays the simple image+badge+title+link
   already confirmed correct against 01-desktop.png. */
.hp-project-tag { position: absolute; top: 12px; left: 12px; font-size: 11px; font-weight: 700; padding: 5px 12px; border-radius: 20px; background: #eaf1ff; color: #1e5fcc; }
.hp-project-industry { font-size: 12px; color: #5b6b85; margin: 0 0 10px; }
.hp-project-desc { font-size: 13px; color: #3c4a63; line-height: 1.5; margin: 0 0 14px; padding-top: 14px; border-top: 1px solid #ecf0f7; }
.hp-project-features { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 16px; }
.hp-project-features .feat { flex: 1; text-align: center; }
.hp-project-features .icon-circle { width: 44px; height: 44px; border-radius: 50%; background: #eef4ff; margin: 0 auto 8px; display: flex; align-items: center; justify-content: center; }
.hp-project-features .icon-circle svg { width: 20px; height: 20px; color: #1e5fcc; }
.hp-project-features .feat span:last-child { display: block; font-size: 11px; font-weight: 700; color: #16305c; line-height: 1.3; }
.hp-project-cta { display: flex; width: 100%; justify-content: center; background: #fff !important; color: #1e5fcc !important; border: 2px solid #1e5fcc !important; padding: 12px 20px; }
@media (max-width: 767px) {
  .hp-project-card .body > a.more { display: none; }
  .hp-project-card img { height: 200px; }
  /* Admin can mark any article "Hiển thị ở mục Dự án tiêu biểu" without also
     filling in the extra rich-card fields (badge/industry/desc/features) —
     when hp_badge is left blank, fall back to the plain image+title+link
     card instead of rendering empty badge/description gaps. :has() is
     supported by all evergreen browsers this site needs to target. */
  .hp-project-card:has(.hp-project-tag:empty) .hp-project-tag,
  .hp-project-card:has(.hp-project-tag:empty) .hp-project-industry,
  .hp-project-card:has(.hp-project-tag:empty) .hp-project-desc,
  .hp-project-card:has(.hp-project-tag:empty) .hp-project-features,
  .hp-project-card:has(.hp-project-tag:empty) .hp-project-cta { display: none; }
  .hp-project-card:has(.hp-project-tag:empty) .body > a.more { display: inline-block; }
}
.hp-project-card:has(.hp-project-tag:empty) .hp-project-badge { display: none; }
.hp-news .hp-project-card h4 { font-size: 14px; }
@media (max-width: 991px) { .hp-news .hp-projects-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 767px) {
  /* Mobile design has no tab bar at all — just one continuous list, each
     article carrying its own category badge. Hide the tabs and force the
     "all" panel visible regardless of which one JS last selected. */
  .hp-news-tabs { display: none; }
  .hp-news-panel { display: none !important; }
  .hp-news-panel[data-hp-panel="all"] { display: block !important; }

  /* Horizontal list-item cards (thumbnail left, text right) instead of the
     stacked image-on-top card used everywhere else. */
  .hp-news .hp-projects-grid { grid-template-columns: 1fr; gap: 14px; }
  .hp-news .hp-project-card { display: flex; align-items: stretch; }
  .hp-news .hp-project-card a:first-child { flex: 0 0 110px; }
  .hp-news .hp-project-card img { width: 110px; height: 100%; min-height: 100px; }
  .hp-news .hp-project-card .body { flex: 1; padding: 10px 12px; min-width: 0; }
  .hp-news .hp-project-card h4 { font-size: 13px; min-height: 0; margin-bottom: 4px; -webkit-line-clamp: 2; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
  .hp-news .hp-project-card .hp-news-badge { font-size: 10px; margin-bottom: 2px; }
  .hp-news .hp-project-card .hp-news-date { font-size: 11px; margin-bottom: 4px; }
  .hp-news .hp-project-card a.more { font-size: 12px; }
}
@media (max-width: 576px) { .hp-news .hp-projects-grid { grid-template-columns: 1fr; } }

/* Stats band */
.hp-stats { padding: 56px 0; }
.hp-stats-grid { display: grid; grid-template-columns: repeat(5,1fr); gap: 16px; }
.hp-stat-card { background: #eef4ff !important; border-radius: 12px; padding: 22px 14px; text-align: center; transition: transform .15s ease; }
.hp-stat-card:hover { transform: translateY(-4px); }
.hp-stat-card .icon-circle { width: 44px; height: 44px; border-radius: 50%; background: #fff; margin: 0 auto 10px; display: flex; align-items: center; justify-content: center; }
.hp-stat-card .icon-circle svg { width: 22px; height: 22px; color: #1e5fcc; }
.hp-stat-card .num { font-size: 28px; font-weight: 700; color: #16305c; }
.hp-stat-card .label { font-size: 13px; font-weight: 700; color: #16305c; margin-top: 2px; }
.hp-stat-card .desc { font-size: 12px; color: #5b6b85; margin-top: 4px; }

/* Per-item accent colors for the full "Thành tựu" band, matching 01-desktop.png:
   1 blue, 2 orange, 3 green, 4 gold, 5 blue. */
.hp-stats-grid .hp-stat-card:nth-child(1) .icon-circle svg { color: #1e5fcc; }
.hp-stats-grid .hp-stat-card:nth-child(2) .icon-circle svg { color: #ff7a00; }
.hp-stats-grid .hp-stat-card:nth-child(3) .icon-circle svg { color: #27ae60; }
.hp-stats-grid .hp-stat-card:nth-child(4) .icon-circle svg { color: #d4a72c; }
.hp-stats-grid .hp-stat-card:nth-child(5) .icon-circle svg { color: #1e5fcc; }

/* Compact mobile-only stats teaser ("SIS – Đồng hành cùng doanh nghiệp Việt"),
   shown right after Tin tức — 2x2 grid, uniform blue, with description text. */
.hp-stats-teaser { padding: 32px 0 8px; }
.hp-stats-teaser-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 10px; }
.hp-stats-teaser-grid .hp-stat-card { background: #eef4ff !important; border-radius: 12px; padding: 16px 12px; text-align: center; }
.hp-stats-teaser-grid .hp-stat-card .icon-circle { width: 36px; height: 36px; border-radius: 50%; background: #fff; margin: 0 auto 8px; display: flex; align-items: center; justify-content: center; }
.hp-stats-teaser-grid .hp-stat-card .icon-circle svg { width: 18px; height: 18px; color: #1e5fcc; }
.hp-stats-teaser-grid .hp-stat-card .num { font-size: 22px; font-weight: 700; color: #16305c; }
.hp-stats-teaser-grid .hp-stat-card .label { font-size: 12px; font-weight: 700; color: #16305c; margin-top: 2px; }
.hp-stats-teaser-grid .hp-stat-card .desc { font-size: 11px; color: #5b6b85; margin-top: 4px; }

/* Bottom CTA band */
.hp-cta-band {
  background-color: #1443a3 !important;
  background-image: linear-gradient(90deg, rgba(10,40,110,.35) 0%, rgba(10,40,110,.15) 50%, rgba(10,40,110,0) 100%), url(../images/cta-band-cskh-team.png) !important;
  background-size: cover !important; background-position: center !important; background-repeat: no-repeat !important;
  padding: 56px 0; color: #fff;
}
.hp-cta-band .row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 20px; }
.hp-cta-band h3 { font-size: 26px; font-weight: 700; margin: 0 0 16px; color: #fff !important; }
.hp-cta-band .hp-btn-outline { background: transparent !important; color: #fff !important; border-color: #fff !important; }
.hp-cta-band .hp-btn-outline:hover { color: #fff !important; background: rgba(255,255,255,.15) !important; }
/* Theme's generic `.row > *{width:100%}` (list-library.css, Bootstrap-style grid
   convention) was stretching this button full-width since this section reuses
   the `.row` class name for its own flex layout — scope it back to auto/content
   width so it reads as a normal compact button, not a full-bleed bar. */
.hp-cta-band .row > .hp-btn { width: auto; flex: 0 0 auto; }
@media (max-width: 767px) {
  .hp-cta-band .row > .hp-btn { padding: 10px 18px; font-size: 13px; }
  /* These 3 sections kept the desktop 64px top/bottom padding on mobile too —
     never had a mobile override — which combined with the h2.hp-title cascade
     bug above (fixed) made the whole page noticeably taller/looser than the
     design on mobile. Halving it here matches the reduction already applied
     to .hp-hero/.hp-cta-band/.hp-stats. */
  .hp-ecosystem, .hp-process, .hp-projects { padding: 36px 0; }
}

@media (max-width: 991px) {
  .hp-why-grid, .hp-eco-grid, .hp-process-grid, .hp-projects-grid, .hp-stats-grid { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 576px) {
  .hp-why-grid, .hp-eco-grid, .hp-process-grid, .hp-projects-grid { grid-template-columns: 1fr; }
  .hp-hero .hp-hero-stats { display: grid; grid-template-columns: repeat(2,1fr); gap: 16px 20px; }

  /* Full "Thành tựu" band on mobile: single column, icon-left row layout,
     description visible, per-item colors preserved — per 02-mobile.png. */
  .hp-stats { padding: 32px 0; }
  .hp-stats-grid { grid-template-columns: 1fr; gap: 10px; }
  .hp-stats-grid .hp-stat-card { padding: 14px 14px; text-align: left; display: flex; flex-wrap: wrap; align-items: center; column-gap: 12px; }
  .hp-stats-grid .hp-stat-card .icon-circle { flex: 0 0 40px; width: 40px; height: 40px; margin: 0; }
  .hp-stats-grid .hp-stat-card .icon-circle svg { width: 20px; height: 20px; }
  .hp-stats-grid .hp-stat-card .num { flex: 0 0 auto; font-size: 20px; }
  .hp-stats-grid .hp-stat-card .label { flex: 0 0 auto; font-size: 12px; margin-top: 0; margin-left: 4px; }
  .hp-stats-grid .hp-stat-card .desc { flex: 0 0 calc(100% - 52px); width: calc(100% - 52px); margin-left: 52px; margin-top: 2px; display: block; font-size: 11px; }
}

/* Partner logo carousel — restyled to match the design: each logo sits in its
   own white rounded card instead of a bare image, under a centered heading. */
.hp-partner-area { background: #fff; padding: 48px 0 40px; }
.hp-partner-title { margin-bottom: 28px !important; }
.hp-partner-area .post-item { background: #fff !important; border: 1px solid #e2e8f5 !important; border-radius: 12px; margin: 0 8px !important; box-shadow: 0 4px 14px rgba(22,48,92,.08); }
.hp-partner-area .item-inner { display: flex; align-items: center; justify-content: center; height: 90px; padding: 16px; }
.hp-partner-area .item-image-a { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.hp-partner-area .item-image-a img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; filter: grayscale(.15); }

/* Static 2x6 grid at desktop widths, matching 01-desktop.png, instead of the
   scrolling carousel used at narrower widths — Swiper JS skips init above
   1200px (see script above) so these slides are plain, un-managed divs here. */
@media (min-width: 1200px) {
  .hp-partner-area #slide_unit .swiper-wrapper { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; transform: none !important; }
  .hp-partner-area #slide_unit .swiper-slide { width: calc((100% - 80px) / 6); flex: 0 0 calc((100% - 80px) / 6); max-width: none; }
  .hp-partner-area #slide_unit .swiper-slide:nth-child(n+13) { display: none; }
  .hp-partner-area .swiper-button-prev-unit,
  .hp-partner-area .swiper-button-next-unit { display: none !important; }
}