/* Fox Digital 3.3.11 — unified typography system
 * Keeps display/hero typography intentional while normalising real reading copy,
 * cards, forms, buttons and metadata across Home, services, Website Design,
 * Reference Library, Blog and Industry landing pages.
 */
body.fox-canvas{
  --fox-type-body:14px;
  --fox-type-lead:15px;
  --fox-type-card:13px;
  --fox-type-small:11px;
  --fox-type-button:12px;
  --fox-type-section-title:clamp(29px,2.55vw,36px);
  --fox-type-card-title:16px;
  font-size:var(--fox-type-body);
  line-height:1.68;
}

/* Shared labels and controls */
body.fox-canvas .eyebrow{font-size:11px!important;line-height:1.35!important;letter-spacing:.12em!important}
body.fox-canvas .btn{font-size:var(--fox-type-button)!important;line-height:1.2!important}
body.fox-canvas .lead{font-size:var(--fox-type-lead)!important;line-height:1.7!important}
body.fox-canvas .section-intro{font-size:var(--fox-type-body)!important;line-height:1.7!important}
body.fox-canvas .section-head .lead,
body.fox-canvas .fox-thiet-ke-website .web-section-copy p,
body.fox-canvas .fox-thiet-ke-website .web-industries-head>.lead,
body.fox-canvas .fox-thiet-ke-website .web-trust-head>.lead,
body.fox-canvas .fox-thiet-ke-website .web-pricing-head>p{font-size:var(--fox-type-body)!important;line-height:1.7!important}
body.fox-canvas .pill{font-size:10px!important}
body.fox-canvas input:not([type=checkbox]):not([type=radio]),
body.fox-canvas select,
body.fox-canvas textarea{font-size:13px!important;line-height:1.45!important}
body.fox-canvas form label{font-size:11px!important;line-height:1.45!important}

/* Keep all service-page hero copy on one readable scale. Hero display headings stay larger. */
body.fox-canvas .ga-hero h1,
body.fox-canvas .fb-hero h1,
body.fox-canvas .page-hero h1,
body.fox-canvas .fox-thiet-ke-website .web-hero h1,
body.fox-canvas .fxi-hero h1{font-size:clamp(40px,4.25vw,56px)!important;line-height:1.08!important}
body.fox-canvas .hero-copy>p,
body.fox-canvas .ga-hero p,
body.fox-canvas .fb-hero-copy>p,
body.fox-canvas .fox-thiet-ke-website .web-hero .lead,
body.fox-canvas .fxi-lead,
body.fox-canvas .fox-kho-giao-dien .library-hero-v4 .lead,
body.fox-canvas .fox-kho-giao-dien .library-hero-v3 .lead{font-size:var(--fox-type-lead)!important;line-height:1.7!important}

/* Section title scale — keeps the page hierarchy consistent without flattening H1 display typography. */
body.fox-canvas .home-services h2,
body.fox-canvas .home-process h2,
body.fox-canvas .success-section h2,
body.fox-canvas .platform-partners h2,
body.fox-canvas .consult-section h2,
body.fox-canvas .faq-section h2,
body.fox-canvas .home-contact h2,
body.fox-canvas .section-head h2,
body.fox-canvas .ga-section h2,
body.fox-canvas .ga-benefits h2,
body.fox-canvas .fb-section h2,
body.fox-canvas .fox-thiet-ke-website .web-section-head h2,
body.fox-canvas .fox-thiet-ke-website .web-pricing-head h2,
body.fox-canvas .fox-thiet-ke-website .web-faq h2,
body.fox-canvas .fox-thiet-ke-website .web-consult h2,
body.fox-canvas .fox-kho-giao-dien .reference-heading h2,
body.fox-canvas .fox-kho-giao-dien .reference-steps-head h2,
body.fox-canvas .fox-kho-giao-dien .reference-benefits-head h2,
body.fox-canvas .fxi-section h2,
body.fox-canvas .fxi-editor-content h2{font-size:var(--fox-type-section-title)!important;line-height:1.17!important;letter-spacing:-.045em!important}

/* Standard card title scale */
body.fox-canvas .card h3,
body.fox-canvas .service-link h3,
body.fox-canvas .home-service h3,
body.fox-canvas .process-grid h3,
body.fox-canvas .ga-format h3,
body.fox-canvas .ga-benefits h3,
body.fox-canvas .ga-steps h3,
body.fox-canvas .fb-format h3,
body.fox-canvas .fb-steps h3,
body.fox-canvas .fox-thiet-ke-website .web-benefit-card h3,
body.fox-canvas .fox-thiet-ke-website .web-process-steps h3,
body.fox-canvas .fox-kho-giao-dien .reference-benefits-grid h3,
body.fox-canvas .fxi-benefit h3,
body.fox-canvas .fxi-process-grid h3{font-size:var(--fox-type-card-title)!important;line-height:1.4!important}

/* Main descriptive text — one consistent 14px reading size. */
body.fox-canvas .success-section p,
body.fox-canvas .platform-partners>div>p,
body.fox-canvas .consult-section .consult-grid>div>p,
body.fox-canvas .faq-list details p,
body.fox-canvas .home-contact p,
body.fox-canvas .service-story p,
body.fox-canvas .service-cta p,
body.fox-canvas .pricing-factors,
body.fox-canvas .ga-budget-note,
body.fox-canvas .ga-faq details p,
body.fox-canvas .ga-cta p,
body.fox-canvas .fb-intro,
body.fox-canvas .fb-callout p,
body.fox-canvas .fb-faq p,
body.fox-canvas .fox-thiet-ke-website .web-faq-intro>p,
body.fox-canvas .fox-thiet-ke-website .web-consult-copy>p,
body.fox-canvas .fox-kho-giao-dien .reference-heading .lead,
body.fox-canvas .fox-kho-giao-dien .reference-guide-head>p,
body.fox-canvas .fox-kho-giao-dien .reference-consult-copy>p,
body.fox-canvas .fxi-editor-content p,
body.fox-canvas .news-heading p,
body.fox-canvas .news-advice p{font-size:var(--fox-type-body)!important;line-height:1.72!important}

/* Card/detail descriptions — one compact 13px scale. */
body.fox-canvas .card p,
body.fox-canvas .service-link p,
body.fox-canvas .home-service p,
body.fox-canvas .process-grid p,
body.fox-canvas .story-steps p,
body.fox-canvas .price-card p,
body.fox-canvas .ga-format p,
body.fox-canvas .ga-benefits p,
body.fox-canvas .ga-steps p,
body.fox-canvas .fb-format p,
body.fox-canvas .fb-setup p,
body.fox-canvas .fb-steps p,
body.fox-canvas .fox-thiet-ke-website .web-benefit-card p,
body.fox-canvas .fox-thiet-ke-website .web-process-intro p,
body.fox-canvas .fox-thiet-ke-website .web-process-steps p,
body.fox-canvas .fox-thiet-ke-website .web-delivery-grid p,
body.fox-canvas .fox-thiet-ke-website .web-faq-list p,
body.fox-canvas .fox-kho-giao-dien .reference-guide-grid p,
body.fox-canvas .fox-kho-giao-dien .reference-guide-grid-v3 p,
body.fox-canvas .fox-kho-giao-dien .reference-benefits-grid p,
body.fox-canvas .fxi-process-grid p,
body.fox-canvas .fxi-price-card p,
body.fox-canvas .fxi-price-card li,
body.fox-canvas .fxi-addons p,
body.fox-canvas .news-card-copy>p{font-size:var(--fox-type-card)!important;line-height:1.68!important}

/* List text that visually belongs to cards, not article body. */
body.fox-canvas .home-service ul,
body.fox-canvas .check-list li,
body.fox-canvas .fox-thiet-ke-website .web-price-card li,
body.fox-canvas .fox-thiet-ke-website .web-consult-list li{font-size:12px!important;line-height:1.65!important}

/* Secondary notes / metadata */
body.fox-canvas .ga-note,
body.fox-canvas .fb-note,
body.fox-canvas .fox-thiet-ke-website .web-price-note,
body.fox-canvas .fox-thiet-ke-website .web-faq-support,
body.fox-canvas .fox-thiet-ke-website .web-consult-note,
body.fox-canvas .form-note,
body.fox-canvas .external-disclaimer,
body.fox-canvas .fxi-demo-note,
body.fox-canvas .news-meta{font-size:var(--fox-type-small)!important;line-height:1.6!important}

/* Buttons and interactive labels */
body.fox-canvas .hs-link,
body.fox-canvas .external-btn,
body.fox-canvas .ga-format summary,
body.fox-canvas .fb-format summary,
body.fox-canvas .ga-faq summary,
body.fox-canvas .fb-faq summary,
body.fox-canvas .fox-thiet-ke-website .web-faq-list summary{font-size:12px!important;line-height:1.35!important}

/* Header/footer scale */
body.fox-canvas .site-header .navlinks{font-size:13px!important}
body.fox-canvas .site-header .navcall{font-size:12px!important}
body.fox-canvas .footer-brand-col p,
body.fox-canvas .footer-grid a:not(.brand),
body.fox-canvas .footer-contact-col p{font-size:12px!important;line-height:1.65!important}
body.fox-canvas .footer-grid h3{font-size:13px!important}
body.fox-canvas .footer-platforms>span,
body.fox-canvas .copyright{font-size:10px!important}

/* Blog listing typography */
body.fox-canvas .news-category-nav a,
body.fox-canvas .news-section-heading>span,
body.fox-canvas .news-section-heading>a,
body.fox-canvas .news-topics>a{font-size:12px!important}
body.fox-canvas .news-card h3{font-size:16px!important;line-height:1.42!important}
body.fox-canvas .news-lead h3{font-size:24px!important;line-height:1.32!important}
body.fox-canvas .news-section-heading h2{font-size:26px!important;line-height:1.25!important}

/* Blog/article reading text deliberately stays larger than marketing descriptions. */
body.fox-canvas .news-article .entry-content,
body.fox-canvas .article p{font-size:16px!important;line-height:1.82!important}
body.fox-canvas .news-article .entry-content h2{font-size:30px!important;line-height:1.3!important}
body.fox-canvas .news-article .entry-content h3{font-size:22px!important;line-height:1.35!important}

/* Unified catalog: compact UI has its own intentionally smaller scale. */
body.fox-canvas .fox-catalog .fox-catalog-search{font-size:11px!important}
body.fox-canvas .fox-catalog .fox-catalog-search-box input{font-size:12px!important}
body.fox-canvas .fox-catalog .fox-catalog-meta{font-size:10px!important}
body.fox-canvas .fox-catalog .fox-catalog-card-body h3{font-size:13px!important}
body.fox-canvas .fox-catalog .fox-catalog-card-body small{font-size:9px!important}
body.fox-canvas .fox-catalog .fox-catalog-demo{font-size:10px!important}
body.fox-canvas .fox-catalog .fox-catalog-note{font-size:10px!important}

@media(max-width:760px){
  body.fox-canvas{
    --fox-type-body:13px;
    --fox-type-lead:14px;
    --fox-type-card:12px;
    --fox-type-small:10px;
    --fox-type-button:11px;
    --fox-type-section-title:clamp(25px,7vw,31px);
    --fox-type-card-title:15px;
  }
  body.fox-canvas .eyebrow{font-size:10px!important}
  body.fox-canvas .ga-hero h1,
  body.fox-canvas .fb-hero h1,
  body.fox-canvas .page-hero h1,
  body.fox-canvas .fox-thiet-ke-website .web-hero h1,
  body.fox-canvas .fxi-hero h1{font-size:38px!important;line-height:1.1!important}
  body.fox-canvas .site-header .navlinks{font-size:13px!important}
  body.fox-canvas .site-header .navcall{font-size:11px!important}
  body.fox-canvas input:not([type=checkbox]):not([type=radio]),
  body.fox-canvas select,
  body.fox-canvas textarea{font-size:13px!important}
  body.fox-canvas .fox-catalog .fox-catalog-card-body h3{font-size:11.5px!important}
  body.fox-canvas .fox-catalog .fox-catalog-card-body small{font-size:7.5px!important}
  body.fox-canvas .footer-brand-col p,
  body.fox-canvas .footer-grid a:not(.brand),
  body.fox-canvas .footer-contact-col p{font-size:11px!important}
  body.fox-canvas .footer-grid h3{font-size:12px!important}
  body.fox-canvas .news-article .entry-content,
  body.fox-canvas .article p{font-size:15px!important;line-height:1.78!important}
  body.fox-canvas .news-article .entry-content h2{font-size:25px!important}
  body.fox-canvas .news-article .entry-content h3{font-size:19px!important}
}