/*================================responsive=================================*/
@media screen and (min-width: 1260px) {
    .container {
        width: 1260px;
        padding: 0 35px;
    }
}

@media screen and (max-width: 1259px) {
    #menu > li > a {
        padding: 0 20px;
    }
}

@media screen and (max-width: 1199px) {
    .product-box {
        height: auto;
        width: auto;
    }

    .slider-box::before {
        background: none;
    }

    #banner-product::before {
        height: 100%;
    }

    .bg-map > img {
        width: 100%;
    }

    .bg-map {
        height: auto;
        margin-left: 10px;
        vertical-align: top;
        width: 50%;
    }

    .contact-info {
        width: 320px;
    }
}

@media (min-width: 993px) and (max-width: 1199px) {
    #menu > li > a {
        font-size: 15px;
        padding: 0 15px;
    }

    #header .logo {
        top: 10px;
    }

    .product-content p {
        font-size: 14px;
    }

    .img-responsive, .thumbnail > img, .thumbnail a > img, .carousel-inner > .item > img, .carousel-inner > .item > a > img {
        max-width: 70%;
    }

    .note-bg {
        background: rgba(0, 0, 0, 0) url("../images/note-2.png") no-repeat scroll 0 0;
        width: 420px;
        height: 115px !important;
        bottom: 0;
        opacity: 0.8;
        position: absolute;
        z-index: 9;
    }

    .note p {
        font-size: 14px;
    }

    .note h2 {
        font-size: 18px;
    }

    .note {
        padding: 0 0 0 10px;
        width: 370px;
    }

    .add-mail span {
        font-size: 22px;
    }
}

@media (max-width: 992px) {
    #header .logo {
        float: left;
        top: 0;
        position: relative;
        margin: 8px 0;
        width: 90px;
    }

    .navbar-header {
        float: none;
    }

    .header-right {
        margin: 10px 0;
    }

    #menu {
        float: none;
        margin: 0;
        padding: 0;
        width: 100%;
    }

        #menu > li > a {
            font-size: 14px;
            padding: 0 12px;
        }

    .home img {
        display: none;
    }

    .navbar-header, .navbar-collapse {
        width: auto;
    }

    .header-bgr {
        width: 100%;
    }

    .add-mail span {
        text-align: left;
        white-space: nowrap;
    }

    .box-left {
        display: inline-block;
        margin-right: 0;
        vertical-align: top;
        width: 100%;
    }

    .box-right {
        display: inline-block;
        width: 100%;
        margin-top: 20px;
    }

    #banner-product::before {
        height: 100%;
    }

    .address-contact {
        margin-bottom: 20px;
    }

    .bg-map {
        margin-left: 0;
        width: 46%;
    }
}

@media screen and (max-width: 991px) {
    header .col-md-3 {
        width: 35%;
        display: inline-block;
        transition: all 0.5s ease;
    }

    header .col-md-9 {
        display: inline-block;
        float: right;
        width: 60%;
        transition: all 0.5s ease;
    }

    .navbar-brand {
        margin-left: -4px !important;
    }

    nav {
        width: 100%;
        transition: all 0.5s ease;
    }

    .nav > li > a {
        font-size: 14px;
        padding: 0 20px;
        transition: all 0.5s ease;
    }

    #popSite .nav-tabs > li > a {
        padding: 15px 20px;
    }

    .note-bg {
        background: rgba(0, 0, 0, 0) url("../images/note-2.png") no-repeat scroll 0 0;
        width: 420px;
        height: 115px;
        bottom: 0;
        opacity: 0.8;
        position: absolute;
        z-index: 9;
    }

    .note p {
        font-size: 14px;
    }

    .note h2 {
        font-size: 18px;
    }

    .note {
        padding: 0 0 0 10px;
        width: 370px;
    }
    /*.note-bg2 a {
        padding:20px 0;
    }*/
    .img-responsive, .thumbnail > img, .thumbnail a > img, .carousel-inner > .item > img, .carousel-inner > .item > a > img {
        max-width: 100%;
    }

    .hdnb-content > img {
        margin: 20px 0;
    }

    .template-text {
        width: 100%;
        margin: 0 0 20px 0;
    }

    .template-right .template-text {
        margin-right: 0;
    }

    .template-left .template-text {
        margin-left: 0;
    }

    .template-img {
        width: 100%;
        margin-top: 20px;
    }

    .wrapper-news h1 {
        font-size: 25px;
    }

    .list-news .item {
        width: 100%;
    }

    .gallery-slider {
        width: 100%;
    }

    .product-main .item {
        width: calc(33.333% - 4px);
    }

    .form-img {
        display: block;
        width: 100%;
        margin-top: 20px;
    }

        .form-img > img {
            display: block;
            margin: 0 auto 20px;
            max-width: 100%;
            width: auto;
        }

    .year:nth-of-type(2n+1) .evt:nth-of-type(2n) .in::after, .year:nth-of-type(2n+1) .evt:nth-of-type(2n+1) .in::after, .year:nth-of-type(2n) .evt:nth-of-type(2n+1) .in::after, .year:nth-of-type(2n) .evt:nth-of-type(2n) .in::after {
        background-size: 100%;
        width: 100%;
        left: 0;
    }
}

@media screen and (max-width: 820px) {
    .note-bg {
        background: #fff none repeat scroll 0 0;
    }

    .note-bg2 {
        background: #919693 none repeat scroll 0 0;
        padding: 10px;
        text-align: center;
    }

    .note-bg, .note-bg2 {
        height: auto;
        position: relative;
        width: 100%;
    }

    .nivo-controlNav {
        display: none;
    }

    .note-bg {
        left: 0;
    }

    .slick-dots {
        display: none !important;
    }
}
/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 992px) {
    .product-cat {
        margin: 0 auto;
        width: 590px;
    }

        .product-cat .product-box {
            margin: 15px auto;
            width: 280px;
            height: 280px;
        }

    header {
        height: auto;
    }

    .add-mail {
        margin-bottom: 10px;
    }

    .tp-bullets {
        display: none;
    }

    .qtpt-main::after {
        right: 0;
    }
}

@media screen and (max-width: 767px) {
    header {
        height: auto;
    }

        header .col-md-3 {
            width: 35%;
            display: inline-block;
            transition: all 0.5s ease;
        }

        header .col-md-9 {
            display: inline-block;
            float: right;
            width: 60%;
            transition: all 0.5s ease;
        }

    .product-box {
        height: 250px;
        width: 250px;
    }

    .dropdown-menu > li {
        padding-left: 25px;
    }

    nav {
        width: 100%;
        transition: all 0.5s ease;
    }

    .news h3 {
        float: none;
        text-align: center;
    }

    .pager {
        text-align: center;
        float: none;
    }

        .pager span {
            padding: 0 5px;
        }

    .navbar-brand {
        border-right: 0;
        height: 50px;
        margin-left: 0 !important;
        padding: 10px 0 0;
        width: 50px;
    }

        .navbar-brand img {
            margin: 0 auto;
        }

    .product-box img {
        width: 100%;
    }

    .pad-0 {
        padding: 0 15px;
    }

    .pad-10 {
        padding: 0 15px;
    }

    .add-mail {
        margin-bottom: 10px;
        text-align: center;
    }

    .follow-img {
        text-align: center;
    }

    footer {
        margin: 0 auto;
    }

    #menu {
        background-color: #fff;
    }

        #menu > li {
            border-bottom: solid 1px #ccc;
        }

        #menu li li {
            padding: 0;
        }

        #menu li ul {
            padding: 0;
        }

        #menu li li a {
            padding: 4px 15px;
        }

        #menu > li > a {
            border: none;
            color: #434343;
        }

            #menu > li > a:hover, #menu > li > a:focus, #menu > .active > a {
                color: #fff;
            }

    .navbar-collapse {
        width: auto;
    }

    .header-right .search-form {
        display: none;
    }

    .navbar-collapse .search-form {
        display: block;
    }

    .navbar-header {
        padding: 0 15px;
    }

    .header-right {
        height: auto;
    }

    .languge {
        padding-right: 10px;
        margin-top: 10px;
    }

    .note-bg, .note-bg2 {
        height: auto;
        position: relative;
        width: 100%;
    }

    .note-bg {
        background: #fff;
    }

    .note h2 {
        margin: 0;
        font-size: 18px;
        line-height: 30px;
    }

    .note-bg2 {
        background: #919693;
        padding: 10px;
        text-align: center;
    }

    .note {
        padding: 10px;
        width: auto;
    }

    .nivo-controlNav {
        display: none;
    }

    .header-bgr {
        display: none;
    }

    .add-mail {
        text-align: left;
    }

        .add-mail span {
            text-align: left;
            line-height: 30px;
        }

    .newsinvolve {
        column-count: 1;
        -moz-column-count: 1;
    }

    .form-main {
        width: 100%;
    }

    .form-input {
        width: 490px;
    }

    .evt:nth-child(2n+1) .in {
        float: right;
    }

    .year:nth-of-type(2n+1) .evt:nth-of-type(2n+1) .in::before {
        background: url(../images/icon-timeline5.png) no-repeat;
        position: absolute;
        content: "";
        width: 23px;
        height: 54px;
        top: 30px;
        left: -22px;
    }

    .year:nth-of-type(2n) .evt:nth-of-type(2n+1) .in::before {
        background: url(../images/icon-timeline6.png) no-repeat;
        position: absolute;
        content: "";
        width: 23px;
        height: 54px;
        top: 30px;
        left: -22px;
    }

    .year-time {
        left: 0;
    }

    .timeline::before {
        left: 28px;
    }

    .year .in {
        width: 88%;
    }

    .evt {
        margin-bottom: 55px;
    }

    .qtpt-main::after {
        right: 0;
    }

    .qtpt-main {
        padding-bottom: 160px;
    }

        .qtpt-main::after {
            background-size: 80%;
            background-position: bottom;
        }
}

@media screen and (max-width: 720px) {
    .form-input {
        width: 60%;
    }

    .form-textbox {
        width: 100%;
    }
}

@media screen and (max-width: 670px) {
    .contact-bg {
        padding: 10px;
    }

    .text-banner {
        bottom: 20px;
    }

    .popup .popup-dangky {
        padding: 30px 50px;
        width: 95%;
    }
    /**/
    #popSite .nav-tabs > li.active > a::before {
        display:none;
    }
    #popSite .nav-tabs {
        padding-left:10px;
    }
    .popup .popup-dangky .form-popup {
        padding-left:10px;
    }
}

@media screen and (max-width: 639px) {
    .product-content p {
        font-size: 14px;
        line-height: 30px;
    }

    .sub1 span {
        font-size: 14px;
    }

    .bg-map {
        display: none;
    }
}

@media screen and (max-width: 510px) {
    .form-input {
        width: 300px;
    }

    .btn-muahang {
        margin-left: 0;
    }
    /**/
    .btn-popup {
        width:100%;
    }
    .btn-popup a {
        font-size:12px; 
        text-align:center;
    }
    .btn-popup > div {
        width:47%;
    }
    .btn-popup .forget {
        position: static;
        width: 100%;
    }
    #popSite .nav-tabs > li.first-child {
        width:auto;
    }
}

@media screen and (max-width: 590px) {
    .product-main .item {
        width: calc(50% - 4px);
    }

    .item-hover > a {
        font-size: 14px;
        width: 200px;
    }

    .contact-info > h1 {
        font-size: 15px;
        margin: 0 0 10px;
    }

    .contact-info {
        width: 300px;
    }

    .bg-map {
        width: 42%;
    }
}

@media screen and (max-width: 549px) {
    header .col-md-3 {
        width: 100%;
        display: block;
        transition: all 0.5s ease;
    }

        header .col-md-3 img {
            margin: 0 auto;
            display: block;
        }

    header .col-md-9 {
        display: block;
        float: none;
        width: 100%;
        transition: all 0.5s ease;
    }

        header .col-md-9 form {
            text-align: center;
        }

    .product-box {
        height: 220px;
        width: 220px;
    }

    nav {
        width: 100%;
        transition: all 0.5s ease;
    }

    .navbar-brand {
        border-right: 0;
        height: 50px;
        margin-left: 0 !important;
        padding: 10px 0 0;
        width: 50px;
    }

        .navbar-brand img {
            margin: 0 auto;
        }

    .note-bg2 a {
        display: inline-block;
        padding: 20px 10px;
        width: 25%;
    }

    .note-bg2 img {
        width: 100%;
    }

    .year .in {
        width: 82%;
    }

    .year-time {
        width: 55px;
    }

    .img-h2 {
        width: 60px;
        height: 60px;
        left: 3px;
    }

        .img-h2 > img {
            width: 68%;
        }

    .in .title-timeline {
        font-size: 16px;
        padding: 7px 7px 7px 70px;
    }
}

@media screen and (max-width: 479px) {
    .product-cat .col-xs-6 {
        width: 100%;
    }

    .product-cat .product-box {
        margin: 15px auto;
        width: 280px;
        height: 280px;
    }

    .product-content p {
        font-size: 17px;
        line-height: 24px;
        padding: 5px 0;
    }

    .menu-box {
        width: 100%;
    }

    .news-tb .col-xs-6 {
        width: 100%;
    }

    .follow-img span {
        display: block;
        line-height: 30px;
    }

    .follow-img img, .follow-img a {
        vertical-align: top;
    }

    .follow-img a {
        max-height: 32px;
    }

    .list-news .item-img {
        display: block;
        margin: 0 auto 20px;
    }

    .list-news .item-box {
        display: block;
        padding-left: 0;
        width: 100%;
    }

    .quytrinh .stt {
        padding: 13px 7px;
    }

    .news-box {
        margin-bottom: 10px;
        width: 100%;
    }

        .news-box:last-child {
            float: none;
        }

    .login {
        display: block;
    }
    .languge {
        background:none;
    }
    .languge > input {
        float: right;
    }
    .popup .popup-content{
        width: 300px;
    }

    @media screen and (max-width: 430px) {
        .product-main .item {
            width: calc(100% - 4px);
        }

            .product-main .item:nth-of-type(2) .item-abso {
                position: static;
            }

        .popup .popup-dangky {
            padding: 30px 20px;
            width: 95%;
        }
    }

    @media screen and (max-width: 359px) {
        .product-cat .col-xs-6 {
            width: 100%;
        }

        .product-cat .product-box {
            width: 100%;
        }

        .mail input[type="text"] {
            width: 220px;
        }

        .list-item > ul > li {
            margin-left: 0;
        }

        .view {
            padding: 16px 7px;
        }

        .contact-info {
            width: 270px;
        }

        .year .in {
            width: 80%;
        }
    }