/*
Theme Name: Go4AI Theme
Theme URI: https://go4ai.life/
Author: Go4AI
Description: Theme WordPress quản trị nội dung cho website Go4AI.life.
Version: 2.0.0
Text Domain: go4ai-theme
*/

html { scroll-behavior: smooth; }
body { margin: 0; }
.go4ai-site-header { z-index: 999999; isolation: isolate; }
.go4ai-logo img { width: auto; max-height: 52px; }
.go4ai-primary-menu, .go4ai-primary-menu ul { list-style: none; margin: 0; padding: 0; }
.go4ai-primary-menu { display: flex; align-items: center; justify-content: center; gap: 8px; }
.go4ai-primary-menu > li { position: relative; flex-shrink: 0; }
.go4ai-primary-menu a {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    padding: 6px 8px;
    font-size: 13px;
    text-decoration: none;
    color: inherit;
    transition: color 0.15s ease;
}
@media (min-width: 1200px) {
    .go4ai-primary-menu { gap: 16px; }
    .go4ai-primary-menu a { padding: 8px 10px; font-size: 14px; }
}
@media (min-width: 1360px) {
    .go4ai-primary-menu { gap: 24px; }
    .go4ai-primary-menu a { padding: 8px 12px; }
}
.go4ai-primary-menu .sub-menu { display: none; position: absolute; top: 100%; left: 0; min-width: 240px; padding: 10px; border-radius: 16px; background: #fff; box-shadow: 0 20px 40px rgba(0,0,0,.12); }
.go4ai-primary-menu li:hover > .sub-menu, .go4ai-primary-menu li:focus-within > .sub-menu { display: block; }
.go4ai-mobile-menu a { display: block; padding: 10px 14px; text-decoration: none; color: inherit; }
.go4ai-native-page { min-height: 55vh; }
.go4ai-editor-content { max-width: 1200px; margin: 0 auto; padding: 48px 20px; }
.go4ai-admin-content { max-width: 1200px; margin: 0 auto; padding: 48px 20px; }
.go4ai-admin-content img, .go4ai-admin-content video { max-width: 100%; height: auto; }

/* ==========================================================================
   Shared "Liên hệ tư vấn" modal (#registerModal / #consultModal) — scoped UI fix
   Root cause: assets/css/tailwind-build.css is a stale build that never emitted
   the arbitrary-value + responsive utilities used by the modal markup:
   z-[1000003], items-end, sm:items-center, sm:max-w-xl, max-h-[92svh],
   sm:max-h-[90vh], min-h-0, flex-none, rounded-t-2xl, gap-2.5, py-2.5, size-4.
   Result: the dialog opened as a non-positioned, full-width block with no
   stacking context (page sections with `relative z-10` painted over it) and no
   scroll container, so it stretched across the viewport and bled into the page.
   Scope: .go4ai-modal only — no global/site-wide styles are affected.
   ========================================================================== */
.go4ai-modal {
  position: fixed;
  inset: 0;
  z-index: 1000003;
  display: none;
  align-items: flex-end;
  justify-content: center;
  padding: 0;
}
.go4ai-modal.flex { display: flex; }
.go4ai-modal.hidden { display: none !important; }

@media (min-width: 640px) {
  .go4ai-modal { align-items: center; padding: 1rem; }
}

/* backdrop */
.go4ai-modal > .go4ai-modal-backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background-color: rgba(15, 23, 42, .6);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  cursor: pointer;
}

/* dialog panel */
.go4ai-modal > .go4ai-modal-panel {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  max-height: 92vh;
  max-height: 92svh;
  margin: 0;
  background-color: #fff;
  border-radius: 1rem 1rem 0 0;
  box-shadow: 0 25px 50px -12px rgba(15, 23, 42, .35);
  overflow: hidden;
}
@media (min-width: 640px) {
  .go4ai-modal > .go4ai-modal-panel {
    max-width: 36rem;
    max-height: 88vh;
    max-height: 88svh;
    border-radius: 1rem;
  }
}
@media (min-width: 1024px) {
  .go4ai-modal > .go4ai-modal-panel { max-width: 42rem; }
}

/* sticky dialog header */
.go4ai-modal .go4ai-modal-header {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  box-sizing: border-box;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid #f3f4f6;
  background-color: #f9fafb;
}
.go4ai-modal .go4ai-modal-header h3 { margin: 0; font-size: 1.25rem; line-height: 1.75rem; }
.go4ai-modal .go4ai-modal-header button { flex: 0 0 auto; }

/* scrollable dialog body */
.go4ai-modal .go4ai-modal-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  box-sizing: border-box;
  padding: 1.5rem;
  padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 1.5rem);
}

/* form controls */
.go4ai-modal input[type="text"],
.go4ai-modal input[type="email"],
.go4ai-modal input[type="tel"],
.go4ai-modal input[type="phone"],
.go4ai-modal select,
.go4ai-modal textarea {
  box-sizing: border-box;
  display: block;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  padding: .625rem 1rem;
  font: inherit;
  font-size: .9375rem;
  line-height: 1.5;
  color: inherit;
  background-color: #fff;
  border: 1px solid #e5e7eb;
  border-radius: .75rem;
}
.go4ai-modal textarea { resize: vertical; min-height: 5rem; }
.go4ai-modal select { -webkit-appearance: none; appearance: none; background-image: none; }
.go4ai-modal button[type="submit"] {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  cursor: pointer;
}

/* consent checkbox row */
.go4ai-modal .go4ai-consent-row {
  display: flex;
  align-items: flex-start;
  gap: .625rem;
}
.go4ai-modal .go4ai-consent-row > label { flex: 1 1 auto; min-width: 0; }
.go4ai-modal input[type="checkbox"] {
  flex: 0 0 auto;
  box-sizing: border-box;
  width: 1rem;
  height: 1rem;
  margin: .25rem 0 0;
  accent-color: #1d4ed8;
}

/* org-fields toggle + anti-spam honeypot */
.go4ai-modal [data-consult-org-fields].hidden { display: none; }
.go4ai-modal .go4ai-hp {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ==========================================================================
   4 Course Cards Grid Styling — Scoped UI fix
   Page: /khoa-hoc-ai-passport/
   ========================================================================== */
.go4ai-program-card {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  box-sizing: border-box;
}

.go4ai-card-top {
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
}

.go4ai-card-title {
  font-family: var(--font-display, "Space Grotesk", sans-serif);
  font-weight: 700;
  font-size: 1.25rem;
  line-height: 1.35;
  margin: 0 0 0.5rem 0;
}

.go4ai-card-desc {
  font-size: 0.875rem;
  line-height: 1.55;
  margin: 0 0 1rem 0;
}

@media (min-width: 1280px) {
  .go4ai-card-title {
    min-height: 54px;
    display: flex;
    align-items: flex-start;
  }
  .go4ai-card-desc {
    min-height: 66px;
  }
}

.go4ai-card-meta {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  padding: 12px 0 6px !important;
  border-top: 1px solid #f1f5f9;
  box-sizing: border-box;
}
.dark .go4ai-card-meta {
  border-top-color: #1e293b;
}
.go4ai-card-dark .go4ai-card-meta {
  border-top-color: rgba(255, 255, 255, 0.1) !important;
}

.go4ai-meta-group {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  min-width: 0;
  white-space: nowrap !important;
  flex-shrink: 0;
}
.go4ai-meta-group .material-symbols-outlined {
  font-size: 18px !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0;
}
.go4ai-meta-text {
  font-size: 13.5px;
  line-height: 1.4;
}

.go4ai-meta-duration {
  color: #64748b;
  font-weight: 500;
}
.dark .go4ai-meta-duration {
  color: #94a3b8;
}
.go4ai-card-dark .go4ai-meta-duration {
  color: #cbd5e1 !important;
}
.go4ai-meta-duration .material-symbols-outlined {
  color: #94a3b8;
}
.go4ai-card-dark .go4ai-meta-duration .material-symbols-outlined {
  color: #94a3b8 !important;
}

.go4ai-meta-fee {
  font-weight: 700;
}
.go4ai-meta-fee .go4ai-meta-text {
  font-weight: 700;
}
.go4ai-card-dark .go4ai-meta-fee {
  color: #fcd34d !important;
}
.go4ai-card-dark .go4ai-meta-fee .material-symbols-outlined {
  color: #fcd34d !important;
}

.go4ai-card-body {
  border-top: 1px solid #e2e8f0;
  padding-top: 1.25rem;
  margin-bottom: 1.5rem;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}
.dark .go4ai-card-body {
  border-top-color: #334155;
}
.go4ai-card-dark .go4ai-card-body {
  border-top-color: rgba(255, 255, 255, 0.1) !important;
}

.go4ai-card-section-label {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0 0 0.75rem 0;
}
.go4ai-card-dark .go4ai-card-section-label {
  color: #94a3b8 !important;
}

.go4ai-card-checklist {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}
.go4ai-card-checklist li {
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px !important;
  font-size: 0.875rem;
  line-height: 1.45;
  margin: 0 !important;
  padding: 0 !important;
}
.go4ai-card-dark .go4ai-card-checklist li {
  color: #cbd5e1 !important;
}
.go4ai-card-checklist .go4ai-check-icon {
  font-size: 17px !important;
  line-height: 1.2 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  margin-top: 2px !important;
}
.go4ai-card-dark .go4ai-card-checklist .go4ai-check-icon {
  color: #fcd34d !important;
}
.go4ai-card-checklist li span:last-child {
  flex: 1 1 auto;
}

.go4ai-card-actions {
  margin-top: auto;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  padding-top: 0.5rem;
}

/* ==========================================================================
   Scoped Fixes for Mobile UI, Expert Cards, Forms & Partner Logos
   ========================================================================== */

/* 1. Expert Cards Carousel Equal Height & CTA alignment */
@media (max-width: 767px) {
  .go4ai-expert-carousel {
    display: flex !important;
    align-items: stretch !important;
  }
  .go4ai-expert-carousel > a {
    display: flex !important;
    flex-direction: column !important;
    align-self: stretch !important;
    height: auto !important;
  }
  .go4ai-expert-carousel > a > div:last-child {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
  }
  .go4ai-expert-carousel > a ul {
    flex: 1 1 auto !important;
  }
  .go4ai-expert-carousel > a .mt-auto {
    margin-top: auto !important;
  }
}

/* 2. In-page Consult Form Styling (#go4ai-personal-form, .go4ai-consult-form-card) */
.go4ai-consult-form-card input[type="text"],
.go4ai-consult-form-card input[type="email"],
.go4ai-consult-form-card input[type="tel"],
.go4ai-consult-form-card select {
  height: 48px !important;
  min-height: 48px !important;
  box-sizing: border-box !important;
  padding: 0.625rem 1rem !important;
  font-size: 0.9375rem !important;
  line-height: 1.5 !important;
  border-radius: 0.75rem !important;
  display: block !important;
  width: 100% !important;
}
.go4ai-consult-form-card textarea {
  box-sizing: border-box !important;
  padding: 0.875rem 1rem !important;
  font-size: 0.9375rem !important;
  line-height: 1.5 !important;
  border-radius: 0.75rem !important;
  display: block !important;
  width: 100% !important;
  min-height: 100px !important;
  resize: vertical;
}
.go4ai-consult-form-card label {
  display: block;
  margin-bottom: 0.375rem;
}
.go4ai-consult-form-card .go4ai-consent-row {
  display: flex !important;
  align-items: flex-start !important;
  gap: 0.75rem !important;
}
.go4ai-consult-form-card .go4ai-consent-row input[type="checkbox"] {
  flex: 0 0 auto !important;
  width: 1rem !important;
  height: 1rem !important;
  margin-top: 0.2rem !important;
  accent-color: #1d4ed8;
}
.go4ai-consult-form-card .go4ai-consent-row label {
  flex: 1 1 auto;
  min-width: 0;
  margin-bottom: 0;
}
.go4ai-consult-form-card [data-consult-org-fields].hidden {
  display: none !important;
}
.go4ai-consult-form-card .go4ai-hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* 3. Partner Logos Always Full Color */
#g4x .g4x-logo img,
.g4ai-logo-card img {
  filter: none !important;
  opacity: 1 !important;
}

/* 4. Section “Chương trình đào tạo GO4AI” Mobile Typography */
@media (max-width: 639px) {
  #google-ai-essentials-go4ai .text-center {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }
  #google-ai-essentials-go4ai h2 {
    text-wrap: balance;
    font-size: 1.5rem !important;
    line-height: 1.35 !important;
    max-width: 22rem;
    margin-left: auto;
    margin-right: auto;
  }
  #google-ai-essentials-go4ai p {
    text-wrap: pretty;
    font-size: 0.9375rem !important;
    line-height: 1.65 !important;
    max-width: 22rem;
    margin-left: auto;
    margin-right: auto;
  }
}

/* 5. Section “Kết nối đúng chuyên gia” Mobile Typography */
@media (max-width: 639px) {
  .go4ai-routing-hero {
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
  }
  .go4ai-routing-hero h1 {
    text-wrap: balance;
    font-size: 1.625rem !important;
    line-height: 1.3 !important;
    max-width: 22rem;
    margin-left: auto;
    margin-right: auto;
  }
  .go4ai-routing-hero p {
    text-wrap: pretty;
    font-size: 0.9375rem !important;
    line-height: 1.65 !important;
    max-width: 22rem;
    margin-left: auto;
    margin-right: auto;
  }
}