/* =========================================
   ganBOLSA HEADER
========================================= */

.g-bolsa-header{
    width:100%;
    padding:44px 10px 18px;
    background:#2f4156;
    box-sizing:border-box;
}


/* WHITE CARD */

.g-bolsa-header-card{
    position:relative;

    width:100%;
    max-width:680px;
    min-height:225px;

    margin:0 auto;
    padding:36px 14px 20px;

    background:#ffffff;
    border-radius:20px;

    display:flex;
    justify-content:space-between;
    align-items:flex-start;

    box-sizing:border-box;

    box-shadow:
        0 12px 28px rgba(15,27,40,.24),
        inset 0 1px 0 rgba(255,255,255,.95);
}


/* CENTER NOTCH */

.g-bolsa-header-card::before{
    content:"";

    position:absolute;
    top:-1px;
    left:50%;

    width:126px;
    height:64px;

    transform:translateX(-50%);

    background:#2f4156;
    border-radius:0 0 68px 68px;

    z-index:1;
}


/* CENTER LOGO */

.g-bolsa-header-logo-wrap{
    position:absolute;
    top:-42px;
    left:50%;

    width:98px;
    height:98px;

    transform:translateX(-50%);

    display:flex;
    align-items:center;
    justify-content:center;

    background:#0d131a;
    border-radius:50%;

    box-shadow:
        0 8px 22px rgba(17,31,48,.28),
        0 0 0 6px #2f4156;

    z-index:5;
}

.g-bolsa-header-logo-link{
    width:88px;
    height:88px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:50%;
    overflow:hidden;

    text-decoration:none;
}

.g-bolsa-header-logo{
    width:100%;
    height:100%;

    display:block;
    object-fit:contain;
}


/* LEFT + RIGHT ACTION BUTTONS */

.g-bolsa-header-action{
    position:relative;
    z-index:4;

    width:58px;
    height:58px;

    display:flex;
    align-items:center;
    justify-content:center;

    text-decoration:none;
    -webkit-tap-highlight-color:transparent;
}


.g-bolsa-header-action-box{
    width:58px;
    height:58px;

    display:flex;
    align-items:center;
    justify-content:center;

    background:
        linear-gradient(
            145deg,
            #ffffff 0%,
            #f7f7f7 48%,
            #e9e9e9 100%
        );

    border:1px solid rgba(70,70,70,.22);
    border-radius:50%;

    box-sizing:border-box;

    box-shadow:
        5px 7px 8px rgba(0,0,0,.16),
        -2px -2px 4px rgba(255,255,255,.95),
        inset 1px 1px 1px rgba(255,255,255,.95),
        inset -1px -2px 2px rgba(0,0,0,.06);
}


.g-bolsa-header-action-box svg{
    width:29px !important;
    height:29px !important;

    display:block;

    filter:drop-shadow(0 1px 0 rgba(255,255,255,.7));
}


.g-bolsa-header-action-box svg path,
.g-bolsa-header-action-box svg line,
.g-bolsa-header-action-box svg polyline,
.g-bolsa-header-action-box svg circle{
    stroke:#333333 !important;
}


.g-bolsa-header-action-box svg path[fill]:not([fill="none"]){
    fill:#333333 !important;
}


.g-bolsa-header-action:active .g-bolsa-header-action-box{
    transform:translateY(2px);

    box-shadow:
        2px 3px 5px rgba(0,0,0,.15),
        inset 2px 2px 4px rgba(0,0,0,.07),
        inset -1px -1px 2px rgba(255,255,255,.9);
}

/* Hide Menu / Đăng tin text */
.g-bolsa-header-action-text{
    display:none !important;
}

.g-bolsa-header-action:active .g-bolsa-header-action-box{
    transform:translateY(2px) scale(.97);

    box-shadow:
        2px 3px 7px rgba(30,42,55,.18),
        inset 2px 2px 5px rgba(47,65,86,.12),
        inset -1px -1px 2px rgba(255,255,255,.90);
}


/* WORDMARK IMAGE — SAME ROW AS ICON BUTTONS */

.g-bolsa-header-wordmark-row{
    position:absolute;
    top:68px;
    left:50%;

    width:calc(100% - 160px);

    transform:translateX(-50%);

    display:flex;
    align-items:center;
    justify-content:center;

    z-index:4;
}

.g-bolsa-header-wordmark{
    width:210px;
    max-width:100%;
    height:auto;

    display:block;
    object-fit:contain;
}


/* BRAND CONTENT */

.g-bolsa-header-brand{
    position:absolute;
    top:115px;
    left:18px;
    right:18px;

    text-align:center;

    z-index:3;
}


/* SUBTITLE */

.g-bolsa-header-subtitle{
    margin-top:0;

    color:#222222;

    font-family:Arial, sans-serif;
    font-size:16px;
    font-weight:500;
    line-height:1.35;
}


/* ORANGE COUNTY */

.g-bolsa-header-county{
    margin-top:6px;

    color:#ff9800;

    font-family:Arial, sans-serif;
    font-size:18px;
    font-weight:900;
    line-height:1.2;
    letter-spacing:.5px;

    text-shadow:0 1px #000000;
}

.g-bolsa-header-county span{
    margin:0 4px;
}


/* LOGO TAP EFFECT */

.g-bolsa-header-logo-link:active{
    transform:scale(.97);
}


/* SMALL PHONE */

@media (max-width:370px){

    .g-bolsa-header-card{
        min-height:180px;
        padding-left:12px;
        padding-right:12px;
    }

    .g-bolsa-header-logo-wrap{
        width:92px;
        height:92px;
    }

    .g-bolsa-header-logo-link{
        width:82px;
        height:82px;
    }

    .g-bolsa-header-action,
    .g-bolsa-header-action-box{
        width:52px;
        height:52px;
    }

    .g-bolsa-header-action-box svg{
        width:26px !important;
        height:26px !important;
    }

    .g-bolsa-header-wordmark-row{
        top:68px;
        width:calc(100% - 142px);
    }

    .g-bolsa-header-wordmark{
        width:185px;
        max-width:100%;
    }

    .g-bolsa-header-brand{
        top:112px;
        left:12px;
        right:12px;
    }

    .g-bolsa-header-subtitle{
        font-size:14px;
    }

    .g-bolsa-header-county{
        font-size:15px;
    }
}


/* =========================================
   SUBHEADER UNDER ORANGE COUNTY
========================================= */

.g-bolsa-header-submenu{
    position:absolute;

    top:172px;
    left:14px;
    right:14px;

    width:auto;

    z-index:6;
    box-sizing:border-box;
}