/* root */

:root {
   --main-background: rgb(0 0 0 / 70%);
   --text-color: #C00000;
   --background-section: #fce4ba;
   --box-shadow: 1px 4px 8px 0px rgb(0 0 0 / 40%);
}

body {
   font-family: "Helvetica Neue", Arial, sans-serif;
}

#header {
   background-color: #000;
}

#header.fixed {
   position: fixed;
   top: 0;
   z-index: 99;
   width: 100%;
   background-color: var(--main-background);
}
.color-white {
   color: white!important;
}
.mb-30 {
   margin-bottom: 30px;
}
.flex {
   display: flex;
}

.fixed-list {
   position: fixed;
   top: 56px;
   z-index: 1999;
   background: #fff;
   width: 100%;
}

button {
   outline: none !important;
}

button[type="submit"] {
   cursor: pointer;
}

.background {
   background-size: cover;
}

.breadcrumb {
   padding: 60px 0px 40px 0px;
   font-size: 28px;
   font-weight: bold;
   color: var(--text-color);
}

.blue-skin {
   background: #4285f4;
}

.white-skin {
   background: #fff;
}

.algin-center {
   align-items: center;
}


/* end root */


/* header */


/** header mobile **/

#slide-out {
   display: none;
   position: fixed;
   padding: 0px;
   right: 100%;
   z-index: 10000;
   width: 100%;
   top: 46px;
   height: 100%;
}

#slide-out .row {
   height: 100%;
}

#slide-out .slide-left {
   background: #fff;
   height: inherit;
}

#slide-out .slide-left .collapsible,
#slide-out .slide-left .social {
   list-style: none;
   padding-left: 15px;
}

#slide-out .slide-left .social {
   display: flex;
   justify-content: flex-start;
}

#slide-out .slide-left .social li a {
   padding: 0px 10px;
}

#slide-out .slide-left li a {
   color: #000;
   font-size: 18px;
   padding: 15px 0px;
}

#slide-out .slide-right {
   background: rgba(0, 0, 0, 0.5);
   height: inherit;
}

#slide-out .collapsible-body ul {
   list-style: none;
}

#slide-out .collapsible-body ul>li {
   padding: 5px 0px;
}


/** header mobile end **/

.navbar-nav .nav-link {
   color: #fff !important;
   padding: 0px 15px;
   font-weight: bold;
   font-size: 15px;
   text-transform: uppercase;
}

.navbar-nav li a:hover {
   color: #00578a;
}

.navbar-nav>li:hover .menu-child {
   display: block;
}

.navbar-nav .menu-child {
   list-style: none;
   position: absolute;
   top: 100%;
   left: 15px;
   right: -30px;
   display: none;
   background: var(--main-background);
   padding: 10px 0px;
   z-index: 1000;
   min-width: 150px;
}

.navbar-nav .menu-child li {
   padding: 5px 5px;
}

.navbar-nav .menu-child li a {
   color: #fff;
   text-transform: uppercase;
   text-decoration: none;
   display: block;
   padding: 5px;
}

.navbar-nav .menu-child li:hover a {
   color: #000 !important;
   background: #f2f2f2;
}

.button-collapse {
   color: #fff !important;
   font-size: 20px;
}

.navbar-fixed-top {
   position: fixed;
   width: 100%;
   top: 0px;
   z-index: 10000;
}

.button-close-collapse {
   color: #000 !important;
   position: absolute;
   top: 15px;
   right: 25px;
}


/* header end */


/*body*/


/**home**/

#slideHome .items .content {
   z-index: 9;
   position: absolute;
   left: 0;
   right: 0;
   bottom: 100px;
   padding: 28px 0px;
   background-image: linear-gradient(to right, var(--text-color), transparent);
}

#slideHome .owl-next,
#slideHome .owl-prev {
   position: absolute;
   top: 30%;
   color: #fff;
   background: rgba(185, 118, 0, 0.6);
   border-radius: 50%;
   width: 50px;
   height: 50px;
   font-size: 30px;
   border: none;
}

#slideHome .owl-next {
   right: 15px;
}

#slideHome .owl-prev {
   left: 15px;
}

#slideHome .items .img,
#slideHome .items img {
   height: 100%;
}

#slideHome .items .content h2 {
   text-transform: uppercase;
   color: #fff;
}

#slideHome {
   width: 100%;
}

#slideHome .owl-theme .owl-nav.disabled+.owl-dots {
   margin-top: 30px;
   position: absolute;
   bottom: 15px;
   width: 100%;
}

#slideHome .owl-theme .owl-dots .owl-dot span {
   border: 1px solid #fff;
   background: transparent;
}

#slideHome .owl-theme .owl-dots .owl-dot.active span,
.owl-theme .owl-dots .owl-dot:hover span {
   background: #fff;
}

#home-about {
   padding: 50px 0;
}

#home-about .content {}
#home-hethong {
   padding: 50px 0;
}
#home-hethong .hethong-item {
   color: #fff;
   margin-bottom: 15px;
}
#home-hethong .hethong-item .box-img {
   -ms-flex: 0 0 20%;
   flex: 0 0 20%;
   max-width: 20%;
}
#home-hethong .hethong-item .box-content {
   -ms-flex: 0 0 80%;
   flex: 0 0 80%;
   max-width: 80%;
   padding-left: 15px;
}
#home-hethong .hethong-title {
   font-size: 20px;
   font-weight: 600;
}
#home-hethong .hethong-des {
   font-size: 15px;
}
.hethong-des p {
   margin-bottom: 5px;
}
#camket {
   margin-bottom: 20px;
}

#camket .title-uppercase {
   margin: 50px 0px;
}

#camket .item {
   padding: 15px;
   box-shadow: var(--box-shadow);
   border-radius: 20px;
}

#camket .item .img {
   display: flex;
   align-items: center;
   justify-content: center;
}

#camket .item .img .circle {
   border-radius: 50%;
   width: 150px;
   height: 150px;
   background: #fff;
   display: flex;
   align-items: center;
   justify-content: center;
   transition: 0.6s all ease;
   overflow: hidden;
}

#camket .item .img:hover>.circle {
   border-color: #fd9308;
}

#camket .item .content {
   text-align: center;
   margin: 15px 0px;
   height: 108px;
   overflow: hidden;
}

#camket .item .content h4 {
   color: var(--text-color);
   text-transform: uppercase;
   font-weight: bold;
}

.title-uppercase {
   text-transform: uppercase;
   text-align: center;
   margin-bottom: 40px;
   font-weight: bold;
   position: relative;
   color: #fff;
}

#home-chung {
   padding: 50px 0;
}

#home-doitac .title-uppercase {}

#home-doitac .item {
   -ms-flex: 0 0 20%;
   flex: 0 0 20%;
   max-width: 20%;
   margin-bottom: 30px;
}

#home-kienthuc {
   margin-top: 50px;
}

.s-kienthuc .item {
   margin-bottom: 30px;
}

.s-kienthuc .item .content {
   background: #fff;
   padding: 15px;
}

.s-kienthuc .item .content a {
   color: var(--text-color);
   text-transform: uppercase;
   font-weight: 600;
}

.s-kienthuc .list-kienthuc .item {
   display: -ms-flexbox;
   display: flex;
   -ms-flex-wrap: wrap;
   flex-wrap: wrap;
   background: #fff;
   margin-bottom: 15px;
}

.s-kienthuc .list-kienthuc .item .img {
   -ms-flex: 0 0 30%;
   flex: 0 0 30%;
   max-width: 30%;
}

.s-kienthuc .list-kienthuc .item .content {
   -ms-flex: 0 0 70%;
   flex: 0 0 70%;
   max-width: 70%;
}

.s-kienthuc .list-kienthuc .item .content .des {
   display: block;
   display: -webkit-box;
   max-width: 100%;
   max-height: 70px;
   margin: 0 auto;
   -webkit-line-clamp: 3;
   -webkit-box-orient: vertical;
   overflow: hidden;
   text-overflow: ellipsis;

}

#home-kienthuc.page-kienthuc {
   margin-top: 0;
   padding: 50px 0;
}

.page-kienthuc.s-kienthuc .list-kienthuc .item {
   margin-bottom: 30px;
}

.wiget {
   margin-bottom: 30px;
}

.wiget .item-bv {
   color: #fff;
}

.title-ccd {
   font-size: 20px;
   text-transform: uppercase;
   border-bottom: 1px solid #fff;
   position: relative;
}

.title-ccd::after {
   content: "";
   position: absolute;
   width: 50%;
   height: 2px;
   background: var(--text-color);
   bottom: -1px;
   left: 0;
}

.list-cungchude {
   padding: 0;
   list-style: none;
}

.list-cungchude li {
   padding: 10px 0;
   border-bottom: 1px solid #686464;
}

.list-cungchude li:last-child {
   margin-bottom: 0;
   border-bottom: unset;
}

.list-cungchude li a {
   color: #fff;
}

.detail {
   text-align: center;
}

#slide-about .slide {
   height: 297px;
   overflow: hidden;
}

#news {
   margin-bottom: 25px;
}
#home-customer .item {
   /* padding: 15px; */
}
#home-customer .owl-prev, #home-customer .owl-next {
   position: absolute;
   top: 50%;
   color: #fff;
   background: transparent;
}
#home-customer .owl-prev {
   left: -35px;
}
#home-customer .owl-next  {
   right: -35px;
}
#home-customer.list-customer .items {
   margin-bottom: 30px;
}
@media (max-width: 900px) {
   #home-customer.list-customer .items {
      margin-bottom: 20px;
   }
   #home-customer .owl-prev, #home-customer .owl-next {
      color: #000;
   }
   #home-customer .owl-prev {
      left: 0;
   }
   #home-customer .owl-next  {
      right: 0;
   }
   #header {
      padding: 5px 0;
   }
   .logo img {
      width: 60%;
   }
}

@media (min-width: 900px) {
   #home-about .detail {
      margin-top: 15px;
   }

   .logo img {
      width: 35%;
   }

   #slide-about .slide,
   .home-about .content {
      height: 400px;
      overflow: hidden;
   }

   #slide-about .slide img {
      height: 100%;
   }
}

.detail a,
.detail button {
   display: inline-block;
   padding: 10px 15px;
   border: none;
   background: var(--main-background);
   border-radius: 30px;
   margin-top: 30px;
   text-decoration: none;
   color: #fff;
   outline: none;
   text-transform: uppercase;
   font-weight: bold;
}

#home-congtrinh {
   padding: 50px 0;
}

.list-cat {
   border-bottom: 1px solid var(--text-color);
   margin-bottom: 30px;
   padding: 0;
   list-style: none;
   display: flex;
}

.list-cat .item {
   margin-right: 15px;
   padding: 0px 15px;
   border-radius: 5px;
   margin-bottom: 5px;
   font-size: 16px;
}

.list-cat .item a {
   font-size: 16px;
   color: #fff;
   text-transform: uppercase;
   font-weight: 600;
}

.list-cat .item.active {
   background-image: linear-gradient(to right, var(--text-color), #000, var(--text-color));
}

.list-congtrinh .item {
   margin-bottom: 30px;
   /* overflow: hidden; */
}

.list-congtrinh .item .img {
   box-shadow: var(--box-shadow);
   /* overflow: hidden; */
}

.list-congtrinh .item .img img {
   height: 100%;
}

.list-congtrinh .item {
   position: relative;
}

.list-congtrinh .content {
   position: absolute;
   width: 100%;
   top: 0;
   height: 100%;
   left: 0;
   opacity: 0;
   overflow: auto;
   transition: .5s ease;
}

.list-congtrinh .content {
   background: linear-gradient(0deg, rgb(0 0 0 / 70%) 1%, rgb(0 0 0 / 70%) 25%, rgba(0, 204, 255, 0.00) 72%);
   display: -webkit-flex;
   display: flex;
   -webkit-align-items: center;
   align-items: flex-end;
}

.list-congtrinh .item img {
   transition: transform .2s;
   -moz-transition: transform .2s;
   -ms-transition: transform .2s;
   -o-transition: transform .2s;
}

.list-congtrinh .item:hover .content {
   opacity: 1;
   transform: scale(1.1);
   -webkit-transform: scale(1.1);
   -moz-transform: scale(1.1);
   -ms-transform: scale(1.1);
   -o-transform: scale(1.1);
}

.list-congtrinh .item:hover img {
   transform: scale(1.1);
   -webkit-transform: scale(1.1);
   -moz-transform: scale(1.1);
   -ms-transform: scale(1.1);
   -o-transform: scale(1.1);
}

#page-entry {
   padding: 50px 0;
   background: #000;
}

#page-entry .item-tab {
   font-weight: 400;
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   width: 100%;
   margin-bottom: 30px;
   font-size: 20px;
   color: #fff;
}

#page-entry .item-tab i {
   display: inline-block;
   width: 50px;
   height: 50px;
   background: var(--text-color);
   border-radius: 100%;
   text-align: center;
   line-height: 50px;
   margin-right: 20px;
   color: #fff;
   font-size: 20px;
}

#page-entry .entry-content {
   margin-bottom: 30px;
}

#page-entry .list-navi {
   margin-top: 30px;
   margin-bottom: 0;
   padding: 0;
   list-style: none;
}

#page-entry .list-navi li a {
   display: inline-block;
   color: #fff;
   position: relative;
   font-size: 20px;
}

#page-entry .list-navi li a.prev {
   padding-left: 25px;
}

#page-entry .list-navi li a.next {
   padding-right: 25px;
}

#page-entry .list-navi li a.prev::before {
   content: "";
   position: absolute;
   left: 0;
   top: 35%;
   width: 10px;
   height: 10px;
   border-left: 2px solid #fff;
   border-top: 2px solid #fff;
   -moztransform: rotate(-45deg);
   -webkit-transform: rotate(-45deg);
   -ms-transform: rotate(-45deg);
   transform: rotate(-45deg);
}

#page-entry .list-navi li a.next::before {
   content: "";
   position: absolute;
   right: 0;
   top: 35%;
   width: 10px;
   height: 10px;
   border-left: 2px solid #fff;
   border-top: 2px solid #fff;
   -moztransform: rotate(135deg);
   -webkit-transform: rotate(135deg);
   -ms-transform: rotate(135deg);
   transform: rotate(135deg);
}

#news .item .img {
   height: 250px;
   overflow: hidden;
}

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

.box .item {
   position: relative;
   background: #fff;
   transition: 0.5s all ease;
   margin-bottom: 15px;
   box-shadow: var(--box-shadow);
   border-radius: 20px;
   overflow: hidden;
}

.box .item:hover {
   transform: translateY(-5px);
   box-shadow: 2px 0px 10px #444;
}

.box .item img {
   width: 100%;
}

.box .item .title {
   padding: 10px;
   text-align: left;
   height: 90px;
   overflow: hidden;
}

.box .item .title time {
   color: #ccc;
   font-size: 14px;
}

.box .item .title a {
   color: var(--text-color);
   text-decoration: none;
}

.box .item .img {
   max-height: 250px;
   overflow: hidden;
}

.box .item .content {
   padding: 10px;
}

#about .name-page,
#recruit .name-page {
   width: 100%;
   padding: 100px 0px;
   display: flex;
   justify-content: center;
}

#about .name-page .title,
#recruit .name-page .title {
   text-transform: uppercase;
   padding: 50px;
   background: rgba(0, 64, 128, 0.7);
   color: #fff;
}

#recruit a {
   color: var(--text-color);
}

#recruit .list a.active {
   color: #fff;
}

#recruit .title {
   padding: 10px 0px;
}

#video {
   padding: 30px 0px;
}

.video .item .title a {
   display: block;
   width: 100%;
   padding: 15px;
   text-align: center;
   background: var(--text-color);
   color: #fff;
   text-transform: uppercase;
}

.video .item .title a:hover {
   background: #fd9308;
}

.list-congtrinh .list ul {
   padding: 20px 0px;
   list-style: none;
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   justify-content: center;
   margin-bottom: 15px;
   border-radius: 30px;
   width: 100%;
   background: #fff;
   min-width: 60%;
}

.list-congtrinh .list ul li a {
   display: block;
   padding: 10px 15px;
   color: var(--text-color);
   margin: 0px 5px;
   transition: 0.5s;
   border-radius: 30px;
   text-decoration: none;
   font-weight: bold;
   text-transform: uppercase;
}

.list-congtrinh .list ul li a.active {
   color: #fff;
   background: var(--main-background);
}

.list-congtrinh .item img {
   width: 100%;
}

.list-congtrinh .item .title {
   width: 100%;
   z-index: 1000;
   position: relative;
   z-index: 1;
   text-align: center;
   padding: 15px 10px;
   box-shadow: 0px 0px 3px #444;
}

#recruit .list-congtrinh .item .title {
   padding: 10px 15px;
}

.list-congtrinh .item .title h6 {
   font-weight: bold;
   font-size: 1.2rem;
   overflow: hidden;
}

.list-congtrinh .item .title a {
   color: #fff;
}

#listDuan,
#detail-duan,
#contact,
#recruit {
   margin-top: 56px;
   margin-bottom: 15px;
}

#listDuan {
   padding-top: 20px;
}

.listItem .item {
   margin: 20px 0px;
   box-shadow: 0px 0px 17px #ccc;
   transition: 0.5s all;
}

.listItem .item .img {
   height: 200px;
   overflow: hidden;
}

.listItem .item img {
   width: 100%;
   height: 100%;
}

.listItem .item:first-child {
   margin-top: 0px;
}

.listItem .item:hover {
   transform: translateY(-5px);
}

.listItem .item .content,
.listItem .item .title {
   padding: 15px;
}

.listItem .item .title h6 {
   text-align: center;
   font-weight: bold;
   font-size: 1.2rem;
}

.listItem .item .content time {
   opacity: 0.5;
   font-size: 14px;
}

.listItem .item h6 a {
   color: var(--text-color);
   text-decoration: none;
}

.listItem .item .content h4 a:hover {
   color: #fd9308;
}

.listItem .item .content .des {
   padding: 20px 0px;
}

.listItem .item .content .des a {
   color: #000;
   text-decoration: none;
}

.sidebar {
   position: sticky;
   top: 66px;
   background: #fdebd8;
   padding: 20px;
}

.sidebar h4 {
   color: #fd9308;
}

.sidebar ul {
   list-style: none;
   padding: 0px;
   margin: 0px;
}

.sidebar ul li {
   padding: 5px 0px;
   border-bottom: 1px solid rgba(187, 106, 18, 0.2);
   margin: 10px 0px;
}

.sidebar ul li:last-child {
   padding-bottom: 0px;
   margin-bottom: 0px;
   border: none;
}

.sidebar ul li a {
   color: var(--text-color);
   font-weight: bold;
   font-size: 15px;
   text-decoration: none;
}

.sidebar ul li a:hover {
   color: #fd9308;
}

#recruit .mobile {
   display: none;
}

.timeline {
   position: relative;
   list-style: none;
   padding: 0px;
}

.timeline::after {
   position: absolute;
   left: 50%;
   top: 0px;
   bottom: 0px;
   width: 3px;
   background-color: var(--text-color);
   content: "";
}

.service-review {
   margin: 10px 30px 30px 30px;
   position: relative;
   z-index: 1000;
}

.service-review-img {
   padding: 0px 70px 0px 70px;
}

.img-circle {
   border-radius: 50%;
   overflow: hidden;
}

.service-review-content {
   padding-left: 15px;
   padding-right: 15px;
   background: #fff;
   color: #000;
   padding-top: 150px;
   z-index: -1;
   line-height: 1.5;
   min-height: 300px;
   overflow: hidden;
   border-radius: 20px;
   margin-top: -175px;
   box-shadow: var(--box-shadow);
}

.service-review-content p.title {
   text-align: center;
   font-size: 1.8em;
   font-weight: bold;
}



#home-contact {
   background: var(--main-background);
   padding: 20px 0px;
   margin-bottom: 15px;
}

#home-contact button {
   background: #fff;
   border-radius: 30px;
   color: #000;
   text-transform: uppercase;
   font-weight: bold;
   padding: 5px 15px;
   border: none;
   outline: none;
}

#home-contact .form-control {
   margin-bottom: 15px;
}

#recruit .flex .item img {
   width: 100%;
}

#contact .form-control {
   margin-bottom: 10px;
}

#contact textarea.form-control {
   height: 150px;
   resize: none;
}

#home-khachhang,
#about,
#detail-duan,
#detail-news,
#recruit {
   background: #f7f5f1;
}

#recruit {
   padding: 20px 0px;
}

#about .about,
.detail-content {
   background: #fff;
   padding: 20px;
   margin: 35px 0px;
   box-shadow: 0 0 3px #ccc;
}

.detail-content article {
   margin-bottom: 20px;
}

#detail-duan .title {
   background: #fff;
   margin-bottom: 20px;
}

.list_tab {
   list-style: none;
   padding: 0px;
   margin: 0px;
   display: flex;
   flex-wrap: nowrap;
   overflow-y: auto;
}

.list_tab::-webkit-scrollbar-thumb {
   background: #ccc;
}

.list_tab::-webkit-scrollbar {
   height: 2px;
}

.list_tab li {
   flex: none;
}

.list_tab li a {
   display: block;
   padding: 10px;
   color: #000;
   text-decoration: none;
}

.list_tab li a.active {
   color: var(--text-color);
   position: relative;
}

.list_tab li a.active::after {
   content: "";
   position: absolute;
   bottom: 0px;
   height: 2px;
   left: 0px;
   right: 0px;
   background: var(--text-color);
}

#home-company,
#home-images {
   padding: 50px 0;
}

.customNav img,
.customNav img {
   width: 25px;
   height: inherit;
}

.customNav .customNextBtn,
.customNav .customPrevBtn {
   z-index: 1;
   position: absolute;
   top: 50%;
   width: 45px;
   height: 45px;
   border-radius: 50%;
   background: #fff;
   text-align: center;
}

.customNav .customNextBtn {
   right: 25px;
}

.customNav .customPrevBtn {
   left: 25px;
}

/*footer*/
.page-footer {
   padding: 50px 0;
   color: #fff;
}

footer a {
   color: #fff;
}

footer a:hover {
   color: var(--text-color);
}

footer p {
   margin-bottom: 5px;
}

footer h5 {
   text-transform: uppercase;
   font-size: 18px;
}

.logofooter {
   display: -ms-flexbox;
   display: flex;
   -ms-flex-wrap: wrap;
   flex-wrap: wrap;
   margin-bottom: 30px;
}

.logofooter .logoft {
   -ms-flex: 0 0 25%;
   flex: 0 0 25%;
   max-width: 25%;
}

.logofooter .company {
   -ms-flex: 0 0 75%;
   flex: 0 0 75%;
   max-width: 75%;
   padding-left: 15px;
}

.foffices_i {
   margin-bottom: 30px;
}

.foffices_i:last-child {
   /* margin-bottom: 0; */
}

.fcity {
   color: #fff;
}

.flienhe {
   color: #fff;
   text-align: center;
}

.social {
   margin-top: 20px;
   display: flex;
}

.social a {
   margin-right: 15px;
   width: 30px;
   height: 30px;
   /* display: flex;
   justify-content: center;
   align-items: center;
   border: 2px solid var(--text-color);
   border-radius: 50%;
   color: var(--text-color) !important; */
}

.social a:last-child {
   margin-right: 0;
}

.copyright {
   padding: 15px 0;
   text-align: center;
   color: #fff;
   text-transform: uppercase;
   font-size: 14px;
}

#header .nav-menu-button {
   position: relative;
   float: right;
   cursor: pointer;
   width: 40px;
}

#header .nav-menu-button .bar1,
#header .nav-menu-button .bar2,
#header .nav-menu-button .bar3 {
   width: 30px;
   height: 3px;
   background-color: #fff;
   margin: 5px auto;
   border-radius: 3px;
   transition: 0.4s;
}

.fix-header {
   background: rgba(0, 0, 0, 0.9);
}

.logo-gold {
   display: none;
}

.fix-header .logo-gold {
   display: block;
}

.fix-header .logo-white {
   display: none;
}

ul.nav-menu-list {
   padding-inline-start: 0px;
   list-style: none;
}

.nav-menu {
   position: fixed;
   z-index: 1100;
   right: -200%;
   height: 100vh;
   top: 0;
   width: 30%;
   background: rgba(0, 0, 0, 0.6);
   padding: 50px;
   -moz-transition: all 0.4s ease-out;
   -o-transition: all 0.4s ease-out;
   -webkit-transition: all 0.4s ease-out;
   -ms-transition: all 0.4s ease-out;
}

.close-btn {
   position: absolute;
   left: -30px;
   top: 0;
   color: #fff;
   font-size: 30px;
}

.nav-menu .text-copy {
   color: #b89c5e;
   font-size: 18px;
   font-weight: 400;
}

.nav-menu-list>li {
   position: relative;
   font-size: 27px;
}

.nav-menu-sub {
   display: none;
}

@media (max-width: 767px) {
   .nav-menu__sub {
      width: 100%;
      padding: 20px 0;
   }
}

.nav-menu__sub li {
   padding: 15px 20px;
}

.nav-menu__sub li a {
   font-size: 14px;
   font-weight: bold;
   text-decoration: none;
   color: #313131;
}

.nav-menu__sub li a:hover {
   color: #3989c9;
}

@media (max-width: 767px) {
   .nav-menu {
      width: 80%;
      right: -200%;
      padding: 50px 30px;
   }
}

.nav-link {
   position: relative;
   color: #fff;
   text-decoration: none;
   padding: 10px 0;
   display: block;
   text-align: left;
   font-size: 27px;
   font-weight: 600;
   line-height: 1.2;
   letter-spacing: 0.05em;
   transition: ease-in-out 500ms;
}

.nav-link:hover {
   opacity: 0.6;
   color: #b89c5e;
}

.nav-par .nav-link {
   width: calc(100% - 25px)
}

.nav-par .has-sub {
   content: "";
   position: absolute;
   right: 10px;
   top: 15px;
   width: 15px;
   height: 15px;
   border-left: 2px solid #b89c5e;
   border-top: 2px solid #b89c5e;
   -moztransform: rotate(225deg);
   -webkit-transform: rotate(225deg);
   -ms-transform: rotate(225deg);
   transform: rotate(225deg);
   cursor: pointer;
}

.nav-par .has-sub.open {
   -moztransform: rotate(45deg);
   -webkit-transform: rotate(45deg);
   -ms-transform: rotate(45deg);
   transform: rotate(45deg);
}


@media (min-width: 900px) {
   
   .service-review-content {
      padding-top: 140px;
      margin-top: -165px;
   }

   #slideHome .owl-next,
   #slideHome .owl-prev {
      top: 50%;
   }

   #slideHome .items {
      overflow: hidden;
      position: relative;
   }

   #slideHome .items .content {}

   .page-footer .lienket {
      padding: 0px 15px;
   }

   #about {
      margin-top: 56px;
   }

   #recruit .flex {
      display: flex;
      align-items: center;
      position: relative;
   }

   #recruit .flex .time {
      position: absolute;
      left: 50%;
      transform: translateX(-47%);
      background: #fd9308;
      color: #fff;
      font-weight: bold;
      z-index: 1000;
      text-align: center;
      padding: 5px;
      border-radius: 5px;
      top: 23px;
   }

   #recruit .flex:nth-child(even) {
      justify-content: flex-end;
   }

   #recruit .flex .item {
      flex: 0 0 46%;
      max-width: 46%;
      padding: 10px;
      box-shadow: 0px 0px 5px #ccc;
      position: relative;
   }
}

.show-mb {
   display: none;
}

.pb-30 {
   padding-bottom: 30px;
}
@media (max-width: 900px) {
   .list-cat {
      flex-wrap: wrap;
   }

   #header .nav-menu-button .bar1, #header .nav-menu-button .bar2, #header .nav-menu-button .bar3 {
      height: 2px;
   }
   .navbar-nav .nav-link {
      font-size: 16px;
      font-weight: 400;
   }
   .show-lg {
      display: none;
   }

   .show-mb {
      display: block;
   }

   .container {
      padding-right: 10px;
      padding-left: 10px;
   }

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

   .col,
   .col-1,
   .col-10,
   .col-11,
   .col-12,
   .col-2,
   .col-25,
   .col-3,
   .col-4,
   .col-5,
   .col-6,
   .col-7,
   .col-8,
   .col-9,
   .col-auto,
   .col-lg,
   .col-lg-1,
   .col-lg-10,
   .col-lg-11,
   .col-lg-12,
   .col-lg-2,
   .col-lg-25,
   .col-lg-3,
   .col-lg-4,
   .col-lg-5,
   .col-lg-6,
   .col-lg-7,
   .col-lg-8,
   .col-lg-9,
   .col-lg-auto,
   .col-md,
   .col-md-1,
   .col-md-10,
   .col-md-11,
   .col-md-12,
   .col-md-2,
   .col-md-25,
   .col-md-3,
   .col-md-4,
   .col-md-5,
   .col-md-6,
   .col-md-7,
   .col-md-8,
   .col-md-9,
   .col-md-auto,
   .col-sm,
   .col-sm-1,
   .col-sm-10,
   .col-sm-11,
   .col-sm-12,
   .col-sm-2,
   .col-sm-25,
   .col-sm-3,
   .col-sm-4,
   .col-sm-5,
   .col-sm-6,
   .col-sm-7,
   .col-sm-8,
   .col-sm-9,
   .col-sm-auto,
   .col-xl,
   .col-xl-1,
   .col-xl-10,
   .col-xl-11,
   .col-xl-12,
   .col-xl-2,
   .col-sm-25,
   .col-xl-3,
   .col-xl-4,
   .col-xl-5,
   .col-xl-6,
   .col-xl-7,
   .col-xl-8,
   .col-xl-9,
   .col-xl-auto,
   #home-doitac .item {
      padding-right: 10px;
      padding-left: 10px;
   }

   #home-doitac .item {
      -ms-flex: 0 0 33.333333%;
      flex: 0 0 33.333333%;
      max-width: 33.333333%;
      margin-bottom: 20px;
   }

   .s-kienthuc .item {
      margin-bottom: 15px;
   }

   .nav-link {
      font-size: 18px;
   }

   .nav-par .has-sub {
      top: 10px;
   }

   .banner_title {
      font-size: 18px;
   }

   .foffices_i:last-child {
      margin-bottom: 30px;
   }

   #slideHome .items .content {
      position: relative;
      bottom: unset;
      padding: 20px 0;
   }

   #slideHome .items .img {
      overflow: hidden;
   }

   #camket .item {
      margin-bottom: 15px;
   }

   #recruit .pc {
      display: none;
   }

   #recruit .mobile {
      display: block;
   }

   #recruit .mobile .item {
      padding: 10px;
      box-shadow: 0px 0px 5px #ccc;
      position: relative;
   }

   #recruit .mobile .item .title a {
      display: block;
      margin-top: 10px;
      color: var(--text-color);
      text-decoration: none;
   }

   #recruit .mobile .item .title a:hover {
      color: #fd9308;
   }
}