/* CiCC UngdungAI 5.0.0 — cross-browser and cross-OS quality layer. */
:root {
  --color-bg: var(--color-bg-light, #fafbfc);
  --color-bg-card: var(--color-bg-white, #fff);
  --font-body: var(--font-sans, Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
  --font-display: "Plus Jakarta Sans", var(--font-heading, Inter, sans-serif);
  --text-primary: var(--color-text, #0f172a);
  --text-secondary: var(--color-text-secondary, #334155);
  --text-muted: var(--color-text-muted, #64748b);
  --border: var(--color-border, #e2e8f0);
  --cicc-navy: var(--color-bg-darker, #0a1628);
  --cicc-blue: var(--color-primary-dark, #4f46e5);
  --cicc-gold-bright: var(--color-gold, #fbbf24);
  --cta: var(--color-cta, #f97316);
  --cta-hover: var(--color-cta-hover, #c2410c);
  --color-cta-hover: #c2410c;
  --bg: var(--color-bg-light, #fafbfc);
  --text: var(--color-text, #0f172a);
  --badge-bg: #eef2ff;
  --fs-hero: clamp(2.35rem, 5vw, 4.25rem);
  --fs-h2: clamp(1.8rem, 3vw, 2.5rem);
  --shadow-xl: 0 24px 50px rgba(15, 23, 42, .16);
  --transition: var(--transition-base, .25s ease);
  color-scheme: light;
}

html { text-size-adjust: 100%; -webkit-text-size-adjust: 100%; }
body { overflow-x: hidden; min-width: 320px; text-rendering: optimizeLegibility; }
button, input, select, textarea { font: inherit; }
button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }
img, svg, video { max-width: 100%; }
svg { vertical-align: middle; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline: 3px solid rgba(37, 99, 235, .45);
  outline-offset: 3px;
}
::selection { background: #bfdbfe; color: #0f172a; }
.skip-link { position: fixed; z-index: 10000; top: .75rem; left: .75rem; transform: translateY(-180%); padding: .7rem 1rem; border-radius: var(--radius-md); background: #fff; color: #1e3a8a; box-shadow: var(--shadow-lg); font-weight: 700; transition: transform .2s ease; }
.skip-link:focus { transform: translateY(0); }

/* Avoid horizontal overflow from long Vietnamese labels and embeds. */
pre, code, table { max-width: 100%; }
pre { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { display: block; overflow-x: auto; border-collapse: collapse; }
iframe { max-width: 100%; }

/* Keep form controls legible on Safari, iOS and Windows high-contrast modes. */
input, select, textarea { color: var(--text-primary); background-color: var(--color-bg-white); }
input::placeholder, textarea::placeholder { color: #64748b; opacity: 1; }
input:not([type="hidden"]), select, textarea { min-height: 2.75rem; border-radius: var(--radius-md); }
label { cursor: pointer; }
button, [type="button"], [type="submit"], [type="reset"] { min-height: 2.75rem; }
button, [type="button"], [type="submit"], [type="reset"] { cursor: pointer; }
@media (forced-colors: active) {
  *, *::before, *::after { forced-color-adjust: auto; }
  a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid CanvasText; }
}

/* Responsive gutters and safe areas for notch devices. */
.container { width: 100%; padding-left: max(1rem, env(safe-area-inset-left)); padding-right: max(1rem, env(safe-area-inset-right)); }
@media (min-width: 768px) { .container { padding-left: max(1.5rem, env(safe-area-inset-left)); padding-right: max(1.5rem, env(safe-area-inset-right)); } }
@media (max-width: 767px) {
  h1 { font-size: clamp(1.85rem, 8vw, 2.5rem); }
  h2 { font-size: clamp(1.55rem, 6vw, 2rem); }
  .site-logo-image { width: 156px; height: auto; }
  .top-bar-center { order: 3; flex-basis: 100%; }
  .top-search-form { width: 100%; }
}

/* Turn off expensive motion for OS-level reduced-motion settings. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
}

/* Dark AI pages retain contrast without affecting light content pages. */
body.ai-hub, body.page-template-template-dashboard, body.page-template-template-login { background-color: #06080f; }

/* Long-form content navigation */
.cicc-toc { margin: 1.5rem 0 2rem; padding: 1.1rem 1.25rem; border: 1px solid #c7d2fe; border-radius: 1rem; background: #f8faff; border-color: color-mix(in srgb, var(--brand-primary,#4f46e5) 22%, transparent); background: color-mix(in srgb, var(--brand-primary,#4f46e5) 6%, var(--surface,#fff)); }
.cicc-toc__title { display: block; margin-bottom: .55rem; color: var(--text-primary,#111827); font-size: .95rem; }
.cicc-toc__list { display: grid; gap: .3rem; margin: 0; padding-left: 1.25rem; }
.cicc-toc__item { font-size: .92rem; line-height: 1.5; }
.cicc-toc__item--h3 { margin-left: 1rem; font-size: .88rem; }
.cicc-toc a { color: var(--brand-primary,#4f46e5); text-decoration: none; }
.cicc-toc a:hover, .cicc-toc a:focus-visible { text-decoration: underline; }
.cicc-term-links { margin-top: 2rem; padding: .9rem 1rem; border-top: 1px solid #e2e8f0; color: var(--text-secondary,#475569); font-size: .92rem; }
.cicc-term-links strong { color: var(--text-primary,#111827); }
.cicc-term-links a { color: var(--brand-primary,#4f46e5); }
.glossary-faq { margin-top: 3rem; margin-bottom: 3rem; }
.glossary-faq h2 { margin-bottom: 1rem; }
.glossary-faq details { border-bottom: 1px solid #e2e8f0; padding: .85rem 0; }
.glossary-faq summary { cursor: pointer; font-weight: 700; color: var(--text-primary,#111827); }
.glossary-faq details p { margin: .65rem 0 0; color: var(--text-secondary,#475569); line-height: 1.65; }
.cicc-related-reading { margin-top: 2rem; padding: 1rem 1.25rem; border-left: 3px solid var(--brand-primary,#4f46e5); background: #f8faff; }
.cicc-related-reading h2 { margin-top: 0; font-size: 1.1rem; }
.cicc-related-reading ul { margin-bottom: 0; padding-left: 1.2rem; }
.glossary-pagination { display: flex; flex-wrap: wrap; gap: .4rem; justify-content: center; margin: 1.25rem 0 2rem; }
.glossary-pagination a, .glossary-pagination__current { min-width: 2.25rem; padding: .45rem .7rem; border: 1px solid #c7d2fe; border-radius: .55rem; text-align: center; text-decoration: none; }
.glossary-pagination a { color: var(--brand-primary,#4f46e5); }
.glossary-pagination__current { background: var(--brand-primary,#4f46e5); color: #fff; border-color: var(--brand-primary,#4f46e5); }