/*
Theme Name: VAA Org VN
Description: Vietnam Advertising Association (VAA) official website theme.
Text Domain: vaa
Author: UX Themes
Template: flatsome
Version: 3.0
*/


:root{
    --primary-color: #005734;
    --second-color: #F06601;
    --third-color: #fc3;

	--headline: #353535;
    --bg-gray: #F9F7F2;
	--bg-white: #FFFFFF;
}

/*********** BASE CSS   ***********/
p{font-size: 14px;}
b, strong { font-weight: 700; }
a.button{line-height: 2.2 !important;} /* Fix button line height */
a.button.has-icon, a.read-more { display: inline-flex ; align-items: center; gap: 5px; }
a.read-more svg path{ fill: var(--second-color);}
a.read-more:hover svg path{ fill: var(--primary-color);}
li{ margin-bottom:0}
svg.flickity-button-icon{background-color: rgba(180, 142, 94, 0.25);}
.bg-gray{ background-color:var(--bg-gray) !important}
.bg-white{ background-color:var(--bg-white) !important}
.d-flex{ display:flex;} .flex-inline{ display:inline-flex;}
.justify-content-start{ justify-content:flex-start !important}
.justify-space-between{ justify-content:space-between}
.align-items-center{ align-items:center !important}
.align-baseline{ align-items:baseline;}
.flex-column{ flex-direction:column !important}
.bg-white{ background-color:var(--bs-white-rgb) !important}
.vr{ display:inline-block;  align-self:stretch;  width:1px;  min-height:1em;  background-color:currentcolor;  opacity:.25}
.d-grid{ display:grid;}
.grid-cols-2{ grid-template-columns:repeat(2,1fr)} .grid-rows-2{ grid-template-rows:repeat(2,1fr)} .grid-gap-10{ gap:10px}
.mt-0{ margin-top:0 !important} .mt-1{ margin-top:0.25em !important} .mt-2{ margin-top:0.5em !important} .mt-4{ margin-top:1em !important}
.mb-0{ margin-bottom:0 !important} .mb-1{ margin-bottom:0.25em !important} .mb-2{ margin-bottom:0.5em !important} .mb-4{ margin-bottom:1em !important}
.ms-0{ margin-left:0} .ms-4{ margin-left:1em !important} .me-0{ margin-right:0} .me-4{ margin-right:1em !important}
.ps-0{ padding-left:0 !important} .ps-3{ padding-left:0.75em} .pe-3{ padding-right:0.75em} .pe-0{ padding-right:0 !important} .pb-0{ padding-bottom:0 !important} .pb-1{ padding-bottom:0.25em !important} .pb-2{ padding-bottom:0.5em !important} .pb-4{ padding-bottom:1em !important}
.row.pb-0 > .col { padding-bottom: 0; }

.fsm-2{ font-size:.9rem !important} .fsm-6{ font-size:.7rem !important}
.fw-semibold{ font-weight:500 !important} .fw-bold{ font-weight:700 !important} .fw-light{ font-weight:300 !important}
.letter-spacing-1{ letter-spacing:.125rem !important}
.text-center{ text-align:center} .text-start{ text-align:left} .text-end{ text-align:right}
.text-white{color: white !important}
.page-title .entry-title{ font-weight:300}
.img-round .img-inner, .img-round img{ border-radius:8px}
.button.is-round{border-radius: 6px;}
.button.is-rounded{ border-radius:99px}
.button.button-hover:hover{ background-color: var(--second-color) !important; color: white !important; }
.text-justify, .text-justify p{text-align:justify}

.head-title{
    font-size: 32px;
    font-weight: 700;
    color: var(--primary-color);
}

.ellipsis-2{
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2; /* number of lines to show */
        line-clamp: 2; 
    -webkit-box-orient: vertical;
}

/*
* Define Icons
*/
[class*="icon_"], [class*="icons-"] {
    width: 24px;
    height: 24px;
    content: '';
    display: inline-block;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
}
    .icon_small{width: 16px !important;height: 16px !important;}
    .icon_bigger{width: 48px !important;height: 48px !important;}

    .icon_policy{background-image: url(./assets/icons/icon-policy.svg);}
    .icon_list{background-image: url(./assets/icons/icon-list.svg);}
    .icon_register{background-image: url(./assets/icons/icon-register.svg);}
    .icon_events{background-image: url(./assets/icons/icon-event-heart.svg);}
    .icon_savedate{background-image: url(./assets/icons/icon-save-date.svg);}


/*** Header ***/
    /* #header .header-bg-image{
        background: url(images/r-nav.jpg) no-repeat center center;
        background-size: cover;
    } */
    #wide-nav ul.nav.header-nav > li.menu-item > a {
        padding-left: 15px;
        padding-right: 15px;
    }


/*** HOMEPAGE ***/
    /*
    * Home Head
    */
    .head-list_buttons {
        display: flex;
        flex-direction: column;
    }
        .head-list_buttons a.button{
            min-height: 70px;
            line-height: 1.3 !important;
            display: flex;
            margin-right: 0;
            justify-content: start;
            align-items: center;
            gap: 10px;
            text-align: left;
        }
    .section-head .image-cover img{object-position: 50% 100%;}
    .section-head .is-divider{display: none;}

    /*
    * Home Events
    */
    .section-box-title, .box-title {
        display: flex;
        gap: 10px;
        align-items: center;
    }   
    .events-list{display: flex; flex-direction: column; gap: 10px;background-color: #f5f5f5;padding: 20px;}
    .event-item { display: flex ; gap: 15px;}
        .event-logo { box-shadow: 0px 0px 7px #eee; max-width: 200px; }

        .event-detail p {margin-bottom: 5px;}
        .event-detail .event-title{line-height: 1.5;}
        .event-detail .event-date, .post-date {
            background-color: #e5e5e5;
            display: inline-flex;
            padding-left: 7px;
            padding-right: 7px;
            align-items: center;
            gap: 5px;
            border-radius: 4px;
        }
        .post-date{font-size: 14px;}
        .event-detail .event-location{font-weight: 500; color: var(--second-color);}

    /*
    * Home News
    */
    .box-heading, .box-normal{margin-bottom: 15px;}
    .box-heading .title, .box-normal .title {
        font-size: 20px;
        color: var(--second-color);
        display: flex;
        align-items: center;
        gap: 10px;
        white-space: nowrap;
    }
    .box-normal .title{color: var(--primary-color);}
        .box-heading .title::before, .box-normal .title::before {
            content: "";
            display: block;
            width: 15px;
            height: 11px;
            position: relative;
            left: unset;
            bottom: unset;
            background: rgba(2, 79, 158, .1);
        }
        .box-heading .title::after, .box-normal .title::after {
            content: "";
            display: block;
            width: 100%;
            height: 11px;
            background: rgba(2, 79, 158, .1);
        }

        .box-normal .title::before {background-color: var(--primary-color);height: 3px;}
        .box-normal .title::after {background-color: var(--primary-color);width: 100%;height: 3px;}

        .row-news-list ul.news-list li { margin-left: 20px;margin-bottom: 7px;}
            .row-news-list ul.news-list li > a { font-size: 15px; }
            .row-news-list ul.news-list li > .news-list-date{font-size: 13px; font-style: italic;opacity: 0.6;}
    
    a.btn-more{font-size: 14px;}

        .logos-partners {
            display: flex;
            flex-wrap: wrap;
            gap: 25px;
        }

    /*
    * Detail Page
    */
    .recent-blog-posts-li > .recent-blog-posts > .mr-half > .badge{width: 5em; height: 5em;}
    aside.widget > .is-divider{max-width: 45%; height: 2px;}

    


/*
* Footer
*/
footer .absolute-footer{display: none;}
footer ul#menu-footermenu {
    display: flex;
    gap: 15px;
    align-items: center;
}
    footer ul#menu-footermenu:before{
        display: block;
        width: 16px;
        height: 16px;
        content: '';
        background: url(assets/icons/icon-home.svg) center center no-repeat;
        background-size: contain;
    }
footer div#nav_menu-2{margin-bottom: 0;}
footer ul#menu-footermenu li+li{border-top: 0;}
    footer ul#menu-footermenu li+li:before{
        display: inline-block;
        content: " ";
        margin-right: 10px;
        height: 15px;
        width: 1px;
        background-color: #ccc;
    }

@media only screen and (max-width: 48em) {
    /*************** ADD MOBILE ONLY CSS HERE  ***************/
    .row.row-news-list .col {padding-bottom: 0;}
    footer ul#menu-footermenu {
        display: flex;
        gap: 15px;
        align-items: center;
        row-gap: 0;
        flex-wrap: wrap;
    }
    footer p.text-small-mobile{font-size: 13px;}
    
}