@charset "UTF-8";
/* ==========================================================================
   css_home_new.css v1.0 — yellowpages.com.vn (English International B2B)
   ==========================================================================
   PURPOSE:
     Home page (index_new.asp) specific styles. Hero section, search form,
     hot categories, and "How It Works" 3-step onboarding.

     This file is NOT loaded on other pages (categories.asp, aboutus.asp).
     Each page gets its own scoped CSS for performance and clean separation.

   DEPENDENCY:
     Requires css_yp1_new.css to be loaded FIRST (provides design tokens).
     CSS Variables defined in :root of css_yp1_new.css are consumed here.

   LOAD ORDER on index_new.asp:
     1. bootstrap.min.css       (vendor)
     2. fontawesome all.min.css (vendor)
     3. css_yp1.css             (legacy)
     4. css_yp1_new.css         (global tokens + footer)
     5. css_home_new.css        (THIS FILE: home overrides)
     6. autocomplete_home.css   (component)

   STRATEGY:
     Brand-led, Equal-Twin Hierarchy, Pure CSS Background.
     These rules MUST come AFTER css_yp1.css to take precedence.

   !IMPORTANT POLICY:
     Preserved from inline styles. See css_yp1_new.css header for rationale.

   SECTIONS:
     §A  Hero Background (Pure CSS 3-layer, no image)
     §B  Hero Headline Stack (badge + H1 + subtitle)
     §C  Search Form (elevated card with focus glow)
     §D  Top Search Chips (pill design, no commas)
     §E  Hot Categories (160px circles + section header)
     §F  How It Works (white framed cards with yellow accent)

   Source: Extracted from index_new.asp v1.3.1 inline <style> block (lines 389-739)
   Updated: 2026-05-04
   Author : Tran Tuan Anh, VBIT JSC
   ========================================================================== */


/* ==========================================================================
   §A — HERO BACKGROUND (Pure CSS, no image — saves ~150KB)
   --------------------------------------------------------------------------
   3 layered backgrounds for depth without flatness:
     L1 (bottom): Brand emerald gradient
     L2 (middle): Subtle dot texture (premium B2B feel)
     L3 (top):    Yellow radial highlight (warmth signal)
   ========================================================================== */

.div_box_search {
    position: relative !important;
    overflow: hidden !important;
    background-image: none !important;
    background:
        radial-gradient(ellipse 1100px 520px at 50% 0%, rgba(255,222,7,0.10) 0%, rgba(255,222,7,0.02) 40%, transparent 65%),
        radial-gradient(circle at 25% 75%, rgba(255,255,255,0.025) 1px, transparent 1.5px) 0 0/44px 44px,
        radial-gradient(circle at 75% 25%, rgba(255,222,7,0.04) 1px, transparent 1.5px) 0 0/56px 56px,
        linear-gradient(180deg, #006135 0%, #00512b 50%, #003d20 100%) !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 72px 0 80px 0 !important;
}

.div_box_search > .container {
    position: relative;
    z-index: 2;
}

/* Force form & inner div to natural flow (legacy had height:562px fixed) */
.div_box_search form {
    margin: 0;
    padding: 0;
}

.div_box_search form > div[style*="height:562px"] {
    height: auto !important;
    min-height: 0 !important;
}

.div_box_search .top_height_box_search {
    display: none !important;
}


/* ==========================================================================
   §B — HERO HEADLINE STACK (8px grid vertical rhythm)
   --------------------------------------------------------------------------
   Headline group: badge + H1 + subtitle (close pairs, 12-16px gaps)
   Pattern: Equal-Twin (badge + H1 peer level, NOT subordinate)
   ========================================================================== */

.yellow_pages_title-wrap {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    margin: 0 auto !important;
    padding: 0 !important;
    line-height: 1 !important;
    box-sizing: border-box !important;
}

/* Badge — 37px, peer-level brand presence */
.yellow_pages_title {
    display: inline-block !important;
    background: #ffde07 !important;
    background: var(--yp-yellow, #ffde07) !important;
    color: #1a1a1a !important;
    color: var(--yp-text-dark, #1a1a1a) !important;
    padding: 9px 26px 7px 26px !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-family: var(--yp-font-body, Arial, Helvetica, sans-serif) !important;
    font-size: 37px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    letter-spacing: 1px !important;
    margin: 0 !important;
    transform: rotate(-2deg) !important;
    border-radius: 3px !important;
    border-radius: var(--yp-radius-sm, 3px) !important;
    box-shadow: 0 4px 14px rgba(0,0,0,0.20), 0 2px 4px rgba(0,0,0,0.12) !important;
    box-shadow: var(--yp-shadow-badge, 0 4px 14px rgba(0,0,0,0.20), 0 2px 4px rgba(0,0,0,0.12)) !important;
    height: auto !important;
    width: auto !important;
    text-transform: uppercase !important;
}

/* H1 — wider max-width to fit on 1 line, peer to badge */
.yellowpages_directory {
    display: block !important;
    width: 100% !important;
    max-width: 1000px !important;
    margin: 24px auto 0 auto !important;
    padding: 0 16px !important;
    font-family: Verdana, Geneva, sans-serif !important;
    font-family: var(--yp-font-display, Verdana, Geneva, sans-serif) !important;
    font-size: 26px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    letter-spacing: -0.2px !important;
    color: #FFFFFF !important;
    color: var(--yp-text-white, #FFFFFF) !important;
    text-align: center !important;
    text-shadow: 0 2px 6px rgba(0,0,0,0.25) !important;
    box-sizing: border-box !important;
}

/* Subtitle — close pair to H1 (12px gap) */
.yellow_pages_subtitle {
    display: block !important;
    width: 100% !important;
    max-width: 780px !important;
    margin: 16px auto 0 auto !important;
    padding: 0 16px !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-family: var(--yp-font-body, Arial, Helvetica, sans-serif) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 1.5 !important;
    letter-spacing: 0.3px !important;
    color: rgba(255,255,255,0.82) !important;
    text-align: center !important;
    opacity: 1 !important;
    box-sizing: border-box !important;
}

@media screen and (max-width: 1199px) {
    .yellowpages_directory {
        font-size: 24px !important;
    }
}

@media screen and (max-width: 991px) {
    .div_box_search {
        padding: 56px 0 64px 0 !important;
    }
    .yellow_pages_title {
        padding: 7px 20px 5px 20px !important;
        font-size: 28px !important;
    }
    .yellowpages_directory {
        font-size: 21px !important;
        margin-top: 14px !important;
    }
    .yellow_pages_subtitle {
        font-size: 13px !important;
        margin-top: 10px !important;
    }
}

@media screen and (max-width: 500px) {
    .div_box_search {
        padding: 44px 0 56px 0 !important;
    }
    .yellow_pages_title {
        padding: 6px 16px 4px 16px !important;
        font-size: 22px !important;
        letter-spacing: 0.6px !important;
    }
    .yellowpages_directory {
        font-size: 17px !important;
        line-height: 1.3 !important;
    }
    .yellow_pages_subtitle {
        font-size: 12px !important;
        line-height: 1.45 !important;
    }
}


/* ==========================================================================
   §C — SEARCH FORM (action group: 32px gap from headline group)
   --------------------------------------------------------------------------
   Elevated card with hover lift and yellow focus glow.
   ========================================================================== */

.div_form_input {
    margin-top: 48px !important;
    box-shadow: 0 12px 36px rgba(0,0,0,0.28), 0 3px 8px rgba(0,0,0,0.14) !important;
    box-shadow: var(--yp-shadow-form, 0 12px 36px rgba(0,0,0,0.28), 0 3px 8px rgba(0,0,0,0.14)) !important;
    transition: box-shadow 0.3s ease !important;
}

.div_form_input:hover {
    box-shadow: 0 16px 44px rgba(0,0,0,0.32), 0 5px 12px rgba(0,0,0,0.16) !important;
    box-shadow: var(--yp-shadow-form-hv, 0 16px 44px rgba(0,0,0,0.32), 0 5px 12px rgba(0,0,0,0.16)) !important;
}

.div_form_input:focus-within {
    box-shadow: 0 0 0 3px rgba(255,222,7,0.35), 0 8px 24px rgba(0,0,0,0.18) !important;
    box-shadow: var(--yp-shadow-focus, 0 0 0 3px rgba(255,222,7,0.35), 0 8px 24px rgba(0,0,0,0.18)) !important;
}

.nuttimkiem {
    transition: transform 0.15s ease, background 0.2s ease !important;
}

.nuttimkiem:hover {
    background: #ffeb3b !important;
    background: var(--yp-yellow-hover, #ffeb3b) !important;
    transform: scale(1.05);
}

@media screen and (max-width: 991px) {
    .div_form_input {
        margin-top: 36px !important;
    }
}


/* ==========================================================================
   §D — TOP SEARCH CHIPS (close pair to search bar — 20px gap)
   --------------------------------------------------------------------------
   Larger chips: padding 8px 16px, font 14px. Commas removed (handoff spec).
   ========================================================================== */

.topsearch_home {
    margin-top: 32px !important;
    margin-bottom: 0 !important;
    line-height: 2.6 !important;
    text-align: center !important;
}

.topsearch_home strong {
    color: #FFFFFF !important;
    color: var(--yp-text-white, #FFFFFF) !important;
    font-weight: 600 !important;
    margin-right: 8px;
    font-size: 15px !important;
}

.topsearch_home a {
    display: inline-block;
    margin: 5px 4px;
    padding: 8px 16px !important;
    border-radius: 22px;
    border-radius: var(--yp-radius-pill, 22px);
    background: rgba(255,255,255,0.10);
    border: 1px solid rgba(255,255,255,0.35);
    font-size: 14px !important;
    line-height: 1.4 !important;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.15s ease !important;
}

.topsearch_home a:hover {
    background: rgba(255,222,7,0.20) !important;
    border-color: rgba(255,222,7,0.55) !important;
    text-decoration: none !important;
    transform: translateY(-1px);
}

@media screen and (max-width: 991px) {
    .topsearch_home {
        line-height: 2.4 !important;
        margin-top: 24px !important;
    }
    .topsearch_home a {
        padding: 6px 14px !important;
        font-size: 13px !important;
    }
    .topsearch_home strong {
        font-size: 14px !important;
    }
}


/* ==========================================================================
   §E — HOT CATEGORIES (160px circles + section header)
   --------------------------------------------------------------------------
   Image circles with yellow ring, white pill labels (yellow on hover only).
   ========================================================================== */

.hot_category_pc {
    background: #fafbfc !important;
    background: var(--yp-bg-pale, #fafbfc) !important;
    padding-top: 72px !important;
    padding-bottom: 64px !important;
    margin-top: 0 !important;
    border-top: none !important;
    border-bottom: 1px solid #eaecef;
    border-bottom: 1px solid var(--yp-border-pale, #eaecef);
}

/* Section header (NEW) */
.hot_category_header {
    text-align: center;
    margin-bottom: 40px;
}

.hot_category_header-title {
    font-size: 26px;
    font-weight: 700;
    color: #1a1a1a;
    color: var(--yp-text-dark, #1a1a1a);
    margin: 0 0 8px 0;
    letter-spacing: -0.2px;
}

.hot_category_header-subtitle {
    font-size: 14px;
    color: #6b7280;
    color: var(--yp-text-muted, #6b7280);
    margin: 0;
    font-weight: 400;
}

.hot_category_pc .container > .row {
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 1.5rem;
    align-items: start;
}

.hot_category_pc .col-sm-2 {
    padding-left: 10px;
    padding-right: 10px;
}

/* Image circle — 160px max as user requested, refined yellow ring */
.hot_category_pc .col-sm-2 .img_border {
    border: none !important;
    border-radius: 50% !important;
    border-radius: var(--yp-radius-circle, 50%) !important;
    width: 90% !important;
    max-width: 160px !important;
    aspect-ratio: 1/1 !important;
    object-fit: cover !important;
    box-shadow: 0 3px 10px rgba(0,0,0,0.08), 0 0 0 3px #ffde07 !important;
    transition: transform 0.25s ease, box-shadow 0.25s ease !important;
    display: block;
    margin: 0 auto;
}

.hot_category_pc .col-sm-2:hover .img_border {
    transform: translateY(-3px) scale(1.03);
    box-shadow: 0 8px 18px rgba(0,0,0,0.12), 0 0 0 3px #ffde07 !important;
}

/* Label — clean white pill, yellow on hover only */
.hot_category_pc .col-sm-2 .bg_yellow {
    background: #ffffff !important;
    background: var(--yp-bg-white, #ffffff) !important;
    border: 1px solid #e5e7eb !important;
    border: 1px solid var(--yp-border-light, #e5e7eb) !important;
    border-radius: 8px !important;
    border-radius: var(--yp-radius-lg, 8px) !important;
    margin-top: 16px !important;
    padding: 8px 8px !important;
    transition: background 0.2s ease, border-color 0.2s ease !important;
    max-width: 170px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.hot_category_pc .col-sm-2:hover .bg_yellow {
    background: #ffde07 !important;
    background: var(--yp-yellow, #ffde07) !important;
    border-color: #ffde07 !important;
    border-color: var(--yp-yellow, #ffde07) !important;
}

.hot_category_pc .col-sm-2 .bg_yellow .text_link {
    color: #1a1a1a !important;
    color: var(--yp-text-dark, #1a1a1a) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    letter-spacing: 0.2px !important;
    text-decoration: none !important;
}

@media screen and (max-width: 991px) {
    .hot_category_pc {
        padding-top: 44px !important;
        padding-bottom: 36px !important;
    }
    .hot_category_header {
        margin-bottom: 28px;
    }
    .hot_category_header-title {
        font-size: 22px;
    }
    .hot_category_header-subtitle {
        font-size: 13px;
    }
    .hot_category_pc .col-sm-2 .img_border {
        max-width: 120px !important;
    }
    .hot_category_pc .col-sm-2 .bg_yellow .text_link {
        font-size: 12px !important;
    }
}

@media screen and (max-width: 500px) {
    .hot_category_header-title {
        font-size: 19px;
    }
}


/* ==========================================================================
   §F — HOW IT WORKS (clean white framed cards)
   --------------------------------------------------------------------------
   3-step onboarding: Browse → Connect → Convert (FDI use case in step 3)
   White cards with yellow accent on hover.
   ========================================================================== */

.howitworks-section {
    padding: 56px 16px 48px 16px;
    background: #ffffff;
    background: var(--yp-bg-white, #ffffff);
    margin: 0;
}

.howitworks-title {
    font-size: 26px;
    font-weight: 700;
    color: #1a1a1a;
    color: var(--yp-text-dark, #1a1a1a);
    text-align: center;
    margin-bottom: 8px;
    letter-spacing: -0.2px;
}

.howitworks-subtitle {
    font-size: 14px;
    color: #6b7280;
    color: var(--yp-text-muted, #6b7280);
    text-align: center;
    margin-bottom: 36px;
    font-weight: 400;
}

.howitworks-card {
    background: #ffffff;
    background: var(--yp-bg-white, #ffffff);
    border: 1px solid #e5e7eb;
    border: 1px solid var(--yp-border-light, #e5e7eb);
    border-radius: 12px;
    border-radius: var(--yp-radius-xl, 12px);
    padding: 30px 24px;
    height: 100%;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    box-shadow: var(--yp-shadow-card, 0 1px 3px rgba(0,0,0,0.04));
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    text-align: center;
}

.howitworks-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 28px rgba(0,0,0,0.08);
    box-shadow: var(--yp-shadow-hover, 0 12px 28px rgba(0,0,0,0.08));
    border-color: #ffde07;
    border-color: var(--yp-yellow, #ffde07);
}

.howitworks-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border-radius: var(--yp-radius-circle, 50%);
    background: #ffde07;
    background: var(--yp-yellow, #ffde07);
    color: #1a1a1a;
    color: var(--yp-text-dark, #1a1a1a);
    font-size: 20px;
    font-weight: 800;
    margin-bottom: 18px;
    box-shadow: 0 4px 10px rgba(255,222,7,0.40);
    box-shadow: var(--yp-shadow-yellow, 0 4px 10px rgba(255,222,7,0.40));
}

.howitworks-step-title {
    font-size: 16px;
    font-weight: 700;
    color: #1a1a1a;
    color: var(--yp-text-dark, #1a1a1a);
    margin-bottom: 10px;
    letter-spacing: 0.1px;
}

.howitworks-step-title i {
    color: #00512b;
    color: var(--yp-green, #00512b);
    margin-right: 8px;
    font-size: 14px;
}

.howitworks-step-desc {
    font-size: 14px;
    color: #4b5563;
    color: var(--yp-text-body, #4b5563);
    line-height: 1.65;
    margin: 0;
}

@media screen and (max-width: 991px) {
    .howitworks-section {
        padding: 36px 12px;
    }
    .howitworks-title {
        font-size: 22px;
    }
    .howitworks-card {
        padding: 24px 18px;
        margin-bottom: 14px;
    }
}

@media screen and (max-width: 500px) {
    .howitworks-title {
        font-size: 19px;
    }
    .howitworks-subtitle {
        font-size: 13px;
        margin-bottom: 24px;
    }
}

/* End of css_home_new.css */