@charset "UTF-8";
/* ==========================================================================
   css_yp1_new.css v3.1 — yellowpages.com.vn (English International B2B)
   ==========================================================================
   PURPOSE:
     Global stylesheet for the _new migration. Contains design tokens,
     shared components (footer, top nav, utilities), and base overrides
     that apply across ALL pages of the English international site.

   v3.1 CHANGES (2026-05-16) — Vertical alignment hotfix:
     + Restored margin-top: 3px on .buttom_open_search at the mobile
       breakpoint. The v3.0 change to margin-top: 0 had broken vertical
       alignment with the logo, which has padding-top:3px in production
       css_page2.css. The 3px offset is what visually centers the search
       button against the logo column at the same baseline.

   v3.0 CHANGES (2026-05-16) — Final mobile compact density polish:
     + After side-by-side comparison at identical viewports, three
       remaining differences vs trangvangvietnam.com's mobile bar:
         a) Search wrap height 39 -> 34: matches the inner button so
            no extra vertical padding adds bulk.
         b) Search button margin-top 3 -> 0: not needed when wrap and
            button heights match.
         c) Hamburger toggle: max-width 39 -> 34, border 1px rgba -> 1.5px
            stronger, background transparent (was rgba 0.10). Cleaner
            outline-only look matches trangvang's denser style.
     + Result: header height drops from ~50px to ~42px on mobile,
       matching trangvang's compact mobile bar pixel-for-pixel.
     + Removed duplicate :hover rule (kept the v3.0 version).

   v2.9 CHANGES (2026-05-16) — Stop tuning, pure trangvang copy:
     + After v2.4-v2.8 chasing micro-adjustments per user feedback, took
       a step back and copied trangvangvietnam.com's mobile layout exactly:
         .top_header_logo_m      { width: 11% }
         .yp-header-search-wrap  { width: 80% }
         .top_menu_right_m       { width:  9% }
         .buttom_open_search     { width: 93%; height: 34px; margin-top: 3px }
       No calc(), no fixed pixels, no buffer math. Pure percentage with
       the hamburger button filling its own column. Browsers handle
       fractional-pixel rounding internally — the pattern doesn't break
       because each element is sized RELATIVE to its parent, not to the
       viewport directly.
     + KEY INSIGHT: previous attempts failed because the hamburger had
       a FIXED pixel width (30-39px) that could exceed its percentage
       column at small viewports. v2.9 makes the hamburger fill 100%
       of its 9% column (capped max-width: 39px on larger phones).
       The button always fits because it's sized by its container, not
       independently.
     + Trangvang values copied verbatim from their css_categories1.css
       line 104: width 93%, height 34px, margin-top 3px, etc.

   v2.8 CHANGES (2026-05-16) — Mobile search bar: shorter + wider:
     + Per side-by-side feedback after v2.7 deploy: search bar should
       be a touch shorter and a touch wider for better balance.
     + HEIGHT: 34 -> 32px. Sits 2px lower in the header, more compact,
       closer to trangvang's mobile density.
     + WIDTH: search-wrap reserve trimmed 50px -> 46px on the right
       side. The button reclaims those 4 pixels, growing by ~4px at
       every viewport. Hamburger still has 4px buffer between its
       42px effective footprint (38px + 4px margin) and the reserved
       46px column.

   v2.7 CHANGES (2026-05-16) — Mobile hamburger no-wrap (final):
     + BUG: at 406px viewport, the hamburger button still wrapped below
       the search box even though v2.6's hybrid calc math said the
       hamburger column (38px) plus search wrap (calc(89% - 38px))
       plus logo (11%) should sum to exactly 100%.
     + ROOT CAUSE: fractional-pixel rounding + missing explicit float
       direction on the hamburger column. With three sibling floats:
         logo (float:left, 11%) + search-wrap (float:left, calc) +
         hamburger (no float)
       browsers can compute the sum as slightly over 100% on certain
       viewport widths, pushing the third element to a new row.
     + FIX 1: hamburger column gets float: right. It explicitly pulls
       itself to the right edge, never sitting in the float-left chain
       that can overflow.
     + FIX 2: search-wrap reservation bumped 38px -> 50px (calc(89% -
       50px)). The extra 12px absorbs fractional-pixel rounding plus
       the hamburger's 4px margin-right.

   v2.6 CHANGES (2026-05-16) — Full mobile density match with trangvang:
     + Side-by-side comparison with trangvangvietnam.com on a 374px
       viewport revealed our header was visibly less compact and less
       balanced. Audit of trangvang's actual rendering identified five
       differences, now all fixed:
         a) Hamburger button: 39x39 -> 34x34 (trangvang's actual size).
            Radius 8 -> 4. Icon font 19 -> 15px to fit the smaller frame.
            Right gutter 12 -> 6px for tighter density.
         b) Mobile grid math reverted to trangvang's exact 11/80/9 (we
            had bumped to 11/75/14 in v2.5 to accommodate the oversized
            39x39 hamburger — now redundant with smaller button).
         c) Mobile search button height: 38 -> 34px (matches trangvang's
            .timkiem_buttom { height: 34px } at mobile breakpoint).
         d) Search wrapper margin-top: 3 -> 0 on mobile (trangvang's
            tight density has no extra top spacing).
         e) Inline style on the wrapper div (height/margin-top) moved
            into the .yp-header-search-wrap class so the mobile media
            query can override cleanly.

   v2.5 CHANGES (2026-05-16) — Mobile hamburger no-wrap fix:
     + BUG: on small mobile viewports (~450px), the hamburger button
       wrapped to a second row even though the v2.4 grid math (11+80+9
       = 100%) added up correctly. Root cause: the 9% reserved for the
       hamburger column (~41px at 453px width) was too narrow for our
       39x39 hamburger button + 12px right gutter (= 51px needed).
       Trangvang's 9% reference assumes their smaller 30x30 hamburger.
     + FIX 1: mobile search-wrap 80% -> 75%. Frees the hamburger column
       to 14% (~63px at 453px), comfortably fitting the button+gutter.
       New mobile grid: 11 + 75 + 14 = 100%.
     + FIX 2: added box-sizing: border-box to .buttom_open_search so
       its inline padding (ps-2 pe-1) counts inside the 90%/93% width,
       preventing edge-case overflow that could trigger wrap.

   v2.4 CHANGES (2026-05-16) — Header grid: explicit search-wrap column:
     + ROOT CAUSE FOUND for the v2.3 broken layout (PC: search box too
       short; mobile: hamburger wrapping to a new line):
       The search button's parent <div> in categories_new.asp had no
       explicit width — only inline float:left + margin-top — so when
       we set .buttom_open_search { width: 90% }, that 90% resolved
       against a zero-width parent and the button collapsed to its
       content width. Trangvangvietnam's pattern works because it
       explicitly sets #head_section2 { width: 31% } on the wrapper,
       which we were missing.
     + FIX (markup): added class="yp-header-search-wrap" to the wrapper
       div in categories_new.asp v1.7.2. The inline style retains
       height+margin-top; the class supplies the responsive width.
     + FIX (CSS): added .yp-header-search-wrap { width: 31% ... } across
       all four breakpoints, mirroring trangvang's #head_section2 widths
       exactly:
         PC default :  31%
         <=1399px   :  36%
         <=1199px   :  34%
         <=991px    :  80%   (mobile: search dominates the bar)
     + Combined column widths now add up correctly:
         PC default : 16 + 31 + 53 = 100%
         <=1399px   : 18 + 36 + 46 = 100%
         <=1199px   : 20 + 34 + 46 = 100%
         <=991px    : 11 + 80 +  9 = 100%
       — no overflow, no wrapping, no awkward gaps.

   v2.3 CHANGES (2026-05-16) — Adopt trangvangvietnam responsive grid:
     + REFERENCE: trangvangvietnam.com mycss/css_categories1.css lines
       29-63 + 69+104. Sister site uses a 3-column grid (logo/search/nav)
       that re-flows at every breakpoint, with search button width as %
       of its parent column. Pattern proven across thousands of viewports.
     + APPROACH C (hybrid): adopted the math + breakpoints without
       changing markup. Existing class names .top_header_logo_pc /
       .top_menu_right / .buttom_open_search are re-styled into the grid:
         PC (>=1400) : 16% / implicit / 53%   button 90%
         <=1399px    : 18% / implicit / 46%   button 90%
         <=1199px    : 20% / implicit / 46%   button 90%
         <=991px     : 11% / implicit /  9%   button 93% (mobile)
     + Search button switched from max-width:325px (v2.0) and calc()
       (v2.2) to pure percentage. Now matches trangvang's .timkiem_buttom
       exactly: 90% PC, 93% mobile. Auto-scales with viewport at every
       size from 320px (iPhone SE) to 2560px (4K desktop).
     + 1199px breakpoint explicitly re-asserts width:90% because
       production css_page2.css line 62 forces width:308px there and
       would otherwise leak through.

   v2.2 CHANGES (2026-05-16) — Responsive search button (sister-site pattern):
     + PROBLEM: search button locked to max-width: 325px (set in v2.0) on
       ALL breakpoints. On large mobile (~408px wide) the button left an
       awkward right gap; on small mobile (~320px wide) the 325px width
       overflowed and the hamburger wrapped to a new line.
     + REFERENCE: sister site trangvangvietnam.com uses
         .timkiem_buttom { width: 93% }
       on mobile, scaling fluidly with viewport.
     + FIX: keep the 325px cap on PC (>=992px) since wide desktops would
       stretch the pill awkwardly without a cap. On mobile (<=991px) use
         width: calc(100% - 105px)
       which reserves exact space for logo (~50px), hamburger (~39px),
       and gutters (~16px). Result: pill auto-scales, never breaks the
       layout at any viewport width, single source of truth via the
       reserved-space variable in calc().

   v2.1 CHANGES (2026-05-16) — Mobile hamburger button polish:
     + FIX 1: hamburger button right-edge spacing. Was sitting flush
       against the viewport edge; added margin-right: 12px to the
       parent .top_menu_right_m so the button gutters match the logo's
       left gutter (production margin-right: 0 was making the button
       touch the screen edge).
     + FIX 2: hamburger icon (fa-bars) optical centering. Font-size
       bumped 17 -> 19px so the three bars stretch wider inside the
       39x39 button. At 17px the glyph read compressed sideways while
       the top/bottom padding looked roomy; 19px balances all four
       sides of the icon evenly within the border.

   v2.0 CHANGES (2026-05-16) — Two hotfixes after v1.9 deploy feedback:
     + FIX 1: SEARCH BOX width 220px -> 325px. The 220px cap was too
       aggressive — long category names truncated too early and the
       resulting short pill looked under-weighted next to the right-side
       nav cluster. 325px gives the search trigger enough visual mass
       to balance the nav while still leaving room for the 5 items.
     + FIX 2: MOBILE container leak on PC. .top_menu_right_m { display:
       inline-flex } in v1.9 was unscoped, overriding production
       css_page2.css line 15 (.top_menu_right_m { display: none }) and
       causing the mobile hamburger button to render on PC view alongside
       the desktop nav. Wrapped the override inside @media screen and
       (max-width: 991px) so it ONLY applies at the mobile breakpoint.

   v1.9 CHANGES (2026-05-14) — Header polish round 3:
     + SEARCH BOX width: 240px -> 220px. Leaves more breathing room for
       the right-side nav cluster.
     + NAV vertical alignment: all three header elements (search button,
       nav links, CTA button) now share the same 38px height with
       explicit line-height parity. Eliminates the misalignment where
       the search button sat slightly lower than the nav text.
     + BROWSE CATEGORIES A-Z emphasis: first nav link (the discovery hub)
       now renders at font-weight 500 instead of 400. The other three info
       links stay 400, establishing a subtle hierarchy: discovery (500) >
       info (400) > action (CTA pill).
     + MOBILE button balance: hamburger toggle now sized 39x39 with
       border-radius 8 and a slightly stronger background tint, mirroring
       the production .buttom_open_search search button next to it.
       Parent .top_menu_right_m centred vertically.

   v1.8 CHANGES (2026-05-14) — Top nav refinement round 2:
     + Companion to top_header_menu_new.asp v2.2. Four refinements:
         a) CTA color: orange -> brand yellow (#ffde07) on green header.
            Header has no other yellow competing surfaces (unlike body),
            so yellow CTA = Yellow Pages brand signature. Body CTAs
            (signup module, gotop) STAY orange.
         b) Nav text: 14px/500 -> 13px/400. Lighter weight, smaller size
            reduces secondary navigation visual weight so the CTA can
            dominate the right side as the primary action.
         c) Mobile: full-overlay slide-in panel -> simple dropdown on
            white. The overlay variant felt buggy (grey-on-grey, slide
            jank). Dropdown is predictable, clean, fast.
         d) Active page indicator: .is-active class -> yellow underline
            (PC) and left-border + bg shift (mobile). Set server-side
            in top_header_menu_new.asp via Request.ServerVariables.
     + Search-box max-width: 240px + ellipsis. Long category names
       (e.g. "Garment - Accessories and Materials") now truncate
       instead of bloating the header.

   v1.7 CHANGES (2026-05-13) — Top nav refined (Option C):
     + §4 fully rebuilt for top_header_menu_new.asp v2.1.
     + Class prefix yp-topnav-* -> yp-topnav-new-* so the v2.0 styles can
       coexist briefly during migration (legacy top_header_menu.asp still
       references v2.0 names; new file uses v2.1 names).
     + COLOR (Option C): white default + yellow underline on hover/active.
       Was solid yellow underline only on hover; now uses 2px bottom border
       (transparent default) that animates color, giving a more refined
       interaction feel.
     + MOBILE rebuilt as FULL-OVERLAY slide-in panel (was: small dropdown):
       - 320px panel slides from right with backdrop dim
       - Large tap targets (≥48px) for B2B mobile users
       - CTA orange dominates centre
       - Hotline strip at bottom (trust signal + quick contact)
       - Backdrop tap / Escape key close
     + LABEL UPDATE on PC nav (was v2.0 too short):
       - "Browse A-Z"           -> "Browse Categories A-Z"
       - "About"                -> "About Us"
       - "Advertise"            -> "Advertise with Us"
       - "Contact"              -> "Contact Us"
       - "List My Business"     -> "List Your Business — Free"
     + Specificity boosted with html body prefix on every selector — beats
       legacy a:link { color:#111 !important } from css_page2.css line 5.

   v1.6 CHANGES (2026-05-13) — Unified top navigation (initial):
     + NEW §4: .yp-topnav system — used by include_file/top_header_menu.asp
       v2.0 on every inner page. Five-item nav (4 text links + 1 orange
       CTA button) chuẩn hóa với homepage. Two themes:
         - Default (dark) — sits on green header container
         - .yp-topnav--light — for the homepage white header
     + Mobile dropdown rebranded as .yp-topnav-mobile-* — same five items,
       block-style panel, orange CTA at the bottom.
     + Hover states use brand colors (yellow on dark, green on light) and
       subtle transitions; CTA arrow nudges right on hover for affordance.
     + Focus-visible outlines (yellow) for keyboard accessibility.

   v1.5 CHANGES (2026-05-13) — Anchor color enforcement (root cause found):
     + ROOT CAUSE LOCATED: on categories.asp (NOT homepage), css_page2.css
       loads BEFORE css_yp1_new.css, and css_page2.css line 5 declares
         a:link { color:#111 !important }
       with specificity 0,0,1,1. This beats our bare class selectors at
       0,0,1,0 — turning all footer link text BLACK on the dark-green
       footer background:
         - A-Z pill letter glyphs vanished (border showed but no text)
         - Hotline / Email / Network links unreadable in dark muted form
       The bug only manifested on pages loading css_page2.css. Homepage
       (index.asp) does NOT load it — which is why the same footer worked
       perfectly there but broke on categories.
     + FIX: boost specificity to 0,0,3,2 by qualifying every selector with
       "html body" prefix + tag name. Three new selector groups:
         a) html body a.text-color-999 { color:#999 } — muted footer text
         b) html body .emeral_bg a { color:#999 } — defensive fallback
         c) html body a.find-index-footer { color:yellow } — A-Z pills
       All variants (:link, :visited, :hover, :active, :focus) covered.
     + No new tokens; no new markup. Pure CSS specificity correction.

   v1.4 CHANGES (2026-05-13) — Global a:hover border-bottom kill:
     + ROOT FIX: kill legacy a:hover { border-bottom:1px solid #ff6600 }
       globally for every anchor with an href, not just footer. Selector
         a:hover[href], a:active[href], a:focus[href]
       has specificity 0,0,2,1 (attribute selector boost) which beats the
       legacy a:hover at 0,0,1,1. Both !important, higher specificity wins.
     + EFFECT: orange-line-under-hover bug disappears site-wide. Not only
       fixes footer hotline/email visual; also cleans up tens of other
       anchors on listing/category pages where this legacy rule has been
       leaking for years (company names, website links, address text).
     + The earlier v1.2/v1.3 .footer-anchor + .emeral_bg overrides remain
       as belt-and-braces — they aren't necessary now that the root rule
       is killed globally, but harmless to keep.

   v1.3 CHANGES (2026-05-13) — Nuclear specificity boost:
     + Legacy a:hover { border-bottom:1px solid #ff6600 !important } from
       css_page1.css line 6 (ALSO present in css_page2.css line 6) was
       still winning in some scenarios despite v1.2's class-qualified
       selectors. Selectors now prefixed with "html body" and qualified
       with the tag name ("a.footer-anchor", not bare ".footer-anchor"),
       raising specificity from 0,0,2,0 to 0,0,3,2 vs the legacy's
       0,0,1,1 — guaranteed cascade win regardless of source order.
     + Explicitly nullified all 4 border-bottom longhand properties
       (border-bottom, -width, -style, -color) — defense against any
       legacy shorthand that may have left longhand artifacts.
     + All declarations now use !important to match legacy aggressiveness.

   v1.2 CHANGES (2026-05-09) — Hotfix safety net:
     + EXPANDED border-bottom override to also cover bare <a> tags inside
       .emeral_bg footer container (the dark green section) and any
       .text-color-999 anchor anywhere. This is a defensive measure for
       links that may have missed the .footer-anchor class. Companion
       markup fix in footer_new.asp v1.4 adds the class explicitly to
       the 6 known offenders (4 network links + hotline + email).

   v1.1 CHANGES (2026-05-09) — Footer polish + legacy hover override:
     + FIXED .find-index-footer: was missing the border-pill style that
       legacy .find_index_footer (snake-case, css_page2.css:346) had. The
       v1.0 stub only set display:inline-block + tiny padding, so on the
       categories page the A-Z letters rendered as plain text with wide
       natural spacing. Now restored as a proper brand-aligned amber pill
       (border 1px solid var(--yp-yellow), border-radius pill).
     + FIXED .footer-anchor hover: explicit border-bottom:none !important
       to override legacy css_page2.css:6 ( a:hover { border-bottom:1px
       solid #ff6600 !important } ) which leaked into footer links and
       drew an orange line beneath hotline / email when hovered. Replaced
       with a subtle dotted yellow underline for affordance.
     + STANDARDISED .yellow-text-color: was Bootstrap warning #FFC107,
       changed to brand --yp-yellow (#ffde07) so A-Z header and links
       align with the rest of the brand identity (logo, badges, top stripe).
     + Companion file: footer_new.asp markup unchanged in v1.4 (this fix
       is CSS-only and applies globally to every page that includes the
       footer).

   ARCHITECTURE (Hybrid CSS strategy):
     /mycss/css_yp1.css         - LEGACY (untouched, do not modify)
     /mycss/css_yp1_new.css     - THIS FILE: global tokens + footer + shared
     /mycss/css_home_new.css    - Home page only (hero + categories + how-it-works)
     /mycss/css_categories_new.css - Future: categories.asp page-specific
     /mycss/css_aboutus_new.css    - Future: aboutus.asp page-specific

   LOAD ORDER (critical for cascade):
     1. bootstrap.min.css       (vendor base)
     2. fontawesome all.min.css (vendor icons)
     3. css_yp1.css             (legacy, must come BEFORE _new files)
     4. css_yp1_new.css         (THIS FILE: overrides legacy + Bootstrap)
     5. css_<page>_new.css      (page-specific, overrides this file)
     6. autocomplete_home.css   (component-specific, last)

   DESIGN TOKENS PHILOSOPHY:
     CSS Custom Properties define brand identity in ONE place. When Phase 2
     verification launches, when rebrand happens, when seasonal theme runs —
     change tokens here, every page updates automatically.

     Each token includes a hardcoded fallback for IE11 graceful degradation:
       background: #ffde07;                      (fallback)
       background: var(--yp-yellow, #ffde07);

   !IMPORTANT POLICY:
     !important flags are PRESERVED from inline styles to maintain cascade
     priority over legacy css_yp1.css and Bootstrap utilities. After all
     pages migrate and css_yp1.css is retired, a "Phase Cleanup" pass will
     remove !important and use natural specificity.

   SECTIONS:
     §0  Design Tokens (CSS Variables)
     §1  Footer — Enterprise CTA (3-column Image2 pattern)
     §2  Footer — Our Network (slim sister-sites block)
     §3  Footer — Utility classes (text colors, anchors, find-index)
     §4  Top Nav — Unified main navigation (v1.6+, refined v1.7)

   Updated: 2026-05-09
   Author : Tran Tuan Anh, VBIT JSC
   ========================================================================== */


/* ==========================================================================
   §0 — DESIGN TOKENS (CSS Custom Properties)
   --------------------------------------------------------------------------
   Single source of truth for brand identity. Change once, propagate everywhere.
   ========================================================================== */

:root {
    /* ---------- Brand Colors ---------- */
    --yp-green:           #00512b;   /* Primary brand green */
    --yp-green-light:     #006135;   /* Hero gradient top */
    --yp-green-dark:      #003d20;   /* Hero gradient bottom */
    --yp-yellow:          #ffde07;   /* Logo yellow / accent */
    --yp-yellow-hover:    #ffeb3b;   /* Button hover state */
    --yp-orange-cta:      #ff6a00;   /* Enterprise CTA button */
    --yp-orange-cta-hover:#e85f00;   /* CTA button hover */

    /* ---------- Text Colors ---------- */
    --yp-text-dark:       #1a1a1a;   /* Headings, primary text */
    --yp-text-body:       #4b5563;   /* Body copy */
    --yp-text-muted:      #6b7280;   /* Subtitles, captions */
    --yp-text-meta:       #9ca3af;   /* Meta info, timestamps */
    --yp-text-disabled:   #999999;   /* Disabled / footer secondary */
    --yp-text-white:      #ffffff;

    /* ---------- Borders & Surfaces ---------- */
    --yp-border-light:    #e5e7eb;   /* Card borders */
    --yp-border-pale:     #eaecef;   /* Section dividers */
    --yp-bg-pale:         #fafbfc;   /* Section alternating bg */
    --yp-bg-white:        #ffffff;

    /* ---------- Shadows ---------- */
    --yp-shadow-card:     0 1px 3px rgba(0,0,0,0.04);
    --yp-shadow-hover:    0 12px 28px rgba(0,0,0,0.08);
    --yp-shadow-form:     0 8px 24px rgba(0,0,0,0.18), 0 2px 6px rgba(0,0,0,0.10);
    --yp-shadow-form-hv:  0 12px 32px rgba(0,0,0,0.22), 0 4px 8px rgba(0,0,0,0.12);
    --yp-shadow-focus:    0 0 0 3px rgba(255,222,7,0.35), 0 8px 24px rgba(0,0,0,0.18);
    --yp-shadow-image:    0 3px 10px rgba(0,0,0,0.08);
    --yp-shadow-image-hv: 0 8px 18px rgba(0,0,0,0.12);
    --yp-shadow-badge:    0 4px 14px rgba(0,0,0,0.20), 0 2px 4px rgba(0,0,0,0.12);
    --yp-shadow-yellow:   0 4px 10px rgba(255,222,7,0.40);

    /* ---------- Border Radii ---------- */
    --yp-radius-sm:       3px;       /* Badges */
    --yp-radius-md:       6px;       /* Buttons */
    --yp-radius-lg:       8px;       /* Pills, labels */
    --yp-radius-xl:       12px;      /* Cards */
    --yp-radius-pill:     22px;      /* Chip pills */
    --yp-radius-circle:   50%;       /* Avatars, badges */

    /* ---------- Typography ---------- */
    --yp-font-display:    Verdana, Geneva, sans-serif;
    --yp-font-body:       Arial, Helvetica, sans-serif;

    /* ---------- Transitions ---------- */
    --yp-transition-fast: 0.15s ease;
    --yp-transition-base: 0.2s ease;
    --yp-transition-slow: 0.25s ease;
}


/* ==========================================================================
   §1 — FOOTER: ENTERPRISE CTA
   --------------------------------------------------------------------------
   3-column Image2 pattern: [Title | Body+Meta | Button]
   Used in footer_new.asp Section 1
   Source: footer_new.asp v1.2.3 inline style (extracted)
   ========================================================================== */

.enterprise-cta-row {
    display: flex;
    align-items: center;
    gap: 32px;
    flex-wrap: wrap;
    padding: 18px 28px;
}

.enterprise-cta-title-col {
    flex: 0 0 auto;
    font-size: 1.25rem;
    font-weight: 700;
    color: #1a1a1a;
    color: var(--yp-text-dark, #1a1a1a);
    white-space: nowrap;
}

.enterprise-cta-body-col {
    flex: 1 1 auto;
    min-width: 0;
    line-height: 1.5;
}

.enterprise-cta-body-col .body-line {
    font-size: 0.95rem;
    color: #4b5563;
    color: var(--yp-text-body, #4b5563);
    margin: 0;
}

.enterprise-cta-body-col .meta-line {
    font-size: 0.82rem;
    color: #9ca3af;
    color: var(--yp-text-meta, #9ca3af);
    margin: 2px 0 0 0;
}

.enterprise-cta-button {
    display: inline-block;
    padding: 10px 22px;
    background: #ff6a00;
    background: var(--yp-orange-cta, #ff6a00);
    color: #ffffff !important;
    text-decoration: none;
    border-radius: 6px;
    border-radius: var(--yp-radius-md, 6px);
    font-weight: 600;
    font-size: 0.95rem;
    letter-spacing: 0.2px;
    white-space: nowrap;
    flex: 0 0 auto;
    transition: background 0.2s ease, transform 0.15s ease;
}

.enterprise-cta-button:hover {
    background: #e85f00;
    background: var(--yp-orange-cta-hover, #e85f00);
    transform: translateY(-1px);
}

.enterprise-cta-button .arrow {
    margin-left: 6px;
    transition: margin-left 0.2s ease;
}

.enterprise-cta-button:hover .arrow {
    margin-left: 10px;
}

@media screen and (max-width: 991px) {
    .enterprise-cta-row {
        gap: 16px;
        padding: 16px 20px;
    }
    .enterprise-cta-title-col {
        font-size: 1.15rem;
        white-space: normal;
    }
}

@media screen and (max-width: 767px) {
    .enterprise-cta-row {
        flex-direction: column;
        text-align: center;
        gap: 12px;
    }
}


/* ==========================================================================
   §2 — FOOTER: OUR NETWORK (slim sister-sites block)
   --------------------------------------------------------------------------
   Text-only sister sites listing. Replaces removed "Products of VN Yellow
   Pages" section. NO self-reference, NO yearbooks (per integrity decisions).
   Source: footer_new.asp v1.2.3 inline style (extracted)
   ========================================================================== */

.our-network-block {
    padding-top: 8px;
    padding-bottom: 8px;
}

.our-network-label {
    font-size: 0.78rem;
    color: #999999;
    color: var(--yp-text-disabled, #999999);
    text-align: center;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    margin-bottom: 8px;
}

.our-network-links {
    text-align: center;
}

.our-network-links a {
    color: #999999 !important;
    color: var(--yp-text-disabled, #999999) !important;
    text-decoration: none;
    font-size: 0.85rem;
    margin: 0 8px;
    display: inline-block;
    padding: 2px 4px;
    transition: color 0.2s ease;
}

.our-network-links a:hover {
    color: #FFC107 !important;
}

.our-network-sep {
    color: #555555;
    padding: 0 4px;
}


/* ==========================================================================
   §3 — FOOTER: UTILITY CLASSES
   --------------------------------------------------------------------------
   Reusable text colors and anchor styles used throughout footer.
   Source: footer_new.asp v1.2.3 inline style (extracted)
   ========================================================================== */

/* v1.4 GLOBAL KILL: the legacy a:hover { border-bottom:1px solid #ff6600
   !important } from css_page1.css line 6 + css_page2.css line 6 applies
   to EVERY anchor on EVERY page that loads those legacy files (not just
   footer). It's a relic from the original 2010-era design — modern UX
   doesn't paint orange lines under every hover. We kill it globally for
   any anchor with an href, raising specificity to 0,0,2,1 via the
   attribute selector. Specificity beats the legacy 0,0,1,1; with both
   carrying !important, the higher specificity wins. */
a:hover[href],
a:active[href],
a:focus[href] {
    border-bottom: 0 none transparent !important;
    border-bottom-width: 0 !important;
    border-bottom-style: none !important;
    border-bottom-color: transparent !important;
}

.text-color-999 {
    color: #999999 !important;
    color: var(--yp-text-disabled, #999999) !important;
}

.yellow-text-color {
    /* v1.1: was #FFC107 (Bootstrap warning) — switched to brand yellow
       so A-Z header and links match the logo, badges and top stripe. */
    color: #ffde07 !important;
    color: var(--yp-yellow, #ffde07) !important;
}

/* v1.5: anchor color enforcement for muted footer text.
   On categories.asp, css_page2.css:5 sets a:link { color:#111 !important }
   with specificity 0,0,1,1 — beating the bare .text-color-999 (0,0,1,0).
   Result: hotline / email / network links rendered black on dark green
   background (unreadable). Boost specificity to 0,0,3,2 via "html body"
   prefix + tag qualifier so the muted #999 actually applies. */
html body a.text-color-999,
html body a.text-color-999:link,
html body a.text-color-999:visited,
html body a.text-color-999:active,
html body a.text-color-999:focus {
    color: #999999 !important;
    color: var(--yp-text-disabled, #999999) !important;
}

html body a.text-color-999:hover {
    color: #ffde07 !important;
    color: var(--yp-yellow, #ffde07) !important;
}

/* v1.5: bare anchors inside the green footer container (.emeral_bg) —
   sister-site Our Network links + any anchor that may have missed both
   .footer-anchor and .text-color-999 classes. Default to muted #999,
   hover to brand yellow. */
html body .emeral_bg a:link,
html body .emeral_bg a:visited,
html body .emeral_bg a:active,
html body .emeral_bg a:focus {
    color: #999999 !important;
    color: var(--yp-text-disabled, #999999) !important;
}

html body .emeral_bg a:hover {
    color: #ffde07 !important;
    color: var(--yp-yellow, #ffde07) !important;
}

/* v1.5: A-Z pills are <a> inside .emeral_bg too — they need yellow text,
   NOT the muted #999 from the rule above. Higher specificity to win. */
html body .emeral_bg a.find-index-footer:link,
html body .emeral_bg a.find-index-footer:visited,
html body .emeral_bg a.find-index-footer:active,
html body .emeral_bg a.find-index-footer:focus {
    color: #ffde07 !important;
    color: var(--yp-yellow, #ffde07) !important;
}

html body .emeral_bg a.find-index-footer:hover {
    color: #00512b !important;
    color: var(--yp-green, #00512b) !important;
}

/* v1.1: footer anchors must NOT inherit the legacy
   a:hover { border-bottom:1px solid #ff6600 !important } rule from
   css_page2.css line 6. We force border-bottom:none on every state and
   provide a subtle dotted underline on hover so the link affordance is
   preserved without an aggressive orange line.

   v1.2 SAFETY NET: also cover .text-color-999 (always used on muted
   footer text) and any <a> inside .emeral_bg (the dark green footer
   container) — both as defense in depth for links that may have missed
   the .footer-anchor class. Markup is also being patched in
   footer_new.asp v1.4 to add the class explicitly.

   v1.3 NUCLEAR SPECIFICITY: legacy a:hover rule was still winning in
   some browsers despite v1.2 — possibly due to source-order, browser
   cache, or unforeseen rule. Selectors now qualified with html prefix
   AND tag (a.footer-anchor) so specificity rises to 0,0,3,2 vs
   legacy's 0,0,1,1 — guaranteed override. */
html body a.footer-anchor,
html body a.footer-anchor:link,
html body a.footer-anchor:visited,
html body a.footer-anchor:hover,
html body a.footer-anchor:active,
html body a.footer-anchor:focus,
html body a.text-color-999,
html body a.text-color-999:link,
html body a.text-color-999:visited,
html body a.text-color-999:hover,
html body a.text-color-999:active,
html body a.text-color-999:focus,
html body .emeral_bg a,
html body .emeral_bg a:link,
html body .emeral_bg a:visited,
html body .emeral_bg a:hover,
html body .emeral_bg a:active,
html body .emeral_bg a:focus {
    text-decoration: none !important;
    border-bottom: 0 none transparent !important;
    border-bottom-width: 0 !important;
    border-bottom-style: none !important;
    border-bottom-color: transparent !important;
}

html body a.footer-anchor:hover,
html body a.text-color-999:hover,
html body .emeral_bg a:hover {
    text-decoration: underline dotted !important;
    text-decoration-color: rgba(255, 222, 7, 0.55) !important;
    text-underline-offset: 3px !important;
}

/* v1.2: A-Z pills (.find-index-footer) have their own bespoke hover
   (fill yellow + green text) and must NOT inherit the dotted-underline
   hover from the .emeral_bg a:hover safety net rule above. */
html body .emeral_bg a.find-index-footer:hover {
    text-decoration: none !important;
}

/* v1.1: A-Z letter pills in footer. Restored the border-pill design that
   legacy .find_index_footer (snake-case, css_page2.css:346) had — the v1.0
   stub only set display+padding, so on the categories page the letters
   rendered plain. Now a proper amber-bordered pill, brand-aligned.

   v1.5 SPECIFICITY FIX: on categories.asp, css_page2.css loads BEFORE
   css_yp1_new.css, and it sets a:link { color:#111 !important } with
   specificity 0,0,1,1 — which beats the bare .find-index-footer
   (specificity 0,0,1,0). Result: the A-Z letter glyphs went black on
   the dark green footer background, becoming invisible (the border-pill
   still showed, so the letters looked "missing"). Fix: qualify selectors
   with "html body a.find-index-footer:link/:visited/:hover/:active/:focus"
   raising specificity to 0,0,3,2 — guaranteed override. */
html body a.find-index-footer,
html body a.find-index-footer:link,
html body a.find-index-footer:visited,
html body a.find-index-footer:active,
html body a.find-index-footer:focus {
    display: inline-block;
    padding: 1px 8px;
    margin: 2px 3px;
    text-transform: uppercase;
    text-decoration: none !important;
    border: 1px solid #ffde07;
    border: 1px solid var(--yp-yellow, #ffde07);
    border-radius: 8px;
    border-radius: var(--yp-radius-lg, 8px);
    color: #ffde07 !important;
    color: var(--yp-yellow, #ffde07) !important;
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1.6;
    transition: background 0.18s ease, color 0.18s ease,
                transform 0.15s ease, border-color 0.18s ease;
}

html body a.find-index-footer:hover {
    background: #ffde07 !important;
    background: var(--yp-yellow, #ffde07) !important;
    color: #00512b !important;
    color: var(--yp-green, #00512b) !important;
    border-color: #ffde07 !important;
    border-color: var(--yp-yellow, #ffde07) !important;
    transform: translateY(-1px);
    text-decoration: none !important;
}

html body a.find-index-footer:focus-visible {
    outline: 2px solid #ffde07;
    outline: 2px solid var(--yp-yellow, #ffde07);
    outline-offset: 2px;
}


/* ==========================================================================
   §4 — TOP NAV (v1.8) — Refined: yellow CTA, lighter nav, simple dropdown
   --------------------------------------------------------------------------
   Used by include_file/top_header_menu_new.asp v2.2 on every refactored
   inner page. v1.8 refinements (user feedback round 2):
     - Nav text: 13px / 400 weight (was 14px / 500) — reduce visual weight
     - CTA: yellow #ffde07 on green = brand signature (was orange gradient)
     - Mobile: simple dropdown on white (was full-overlay slide-in)
     - Active page: server-side .is-active class -> yellow underline
   ========================================================================== */

/* ==========================================================================
   §4.0 — HEADER LAYOUT GRID (v2.3) — trangvangvietnam.com pattern
   --------------------------------------------------------------------------
   Reference: trangvangvietnam.com mycss/css_categories1.css lines 29-63.
   That site's header uses a 3-column grid that re-flows responsively at
   every breakpoint, with search button width as % of its parent column.
   We adopt the same math here, applied to our existing class names so no
   markup changes are needed.

   Grid columns (mapped from trangvang to our class names):
     +------------------+---------------------+--------------------+
     | trangvang        | yellowpages_new     | Role               |
     +------------------+---------------------+--------------------+
     | #head_section1   | .top_header_logo_pc | Logo column        |
     | #head_section2   | (implicit middle)   | Search column      |
     | #head_section3   | .top_menu_right     | Nav column         |
     +------------------+---------------------+--------------------+

   Width ratios (per trangvang):
     PC default :  16%  /  31%  /  53%
     <=1399px   :  18%  /  36%  /  46%
     <=1199px   :  20%  /  34%  /  46%
     <=991px    :  11%  /  80%  /   9%   (mobile: logo + big search + hamburger)

   The middle search column is implicit — what's between logo and nav.
   The search button (.buttom_open_search) sits inside and fills 90-93%
   of that column, matching .timkiem_buttom in the reference CSS.
   ========================================================================== */

/* ---------- PC default (>= 1400px) ---------------------------------------
   Three explicit column widths (logo + search-wrap + nav) — mirroring
   trangvangvietnam's #head_section1/2/3 grid exactly. The previous v2.3
   left the search column implicit (just "what's between logo and nav"),
   but our markup wrapper around the button had no explicit width so the
   90% rule resolved against a zero-width parent and the button shrank
   to its content. v2.4 fixes this by giving the wrapper its own column. */
.top_header_logo_pc {
    width: 16%;
    float: left;
}

/* The wrapper div around the search button — mirrors #head_section2.
   v2.6: height + margin-top moved here from inline style on the markup,
   so mobile breakpoint can override cleanly. */
.yp-header-search-wrap {
    width: 31%;
    height: 39px;
    margin-top: 3px;
    float: left;
}

.top_menu_right {
    width: 53%;
    float: right;
}

/* Search button fluid width — fills its parent wrapper column.
   90% of the 31% column leaves a small right gutter before the nav.
   v2.5: box-sizing: border-box so the button's inline padding (ps-2 pe-1)
   counts INSIDE the 90% width, preventing overflow that could push
   sibling elements (hamburger on mobile) onto a new row. */
.div_box_search_page .buttom_open_search {
    width: 90%;
    max-width: none;
    height: 38px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-flex !important;
    align-items: center;
    box-sizing: border-box;
}

/* ---------- Tablet large (<= 1399px) ------------------------------------- */
@media screen and (max-width: 1399px) {
    .top_header_logo_pc    { width: 18%; }
    .yp-header-search-wrap { width: 36%; }
    .top_menu_right        { width: 46%; }
}

/* ---------- Tablet (<= 1199px) ------------------------------------------- */
@media screen and (max-width: 1199px) {
    .top_header_logo_pc    { width: 20%; }
    .yp-header-search-wrap { width: 34%; }
    .top_menu_right        { width: 46%; }
    /* Production css_page2.css line 62 forces width:308px at this
       breakpoint, which would override our 90% fluid rule. Re-assert
       the percentage so the column behavior stays consistent. */
    .div_box_search_page .buttom_open_search { width: 90%; }
}

/* ---------- Mobile (<= 991px) --------------------------------------------
   v2.9: pure trangvangvietnam exact copy. Three percentage columns
   (11/80/9) with button filling 93% of search column and hamburger
   filling 100% of nav column. No calc, no fixed pixels, no buffer
   math. Browsers handle the rounding. Pattern proven on trangvang
   production since 2024. */
@media screen and (max-width: 991px) {
    .top_header_logo_m {
        width: 11%;
    }
    .yp-header-search-wrap {
        width: 80%;
        /* v3.0: shrink wrap height 39 -> 34 so it matches the button
           height (also 34). Previously the 39 wrap gave extra vertical
           padding around the 34 button, making the bar feel taller than
           trangvang's compact mobile header. */
        height: 34px;
        margin-top: 0;
    }
    .div_box_search_page .buttom_open_search {
        /* trangvang css_categories1.css line 104 exact values: */
        width: 93%;
        height: 34px;
        /* v3.1: restored margin-top: 3px to match logo's padding-top:3px
           (production .top_header_logo_m). Without it, the search button
           sat ~3px higher than the logo, breaking vertical alignment.
           v3.0 had removed this thinking it was redundant — it's actually
           the vertical-centering offset against the logo column. */
        margin-top: 3px;
    }
    .top_menu_right_m {
        width: 9%;
        /* v3.0: column height 39 -> 34 to match search wrap, eliminating
           the height mismatch that pushed the search down 5px relative
           to the hamburger. Compact density matches trangvang. */
        height: 34px;
        float: right;
        display: flex;
        align-items: center;
        justify-content: flex-end;
    }
}

.yp-topnav-new-mobile-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* v3.0: shrink button frame so it stays neatly inside the 9% column
       on small viewports without max-width pressure. Stronger border for
       outline visibility (matches trangvang's outlined hamburger style)
       while keeping the green-on-white contrast appropriate for our
       darker header background. */
    width: 100%;
    max-width: 34px;
    height: 30px;
    background: transparent;
    border: 1.5px solid rgba(255, 255, 255, 0.75);
    border-radius: 4px;
    color: #ffffff;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    transition: background 0.18s ease, border-color 0.18s ease;
}

.yp-topnav-new-mobile-toggle:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: #ffffff;
}

/* ---------- PC nav container ---------------------------------------------
   v1.9: explicit 38px line-height parity so the whole header bar feels
   vertically balanced (search button, nav links, and CTA all 38px tall). */
.top_menu_right .yp-topnav-new {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 20px;
    height: 38px;
    padding: 0;
}

/* Text nav links — Option C refined.
   v1.9 height parity: 38px line-height matches search button + CTA.
   v1.9 first-child emphasis: "Browse Categories A-Z" rendered at weight 500
   to mark it as the discovery hub (visual lead-in to the nav set). */
html body a.yp-topnav-new-link,
html body a.yp-topnav-new-link:link,
html body a.yp-topnav-new-link:visited {
    color: #ffffff !important;
    color: var(--yp-text-white, #ffffff) !important;
    font-size: 13px;
    font-weight: 400;
    text-decoration: none !important;
    height: 38px;
    line-height: 38px;
    padding: 0 2px;
    opacity: 0.92;
    white-space: nowrap;
    border-bottom: 2px solid transparent !important;
    box-sizing: border-box;
    transition: opacity 0.18s ease, color 0.18s ease,
                border-bottom-color 0.18s ease;
}

/* v1.9: Browse Categories A-Z is the discovery hub — weight 500 to draw
   the eye into the nav set. The other 3 info links stay weight 400. */
html body a.yp-topnav-new-link:first-of-type {
    font-weight: 500;
}

html body a.yp-topnav-new-link:hover,
html body a.yp-topnav-new-link:focus,
html body a.yp-topnav-new-link.is-active {
    opacity: 1;
    color: #ffde07 !important;
    color: var(--yp-yellow, #ffde07) !important;
    text-decoration: none !important;
    border-bottom: 2px solid #ffde07 !important;
    border-bottom: 2px solid var(--yp-yellow, #ffde07) !important;
}

html body a.yp-topnav-new-link:focus-visible {
    outline: 2px solid #ffde07;
    outline: 2px solid var(--yp-yellow, #ffde07);
    outline-offset: 3px;
    border-radius: 2px;
}

/* ---------- Primary CTA — YELLOW on green (brand signature) ---------------
   v1.8: changed from orange to yellow. Body CTAs (signup module, gotop)
   stay orange — only header CTA uses yellow because there's only the logo
   sharing the yellow surface up here (no visual competition). */
html body a.yp-topnav-new-cta,
html body a.yp-topnav-new-cta:link,
html body a.yp-topnav-new-cta:visited {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #ffde07;
    background: var(--yp-yellow, #ffde07);
    color: #00512b !important;
    color: var(--yp-green, #00512b) !important;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none !important;
    height: 38px;
    padding: 0 16px;
    border-radius: 6px;
    border-radius: var(--yp-radius-md, 6px);
    letter-spacing: 0.1px;
    white-space: nowrap;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.20);
    border-bottom: 0 none transparent !important;
    box-sizing: border-box;
    transition: background 0.18s ease, transform 0.15s ease,
                box-shadow 0.18s ease;
}

html body a.yp-topnav-new-cta:hover,
html body a.yp-topnav-new-cta:focus {
    background: #ffeb3b;
    background: var(--yp-yellow-hover, #ffeb3b);
    color: #00512b !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.28);
    text-decoration: none !important;
}

html body a.yp-topnav-new-cta:active {
    transform: translateY(0);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
}

.yp-topnav-new-cta-arrow {
    transition: transform 0.18s ease;
    flex-shrink: 0;
}

html body a.yp-topnav-new-cta:hover .yp-topnav-new-cta-arrow {
    transform: translateX(2px);
}

html body a.yp-topnav-new-cta:focus-visible {
    outline: 3px solid #ffde07;
    outline: 3px solid var(--yp-yellow, #ffde07);
    outline-offset: 2px;
}

/* ==========================================================================
   §4.M — MOBILE NAV (< 992px) — Simple dropdown
   --------------------------------------------------------------------------
   v1.8: replaced full-overlay slide-in with a clean dropdown beneath
   the header. Sits on plain white, no backdrop, no animation jank.
   ========================================================================== */

/* Hamburger / close button.
   v1.9: balanced to match the mobile search button (production
   .buttom_open_search is 39px tall, rounded-3). We mirror that visual
   weight here so the two buttons sit symmetrically in the header.

   v2.0 HOTFIX (2026-05-16): wrap the .top_menu_right_m override inside
   @media (max-width: 991px) so it ONLY applies on mobile. The previous
   v1.9 rule was unscoped, overriding production css_page2.css line 15
   (.top_menu_right_m { display:none } default) and causing the hamburger
   button to render on PC view alongside the desktop nav. */
/* Hamburger / close button — see consolidated rules in the mobile
   media query above (§4.0 grid section, v2.6). The original v2.0 hotfix
   handled the unscoped-display bug; current rules are in the grid block. */

.yp-topnav-new-mobile-toggle:focus-visible {
    outline: 2px solid #ffde07;
    outline: 2px solid var(--yp-yellow, #ffde07);
    outline-offset: 2px;
}

/* Dropdown panel — hidden by default, plain block when .is-open */
.yp-topnav-new-mobile-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #ffffff;
    border-top: 1px solid #e5e7eb;
    border-top: 1px solid var(--yp-border-light, #e5e7eb);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.12);
    z-index: 1040;
}

.yp-topnav-new-mobile-dropdown.is-open {
    display: block;
}

/* Mobile nav links — large tap targets ≥44px */
html body a.yp-topnav-new-mobile-link,
html body a.yp-topnav-new-mobile-link:link,
html body a.yp-topnav-new-mobile-link:visited {
    display: block;
    padding: 14px 18px;
    color: #1a1a1a !important;
    color: var(--yp-text-dark, #1a1a1a) !important;
    font-size: 14px;
    font-weight: 400;
    text-decoration: none !important;
    border-bottom: 1px solid #f3f4f6 !important;
    transition: background 0.15s ease, color 0.15s ease;
}

html body a.yp-topnav-new-mobile-link:hover,
html body a.yp-topnav-new-mobile-link:focus {
    background: #f9fafb;
    color: #00512b !important;
    color: var(--yp-green, #00512b) !important;
}

/* Active page (server-side .is-active) */
html body a.yp-topnav-new-mobile-link.is-active {
    background: #fafbfc;
    background: var(--yp-bg-pale, #fafbfc);
    color: #00512b !important;
    color: var(--yp-green, #00512b) !important;
    font-weight: 500;
    border-left: 3px solid #ffde07;
    border-left: 3px solid var(--yp-yellow, #ffde07);
    padding-left: 15px;
}

/* CTA wrap in mobile dropdown */
.yp-topnav-new-mobile-cta-wrap {
    padding: 14px 18px 10px;
}

html body a.yp-topnav-new-mobile-cta,
html body a.yp-topnav-new-mobile-cta:link,
html body a.yp-topnav-new-mobile-cta:visited {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 11px 14px;
    background: #ffde07;
    background: var(--yp-yellow, #ffde07);
    color: #00512b !important;
    color: var(--yp-green, #00512b) !important;
    font-size: 13.5px;
    font-weight: 500;
    text-align: center;
    text-decoration: none !important;
    border-radius: 5px;
    border-radius: var(--yp-radius-md, 5px);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
    border-bottom: 0 none transparent !important;
    transition: background 0.18s ease, transform 0.15s ease;
}

html body a.yp-topnav-new-mobile-cta:hover,
html body a.yp-topnav-new-mobile-cta:focus {
    background: #ffeb3b;
    background: var(--yp-yellow-hover, #ffeb3b);
    color: #00512b !important;
    transform: translateY(-1px);
}

/* Hotline strip at bottom — quick trust signal for B2B mobile users */
.yp-topnav-new-mobile-hotline {
    padding: 10px 18px 14px;
    text-align: center;
    font-size: 12px;
    color: #64748b;
    color: var(--yp-text-muted, #64748b);
    border-top: 1px solid #f3f4f6;
}

html body .yp-topnav-new-mobile-hotline a,
html body .yp-topnav-new-mobile-hotline a:link,
html body .yp-topnav-new-mobile-hotline a:visited {
    color: #1a1a1a !important;
    color: var(--yp-text-dark, #1a1a1a) !important;
    text-decoration: none !important;
    border-bottom: 0 none transparent !important;
}

.yp-topnav-new-mobile-hotline small {
    display: block;
    margin-top: 2px;
    color: #94a3b8;
    color: var(--yp-text-meta, #94a3b8);
    font-size: 11px;
}

/* Reduced motion users — kill remaining transitions */
@media (prefers-reduced-motion: reduce) {
    html body a.yp-topnav-new-link,
    html body a.yp-topnav-new-cta,
    html body a.yp-topnav-new-mobile-link,
    html body a.yp-topnav-new-mobile-cta,
    .yp-topnav-new-mobile-toggle,
    .yp-topnav-new-cta-arrow {
        transition: none !important;
    }
}

/* End of css_yp1_new.css v3.1 */