/*
 Theme Name:   Design by Da | Das Awesome Co., Ltd 
 Theme URI:    https://www.das-awesome.com/
 Description:  Developed by Design by Da | Das Awesome Co., Ltd 
 Author:       Design by Da | Das Awesome Co., Ltd 
 Author URI:   https://www.das-awesome.com/
 Template:     bricks
 Version:      1.0
 Text Domain:  bricks
*/

html {
  scroll-padding-top: 10vh;
}

/* Line Break */
.desktop-br {
  display: block;
}

.mobile-br {
  display: none;
}

@media screen and (max-width: 1200px) {
  .desktop-br {
    display: block;
  }

  .mobile-br {
    display: none;
  }
}

@media screen and (max-width: 1024px) {
  .desktop-br {
    display: none;
  }

  .mobile-br {
    display: block;
  }
}

@media screen and (max-width: 767px) {
  .desktop-br {
    display: none;
  }

  .mobile-br {
    display: block;
  }
}

/* Menu */
.brxe-nav-menu .bricks-mobile-menu {
  margin-top: 50px;
}

.splide__slide {
  overflow: hidden !important;
}

/* Font Size */
.fs-64 {
  font-size: 4rem;
}

.fs-56 {
  font-size: 3.5rem;
}

.fs-48 {
  font-size: 3rem;
}

.fs-40 {
  font-size: 2.5rem;
}

.fs-36 {
  font-size: 2.25rem;
}

.fs-32 {
  font-size: 2rem;
}

.fs-28 {
  font-size: 1.75rem;
}

.fs-26 {
  font-size: 1.625rem;
}

.fs-24 {
  font-size: 1.5rem;
}

.fs-20 {
  font-size: 1.25rem;
}

.fs-18 {
  font-size: 1.125rem;
}

.fs-16 {
  font-size: 1rem;
}

@media (max-width: 991px) {
  .fs-64 {
    font-size: 3.5rem;
  }

  .fs-56 {
    font-size: 3rem;
  }

  .fs-48 {
    font-size: 2.5rem;
  }

  .fs-40 {
    font-size: 2.125rem;
  }

  .fs-36 {
    font-size: 1.875rem;
  }

  .fs-32 {
    font-size: 1.75rem;
  }

  .fs-28 {
    font-size: 1.5rem;
  }

  .fs-26 {
    font-size: 1.375rem;
  }

  .fs-24 {
    font-size: 1.25rem;
  }

  .fs-20 {
    font-size: 1.125rem;
  }

  .fs-18 {
    font-size: 1rem;
  }

  .fs-16 {
    font-size: 0.9375rem;
  }
}

@media (max-width: 767px) {
  .fs-64 {
    font-size: 2.5rem;
  }

  .fs-56 {
    font-size: 2.125rem;
  }

  .fs-48 {
    font-size: 1.875rem;
  }

  .fs-40 {
    font-size: 1.625rem;
  }

  .fs-36 {
    font-size: 1.5rem;
  }

  .fs-32 {
    font-size: 1.375rem;
  }

  .fs-28 {
    font-size: 1.25rem;
  }

  .fs-26 {
    font-size: 1.125rem;
  }

  .fs-24 {
    font-size: 1.0625rem;
  }

  .fs-20 {
    font-size: 1rem;
  }

  .fs-18 {
    font-size: 0.875rem;
  }

  .fs-16 {
    font-size: 0.875rem;
  }
}

/* Global Overrides */
.brxe-text ul {
  margin-block-start: 0.5em;
  margin-block-end: 0.5em;
  padding-inline-start: 24px;
}

/* Quotation Form */
.ff-default .ff-el-form-control {
  font-family: "Kanit" !important;
}

.ff-btn-submit {
  background-color: var(--main-blue) !important;
  color: #ffffff;
}

.fluentform .ff-el-group {
  margin-bottom: 16px;
}

.fluentform .ff_t_c {
  padding: 0 0px 0 6px;
  color: #313131;
  font-weight: bold;
}

.fluentform .ff_t_c a {
  text-decoration: underline;
}

/* Buttons */
.brxe-button {
  transition: all 0.3s ease;
}

/* Articles */
.articles-loop .swiper-horizontal+.swiper-pagination-horizontal {
  transform: translate(0px, 16px);
}

.articles-loop .jet-listing-grid .jet-engine-swiper-pagination-wrapper .swiper-pagination-bullet.swiper-pagination-bullet-active {
  background: var(--main-blue) !important;
}

.articles-loop .jet-listing-grid .jet-engine-swiper-pagination-wrapper {
  display: flex;
  justify-content: center;
  background-color: var(--lighter-blue);
  width: max-content !important;
  margin-left: auto !important;
  margin-right: auto !important;
  border-radius: 100px;
  padding: 5px;
}

.articles-loop .jet-listing-grid .jet-engine-swiper-pagination-wrapper .swiper-pagination-bullet {
  background: var(--white);
}

.post-content-area .elementor-column-gap-default>.elementor-column>.elementor-element-populated {
  padding: 0;
}

.post-content-area :is(p, span, li, blockquote, div) {
  font-family: "Sarabun" !important;
  color: var(--dark);
}

.post-content-area h2,
.post-content-area h3,
.post-content-area h4,
.post-content-area h5,
.post-content-area h6 {
  font-family: "Kanit", sans-serif !important;
  margin-bottom: 16px;
  color: var(--main-blue);
}

.post-content-area h2 {
  font-size: 22px;
}

.post-content-area h3 {
  font-size: 20px;
}

.post-content-area h4 {
  font-size: 18px;
}

.post-content-area h5 {
  font-size: 17px;
}

.post-content-area h6 {
  font-size: 16px;
}

.addtoany_list a,
.widget .addtoany_list a {
  padding: 0;
}

@media (min-width: 992px) {
  .vertical-share {
    writing-mode: vertical-rl;
  }
}

/* Career Slider */
.career-slider div {
  border-radius: 28px;
}

/* Job Testimonial */
.job-testimonial.splide__list {
  align-items: stretch !important;
}

.job-testimonial .splide__slide {
  height: auto !important;
  display: flex;
  flex-direction: column;
}

.job-testimonial .splide__slide>div:first-child {
  flex-grow: 1;
}

@media (min-width: 992px) {
  .job-testimonial .splide__slide {
    transition: opacity 0.2s ease !important;
    transition-duration: 300ms;
  }

  .job-testimonial .splide__slide:not(.is-active) {
    opacity: 0.2 !important;
  }
}

/* Job Openings */
.jet-search-filter__input {
  background-image: url('https://tris.webdemo.best/wp-content/uploads/2026/04/search.svg');
  background-repeat: no-repeat;
  background-position: 16px center;/ background-size: 24px;
  padding-left: 48px;
}

/* FluentForm */
.fluentform,
.fluentform * {
  font-family: 'Kanit', sans-serif !important;
  box-sizing: border-box;
}

.ff-el-input--label label,
.ff-el-input--label span {
  font-family: 'Kanit', sans-serif !important;
  font-weight: 400 !important;
  font-size: 16px !important;
  line-height: 24px !important;
  color: var(--dark) !important;
  margin-bottom: 8px !important;
  display: inline-block;
}

.ff-el-input--label .ff-el-is-required.asterisk-right::after,
.ff-el-input--label .ff-el-is-required::after {
  color: var(--red) !important;
  font-family: 'Kanit', sans-serif !important;
  font-size: 16px !important;
}

.ff-el-form-control,
.fluentform input[type="text"],
.fluentform input[type="email"],
.fluentform input[type="tel"],
.fluentform input[type="number"],
.fluentform input[type="url"],
.fluentform input[type="password"],
.fluentform select,
.fluentform textarea {
  font-family: 'Kanit', sans-serif !important;
  font-weight: 400 !important;
  font-size: 16px !important;
  line-height: 24px !important;
  color: var(--dark) !important;
  background: #FFFFFF !important;
  border: 1px solid var(--lighter-blue) !important;
  border-radius: 4px !important;
  padding: 11px 20px !important;
  height: 46px !important;
  width: 100% !important;
  box-shadow: none !important;
  outline: none !important;
  transition: border-color 0.2s ease;
}

.fluentform textarea.ff-el-form-control {
  height: 150px !important;
  resize: vertical;
}

.fluentform input::placeholder,
.fluentform textarea::placeholder {
  color: var(--dark) !important;
  opacity: 0.5 !important;
  font-family: 'Kanit', sans-serif !important;
  font-size: 16px !important;
}

.fluentform .ff-el-section-break hr {
  display: none;
}

.ff-custom_html strong,
.ff-custom_html p {
  font-family: "Sarabun" !important;
}

.fluentform select option[value=""] {
  color: var(--dark);
  opacity: 0.5;
}

.fluentform select {
  color: var(--dark) !important;
  opacity: 0.5;
  appearance: auto;
}

.fluentform select:valid,
.fluentform select.has-value {
  opacity: 1 !important;
}

.ff-el-form-control:focus,
.fluentform input:focus,
.fluentform select:focus,
.fluentform textarea:focus {
  border-color: var(--secondary-blue) !important;
  box-shadow: 0 0 0 3px rgba(62, 144, 199, 0.12) !important;
  outline: none !important;
}

/* ─── Radio ─── */
.fluentform .ff-el-input--content {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 16px;
}

.fluentform .ff-el-form-check {
  margin: 0 !important;
  padding: 0 !important;
}

.fluentform .ff-el-form-check-label {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 8px !important;
  cursor: pointer !important;
  margin: 0 !important;
}

.fluentform .ff-el-form-check-input {
  appearance: none !important;
  -webkit-appearance: none !important;
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
  border: 1.5px solid var(--lighter-blue) !important;
  background: #FFFFFF !important;
  margin: 0 !important;
  padding: 0 !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  outline: none !important;
}

.fluentform .ff-el-form-check-input[type="radio"] {
  border-radius: 50% !important;
}

.fluentform .ff-el-form-check-input[type="checkbox"] {
  border-radius: 4px !important;
}

.fluentform .ff-el-form-check-input[type="radio"]:checked {
  background: var(--secondary-blue) !important;
  border-color: var(--secondary-blue) !important;
}

.fluentform .ff-el-form-check-input[type="checkbox"]:checked {
  background: var(--secondary-blue) !important;
  border-color: var(--secondary-blue) !important;
  position: relative;
}

.fluentform .ff-el-form-check-input[type="checkbox"]:checked::after {
  content: "" !important;
  position: absolute !important;
  left: 7px !important;
  top: 3px !important;
  width: 6px !important;
  height: 12px !important;
  border: solid white !important;
  border-width: 0 2px 2px 0 !important;
  transform: rotate(45deg) !important;
}

.fluentform .ff-el-form-check-label span {
  color: var(--dark) !important;
}

/* ─── Submit Button ─── */
.fluentform .ff-radio-group input[type="radio"] {
  appearance: none !important;
  -webkit-appearance: none !important;
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
  border: 1.5px solid var(--lighter-blue) !important;
  border-radius: 50% !important;
  background: #FFFFFF !important;
  cursor: pointer !important;
  padding: 0 !important;
  margin: 0 !important;
  transition: all 0.2s ease !important;
  outline: none !important;
}

/* ─── Submit Button ─── */

.ff-btn-submit,
.fluentform button[type="submit"] {
  font-family: 'Kanit', sans-serif !important;
  font-weight: bold !important;
  font-size: 18px !important;
  color: #FFFFFF !important;
  background: var(--red) !important;
  border: none !important;
  border-radius: 1000px !important;
  padding: 12px 36px !important;
  height: 51px !important;
  width: 100% !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 16px !important;
  box-shadow: none !important;
  transition: background 0.2s ease, transform 0.1s ease;
}

.ff-btn-submit:hover,
.fluentform button[type="submit"]:hover {
  background: #c72120 !important;
}

.ff-btn-submit:active,
.fluentform button[type="submit"]:active {
  transform: scale(0.99);
}

.fluentform .ff-btn {
  border-radius: 100px;
}


/* ─── Errors & Success ─── */

.fluentform .ff-errors-wrapper,
.fluentform .error,
.fluentform .ff-el-form-control+.error {
  font-family: 'Kanit', sans-serif !important;
  font-size: 13px !important;
  color: var(--red) !important;
  margin-top: 4px !important;
}

.fluentform .ff-message-success,
.fluentform .ff-success-message {
  font-family: 'Kanit', sans-serif !important;
  font-size: 16px !important;
  color: #04508E !important;
  background: #EAF5FF !important;
  border: 1px solid var(--lighter-blue) !important;
  border-radius: 8px !important;
  padding: 16px 20px !important;
}

/* Project Expansion */

.project-reference.is-expanded {
  max-height: 5000px;
  transition: max-height 0.6s ease;
}

.project-reference {
  max-height: 700px;
  overflow: hidden;
  transition: max-height 0.6s ease;
}

.project-reference:not(.is-expanded)::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 120px;
  background: linear-gradient(to bottom, transparent, var(--dark-blue));
  pointer-events: none;
}

.read-more-wrap {
  position: absolute;
  bottom: 10%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
}


/* Buttons */
.blur-arrow {
  backdrop-filter: blur(10px);
}

/* Links */
.link-box {
  transition: background-size 300ms ease-in-out;
  background-position: center;
  background-size: 110%;
}

.link-box:hover {
  background-size: 115% !important;
}

/* Tab */
.trust-in-tris-tab .brxe-active,
.trust-in-tris-tab [aria-selected="true"],
.trust-in-tris-tab .brxe-active *,
.trust-in-tris-tab [aria-selected="true"] * {
  color: #ffffff !important;
}

.trust-in-tris-tab .brxe-active img,
.trust-in-tris-tab [aria-selected="true"] img {
  border-color: transparent !important;
}

@media (max-width: 767px) {

  .trust-in-tris-tab.brxe-tab-menu,
  .trust-in-tris-tab .brxe-tab-menu {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
    width: 100vw !important;
    max-width: 100vw !important;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
  }

  .trust-in-tris-tab.brxe-tab-menu::-webkit-scrollbar,
  .trust-in-tris-tab .brxe-tab-menu::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    background: transparent !important;
    -webkit-appearance: none !important;
  }

  .trust-in-tris-tab.brxe-tab-menu>*,
  .trust-in-tris-tab .brxe-tab-menu>* {
    flex: 0 0 160px !important;
    white-space: normal;
  }

  .trust-in-tris-tab.brxe-tab-menu>*:first-child,
  .trust-in-tris-tab .brxe-tab-menu>*:first-child {
    margin-left: 20px !important;
  }

  .trust-in-tris-tab.brxe-tab-menu>*:last-child,
  .trust-in-tris-tab .brxe-tab-menu>*:last-child {
    margin-right: 20px !important;
  }
}

.one-tris-tab .brxe-active,
.one-tris-tab [aria-selected="true"],
.one-tris-tab .brxe-active *,
.one-tris-tab [aria-selected="true"] * {
  color: #ffffff !important;
}

.bottom-menu {
  flex-wrap: wrap;
}

/* Pagination */
.jet-filters-pagination__link {
  padding: 0 !important;
  text-align: center !important;
  min-width: 32px;
  height: 32px;
  border-radius: 100px;
  color: currentcolor;
  font-weight: bold;
  display: flex;
  justify-content: center;
  align-content: center;
  align-items: center;
}

.jet-filters-pagination__item.next {
  background-image: url('data:image/svg+xml;utf8,%3Csvg width="8" height="12" viewBox="0 0 8 12" fill="none" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M2.16602 11.5L7.66602 6L2.16602 0.5L0.882682 1.78333L5.09935 6L0.882682 10.2167L2.16602 11.5Z" fill="%23363636"/%3E%3C/svg%3E');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 8px 12px;
}

.jet-filters-pagination__item.prev {
  background-image: url('data:image/svg+xml;utf8,%3Csvg width="8" height="12" viewBox="0 0 8 12" fill="none" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M5.83398 0.5L0.333984 6L5.83398 11.5L7.11732 10.2167L2.90065 6L7.11732 1.78333L5.83398 0.5Z" fill="%23363636"/%3E%3C/svg%3E');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 8px 12px;
}

#brxe-mjgncz .jet-filters-pagination__dots {
  color: var(--main-blue);
  background-color: var(--lighter-blue);
}

/* WooCommere */
.woocommerce-info {
  border-radius: 4px;
}

/* Cart */
.woocommerce-cart-form .coupon input {
  border-radius: 4px !important;
  border-color: var(--lighter-blue);
}

.woocommerce-cart-form thead {
  border-color: var(--lighter-blue);
}

.cart-collaterals table {
  border-color: var(--lighter-blue);
}

.woocommerce-cart-form tbody tr {
  border-color: var(--lighter-blue);
}

body.woocommerce-cart .wc-proceed-to-checkout a.button.checkout-button {
  padding: 0px 20px;
  width: 100%;
  border-radius: 100px;
}

body.woocommerce-cart .woocommerce-cart-form .coupon button.button,
body.woocommerce-cart .woocommerce-cart-form .actions button.button {
  border-radius: 100px;
}

body.woocommerce-cart .woocommerce-cart-form .coupon button.button:hover,
body.woocommerce-cart .woocommerce-cart-form .actions button.button:hover {
  background-color: #c02c2c !important;
  color: #ffffff !important;
}

/* Checkout */
form.woocommerce-checkout.bricks-default-checkout,
.woocommerce-checkout-review-order {
  gap: 36px;
}

.woocommerce-billing-fields__field-wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.woocommerce-billing-fields__field-wrapper .form-row {
  box-sizing: border-box;

}

.woocommerce-billing-fields__field-wrapper .form-row-first,
.woocommerce-billing-fields__field-wrapper .form-row-last {
  width: 48%;
  flex: 0 0 48%;
}

.woocommerce-billing-fields__field-wrapper .form-row-wide {
  width: 100%;
  flex: 0 0 100%;
}

.woocommerce-checkout p.form-row {
  margin-block: 0 !important;
  margin-bottom: 15px !important;
  /* Set a strict, consistent bottom margin */
}

.woocommerce-checkout .thwcfe-checkout-heading,
.woocommerce-checkout h3 {
  width: 100% !important;
  flex: 0 0 100% !important;
  clear: both !important;
  margin-top: 25px !important;
  margin-bottom: 15px !important;
}

.woocommerce-checkout .woocommerce-shipping-fields {
  margin: 0px;
}

.woocommerce form .form-row label {
  color: var(--dark) !important;
}

.woocommerce form .form-row .required {
  color: var(--red) !important;
  text-decoration: none !important;
}

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce form .form-row .select2-container--default .select2-selection--single {
  background-color: #FFFFFF !important;
  color: var(--dark) !important;
  border: 1px solid var(--lighter-blue) !important;
  border-radius: 4px !important;
  box-shadow: none !important;
  outline: none !important;
  transition: border-color 0.2s ease !important;
}

.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus,
.woocommerce form .form-row .select2-container--default.select2-container--open .select2-selection--single,
.woocommerce form .form-row .select2-container--default.select2-container--focus .select2-selection--single {
  border-color: var(--secondary-blue) !important;
  box-shadow: 0 0 0 3px rgba(62, 144, 199, 0.12) !important;
}

.woocommerce form .form-row input.input-text[readonly],
.woocommerce form .form-row textarea[readonly],
.woocommerce form .form-row select[readonly],
.woocommerce form .form-row input.input-text:disabled,
.woocommerce form .form-row textarea:disabled,
.woocommerce form .form-row select:disabled,
.woocommerce form .form-row .select2-container--default.select2-container--disabled .select2-selection--single {
  background-color: #f2f4f6 !important;
  color: #9aa0aa !important;
  border-color: #dde1e7 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

.woocommerce form .form-row input.input-text[readonly]::placeholder,
.woocommerce form .form-row textarea[readonly]::placeholder,
.woocommerce form .form-row input.input-text:disabled::placeholder,
.woocommerce form .form-row textarea:disabled::placeholder {
  color: #9aa0aa !important;
  opacity: 1 !important;
}

.woocommerce form .form-row input.input-text::placeholder,
.woocommerce form .form-row textarea::placeholder {
  color: var(--dark) !important;
  opacity: 0.5 !important;
}

.woocommerce form input[type="radio"],
.woocommerce form input[type="checkbox"],
.woocommerce #payment input[type="radio"] {
  border: 1.5px solid var(--lighter-blue) !important;
  background-color: #FFFFFF !important;
  transition: all 0.2s ease !important;
}

.woocommerce form input[type="radio"]:checked,
.woocommerce form input[type="checkbox"]:checked,
.woocommerce #payment input[type="radio"]:checked {
  background-color: var(--secondary-blue) !important;
  border-color: var(--secondary-blue) !important;
}

.woocommerce #place_order,
.woocommerce button.button.alt {
  color: #FFFFFF !important;
  background-color: var(--red) !important;
  border: none !important;
  border-radius: 1000px !important;
  box-shadow: none !important;
  transition: background 0.2s ease, transform 0.1s ease !important;
}

.woocommerce #place_order:hover,
.woocommerce button.button.alt:hover {
  background-color: #c72120 !important;
}

.woocommerce #place_order:active,
.woocommerce button.button.alt:active {
  transform: scale(0.99) !important;
}

.woocommerce hr {
  opacity: 0.25 !important;
}

.woocommerce-checkout .woocommerce-checkout-payment,
.woocommerce-checkout .woocommerce-checkout-review-order-table {
  border: none;
}

.woocommerce-checkout .woocommerce-checkout-payment {
  background-color: var(--lighter-blue);
  border-radius: 12px;
}

.woocommerce-checkout #payment .payment_methods .payment_box {
  background-color: var(--white);
}

body.woocommerce-checkout #payment button#place_order {
  margin-top: 16px;
}

.woocommerce-checkout .shop_table tfoot,
.woocommerce-checkout .shop_table thead {
  border-bottom: 1px solid var(--lighter-blue);
}

.woocommerce-checkout form.checkout_coupon {
  background-color: var(--white);
  margin: 24px 0px 0px 0px;
  padding: 0px;
}

.woocommerce-form-coupon button {
  background-color: var(--red) !important;
  color: #ffffff !important;
  border-radius: 100px;
}

.woocommerce-form-coupon button:hover {
  background-color: #c02c2c !important;
}

.woocommerce-account .woocommerce-form-login:not([class^=brxe-]), .woocommerce-account .woocommerce-form-register:not([class^=brxe-]) {
    border-style: none;
    gap: 8px;
    padding: 30px 0 0 0;
}

.woocommerce-account .button {
	background-color: var(--main-blue);
  color: #ffffff !important;
  border-radius: 100px;
	margin-top: 8px;
}
.woocommerce-account .button:hover {
	background-color: var(--secondary-blue);
}

.training-meta { 
	display: flex; 
	flex-direction: column; 
	gap: 8px; 
}
.training-meta__row { 
	display: flex; 
	align-items: flex-start; 
	gap: 12px; 
}

.training-meta__row svg { 
	flex-shrink: 0; 
}
.training-meta__row span { 
	line-height: 1.5; 
}
.woocommerce button.button.alt {
	width: 100%;
}

form.cart .quantity, form.woocommerce-cart-form .quantity {
    display: flex;
    margin-top: auto;
    height: 40px;
}