/*
 * Agentrao V7 — AGENTO AI VISUAL SKIN ONLY
 * Reference: https://agento-ai.com/ (reviewed 2026-10-20); light blue / navy palette.
 * This file changes only colors, surfaces, borders, radii, shadows and hover/focus visual treatment.
 * Do not alter font, content, element order, sizing, layout, position, assets, or behavior.
 * Restore hubspot-style.css link to return to the V7 skin. V7 files preserved.
 */
:root {
  --white: #f4f8fc;
  --background: #f4f8fc;
  --ink: #002254;
  --muted: #5a6a82;
  --green: #7cc3f7; /* Alias retained for compatibility with source HTML/CSS */
  --forest: #003b8a;
  --cream: #edf7fd;
  --yellow: #edf7fd;
  --pink: #d7effe;
  --mint: #e4f3fc;
  --lav: #eaf5fb;
  --blue: #eaf6fd;
  --line: #cfe4f6;
  --agento-blue: #7cc3f7;
  --agento-navy-hover: #003b8a;
  --agento-ink: #002254;
  --agento-dark: #002254;
  --agento-outline: #cfe4f6;
}

/* Base tone: airy light-blue / navy enterprise; all typography remains from /fontmacdinh. */
html, body {background-color: #f4f8fc; color: #002254;}
a {color: inherit;}
a:hover {color: #003b8a;}
button:focus-visible, a:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline-color: #7cc3f7;
}

/* Header and navigation — do not change hierarchy, dimensions, sticky or responsive rules. */
.announcement {background-color:#edf7fd;color:#002254;box-shadow:inset 0 -1px 0 #cfe4f6;}
.notice-dot {background-color:#7cc3f7;}
.announcement a, .brand-flower {color:#7cc3f7;}
.site-header {background-color:#fff;border-bottom-color:#cfe4f6;box-shadow:0 2px 12px rgba(0,34,84,.055);}
.desktop-links a:hover,.login-link:hover,
.menu--desktop a:hover,.menu--desktop a:focus-visible,
.menu--desktop .submenu-toggle:hover,
.menu--desktop .menu-item.is-expanded > .menu-link-row .submenu-toggle {color:#003b8a;}
.menu--desktop .sub-menu,.drop-menu {
  background-color:#fff;border-color:#cfe4f6;
  box-shadow:0 12px 30px rgba(0,34,84,.10);
}
.menu--desktop .sub-menu a:hover,.drop-menu a:hover,
.menu--desktop .sub-menu .menu-item:focus-within > a {background-color:#e8f6fe;color:#003b8a;}

/* Calls to action / links. Keep original button dimensions and layout. */
.button {border-radius:8px;box-shadow:none;}
.button-dark,.button-green {background-color:#7cc3f7;color:#fff;}
.button-dark:hover,.button-green:hover {background-color:#003b8a;color:#fff;}
.button-outline {background-color:transparent;color:#003b8a;border-color:#7cc3f7;}
.button-outline:hover {background-color:#e8f6fe;color:#003b8a;border-color:#003b8a;}
.inline-arrow {border-bottom-color:#003b8a;color:#002254;}
.inline-arrow:hover {color:#003b8a;border-bottom-color:#003b8a;}

/* Home / Hero / forms / cards: preserve layout, imagery, grid and spacing. */
.hero,.platform,.features,.testimonials,.faq-section,.api-section {background-color:#f4f8fc;}
.hero-highlight:after,h1 em:after {background-color:#7cc3f7;}
.tiny-tag {background-color:#fff;border-color:#cfe4f6;color:#002254;}
.tag-mark,.prompt-symbol,.form-note {color:#003b8a;}
.hero-sub,.process-text p,.api-intro p,.faq-aside>p,.faq-list p {color:#5a6a82;}
.prompt-form {background-color:#fff;border-color:#cfe4f6;box-shadow:0 8px 24px rgba(0,34,84,.07);}
.prompt-input-line input {color:#002254;}
.prompt-input-line input::placeholder {color:#8795a9;}
.prompt-input-line button {background-color:#7cc3f7;color:#fff;}
.prompt-input-line button:hover {background-color:#003b8a;color:#fff;}
.prompt-examples button {background-color:#edf7fd;color:#002254;}
.prompt-examples button:hover {background-color:#e8f6fe;color:#003b8a;}
.hero-main-img,.hero-image-secondary,.hero-image-secondary:first-of-type,
.hero-image-secondary:last-of-type {background-color:#edf7fd;}
.trust-block {border-bottom-color:#cfe4f6;}
.trust-block .brands img {background-color:#fff;border-color:#cfe4f6;}

/* Original cards keep their geometry; only light-blue surfaces are applied. */
.process-yellow,.process-lavender,.process-pink,.process-mint {background-color:#edf7fd;}
.process-card {box-shadow:inset 0 0 0 1px #cfe4f6;border-radius:16px;}
.process-symbol {color:#7cc3f7;}
.solutions,.updates {background-color:#edf7fd;}
.department-tabs button {background-color:#fff;border-color:#cfe4f6;color:#002254;}
.department-tabs button[aria-selected="true"] {background-color:#002254;border-color:#002254;color:#fff;}
.department-tabs button:hover:not([aria-selected="true"]) {background-color:#e8f6fe;border-color:#9fd9fa;color:#003b8a;}
.department-panel,.team-thumb,.update-card {background-color:#fff;}
.department-panel {box-shadow:inset 0 0 0 1px #cfe4f6;}
.team-thumb {border-color:#cfe4f6;}
.team-thumb span,.update-info a:hover {color:#003b8a;}
.thumb-green,.thumb-yellow,.thumb-purple {background-color:#edf7fd;}
.feature-card {background-color:#fff;border-color:#cfe4f6;border-radius:16px;box-shadow:0 4px 18px rgba(0,34,84,.055);}
.feature-a,.feature-b,.feature-c,.feature-d,.feature-e,.feature-f {background-color:#edf7fd;}
.feature-top .number,.feature-top p {color:#5a6a82;}
.results-panel {background-color:#edf7fd;box-shadow:inset 0 0 0 1px #cfe4f6;border-radius:16px;}
.metric-grid p {color:#5a6a82;}
.testimonial-image {background-color:#edf7fd;}
.testimonial-copy {background-color:#edf7fd;}
.quote-mark {color:#7cc3f7;}
.review-buttons button {background-color:#fff;border-color:#cfe4f6;}
.review-buttons button:hover {background-color:#e8f6fe;border-color:#7cc3f7;color:#003b8a;}
.signup-panel {background-color:#d7effe;border-radius:16px;}
.signup-pattern {color:rgba(255,255,255,.24);}
.signup-form {background-color:#fff;box-shadow:inset 0 0 0 1px #cfe4f6;}
.signup-form button {background-color:#7cc3f7;color:#fff;}
.signup-form button:hover {background-color:#003b8a;color:#fff;}
.faq-list {border-color:#cfe4f6;}
.faq-plus:before,.faq-plus:after {background-color:#7cc3f7;}

/* Inverse section: dark teal surface is an Agento blue-navy dark surface. */
.security-panel {background-color:#002254;color:#fff;border-radius:16px;}
.security-panel .security-info h2,.security-panel .security-info li {color:#fff;}
.security-info>p {color:#e3ebe7;}
.security-check,.security-shield {background-color:#7cc3f7;color:#fff;}
.security-badge {background-color:#fff;color:#002254;box-shadow:0 5px 14px rgba(4,39,41,.2);}
.api-visual {background-color:#edf7fd;border-color:#cfe4f6;box-shadow:0 10px 26px rgba(0,34,84,.08);}
.api-visual-badge {background-color:#fff;color:#002254;box-shadow:0 5px 18px rgba(0,34,84,.13);}
.update-one,.update-two,.update-three {background-color:#edf7fd;}
.update-lines i {background-color:rgba(124,195,247,.25);}
.update-orbs i:nth-child(2) {background-color:#d7effe;}
.update-orbs i:nth-child(3) {background-color:#d7effe;}

/* Footer and newsletter. */
.footer {background-color:#fff;box-shadow:inset 0 1px 0 #cfe4f6;}
.footer-about p,.footer-links a,.footer-bottom {color:#5a6a82;}
.footer-about small,.footer-links a:hover,.footer-bottom a:hover {color:#003b8a;}
.newsletter-form {border-color:#cfe4f6;background-color:#fff;}
.newsletter-form button {background-color:#7cc3f7;color:#fff;}
.newsletter-form button:hover {background-color:#003b8a;}

/* All internal Page templates: same visual language; no page structures are modified. */
.tone-white {background-color:#f4f8fc;}
.tone-cream,.tone-yellow,.tone-pink,.tone-mint,.tone-lav,.tone-blue {background-color:#edf7fd;}
.inner-hero>.wrap>p,.inner-hero.tone-yellow>.wrap>p,
.inner-hero.tone-mint>.wrap>p,.inner-heading p,.split-copy p {color:#5a6a82;}
.inner-hero-image {background-color:#edf7fd;}
.inner-card,.inner-card.shade-cream,.inner-card.shade-yellow,
.inner-card.shade-pink,.inner-card.shade-lav,.inner-card.shade-mint,
.inner-card.shade-blue {background-color:#fff;box-shadow:inset 0 0 0 1px #cfe4f6;border-radius:16px;}
.inner-card p,.prose,.article-wrap>p {color:#5a6a82;}
.card-symbol {background-color:#e8f6fe;color:#003b8a;}
.media-box,.media-box:has(img.image-missing) {background:#edf7fd;}
.media-placeholder {color:#002254;}
.mini-cta,.tick-list li:before {background-color:#7cc3f7;color:#fff;}
.form-shell,.auth-card {background-color:#fff;border-color:#cfe4f6;box-shadow:0 9px 28px rgba(0,34,84,.07);border-radius:16px;}
.demo-form input,.demo-form select,.demo-form textarea,
.locked-form input,.site-search input {background-color:#fff;border-color:#c7e0f3;color:#002254;}
.demo-form input:focus,.demo-form select:focus,.demo-form textarea:focus,
.locked-form input:focus,.site-search input:focus {border-color:#7cc3f7;box-shadow:0 0 0 3px rgba(124,195,247,.16);}
.demo-form p[role="status"],.entry-kicker,.auth-bottom a,.auth-extra a,.status-icon {color:#003b8a;}
.entry,.news-feature {background-color:#fff;}
.entry {border-color:#cfe4f6;}
.news-feature {box-shadow:inset 0 0 0 1px #cfe4f6;}
.entry:hover {background-color:#f0f9ff;}
.entry-arrow {background-color:#d7effe;color:#003b8a;}
.news-feature>.media-box {background-color:#edf7fd;}
.prose h2,.prose h3 {color:#002254;}
.switch>span {background-color:#aabfd0;}
.switch:has(input:checked)>span {background-color:#7cc3f7;}
.pricing-card {background-color:#fff;border-color:#cfe4f6;border-radius:16px;}
.pricing-card.featured {background-color:#f0f9ff;border-color:#7cc3f7;}
.pricing-card>p,.price-note,.swatch code,.status-page p,
.auth-brand>p,.auth-card>p {color:#5a6a82;}
.auth-section {background-color:#edf7fd;}

/* Keep mobile menu and bottom navigation mechanics exactly as in V6. */
@media(max-width:860px) {
  .header-search {background-color:#edf7fd;border-color:#cfe4f6;}
  .header-search input,.header-search button {color:#002254;}
  .mobile-nav {background-color:#fff;border-top-color:#cfe4f6;border-bottom-color:#cfe4f6;box-shadow:0 16px 30px rgba(0,34,84,.12);}
  .menu--mobile>.menu-item,.menu--mobile .sub-menu .menu-item {border-bottom-color:#cfe4f6;}
  .menu--mobile .submenu-toggle {background-color:#edf7fd;border-color:#cfe4f6;color:#002254;}
  .menu--mobile .menu-item>.sub-menu {background-color:#f0f9ff;border-left-color:#7cc3f7;}
  .menu--mobile .menu-item.is-expanded > .menu-link-row > .submenu-toggle {background-color:#d7effe;border-color:#7cc3f7;color:#003b8a;}
  .mobile-bottom-nav {background-color:#fff;border-top-color:#cfe4f6;box-shadow:0 -4px 18px rgba(0,34,84,.09);}
  .bottom-nav-item {color:#5a6a82;}
  .bottom-nav-item[aria-current="page"] {color:#003b8a;}
  /* Floating Zalo remains blue on purpose: Zalo brand identity and positioning untouched. */
}


/* Agento-specific color/contrast refinements; still visual styling ONLY. */
:root {
  --white:#ffffff;
  --background:#f4f8fc;
  --ink:#002254;
  --muted:#5a6a82;
  --green:#7cc3f7;
  --forest:#003b8a;
  --cream:#edf7fd;
  --yellow:#edf7fd;
  --pink:#d7effe;
  --mint:#e4f3fc;
  --lav:#eaf5fb;
  --blue:#d7effe;
  --line:#cfe4f6;
}
/* Navy and light-blue CTAs: text remains visible in default, hover and focus states. */
.button-dark,.button-green,.prompt-input-line button,
.signup-form button,.newsletter-form button,
.mini-cta,.tick-list li:before {background-color:#7cc3f7;color:#002254;}
.button-dark:hover,.button-green:hover,.prompt-input-line button:hover,
.signup-form button:hover,.newsletter-form button:hover {background-color:#003b8a;color:#fff;}
.button-outline {border-color:#7cc3f7;background-color:#fff;color:#002254;}
.button-outline:hover {border-color:#003b8a;background-color:#e7f4ff;color:#003b8a;}
.department-tabs button[aria-selected="true"]{background-color:#002254;border-color:#002254;color:#fff;}
.department-tabs button:hover:not([aria-selected="true"]){color:#003b8a;}
.hero-highlight:after,h1 em:after {background-color:#7cc3f7;}
.tiny-tag,.tag-mark,.prompt-symbol,.form-note,.process-symbol,
.quote-mark,.faq-plus,.entry-kicker,.status-icon{color:#003b8a;}
.announcement a,.brand-flower,.team-thumb span,.update-info a:hover{color:#003b8a;}
.signup-panel {background-color:#d7effe;}
.process-yellow {background-color:#e6f4fd;}
.process-lavender {background-color:#eef7fd;}
.process-pink {background-color:#d7effe;}
.process-mint {background-color:#e3f3fc;}
.feature-a,.feature-c,.feature-e {background-color:#eaf5fc;}
.feature-b,.feature-d,.feature-f {background-color:#e0f1fc;}
.thumb-yellow,.update-three {background-color:#e5f4fc;}
.thumb-purple,.update-two {background-color:#eef7fd;}
.thumb-green,.update-one {background-color:#d7effe;}
.results-panel,.testimonial-copy {background-color:#eaf6fe;}
.testimonial-image,.media-box,.api-visual {background-color:#edf7fd;}
/* Deep navy inverse is a visual-only surface; existing images/content untouched. */
.security-panel {background-color:#002254;color:#fff;}
.security-panel .security-info h2,.security-panel .security-info li,
.security-panel a:not(.button) {color:#fff;}
.security-info>p {color:#d7effe;}
.security-check,.security-shield {background-color:#7cc3f7;color:#002254;}
.security-badge {background-color:#fff;color:#002254;}
.menu--desktop .sub-menu a:hover,.drop-menu a:hover {background-color:#e9f6ff;color:#003b8a;}
.menu--mobile .menu-item>.sub-menu {background-color:#f0f9ff;}
.menu--mobile .menu-item.is-expanded > .menu-link-row > .submenu-toggle {background-color:#d7effe;color:#002254;}
/* Forms and statuses */
.demo-form input:focus,.demo-form select:focus,.demo-form textarea:focus,
.locked-form input:focus,.site-search input:focus {
  border-color:#7cc3f7;box-shadow:0 0 0 3px rgba(124,195,247,.20);
}
.pricing-card.featured{background-color:#eaf6fe;border-color:#7cc3f7;}
.entry-arrow{background-color:#d7effe;color:#002254;}
.faq-plus:before,.faq-plus:after{background-color:#003b8a;}
.mobile-bottom-nav {background-color:#fff;border-top-color:#cfe4f6;}
.bottom-nav-item[aria-current="page"] {color:#003b8a;}