/*
Theme Name: Flatsome Child
Description: This is a child theme for Flatsome Theme
Author: UX Themes
Template: flatsome
Version: 3.0
*/

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

@media only screen and (max-width: 48em) {
  /*************** ADD MOBILE ONLY CSS HERE  ***************/
}

.btn-contact {
  background-color: #000;
  color: #fff;
  border-radius: 50px;
}
/* #masthead
  > div.header-inner.flex-row.container.logo-left.medium-logo-center
  > div.flex-col.hide-for-medium.flex-right
  > ul {
  gap: 40px;
} */

.col-ourCore {
  position: relative;
}

.col-ourCore > .col-inner {
  background: linear-gradient(180deg, white 60%, #faf8ea 100%);
  box-shadow: 0px -4px 4px rgba(198, 175, 44, 0.05);
}

.txt-number > p {
  color: #c6af2c;
  font-size: 64px;
  font-weight: 500;
  line-height: 76px;
  word-wrap: break-word;
}

.col-ourService > .col-inner {
  background: rgba(0, 0, 0, 0.3);
  outline: 1px white solid;
  outline-offset: -1px;
  /* flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start; */
  gap: 12px;
  /* display: inline-flex; */
}

.btn-learnMore {
  border: 1px solid #000;
}

.btn-learnMore:hover {
  background-color: #000 !important;
  color: #fff !important;
}

@media only screen and (min-width: 1023px) {
  .txt-number {
    position: absolute;
    left: -22px;
    top: 0;
    height: fit-content;
  }

  .row:nth-child(1) > .col-ourCore:nth-child(1) {
    margin-top: -100px;
  }

  .col-ourCore:nth-child(2) {
    margin-top: -80px;
  }

  .col-ourCore:nth-child(3) {
    margin-top: -60px;
  }

  .row:nth-child(2) > .col-ourCore:nth-child(1) {
    margin-top: -50px;
  }

  .row:nth-child(2) > .col-ourCore:nth-child(2) {
    margin-top: 0px;
  }
}

.col-ourService > .col-inner {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

.banner-contact {
  position: relative;
}

.subtract {
  position: absolute;
  top: 0;
  left: 0px;
  bottom: 0;
}

.service-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 60px;
}

.service-item {
  display: flex;
  align-items: center;
  gap: 12px;
}

.icon {
  flex: none;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.label {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 0;
  border-bottom: 1.5px solid rgba(255, 255, 255, 0.3);
  color: white;
  font-family: Montserrat, sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  word-wrap: break-word;
}

#wpcf7-f16-o1
  > form
  > div.flex-row.form-flat.medium-flex-wrap
  > div.flex-col.flex-grow
  > p
  > span
  > input {
  background-color: #fff;
}
#wpcf7-f16-o1
  > form
  > div.flex-row.form-flat.medium-flex-wrap
  > div.flex-col.ml-half
  > p
  > input {
  background-color: #000;
  margin-left: -50px;
}

.section-ourService > .section-bg > .section-bg-overlay {
  background: linear-gradient(to right, #000000, rgba(198, 175, 44, 0.9));
}

.address-fields > p {
  display: flex;
  gap: 8px;
  margin-bottom: 24px;
}

.col-formContact > .col-inner {
  display: flex;
  justify-content: center;
}

#wpcf7-f16-o2
  > form
  > div.flex-row.form-flat.medium-flex-wrap
  > div.flex-col.flex-grow
  > p
  > span
  > input {
  background-color: #fff;
}

#wpcf7-f16-o2
  > form
  > div.flex-row.form-flat.medium-flex-wrap
  > div.flex-col.ml-half
  > p
  > input {
  background-color: #000;
  margin-left: -50px;
}

#wpcf7-f375-p100-o1 p {
  margin-bottom: 0;
}

/* Styling for all field labels */
#wpcf7-f375-p100-o1 label {
  display: block;
  color: rgba(0, 0, 0, 0.85); /* neutral-title color */
  font-size: 14px;
  font-family: Montserrat, sans-serif;
  font-weight: 500;
  line-height: 22px;
  margin-bottom: 8px; /* Space below each label */
}

/* Styling for all text input fields and textareas */
#wpcf7-f375-p100-o1 input[type="text"],
#wpcf7-f375-p100-o1 input[type="email"],
#wpcf7-f375-p100-o1 input[type="tel"],
#wpcf7-f375-p100-o1 textarea {
  width: 100%;
  padding: 5px 12px;
  background: white;
  border: 1px solid rgba(0, 0, 0, 0.15); /* Neutral-Border color */
  border-radius: 2px;
  box-sizing: border-box; /* Include padding and border in the element's total width */
  font-size: 14px;
  font-family: Roboto, sans-serif; /* Font for user input and placeholders */
  line-height: 22px;
}

/* Styling for placeholder text */
#wpcf7-f375-p100-o1 input::placeholder,
#wpcf7-f375-p100-o1 textarea::placeholder {
  color: rgba(0, 0, 0, 0.25); /* neutral-disable color */
}

/* Grouping for address fields (city/state, postal/country) */

#wpcf7-f375-p100-o1 .address-fields label {
  flex: 1 1 0; /* Distribute available space equally among fields */
}

/* Ensure consistent spacing for all form control wraps */
#wpcf7-f375-p100-o1 .wpcf7-form-control-wrap {
  display: block;
  margin-bottom: 24px;
}

/* Textarea specific height and resizing */
#wpcf7-f375-p100-o1 .wpcf7-textarea {
  min-height: 98px; /* Minimum height for the textarea */
  resize: vertical; /* Allow resizing only vertically */
}

/* Styling for Radio Buttons */
#wpcf7-f375-p100-o1 .wpcf7-list-item-label {
  color: rgba(0, 0, 0, 0.85); /* neutral-primary-text color */
  font-size: 12px;
  font-family: Montserrat, sans-serif;
  font-weight: 400;
  line-height: 20px;
  margin-left: 5px; /* Space between radio button and its label */
}

#wpcf7-f375-p100-o1 .wpcf7-list-item {
  display: flex;
  align-items: center;
  gap: 5px;
}

/* Custom styling for the radio button circles */
#wpcf7-f375-p100-o1 .wpcf7-list-item input[type="radio"] {
  appearance: none; /* Hide default radio button */
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 9999px; /* Make it circular */
  border: 1px solid rgba(0, 0, 0, 0.06); /* Border color for unchecked state */
  background-color: rgba(
    0,
    0,
    0,
    0.06
  ); /* Background color for unchecked state */
  position: relative;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  margin: inherit;
  margin-right: 5px;
}

#wpcf7-f375-p100-o1 .wpcf7-list-item input[type="radio"]:checked {
  border-color: #c6af2c; /* Border color when checked (yellow) */
  background-color: transparent; /* Transparent background when checked */
  margin: inherit;
  margin-right: 5px;
}

#wpcf7-f375-p100-o1 .wpcf7-list-item input[type="radio"]:checked::before {
  content: "";
  width: 15.75px; /* Size of the inner yellow dot */
  height: 15.75px;
  background-color: #c6af2c; /* Yellow color for the dot */
  border-radius: 9999px; /* Make the dot circular */
  display: block;
}

/* Layout for radio button options in a row */
#wpcf7-f375-p100-o1 .wpcf7-radio {
  display: flex;
  flex-wrap: wrap; /* Allow wrapping if space is limited */
  gap: 12px; /* Space between individual radio options */
}

/* Styling for the Submit button */
#wpcf7-f375-p100-o1 input[type="submit"] {
  width: 100%;
  padding: 13px 20px;
  background: #f0f0f0; /* Color-Gray-100 */
  border-radius: 999px;
  border: none; /* Remove default border */
  color: rgba(0, 0, 0, 0.25); /* neutral-disable color for text */
  font-size: 14px;
  font-family: Montserrat, sans-serif;
  font-weight: 500;
  text-transform: uppercase;
  line-height: 22px;
  cursor: pointer;
  transition: background-color 0.3s ease; /* Smooth hover effect */
  font-weight: bold;
}

#wpcf7-f375-p100-o1 input[type="submit"]:hover {
  background-color: #e0e0e0; /* Slightly darker grey on hover */
}

#wpcf7-f375-p100-o1 .grecaptcha-badge {
  visibility: hidden;
}

/* Target the specific form by its ID */
#wpcf7-f375-p465-o1 {
  background: white; /* White background for the form area */
  display: flex;
  flex-direction: column;
  gap: 24px; /* Spacing between form field groups */
}

/* Hide default CF7 paragraph margins for cleaner layout */
#wpcf7-f375-p465-o1 p {
  margin-bottom: 0;
}

/* Styling for all field labels */
#wpcf7-f375-p465-o1 label {
  display: block;
  color: rgba(0, 0, 0, 0.85); /* neutral-title color */
  font-size: 14px;
  font-family: Montserrat, sans-serif;
  font-weight: 500;
  line-height: 22px;
  margin-bottom: 8px; /* Space below each label */
}

/* Styling for all text input fields and textareas */
#wpcf7-f375-p465-o1 input[type="text"],
#wpcf7-f375-p465-o1 input[type="email"],
#wpcf7-f375-p465-o1 input[type="tel"],
#wpcf7-f375-p465-o1 textarea {
  width: 100%;
  padding: 5px 12px;
  background: white;
  border: 1px solid rgba(0, 0, 0, 0.15); /* Neutral-Border color */
  border-radius: 2px;
  box-sizing: border-box; /* Include padding and border in the element's total width */
  font-size: 14px;
  font-family: Roboto, sans-serif; /* Font for user input and placeholders */
  line-height: 22px;
}

/* Styling for placeholder text */
#wpcf7-f375-p465-o1 input::placeholder,
#wpcf7-f375-p465-o1 textarea::placeholder {
  color: rgba(0, 0, 0, 0.25); /* neutral-disable color */
}

/* Grouping for address fields (city/state, postal/country) */
#wpcf7-f375-p465-o1 .address-fields {
  display: flex;
  gap: 8px; /* Space between fields in the same row */
  /* Remove the margin-bottom from the parent p tag if it exists */
  /* And re-add it to the .address-fields container directly */
  margin-bottom: 24px;
}

#wpcf7-f375-p465-o1 .address-fields p {
  margin-bottom: 0; /* Remove default margin from p tag inside .address-fields */
  display: flex; /* Make p tag a flex container */
  flex-wrap: wrap; /* Allow items to wrap */
  gap: 8px; /* Space between labels inside this p tag */
  width: 100%; /* Ensure it takes full width */
}

#wpcf7-f375-p465-o1 .address-fields p label {
  flex: 1 1 0; /* Distribute available space equally among labels inside address-fields p */
  margin-bottom: 0; /* No bottom margin for labels within this specific p tag */
}

/* Ensure consistent spacing for all form control wraps */
#wpcf7-f375-p465-o1 .wpcf7-form-control-wrap {
  display: block;
  margin-bottom: 24px; /* Default spacing below each form control */
}

/* Override margin-bottom for form controls specifically inside .address-fields, as the .address-fields parent already handles spacing */
#wpcf7-f375-p465-o1 .address-fields .wpcf7-form-control-wrap {
  margin-bottom: 0;
}

/* Textarea specific height and resizing */
#wpcf7-f375-p465-o1 .wpcf7-textarea {
  min-height: 98px; /* Minimum height for the textarea */
  resize: vertical; /* Allow resizing only vertically */
}

/* Styling for Radio Buttons */
#wpcf7-f375-p465-o1 .wpcf7-list-item-label {
  color: rgba(0, 0, 0, 0.85); /* neutral-primary-text color */
  font-size: 12px;
  font-family: Montserrat, sans-serif;
  font-weight: 400;
  line-height: 20px;
  margin-left: 5px; /* Space between radio button and its label */
}

#wpcf7-f375-p465-o1 .wpcf7-list-item {
  display: flex;
  align-items: center;
  gap: 5px; /* Space between the custom radio icon and text */
}

/* Custom styling for the radio button circles */
#wpcf7-f375-p465-o1 .wpcf7-list-item input[type="radio"] {
  appearance: none; /* Hide default radio button */
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 9999px; /* Make it circular */
  border: 1px solid rgba(0, 0, 0, 0.06); /* Border color for unchecked state */
  background-color: rgba(
    0,
    0,
    0,
    0.06
  ); /* Background color for unchecked state */
  position: relative;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0; /* Prevent shrinking */
  margin: inherit;
  margin-right: 5px;
}

#wpcf7-f375-p465-o1 .wpcf7-list-item input[type="radio"]:checked {
  border-color: #c6af2c; /* Border color when checked (yellow) */
  background-color: transparent; /* Transparent background when checked */
  margin: inherit;
  margin-right: 5px;
}

#wpcf7-f375-p465-o1 .wpcf7-list-item input[type="radio"]:checked::before {
  content: "";
  width: 15.75px; /* Size of the inner yellow dot */
  height: 15.75px;
  background-color: #c6af2c; /* Yellow color for the dot */
  border-radius: 9999px; /* Make the dot circular */
  display: block;
}

/* Layout for radio button options in a row */
#wpcf7-f375-p465-o1 .wpcf7-radio {
  display: flex;
  flex-wrap: wrap; /* Allow wrapping if space is limited */
  gap: 12px; /* Space between individual radio options */
}

/* Styling for the Submit button */
#wpcf7-f375-p465-o1 input[type="submit"] {
  width: 100%;
  padding: 13px 20px;
  background: #f0f0f0; /* Color-Gray-100 */
  border-radius: 999px;
  border: none; /* Remove default border */
  color: rgba(0, 0, 0, 0.25); /* neutral-disable color for text */
  font-size: 14px;
  font-family: Montserrat, sans-serif;
  font-weight: 500;
  text-transform: uppercase;
  line-height: 22px;
  cursor: pointer;
  transition: background-color 0.3s ease; /* Smooth hover effect */
}

#wpcf7-f375-p465-o1 input[type="submit"]:hover {
  background-color: #e0e0e0; /* Slightly darker grey on hover */
}

/* Hide the reCAPTCHA badge if you prefer it not to be visible */
#wpcf7-f375-p465-o1 .grecaptcha-badge {
  visibility: hidden;
}

#masthead
  > div.header-inner.flex-row.container.logo-left.medium-logo-center
  > div.flex-col.hide-for-medium.flex-right
  > ul
  > li.html.custom.html_nav_position_text
  > div
  > a {
  color: #fff !important;
  padding: 10px 20px !important;
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
}

.carousel {
  bottom: 0;
}

#masthead
  > div.header-inner.flex-row.container.logo-left.medium-logo-center
  > div.flex-col.hide-for-medium.flex-right
  > ul
  > li.html.custom.html_nav_position_text
  > div
  > a:hover {
  background-color: #fff;
  color: #000 !important;
  border: 1px solid #000 !important;
  transition: 0.3s ease-in-out;
}

.marquee {
  width: 100%;
  overflow: hidden;
  position: relative;
}

.marquee-content {
  display: flex;
  width: max-content;
  animation: scroll-marquee 10s linear infinite;
}

.marquee-content img {
  flex-shrink: 0;
  width: auto;
  height: 180px; /* hoặc chiều cao bạn muốn */
}

/* Animation chạy liên tục */
@keyframes scroll-marquee {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

.menu-item-type-post_type .nav-top-link {
  padding: 25px;
  box-sizing: border-box;
}

.menu-item-type-post_type .nav-top-link:hover {
  border-bottom: 3px solid #c6af2c !important;
}

.header-main,
.header.show-on-scroll,
.stuck .header-main {
  height: fit-content !important;
}

.nav > li {
  margin: 0;
}

.row-innerSectionSyncDifference {
  padding: 40px;
}

.col-firstcol-innerSectionSyncDifference {
  padding: 0 15px;
}

.col-innerSectionSyncDifference {
  margin-top: -1px;
}

/* accordion */
.dot-grid {
  width: 246px;
  height: 300px;
  position: relative;
}

.dot {
  position: absolute;
  width: 70px;
  height: 70px;
  background: var(--Primary-brand-Primary, #c6af2c);
  border-radius: 9999px;
  transition: all 0.5s ease;
}

/* Vị trí ban đầu */
.dot-1 {
  top: 0;
  left: 0;
}
.dot-2 {
  top: 0;
  left: 153.75px;
}
.dot-3 {
  top: 120px;
  left: 0;
}
.dot-4 {
  top: 120px;
  left: 153.75px;
}
.dot-5 {
  top: 244.84px;
  left: 0;
}
.dot-6 {
  top: 244.84px;
  left: 153.75px;
}

/* Khi mở CARE */
.active-care .dot-3,
.active-care .dot-4,
.active-care .dot-5,
.active-care .dot-6 {
  transform: scale(0.3);
}

/* Khi mở RESPECT */
.active-respect .dot-2,
.active-respect .dot-6 {
  transform: scale(0.3);
}

.active-respect .dot-1,
.active-respect .dot-3,
.active-respect .dot-4,
.active-respect .dot-5 {
  transform: scale(1);
}

/* Khi mở OPEN-MINDEDNESS */
.active-open-mindedness .dot-2,
.active-open-mindedness .dot-3,
.active-open-mindedness .dot-6 {
  transform: scale(0.3);
}

.active-open-mindedness .dot-1,
.active-open-mindedness .dot-4,
.active-open-mindedness .dot-5 {
  transform: scale(1);
}

/*Khi mở commitment*/
.active-commitment .dot-1,
.active-commitment .dot-2 {
  transform: scale(1);
}

.active-commitment .dot-3,
.active-commitment .dot-4,
.active-commitment .dot-5,
.active-commitment .dot-6 {
  transform: scale(0.3);
}

/*Khi mở integrity*/
.active-integrity .dot-2,
.active-integrity .dot-3 {
  transform: scale(1);
}

.active-integrity .dot-1,
.active-integrity .dot-4,
.active-integrity .dot-5,
.active-integrity .dot-6 {
  transform: scale(0.3);
}

a.plain {
  color: #000;
  font-size: 21px;
  padding-left: 20px;
}

.accordion-title {
  border-top: none;
  border-bottom: 2px solid #000;
}

.accordion .toggle {
  right: 0;
  left: unset;
  font-weight: 500;
}

.accordion-title[aria-expanded="true"] .toggle {
  transform: rotate(180deg);
  transition: transform 0.3s ease;
}
.accordion-title .toggle {
  transform: none !important;
  transition: none !important;
}

.accordion-title.active {
  color: #000;
  font-weight: normal;
}

div > div.service-list > div > div.label:hover {
  border-bottom: 1.5px solid rgba(255, 255, 255);
}

#wpcf7-f16-o2 > form > div.wpcf7-response-output,
#wpcf7-f16-o1 > form > div.wpcf7-response-output {
  color: gainsboro;
  margin-top: 50px;
}

.img-section-difference > div > img {
  width: fit-content !important;
}

.hover-line {
  display: inline-block;
  position: relative;
  cursor: pointer;
}

.hover-line span::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%) scaleX(0);
  transform-origin: center;
  width: 100%;
  height: 1px;
  background-color: #000;
  transition: transform 0.3s ease;
}

.hover-line:hover span::after {
  transform: translateX(-50%) scaleX(1);
}

.col-banner-aboutus {
  padding: 0;
}

.col-right-about {
  z-index: -1;
}

.absolute-footer {
  display: none;
}

.col-services {
  border-right: 1px solid #fff;
}

div > div > div > div:nth-child(1) > p {
  margin: 0;
}

.col-robes {
  border-right: 2px dashed #ccc;
  border-bottom: 2px dashed #ccc;
  padding-top: 30px;
}

.col-yarn {
  border-right: 2px dashed #ccc;
}

.col-towels {
  padding-top: 30px;

  border-bottom: 2px dashed #ccc;
}

.col-scissors {
  padding: 0px;
}

.col-polymers {
  min-height: 500px;
}

.col-polymers > .col-inner {
  height: 100%;
}

.row-polymers {
  /* flex-wrap: nowrap; */
  margin-bottom: 20px;
}

.row-solid .col:after {
  border: none;
}

.col-right-certi > .col-inner {
  padding: 0 !important;
  border: none !important;
}

.col-qualityControl {
  position: relative;
  padding: 0 !important;
}

.col-qualityControl > .col-inner {
  padding: 20px;
}

.row-qualityControl {
  flex-wrap: nowrap;
  gap: 20px;
}

#tab-polymers > a,
#tab-packaging > a {
  padding: 7px 20px;
  font-size: var(--Font-size-H4, 20px);
  font-style: normal;
  font-weight: 500;
  line-height: var(--Line-height-H4, 28px);
}

.flip-card {
  background-color: transparent;
  width: 100%;
  height: 100%;
  perspective: 1000px;
}

.flip-card-inner > .col-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.6s;
  transform-style: preserve-3d;
  border: 1px solid #ccc;
}

.flip-card:hover .flip-card-inner > .col-inner {
  transform: rotateY(180deg);
}

.flip-card-front,
.flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.flip-card-front {
  color: black;
  text-align: left;
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.flip-card-back {
  text-align: left;
  height: 100%;
  padding: 20px;
  background-color: #2980b9;
  color: black;
  transform: rotateY(180deg);
}

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

.list-polymers > li {
  font-size: 14px;
  margin: 0 !important;
}

.col-smartLighting,
.col-smartElectrician {
  padding-bottom: 0;
}

.banner-smartHomeProtocols {
  align-items: end !important;
}