@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap");

@font-face {
  font-family: "UVF BankGothic Md BT";
  src: url("../fonts/UVF-BankGothic-Md-BT.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

body {
  font-family: "Montserrat", sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: #333;
  background-color: #fff;
}

.container-width,
.full-width .ubermenu-nav,
.container,
.row {
  max-width: 100% !important;
}

#header {
  background-color: transparent;
  background-image: linear-gradient(
    rgba(66, 66, 66, 0.9) 0%,
    rgba(255, 255, 255, 0) 100%
  );
}

#header .header-bg-color {
  background-color: transparent;
  background-image: linear-gradient(
    rgba(66, 66, 66, 0.9) 0%,
    rgba(255, 255, 255, 0) 100%
  );
}

#header .header-wrapper {
  box-shadow: none !important;
}

#header .nav > li {
  margin: 0 15px;
}

#header .nav > li > a {
  font-size: 14px;
  color: #fff;
}

#header.transparent {
}

.main-title h2 {
  font-size: 40px;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 0;
}

.button.main-button {
  font-size: 16px;
  font-weight: 500;
  text-transform: uppercase;
  border-radius: 3px !important;
  color: var(--fs-color-primary) !important;
  height: 50px;
  line-height: 50px;
  background-color: #fff;
  margin: 0 auto;
  display: block;
  width: fit-content;
}

.box-text a:not(.button),
.box-text h1,
.box-text h2,
.box-text h3,
.box-text h4,
.box-text h5,
.box-text h6,
.box-text p {
  margin: 0;
  font-size: 100%;
}

#masthead .header-inner {
  padding: 0 75px;
}

/* home */
.section_about {
  padding-left: 65px;
  padding-right: 65px;
}

.section_about .button.main-button {
  background-color: var(--fs-color-primary);
  color: #fff !important;
  margin: 0;
}

.about-top {
  display: flex;
  align-items: center;
  gap: 40px;
}

.about-box {
  display: flex;
  align-items: center;
  gap: 20px;
}

.ab-title p {
  font-family: "UVF BankGothic Md BT", sans-serif;
  font-size: 75px;
  font-weight: 400;
  margin-bottom: 0;
}

.ab-content p {
  font-family: "UVF BankGothic Md BT", sans-serif;
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  line-height: 1.5em;
  margin-bottom: 0;
}

.about-center p {
  font-size: 36px;
  font-weight: 300;
  line-height: 1.3em;
  margin: 60px 0;
}

.home_duan .row {
  padding: 80px 65px 10px 65px;
}

.home_popup .section-content > .container {
  padding: 40px 80px 80px 80px;
}

.home_popup h2 {
  font-size: 40px;
  font-weight: 600;
  text-transform: uppercase;
  line-height: 1.3em;
  color: #fff;
}

.home_popup .button {
  font-size: 16px;
  font-weight: 500;
  text-transform: uppercase;
  border-radius: 3px !important;
  color: var(--fs-color-primary) !important;
  height: 50px;
  line-height: 50px;
}

.home_popup .message-box {
  padding: 60px 15px !important;
}

.section_news {
  padding-left: 65px;
  padding-right: 65px;
}

.section_news h2 {
  margin-bottom: 30px;
}

.section_news .row-slider .flickity-page-dots {
  bottom: -30px;
}

.section_news .main-button {
  background-color: var(--fs-color-primary) !important;
  color: #fff !important;
  margin-top: 50px;
}

.home_popup2 .section-content > .container {
  padding-top: 0;
  padding-bottom: 0;
}

.home_popup2 {
  margin-bottom: -40px;
}

/* post-item */
.post-item .box {
  background-color: #fff;
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
  border-radius: 0.5rem;
  overflow: hidden;
}

.post-item .post-meta {
  font-size: 14px;
  color: #000;
  opacity: 1;
  margin: 0.25rem 0;
}

.post-item .is-divider {
  display: none;
}

.post-item .box-text {
  padding: 20px;
}

.post-item .post-title a {
  font-size: 18px;
  font-weight: 600;
  text-transform: uppercase;
  line-height: 1.4em;

  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.post-item .box-text .button {
  font-size: 14px;
  font-weight: 600;
  color: var(--fs-color-primary);
}

/* thietke-inner */
.thietke-inner {
  position: relative;
  padding-top: 125%;
}

.thietke-inner img {
  bottom: 0;
  font-family: "object-fit: cover;";
  height: 100%;
  left: 0;
  -o-object-fit: cover;
  object-fit: cover;
  -o-object-position: 50% 50%;
  object-position: 50% 50%;
  position: absolute;
  right: 0;
  top: 0;
  width: 100%;
}

.thietke-inner .thietke-thumb:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: transparent;
  background-image: linear-gradient(180deg, #00000000 0%, #000000 100%);
  opacity: 0.3;
  z-index: 1;
}

.thietke-inner .box-content {
  position: absolute;
  bottom: 2rem;
  left: 0;
  right: 0;
  text-align: left;
  z-index: 1;
  padding: 0 1.25rem;
  transition: all 0.6s ease;
}

.thietke-inner .box-content h3 {
  color: #ffffff;
  font-size: 28px;
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1.4em;
}

.thietke-inner .box-content p {
  color: #ffffff;
  font-size: 16px;
  font-weight: 400;
  margin-bottom: 1.75em;
}

.thietke-inner .box-content .thietke-readmore {
  background-color: var(--fs-color-primary);
  color: #fff;
  padding: 0.75rem 1rem;
  border-radius: 0.25rem;
}

/* blog-single */
.single-post #main {
  background-color: #f4f4f4;
}

.blog-single > .row {
  max-width: 1280px !important;
}

.blog-single > .row .article-inner {
  background-color: #ffffff;
  padding: 20px;
}

.blog-single > .row .widget {
  background-color: #ffffff;
}

span.widget-title {
  background: var(--primary-color);
  display: block;
  color: #fff;
  padding: 12px;
  text-align: center;
  font-weight: 500;
  text-transform: uppercase;
}

.post_comments,
.widget .is-divider {
  display: none;
}

.recent-blog-posts-li .badge,
.recent-blog-posts-li .badge-inner {
  width: 100px;
  height: 70px;
}

.recent-blog-posts-li .flex-col.flex-grow {
  max-width: calc(100% - 100px);
}

.widget ul {
  padding: 8px;
  border: 1px solid var(--fs-color-primary);
}

.widget ul .mr-half {
  margin-right: 10px;
}

.recent-blog-posts a {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-word;
  font-weight: 500;
}

/* custom-page-title */
.custom-page-title {
  min-height: 550px;
  background-image: url(https://kientrucfirstcom.vn/wp-content/uploads/z7160315002633_1302d2952a7c51a0bae88830b6635186.webp);
  position: relative;
  background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    width: 100%;
    height: auto;
}

.custom-page-title .page-title {
  position: absolute;
  left: 50%;
  bottom: 30px;
  transform: translateX(-50%);
  width: max-content;

  font-size: 55px;
  font-weight: 500;
  text-transform: uppercase;
  line-height: 80px;
  background-color: #223b5fd4;
  padding: 0 40px;
  color: #fff;
}

.archive-page-header {
  display: none !important;
}

.blog-wrapper {
  padding: 45px;
}

.blog-wrapper #post-list > .row {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/*  */
.item-du-an {
  position: relative;
  border-radius: 0.5rem;
  overflow: hidden;
}

.item-du-an .box-image a::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  background-color: transparent;
  background-image: linear-gradient(180deg, #00000000 50%, #000000 100%);
  opacity: 0.7;
  transition: background 0.3s, border-radius 0.3s, opacity 0.3s;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.item-du-an-info {
  position: absolute;
  padding: 20px;
  left: 0;
  bottom: 0;
  z-index: 3;
  background-color: rgba(0, 0, 0, 0.5);
  width: 100%;
}

.item-du-an-info .item-title {
  font-family: "UVF BankGothic Md BT", sans-serif;
  color: #ffffff;
  font-size: 24px;
  font-weight: 500;
  text-transform: uppercase;
  line-height: 1.3em;
  text-shadow: 0px 0px 10px #000000;

  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 5px;
}

.item-du-an-meta {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  color: #fff;
  list-style: none;
  gap: 5px;
}

.item-du-an-meta li {
  margin: 0;
}

/* single-du-an */
.main-du-an {
  padding-top: 100px !important;
  margin-bottom: 80px !important;
}

.swiper-gallery-wrapper {
  max-width: 1200px;
  padding: 0 15px;
  margin: 0 auto;
  margin-bottom: 80px;
}

.thumb-inner {
  position: relative;
  padding-top: 56.25%;
  background-position: 50% 50%;
  background-size: cover;
  height: auto;
  overflow: hidden;
  position: relative;
}

.thumb-inner img {
  bottom: 0;
  font-family: "object-fit: cover;";
  height: 100%;
  left: 0;
  -o-object-fit: cover;
  object-fit: cover;
  -o-object-position: 50% 50%;
  object-position: 50% 50%;
  position: absolute;
  right: 0;
  top: 0;
  width: 100%;
}

.swiper-button-next:after,
.swiper-rtl .swiper-button-prev:after,
.swiper-button-prev:after,
.swiper-rtl .swiper-button-next:after {
  display: none;
  content: unset;
}

.swiper-button-next i,
.swiper-button-prev i {
  font-size: 40px;
  padding: 0em;
  border-radius: 8%;
  color: #ffffff;
  background-color: #223b5f00;
}

.gallery-top {
  margin-bottom: 10px;
}

.content-wrapper {
  padding: 0 80px;
}

.single-du-an h1.du-an-title {
  font-size: 40px;
  font-weight: 700;
  text-transform: uppercase;
}

.socials-box {
  border-radius: 0.25rem;
  overflow: hidden;
  position: relative;
}

.socials-box::before {
  content: "";
  background-color: var(--fs-color-primary);
  opacity: 0.8;
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 1;
  border-radius: 0.25rem;
}

.socials-content {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  transform: translate(-50%, -50%);
  min-width: 300px;
}

.socials-content h3 {
  font-size: 28px;
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1.3em;
  color: #ffffff;
}

.socials-content p {
  color: #ffffff;
  font-size: 14px;
}

.socials-content a {
  background-color: #fff;
  height: 40px;
  width: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  border-radius: 0.25rem;
}

.socials-content .social-icons {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.form-box {
  background-color: var(--fs-color-primary);
  padding: 40px 20px;
  border-radius: 0.25rem;
  color: #ffffff;
}

.form-box h3 {
  font-size: 28px;
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1.3em;
  color: #ffffff;
}

.form-box .wpcf7 label {
  font-weight: 400;
  color: #ffffff;
}

.form-box .wpcf7 input,
.form-box .wpcf7 select,
.form-box textarea {
  height: 42px;
  border-radius: 0.25rem;
  box-shadow: none !important;
}

.form-box textarea {
  height: 100px;
}

.form-box .wpcf7 input[type="submit"] {
  background-color: #fff;
  color: var(--fs-color-primary);
  margin: 0 auto;
  display: block;
}

.form-box .wpcf7-spinner {
  display: none;
}

.single-du-an .col-right {
  padding-left: 80px;
}

.thong-tin-du-an {
  margin-bottom: 30px;
}

.thong-tin-item .icon-box {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 500;
}

.thong-tin-item .value {
  font-weight: 700;
}

.du-an-lien-quan .section-title {
  font-size: 40px;
  font-weight: 700;
  text-transform: uppercase;
}

.du-an-lien-quan .col {
  padding: 0;
}

/* section_contact */
.section_contact {
  background-color: transparent !important;
}

.section_contact .container {
  padding: 80px;
}

.section_contact .container > .row {
  margin-left: 0 !important;
  margin-right: 0 !important;
  background-color: var(--fs-color-primary);
  padding: 40px 60px;
}

.section_contact .container > .row .col {
  padding-bottom: 0;
}

.section_contact .container > .row .col .col {
  padding-bottom: 30px;
}

.section_contact .box-title h1 {
  font-size: 30px;
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1.3em;
  color: #fff;
  margin-bottom: 20px;
}

.section_contact .box-title p {
  font-size: 16px;
  font-weight: 400;
  text-transform: uppercase;
  line-height: 1.5em;
  color: #fff;
}

.section_contact .form-box {
  padding: 0;
}

.box-map p {
  margin: 0;
  margin-bottom: -10px;
}

#footer .section-content {
  padding: 180px 40px 80px 40px;
}

#footer .col {
  flex-basis: 20%;
  max-width: 20%;
}

#footer .button.icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}

#footer .social-icons {
  display: flex;
  align-items: center;
  gap: 10px;
}

#footer h3 {
  font-size: 20px;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 30px;
}

#footer ul {
  list-style: none;
  margin-bottom: 0;
}

#footer ul li {
  margin: 0;
  margin-bottom: 10px;
}

#footer ul li A {
  color: #fff;
}

.absolute-footer.dark {
  background-color: var(--fs-color-primary);
  border-top: 1px solid #fff;
}

#footer .ux-logo-link {
  padding: 0 !important;
}

@media only screen and (max-width: 48em) {
  .off-canvas-left.mfp-ready .mfp-content,
  .off-canvas-right.mfp-ready .mfp-content {
    background-color: #fff;
    width: 90%;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
  }

  .nav-icon.has-icon::before,
  .nav-icon.has-icon::after {
    display: none;
  }

  .off-canvas .nav-vertical > li > a {
    font-size: 16px;
    color: var(--fs-color-primary);
  }

  .off-canvas .nav-vertical > li > .toggle {
    color: var(--fs-color-primary);
  }

  .nav-vertical > li > ul li a {
    font-size: 16px;
    font-weight: 500;
    color: #000;
  }

  .blog-wrapper {
    padding: 30px 0;
  }

  .blog-wrapper #post-list > .row .col {
    padding-left: 0;
    padding-right: 0;
  }

  #masthead .header-inner {
    padding: 0 15px;
  }

  .custom-page-title {
    min-height: 300px;
  }

  .custom-page-title .page-title {
    font-size: 25px;
    line-height: 2.8em;
  }

  .content-wrapper {
    padding: 0;
  }

  .single-du-an h1.du-an-title {
    font-size: 28px;
    margin-bottom: 30px;
  }

  .swiper-gallery-wrapper {
    margin-bottom: 30px;
  }

  .thong-tin-du-an .col {
    padding-bottom: 10px !important;
  }

  .single-du-an .col-right {
    padding-left: 15px;
  }

  .du-an-lien-quan .section-title {
    font-size: 28px;
  }

  .section_contact .container {
    padding: 30px 15px;
  }

  .section_contact .container > .row {
    padding: 15px;
  }

  .section_contact .icon-box .icon-box-img {
    width: 30px !important;
  }

  .section_contact .container > .row .col .col {
    padding-left: 0;
    padding-right: 0;
  }

  .section_contact .box-title {
    margin-left: -10px;
  }

  .section_about {
    padding: 0 !important;
  }

  .about-top,
  .about-box {
    display: block;
  }

  .ab-title p {
    font-size: 50px;
  }

  .about-center p {
    font-size: 20px;
    margin: 30px 0;
  }

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

  .home_duan .row {
    padding: 30px 10px;
  }

  .home_popup .section-content > .container {
    padding: 15px;
  }

  .home_popup .section-content > .container .row {
    margin: 0 !important;
  }

  .home_popup h2 {
    font-size: 18px;
    line-height: 1.5em;
    text-align: center;
  }

  .section_news {
    padding: 30px 10px !important;
  }

  .section_news .main-title h2 {
    margin-left: 5px;
  }

  #footer .col {
    flex-basis: 100%;
    max-width: 100%;
  }

  #footer .section-content {
    padding: 90px 0 40px;
  }

  .home_banner .is-full-height {
    height: 80%;
  }
}