@charset "UTF-8";
* Author URI: http: / / trecreat.com / *
/*=================================
=            1. GLOBAL            =
=================================*/


/*==========  Font  ==========*/

@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400,600,700,900,200italic,300italic,400italic,600italic,700italic,900italic&subset=latin,vietnamese,latin-ext);

/*==========  Basic  ==========*/

body {
    font-family: "Roboto", serif;
    font-style: normal;
    font-weight: 300;
    color: #363636;
    text-shadow: none;
    -webkit-font-smoothing: antialiased;
    font-smooth: antialiased;
}

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
    font-family: "Roboto", serif;
    font-weight: 700;
}

p {
    margin: 0 0 20px !important;
}

a {
    color: #363636;
    /*-webkit-transition: all .2s ease-in-out;
     -moz-transition: all .2s ease-in-out;
    -ms-transition: all .2s ease-in-out;     
     -o-transition: all .2s ease-in-out;
          transition: all .2s ease-in-out;*/
}

a:hover,
a:focus {
    color: #ed1c24;
    text-decoration: none;
}

form .row {
    margin-bottom: 30px;
}

label {
    font-weight: 400;
    color: #545454;
}

label .form-required {
    font-size: 14px;
    color: #ed1c24;
}

.form-control {
    height: 25px;
    font-size: 12px;
    color: #363636;
    /* background: #f4f4f4 !important; */
    border-color: #c7c7c7 !important;
    border-radius: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
    -webkit-transition: all ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
    transition: all ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
}

.form-control:focus {
    background: #e9e9e9 !important;
    border-color: #d2d2d2;
    outline: 0;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
}

textarea.form-control {
    max-width: 100%;
}

.btn {
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
}

.carousel {
    margin-bottom: 30px;
}

.carousel-indicators {
    bottom: 0;
}

.carousel-indicators li {
    width: 8px;
    height: 8px;
}

.carousel-indicators .active {
    width: 10px;
    height: 10px;
}


/*.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
  width: 100%;
}*/

.logo {
    color: #464646 !important;
    height: auto !important;
}

.logo>.point {
    color: #ed1c24;
}

#exhibition .item {
    -webkit-transition: opacity 1s;
    -moz-transition: opacity 1s;
    -ms-transition: opacity 1s;
    -o-transition: opacity 1s;
    transition: opacity 1s;
}

#exhibition .active.left,
#exhibition .active.right {
    left: 0;
    opacity: 0;
    z-index: 2;
}

#exhibition .next,
#exhibition .prev {
    left: 0;
    opacity: 1;
    z-index: 1;
}


/*==========  Intro  ==========*/

#intro {
    width: 500px;
    height: auto;
    position: fixed;
    top: 0;
    left: 0;
    margin: 0;
    padding: 10px 44px 15px;
    background: rgba(255, 255, 255, .7);
    font-size: 12px;
    z-index: 999;
}

#intro hr {
    border-color: #858585;
    margin: 13px 0;
}

#intro p {
    margin: 0 !important;
    line-height: normal;
}

#intro .logo {
    font-size: 30px;
    color: #262626;
}

#intro a.title {
    font-size: 15px;
    text-transform: uppercase;
    color: #000000;
}

#intro a.title:hover,
#intro a.title:focus {
    color: #ed1c24;
}


/*==========  Header  ==========*/

@media (min-width: 768px) {
    .container {
        padding: 0;
    }
    .navbar-collapse {
        width: 100%;
        padding-left: 0;
    }
    body>header {
        min-height: 20px !important;
        margin-top: 60px;
        margin-bottom: 50px !important;
        border: none !important;
    }
    body>header .logo {
        font-size: 35px;
    }
    body>header .navbar-brand {
        padding: 0 0 0 15px;
    }
    body>header .navbar-nav>li>a {
        padding: 0;
        line-height: normal;
        font-size: 15px;
        color: #555555;
    }
    body>header .main-menu {
        margin-top: 8px;
    }
    body>header .main-menu>li:not(:first-child) {
        margin-left: 20px;
    }
    body>header .main-menu>li:not(:last-child) {
        margin-right: 20px;
    }
    body>header .lang-menu {
        margin-top: 10px;
        margin-right: 0 !important;
    }
    body>header .lang-menu>li>a {
        padding: 0 10px;
    }
    body>header .lang-menu>li:first-child>a {
        padding-left: 0;
    }
    body>header .lang-menu>li:last-child>a {
        padding-right: 0;
    }
    body>header .lang-menu>li:not(:last-child)>a {
        border-right: 1px solid #555555;
    }
    body>header .lang-menu>li>a {
        font-size: 12px;
    }
    body>header .dropdown-menu {
        position: fixed;
        top: 180px;
        /* left: 0; */
        margin: 0;
        padding: 0;
        background: none;
        border: none;
        border-radius: 0;
        -webkit-box-shadow: none;
        box-shadow: none;
    }
    body>header .dropdown-menu>li>a {
        padding: 3px 0;
        color: #555555 !important;
    }
    body>header .dropdown-submenu {
        position: relative;
    }
    body>header .dropdown-submenu>.dropdown-menu {
        position: absolute;
        top: 0;
        left: 100%;
        margin: 0;
        padding: 0 15px;
        display: none;
    }
    body>header .dropdown-submenu.open>.dropdown-menu {
        display: block;
    }
    body>header .dropdown-submenu.pull-left {
        float: none
    }
    body>header .dropdown-submenu.pull-left>.dropdown-menu {
        left: -100%;
        margin-left: 10px;
    }
    body>header .dropdown-submenu .dropdown-menu>li {
        line-height: normal;
    }
    body>header .dropdown-submenu .dropdown-menu>li:not(:last-child)>a {
        margin: 0 0 5px;
    }
}

body>header {
    background: none !important;
}

body>header .main-menu>li>a,
body>header .main-menu>li>.dropdown-menu>li>a {
    text-transform: uppercase;
}

body>header .dropdown-menu>li>a {
    white-space: normal;
}

body>header .main-menu>li>a:hover,
body>header .main-menu>li>a:focus,
body>header .main-menu>.active>a,
body>header .main-menu>.active>a:hover,
body>header .main-menu>.active>a:focus,
body>header .main-menu>.parent>a,
body>header .main-menu>.parent>a:hover,
body>header .main-menu>.parent>a:focus,
body>header .main-menu>.has_active>a,
body>header .main-menu>.has_active>a:hover,
body>header .main-menu>.has_active>a:focus,
body>header .main-menu>.dropdown.open>a,
body>header .main-menu>.dropdown.open>a:hover,
body>header .main-menu>.dropdown.open>a:focus {
    /*font-weight: 400;*/
    color: #ed1c24 !important;
    background: none !important;
}

body>header .lang-menu>li>a:hover,
body>header .lang-menu>li>a:focus,
body>header .lang-menu>.active>a,
body>header .lang-menu>.active>a:hover,
body>header .lang-menu>.active>a:focus {
    color: #363636 !important;
    background: none !important;
}

body>header .lang-menu>.active>a>.point,
body>header .lang-menu>.active>a:hover>.point,
body>header .lang-menu>.active>a:focus>.point {
    color: #ed1c24 !important;
}


/*body > header .nav .open > a,
body > header .nav .open > a:hover,
body > header .nav .open > a:focus {
  background: none !important;
  border-color: none !important;
}*/

body>header .dropdown-menu {
    min-width: 120px;
}

body>header .dropdown-submenu .dropdown-menu {
    border-left: 1px solid #999999;
    font-size: 12px;
    margin: 0;
}

body>header .dropdown-menu>li>a {
    font-weight: 300 !important;
    color: #555555 !important;
}

body>header .dropdown-menu>li>a:hover,
body>header .dropdown-menu>li>a:focus,
body>header .dropdown-menu>.active>a,
body>header .dropdown-menu>.active>a:hover,
body>header .dropdown-menu>.has_active>a,
body>header .dropdown-menu>.has_active>a:hover,
body>header .dropdown-menu>.has_active>a:focus,
body>header .navbar-nav>.dropdown>.dropdown-menu>.active>a:focus {
    color: #ed1c24 !important;
    background: none !important;
}

body>header .dropdown-submenu.open>a,
body>header .dropdown-submenu.open>a:hover,
body>header .dropdown-submenu.open>a:focus {
    background: none;
    border: none;
    color: #ed1c24 !important;
}

body>header .dropdown-submenu .dropdown-menu>li>a {
    padding: 0;
    line-height: normal;
}


/*==========  Main  ==========*/

#main {
    margin-bottom: 60px;
}

#main .overlay {
    width: 100%;
    height: auto;
    position: relative;
    top: 0;
    left: 0;
    margin: 0;
    padding: 0;
    opacity: 1;
    display: none;
}

#main .overlay.show {
    display: block;
}

#main .title,
#main .title a {
    margin-bottom: 30px;
    font-size: 15px;
    color: #555555;
    /*text-transform: uppercase;*/
}

#main .title.work,
#main .title.work a {
    color: #000000;
}

#main .link {
    font-size: 12px;
}

#main .link .logo img {
    border: 1px solid #ededed;
}

#main .link a.thumbnail {
    border-color: #e9e9e9;
    padding: 0;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
}

#main .link:hover a.thumbnail,
#main .link:focus a.thumbnail,
#main .link a.thumbnail:hover,
#main .link a.thumbnail:focus {
    border-color: #c7c7c7;
}

#main .link a.thumbnail>img {
    vertical-align: middle;
}

#main .link:hover .desc a,
#main .link:focus .desc a {
    color: #ed1c24;
}

#main .link .desc {
    height: 35px;
    margin: 5px 0;
    overflow: hidden;
}

#main .link-separator {
    margin: 30px 0;
}

#main .content {}

#main .list .year {
    margin: 0 0 5px !important;
    font-weight: 400;
}

#main .list .list-unstyled {
    padding-bottom: 15px;
    border-bottom: 1px solid #eeeeee;
}

#main .list .list-unstyled>.active>a,
#main .list .list-unstyled>.active>a:hover,
#main .list .list-unstyled>.active>a:focus {
    color: #ed1c24;
}

#main .work-thumb-holder {
    margin-right: 0;
}

#main .work-thumb {
    padding-bottom: 15px;
    padding-right: 0;
}

#main .work-thumb img {
    cursor: pointer;
    /*-webkit-backface-visibility: hidden;*/
    /*-webkit-filter: grayscale(100%);*/
    /*-moz-filter: grayscale(100%);*/
    /*-ms-filter: grayscale(100%);*/
    /*-o-filter: grayscale(100%);*/
    /*filter: grayscale(100%);*/
    /*filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");*/
    /*filter: gray;*/
    -webkit-transition: all .25s ease-in-out;
    -moz-transition: all .25s ease-in-out;
    -ms-transition: all .25s ease-in-out;
    -o-transition: all .25s ease-in-out;
    transition: all .25s ease-in-out;
}

#main .work-thumb:hover img,
#main .work-thumb:focus img,
#main .work-thumb.active img,
#main .work-thumb.active:hover img,
#main .work-thumb.active:focus img {
    -webkit-filter: grayscale(0%);
    -moz-filter: grayscale(0%);
    -ms-filter: grayscale(0%);
    -o-filter: grayscale(0%);
    filter: grayscale(0%);
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
    filter: none;
}

#main .work-thumb img,
#main .work-full img {
    /*width: 100%;*/
    margin: 0 auto;
    float: none;
}

#main .work-title,
#main .work-desc {
    margin: 0 !important;
}

#main .work-desc {
    color: #555555;
    font-size: 12px;
}

#main .work-info {
    margin-top: 20px;
    /*position: absolute;
    bottom: 0;*/
}

#main .download {
    font-size: 12px;
}

#main .content hr {
    margin: 15px 0 !important;
}

#exhibition {}

#exhibition .carousel-inner>.item>img,
#exhibition .carousel-inner>.item>a>img {
    /*display: block;
    height: auto;
    max-width: 100%;
    line-height: 1;*/
    width: 100%;
    height: auto;
}

#exhibition .carousel-control {
    top: auto;
    bottom: 5px;
    background: none;
    width: 5%;
    height: auto;
    opacity: .5;
    filter: alpha(opacity=50);
}

#exhibition .carousel-control:hover,
#exhibition .carousel-control:focus {
    /*color: #ed1c24;*/
    opacity: 1;
    filter: alpha(opacity=100);
}

#exhibition .carousel-control.right {
    left: 0;
    right: auto;
    margin-left: 35px;
}

#work-gallery {
    min-height: 200px;
    margin-right: 40px;
}

#work-gallery .carousel-control {
    top: 100%;
    bottom: 0;
    color: #555555;
    text-shadow: none;
    opacity: 1;
    filter: alpha(opacity=100);
    background: none;
    width: 2%;
}

#work-gallery .carousel-control:hover,
#work-gallery .carousel-control:focus {
    color: #ed1c24;
    opacity: 1;
    filter: alpha(opacity=100);
}

#work-gallery .carousel-control.left {
    right: 0;
    left: auto;
    margin-right: 35px;
}


/*==========  Footer  ==========*/

body>footer {
    font-size: 12px;
    color: #707070;
}

body>footer .container {
    padding-top: 10px;
    border-top: 1px solid #cccccc;
}

body>footer .social {
    height: 28px;
    margin: 4px 0 0 20px;
    padding: 0 0 0 20px;
    border-left: 1px solid #cccccc;
}

@media (min-width: 768px) {
    body>footer .container {}
}


/*-----  End of 1. GLOBAL  ------*/


/*================================
=            2. LARGE            =
================================*/

.home-category-products img {
    max-width: 100%;
}

.home-category-products .item {
    margin-bottom: 80px;
    text-align: center;
}

.max-image img {
    max-width: 100%;
}

.max-image {
    text-align: center;
}

@media (min-width: 1920px) {
    .container {
        max-width: 1400px !important;
        width: 1400px !important;
    }
}

@media (min-width: 1200px) {
    .container {
        /*max-width: 1024px !important;*/
    }
    .sticky-position {
        position: sticky;
        top: 0;
    }
    body>header .navbar-nav>.dropdown>.dropdown-menu>.dropdown-submenu>.dropdown-menu {
        width: 480px;
        max-height: 410px;
        overflow: auto;
    }
    h3.title {}
}

@media (max-width: 1024px) {
    .content {
        max-width: 100%;
    }
    .content img {
        max-width: 100%;
        /*height: auto!important;*/
    }
    .content-content img {
        height: auto!important;
    }
}


/*-----  End of 2. LARGE  ------*/


/*=================================
=            3. MEDIUM            =
=================================*/

@media (min-width: 992px) and (max-width: 1199px) {
    .container {
        max-width: 980px !important;
    }
    body>header .dropdown-submenu .dropdown-menu {
        width: 455px;
        max-height: 390px;
        overflow: auto;
    }
}


/*-----  End of 3. MEDIUM  ------*/


/*================================
=            4. SMALL            =
================================*/

@media (min-width: 768px) and (max-width: 991px) {
    body>header {
        min-height: 20px !important;
        margin-top: 30px;
        margin-bottom: 25px !important;
    }
    body>header .logo {
        font-size: 28px;
    }
    body>header .navbar-brand {
        padding: 0 35px 0 15px;
    }
    body>header .main-menu>li:not(:first-child) {
        margin-left: 10px;
    }
    body>header .main-menu>li:not(:last-child) {
        margin-right: 10px;
    }
    body>header .main-menu>li>a {
        font-size: 13px;
    }
    body>header .dropdown-menu {
        top: 110px;
        font-size: 12px;
    }
    body>header .dropdown-submenu>.dropdown-menu {
        width: 335px;
        max-height: 280px;
        overflow: auto;
    }
    #main {
        margin-bottom: 60px;
    }
}


/*-----  End of 4. SMALL  ------*/


/*======================================
=            5. EXTRA SMALL            =
======================================*/

@media (max-width: 767px) {
    .nav-content-product .item .image .img img {
        width: 100%;
        height: 340px;
        object-fit: cover;
    }
    aside.menu {
        margin-top: 20px!important;
    }
    .thongtin h3 {
        font-size: 20px;
    }
    .aside-menu {
        margin: 20px 0!important;
    }
    .nav-content-product .item .nav-image .title a {
        margin-top: 10px;
        font-size: 13px !important;
        line-height: 23px;
        margin-bottom: 0px;
        margin-top: 10px;
        overflow: hidden;
        text-overflow: ellipsis;
        -webkit-line-clamp: 2;
        height: 44px;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        text-transform: unset !important;
    }
    #intro {
        width: 100%;
    }
    body>header .logo {
        font-size: 20px;
    }
    body>header .navbar-brand {
        padding: 15px 0;
    }
    body>header .navbar-toggle {
        margin-right: 0;
        -webkit-border-radius: 0;
        -moz-border-radius: 0;
        border-radius: 0;
    }
    #main {
        margin-bottom: 50px;
    }
    #main .work-thumb img {
        -webkit-filter: none;
        -moz-filter: none;
        filter: none;
    }
    #main #left {
        height: 100% !important;
    }
    #main .work-info {
        position: relative !important;
    }
    #main .overlay,
    #main .overlay.show {
        display: none !important;
    }
    #main .row,
    #main .row.hide {
        display: block !important;
    }
}

.nav>li>a {
    position: relative;
    display: block;
    padding: 10px 12px;
}

.navbar-nav {
    margin-top: 15px;
}

.socials li a i:before {
    font-family: 'Font Awesome 5 Brands';
    font-style: normal;
}

.socials ul {
    list-style: none;
    padding: 0;
    overflow: hidden;
}

.socials ul li {
    display: inline-block;
    margin-right: 10px;
}

.socials ul li a {
    width: 30px;
    height: 30px;
    display: inline-block;
    background: #e7e7e7;
    text-align: center;
    line-height: 30px;
    border-radius: 50%;
}

.socials ul li i {
    font-size: 14px;
    /* color: #fff; */
}

.menu {
    overflow: hidden;
}

.socials {
    margin-top: 10px;
}

.socials li.fb a {
    /* background: #0866ff; */
}

.socials li.yt a {
    /* background: red; */
}

.socials li.in a {
    /* background: #e8046b; */
}

.socials li.pin a {
    /* background: #e11e1e; */
}

.brandname {
    font-size: 34px;
    font-weight: 300;
    margin-top: 0;
    line-height: unset;
}

.aside-content-right {
    margin-top: 50px;
}

aside.menu {
    margin-top: 45px;
}

.aside-menu ul {
    padding: 0;
    list-style: none;
}

.aside-menu .menu-child {
    max-width: 100%;
    flex-basis: 100%;
    width: 100%;
    padding-left: 10px;
    margin: 5px 1px 10px 1px;
    border-radius: 5px;
    background: #f5f5f5c2;
    box-shadow: rgba(0, 0, 0, 0.15) 0px 5px 15px 0px;
    display: none;
}

.aside-menu ul a {
    font-size: 16px;
    padding: 5px 0;
    display: block;
}

.aside-menu .submenu.has-dropdown {
    display: flex;
    flex-wrap: wrap;
}

.aside-menu .submenu:hover>a,
.aside-menu .submenu:hover>.open-menu i {
    color: #ed1c24;
}

.aside-menu .submenu.has-dropdown>.open-menu {
    position: relative;
    top: 7px;
    width: 20px;
    height: 20px;
    display: inline-block;
    text-align: center;
    margin-left: 5px;
    cursor: pointer;
    transition: 0.4s;
    /* background: #353535; */
}

.aside-menu .submenu.has-dropdown>.open-menu.rotate {
    transform: rotate(-180deg);
    transition: 0.4s;
}

.aside-menu {
    margin: 50px 0;
}

.image img {
    max-width: 100%;
}

.hover-zoom:hover img {
    transform: scale(1.1);
    transition: 0.4s;
}

.hover-zoom {
    overflow: hidden;
}

.hover-zoom img {
    transition: 0.4s;
}

.category-product-page .masonry {
    -moz-column-width: 17em;
    -webkit-column-width: 17em;
    column-width: 17em;
    -moz-column-gap: 2em;
    -webkit-column-gap: 2em;
    column-gap: 2em;
}

.category-product-page .item {
    display: inline-block;
    padding: .25rem;
    width: 100%;
}

.category-product-page .well {
    position: relative;
    display: block;
    padding: 0;
    background: transparent;
    border: unset;
}

.category-product-page .well .title a {
    font-weight: 500;
    font-size: 16px;
}

.category-product-page .item {
    margin-bottom: 30px;
}

.category-product-page .well .title {
    margin: 5px 0 0 0;
}

.page-products .work-thumb {
    margin-bottom: 70px;
}

.page-title {
    font-size: 21px;
    margin-bottom: 14px;
    text-transform: uppercase;
}

.row-custom {
    /* margin-left: -10px; */
    /* margin-right: -10px; */
}

.row-custom>div {
    /* padding-left: 10px; */
    /* padding-right: 10px; */
}

.articles-catalogue-page .item {
    margin-bottom: 15px;
}

.nav-content-product .item .nav-image .title a {
    color: #333;
}

.nav-content-product .item .nav-image .title a:hover {
    color: #ed1c24;
}

.contact-page form.form-ays input,
.contact-page form.form-ays textarea {
    background: transparent;
    border: 1px solid #ddd;
    border-radius: 5px;
}

.contact-page form.form-ays input {
    height: 35px;
}

.contact-page form.form-ays textarea {}

.nav-content-product .item .image .img img {
    width: 100%;
    height: 260px;
    object-fit: cover;
}

.nav-content-product .item .nav-image .title a {
    margin-top: 10px;
    font-size: 14px !important;
    line-height: 23px;
    margin-bottom: 10px !important;
    margin-top: 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    height: 44px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    text-transform: unset !important;
}

.nav-content-product .item .nav-image .title:hover a {
    /* color: #0937f8 !important; */
}

.nav-content-product .item {
    border-bottom: 1px solid #d6d6d6a1;
    box-shadow: 0px 0px 20px 0px #d6d6d6;
    margin-bottom: 30px;
}

.nav-content-product .item .nav-image .title {
    margin-bottom: 12px !important;
    padding: 0px 10px;
    font-weight: 600;
    margin-top: 0;
}


/*-----  End of 5. EXTRA SMALL  ------*/