/**
 * Theme Name:     Hiroshi Lord
 * Author:         Hiroshi Lord
 * Template:       flatsome
 * Description:    Theme Build by Hiroshi Lord
 * Version:        2025
 */

/* DEFAULT NO BORDER AND LINE-THROUGH */
.wpcf7-spinner {
  display: none;
}

.section-title-center b {
  opacity: 0;
}

.section-title-normal {
  border-bottom: none;
}

.section-title-normal span {
  border-bottom: none;
}

.text-cap {
  span {
    text-transform: capitalize;
  }
}

.border-radius {
  border-radius: 8px;
  overflow: hidden;

  img {
    border-radius: 8px;
  }
}

.sec-footer {
  .custom-menu-white .ux-menu-link__text {
    color: #ffff !important;
    text-align: left !important;
  }
}

.text-overflow {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  /* Giới hạn tối đa 2 dòng */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  /* Hiện dấu ... nếu vượt quá */
  white-space: normal;
  /* Cho phép xuống dòng */

  a {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    /* Giới hạn tối đa 2 dòng */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    /* Hiện dấu ... nếu vượt quá */
    white-space: normal;
    /* Cho phép xuống dòng */
  }
}

.d-none {
  display: none !important;
}

.icon-angle-right {
  &::before {
    content: '\f061';
    font-family: 'Font Awesome 7 Free';
    font-weight: 900;
  }
}

/* END */

/*  */
.header-main {
  .header-inner {
    .flex-col {
      .header-nav-main {
        justify-content: center;

        .header-button-1 {
          a {
            border: 1px solid #3E9BDB;
            background: linear-gradient(90deg, #3E9BDB 0%, #006CD0 100%);
          }
        }
      }
    }
  }
}

.btn-linear {
  border-radius: 8px;
  border: 1px solid #3E9BDB !important;
  background: linear-gradient(90deg, #3E9BDB 0%, #006CD0 100%) !important;
}


.box-text-color-home {
  h3 {
    color: #1F4D6D;
    font-family: Inter;
    font-size: 24px;
    font-style: normal;
    font-weight: 600;
    line-height: 30px;
  }

  .title-color-home {
    color: #3E9BDB;
    font-size: 24px;
    font-weight: 600;
    line-height: 30px;
  }
}

.sec-banner-home {
  .row {
    .col {
      .col-inner {
        .box-text-banner-home {


          h1 {
            font-size: 32px;
            text-transform: capitalize !important;
            line-height: 40px;

            .title-linear-banner {
              background: linear-gradient(180deg, #F4FAFF 41.53%, #5CBDFF 100%);
              background-clip: text;
              -webkit-background-clip: text;
              -webkit-text-fill-color: transparent;
            }

          }

          p {
            display: flex;
            align-items: center;
            width: 40%;

            @media screen and (max-width:768px) {
              width: 100%;
              font-size: 14px;
            }
          }
        }
      }
    }
  }
}

.sec-partner-home {
  .row {
    .col {
      .col-inner {
        h3 {
          color: #1F4D6D;
          font-size: 24px;
          font-weight: 600;
          line-height: 30px;
        }

        .des-partner {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 60%;

          @media screen and (max-width:768px) {
            width: 100%;
          }
        }
      }
    }
  }
}

.btn-custom {
  border-radius: 8px !important;
  border: 1px solid #FFF !important;
  background: #FFF !important;
  padding: 4px 16px;
  color: #3E9BDB !important;

  span {
    color: #3E9BDB !important;
  }

  &:hover {

    border: 1px solid #3E9BDB !important;
    background: #3E9BDB !important;
    color: #fff !important;

    span {
      color: #fff !important;
    }
  }
}

.sec-service-home {
  .row {
    .col {
      .col-inner {
        .text {
          h3 {
            font-size: 24px;
          }
        }

        .custom-tab-home {
          .nav {
            max-height: 380px;
            overflow-y: auto;
            overflow-x: hidden;
            scrollbar-width: thin;
            /* Firefox */
            /* Firefox */
            scrollbar-width: thin;
            scrollbar-color: #aab7c4 transparent;
            scrollbar-gutter: stable;
            /* Reset counter cho danh sách */
            counter-reset: tab-counter;
            width: 35%;


            &::-moz-scrollbar-button {
              display: none !important;
            }

            /* Chrome / Edge / Safari */
            &::-webkit-scrollbar {
              width: 6px;
            }

            &::-webkit-scrollbar-thumb {
              background: #aab7c4;
              border-radius: 4px;
            }

            &::-webkit-scrollbar-track {
              background: transparent;
            }

            /* Mỗi tab tăng counter */
            li {
              counter-increment: tab-counter;
              position: relative;
              padding: 12px;
              padding-left: 60px;
              margin-bottom: 12px;
              border-top: 0;
              border-radius: 16px;

              a {
                &::before {
                  opacity: 0;
                }

                span {
                  color: #fff;
                }
              }

              /* Vòng tròn số */
              &::before {
                content: counter(tab-counter);
                position: absolute;
                left: 12px;
                top: 50%;
                transform: translateY(-50%);
                width: 40px;
                height: 40px;
                border-radius: 8px;
                background: rgba(62, 155, 219, 0.50);
                color: #fff;
                display: flex;
                align-items: center;
                justify-content: center;
                font-weight: 600;
                font-size: 15px;
                transition: all 0.2s ease;
              }

              /* Khi số >= 10 → tự scale nhỏ lại nhưng vẫn giữ hình tròn */
              &:is(:nth-child(n+10))::before {
                font-size: 11px;
                /* thu chữ lại */
                letter-spacing: -1px;
                /* tránh bị giãn */
              }

              &::after {
                content: '';
                position: absolute;
                right: 12px;
                display: flex;
                align-items: center;
                justify-content: center;
                width: 40px;
                height: 40px;
                font-family: 'fl-icons' !important;
                font-size: 16px;
                color: #fff;
                transition: all .25s;
              }

              &.active {
                background: rgba(62, 155, 219, 0.20);

                &::before {
                  background: #3E9BDB;
                }

                &::after {
                  transform: rotate(180deg);
                  transition: all .25s;
                }
              }

            }
          }

          .tab-panels {
            border-left: 0;
            max-height: 380px;
            height: 100%;

            .panel:not(.active) {
              display: none !important;
            }

            .entry-content {
              padding: 32px;
              border-radius: 16px;
              background: linear-gradient(180deg, #FFF 40.94%, #D2EDFF 100%);
              height: 430px;

              a.button {
                span {
                  font-size: 16px;
                }

                &:hover {
                  color: var(--fs-color-primary);
                }
              }
            }
          }
        }

        .custom-accordion {
          display: none;
          counter-reset: acc-counter;

          .accordion-item {
            counter-increment: acc-counter;

            .accordion-inner {
              border-radius: 0 0 16px 16px;
              background: linear-gradient(180deg, #FFF 40.94%, #D2EDFF 100%);
            }
          }

          .accordion-title {
            padding-left: 55px !important;
            border-top: none;
            padding: 24px;

            &::before {
              content: counter(acc-counter);
              position: absolute;
              left: 24px;
              top: 50%;
              transform: translateY(-50%);

              padding: 3px 10px;
              min-width: 32px;
              border-radius: 6px;

              background: #0a4b8f;
              color: #fff;
              font-size: 16px;
              font-weight: 600;

              display: inline-flex;
              justify-content: center;
              align-items: center;
              text-align: center;
            }

            .toggle {
              left: unset;
              right: 12px;
              top: 18px;

              i {
                color: #fff;
              }
            }

            span {
              color: #fff;
              padding-left: 24px;
              display: flex;
              font-size: 20px;
              font-weight: 400;
              width: 80%;
            }

            &.active {
              position: relative;
              border-radius: 16px 16px 0 0;
              background: rgba(62, 155, 219, 0.20);
            }
          }
        }

        @media (max-width: 1024px) and (min-width: 768px) {
          .custom-accordion {
            display: block;
          }
        }

        @media screen and (max-width:767px) {

          .custom-accordion {
            display: block;
          }
        }
      }
    }
  }
}

.sec-industry-home {
  .row {
    .col {
      .col-inner {

        .des-industry {
          display: flex;
          align-items: center;
          width: 70%;

          @media screen and (max-width:768px) {
            width: 100%;
          }
        }

        .custom-stack {
          display: grid !important;
          grid-template-columns: repeat(7, 1fr);
          gap: 24px;

          .icon-box {
            border-radius: 16px;
            border: 2px solid #FFF;
            background: linear-gradient(180deg, #FFF 40.94%, #D2EDFF 100%);
            /* box-shadow: 0 0 20px 0 rgba(0, 99, 166, 0.15); */
            padding: 16px 8px;
            width: 151px;
            height: 158px;

            &:hover {
              cursor: pointer;
              box-shadow: 0 0 20px 0 rgba(0, 99, 166, 0.15);

              h3 {
                color: var(--fs-color-primary);
              }
            }

            /* khoảng cách giữa các item, chỉnh tùy ý */
            h3 {
              font-size: 16px;
              font-weight: 400;
            }
          }

          @media (max-width: 1024px) {
            grid-template-columns: repeat(3, 1fr);
            gap: 24px;

            .icon-box {
              width: 100%;
            }
          }

          @media screen and (max-width:768px) {
            grid-template-columns: repeat(2, 1fr);
            gap: 24px;

            .icon-box {
              width: 100%;
            }
          }
        }
      }
    }
  }
}

.sec-solutions-home {
  .row {
    .col {
      .col-inner {
        .custom-stack {
          display: grid !important;
          grid-template-columns: repeat(4, 1fr);
          gap: 24px;

          .text {
            display: flex;
            width: 282px;
            padding: 32px 16px;
            justify-content: center;
            align-items: center;
            align-self: stretch;
            border-radius: 8px;
            border: 1px solid #296792;
            background: #296792;
            color: #fff;
          }

          @media screen and (max-width:768px) {
            grid-template-columns: repeat(2, 1fr);
            gap: 12px;

            .text {
              width: 100%;

              p {
                text-align: center;
              }
            }
          }
        }
      }
    }
  }
}

.sec-model-home {
  .row {
    .col {
      .col-inner {

        .box-text-color-home {
          p {
            display: flex;
            align-items: center;
            width: 80%;
            margin: auto;

            @media screen and (max-with:768px) {
              width: 100%;
            }
          }
        }

        .box {
          .box-text {
            h4 {
              color: #1F4D6D;
              font-size: 20px;
              font-weight: 600;
              line-height: 30px;
              padding-bottom: 12px;
            }

            p {
              color: #323232;
              font-size: 16px;
              font-weight: 400;
              line-height: 24px;
              /* 150% */
            }
          }
        }
      }
    }
  }
}

.sec-cta-home {
  background: linear-gradient(180deg, #003A71 0%, #3E9BDB 119.15%);

  .row {
    .col {
      .col-inner {
        a.button {
          margin: 0;
          background-color: #fff !important;
          color: #006CD0 !important;
          transition: all 0.25s;


          &:hover {
            border-radius: 8px;
            border: 1px solid #3E9BDB !important;
            background: #3E9BDB !important;
            color: #fff !important;
            transition: all 0.25s;
          }
        }
      }
    }
  }
}

.sec-case-home {
  .row {
    .col {
      .col-inner {
        .box {

          border-radius: 16px;
          border: 4px solid #FFF;
          box-shadow: 0 2px 20px 0 rgba(0, 99, 166, 0.30);
          background: linear-gradient(312deg, #E2F3FF -0.05%, #FFF 49.98%, #FFF 100%);
          overflow: hidden;

          .box-text {
            padding: 24px;

            h3 {
              color: #006CD0;
              font-size: 18px;
            }
          }
        }
      }
    }
  }
}

.sec-media-home {
  background: linear-gradient(180deg, #003A71 0%, #3E9BDB 119.15%);

  .row {
    .col {

      &.large-12 {
        .col-inner {
          .text {
            width: 80%;
            margin: auto;

            @media screen and (max-width:768px) {
              width: 100%;
            }
          }
        }
      }

      .col-inner {
        .testimonial-box {
          border-radius: 24px;
          border: 2px solid #FFF;
          background: linear-gradient(180deg, #FFF 40.94%, #D2EDFF 100%);
          overflow: hidden;
          padding: 32px;

          /* CSS hoàn chỉnh: dùng Grid để gom H3 + P một bên, A nằm 1 bên */
          .icon-box-text {
            display: grid;
            grid-template-columns: 1fr auto;
            /* cột trái: nội dung, cột phải: nút/link */
            column-gap: 16px;
            align-items: center;
            /* canh dọc giữa */
            width: 100%;

            h3 {
              grid-column: 1;
              grid-row: 1;
              margin: 0;
              line-height: 1.1;
            }

            p {
              grid-column: 1;
              grid-row: 2;
              margin: 0;
              font-style: italic;
              /* nếu muốn giữ kiểu italic như hình */
            }

            a {
              grid-column: 2;
              grid-row: 1 / span 2;
              justify-self: end;
              /* đẩy sang phải */
              align-self: center;
              white-space: nowrap;
              /* tránh xuống dòng */
            }

            h3+p {
              margin-top: 6px;
            }

            /* Responsive: trên màn nhỏ thì cho a xuống dòng phía dưới */
            @media (max-width: 600px) {
              .icon-box-text {
                grid-template-columns: 1fr;
                row-gap: 8px;
              }

              .icon-box-text a {
                grid-column: 1;
                grid-row: 3;
                justify-self: start;
              }
            }
          }

        }

      }

      &.custom-icon-box-4 {
        .col-inner {
          border-radius: 8px;
          border: 2px solid #FFF;
          background: linear-gradient(180deg, #FFF 40.94%, #D2EDFF 100%);
          box-shadow: 0 2px 20px 0 rgba(0, 99, 166, 0.30);
          padding: 24px;
          height: 225px;

          .icon-box {
            display: flex;
            align-items: center;
            margin-bottom: 12px;
          }

          p {
            margin-bottom: 0 !important;
          }
        }

        @media screen and (max-width:768px) {
          .col-inner {
            height: 100%;
          }
        }
      }
    }
  }
}

.sec-tech-home {
  .row {
    .col {
      .col-inner {
        .text {
          h3 {
            font-size: 24px;
          }
        }

        .custom-tab-home {
          .nav {
            /* max-height: 380px;
            overflow-y: auto;
            overflow-x: hidden;
            scrollbar-width: thin; */
            /* Firefox */
            /* Firefox */
            /* scrollbar-width: thin;
            scrollbar-color: #aab7c4 transparent;
            scrollbar-gutter: stable; */
            /* Reset counter cho danh sách */
            /* counter-reset: tab-counter; */
            width: 35%;


            &::-moz-scrollbar-button {
              display: none !important;
            }

            /* Chrome / Edge / Safari */
            &::-webkit-scrollbar {
              width: 6px;
            }

            &::-webkit-scrollbar-thumb {
              background: #aab7c4;
              border-radius: 4px;
            }

            &::-webkit-scrollbar-track {
              background: transparent;
            }

            /* Mỗi tab tăng counter */
            li {
              counter-increment: tab-counter;
              position: relative;
              padding: 12px;
              padding-left: 60px;
              margin-bottom: 12px;
              border-top: 0;
              border-radius: 16px;

              a {
                &::before {
                  opacity: 0;
                }

                span {
                  color: #fff;
                }
              }

              /* Vòng tròn số */
              &::before {
                content: counter(tab-counter);
                position: absolute;
                left: 12px;
                top: 50%;
                transform: translateY(-50%);
                width: 40px;
                height: 40px;
                border-radius: 8px;
                background: rgba(62, 155, 219, 0.50);
                color: #fff;
                display: flex;
                align-items: center;
                justify-content: center;
                font-weight: 600;
                font-size: 15px;
                transition: all 0.2s ease;
              }

              /* Khi số >= 10 → tự scale nhỏ lại nhưng vẫn giữ hình tròn */
              &:is(:nth-child(n+10))::before {
                font-size: 11px;
                /* thu chữ lại */
                letter-spacing: -1px;
                /* tránh bị giãn */
              }

              &::after {
                content: '';
                position: absolute;
                right: 12px;
                display: flex;
                align-items: center;
                justify-content: center;
                width: 40px;
                height: 40px;
                font-family: 'fl-icons' !important;
                font-size: 16px;
                color: #fff;
                transition: all .25s;
              }

              &.active {
                background: rgba(62, 155, 219, 0.20);

                &::before {
                  background: #3E9BDB;
                }

                &::after {
                  transform: rotate(180deg);
                  transition: all .25s;
                }
              }

            }
          }

          .tab-panels {
            border-left: 0;
            /* max-height: 380px; */
            height: 100%;

            .panel:not(.active) {
              display: none !important;
            }

            .entry-content {
              padding: 32px;
              border-radius: 16px;
              background: linear-gradient(180deg, #FFF 40.94%, #D2EDFF 100%);
              /* height: 430px; */

              .icon-box {
                .icon-box-text {
                  h3 {
                    color: #323232;
                    text-align: center;
                    font-family: Inter;
                    font-size: 16px;
                    font-style: normal;
                    font-weight: 400;
                    line-height: 24px;
                    /* 150% */
                  }
                }
              }
            }
          }
        }

        .custom-accordion {
          display: none;
          counter-reset: acc-counter;

          .accordion-item {
            counter-increment: acc-counter;

            .accordion-inner {
              border-radius: 0 0 16px 16px;
              background: linear-gradient(180deg, #FFF 40.94%, #D2EDFF 100%);
            }
          }

          .accordion-title {
            padding-left: 55px !important;
            border-top: none;
            padding: 24px;

            &::before {
              content: counter(acc-counter);
              position: absolute;
              left: 24px;
              top: 50%;
              transform: translateY(-50%);

              padding: 3px 10px;
              min-width: 32px;
              border-radius: 6px;

              background: #0a4b8f;
              color: #fff;
              font-size: 16px;
              font-weight: 600;

              display: inline-flex;
              justify-content: center;
              align-items: center;
              text-align: center;
            }

            .toggle {
              left: unset;
              right: 12px;
              top: 18px;

              i {
                color: #fff;
              }
            }

            span {
              color: #fff;
              padding-left: 24px;
              display: flex;
              font-size: 20px;
              font-weight: 400;
              width: 80%;
            }

            &.active {
              position: relative;
              border-radius: 16px 16px 0 0;
              background: rgba(62, 155, 219, 0.20);
            }
          }
        }

        @media (max-width: 1024px) and (min-width: 768px) {
          .custom-accordion {
            display: block;
          }
        }

        @media screen and (max-width:767px) {

          .custom-accordion {
            display: block;
          }
        }
      }
    }
  }
}

.sec-form-home {
  background: linear-gradient(180deg, #FFF 0%, #D3EDFF 100%);

  .row {
    .col {
      .col-inner {

        .cf7-flex {

          display: flex;
          flex-direction: column;
          gap: 18px;

          /* ==== ROW 2 COLUMNS ==== */
          .row-2col {
            display: flex;
            gap: 18px;

            .col-item {
              flex: 1;
              display: flex;

              p {
                width: 100%;
              }
            }
          }

          /* ==== PHONE GROUP ==== */
          .phone-group {
            display: flex;
            gap: 10px;
            width: 100%;

            .country {
              .country-select.inside {
                display: none;
              }

            }

            .phone {
              flex: 1;

              .wpcf7-validates-as-phonetext {
                padding-left: 76px;
              }
            }
          }

          /* ==== FULL WIDTH ==== */
          .row-full {
            width: 100%;
          }

          /* ==== SUBMIT BUTTON ==== */
          .submit-row {
            p {
              position: relative;

              input[type="submit"] {
                width: 100%;
                padding: 0;
                border: none;
                border-radius: 8px;
                border: 1px solid #3E9BDB;
                background: linear-gradient(90deg, #3E9BDB 0%, #006CD0 100%);
                color: #fff;
                font-size: 16px;
                font-weight: 500;
                cursor: pointer;
                text-transform: capitalize;
              }

              i {
                position: absolute;
                top: 16px;
                color: #fff;
                right: 45%;

                @media screen and (max-width:768px) {
                  right: 34%;
                }
              }
            }


          }

          /* ==== INPUT STYLES ==== */
          input,
          textarea,
          select {
            width: 100%;
            padding: 12px;
            border-radius: 8px;
            border: 1px solid #ddd;
            font-size: 15px;
            background: #fff;
            height: 48px;
          }

          /* ==== PLACEHOLDER ==== */
          ::placeholder {
            color: #9aa2b1;
            opacity: 1;
          }

          /* ==== RESPONSIVE ==== */
          @media (max-width: 640px) {

            .row-2col {
              flex-direction: column;
            }

            .phone-group {
              flex-direction: row;
            }
          }
        }


      }
    }
  }
}


#footer {
  .sec-footer {
    .custom-stack {
      @media screen and (max-width:991px) {
        display: flex;
        flex-wrap: wrap;

        .row:nth-child(1) {
          width: 100%;
          /* 1 cột chiếm nguyên hàng */
          order: 1;
        }

        .row:nth-child(2),
        .row:nth-child(3),
        .row:nth-child(4) {
          width: 33.333%;
          /* 3 col trên cùng 1 hàng */
          order: 2;
        }
        .row:nth-child(5) {
          width: 100%;
          /* 3 col trên cùng 1 hàng */
          order: 3;
        }
      }

      @media screen and (max-width:767px) {
        flex-direction: column;
      }

      .row {
        .col {
          .col-inner {
            .text {
              p {
                font-weight: 400 !important;
              }
            }
          }
        }
      }
    }
  }

  .absolute-footer {
    background: linear-gradient(90deg, #3E9BDB 0%, #006CD0 100%);

    .copyright-footer {
      color: #FFF;
      font-size: 16px;
      font-weight: 600;
      line-height: 24px;
      /* 150% */
    }
  }
}

.sec-cta-service {
  background: linear-gradient(180deg, #003A71 0%, #3E9BDB 119.15%);

  @media screen and (max-width:768px) {
    .large-4 {
      .col-inner {
        text-align: left;
      }
    }

  }
}