/* The switch stays at the right edge; navigation retains its mobile breakpoint. */
/* Evondev typography: one family, a shared scale, Vietnamese accent clearance.
   Preserve mode: blue identity, galaxy artwork, routes and all handlers retained. */
.site-header .header-tools { display:flex; align-items:center; gap:8px; flex-shrink:0; }
.site-header .theme-toggle {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:44px; min-width:44px; padding:10px 12px; flex-shrink:0;
  border:1px solid var(--border-strong); border-radius:12px;
  background:var(--surface); color:var(--foreground); font-size:.875rem;
  font-weight:600; line-height:1; transition:background .18s ease, border-color .18s ease, transform .18s ease;
}
.theme-toggle svg { width:19px; height:19px; flex-shrink:0; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.theme-toggle .theme-moon, [data-theme=dark] .theme-toggle .theme-sun { display:none; }
[data-theme=dark] .theme-toggle .theme-moon { display:block; }
.site-header .theme-toggle:hover { background:var(--primary-light); border-color:var(--primary); }
.site-header .theme-toggle:active { transform:scale(.96); }
.site-header .theme-toggle:focus-visible { outline:3px solid var(--primary); outline-offset:3px; }
.site-header #main-nav { min-width:0; }
@media (min-width:901px) and (max-width:1100px) {
  .site-header .nav-wrap { gap:12px; }
  .site-header #main-nav { gap:4px; }
  .site-header .theme-label { display:none; }
  .site-header .theme-toggle { padding:10px; }
}
@media (max-width:900px) {
  .site-header .nav-wrap { gap:12px; }
  .site-header .brand { min-width:0; }
  .site-header .header-tools { margin-left:auto; }
  .site-header .header-tools .menu-toggle { min-width:44px; min-height:44px; padding:0; }
}
@media (max-width:360px) {
  .site-header .theme-label { display:none; }
  .site-header .theme-toggle { padding:10px; }
  .site-header .header-tools { gap:4px; }
}

/* Taste Skill, preserve mode: DESIGN_VARIANCE 4 / MOTION_INTENSITY 3 /
   VISUAL_DENSITY 4. Native CSS keeps the existing IA, typography and mobile grid.
   Galaxy backdrop; role-based colors and progressively lighter inner panels.
   Layering follows Carbon's guidance; this remains the site's native CSS. */
:root[data-theme=dark] {
  color-scheme:dark;
  --background:#080c18;
  --surface:#161c24;
  --surface-raised:#202936;
  --foreground:#f2f5fa;
  --muted:#c2ccda;
  --subtle:#b2bece;
  --border:#343c47;
  --border-strong:#536176;
  --border-subtle:#293442;
  --border-hover:#3a4b60;
  --control-border:#62748d;
  --primary:#b6cef4;
  --primary-hover:#d0e1fa;
  --primary-foreground:#101824;
  --primary-light:#222e3f;
  --primary-light-hover:#2b3a50;
  --action:#3b69a4;
  --action-hover:#4476b1;
  --action-foreground:#ffffff;
  --frame-blue:#415675;
  --frame-cyan:#536b83;
  --frame-warm:#596d82;
  --diagram-ba:#4e443e;
  --diagram-po:#494737;
  --diagram-pm:#30454e;
  --diagram-ba-po:#394857;
  --diagram-ba-pm:#3d444d;
  --diagram-po-pm:#3c4c3d;
  --diagram-shared:#3f5063;
  --ink:var(--foreground);
  --teal:var(--primary);
  --mint:var(--primary);
  --soft:var(--background);
  --line:var(--border);
  --quiet-shadow:0 8px 24px #00000024;
  --shadow:0 10px 30px #00000028;
  --radius:16px;
}
[data-theme=dark] body {
  position:relative; isolation:isolate;
  background:var(--background); color:var(--foreground);
}
/* One static layer covers the viewport, without a scroll or animation loop.
   Exposure stays low enough for text even over the brightest stars. */
[data-theme=dark] body:before {
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:url("/assets/galaxy-dark-v29.webp") center / cover no-repeat;
  opacity:.72; filter:brightness(.3);
}
[data-theme=dark] ::selection { background:#365579; color:#ffffff; }
[data-theme=dark] :is(h1,h2,h3,h4,h5,h6) { color:var(--foreground); text-shadow:none; }
[data-theme=dark] :is(h1,h2) { letter-spacing:-.03em; }
[data-theme=dark] :is(p,.fine-print,.breadcrumb,.showcase-note) { color:var(--muted); }
[data-theme=dark] :is(.eyebrow,.text-link,.card-number,.section-index,.compact-price,.demo-product-type) { color:var(--primary); }
[data-theme=dark] :is(.brand-section-heading,.studio-hero,.partnership-intro,.process-intro,.robot-heading,.ai-studio-grid,.teamwork-heading,.cta) :is(h1,h2) em { color:var(--primary); }
[data-theme=dark] :is(a,button,summary,input,select,textarea):focus-visible { outline:2px solid var(--primary); outline-offset:4px; }

/* A quiet header: active, hover and open states share one surface hierarchy. */
[data-theme=dark] .site-header { background:#101214f0; border-color:var(--border); box-shadow:0 3px 18px #00000018; }
[data-theme=dark] :is(.brand,.brand-wordmark) { color:var(--foreground); }
[data-theme=dark] .brand-sub { color:var(--muted); }
[data-theme=dark] .brand-mark { color:#ffffff; background:var(--action); box-shadow:none; }
[data-theme=dark] .site-header .brand:after { border-color:#91b3df30; box-shadow:0 0 12px #7e9fc51a; }
[data-theme=dark] .site-header #main-nav>.nav-link,
[data-theme=dark] .site-header #main-nav>.nav-item { background:var(--surface); border-color:var(--border); color:var(--foreground); box-shadow:none; }
[data-theme=dark] .site-header #main-nav :is(.nav-link,.nav-expand) { color:var(--foreground); }
[data-theme=dark] .site-header #main-nav :is(.nav-link.active,.nav-item.is-open>.nav-link) { color:var(--primary)!important; }
[data-theme=dark] .site-header #main-nav>.nav-link:hover,
[data-theme=dark] .site-header #main-nav>.nav-link:focus-visible,
[data-theme=dark] .site-header #main-nav>.nav-link.active,
[data-theme=dark] .site-header #main-nav>.nav-item:hover,
[data-theme=dark] .site-header #main-nav>.nav-item:focus-within,
[data-theme=dark] .site-header #main-nav>.nav-item.is-open { background:var(--primary-light); border-color:var(--border-strong); box-shadow:none; }
[data-theme=dark] .site-header #main-nav .nav-item>.nav-link:hover,
[data-theme=dark] .site-header #main-nav .nav-expand { background:transparent; }
[data-theme=dark] .site-header #main-nav.open,
[data-theme=dark] .nav-dropdown { background:var(--surface); border-color:var(--border); color:var(--foreground); box-shadow:var(--shadow); }
[data-theme=dark] .nav-dropdown :is(a,strong) { color:var(--foreground); }
[data-theme=dark] .nav-dropdown small { color:var(--muted); }
[data-theme=dark] .nav-dropdown a:hover,
[data-theme=dark] .nav-dropdown a:focus-visible { background:var(--primary-light); }
[data-theme=dark] .site-header nav .nav-link.active:after { background:var(--primary); }

/* Filled actions stay blue with white labels, including hover and focus. */
[data-theme=dark] .button,
[data-theme=dark] .cta .button,
[data-theme=dark] .soul-link-card>.button,
[data-theme=dark] .price-card.featured .button,
[data-theme=dark] .site-header #main-nav .nav-contact,
[data-theme=dark] .site-header #main-nav .nav-contact:visited {
  background:var(--action); border-color:var(--action); color:var(--action-foreground); box-shadow:none;
}
[data-theme=dark] .button:hover,
[data-theme=dark] .button:focus-visible,
[data-theme=dark] .cta .button:hover,
[data-theme=dark] .soul-link-card>.button:hover,
[data-theme=dark] .soul-link-card>.button:focus-visible,
[data-theme=dark] .price-card.featured .button:hover,
[data-theme=dark] .site-header #main-nav .nav-contact:hover,
[data-theme=dark] .site-header #main-nav .nav-contact:focus-visible,
[data-theme=dark] .site-header #main-nav .nav-contact:active {
  background:var(--action-hover); border-color:var(--action-hover); color:var(--action-foreground); box-shadow:none;
}
[data-theme=dark] .button.secondary,
[data-theme=dark] .studio-hero .actions .button.secondary,
[data-theme=dark] .light-matrix-section .button.secondary,
[data-theme=dark] .partnership-section .button.secondary,
[data-theme=dark] :is(.demo-link,.demo-product-link,.zalo-button) {
  color:var(--primary-hover); background:var(--primary-light); border-color:var(--border-strong); box-shadow:none;
}
[data-theme=dark] .button.secondary:hover,
[data-theme=dark] .button.secondary:focus-visible,
[data-theme=dark] .studio-hero .actions .button.secondary:hover,
[data-theme=dark] .studio-hero .actions .button.secondary:focus-visible,
[data-theme=dark] .light-matrix-section .button.secondary:hover,
[data-theme=dark] .light-matrix-section .button.secondary:focus-visible,
[data-theme=dark] .partnership-section .button.secondary:hover,
[data-theme=dark] .partnership-section .button.secondary:focus-visible,
[data-theme=dark] :is(.demo-link,.demo-product-link,.zalo-button):hover,
[data-theme=dark] :is(.demo-link,.demo-product-link,.zalo-button):focus-visible {
  color:var(--primary-hover); background:var(--primary-light-hover); border-color:var(--primary); box-shadow:none;
}
[data-theme=dark] .demo-link:disabled { color:var(--subtle); background:var(--surface-raised); border-color:var(--border); }
[data-theme=dark] :is(.button,.demo-link,.demo-product-link):after { opacity:.16; }
[data-theme=dark] .back-top { color:var(--foreground); background:var(--surface-raised); border:1px solid var(--border-strong); }
[data-theme=dark] .skip-link { color:#ffffff; background:var(--action); }

/* The galaxy continues through every route. Solid cards protect legibility. */
[data-theme=dark] #main>section,
[data-theme=dark] .business-footer { background:transparent; color:var(--foreground); }
[data-theme=dark] :is(.ambient-light,.universe-canvas,.signal-matrix,.product-sculpture),
[data-theme=dark] .universe-section:before { display:none; }
[data-theme=dark] :is(.studio-visual,.studio-visual:before,.app-platform-banner,.solution-preview,.website-demo-gallery,.case-study-feature,.light-matrix-section .case-study-feature,.compact-service-card,.demo-product-card,.solution-card,.module-grid>article,.support-grid article,.quote-box,.contact-card,.project-callout,.team-role,.team-detail,.partnership-grid,.partnership-section .benefit-grid article,.price-card,.estimate-config,.estimate-summary,.estimate-choice,.estimate-plan,.process-row) {
  background:var(--surface); color:var(--foreground); border-color:var(--border); box-shadow:none;
}
[data-theme=dark] .studio-visual:after { opacity:.12; }
[data-theme=dark] :is(.compact-service-card,.demo-product-card,.solution-card,.price-card,.app-platform-banner,.website-demo-gallery,.quote-box,.team-detail,.case-study-feature,.estimate-config,.estimate-summary) { border-radius:16px; }
[data-theme=dark] :is(.studio-visual-top,.studio-visual-caption,.partnership-signature,.team-detail dl>div,.project-screen,.product-visual,.solution-detail,.footer-intro,.footer-bottom,.faq-wrap details) { border-color:var(--border); }
[data-theme=dark] .studio-visual-caption strong { color:var(--foreground); }
[data-theme=dark] .hero-assurances { color:var(--muted); }
[data-theme=dark] .capability-strip a { background:var(--surface); color:var(--foreground); border-color:var(--border); }
[data-theme=dark] .capability-strip a:hover,
[data-theme=dark] .capability-strip a:focus-visible { background:var(--surface-raised); border-color:var(--border-strong); box-shadow:none; }
[data-theme=dark] .capability-strip a:hover strong { color:var(--foreground); }
[data-theme=dark] :is(.compact-service-copy h3,.demo-product-copy h4,.team-detail-heading h3,.team-detail dt,.team-role strong,.app-platform-intro h3,.website-demo-heading h3) { color:var(--foreground); }
[data-theme=dark] :is(.compact-service-copy h3,.demo-product-copy h4) { font-weight:700; }
[data-theme=dark] .compact-service-copy h3 { letter-spacing:-.015em; line-height:1.4; }
[data-theme=dark] :is(.compact-service-copy>p,.demo-product-copy p,.team-detail dd,.team-role small) { color:var(--muted); }
[data-theme=dark] .compact-service-copy>p { line-height:1.65; }
[data-theme=dark] :is(.compact-service-card,.demo-product-card) { --card-accent:#6982a6; --demo-accent:#6982a6; }
[data-theme=dark] :is(.compact-service-card,.demo-product-card):after { background:linear-gradient(135deg,var(--frame-blue),transparent 38% 65%,var(--frame-cyan)); opacity:.22; padding:1px; }
[data-theme=dark] #main :is(.compact-service-card,.demo-product-card,.solution-card,.website-demo-gallery) { border-color:var(--border-subtle); }
[data-theme=dark] #main :is(.compact-service-card,.demo-product-card):is(:hover,:focus-within) { border-color:var(--border-hover); box-shadow:0 10px 24px #00000024; }
/* Dim only the surrounding frame. Artwork and text keep full opacity. */
[data-theme=dark] #main :is(.compact-art-frame,.demo-product-visual) { background:var(--surface-raised); border:1px solid var(--border-subtle); box-shadow:none; }
[data-theme=dark] .compact-art-frame:after { opacity:.22; padding:1px; }
[data-theme=dark] .demo-product-visual:after { border-color:var(--frame-cyan); box-shadow:none; opacity:.12; }
[data-theme=dark] .animated-gradient-frame>.gradient-border { opacity:.12; padding:1px; }
[data-theme=dark] .animated-gradient-frame:not(.brand)>.gradient-border:before {
  background:conic-gradient(from 0deg,var(--border-subtle),var(--frame-blue) 22%,var(--frame-cyan) 40%,var(--frame-blue) 63%,var(--frame-warm) 82%,var(--border-subtle));
}
[data-theme=dark] .animated-gradient-frame:hover>.gradient-border,
[data-theme=dark] .animated-gradient-frame:focus-within>.gradient-border { opacity:.22; }
[data-theme=dark] .site-header .brand>.gradient-border { opacity:.72; }
[data-theme=dark] :is(.app-platform-list li,.preview-widgets>div,.demo-product-copy li,.tags span,.robot-feature-chips span,.badge,.upcoming-label,.upcoming-visual) {
  color:var(--muted); background:var(--surface-raised); border-color:var(--border); box-shadow:none;
}
[data-theme=dark] :is(.app-platform-list strong,.preview-widgets strong,.team-venn strong) { color:var(--foreground); }
[data-theme=dark] .app-platform-list li:hover { background:var(--primary-light); border-color:var(--border-strong); box-shadow:none; }
[data-theme=dark] .app-platform-list li svg { color:var(--primary); }
[data-theme=dark] .app-hot { color:#e8c393; background:#332b21; border-color:#64543e; }
[data-theme=dark] .upcoming-visual>span { color:var(--muted); }
[data-theme=dark] .light-matrix-section .solution-tabs button { color:var(--muted); background:var(--surface); border-color:var(--border); box-shadow:none; }
[data-theme=dark] .light-matrix-section .solution-tabs button:hover { color:var(--foreground); background:var(--surface-raised); border-color:var(--border-strong); }
[data-theme=dark] .light-matrix-section .solution-tabs button[aria-selected=true] { color:var(--primary-hover); background:var(--primary-light); border-color:var(--border-strong); }
[data-theme=dark] :is(.soul-link-card,.light-matrix-section .soul-product-preview,.cta) { background:linear-gradient(120deg,var(--surface),var(--background)); color:var(--foreground); border-color:var(--border); }
[data-theme=dark] .cta-inner { background:var(--surface); border-color:var(--border); }
[data-theme=dark] .soul-link-copy h2 { color:var(--foreground); }
[data-theme=dark] .soul-signature { color:var(--primary); }
[data-theme=dark] :is(.team-role-code,.team-role-action,.team-detail-heading>span) { color:var(--primary); }
[data-theme=dark] .team-role { border-top-color:var(--border-strong); }
[data-theme=dark] .team-role:hover,
[data-theme=dark] .team-role[aria-expanded=true] { background:var(--primary-light); border-color:var(--border-strong); box-shadow:none; }
[data-theme=dark] .team-venn svg .venn-outline { stroke:var(--border-strong); }
[data-theme=dark] .team-venn p { color:var(--muted); }
[data-theme=dark] .team-venn svg .delivery-plate { fill:var(--action); }
[data-theme=dark] .team-venn svg .team-delivery { fill:#ffffff; }
[data-theme=dark] .process-rows:before { background:var(--border); }
[data-theme=dark] .process-row:hover,
[data-theme=dark] .process-row:focus-within,
[data-theme=dark] .process-row[open] { background:var(--surface-raised); border-color:var(--border-strong); }
[data-theme=dark] .process-row .step-no { color:var(--primary); background:var(--primary-light); border-color:var(--border-strong); }
[data-theme=dark] .process-row[open] .step-no { color:#ffffff; background:var(--action); border-color:var(--action); }
[data-theme=dark] .process-row .step-detail { background:var(--surface); color:var(--muted); }
[data-theme=dark] .step-detail>span { background:var(--surface-raised); color:var(--muted); }
[data-theme=dark] .step-detail strong { color:var(--foreground); }
[data-theme=dark] .process-mini-route span { color:var(--muted); background:var(--surface); border-color:var(--border); }
[data-theme=dark] .process-mini-route span.is-current { color:#ffffff; background:var(--action); border-color:var(--action); box-shadow:none; }
[data-theme=dark] .process-mini-route span:before { opacity:.08; }
[data-theme=dark] .slogan-word { color:color-mix(in srgb,var(--word-color,#9fbcea) 25%,var(--foreground)); }
[data-theme=dark] .zalo-button small { color:var(--muted); }
[data-theme=dark] .zalo-bubble { background:var(--action); }

/* Product previews and supporting pages use the same typographic hierarchy. */
[data-theme=dark] :is(.platform-demo,.project-screen,.product-visual,.demo-product-screen,.demo-browser-bar,.demo-topbar,.demo-sidebar,.demo-chart,.demo-calendar,.demo-panels>div,.demo-modules>div,.preview-widgets>div,.window-label) { background:var(--surface); color:var(--foreground); border-color:var(--border); }
[data-theme=dark] .platform-demo { font-family:inherit; }
[data-theme=dark] :is(.demo-heading h4,.demo-sidebar strong,.preview-widgets strong) { color:var(--foreground); }
[data-theme=dark] :is(.demo-nav,.demo-heading small,.demo-modules small,.demo-topbar strong,.demo-browser-bar span,.demo-insights small,.demo-chart>span,.demo-side-note,.demo-workflow p,.preview-top,.preview-top small,.preview-widgets small,.service-details>small,.service-output small) { color:var(--muted); }
[data-theme=dark] :is(.demo-label,.demo-nav.active,.demo-avatar,.demo-access>span,.demo-table>div:first-child,.demo-table b,.preview-route) { color:var(--primary-hover); background:var(--primary-light); border-color:var(--border); }
[data-theme=dark] .demo-modules span { color:var(--primary); }
[data-theme=dark] .demo-table>div { border-color:var(--border); }
[data-theme=dark] .demo-table b.done { color:#b2d2c4; background:#243a32; }
[data-theme=dark] .demo-calendar .marked { color:#ffffff; background:var(--action); }
[data-theme=dark] .service-details h4 { color:var(--foreground); }
[data-theme=dark] .preview-cover:after { content:""; position:absolute; inset:0; background:linear-gradient(transparent,#101214a8); pointer-events:none; }
[data-theme=dark] .preview-cover>div:last-child { z-index:1; color:#ffffff; }
[data-theme=dark] .demo-pos-stats i,
[data-theme=dark] .demo-pos-layout span,
[data-theme=dark] .demo-saas-metrics span { background:var(--surface-raised); border-color:var(--border); }
[data-theme=dark] .demo-pos-layout b { background:#a87835; }
[data-theme=dark] .demo-fashion-hero { background:linear-gradient(120deg,#413332,#493b36); }
[data-theme=dark] .demo-fashion-hero i { background:#6b5b51; box-shadow:none; }
[data-theme=dark] .demo-fashion-hero strong { color:#e7d8cb; }
[data-theme=dark] .demo-fashion-products span { background:linear-gradient(#3e3532 70%,var(--surface-raised) 70%); }
[data-theme=dark] .demo-hotel-head { color:#c2b7ed; }
[data-theme=dark] .demo-hotel-head span { background:#494158; }
[data-theme=dark] .demo-hotel-rooms span { background:var(--surface-raised); }
[data-theme=dark] .demo-saas-title { color:var(--primary); }
[data-theme=dark] .demo-saas-head span { background:var(--border-strong); }
[data-theme=dark] .case-study-feature .tags span { color:var(--muted); background:var(--surface-raised); }
[data-theme=dark] .showcase-copy .eyebrow { color:var(--primary); }
[data-theme=dark] .showcase-copy .tags>span { color:var(--muted); background:var(--surface-raised); border-color:var(--border); }

/* Quote configuration stays legible in initial, checked and generated states. */
[data-theme=dark] :is(.field input,.field select,.field textarea,.estimate-field input,.estimate-field select) { color:var(--foreground); background:var(--background); border-color:var(--control-border); }
[data-theme=dark] :is(.field input,.field textarea,.estimate-field input)::placeholder { color:var(--subtle); opacity:1; }
[data-theme=dark] :is(.field label,.estimate-solutions legend,.estimate-plans legend,.estimate-addons legend,.estimate-running legend,.estimate-tax legend,.estimate-summary h3,.estimate-table caption,.estimate-financials dd,.estimate-how summary,.estimate-grand) { color:var(--foreground); }
[data-theme=dark] :is(.estimate-empty,.estimate-upcoming,.estimate-reason,.estimate-addon-note,.estimate-scope ul,.estimate-scope p) { color:var(--muted); }
[data-theme=dark] :is(.estimate-choice,.estimate-plan):hover { background:var(--surface-raised); border-color:var(--border-strong); }
[data-theme=dark] .estimate-choice:has(input:checked),
[data-theme=dark] .estimate-plan:has(input:checked) { background:var(--primary-light); border-color:var(--primary); box-shadow:none; }
[data-theme=dark] .estimate-choice.estimate-upcoming,
[data-theme=dark] .estimate-choice.estimate-upcoming:hover { background:var(--surface); color:var(--muted); border-color:var(--border); }
[data-theme=dark] :is(.estimate-scope,.estimate-grand,.estimate-exclusions,.estimate-empty) { background:var(--surface-raised); border-color:var(--border); }
[data-theme=dark] :is(.estimate-table th,.estimate-table td,.estimate-addons label,.estimate-aftercare) { border-color:var(--border); }
[data-theme=dark] .estimate-table thead th { color:var(--muted); background:var(--surface-raised); }
[data-theme=dark] .estimate-table tfoot :is(th,td) { color:var(--foreground); background:var(--primary-light); }
[data-theme=dark] .price-card.featured { background:var(--primary-light); border-color:var(--border-strong); }
[data-theme=dark] .price-card.featured .badge { color:var(--primary-hover); background:var(--surface); }
[data-theme=dark] .price-tabs button[aria-selected=true] { color:var(--primary-hover); background:var(--primary-light); }
[data-theme=dark] .price-tabs button:hover { color:var(--foreground); }
[data-theme=dark] .contact-info a { color:var(--primary); }
[data-theme=dark] .prose a { text-decoration:underline; text-underline-offset:3px; }

@media (max-width:760px) {
  [data-theme=dark] body:before { background-position:64% center; }
  [data-theme=dark] .animated-gradient-frame>.gradient-border { opacity:.1; }
  [data-theme=dark] .compact-service-copy h3 { line-height:1.35; }
}
@media (prefers-reduced-motion:reduce) {
  .site-header .theme-toggle { transition:none; }
  [data-theme=dark] .slogan-word { color:var(--foreground)!important; }
}
@media (prefers-reduced-transparency:reduce) {
  [data-theme=dark] .site-header { background:var(--background); backdrop-filter:none; }
}

/* Shared subpage rhythm. Keep demonstration miniatures on their own scale. */
:root {
  --type-page:clamp(2rem, 1.45rem + 2.2vw, 3.25rem);
  --type-section:clamp(1.625rem, 1.2rem + 1.5vw, 2.5rem);
  --type-card:1.25rem;
  --type-body:1rem;
  --type-label:.875rem;
}
body { -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }
.subpage { font-size:var(--type-body); line-height:1.7; }
.subpage :is(h1,h2,h3,h4) { font-family:inherit; font-style:normal; overflow-wrap:break-word; }
.subpage :is(.page-intro h1,.soul-link-copy h1) {
  font-size:var(--type-page); font-weight:700; line-height:1.25;
  letter-spacing:-.02em; text-wrap:balance; margin:0 0 20px;
}
.subpage :is(.section-heading h2,.solution-detail h2,.project-heading h2,.showcase-copy h2,.estimate-heading h2) {
  font-size:var(--type-section); font-weight:600; line-height:1.3;
  letter-spacing:-.015em; text-wrap:balance;
}
.subpage :is(.solution-card h3,.price-card h3,.module-grid h3,.support-grid h3,.project-details h3,.ai-options h3,.estimate-summary h3,.quote-box h2) {
  font-size:var(--type-card); font-weight:600; line-height:1.45; letter-spacing:normal;
}
.subpage :is(.page-intro p,.section-heading>p,.solution-card>p,.solution-card li,.detail-grid p,.price-card>p,.price-card li,.showcase-copy p,.project-details p,.module-grid p,.support-grid p,.quote-box>p,.contact-info>p,.soul-link-copy p,.prose p,.estimate-heading p) {
  font-size:var(--type-body); line-height:1.75; letter-spacing:normal;
}
.subpage :is(.page-intro p,.section-heading>p,.detail-grid p,.prose p) { max-width:65ch; }
.subpage .page-intro { padding:44px 0 40px; }
.subpage .page-intro .section-heading { max-width:960px; }
.subpage .breadcrumb { font-size:var(--type-label); line-height:1.5; flex-wrap:wrap; gap:10px; }
.subpage .eyebrow { font-size:var(--type-label); line-height:1.5; letter-spacing:.065em; }
.subpage :is(.text-link,.button,.price-tabs button,.field label,.field input,.field select,.field textarea) {
  font-size:var(--type-body); line-height:1.5; letter-spacing:normal;
}
.subpage :is(.button,.price-tabs button) { white-space:normal; max-width:100%; overflow-wrap:break-word; }
.subpage .price-tabs { display:flex; flex-wrap:wrap; gap:8px; }
.subpage :is(.solution-grid,.price-grid,.module-grid,.support-grid,.contact-grid,.detail-grid) { gap:24px; }
.subpage :is(.solution-card,.price-card,.module-grid>article,.support-grid article) { min-width:0; padding:28px; }
.subpage .solution-card { display:flex; flex-direction:column; }
.subpage .solution-card :is(h3,p) { min-height:0; height:auto; }
.subpage .solution-card h3 { margin-bottom:12px; }
.subpage .solution-card ul { margin-bottom:24px; }
.subpage .solution-card .text-link { margin-top:auto; align-self:flex-start; }
.subpage .price-card { display:flex; flex-direction:column; }
.subpage .price-card .badge { align-self:flex-start; }
.subpage .price-card ul { flex:1; }
.subpage .price-card .button { margin-top:12px; width:100%; }
.subpage :is(.price,.showcase-start strong,.estimate-grand strong,.contact-card>strong) { font-variant-numeric:tabular-nums; }
.subpage .price { font-size:clamp(1.75rem,1.35rem + 1.1vw,2.5rem); line-height:1.3; letter-spacing:-.015em; }
.subpage :is(.price small,.badge,.tags span,.fine-print,.scope,.price-note p,.contact-card>span,.field label) { font-size:var(--type-label); line-height:1.6; letter-spacing:normal; }
.subpage .contact-card>strong { font-size:1.25rem; line-height:1.5; letter-spacing:normal; overflow-wrap:anywhere; }
.subpage .quote-box { padding:28px; }
.subpage .quote-actions { flex-wrap:wrap; gap:12px; }
.subpage .prose { max-width:800px; }
.subpage .prose h2 { font-size:1.375rem; line-height:1.45; letter-spacing:normal; margin:32px 0 12px; }
.subpage .prose h2:first-child { margin-top:0; }
.subpage .prose p { margin-bottom:24px; }
.subpage .soul-link-card { gap:28px; }
.subpage .soul-link-copy { min-width:0; }
.subpage .soul-link-copy h1 { margin-bottom:12px; }
.subpage .soul-link-card>.button { flex-shrink:0; }
/* Estimate labels and values need reading size rather than miniature UI text. */
.subpage .estimate-section :is(small,.estimate-reason,.estimate-addon-note,.estimate-package,.estimate-sheet-label,.estimate-formula,.estimate-unpriced,.estimate-exclusions,.estimate-scope p,.estimate-how p,.estimate-financials,#estimate-status) {
  font-size:var(--type-label); line-height:1.65; letter-spacing:normal;
}
.subpage .estimate-section :is(.estimate-choice strong,.estimate-plan strong,.estimate-addons strong,.estimate-field,.estimate-scope summary,.estimate-how summary,.estimate-table,.estimate-table thead th) {
  font-size:var(--type-label); line-height:1.6;
}
.subpage .estimate-plan { flex-wrap:wrap; }
.subpage .estimate-plan span { flex:1 1 120px; }
.subpage .estimate-table-wrap { overflow-x:auto; }
.subpage .estimate-table { min-width:480px; }
.subpage .estimate-table td { white-space:nowrap; overflow-wrap:normal; }
.subpage .estimate-table th:first-child { overflow-wrap:break-word; }

/* Complete the dark palette in secondary states and supporting routes. */
[data-theme=dark] .subpage .page-intro { border-color:var(--border-subtle); }
[data-theme=dark] :is(.price-showcase,.price-note,.faq-wrap details,.subpage .service-output,.subpage .service-details) {
  color:var(--foreground); background:var(--surface); border-color:var(--border); box-shadow:none;
}
[data-theme=dark] :is(.price-note strong,.price-card .price,.showcase-start strong,.faq-wrap summary,.contact-card>strong,.estimate-plan b,.estimate-addons b,.estimate-grand strong,.estimate-formula,.estimate-summary #estimate-status) { color:var(--primary); }
[data-theme=dark] :is(.contact-card>span,.price-card .price small,.price-card .price>span,.price-card .scope,.price-note p,.estimate-package,.estimate-sheet-label,.estimate-grand small,.estimate-plan small,.estimate-choice small,.estimate-addons small,.estimate-financials dt,.estimate-unpriced,.estimate-exclusions) { color:var(--muted); }
[data-theme=dark] :is(.solution-card li,.price-card li,.support-grid li,.field,.estimate-field,.estimate-how summary,.faq-wrap summary) { color:var(--foreground); }
[data-theme=dark] .contact-zalo { background:var(--primary-light); border-color:var(--border-strong); }
[data-theme=dark] :is(.solution-card,.contact-card,.price-card):hover { background:var(--surface-raised); border-color:var(--border-strong); }
[data-theme=dark] .price-card.featured:hover { background:var(--primary-light-hover); }
[data-theme=dark] .price-tabs button { color:var(--muted); border-color:var(--border); }
[data-theme=dark] .price-tabs button[aria-selected=true] { color:var(--primary-hover); border-color:var(--primary); }
[data-theme=dark] .estimate-section input { accent-color:var(--primary); }
[data-theme=dark] .estimate-section :is(input,select,button,a):focus-visible { outline-color:var(--primary); }
[data-theme=dark] .subpage .field :is(input,select,textarea) { border-radius:8px; }
[data-theme=dark] .subpage .field :is(input,select,textarea):hover { border-color:var(--primary); }
[data-theme=dark] .subpage :is(.section-heading,.showcase-copy,.detail-grid,.project-details,.contact-info,.prose) a:not(.button):not(.contact-card) { color:var(--primary); }
[data-theme=dark] .subpage :is(.solution-card,.price-card,.module-grid>article,.support-grid article,.contact-card,.quote-box) { border-radius:16px; }
/* Neutral text spacing throughout the dark page, including Vietnamese labels. */
[data-theme=dark] :is(h3,h4,.compact-service-copy h3,.team-role strong,.demo-product-copy h4) { letter-spacing:normal; line-height:1.45; }
[data-theme=dark] :is(.compact-service-copy h3,.demo-product-copy h4) { font-weight:600; }
[data-theme=dark] :is(.site-header,.nav-dropdown) { backdrop-filter:none; }

@media (max-width:760px) {
  .subpage .page-intro { padding:32px 0; }
  .subpage :is(.solution-grid,.price-grid,.module-grid,.support-grid,.contact-grid,.detail-grid) { grid-template-columns:1fr; gap:20px; }
  .subpage :is(.solution-card,.price-card,.price-card.featured,.module-grid>article,.support-grid article,.quote-box) { padding:24px; }
  .subpage .price-tabs button { flex:1 1 calc(50% - 8px); min-height:48px; font-size:var(--type-label); }
  .subpage .project-heading { align-items:flex-start; flex-wrap:wrap; gap:20px; }
  .subpage .project-heading .button { width:auto; }
  .subpage .soul-link-card { display:flex; flex-direction:column; align-items:flex-start; gap:24px; }
  .subpage .soul-signature { font-size:2rem; }
  .subpage .soul-link-card>.button { width:100%; }
  .subpage .quote-actions { flex-direction:column; }
  .subpage .quote-actions .button { width:100%; }
}

/* Shared lightweight scrollbars. */
* { --scrollbar-thumb: transparent; }
*:hover { --scrollbar-thumb: color-mix(in srgb, var(--foreground) 16%, transparent); }
.is-scrolling { --scrollbar-thumb: color-mix(in srgb, var(--foreground) 28%, transparent); }
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 9999px; }
::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--foreground) 40%, transparent); }

/* Firefox. ⚠️ PHẢI nằm trong @supports: từ Chrome 121, phần tử có
   scrollbar-width/scrollbar-color là Chrome BỎ QUA toàn bộ ::-webkit-scrollbar
   và vẽ thanh "thin" gốc ~8-11px chiếm chỗ. Để trần thì bản 4px ở trên chỉ còn
   chạy trên Safari. */
@supports not selector(::-webkit-scrollbar) {
  * { scrollbar-width: thin; scrollbar-color: transparent transparent; }
  *:hover { scrollbar-color: color-mix(in srgb, var(--foreground) 18%, transparent) transparent; }
  .is-scrolling { scrollbar-color: color-mix(in srgb, var(--foreground) 28%, transparent) transparent; }
}
/* ===================================================== */

/* Ẩn HẲN, không bao giờ hiện: chỉ cho hàng chip / tab cuộn ngang, nơi thanh
   cuộn dưới đáy hàng trông như lỗi. Máy có chuột thì hàng đó phải có nút mũi
   tên hai đầu (responsive.md, sau R10). Vùng cuộn dọc (sidebar, danh sách, modal)
   thì KHÔNG dùng, để thanh tự ẩn ở trên lo. */
.scrollbar-clean {
  scrollbar-width: none;
}
.scrollbar-clean::-webkit-scrollbar {
  display: none;
}