/*
Theme Name: Flatsome Child
Description: This is a child theme for Flatsome Theme
Author: UX Themes
Template: flatsome
Version: 3.0
*/

/*************** ADD CUSTOM CSS HERE.   ***************/

/* sub menu hover  */
.nav-dropdown.nav-dropdown-simple > li > a:hover {
    background-color: var(--primary-color);
    color: var(--white-color);
}
.nav-dropdown > li.nav-dropdown-col {
    display: block;
}
.nav-dropdown {
    border: 1px solid #ddd;
    padding: 0;
}
.nav-dropdown .nav-dropdown-col > a,
.nav-dropdown li a {
    font-weight: normal !important;
    text-transform: none !important;
    font-size: 15px;
    font-weight: 500;
}
.nav-dropdown .nav-dropdown-col > ul li:hover {
    background: var(--primary-color);
}
.nav-dropdown-default > li:hover > a,
.nav-dropdown .nav-dropdown-col > ul li:hover > a {
    color: white;
}
.nav-dropdown-default > li:hover {
    background: #008848;
}
.nav-dropdown-default > li > a {
    border-bottom: 0 !important;
}
.nav-dropdown-has-arrow li.has-dropdown:before {
    border-width: 10px;
    margin-left: -10px;
}
.nav-dropdown .nav-dropdown-col > ul {
    border: 1px solid #d2d2d2;
    margin-top: -40px;
    box-shadow: 2px 2px 5px #828282;
    display: none;
    position: absolute;
    left: 100%;
    z-index: 9;
    background: white;
    min-width: 240px;
}
.nav-dropdown > li.nav-dropdown-col {
    width: 100%;
    border-right: 0;
}
.nav-dropdown .nav-dropdown-col > ul li a {
    padding: 10px;
    text-transform: none;
    color: black;
}
.header-nav li.nav-dropdown-col:hover > ul {
    display: block !important;
}

:root {
    --primary-color: #049c4f;
    --secondary-color: #94b854;
    --black-color: #000;
    --white-color: #fff;
    --heading-color: #2c2c2c;
    --text-color: #444;
}

.section-heading-title {
    font-size: 32px;
}

.section-heading-title--small {
    font-size: 24px;
}

.banner h1 {
    font-size: 42px;
}

.wpcf7 label {
    color: var(--heading-color);
}

p {
    margin-bottom: 15px;
}

.breadcrumb-row {
    margin-bottom: 15px;
}
.breadcrumb-row .rank-math-breadcrumb {
    background-color: var(--primary-color);
    color: var(--white-color);
    padding: 4px 12px;
    border-radius: 4px;
}

.breadcrumb-row .rank-math-breadcrumb a {
    color: var(--white-color);
    transition: color 0.3s;
}

.breadcrumb-row .rank-math-breadcrumb a:hover {
    color: var(--black-color);
}

.breadcrumb-row .rank-math-breadcrumb p {
    margin-bottom: 0;
}

/***************************** FOOTER ******************************/
#footer .ux-menu .ux-menu-link {
    padding-bottom: 8px;
}

#footer .ux-menu .ux-menu-link__link {
    padding: 0;
    min-height: unset;
}

#footer .ux-menu .ux-menu-link__link:hover {
	color:var(--primary-color)
}

#footer .icon-box .icon-box-img {
    width: 16px !important;
}

#footer .icon-box .icon-box-text {
    padding-left: 10px;
}

/***************************** END FOOTER ******************************/

/***************************** END FOOTER ******************************/
.about-section .icon-box .icon-box-img {
    height: 150px;
    border-radius: 999px;
    overflow: hidden;
}

.about-section .icon-box .icon-box-img * {
    height: 100%;
}

.about-section .icon-box .icon-box-img img {
    object-fit: cover;
    padding-top: 0;
}

.cta-row > .col {
    flex-basis: 20%;
    max-width: 20%;
}

.cta-row .ux-menu .ux-menu-link__link {
    color: var(--primary-color);
}
.cta-row .ux-menu .ux-menu-link__link:hover {
    color: var(--text-color);
}

.cta-row .ux-menu .ux-menu-link__link::before {
    content:'\f111';
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    color: currentColor;
    font-size: 6px;
    position: relative;
    top: -4px;
    margin-right: 4px;
}

.cta-row > .col > .col-inner .heading-text {
    border-radius: 4px;
    background-color: var(--primary-color);
    color: var(--white-color);
    padding: 4px 12px;
    margin-bottom: 10px;
}
.cta-row > .col > .col-inner .heading-text p {
    margin-bottom: 0;
}

.cta-row > .col > .col-inner > .row > .col > .col-inner {
    padding: 10px 10px 10px 10px;
    border-radius: 4px;
    background-color: rgba(4, 156, 79, 0.1);
    min-height: 180px;
}

.cta-row .support-col > .col-inner {
    background: url(/wp-content/uploads/2023/12/bg_zalo.png) no-repeat center/95% auto;
    display: flex;
    padding-left: 40% !important;
    flex-direction: column;
    justify-content: center;
}

.cta-row .support-col > .col-inner p {
    margin: 0;
}

/***************************** END FOOTER ******************************/

/***************************** HOME ******************************/
.blog-posts-row {
    border: 1px solid var(--secondary-color);
    margin-bottom: 030px;
}

.blog-posts-row .heading-col {
    background: linear-gradient(to right, var(--primary-color), var(--secondary-color));
}

.blog-posts-row .box-blog-post .post-title a {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.blog-posts-row .box-blog-post .box-image {
    border: 1px solid #ccc;
}

.blog-posts-row .left-col {
    border-right: 1px solid #ccc;
}

.blog-posts-row .heading-col .section-heading-title--small {
    color: var(--white-color);
    margin: 0;
    padding: 6px 16px;
    font-size: 20px;
    font-weight: 500;
}

.blog-posts-row .left-col .box-blog-post .from_the_blog_excerpt {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.blog-posts-row .right-col .box-blog-post .post-title + .is-divider {
    display: none;
}

.blog-posts-row .right-col .box-blog-post .post-title a {
    font-size: 14px;
    font-weight: 500;
}

.blog-posts-row .right-col .box-blog-post .box-text {
    padding: 8px 10px;
}

#posting-form {
    border-radius: 4px;
}

#posting-form h3 {
    padding: 0 10px;
}

#posting-form .form-fields-wrapper{
    margin-bottom: 30px;
}

#posting-form .form-fields-wrapper .form-field-item {
    padding-bottom: 0 !important;
}

#posting-form form input,
#posting-form form select,
#posting-form form textarea {
    box-shadow: none;
    border-radius: 3px;
}

#posting-form form .wp-editor-tabs {
    float: left;
}

/***************************** END HOME ******************************/

/***************************** BLOG ARCHIVE ******************************/
.blog-archive .archive-page-header {
    display: none;
}

.blog-archive > .row > .large-9 .post-item > .col-inner {
    border-bottom: 1px dashed #ececec;
		padding-bottom:30px;
}

.blog-archive > .row > .large-9 .post-item .box-blog-post .box-image {

    border: 1px solid #ccc;
}

.blog-archive > .row > .large-9 .post-item .box-blog-post .post-title + .is-divider {
    display: none;
}

.blog-archive > .row > .large-9 .post-item .box-blog-post .post-title {
    margin-bottom: 8px;
}

.blog-archive > .row > .large-9 .post-item .box-blog-post .post-title a {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}
.blog-archive > .row > .large-9 .post-item .box-blog-post .from_the_blog_excerpt {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.blog-archive .nav-pagination {
    text-align: left;
    font-size: 1em;
}

.blog-archive .nav-pagination li .page-number {
    border-width: 1px;
    border-radius: 4px;
}

/***************************** END BLOG ARCHIVE ******************************/

/***************************** POST SIDEBAR ******************************/
.post-sidebar .widget .widget-title {
    display: block;
    width: 100%;
    padding: 10px 15px;
    background-color: var(--primary-color);
    border-radius: 4px;
    color: var(--white-color);
    margin-bottom: 8px;
}

.post-sidebar .widget .widget-title + .is-divider {
    display: none;
}

.post-sidebar .widget ul li {
    position: relative;
    padding-left: 28px;
}

.post-sidebar .widget ul li:after {
    content: '';
    position: absolute;
    left: 0;
    top: 8px;
    width: 20px;
    height: 20px;
    background: url(/wp-content/uploads/2023/12/checked.svg) no-repeat center/100% 100%;
}

/***************************** END POST SIDEBAR ******************************/

/***************************** BLOG SINGLE ******************************/
.blog-single .entry-header .entry-header-text {
    padding-bottom: 0;
}

.blog-single .related-post {
    border-top: 2px solid var(--primary-color);
    padding-top: 20px;
}
.blog-single .related-post ul li {
    margin-left: 20px;
}

.blog-single .related-post ul li::marker {
    color: var(--primary-color);
    font-size: 18px;
}
.blog-single .blog-share  {
	    border-top: 1px dashed #000;
    padding-top: 20px;
    margin-top: 40px;
}
/***************************** END BLOG SINGLE ******************************/

/***************************** TIN ĐĂNG ******************************/
.search-form-col > .col-inner {
    border: 1px solid #ccc;
    padding: 15px;
}

.search-form-col > .col-inner form {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-bottom: 0;
}

.search-form-col > .col-inner form select,
.search-form-col > .col-inner form input {
    min-width: 200px;
    flex: 1;
    width: auto;
    margin-bottom: 0;
    border-radius: 3px;
    box-shadow: none;
}

.search-form-col > .col-inner form button {
    margin: 0;
    flex: 1;
    width: auto;
    min-width: 120px;
    color: var(--white-color);
    text-transform: initial;
    font-weight: 500;
    border-radius: 3px;
    box-shadow: none;
}
.table-posts-col h3 {
    color: var(--white-color);
    background: linear-gradient(to right, var(--primary-color), var(--secondary-color));
    font-size: 18px;
    padding: 4px 16px;
    border-radius: 8px 8px 0 0;
    margin-bottom: 0;
}

.table-posts-col table #top td {
    color: var(--primary-color);
    font-weight: 600;
}

.table-posts-col table #top td {
    color: var(--primary-color);
    font-weight: 600;
}


.table-posts-col table td {
    padding: 5px;
    color: var(--text-color);
    text-align: center;
}

.table-posts-col table img {
    width: 80px;
    height: 60px;
    object-fit: cover;
}

.table-posts-col .page-numbers {
    text-align: left;
}
.table-posts-col .page-numbers > li {
    margin: 4px;
}

.table-posts-col .page-numbers .page-number {
    height: 32px;
    line-height: 32px;
    min-width: 32px;
    border-radius: 0px;
    border-width: 1px;
    font-weight: 500;
    cursor: pointer;
}

.page-numbers .page-arrow.disabled {
    cursor: not-allowed;
    opacity: 0.7;
    color: #ccc !important;
    background: transparent !important;
    border-color: #ccc !important;
    pointer-events: none;
}

/***************************** END TIN ĐĂNG ******************************/

/***************************** SINGLE TIN ĐĂNG ******************************/
.single-invest-post .content-wrapper > .col > .col-inner {
    border: 1px solid #ccc;
}

.single-invest-post .content-wrapper h1 {
    color: var(--white-color);
    background: linear-gradient(to right, var(--primary-color), var(--secondary-color));
    font-size: 24px;
    font-weight: 500;
    padding: 8px 16px;
    margin-bottom: 0;
}

.single-invest-post .content-wrapper .block-row {
    padding: 0 10px;
    margin: 20px 0 30px;
}

.single-invest-post .content-wrapper .block-title {
    font-weight: 500;
    font-size: 16px;
    color: var(--primary-color);
}

.single-invest-post .content-wrapper .block-row > .col:last-child > .col-inner {
    border: 1px solid #ccc;
    padding: 15px;
    font-size: 15px;
}

.single-invest-post .content-wrapper .block-row > .col:last-child > .col-inner p {
    margin-bottom: 8px;
}

.single-invest-post .content-wrapper .block-row > .col:last-child > .col-inner p span {
    font-weight: 600;
}

.single-invest-post .content-wrapper .block-contact-info {
    padding: 0 10px;
}

.single-invest-post .content-wrapper .block-contact-info h2 {
    color: var(--primary-color);
}

.single-invest-post .content-wrapper .block-contact-info form {
    margin-bottom: 0;
}

.single-invest-post .content-wrapper .block-contact-info form input,
.single-invest-post .content-wrapper .block-contact-info form textarea,
.single-invest-post .content-wrapper .block-contact-info form select {
    box-shadow: none;
    border-radius: 4px;
}

.single-invest-post .content-wrapper .block-contact-info form label {
    font-weight: 500;
    color: var(--heading-color-color);
    font-size: 15px;
}

.single-invest-post .content-wrapper .block-contact-info form label span {
    font-size: 12px;
    color: var(--text-color);
    width: 100%;
    display: block;
}

.single-invest-post .content-wrapper .block-contact-info form .wpcf7-submit {
    padding: 0 50px;
    margin: 0;
    font-weight: 500;
    text-transform: initial;
}

.table-wrapper {
	position:relative
}


.loader {
  position: absolute;
  top: calc(50% - 32px);
  left: calc(50% - 32px);
  width: 64px;
  height: 64px;
  border-radius: 50%;
  perspective: 800px;
	display:none
}

.inner {
  position: absolute;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  border-radius: 50%;  
}

.inner.one {
  left: 0%;
  top: 0%;
  animation: rotate-one 1s linear infinite;
  border-bottom: 3px solid var(--primary-color);
}

.inner.two {
  right: 0%;
  top: 0%;
  animation: rotate-two 1s linear infinite;
  border-right: 3px solid var(--primary-color);
}

.inner.three {
  right: 0%;
  bottom: 0%;
  animation: rotate-three 1s linear infinite;
  border-top: 3px solid var(--primary-color);
}

@keyframes rotate-one {
  0% {
    transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg);
  }
  100% {
    transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg);
  }
}

@keyframes rotate-two {
  0% {
    transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg);
  }
  100% {
    transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg);
  }
}

@keyframes rotate-three {
  0% {
    transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg);
  }
  100% {
    transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg);
  }
}


/***************************** END SINGLE TIN ĐĂNG ******************************/

@media only screen and (max-width: 1080px) {
    .cta-row > .col {
        flex-basis: 33.33%;
        max-width: 33.33%;
    }

    #masthead .header-nav .menu-item a {
        font-size: 14px;
    }
    #logo {
        width: 120px !important;
    }
}

@media only screen and (max-width: 960px) {
    #masthead .nav-spacing-medium>li {
        margin: 0 6px;
    }
}  
@media only screen and (max-width: 848px) {
    /*************** ADD MOBILE ONLY CSS HERE  ***************/
    .section-heading-title {
        font-size: 28px;
    }

    .section-heading-title--small {
        font-size: 20px;
    }

     .table-wrapper table {
        min-width: 848px;
    }

    .table-wrapper {
        overflow: auto;
    } 

    .cta-row > .col {
        flex-basis: 50%;
        max-width: 50%;
    }

    
    .banner h1 {
        font-size: 36px;
    }
}

@media only screen and (max-width: 549px) {
    /*************** ADD MOBILE ONLY CSS HERE  ***************/
    .section-heading-title {
        font-size: 24px;
    }

    .section-heading-title--small {
        font-size: 18px;
    }

    .cta-row > .col {
        flex-basis: 100%;
        max-width: 100%;
    }

    .banner h1 {
        font-size: 28px;
    }
}