/*
Theme Name:         Realtyspace Child
Theme URI:          http://themeforest.net/item/realtyspace-real-estate-wordpress-theme/15965811
Description:        Child theme for Realtyspace
Version:            1.1
Author:             Codefactory47
Author URI:         http://codefactory47.com/
License:            MIT License
License URI:        http://opensource.org/licenses/MIT
Text Domain:        realtyspace
Template:           realtyspace
*/
/* =========================================================
   PROJECT SECTION NAVIGATION
   ========================================================= */

/* =========================================================
   PROJECT SECTION NAVIGATION
   ========================================================= */

.project-section-nav {
    position: sticky;

    top: var(--project-nav-top, 0px);

    /*
     * Không full width nữa.
     * Menu sẽ nằm đúng theo container nội dung.
     */
    max-width: 1170px;
    width: calc(100% - 30px);

    margin-left: auto;
    margin-right: auto;

    background: #fff;

    border-bottom: 1px solid #e5e5e5;

    z-index: 100;

    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}


/* Container bên trong */

.project-section-nav__inner {
    width: 100%;
    margin: 0 auto;

    display: flex;
    align-items: center;

    overflow-x: auto;
    overflow-y: hidden;

    white-space: nowrap;

    scrollbar-width: none;

    min-height: 48px;
}

.project-section-nav__inner::-webkit-scrollbar {
    display: none;
}


/* Menu item */

.project-section-nav__item {
    position: relative;

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

    height: 48px;

    padding: 0 17px;

    color: #4a4a4a;

    text-decoration: none;

    font-size: 14px;
    font-weight: 500;

    line-height: 1;

    white-space: nowrap;

    transition:
        color 0.2s ease,
        background-color 0.2s ease;
}


/* Hover */

.project-section-nav__item:hover,
.project-section-nav__item:focus {
    text-decoration: none;
    color: #00b3aa;
}


/* Active */

.project-section-nav__item.active {
    color: #00b3aa;
    font-weight: 600;
}

.project-section-nav__item.active::after {
    content: "";

    position: absolute;

    left: 17px;
    right: 17px;
    bottom: 0;

    height: 3px;

    background: #00b3aa;

    border-radius: 2px 2px 0 0;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {

    .project-section-nav {
        width: 100%;
        max-width: none;

        border-radius: 0;
    }

    .project-section-nav__inner {
        min-height: 46px;
    }

    .project-section-nav__item {
        height: 46px;
        padding: 0 14px;
        font-size: 13px;
    }

    .project-section-nav__item.active::after {
        left: 14px;
        right: 14px;
    }
}.project-section-nav__inner::-webkit-scrollbar {
    display: none;
}


/* =========================================================
   MENU ITEM
   ========================================================= */

.project-section-nav__item {
    position: relative;

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

    /*
     * Giảm chiều cao so với phiên bản trước
     */
    height: 50px;

    /*
     * Khoảng cách giữa các mục
     */
    padding: 0 17px;

    color: #4a4a4a;

    text-decoration: none;

    font-size: 14px;
    font-weight: 500;

    line-height: 1;

    /*
     * Không cho text xuống dòng
     */
    white-space: nowrap;

    transition:
        color 0.2s ease,
        background-color 0.2s ease;
}


/* Không để theme gốc thêm hiệu ứng link */

.project-section-nav__item:hover,
.project-section-nav__item:focus {
    text-decoration: none;
    color: #00b3aa;
}


/* =========================================================
   ACTIVE ITEM
   ========================================================= */

.project-section-nav__item.active {
    color: #00b3aa;

    font-weight: 600;
}


/*
 * Đường active nhỏ và tinh tế
 */

.project-section-nav__item.active::after {
    content: "";

    position: absolute;

    left: 17px;
    right: 17px;
    bottom: 0;

    height: 3px;

    background: #00b3aa;

    border-radius: 2px 2px 0 0;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {

    .project-section-nav__inner {
        min-height: 46px;

        /*
         * Trên mobile menu bắt đầu từ trái
         */
        margin: 0;
    }

    .project-section-nav__item {

        height: 46px;

        padding: 0 14px;

        font-size: 13px;
    }

    .project-section-nav__item.active::after {
        left: 14px;
        right: 14px;
    }

}


/* =========================================================
   REALTYSPACE HEADER
   ========================================================= */

/*
 * Header chính phải luôn nằm trên Project Navigation
 */
#header-nav {
    z-index: 1000;
}

.project-section-nav {
    height: 33px !important;
    min-height: 33px !important;
    max-height: 33px !important;

    padding-top: 0 !important;
    padding-bottom: 0 !important;

    box-sizing: border-box !important;
}

.project-section-nav__inner {
    height: 33px !important;
    min-height: 33px !important;
    max-height: 33px !important;

    padding-top: 0 !important;
    padding-bottom: 0 !important;

    box-sizing: border-box !important;
}

.project-section-nav__item {
    height: 33px !important;
    min-height: 33px !important;
    max-height: 33px !important;

    padding-top: 0 !important;
    padding-bottom: 0 !important;

    box-sizing: border-box !important;
}