/* ──────────────────────────────────────────────
   AppChat Theme — Base CSS
   Extracted from design/*.html <style> blocks
   ────────────────────────────────────────────── */

/* Root & Typography */
html { font-size: 17.6px; -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif; background: #ffffff; color: #231f20; line-height: 1.55; letter-spacing: -0.005em; -webkit-font-smoothing: antialiased; text-wrap: pretty; }

/* Reset */
* { box-sizing: border-box; }
html, body { overflow-x: clip; }
@supports not (overflow-x: clip) { html, body { overflow-x: hidden; } }
img, svg { max-width: 100%; }
h1, h2, h3, h4, h5, h6, p, ul, ol, blockquote, figure { margin: 0; }
ul { padding: 0; list-style: none; }
button { font-family: inherit; border: 0; background: none; cursor: pointer; }
input { font-family: inherit; }

/* Links */
a { text-decoration: none; color: inherit; transition: color 150ms ease-out; }
a:hover { color: #1A7D41; }

/* Animations */
@keyframes hero-drift { 0% { transform: scale(1.03) translateX(0); } 50% { transform: scale(1.05) translateX(-1.2%); } 100% { transform: scale(1.03) translateX(0); } }
@keyframes hero-gradient-shift { 0% { opacity: .92; transform: translateX(0); } 50% { opacity: .98; transform: translateX(-1%); } 100% { opacity: .92; transform: translateX(0); } }
@media (prefers-reduced-motion: reduce) { .hero-drift, .hero-grad { animation: none !important; } }

/* Mobile guard — inline styles win the cascade, so these need !important.
   Scoped to <=640px so desktop layout is untouched. */
@media (max-width: 640px) {
  html, body { overflow-x: clip; }
  * { min-width: 0; }
  [style*="padding-inline: 32px"] { padding-inline: 18px !important; }
  [style*="padding: 80px 32px"], [style*="padding: 88px 32px"], [style*="padding: 96px 32px"],
  [style*="padding: 72px 32px"], [style*="padding: 64px 32px"], [style*="padding: 112px 32px"] { padding-left: 18px !important; padding-right: 18px !important; }
  table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  img, [role="img"] { max-width: 100%; }
  [style*="grid-template-columns: repeat(2"], [style*="grid-template-columns: repeat(3"],
  [style*="grid-template-columns: repeat(4"], [style*="grid-template-columns: repeat(5"],
  [style*="grid-template-columns: repeat(6"] { grid-template-columns: minmax(0, 1fr) !important; }
}

/* Founder & Team grids — ve-chung-toi page */
.grid-founder { grid-template-columns: minmax(0, 1fr) !important; }
.grid-founder figure { position: static !important; }
.grid-team { grid-template-columns: minmax(0, 1fr) !important; }
@media (min-width: 560px) {
  .grid-team { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (min-width: 900px) {
  .grid-founder { grid-template-columns: 340px minmax(0, 1fr) !important; }
  .grid-founder figure { position: sticky !important; }
  .grid-team { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}

/* Department pagination — hidden items */
.dept-hidden { display: none !important; }

/* Hide the grid-item <a> wrapper when its card article is filtered out */
.hvo-course > a:has(.dept-hidden) { display: none !important; }

/* ── Hover & Focus States (replaces design's style-hover/style-focus) ── */

/* Green primary buttons — darken on hover */
a[style*="background: #2DC56A"][style*="border-radius: 999px"]:hover,
button[style*="background: #2DC56A"][style*="border-radius: 999px"]:hover {
  background: #24a558 !important;
}

/* Ghost/outline buttons — green border + subtle bg on hover */
a[style*="box-shadow: inset 0 0 0 1px rgba(35,31,32,0.11)"]:hover,
button[style*="box-shadow: inset 0 0 0 1px rgba(35,31,32,0.11)"]:hover {
  box-shadow: inset 0 0 0 1px rgba(35,31,32,0.28) !important;
  background: rgba(35,31,32,0.03) !important;
}

/* White ghost buttons (on dark bg) — brighter border on hover */
a[style*="box-shadow: inset 0 0 0 1px rgba(255,255,255,0.25)"]:hover,
button[style*="box-shadow: inset 0 0 0 1px rgba(255,255,255,0.25)"]:hover {
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.6) !important;
}

a[style*="box-shadow: inset 0 0 0 1px rgba(255,255,255,0.28)"]:hover,
button[style*="box-shadow: inset 0 0 0 1px rgba(255,255,255,0.28)"]:hover {
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.65) !important;
}

/* Ghost buttons on light bg (higher border weight) */
a[style*="box-shadow: inset 0 0 0 1px rgba(35,31,32,0.14)"]:hover,
button[style*="box-shadow: inset 0 0 0 1px rgba(35,31,32,0.14)"]:hover {
  box-shadow: inset 0 0 0 1px rgba(35,31,32,0.35) !important;
  color: #231f20 !important;
}

/* Pillar underlined buttons — green text on hover */
button[style*="border-bottom: 2px solid #2DC56A"]:hover {
  color: #1A7D41 !important;
}

/* Agent card hover — green ring + shadow */
article[style*="box-shadow: inset 0 0 0 1px rgba(35,31,32,0.1)"][style*="border-radius: 14px"]:hover {
  box-shadow: inset 0 0 0 1px rgba(45,197,106,0.5), 0 10px 24px -14px rgba(35,31,32,0.22) !important;
}

/* Agent card "Cài đặt" link — green on hover */
article[style*="border-radius: 14px"] a[style*="font-size: 13.2px"]:hover {
  color: #1A7D41 !important;
}

/* Story arrows (desktop) — white bg on hover */
button[style*="background: rgba(255,255,255,0.94)"][style*="border-radius: 999px"]:hover {
  background: #ffffff !important;
}

/* Mobile story arrows — green border on hover */
button[data-story-prev-mobile]:hover,
button[data-story-next-mobile]:hover {
  box-shadow: inset 0 0 0 1px rgba(45,197,106,0.5) !important;
}

/* Capabilities grid cells — subtle bg on hover */
.grid-cap > div[style*="transition: background 200ms"]:hover {
  background: rgba(255,255,255,0.05) !important;
}

/* Search input focus — green border */
input[type="search"]:focus,
input[type="search"]:focus-visible {
  border-color: #2DC56A !important;
  box-shadow: 0 0 0 3px rgba(45,197,106,0.15) !important;
  outline: none !important;
}

/* Select focus — green border */
select:focus,
select:focus-visible {
  border-color: #2DC56A !important;
  box-shadow: 0 0 0 3px rgba(45,197,106,0.15) !important;
  outline: none !important;
}

/* Responsive grids — match design JS breakpoints
   design/libCols:    >=1180 → 4col, >=760 → 2col, else 1col
   design/integCols:  >=900  → 2col(1fr 1.2fr), else 1col
   design/integLogoCols: >=620 → 3col, else 2col
   design/deptCols:   >=900 → 3col, >=620 → 2col, else 1col
   design/storyCardCols: >=1100 → 1.05fr 1fr, else 1col */
.grid-agent { grid-template-columns: minmax(0, 1fr) !important; }
.grid-integ { grid-template-columns: minmax(0, 1fr) !important; }
.grid-integ-logos { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
.grid-dept { grid-template-columns: minmax(0, 1fr) !important; }

/* Story — mobile defaults */
.grid-story { grid-template-columns: minmax(0, 1fr) !important; min-height: 0 !important; }
.grid-story [data-story-img-wrapper] { display: none !important; min-height: 0 !important; }
.grid-story [data-story-metric] { font-size: clamp(48.4px, 3.6vw + 19.8px, 70.4px) !important; }
.grid-story [data-story-metric-desc] { padding-top: 8px !important; }
[data-story-metrics] { flex-direction: column !important; gap: 10px !important; }
[data-story-prev-desktop], [data-story-next-desktop] { display: none !important; }
[data-story-prev-mobile], [data-story-next-mobile] { display: inline-flex !important; }

/* Capabilities grid — >=1024 → 268px min, else 220px min */
.grid-cap { grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)) !important; }
@media (min-width: 1024px) {
  .grid-cap { grid-template-columns: repeat(auto-fit, minmax(min(268px, 100%), 1fr)) !important; }
}

@media (min-width: 620px) {
  .grid-integ-logos { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .grid-dept { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (min-width: 760px) {
  .grid-agent { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (min-width: 900px) {
  .grid-integ { grid-template-columns: 1fr 1.2fr !important; }
  .grid-dept { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}
@media (min-width: 1100px) {
  .grid-story { grid-template-columns: 1.05fr 1fr !important; min-height: 420px !important; }
  .grid-story [data-story-img-wrapper] { display: block !important; min-height: 420px !important; }
  [data-story-metrics] { flex-direction: row !important; gap: 20px !important; }
  [data-story-prev-desktop], [data-story-next-desktop] { display: flex !important; }
  [data-story-prev-mobile], [data-story-next-mobile] { display: none !important; }
}
@media (min-width: 1180px) {
  .grid-agent { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
}

/* ── Section spacing — normalize vertical padding across the whole project ──
   Balances gaps between sections: 48/56/64/72/80/88/96/112/128px -> 80px.
   Leaves clamp()-based heroes/CTAs (special sizes) untouched. */
[style*="max-width: 1440px"][style*="margin-inline: auto"][style*="padding: 32px 32px"],
[style*="max-width: 1440px"][style*="margin-inline: auto"][style*="padding: 40px 32px"],
[style*="max-width: 1440px"][style*="margin-inline: auto"][style*="padding: 48px 32px"],
[style*="max-width: 1440px"][style*="margin-inline: auto"][style*="padding: 56px 32px"],
[style*="max-width: 1440px"][style*="margin-inline: auto"][style*="padding: 64px 32px"],
[style*="max-width: 1440px"][style*="margin-inline: auto"][style*="padding: 72px 32px"],
[style*="max-width: 1440px"][style*="margin-inline: auto"][style*="padding: 80px 32px"],
[style*="max-width: 1440px"][style*="margin-inline: auto"][style*="padding: 88px 32px"],
[style*="max-width: 1440px"][style*="margin-inline: auto"][style*="padding: 96px 32px"],
[style*="max-width: 1440px"][style*="margin-inline: auto"][style*="padding: 112px 32px"],
[style*="max-width: 1440px"][style*="margin-inline: auto"][style*="padding: 128px 32px"],
[style*="max-width: 1200px"][style*="margin-inline: auto"][style*="padding: 32px 32px"],
[style*="max-width: 1200px"][style*="margin-inline: auto"][style*="padding: 40px 32px"],
[style*="max-width: 1200px"][style*="margin-inline: auto"][style*="padding: 48px 32px"],
[style*="max-width: 1200px"][style*="margin-inline: auto"][style*="padding: 56px 32px"],
[style*="max-width: 1200px"][style*="margin-inline: auto"][style*="padding: 64px 32px"],
[style*="max-width: 1200px"][style*="margin-inline: auto"][style*="padding: 72px 32px"],
[style*="max-width: 1200px"][style*="margin-inline: auto"][style*="padding: 80px 32px"],
[style*="max-width: 1200px"][style*="margin-inline: auto"][style*="padding: 88px 32px"],
[style*="max-width: 1200px"][style*="margin-inline: auto"][style*="padding: 96px 32px"],
[style*="max-width: 1200px"][style*="margin-inline: auto"][style*="padding: 112px 32px"],
[style*="max-width: 1200px"][style*="margin-inline: auto"][style*="padding: 128px 32px"],
section[style*="padding-block: 48px"],
section[style*="padding-block: 56px"],
section[style*="padding-block: 64px"],
section[style*="padding-block: 72px"],
section[style*="padding-block: 80px"],
section[style*="padding-block: 96px"],
section[style*="padding-block: 112px"],
section[style*="padding-block: 128px"] {
  padding-top: 80px !important;
  padding-bottom: 80px !important;
}