/*
Theme Name: VN theme
Description: Design by VN
Author: vn
Template: flatsome
Version: 3.0
*/

/*************** ADD CUSTOM CSS HERE.   ***************/

@charset "UTF-8";
@import "font-style.css";

/* ALL */

html {
  font-size: 10px;
}

body {
  overflow-x: hidden;
  /* Lưu ý lỗi với slider */
  line-height: 1.6;
  font-size: 1.6rem;
  font-family: 'Lato';
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin-bottom: 16px;
  letter-spacing: .5px;
  line-height: 1.3;
  font-weight: 600;
}



.banner h1,
.banner h2,
.banner h3 {
  font-weight: 600;
}

.banner h6,
.banner h5,
.banner p {
  margin-top: 0.5em;
  margin-bottom: 0.5em;
}

pre,
blockquote,
form,
figure,
p,
dl,
ul,
ol {
  margin-bottom: 16px;
}

.list-style-0 li {
  list-style: none;
  margin-left: 0 !important;
}

li {
  margin-bottom: 0.5em;
}

b,
strong {
  font-weight: 700;
}

.dark,
.dark p,
.dark td {
  color: #fff;
}

.italic {
  font-style: italic;
}

.sc-padding {
  padding-top: 8rem !important;
  padding-bottom: 5rem !important;
}

.col-inner p:last-child {
  margin-bottom: 0;
}

.round {
  border-radius: 2rem;
  overflow: hidden;
}

.round-1 {
  border-radius: 1rem;
  overflow: hidden;
}

.title-2 h1 {
  font-size: 4.8rem;
}

.title h3 {
  font-size: 2.4rem;
}


/* Header */

.nav-uppercase>li>a {
  font-weight: 500;
  font-size: 1.4rem;
}

#top-bar .flex-left,
#top-bar .flex-right {
  flex: 1;
}

.header-block .stack {
  align-items: center;
}

.header-block a.plain {
  color: #fff;
  font-size: 1.4rem;
}

#top-bar .featured-box .icon-box-img {
  width: 18px !important;
  display: flex;
  align-items: center;
}

#top-bar .featured-box .icon-inner {
  display: flex;
  align-items: center;
}

#top-bar .featured-box .icon-box-img svg {
  padding-top: 0;
}

#top-bar .featured-box.icon-box-left .icon-box-img+.icon-box-text {
  padding-left: .4rem;
}

.header-block h3 {
  font-weight: 400;
  color: #fff;
  font-size: 1.4rem;
}


.nav-dark .form-flat input:not([type=submit]) {
  color: #808080 !important;
  background-color: #fff !important;
  font-size: 1.4rem;
}

.nav-dark .form-flat input:not([type=submit])::placeholder {
  color: #808080;
}

#top-bar .searchform input,
#top-bar .searchform .button.icon {
  height: 2.6rem;
}

#top-bar .searchform .button.icon {
  width: 2.6rem;
}

#top-bar .searchform-wrapper.form-flat .flex-col:last-of-type {
  margin-left: 0;
}

.nav-dark .nav>li.header-divider {
  border-color: hsl(0deg 0% 100% / 50%);
  height: 2.4rem;
  margin: 0 1.6rem;
}

li.header-search-form {
  margin-right: 0;
}

/* End header */

/* Why TNC */
.banner .title h1,
.title h2 {
  font-size: 4rem;
  font-weight: 600;
}

.is-alt-font {
  font-family: 'GoodVibrations';
  font-weight: 400;
}

.sc-line-icon {
  padding: 2px 15px;
}

.sc-line-icon:after,
.sc-line-icon:before {
  content: '';
  background-color: var(--primary-color);
  width: 40%;
  height: 1px;
}

.sc-line-icon .line-icon {
  display: flex;
  padding: 0 !important;
  width: 6px;
  height: 6px !important;
  background-color: var(--primary-color);
  transform: rotate(45deg) skew(5deg, 5deg);
  margin-left: 8px !important;
  margin-right: 8px !important;
}

#footer .sc-line-icon:after,
#footer .sc-line-icon:before {
  background-color: #fff;
  width: 50%;
}

#footer .sc-line-icon .line-icon {
  border: 1px solid #fff;
  width: 7px;
  height: 7px !important;
}


/* Home page */

.video-hero {
  background-image: url('/wp-content/uploads/2024/03/hero-bg.jpg');
  background-size: cover;
  background-color: var(--fs-color-primary);
  /* background-image: url('/wp-content/uploads/2024/03/heror-image-scaled.jpg') var(--fs-color-primary) 50% 50% / conver no-repeat !important; */
}

.video-hero .banner-layers {
  max-width: 100%;
}

.featured--item p {
  margin-bottom: 0;
}

.featured--item p:first-child {
  font-size: 3.2rem;
}

.featured--item p:last-child {
  font-size: 2rem;
}

.home-story h4 {
  font-size: 4rem;
  font-weight: 400;
  line-height: 1.15;
}

.button {
  letter-spacing: 0.5px;
  color: #fff;
  font-weight: 600;
  padding-left: 1.5em;
  padding-right: 1.5em;
}

.button.primary:not(.icon),
.button.primary.is-outline {
  line-height: 3em;
  font-size: 1.4rem;
}

.home-story .section-bg {
  background: linear-gradient(180deg, #FFF 0%, rgba(255, 255, 255, 0.85) 79.14%, rgba(255, 255, 255, 0.32) 100%), url('/wp-content/uploads/2024/03/home-3-image-scaled.jpg') lightgray 50% 100% / cover no-repeat !important;
  background-blend-mode: lighten, normal;
}

.home-story .icon-box-img {
  font-size: 6.4rem;
  background-color: var(--primary-color);
  width: 1em !important;
  height: 1em;
  border-radius: 50%;
  line-height: 1em;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 2.4rem;
}

.home-story .icon-inner {
  display: flex;
}

.home-story svg {
  padding-top: 0;
}

.home-story .ux-logo-link {
  padding: 0 0 3.2rem 0 !important;
}

.title-3 h3 {
  font-size: 1.4rem;
}

.row-solid .col:before,
.row-solid .col:after {
  border-left: 2px solid var(--primary-color);
  border-color: var(--primary-color);
  height: 90%;
  left: -2px;
  width: auto;
}

.home-story .row-solid .col-inner {
  padding: 12px 24px;
}

.sc-home-intro .img {
  border-radius: 2rem;
  overflow: hidden;
  margin-bottom: 2.4rem !important;
}

.sc-home-intro .button.primary {
  font-size: 2rem;
  line-height: 2.8em;
  margin: 0;
}

.sc-home-intro .button.btn-normal {
  font-size: 1.4rem;
  line-height: 3.8571428571em;
  min-width: 14rem;
}

.sc-discover {
  padding-top: 8rem !important;
  padding-bottom: 5rem !important;
}

.sc-discover h2 {
  margin-bottom: 4px;
}

.sc-discover .section-bg-overlay {
  background: linear-gradient(180deg, #FFF 0%, rgba(255, 255, 255, 0.90) 36.5%, rgba(85, 127, 57, 0.79) 100%);
}

a.button.primary.--small {
  line-height: 1.857em;
  min-height: 1.857em;
  padding-left: 1.14285em;
  padding-right: 1.14285em;
}



/* Product */
.product-small .box-image::before {
  position: absolute;
  top: 0;
  left: -75%;
  z-index: 2;
  display: block;
  content: '';
  width: 50%;
  height: 100%;
  background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, .3) 100%);
  background: linear-gradient(to right, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, .3) 100%);
  -webkit-transform: skewX(-25deg);
  transform: skewX(-25deg);
}

.product-small .box-image:hover::before {
  -webkit-animation: shine .75s;
  animation: shine .75s;
}

@-webkit-keyframes shine {
  100% {
    left: 125%
  }
}

@keyframes shine {
  100% {
    left: 125%
  }
}

.banner-gradient {
  background: -webkit-linear-gradient(left, #F9FAFB 0, #EBEEF3 100%);
  background: linear-gradient(to right, #F9FAFB 0, #EBEEF3 100%);
}

.cat-banner .banner {
  border-radius: 2rem;
}



.cat-banner h3 {
  font-size: 2rem;
  font-weight: 600;
}

.cat-banner h4 {
  font-size: 1.4rem;
  color: #808080;
  font-weight: 400;
}

.sc-discover .form-flat input.search-field {
  background-color: #fff;
  border-color: #707070;
  font-size: 1.5rem;
}

.banner-meeting {
  border-radius: 2rem;
  overflow: hidden;
}

/* Form enquiry */
#enquiry-form {
  font-size: 1.4rem;
  color: #808080;
  text-align: left;
}

#enquiry-form input,
#enquiry-form select {
  border: none;
  border-bottom: 1px solid #999999;
  box-shadow: none;
  padding-left: .8rem;
  padding-right: 0.8rem;
  font-size: inherit;
  color: inherit;
  margin-bottom: 1.6rem;
}

#enquiry-form span[data-name="order-quantity"] {
  text-align: left;
}

#enquiry-form label {
  font-size: 1.6rem;
  font-weight: 600;
}

#enquiry-form span.wpcf7-list-item-label {
  color: #4D4D4D;
  font-weight: 400;
}

#enquiry-form textarea {
  box-shadow: none;
  border-radius: 5px;
  border-color: #CCCCCC;
  font-size: inherit;
  color: inherit;
  height: 22rem;
}

.wrap-submit {
  text-align: center;
  margin-top: 2rem;
}

#enquiry-form input.wpcf7-submit {
  border-radius: 1rem;
  padding: 0 2.4rem;
  margin: 0 0 1rem 0;
  line-height: 3.857em;
  color: #fff;
  border: none;
}

span.wpcf7-spinner {
  display: block;
  margin-left: auto;
  margin-right: auto;
}


.sc-slider-intro {
  --space-right: 8rem;
  --space-pd: 0;
}

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

.flickity-pagination .flickity-page-dots {
  counter-reset: a;
  right: 50%;
  left: auto;
  bottom: 0;
  display: flex;
  margin-right: var(--space-right);
}

.flickity-pagination .flickity-page-dots .dot::after {
  content: counter(a);
  counter-increment: a;
  font-size: 1.3rem;
  font-weight: 600;
}

.flickity-pagination .flickity-page-dots .dot {
  --dot-size: 3rem;
  width: var(--dot-size);
  height: var(--dot-size);
  line-height: var(--dot-size);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #CCCCCC;
  background-color: #E6E6E6;
  border-color: #E6E6E6;
  opacity: 1;
}

.flickity-pagination .flickity-page-dots .dot.is-selected {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
  color: #fff;
}

.home-slider--content .col-inner {
  max-width: 51.4rem;
  margin: 3.2rem var(--space-right) 0 auto !important;
  padding-bottom: 6rem !important;
}

.home-slider--content .ux-logo {
  margin-bottom: 4.8rem;
}

.home-slider--content .stack {
  margin-top: 4.8rem;
}

.home-slider--content .img {
  border-radius: 2rem;
  overflow: hidden;
}

.home-slider--content .col-inner:after,
.home-slider--content .col-inner:before {
  content: '';
  position: absolute;
  bottom: 0;
  left: var(--space-pd);
}

.home-slider--content .col-inner:before {
  background-color: var(--primary-color);
  height: 1px;
  width: 70%;
}

.home-slider--content .col-inner:after {
  width: 0;
  height: 0;
  border: 6px solid transparent;
  border-bottom-color: var(--primary-color);
}



/* Shop */
.pisol-mmq-container {
  color: #2a3f2e;
  background-color: transparent;
  padding: 0;
}

.button.add-to-enquiry {
  font-size: 1.2rem !important;
  text-transform: capitalize;
  letter-spacing: 0.05em;
  font-weight: 700;
  padding: 2px;
}

.product-info .button.add-to-enquiry {
  line-height: 3.5em;
  font-size: 1.6rem !important;
}

.message-container {
  display: none;
}


/* Blog */
.box-blog-post .is-divider {
  display: none;
}

.box-blog-post h5.post-title {
  letter-spacing: 0;
}

/* .box-blog-post h5.post-title { */
/*chỉnh 3 dòng đầu*/
/* --font-ss: 20px;
  --line-height: 1.5;
  --line-row: 2;
  font-size: var(--font-ss);
  line-height: var(--line-height);
  -webkit-line-clamp: var(--line-row);
  height: calc((var(--font-ss) * var(--line-height)) * var(--line-row));
  margin-bottom: 0.5em;
  text-transform: uppercase;
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical; */
/* } */

.post-title a {
  color: var(--wp--custom--experimental--link--color);
}

.post-title a:hover {
  color: var(--wp--preset--color--primary);
}

.sidebar-post .box-text {
  padding: 0 0 0 1.6rem;
}

.sidebar-post a {
  font-weight: 400;
}

.row.sidebar-post {
  padding: 0 1.5rem !important;
}

.sidebar-post .post-item {
  padding: 1rem 0;
}

.sidebar-post .post-item+.post-item {
  border-top: 1px solid #ececec;
}


.section-logo .flickity-prev-next-button {
  top: calc(50% - 38px / 2);
}

.section-logo .gallery-col {
  padding-bottom: 0 !important;
}

/* Story Page */
p.hello {
  font-size: 2rem;
}

.story-about .img {
  border-radius: 2rem;
  overflow: hidden;
}

.big-text p {
  font-size: 6.4rem;
  font-weight: 700;
}

.sc-core-value h2 {
  margin-bottom: 4.2rem;
}

.sc-core-value h3 {
  font-size: 1.4rem;
}

.dark .row-solid .col:before,
.dark .row-solid .col:after {
  border-color: #fff;
}

.sc-core-value .row-solid .col-inner {
  padding: 1rem 2.4rem;
}

.our-mission:not(:last-child) {
  margin-bottom: 1.8rem;
}

.avatar .box-image {
  border-radius: 2rem;
}

.avatar h5 {
  font-size: 2.4rem;
  margin-bottom: 0;
  font-weight: 600;
}

.avatar .box-text {
  padding: 3.2rem 1rem 0;
}

.avatar p {
  font-size: 2rem;
  color: #999999;
}

.sc-main-market .img {
  border-radius: 3rem;
  overflow: hidden;
}

.sc-materials .box-image {
  border-radius: 2rem;
}

.sc-materials .box-text {
  padding: 3.2rem 1.6rem 0;
}

.sc-materials h3 {
  margin-bottom: 8px;
  margin-top: 0;
  padding-left: 8px;
}

.story-about h2,
.our-factory h2 {
  margin-bottom: 8px;
}

.our-factory h3 {
  margin-bottom: 2.4rem;
}

.story-about h3 {
  margin-bottom: 3.2rem;
}




/* Sustainablitity */
.pb-48,
.sc-sustainability .row:not(:last-child) .col {
  padding-bottom: 4.8rem;
}

.pb-64 {
  padding-bottom: 6.4rem;
}

.dark textarea::placeholder {
  color: #fff;
}

/* Contact */
#contact-form .wpcf7-submit {
  text-transform: unset;
  padding: 0 4rem;
}



/* Footer */
.absolute-footer .footer-primary {
  float: unset;
  text-align: center;
}

/* .footer-1 .section-bg {
  background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(237, 237, 237, 1) 50%);
} */

#footer h4,
#footer h3 {
  font-size: 1.6rem;
  color: #fff;
}

#footer h3 {
  margin-bottom: 3.2rem;
}

#footer li,
#footer p,
#footer a {
  font-size: 1.6rem;
  color: #fff;
}

#footer .ux-menu-link--active a,
#footer a:hover {
  color: var(--wp--preset--color--secondary);
}

#footer .social-icons a,
.social-icons a {
  color: #fff;
}

#footer .img {
  max-width: 12rem;
}

a#top-link {
  width: 4rem;
  height: 4rem;
  line-height: 4rem !important;
  display: flex;
  justify-content: center;
  align-items: center;
}

#footer a#top-link:hover {
  color: #fff;
}

a#top-link i {
  text-align: center;
  display: flex;
  justify-content: center;
}

#top-link .icon-angle-up:before {
  width: 11px;
}

/* Ipad pro */
@media only screen and (max-width: 1100px) {
  .sc-slider-intro {
    --space-right: 2rem;
    --space-pd: 3rem;
  }

  .home-slider--content .col-inner {
    margin: 0 !important;
    padding: 0 var(--space-pd) 2rem !important;
  }

  .home-slider--content .col-inner:before {
    width: 60%;
  }

  .home-slider--content .ux-logo {
    margin-bottom: 1.8rem;
  }

  .home-slider--content .stack {
    margin-top: 1.8rem;
  }

}

/* Tablet */
@media only screen and (max-width: 970px) {

  .header-main {
    height: 10rem !important;
  }

  .banner .title h1,
  .home-story h4,
  .title h2 {
    font-size: 3.2rem;
  }

  .title-2 h1 {
    font-size: 3.8rem;
  }

  .title h3 {
    font-size: 2rem;
  }

  .home-story .icon-box-img {
    font-size: 5rem;
    width: 1.2em !important;
    height: 1.2em;
    line-height: 1.2em;
  }

  .home-story .row-solid .col-inner {
    padding: 12px 18px;
  }

  .sc-home-intro .button.primary {
    font-size: 1.4rem;
  }

  .sc-home-intro .button.btn-normal {
    line-height: 2.5em;
  }

  .home-slider--content .ux-logo-image {
    height: 26px !important;
  }

  h3 {
    font-size: 1.8rem;
  }

  .home-slider--content .col-inner {
    padding: 0 var(--space-pd) 4rem !important;
  }

  .home-slider--content .col-inner:before {
    width: 50%;
  }

  #footer h3 {
    min-height: 4.2rem;
    margin-bottom: 2rem;
  }

  #footer h4 {
    padding-top: 4.8px;
  }

  #footer .row .col:nth-child(2),
  #footer .row .col:nth-child(3) {
    flex-basis: 20%;
    max-width: 20%;
  }

  #footer .row .col:nth-child(4) {
    flex-basis: 35%;
    max-width: 35%;
  }

}

/* Mobile */
@media only screen and (max-width: 549px) {
  .header-main {
    height: 8rem !important;
  }

  .header-block .stack {
    flex-wrap: wrap;
    justify-content: center;
  }

  .header-block .text,
  .header-block .stack>.divider {
    display: none;
  }

  .nav>li>a>i.icon-menu {
    font-size: 2.6em;
  }

  .sc-discover {
    padding-top: 6rem !important;
    padding-bottom: 3rem !important;
  }

  .banner .title h1,
  .banner h2,
  .home-story h4,
  .title h2 {
    font-size: 2.6rem;
  }

  .title-2 h1 {
    font-size: 3.2rem;
  }

  .title h3 {
    font-size: 1.8rem;
  }

  .home-slider--content .col-inner:after,
  .home-slider--content .col-inner:before {
    content: none;
  }

  .flickity-pagination .flickity-page-dots {
    transform: translate(50%, calc(100% + 16px));
    margin-right: 0;
  }

  #enquiry-form textarea {
    height: 16rem;
  }

  #footer .row .col:nth-child(2),
  #footer .row .col:nth-child(3),
  #footer .row .col:nth-child(4) {
    flex-basis: 100%;
    max-width: 100%;
  }

  #footer h3 {
    min-height: inherit;
  }

  .big-text p {
    font-size: 5.4rem;
  }


  .video-button-wrapper a {
    font-size: 1.2em;
  }

  .row-solid .col:before,
  .row-solid .col:after {
    height: auto;
    left: 50%;
    right: 50%;
    transform: translateX(-50%);
    width: 90%;
  }

  .sc-padding {
    padding-top: 6rem !important;
    padding-bottom: 3rem !important;
  }

  .pb-48,
  .sc-sustainability .row:not(:last-child) .col {
    padding-bottom: 3rem;
  }

  .pb-64 {
    padding-bottom: 5rem;
  }
}