/* ============================================================================
   VNPT THỦ ĐỨC — DESIGN SYSTEM V0 (M3-B FOUNDATION, ADDITIVE)  2026-08-28
   ----------------------------------------------------------------------------
   ADDITIVE ONLY. Loads AFTER style.css. Does NOT override legacy unless the
   new .dsv0-* classes are explicitly applied. Rollback = remove <link> + restore
   any piloted markup. No framework, no new font, no new dependency.

   CLASSIFICATION (per Architect, M3-B section 0):
     OFFICIAL VNPT VERIFIED : (none yet — no VNPT Brand Guideline provided)
     CURRENT SITE STANDARD  : Be Vietnam Pro (current digital product typeface)
     CANDIDATE              : #0066CC = current SITE primary brand candidate
     LEGACY                 : existing :root primitives in style.css (kept, aliased)
   Do NOT document candidates as official brand facts.
   ============================================================================ */

/* ---- SEMANTIC TOKEN LAYER (alias over existing legacy primitives) ---------- */
:root{
  /* color · brand (CANDIDATE, not official VNPT) */
  --color-brand-primary: var(--blue-500);        /* #0066CC candidate */
  --color-brand-primary-deep: var(--blue-600);   /* #0055BB */
  --color-brand-accent: var(--cyan-400);         /* #00AAFF */
  --color-brand-gradient: var(--grad-brand);     /* #0055BB → #00CCFF, controlled decorative only */
  /* color · text */
  --color-text-primary: var(--ink);              /* #0B1220 */
  --color-text-secondary: var(--ink-soft);       /* #4A5568 */
  --color-text-muted: var(--ink-faint);          /* #8A94A6 */
  --color-text-on-brand: #FFFFFF;
  /* color · surface / border */
  --color-surface-default: var(--paper);         /* #FFFFFF */
  --color-surface-soft: var(--paper-soft);       /* #F5F8FC */
  --color-border-subtle: var(--paper-line);      /* #E4E9F0 */
  /* color · feedback (reuse existing) */
  --color-success: var(--green);
  --color-danger: var(--red);
  --color-warning: var(--gold);
  --color-focus-ring: rgba(0,102,204,.45);

  /* spacing · 4-based scale (default for NEW code; legacy untouched) */
  --space-1:4px;  --space-2:8px;  --space-3:12px; --space-4:16px; --space-5:20px;
  --space-6:24px; --space-8:32px; --space-10:40px; --space-12:48px; --space-16:64px;

  /* radius (map legacy primitives + pill) */
  --radius-sm: var(--radius-s);  /* 10px */
  --radius-md: var(--radius-m);  /* 16px */
  --radius-lg: var(--radius-l);  /* 28px */
  --radius-pill: 100px;

  /* elevation (map legacy shadows) */
  --elevation-1: var(--shadow-s);
  --elevation-2: var(--shadow-m);
  --elevation-3: var(--shadow-l);

  /* motion */
  --motion-fast: .15s;
  --motion-base: .22s;
  --motion-slow: .40s;
  --motion-ease: var(--ease);

  /* typography (CURRENT SITE typeface) */
  --font-family-base: var(--font-body);

  /* component · button tokens */
  --button-radius: var(--radius-pill);
  --button-font-weight: 700;
  --button-min-height: 44px;                     /* a11y touch target floor */
  --button-primary-bg: var(--color-brand-primary);    /* M3-C: SOLID #0066CC (Architect-locked). white/#0066CC = 5.57:1 PASS */
  --button-primary-fg: var(--color-text-on-brand);
  --button-secondary-bg: var(--color-surface-default);
  --button-secondary-fg: var(--color-text-primary);
  --button-secondary-border: var(--color-border-subtle);
  /* A11Y (resolved M3-C): primary bg = solid brand candidate #0066CC (5.57:1 AA pass).
     grad-brand (#0055BB→#00CCFF) demoted to DECORATIVE-ONLY (--color-brand-gradient);
     never used behind text/actions because its cyan end (#00CCFF) is ~1.9:1 (fail). */
}

/* ---- TYPOGRAPHY V0 (semantic roles; DEFINED here, applied progressively) ---
   Not a quota: legitimate role-specific sizes are allowed. Mobile-readable. */
:where(.dsv0-display){ font-family:var(--font-family-base); font-weight:800; font-size:clamp(2.2rem,4.6vw,3.4rem); line-height:1.06; letter-spacing:-.01em; }
:where(.dsv0-h1){ font-family:var(--font-family-base); font-weight:800; font-size:clamp(1.8rem,3.4vw,2.6rem); line-height:1.12; }
:where(.dsv0-h2){ font-family:var(--font-family-base); font-weight:700; font-size:clamp(1.5rem,2.6vw,2rem); line-height:1.2; }
:where(.dsv0-h3){ font-family:var(--font-family-base); font-weight:700; font-size:1.25rem; line-height:1.3; }
:where(.dsv0-h4){ font-family:var(--font-family-base); font-weight:700; font-size:1.1rem; line-height:1.35; }
:where(.dsv0-body-lg){ font-size:1.05rem; line-height:1.6; }
:where(.dsv0-body){ font-size:.95rem; line-height:1.6; }
:where(.dsv0-body-sm){ font-size:.85rem; line-height:1.5; }
:where(.dsv0-caption){ font-size:.78rem; line-height:1.4; color:var(--color-text-muted); }
:where(.dsv0-label){ font-size:.82rem; font-weight:600; line-height:1.3; }

/* ---- BUTTON SYSTEM V0 (pilot component) ---------------------------------- */
:where(.dsv0-btn){
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:15px 26px; border-radius:var(--button-radius);
  font-family:var(--font-family-base); font-weight:var(--button-font-weight);
  font-size:.95rem; line-height:1; min-height:var(--button-min-height);
  border:1.5px solid transparent; cursor:pointer; text-decoration:none;
  transition: transform var(--motion-base) var(--motion-ease),
              box-shadow var(--motion-base),
              border-color var(--motion-base), color var(--motion-base);
}
:where(.dsv0-btn) svg{ width:18px; height:18px; flex-shrink:0; transition:transform var(--motion-fast); }

.dsv0-btn--primary{ background:var(--button-primary-bg); color:var(--button-primary-fg);
  box-shadow:0 10px 26px rgba(0,102,204,.30); }
.dsv0-btn--primary:hover{ transform:translateY(-3px); box-shadow:0 16px 32px rgba(0,102,204,.40); }
.dsv0-btn--primary:hover svg{ transform:translateX(3px); }

.dsv0-btn--secondary{ background:var(--button-secondary-bg); color:var(--button-secondary-fg);
  border-color:var(--button-secondary-border); }
.dsv0-btn--secondary:hover{ border-color:var(--color-brand-primary); color:var(--color-brand-primary); transform:translateY(-2px); }

.dsv0-btn--tertiary{ background:transparent; color:var(--color-text-secondary); padding:12px 14px; box-shadow:none; }
.dsv0-btn--tertiary:hover{ color:var(--color-brand-primary); background:var(--color-surface-soft); }

.dsv0-btn:focus-visible{ outline:3px solid var(--color-focus-ring); outline-offset:2px; }
.dsv0-btn[disabled], .dsv0-btn[aria-disabled="true"]{ opacity:.5; pointer-events:none; }
.dsv0-btn--block{ width:100%; }

/* size variant · compact (header/utility conversion controls) */
.dsv0-btn--sm{ padding:9px 18px; font-size:.85rem; min-height:40px; gap:6px; }

@media (max-width:600px){
  :where(.dsv0-btn){ padding:13px 20px; font-size:.9rem; }
  .dsv0-btn--sm{ padding:8px 15px; font-size:.82rem; min-height:44px; }  /* a11y touch target for header conversion CTA */
}

/* ---- ACCESSIBILITY · reduced motion (bounded to hero decoration + generic loops) --
   Respect OS "reduce motion": stop decorative orbit/float/spin/bounce. Content unaffected. */
@media (prefers-reduced-motion: reduce){
  .ring, .ring-outer, .ring-mid, .float-card, .float-badge, .orb,
  .hero-center-icon, .scroll-arrow, .tag-dot{
    animation: none !important;
  }
}

/* ---- small header token utilities (replace inline hardcodes, value-preserving) ---- */
.dsv0-ico-brand{ color: var(--color-brand-primary); }

/* ============================================================================
   M3-D1 · LINK SYSTEM V0 + FOOTER COMPONENT (token-driven migration of <footer>)
   Replaces legacy .footer* (parent renamed → legacy nested selectors stop matching;
   no specificity war). JS hooks (.footer-cat-link/.footer-stat-link) + IDs kept.
   Inverse (on-dark) surface + a11y-safe text. Rollback: restore footer.php backup
   + delete this block.
   ============================================================================ */
:root{
  --color-surface-inverse: #050B17;                    /* current footer navy (site value) */
  --color-surface-inverse-soft: rgba(255,255,255,.06);
  --color-text-on-inverse: rgba(255,255,255,.72);      /* ~9:1 on navy — AA pass */
  --color-text-on-inverse-strong: #FFFFFF;
  --color-border-on-inverse: rgba(255,255,255,.08);
  --color-link-on-inverse: rgba(255,255,255,.72);
  --color-link-on-inverse-hover: var(--cyan-300);      /* #00CCFF — unifies 2 conflicting legacy hovers */
}

/* Link System V0 */
:where(.dsv0-link){ color:var(--color-brand-primary); text-decoration:none; transition:color var(--motion-base); }
:where(.dsv0-link):hover{ text-decoration:underline; }
.dsv0-link:focus-visible{ outline:3px solid var(--color-focus-ring); outline-offset:2px; border-radius:2px; }
:where(.dsv0-link--on-inverse){ color:var(--color-link-on-inverse); text-decoration:none; }
.dsv0-link--on-inverse:hover{ color:var(--color-link-on-inverse-hover); }
.dsv0-link--on-inverse:focus-visible{ outline:3px solid var(--color-link-on-inverse-hover); outline-offset:2px; border-radius:2px; }

/* Footer component */
.dsv0-footer{ background:var(--color-surface-inverse); color:var(--color-text-on-inverse); padding:70px 0 26px; }
.dsv0-footer__grid{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:var(--space-10);
  padding-bottom:44px; border-bottom:1px solid var(--color-border-on-inverse); }
.dsv0-footer__logo{ margin-bottom:16px; }
.dsv0-footer__logo-img{ height:36px; width:auto; display:block; }
.dsv0-footer__brand-text{ font-size:.88rem; line-height:1.7; margin:14px 0 20px; max-width:280px; }
.dsv0-footer__social{ display:flex; gap:10px; }
.dsv0-footer__social a{ width:42px; height:42px; border-radius:50%;
  background:var(--color-surface-inverse-soft); border:1px solid var(--color-border-on-inverse);
  color:var(--color-text-on-inverse-strong); display:flex; align-items:center; justify-content:center;
  transition:background var(--motion-base), transform var(--motion-base), border-color var(--motion-base); }
.dsv0-footer__social a:hover{ background:var(--color-brand-primary); border-color:transparent; transform:translateY(-3px); }
.dsv0-footer__social a:focus-visible{ outline:3px solid var(--color-focus-ring); outline-offset:2px; }
.dsv0-footer__social a i, .dsv0-footer__social a svg{ color:var(--color-text-on-inverse-strong); font-size:16px; }
.dsv0-footer__x-icon{ display:inline-block; vertical-align:-2px; }
.dsv0-footer__heading{ color:var(--color-text-on-inverse-strong); font-size:.95rem; font-weight:700; margin:0 0 18px; }  /* footer-specific heading size (kept, legit) */
.dsv0-footer__list{ list-style:none; padding:0; margin:0; }
.dsv0-footer__list li{ margin-bottom:11px; }
.dsv0-footer__link{ color:var(--color-link-on-inverse); text-decoration:none; font-size:.88rem;
  display:inline-block; transition:color var(--motion-base), transform var(--motion-base); }
.dsv0-footer__link:hover{ color:var(--color-link-on-inverse-hover); transform:translateX(4px); }
.dsv0-footer__link:focus-visible{ outline:3px solid var(--color-link-on-inverse-hover); outline-offset:2px; border-radius:2px; }
.dsv0-footer__bottom{ display:flex; align-items:center; justify-content:space-between;
  padding-top:24px; font-size:.8rem; flex-wrap:wrap; gap:14px; }
.dsv0-footer__legal{ margin:0; color:var(--color-text-on-inverse); }
.dsv0-footer__badges{ display:flex; gap:12px; }
@media (max-width:900px){ .dsv0-footer__grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:600px){
  .dsv0-footer__grid{ grid-template-columns:1fr; }
  .dsv0-footer__bottom{ flex-direction:column; align-items:flex-start; }
}

/* ============================================================================
   M3-D2 · CARD SYSTEM V0 (service card pilot) — additive; applied via
   .dsv0-card--service ON existing .service-card (JS class + data-* kept).
   Legacy .service-card CSS is already token-driven (paper/radius-m/paper-line);
   this layer removes reliance on redundant inline + sets Sales-UX hierarchy:
   PRIMARY = "Tìm hiểu thêm" (consult-first, enterprise), SECONDARY = cart.
   Intentional visual delta (Architect review). Rollback: restore body.php backup
   + delete this block.
   ============================================================================ */
.dsv0-card--service{ min-height:380px; }
.dsv0-card__media{ width:100%; height:160px; overflow:hidden; border-radius:var(--radius-sm);
  background:var(--color-surface-soft); border:1px solid var(--color-border-subtle);
  display:flex; align-items:center; justify-content:center; margin-bottom:16px; }
.dsv0-card__media-img{ max-height:100%; max-width:100%; object-fit:contain; transition:transform var(--motion-slow) ease; }

/* commercial / price — token-driven (was hardcoded #E53E3E/#FFF5F5) */
.dsv0-card__commercial{ margin:12px 0 8px; color:var(--color-text-secondary); font-size:.9rem; }
.dsv0-card__price-old{ text-decoration:line-through; color:var(--color-text-muted); margin-right:8px; }
.dsv0-card__price-now{ color:var(--color-danger); font-size:1.1rem; font-weight:800; }
.dsv0-card__price-main{ color:var(--color-brand-primary); font-size:1rem; font-weight:700; }
.dsv0-card__price-tag{ background:color-mix(in srgb, var(--color-danger) 8%, #fff);
  color:var(--color-danger); border:1px solid color-mix(in srgb, var(--color-danger) 25%, #fff);
  padding:2px 6px; border-radius:var(--radius-sm); font-size:.72rem; font-weight:700; margin-left:6px; }

/* proof (features) — keep all data; slight de-emphasis to reduce repeated-badge shouting */
.dsv0-card__proof li{ font-size:.84rem; }

/* actions — one dominant primary; cart demoted to secondary (de-emphasise e-commerce) */
.dsv0-card__actions{ display:flex; gap:10px; align-items:center; margin-top:auto; padding-top:8px; flex-wrap:wrap; }
.dsv0-card__actions .card-link.dsv0-btn{ font-size:.85rem; text-decoration:none; }
.dsv0-card--service .btn-add-cart.dsv0-card__cart:not(.added){
  background:var(--color-surface-default); color:var(--color-brand-primary);
  border:1.5px solid var(--color-border-subtle); box-shadow:none; font-weight:600; }
.dsv0-card--service .btn-add-cart.dsv0-card__cart:not(.added):hover{
  border-color:var(--color-brand-primary); transform:translateY(-2px); box-shadow:none; }

/* M3-D2.2 · verified product proof badge (only when product has real evidence) */
.dsv0-card__proofbadge{ display:inline-flex; align-items:center; gap:6px; margin:2px 0 10px;
  font-size:.8rem; font-weight:600; color:var(--color-brand-primary-deep); }
.dsv0-card__proofbadge svg{ width:15px; height:15px; color:var(--color-brand-primary); flex-shrink:0; }

/* ============================================================================
   GX-02C — SHELL CONTACT HIERARCHY (0914 = primary direct-consultation CTA)
   Applied via .gx-shell-cta on the existing header conversion button.
   "Tư vấn trực tiếp · " collapses on tight headers → shows the number (the signature).
   Rollback: delete this block.
   ============================================================================ */
.gx-shell-cta{ white-space:nowrap; }
.gx-shell-cta .gx-cta-lead{ white-space:nowrap; }
@media (max-width:1200px){ .gx-shell-cta .gx-cta-lead{ display:none; } }

/* ============================================================================
   GX-02E-A — MOBILE SHARED-SHELL RESPONSIVE HEADER (home + Hub, one rule set)
   <=600px: keep brand + 0914 CTA + hamburger in the top bar so it fits 360/390/412;
   the secondary utilities move into the existing slide-in drawer (.tb-mobile-utils),
   proxying the real controls. Desktop (>600) unchanged. Rollback: delete this block
   + the .tb-mobile-utils markup/script in shell-nav.php.
   ============================================================================ */
.tb-mobile-utils{ display:none; }
@media (max-width:600px){
  .top-bar-actions > .btn-lang,
  .top-bar-actions > #openSmartQuoteBtn,
  .top-bar-actions > #openCheckSupportBtn,
  .top-bar-actions > #openUserNotifBtn,
  .top-bar-actions > .auth-btns,
  .top-bar-actions > .user-menu,
  .top-bar-actions > .tb-divider,
  .search-wrapper .btn-search{ display:none !important; }
  .top-bar-actions{ gap:6px !important; }
  .search-wrapper{ position:static !important; }
  #liveSearchBox{ position:fixed !important; top:66px !important; left:8px !important; right:8px !important; width:auto !important; max-width:none !important; z-index:120 !important; }
  .tb-mobile-utils{ display:flex !important; flex-direction:column; background:rgba(0,0,0,.12); }
  .tb-mobile-utils .tb-mu{ display:flex; align-items:center; gap:10px; color:#fff; padding:14px 24px;
    border-bottom:1px solid rgba(255,255,255,.1); font-weight:600; font-size:.95rem; text-decoration:none; }
  .tb-mobile-utils .tb-mu:hover{ background:rgba(255,255,255,.1); }
  .tb-mobile-utils .tb-mu svg{ width:18px; height:18px; flex-shrink:0; }
}

/* ============================================================================
   GX-02E1 — HOMEPAGE MOBILE BODY: contain decorative/carousel horizontal bleed
   at its OWN section (ownership fix, per "a non-visible element must not widen
   the page"). NOT a body-level overflow-x:hidden hack. Mobile only; desktop
   already fits so unchanged. Real content (cards/text/CTA) fits 360/390/412.
   Rollback: delete this block.
   ============================================================================ */
@media (max-width:600px){
  #featured-services, #vnpt-promo, #testimonials, #services, #pricing, #demo { overflow-x: clip; }
}

/* ============================================================================
   GX-02E1 — HOMEPAGE MOBILE BODY: kill the phantom horizontal overflow.
   The homepage is NOT actually scrollable (scrollX stays 0) and nothing is
   visibly cut; documentElement.scrollWidth reported 595>390 purely because the
   legacy promo carousel + marquee are (by design) wider than the viewport and
   the old body{overflow-x:hidden} never reset scrollWidth. overflow-x:clip on
   the root removes the phantom scroll area cleanly (modern; NOT overflow-x:hidden;
   NOT a page-shrink; hides nothing real; vertical scroll + sticky/fixed intact).
   Rollback: delete this block.
   ============================================================================ */
html{ overflow-x: clip; }

/* ============================================================================
   GES-V2.1 — MOBILE NAV AFFORDANCE. Make the shared hamburger a clear, tappable
   boxed menu button on mobile (owner: header must show a visible nav entry —
   Logo | Call | ☰). Desktop keeps .hamburger{display:none}. Rollback: delete block.
   ============================================================================ */
.site-header .hamburger{
  width:44px; height:44px; padding:0; align-items:center; justify-content:center; gap:5px;
  border:1.5px solid var(--color-border-subtle); border-radius:12px;
  background:#fff; box-shadow:var(--elevation-1);
}
.site-header .hamburger span{ width:20px; height:2.5px; border-radius:2px; background:var(--color-brand-primary); }
.site-header .hamburger.active span{ background:var(--color-brand-primary-deep); }

/* ============================================================================
   GES-V2.1 — DRAWER DENSITY + USABILITY. Body scroll-lock behind open drawer;
   "Tiện ích" utility group styled at the drawer footer (primary-first). Rollback:
   delete this block + revert shell-nav.php.
   ============================================================================ */
body.gx-nav-lock{ overflow:hidden; }
@media (max-width:600px){
  .tb-mobile-utils{ margin-top:10px; border-top:1px solid rgba(255,255,255,.14); padding-top:4px; }
  .tb-mu-head{ display:block; padding:14px 24px 6px; font-size:.72rem; font-weight:800;
    letter-spacing:.06em; text-transform:uppercase; color:rgba(255,255,255,.62); }
}

/* ============================================================================
   GES-V2.1 — 320px HEADER FIT. Keep Logo | Call | ☰ on-screen at 320 (hamburger
   was clipped). Tighten CTA (drop phone icon — number is enough), shrink logo +
   hamburger. Rollback: delete this block.
   ============================================================================ */
@media (max-width:360px){
  .top-bar-container{ gap:5px; }
  .gx-shell-cta{ padding:8px 12px; font-size:.8rem; }
  .gx-shell-cta svg{ display:none; }
  .nav-logo .logo-icon img{ height:30px !important; }
  .site-header .hamburger{ width:40px; height:40px; }
}

/* ============================================================================
   GES-V2.1 — CHATBOT vs DRAWER. When the mobile nav drawer is open, the floating
   AI button must not sit over drawer items. Hide it while drawer is open (nav has
   interaction priority). Rollback: delete this block.
   ============================================================================ */
body.gx-nav-lock #chatbotWrapper,
body.gx-nav-lock .chatbot-wrapper,
body.gx-nav-lock #chatbot-toggle,
body.gx-nav-lock .chatbot-toggle-btn{ display:none !important; }