/* XL Device :1500px. */
@media (min-width: 1500px) {
    .wrapper-box.wrapper-padding {
        padding: 0 20px;
    }

    .slider-bg {
        height: 600px;
    }

    .slider-bg-clone {
        height: 500px;
    }
}

/* XL Device :1200px. */

@media (min-width: 1366px) and (max-width: 1599px) {
    .header-top-wrapper .contact-list li {
        color: #d4eaff;
        font-size: 12px;
    }

    .header-top-wrapper .contact-list {
        margin-left: 0px;
        gap: 105px;
    }

    .header-top-wrapper .contact-list li {
        color: #d4eaff;
        font-size: 14px;
        white-space: nowrap;
        overflow: hidden;
    }
}

/* LG Device :992px. */
@media (min-width: 992px) and (max-width: 1200px) {

    .wrapper-box.wrapper-padding {
        padding: 0;
    }

    .md-margin {
        margin-top: 50px;
    }

    blockquote::before {
        left: 40px;
    }

    blockquote::after {
        right: 40px;
    }

    blockquote {
        padding: 0 85px;
    }

    .team-info h3 {
        font-size: 16px;
        margin-bottom: 2px;
    }

    .team-info span {
        font-size: 12px;
    }

    .section-title.service-title p {
        padding: 0 100px;
    }

    .about-info-text p {
        padding: 0 60px;
    }

    .features-wrap {
        padding: 40px 30px;
    }

    .client-text {
        padding: 0 148px;
    }

    .slider-bg {
        height: 600px;
    }

    .slider-bg-clone {
        height: 600px;
    }
}


/* MD Device :768px. */
@media (min-width: 768px) and (max-width: 991px) {
    .wrapper-box.wrapper-padding {
        padding: 0;
    }

    .top-btn {
        display: none;
    }

    .menu-area {
        padding: 20px 0;
    }

    .logo img {
        margin-top: 9px;
    }

    .slider-content h1 {
        font-size: 54px;
    }

    .slider-content p {
        font-size: 15px;
    }

    .slider-bg {
        height: 600px;
    }

    .slider-bg-clone {
        height: 600px;
    }

    .about-img img {
        width: 100%;
    }

    blockquote::before {
        display: none;
    }

    blockquote::after {
        display: none;
    }

    blockquote {
        padding: 0 10px;
    }

    .section-title.service-title p {
        padding: 0 0px;
    }

    .single-cta i {
        margin-top: 6px;
    }

    .cta-text h4 {
        font-size: 16px;
    }

    .cta-text span {
        font-size: 12px;
    }

    .footer-pattern img {
        width: 100%;
    }

    .about-info-text p {
        padding: 0;
        font-size: 16px;
    }

    .contact-form-title p {
        width: 70%;
    }

    .call-to-action a {
        padding: 18px 30px;
    }

    .related-project-title.section-title p {
        padding: 0;
        width: 100%;
    }

    .features-wrap {
        padding: 40px 30px;
    }

    .client-text {
        padding: 0;
    }

    .client-text::before,
    .client-text::after {
        display: none;
    }

    .menu-margin-bottom {
        margin-bottom: 0;
    }

    .call-to-action h3 {
        font-size: 26px;
    }

    .sm-mt {
        margin-top: 60px;
    }
}


/* Extra small Device. */
@media (max-width: 884px) {

    .wrapper-box.wrapper-padding {
        padding: 0;
    }

    .top-btn {
        display: none;
    }

    .menu-area {
        padding: 20px 0;
    }

    .logo img {
        margin-top: 0px;
        width: 55px;
        height: auto;
    }

    .slider-content h1 {
        font-size: 40px;
    }

    .slider-content p {
        font-size: 14px;
        width: 80%;
        text-align: center;
        margin: 0 auto;
    }

    .btn {
        padding: 15px 25px;
    }

    .slider-bg {
        height: 480px;
    }

    .slider-bg-clone {
        height: 480px;
    }

    .about-img img {
        width: 100%;
    }

    .section-title.service-title p {
        padding: 0;
    }

    .services-img img {
        width: 100%;
    }

    .portfolio-thumb img {
        width: 100%;
    }

    blockquote::before {
        display: none;
    }

    blockquote::after {
        display: none;
    }

    blockquote {
        padding: 0;
    }

    .footer-pattern img {
        width: 100%;
    }

    .about-info-text h2 {
        font-size: 24px;
    }

    .about-info-text p {
        padding: 0;
        font-size: 14px;
    }

    .contact-form-title p {
        width: 100%;
    }

    .breadcrumb-title.sm-size h2 {
        font-size: 28px;
    }

    .related-project-title.section-title p {
        padding: 0;
        width: 100%;
    }

    .display-none {
        display: none;
    }

    .client-text {
        padding: 0;
        font-size: 14px;
    }

    .client-text::before,
    .client-text::after {
        display: none;
    }

    .white-text h3 {
        font-size: 30px;
    }

    .slider-content h1 {
        font-size: 23px;
        text-align: center;
        width: 80%;
        margin: 0 auto;
        line-height: 26px;
    }

    .portfolio-menu {
        display: none;
    }

    .home-three-about {
        margin-top: 0;
        padding-top: 0;
    }

    .slider-two-bg {
        height: 600px;
    }

    .menu-margin-bottom {
        margin-bottom: 0;
    }

    .call-to-action h3 {
        font-size: 26px;
    }

    .blog-title {
        font-size: 24px;
    }

    .sm-d {
        display: none !important;
    }

    .sm-mt {
        margin-top: 60px;
    }

    .comments-reply {
        padding-left: 0;
    }

    .comments-avatar {
        float: none;
        width: 83px;
        margin-bottom: 20px;
    }

    .comments-text {
        padding-left: 0;
    }

    .comments-avatar img {
        width: 100%;
    }

    .pvideo-background {
        height: 220px;
    }

    .youtube-background.video-background.container {
        height: 220px;
    }
}

/* SM Small Device :550px. */
@media only screen and (min-width: 576px) and (max-width: 767px) {

    .about-info-text h2 {
        font-size: 35px;
    }

    .slider-content h1 {
        font-size: 40px;
    }

    .portfolio-menu {
        display: block;
    }

    .home-three-about {
        margin-top: -265px;
        padding-top: 15px;
    }

    .sm-d {
        display: inline-block !important;
    }

    .comments-avatar {
        float: left;
        width: 103px;
    }

    .comments-avatar img {
        width: 100%;
    }

    .comments-text {
        overflow: hidden;
        padding-left: 30px;
    }

    .comments-reply {
        padding-left: 130px;
    }

    .logo {
        min-height: 50px;
    }

}

@media (max-width: 573px) {
    .logo {
        margin-top: 0px;
        display: flex;
        min-height: 50px;
        align-items: end;
    }
}

@media (min-width: 1400px) and (max-width: 1499px) {
    .youtube-background.video-background.container {
        width: 100% !important;
    }
}

@media (min-width: 768px) {}

@media (min-width: 1300px) {}

@media (max-width: 1366px) {}

@media (max-width: 1300px) {}

@media (max-width: 1280px) {}

@media (max-width: 1200px) {}

@media (max-width: 1024px) {}

@media (max-width: 990px) {}

@media screen and (max-width: 375px) {
    .khamphaSlideBox {
        display: none;
    }

    .bds-pin i {
        font-size: 25px;
    }

    .card-bds .card-footer .bds-address,
    .card-bds .card-footer .bds-location,
    .card-bds .card-footer .bds-price {
        margin-left: 10px;
    }

    .searchbox {
        display: flex;
        width: 100%;
        margin: 0 auto;
        flex-wrap: wrap;
        align-items: center;
        align-content: center;
        justify-content: center;
    }

    .searchbox #search {
        width: 65%;
        margin-bottom: 10px;
        margin-right: 13px;
    }

    .searchbox [data-select2-id="1"] {
        margin-right: 2%;
        min-width: 30%;
        max-width: 30%;
        margin-bottom: 10px;
    }

    .searchbox [data-select2-id="5"],
    .searchbox [data-select2-id="3"] {
        margin-right: 2%;
        min-width: 48%;
        max-width: 48%;
        margin-bottom: 10px;
    }

    .tuvan3 {
        margin-top: 30px;
    }

    .serviceInfo {
        padding: 30px 40px;
    }

    .news-item {
        padding-bottom: 10px;
        /* border-bottom: 1px solid #CCC; */
        margin-bottom: 10px;
    }

    .news-item img {
        height: auto;
    }

    #news .news-title {
        font-size: 14px;
        padding: 5px 0;
    }

    .header-3 .header-main .header-right .header__hamburger .sidebar__toggle {
        font-size: 20px;
        color: var(--text);
    }
}

@media (max-width: 380px) {}

@media (max-width: 320px) {}

@media screen and (max-width: 767px) {

    /* ===== Mobile Header Compact Styles ===== */
    .header-2 .container-fluid {
        padding: 0 10px;
    }

    .header-2 .mega-menu-wrapper {
        width: 100%;
    }

    .header-2 .header-main {
        display: flex;
        flex-wrap: nowrap;
        justify-content: space-between;
        align-items: center;
        padding: 8px 0;
        width: 100%;
    }

    .header-2 .header-left {
        flex: 0 0 auto;
    }

    .header-2 .mean__menu-wrapper {
        display: none !important;
    }

    .header-2 .header-left .logo img {
        max-width: 80px !important;
        height: auto;
    }

    .header-2 .header-left .search-icon {
        display: none;
    }

    .header-2 .header-right {
        flex: 0 0 auto;
        gap: 15px;
        align-items: center;
    }

    .header-2 .header-right .header__hamburger {
        display: flex !important;
        align-items: center;
    }

    .header-2 .header-right .header__hamburger .sidebar__toggle {
        font-size: 24px;
        color: var(--header);
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .header-2 .header-right .icon-items,
    .header-2 .header-right .header-button,
    .header-2 .header-right .search-icon {
        display: none !important;
    }

    /* ===== End Header-2 Mobile Styles ===== */

    /* ===== Menu-Area Header (header8) Mobile Styles ===== */
    .menu-area {
        padding: 8px 0;
    }

    .menu-area .container {
        padding: 0 10px;
    }

    .menu-area .row.align-items-center {
        flex-wrap: nowrap;
    }

    .menu-area .row>[class*="col-sm-5"] {
        flex: 0 0 auto;
        width: auto;
    }

    .menu-area .row>[class*="col-sm-7"] {
        flex: 0 0 auto;
        width: auto;
        margin-left: auto;
    }

    .menu-area .logo img {
        max-width: 80px !important;
        height: auto;
    }

    .menu-area .header__hamburger .sidebar__toggle {
        font-size: 24px;
        color: var(--header);
    }

    /* ===== End Menu-Area Mobile Styles ===== */

    /* ===== Slideshow Mobile - Reduce height by half ===== */
    .hero-fullscreen-section {
        height: 220px;
        min-height: 220px;
    }

    .hero-fullscreen-section .hero-fullscreen-slide {
        height: 280px;
    }

    .hero-fullscreen-section .hero-fullscreen-content .hero-title {
        font-size: 20px;
        line-height: 1.3;
        margin-bottom: 10px;
    }

    .hero-fullscreen-section .hero-fullscreen-content .hero-desc {
        font-size: 14px;
        margin-bottom: 15px;
    }

    .hero-fullscreen-section .hero-fullscreen-content .hero-btn {
        padding: 10px 20px;
        font-size: 13px;
    }

    .hero-fullscreen-section .hero-nav-center {
        display: none;
    }

    /* ===== End Slideshow Mobile ===== */

    /* Remove funfact margin on mobile */
    .funfact-wrapper {
        margin-top: 0;
    }

    /* Remove min-height from feature-description on mobile */
    .feature-description {
        min-height: auto;
    }

    /* Reduce spacing in author-items block */
    .about-wrapper-2 .about-content .about-list-wrapper .author-items .icon {
        margin: 0 auto 10px;
    }

    .about-wrapper-2 .about-content .about-list-wrapper .author-items p {
        margin-bottom: 8px;
    }

    .navbar-sale {
        display: none;
    }

    #mainCarousel img {
        max-width: 100%;
        height: 190px;
    }

    #mainCarousel .carousel-caption {
        bottom: 5%;
        left: 0;
        text-align: center;
        right: 0;
    }

    #mainCarousel h1 {
        font-size: 30px;
        margin-bottom: 0px;
    }

    #BDSList .card-footer>.row>.col-11 {
        padding: 0;
    }

    .section-title {
        font-size: 20px;
        padding: 0 0 30px 0;
    }

    #headerNews.myheader {
        padding-bottom: 70px;
        padding-top: 70px;
    }

    #headerNews h3 {
        max-width: 100%;
        text-align: center;
        font-size: 22px;
        margin-bottom: 10px;
    }

    #headerNews h2 {
        font-size: 35px;
        text-align: center;
    }

    .card-related {
        min-height: 235px;
        height: 235px;
    }

    .bds-pin i {
        font-size: 19px;
    }

    .card-bds .card-footer .bds-address,
    .card-bds .card-footer .bds-location,
    .card-bds .card-footer .bds-price {
        margin-left: 10px;
    }

    .searchbox {
        display: flex;
        width: 100%;
        margin: 0 auto;
        flex-wrap: wrap;
        align-items: center;
        align-content: center;
        justify-content: center;
    }

    .searchbox #search {
        width: 59%;
        margin-bottom: 10px;
        margin-right: 5px;
    }

    .searchbox [data-select2-id="1"] {
        margin-right: 2%;
        min-width: 37%;
        max-width: 37%;
        margin-bottom: 10px;
    }

    .searchbox [data-select2-id="5"],
    .searchbox [data-select2-id="3"] {
        margin-right: 2%;
        min-width: 48%;
        max-width: 48%;
        margin-bottom: 10px;
    }

    .tuvan3 {
        margin-top: 30px;
    }

    .serviceInfo {
        padding: 30px 40px;
    }

    .news-item {
        padding-bottom: 10px;
        /* border-bottom: 1px solid #CCC; */
        margin-bottom: 10px;
    }

    #mainnav {
        display: flex;
        flex-wrap: nowrap;
        padding: 10px 10px;
    }

    .btn-login {
        height: 70px;
        padding: 0 10px;
        font-size: 14px;
    }

    #mainnav .navbar-brand {
        width: 50%;
    }

    #mainnav .navbar-brand img {
        width: auto;
        height: 60px;
    }

    .d-m-none {
        display: none;
    }

    .news-item img {
        height: 100%;
    }

    #news .news-title {
        font-size: 14px;
        padding: 0 0 5px 0;
        margin-bottom: 0px;
    }

    #news .lasted .news-title {
        font-size: 15px;
        padding: 10px 0 10px 0;
        margin-bottom: 10px;
    }

    .news-item .description {
        font-size: 1em;
        height: 3em;
        border-bottom: 1px solid #CCC;
        padding-bottom: 20px;
        display: -webkit-box;
        margin: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        /* number of lines to show */
        -webkit-box-orient: vertical;
        line-height: 1.5em;
    }

    .tamnhin {
        text-align: left;
        margin: 30px 0 0 0;
    }

    #kienthuc .kienthucInfo {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgb(0 0 0 / 70%);
    }

    .video-js .vjs-big-play-button {
        top: 25%;
        left: 33%;
        display: block !important;
    }

    .contentAds {
        font-size: 14px;
        width: 58%;
        padding: 0;
        top: 41%;
        left: 7%;
        line-height: normal;
        text-align: center;
    }

    #footerTop .section-title {
        padding: 0
    }

    #mainnav .container {
        display: flex;
        flex-wrap: wrap;
    }

    #mainnav .navbar-toggler {
        margin-left: 15px;
    }

    #rightMenu {
        display: none
    }

    h5#offcanvasNavbarLabel img {
        width: 100%;
        height: 60px;
        margin: 0 auto;
    }

    #mainmenu {
        height: 80px;
        margin-left: 0;
    }

    .offcanvas-header {
        justify-content: flex-start;
    }

    .offcanvas-header .btn-close {
        margin-left: auto;
    }

    #mainnav .navbar-nav {
        align-items: flex-start;
    }

    #mainmenu>ul>li {
        height: 40px;
    }

    .navbar-search {
        /* margin-left: 15px; */
        padding: 0.25rem 0.75rem;
        font-size: 1.25rem;
        line-height: 1;
        background-color: transparent;
        border: 1px solid transparent;
        border-radius: 0.25rem;
        transition: box-shadow .15s ease-in-out;
        color: rgba(0, 0, 0, .55);
        border-color: rgba(0, 0, 0, .1);
    }

    .navbar-search i.fas.fa-search {
        display: inline-block;
        width: 1.5em;
        height: 1.5em;
        line-height: 1.5em;
    }

    div#rightMenu.show {
        display: flex;
        padding: 10px 10px 10px 10px;
        border-top: 1px solid #CCC;
        margin-top: 10px;
    }

    .button {
        padding: 10px 10px;
        font-size: 11px;
    }

    section.s-products ul.products-list li a:hover span.product-item img,
    section.s-products ul.products-list li a.active span.product-item img {
        border-color: #ec6825;
    }

    .swiper-caption {
        height: 100px;
    }

    .MainSlideShow .swiper-pagination {
        bottom: 5px;
    }

    .MainSlideShow .swiper-caption {
        padding: 15px 0;
    }

    .MainSlideShow .swiper-caption .title {
        font-size: 15px;
        text-align: center;
        margin-bottom: 0;
    }

    .MainSlideShow .swiper-caption .des {
        font-size: 13px;
        text-align: center;
    }

    .MainSlideShow .swiper-pagination-bullet {
        width: 20px;
        height: 7px;
    }

    .khamphaSlideBox {
        display: none;
    }

    .img-circle {
        padding: 5px;
    }

    .product-content {
        display: none;
    }

    .khampha {
        margin: 0 0 60px 0px;
    }

    .w-25 {
        width: 100% !important;
    }

    .qnaFull .d-flex {
        display: flex !important;
        flex-wrap: nowrap;
        flex-direction: column;
    }

    .header-top-cta {
        text-align: center;
    }

    .header-3 .header-main .header-right .header__hamburger .sidebar__toggle {
        font-size: 20px;
    }
}

@media (max-width: 1024px) {}

@media screen and (device-width: 1024px) and (device-height: 768px) and (orientation: landscape) {
    .searchbox {
        display: flex;
        width: 100%;
        margin: 0 auto;
    }

    #mainmenu a {
        font-size: 15px;
        text-transform: uppercase;
        padding: 0 7px;
        max-width: 115px;
        line-height: 25px;
    }

    .bds-pin i {
        font-size: 25px;
        color: #FFF;
    }

}

@media screen and (device-width: 768px) and (device-height: 1024px) and (orientation: portrait) {
    .searchbox {
        display: flex;
        width: 100%;
        margin: 0 auto;
    }

}

@media screen and (device-width: 1024px) and (device-height: 1366px) and (orientation: portrait) {
    #mainmenu a {
        font-size: 15px;
        text-transform: uppercase;
        padding: 0 7px;
        max-width: 115px;
        line-height: 25px;
    }

    .searchbox {
        display: flex;
        width: 100%;
        margin: 0 auto;
    }
}