@charset "UTF-8";
/* ==========================================================================
   css_badges_new.css v1.3 — yellowpages.com.vn (English International B2B)
   ==========================================================================
   PURPOSE:
     Trust badge system — Verified badge (with tooltip) + Sponsor badge.
     Both badges use UNIFIED pill border design, differ only in color.
     Badges are inline within card flow (inside ten_sodienthoai_div_95),
     NOT positioned absolutely — fixes "badge pushed outside card" bug.

   v1.3 CHANGES (2026-05-07):
     + INCREASED .yp-sidebar-box margin-bottom 4px -> 8px (more breathing room
       between sections — visual feedback v1.2 felt too cramped).
     + RIGHT-PADDING fix on .yp-sidebar-scroll p: 2px 10px -> 2px 14px 2px 10px
       so long item names (e.g. "Sewing Buttons (Metal, Plastic...)") don't
       collide with the 4px native scrollbar on the right edge.
     + RESTORED amber scroll indicator — final design: small 14x14 circle,
       half exposed (bottom: -7px), FontAwesome 6.1.2 fa-chevron-down (\f078),
       lighter amber (#fde047), brand-green chevron, subtle shadow.
       Iteration history (kept for posterity, see diff in v1.0/v1.1/v1.2):
         a) v1.1 had bottom-right circle with unicode "▼" — too prominent.
         b) v1.2 removed it entirely — too sparse, lost overflow cue.
         c) v1.3 round 1: full circle bottom-center with unicode "▼" — OK
            shape but glyph too block-y.
         d) v1.3 round 2: half-disc tab with FA \f078 — failed because the
            13px-tall container was too short to render the chevron.
         e) v1.3 round 3: small circle with unicode "▾" — rendered but
            looked too plain compared to the FA chevron in production.
         f) v1.3 FINAL: small circle (14x14) WITH FA chevron-down — circle
            is square enough (14x14) for the glyph to render cleanly, and
            FA chevron is thin/refined like production yellowpages.vn.
       Lesson: pseudo-element ::after font glyphs need both correct
       font-family ("Font Awesome 6 Free") AND enough box dimension for
       the line-box to render the glyph.
       JS detection in categories_new.asp v1.5.

   v1.2 CHANGES (2026-05-07):
     - REMOVED amber down-arrow scroll indicator (yp-sidebar-box.has-scroll::after)
       Native browser scrollbar is sufficient signal; arrow added visual noise.
     - REMOVED .yp-sidebar-box.scrolled-end::after fade rule (no longer needed).
     + REDUCED .yp-sidebar-box margin-bottom 8px -> 4px (tighter section spacing).
     + ALIGNMENT FIX: items inside .yp-sidebar-scroll now indent-align with
       heading text (both at 10px from box edge). Achieved by:
         - .yp-sidebar-scroll a: removed horizontal padding (2px 6px -> 2px 0)
         - .yp-sidebar-scroll p: padding-left 10px to match heading offset
         - Removed Bootstrap ps-2 dependency for left alignment
     + WHITESPACE FIX: eliminated the residual gap below the last sidebar box.
       Three combined rules:
         - .yp-sidebar-box:last-child { margin-bottom: 0 } (no trailing margin)
         - .div_categories_pc > div { padding-bottom: 0 !important } (kill pb-2)
         - companion ASP markup change: pb-2 -> pb-0 in categories_new.asp v1.4
       Root cause: the white .div_categories_pc background (css_page1.css:89)
       extended below the last box because of inner-wrapper Bootstrap padding.
     + WHITE-PANEL FIX: .div_categories_pc { background: transparent !important }
       The legacy css_page1.css:89 sets the sidebar container background to
       #FFFFFF. Since each individual .yp-sidebar-box already has its own
       white fill + border, the outer white was redundant AND created a
       visible white panel when the sidebar was short/empty (container taller
       than its content). Transparent lets .background_light (#f2f3f7) show
       through. Migration strategy preserved — legacy css_page1.css untouched.

   v1.1 CHANGES (2026-05-06):
     + Renamed Featured -> Sponsor badge (fa-dollar-sign icon)
     + Replaced diamond PNG images with fa-gem FA icons (no image dependency)
     + Unified border-pill design: Verified (green) and Sponsor (amber) same shape
     + FIXED: badges moved inline into yp-tier-row (was outside float context)
     + Added yp-badge-divider for separator between gems and "Sponsor" label
     + Removed yp-card-badges wrapper (no longer needed)

   DEPENDENCIES:
     css_yp1_new.css (design tokens) loaded first.
     FontAwesome 6.1.2 (fa-circle-check, fa-gem, fa-dollar-sign, fa-check).

   SECTIONS:
     §A  Shared badge base (unified pill)
     §B  Verified badge + info (?) button
     §C  Verified tooltip panel
     §D  Sponsor badge + gem tier icons
     §E  Tier row layout (inline flex container)
     §F  Responsive adjustments
     §L  Sidebar scrollable boxes (Desktop PC)

   v1.3 — 2026-05-07
   ========================================================================== */


/* ==========================================================================
   §A — SHARED BADGE BASE (unified pill design)
   Both Verified and Sponsor share identical shape/size — only color differs.
   ========================================================================== */

.yp-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 9px 3px 8px;
    border-radius: 20px;
    border-width: 1px;
    border-style: solid;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.2px;
    line-height: 1.2;
    white-space: nowrap;
    vertical-align: middle;
    font-family: Arial, Helvetica, sans-serif;
    transition: box-shadow 0.18s ease;
    cursor: default;
}

.yp-badge i {
    font-size: 10px;
    flex-shrink: 0;
    line-height: 1;
}


/* ==========================================================================
   §B — VERIFIED BADGE + INFO (?) BUTTON
   ========================================================================== */

.yp-badge--verified {
    background: #f0fdf4;
    color: #15803d;
    border-color: #bbf7d0;
    position: relative;
}

.yp-badge--verified i.fa-circle-check {
    color: #22c55e;
    font-size: 11px;
}

.yp-badge--verified:hover {
    box-shadow: 0 2px 8px rgba(34, 197, 94, 0.18);
}

.yp-badge-info {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: transparent;
    border: 1px solid #86efac;
    color: #16a34a;
    font-size: 9px;
    font-weight: 900;
    font-family: Arial, Helvetica, sans-serif;
    cursor: pointer;
    padding: 0;
    margin-left: 1px;
    line-height: 1;
    flex-shrink: 0;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.yp-badge-info:hover,
.yp-badge-info:focus {
    background: #22c55e;
    border-color: #22c55e;
    color: #ffffff;
    outline: none;
    box-shadow: none;
}


/* ==========================================================================
   §C — VERIFIED TOOLTIP PANEL
   ========================================================================== */

.yp-verified-wrapper {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.yp-verified-tooltip {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    width: 300px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.11), 0 2px 6px rgba(0, 0, 0, 0.06);
    z-index: 9000;
    padding: 12px 14px 10px 14px;
    animation: ypTooltipIn 0.14s ease;
}

.yp-verified-tooltip::before {
    content: "";
    position: absolute;
    top: -6px;
    left: 20px;
    width: 10px;
    height: 10px;
    background: #ffffff;
    border-left: 1px solid #e2e8f0;
    border-top: 1px solid #e2e8f0;
    transform: rotate(45deg);
}

.yp-verified-tooltip.is-open {
    display: block;
}

@keyframes ypTooltipIn {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.yp-tooltip-header {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 8px;
    padding-bottom: 7px;
    border-bottom: 1px solid #f1f5f9;
}

.yp-tooltip-header i {
    color: #22c55e;
    font-size: 14px;
    flex-shrink: 0;
}

.yp-tooltip-title {
    font-size: 12px;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.3;
}

.yp-tooltip-factors {
    list-style: none;
    margin: 0 0 8px 0;
    padding: 0;
}

.yp-tooltip-factors li {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    padding: 4px 0;
    font-size: 11px;
    color: #334155;
    line-height: 1.4;
    border-bottom: 1px solid #f8fafc;
}

.yp-tooltip-factors li:last-child {
    border-bottom: none;
}

.yp-tooltip-factors li i {
    color: #22c55e;
    font-size: 10px;
    flex-shrink: 0;
    margin-top: 2px;
}

.yp-tooltip-disclaimer {
    font-size: 10px;
    color: #94a3b8;
    line-height: 1.4;
    margin: 0;
    padding-top: 7px;
    border-top: 1px solid #f1f5f9;
}

.yp-tooltip-disclaimer a {
    color: #22c55e;
    text-decoration: none;
    font-weight: 600;
}

.yp-tooltip-disclaimer a:hover {
    text-decoration: underline;
}

@media screen and (max-width: 480px) {
    .yp-verified-tooltip {
        width: 280px;
        left: 0;
    }
}


/* ==========================================================================
   §D — SPONSOR BADGE + GEM TIER ICONS
   Unified pill identical to Verified — amber color only.
   fa-gem x3/4/5 = tier indicator, fa-dollar-sign = Sponsor label icon.
   ========================================================================== */

.yp-badge--sponsor {
    background: #fffbeb;
    color: #92400e;
    border-color: #fcd34d;
}

.yp-badge--sponsor i.fa-gem {
    color: #f59e0b;
    font-size: 12px;
}

/* Sponsor text label — amber, slightly bolder than gem icons */
.yp-sponsor-label {
    color: #b45309;
    font-weight: 800;
    font-size: 11px;
    margin-left: 3px;
    padding-left: 5px;
    border-left: 1px solid #fcd34d;
}

.yp-badge--sponsor:hover {
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.20);
}


/* ==========================================================================
   §E — TIER ROW LAYOUT
   Inline flex row: [Sponsor badge] [Verified badge] or status text
   ========================================================================== */

.yp-tier-row {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}


/* ==========================================================================
   §F — RESPONSIVE ADJUSTMENTS
   ========================================================================== */

@media screen and (max-width: 767px) {
    .yp-badge {
        font-size: 10px;
        padding: 3px 7px 3px 6px;
    }

    .yp-badge i {
        font-size: 9px;
    }

    .yp-badge--sponsor i.fa-gem {
        font-size: 10px;
    }

    .yp-badge-info {
        width: 13px;
        height: 13px;
        font-size: 8px;
    }
}


/* ==========================================================================
   §G — LOGO IMAGE SIZING
   ========================================================================== */

.logo_listing {
    display: flex !important;
    align-items: center;
    justify-content: center;
    height: 90px;
    overflow: hidden;
    flex-shrink: 0;
}

.yp-logo-img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 78px;
    object-fit: contain;
    display: block;
    margin: auto;
}


/* ==========================================================================
   §H — META INFO ROWS (Industry / Business Type / Markets Served)
   Upgrade from nested <small> to properly sized rows.
   ========================================================================== */

.category_style_market_pc .p-2 {
    padding-top: 1px !important;
    padding-bottom: 3px !important;
}

.category_style_market_pc .p-2 small,
.category_style_market_m .p-1 small {
    font-size: 12.5px;
    line-height: 1.5;
    color: #1e293b;
}

/* span.category_style_market color moved to §K (Brand Green Harmony)
   to keep all 3 accent zones in one place for easy maintenance */

.category_style_market_m .p-1 {
    padding-top: 1px !important;
    padding-bottom: 2px !important;
}


/* ==========================================================================
   §I — EPRODUCTS BLOCK (company description / products rich text)
   Replaces old text_add_listing + <small> orange styling.
   Clean editorial: dark text, yellow left accent, readable size.
   ========================================================================== */

.yp-eproducts-block {
    margin: 12px 0 6px 0;
    padding: 9px 14px 9px 16px;
    border-left: 3px solid #ffde07;
    background: #fafbfc;
    border-radius: 0 6px 6px 0;
    font-size: 13.5px;
    line-height: 1.68;
    color: #1e293b;
}

/* When logo present: indent left to visually align with address column */
/* logo_listing is ~22% float, add ~24% left padding to align text */
/* .yp-eproducts-logo removed — eproducts now inside ten_sodienthoai_div_95 for natural alignment */

/* Underline tag from DB rich content */
.yp-eproducts-block u {
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* Heading tags used as section labels in DB content */
.yp-eproducts-block h3,
.yp-eproducts-block h4 {
    font-size: 13.5px;
    font-weight: 700;
    color: #0f172a;
    margin: 6px 0 3px 0;
}

.yp-eproducts-block b,
.yp-eproducts-block strong {
    color: #0f172a;
    font-weight: 700;
}

.yp-eproducts-block p {
    margin: 0 0 4px 0;
}

.yp-eproducts-block ul,
.yp-eproducts-block ol {
    padding-left: 18px;
    margin: 4px 0;
}

.yp-eproducts-block li {
    margin-bottom: 2px;
}


/* ==========================================================================
   §J — CARD VERTICAL RHYTHM
   Consistent spacing between card sections.
   ========================================================================== */

/* Badge row: clear gap below H2 */
.yp-tier-row {
    margin-top: 4px;
    margin-bottom: 8px;
}

/* Address + phone lines compact */
.logo_lisitng_address .p-2,
.listing_address_nologo .p-2 {
    padding-top: 2px !important;
    padding-bottom: 2px !important;
}

/* Meta rows: subtle top separator */
.category_style_market_pc {
    padding-top: 4px !important;
    margin-top: 2px;
}



/* ==========================================================================
   §K — EMAIL/WEBSITE BUTTON ROW SPACING
   ========================================================================== */

/* Reduce gap above email/website buttons */
.p-0.m-0.pt-0.w-100.h-auto:has(.email_website) {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Tighter padding below card after email/website */
.email_website {
    padding-bottom: 0;
    padding-top: 2px;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* Override css_page1.css: kills clear:both gap on email/website links */
.email_website a {
    clear: none !important;
    display: inline-flex !important;
    align-items: center;
    margin-bottom: 0 !important;
}

/* ==========================================================================
   §K — BRAND GREEN COLOR HARMONY
   Unify 3 accent zones under brand green family:
     Zone 1 — H1 page title   : #00512b (brand primary, authority)
     Zone 2 — Meta info labels : #1a6b3c (green mid, readable)
     Zone 3 — Email/Website btns: #00512b border+icon, hover fill

   Replaces:
     H1 Bootstrap text-danger (#dc3545) — not in design system
     Industry/Business/Markets teal (#0e7490) — not in design system
   ========================================================================== */

/* Zone 1 — H1 page title
   Overrides Bootstrap .text-danger on the category H1 */
h1.text-danger {
    color: #00512b !important;
}

/* Zone 2 — Meta info labels (Industry / Business Type / Markets Served)
   Replaces teal #0e7490 with brand green family */
span.category_style_market {
    color: #1a6b3c;
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 0.2px;
}

span.category_style_market i {
    color: #1a6b3c;
    width: 13px;
    text-align: center;
    font-size: 11px;
}

/* Zone 3 — Email / Website button row
   email_website links from css_page2.css — override to brand green */
.email_website a {
    color: #00512b !important;
    border-color: #00512b !important;
    transition: background 0.15s ease, color 0.15s ease;
}

.email_website a:hover {
    background: #00512b !important;
    color: #ffffff !important;
}

.email_website a i {
    color: inherit;
}

/* ==========================================================================
   §L — SIDEBAR SCROLLABLE BOXES (Desktop PC)
   Pattern: trangvangvietnam.com — each section is a bordered scrollable box.
   Structure: .yp-sidebar-box > .yp-sidebar-heading + .yp-sidebar-scroll
   ========================================================================== */

/* Box container — border, rounded, margin between sections.
   v1.3: margin-bottom raised back from 4px to 8px so sections breathe more. */
.yp-sidebar-box {
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    margin-bottom: 8px;
    overflow: hidden;
    background: #ffffff;
}

/* v1.2: last sidebar box has no bottom margin so the white container
   .div_categories_pc (background #FFFFFF from css_page1.css:89) ends
   exactly at the box border — no residual whitespace. */
.yp-sidebar-box:last-child {
    margin-bottom: 0;
}

/* v1.2 defensive: kill any padding-bottom Bootstrap utility (pb-1/pb-2/pb-3)
   on the immediate sidebar inner wrapper, so the white container ends flush
   with the last box. Markup is already pb-0 in v1.4, this is belt-and-braces. */
.div_categories_pc > div {
    padding-bottom: 0 !important;
}

/* v1.2 root fix: neutralise the legacy white background of .div_categories_pc.
   Defined in css_page1.css:89 as { background: #FFFFFF }. Each individual
   .yp-sidebar-box already has its own white background + border, so this
   outer fill is redundant AND causes a visible white panel whenever the
   sidebar is short or empty (taller container than content). Setting it
   transparent lets the page background (.background_light #f2f3f7) show
   through cleanly. !important is needed to override the legacy declaration. */
.div_categories_pc {
    background: transparent !important;
}

/* Section heading — inside box, green label + yellow underline */
.yp-sidebar-heading {
    font-size: 12.5px;
    font-weight: 700;
    color: #00512b;
    background: #f8fafc;
    border-bottom: 2px solid #ffde07;
    margin: 0;
    padding: 8px 10px 6px 10px !important;
    letter-spacing: 0.2px;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Scrollable content area — max-height triggers scroll */
.yp-sidebar-scroll {
    max-height: 200px;
    overflow-y: auto;
    padding: 2px 2px 2px 2px;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 #f1f5f9;
}

.yp-sidebar-scroll::-webkit-scrollbar {
    width: 4px;
}

.yp-sidebar-scroll::-webkit-scrollbar-track {
    background: #f1f5f9;
}

.yp-sidebar-scroll::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 2px;
}

/* Scroll indicator wrapper — position relative for ::after arrow */
.yp-sidebar-box {
    position: relative;
    overflow: visible;          /* v1.3: was 'hidden'; arrow needs to overlap border */
}

/* v1.3 (final): amber down-arrow scroll indicator — small refined circle.
   Shape: 14x14 circle, half-exposed under the box border. Glyph: FontAwesome
   6.1.2 fa-chevron-down (solid weight 900). Earlier attempts using a wider
   half-disc tab failed because the 13px-tall container was too short to
   render the glyph reliably; with a square 14x14 circle there is enough
   vertical room and the chevron renders cleanly. Production yellowpages.vn
   uses the same chevron-down look — thin, gọn, tinh tế.
   Visible only when content overflows (.has-scroll added by JS).
   Hides when scrolled to bottom (.scrolled-end class). */
.yp-sidebar-box.has-scroll::after {
    content: "\f078";              /* FontAwesome fa-chevron-down */
    font-family: "Font Awesome 6 Free", "FontAwesome", sans-serif;
    font-weight: 900;              /* required for FA6 Free Solid style */
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    position: absolute;
    bottom: -7px;                  /* sits half-out of the bottom border */
    left: 50%;
    transform: translateX(-50%);
    width: 14px;
    height: 14px;
    background: #fde047;           /* lighter amber — less harsh than #ffde07 */
    color: #1a6b3c;                /* brand green-mid for the chevron */
    font-size: 8px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.10);
    line-height: 1;
    z-index: 2;
    transition: opacity 0.2s ease;
}

/* Fade out the indicator once user has scrolled to bottom — JS toggles this class */
.yp-sidebar-box.has-scroll.scrolled-end::after {
    opacity: 0;
}

/* Links inside scroll area
   v1.2: removed horizontal padding so text aligns with the parent <p>
   left-padding (which now matches the heading offset of 10px). */
.yp-sidebar-scroll a {
    display: block;
    color: #334155;
    text-decoration: none;
    padding: 2px 0;
    border-radius: 3px;
    transition: background 0.12s ease, color 0.12s ease;
}

.yp-sidebar-scroll a:hover {
    background: #f0fdf4;
    color: #00512b;
}

.yp-sidebar-scroll a small {
    font-size: 12px;
    line-height: 1.55;
    color: inherit;
}

/* Current industry — bold, no link */
.yp-sidebar-scroll p strong small {
    font-size: 12px;
    color: #0f172a;
}

/* Item rows — left padding 10px to align with heading text (which has
   padding: 8px 10px 6px 10px). Override Bootstrap ps-2 from markup.
   v1.3: right padding raised to 14px so long names don't collide with
   the 4px native scrollbar at the right edge. */
.yp-sidebar-scroll p {
    margin: 0;
    padding: 2px 14px 2px 10px !important;
}

.yp-sidebar-scroll .counter_number {
    font-size: 11px;
    color: #94a3b8;
    margin-left: 2px;
}

/* End of css_badges_new.css v1.2 */