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

/* DEFAULT NO BORDER AND LINE-THROUGH */
.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;
}

.pb-0 {
  padding-bottom: 0 !important;

  @media screen and (max-width: 768px) {
    padding-bottom: 30px !important;
  }
}

/* END */
.sec-banner {
  .section-content {}

  .custom-col {
    .col-inner {
      background: rgba(15, 76, 133, 0.60);
      display: flex;
      flex-direction: column;
      align-items: center;
      height: 680px;
      justify-content: center;
      width: 100%;
      padding-left: 20%;
      padding-right: 5%;

      h1 {
        strong {
          color: #FFF;
          font-family: 'Raleway';
          font-size: 60px;
          font-style: normal;
          font-weight: 700;
          line-height: 100%;
          /* 60px */
          letter-spacing: 0.6px;
        }

        display: flex;
        align-self: stretch;
        flex-direction: column;
        color: #FFF;
        font-family: 'Raleway';
        font-size: 50px;
        font-style: normal;
        font-weight: 600;
        line-height: 130%;
        /* 65px */
        letter-spacing: 0.5px;
      }

      p {
        color: #FFF;
        font-family: "Open Sans";
        font-size: 20px;
        font-style: normal;
        font-weight: 400;
        line-height: 140%;
        margin-bottom: 0;
        margin-top: 30px;
        /* 28px */
      }

      @media screen and (max-width: 768px) {
        height: 600px;
        padding: 20px;

        h1 {
          font-size: 30px;
          line-height: 40px;
        }

        p {
          font-size: 16px;
          line-height: 24px;

        }
      }
    }
  }
}

.sec-services {
  .section-content {
    .custom-col {
      .col-inner {
        display: flex;
        flex-direction: column;
        justify-content: center;
        height: 100%;
        background-color: #EAF4F6;
        padding-left: 30%;

        h3 {
          color: #00305B;
          font-family: 'Raleway';
          font-size: 36px;
          font-style: normal;
          font-weight: 700;
          line-height: 120%;
          margin-bottom: 10px;
        }

        p {
          color: #00305B;
          font-family: 'Raleway';
          font-size: 28px;
          font-style: normal;
          font-weight: 400;
          line-height: 120%;
          margin-bottom: 0;
        }

        @media screen and (max-width: 768px) {
          text-align: center;
          padding: 30px 0 !important;
        }
      }
    }

    .row-services {
      padding: 80px 50px;

      .info-service {
        padding-left: 28px;
        position: relative;

        &::before {
          content: "";
          position: absolute;
          left: 0;
          top: 5px;
          width: 12px;
          height: 12px;
          background-color: #41B7C4;
        }

        h3 {
          color: #012B51;
          font-family: "Open Sans";
          font-size: 20px;
          font-style: normal;
          font-weight: 400;
          line-height: 120%;
          margin-bottom: 5px;
        }

        p {
          color: #00305B;
          font-family: "Open Sans";
          font-size: 14px;
          font-style: normal;
          font-weight: 400;
          line-height: 120%;
          margin-bottom: 0;
        }
      }

      @media screen and (max-width: 768px) {
        padding: 30px 20px;
      }
    }
  }
}

.sec-rank {
  .custom-info {

    h3 {
      color: #FFF;
      text-align: center;
      font-family: Raleway;
      font-size: 36px;
      font-style: normal;
      font-weight: 500;
      line-height: 120%;
      /* 43.2px */
/*       margin-bottom: 0; */
    }

    p {
      color: #FFF;
      text-align: center;
      font-family: "Open Sans";
      font-size: 20px;
      font-style: normal;
      font-weight: 400;
      line-height: 130%;
/*       margin-bottom: 0; */

      &.text-k1 {
        margin-bottom: 35px !important;
        margin-top: 35px !important;
      }
    }
  }
}

.sec-img {
  display: flex;
  flex-flow: column;
  align-items: center;
  justify-content: center;
  height: 350px;
  background-image: url('../../uploads/2026/04/img-2.png');
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.sec-help {
  .text-custom {
    span {
      color: var(--fs-color-primary);
      text-align: center;
      font-family: 'Raleway';
      font-size: 32px;
      font-style: normal;
      font-weight: 700;
      line-height: 140%;
      /* 44.8px */
    }
  }

  .item-help {
    .col-inner {
      padding: 35px 30px;
      border: 1px solid #0F4C85;
      background: #F6FDFF;

      .content-text {
        display: flex;
        align-items: center;
        gap: 15px;

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

          /* heading/desktop/Heading 3 */
          font-family: "Open Sans";
          font-size: 40px;
          font-style: normal;
          font-weight: 600;
          line-height: 120%;
          width: max-content;
          margin-bottom: 0;
        }

        p {
          color: var(--fs-color-primary);

          /* common/body 1 */
          font-family: "Open Sans";
          font-size: 18px;
          font-style: normal;
          font-weight: 400;
          line-height: 120%;
          /* 21.6px */
          margin-bottom: 0;
        }
      }

      &:hover {
        background: var(--fs-color-primary);
        cursor: pointer;

        h3,
        p {
          color: #fff;
        }
      }
    }
  }
}

.sec-solutions {
  .custom-text {
    span {
      color: var(--fs-color-primary);
      text-align: center;
      font-family: Raleway;
      font-size: 32px;
      font-style: normal;
      font-weight: 700;
      line-height: 140%;
      /* 44.8px */
    }
  }

  .custom-img-box {
    .col-inner {
      .box {
        .box-text {
          padding: 0;
          position: relative;

          .box-text-inner {
            display: flex;
            align-items: center;
            padding-left: 50px;

            &::before {
              content: "";
              position: absolute;
              left: 50px;
              bottom: 0;
              width: calc(100% - 50px);
              height: 1px;
              background-color: rgba(15, 76, 133, 0.20);
            }

            h3 {
              color: #373737;
              font-family: "Open Sans";
              font-size: 20px;
              font-style: normal;
              font-weight: 400;
              line-height: 140%;
              margin-bottom: 0;
              text-transform: capitalize;
              width: max-content;

            }

            p {
              color: #131313;
              font-family: "Open Sans";
              font-size: 20px;
              font-style: normal;
              font-weight: 600;
              line-height: 140%;
              padding-left: 20%;
              text-transform: capitalize;
              margin-bottom: 0;
            }
          }
        }
      }

      &:hover {
        cursor: pointer;

        .box-image {
          img {
            transform: scale(1.1);
            transition: transform 0.3s ease;
          }
        }

        .box-text {
          .box-text-inner {
            &::before {
              height: 3px;
              background-color: rgba(15, 76, 133, 0.20);
            }

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

      @media screen and (max-width: 768px) {
        .box-text-inner {
          flex-direction: column;
          align-items: flex-start;
          padding: 30px !important;

          &::before {
            display: none;
          }

          h3,
          p {
            padding-left: 0 !important;
          }
        }
      }
    }
  }
}

.wpcf7-spinner {
  display: none;
}

.sec-why {
  .custom-text {
    padding-left: 28%;
    margin-bottom: 0;

    span {
      margin-bottom: 0;
      color: var(--fs-color-primary);
      font-family: 'Raleway';
      font-size: 32px;
      font-style: normal;
      font-weight: 700;
      line-height: 140%;
      /* 44.8px */
    }

    @media screen and (max-width: 768px) {
      padding-left: 0 !important;
      text-align: center !important;

    }
  }

  .custom-col-right {
    .col-inner {
      padding-right: 5%;
    }
  }

  .custom-icon-box {
    .col-inner {
      .icon-box {
        display: flex;
        align-items: center;
        gap: 16px;
        padding: 30px 0;
        border-bottom: 1px solid rgba(15, 76, 133, 0.20);

        &:last-child {
          border-bottom: none;
        }

        h3 {
          color: #191919;
          font-family: "Open Sans";
          font-size: 20px;
          font-style: normal;
          font-weight: 400;
          line-height: 130%;
          width: 203px;
          /* 26px */
        }

      }
    }

    &.left {
      .icon-box {
        @media screen and (max-width: 768px) {
          border-bottom: 1px solid rgba(15, 76, 133, 0.20)!important;

        }
      }
    }

    &.right {
      .col-inner {
        border-left: 1px solid rgba(15, 76, 133, 0.20);
        padding-left: 30px;

        @media screen and (max-width: 768px) {
          border-left: none;
          padding-left: 0 !important;

        }
      }
    }
  }
}

.sec-contact {
  .custom-text {
    padding-left: 30%;
    padding-top: 15%;

    h3 {
      color: #FFF;
      font-family: Raleway;
      font-size: 50px;
      font-style: normal;
      font-weight: 700;
      line-height: 140%;

      margin-bottom: 8px
    }

    p {
      color: #FFF;
      font-family: Raleway;
      font-size: 28px;
      font-style: normal;
      font-weight: 600;
      line-height: 140%;
      margin-bottom: 0;
      text-transform: uppercase;
    }

    @media screen and (max-width: 768px) {
      padding: 50px 20px !important;

      h3 {
        font-size: 30px;
        line-height: 40px;
        text-align: center;
      }

      p {
        font-size: 16px;
        line-height: 24px;
        text-align: center;
      }

    }
  }

  .custom-col {
    .col-inner {
      height: 100%;
      background: rgba(2, 62, 118, 0.60);
      padding: 30px 50px;

      @media screen and (max-width: 768px) {
        padding: 15px;

      }

      .icon-box {
        margin-bottom: 10px;

        h3 {
          color: #FFF;
          font-family: "Open Sans";
          font-size: 16px;
          font-style: normal;
          font-weight: 400;
          line-height: 140%;
          /* 22.4px */
        }
      }

      .custom-icon-box {
        h3 {
          display: flex;

          align-items: start;
          gap: 10px;
          flex-wrap: nowrap;

          strong {
            width: max-content;
          }
        }
      }

      .text-contact {
        h3 {
          color: #FFF;
          font-family: "Open Sans";
          font-size: 20px;
          font-style: normal;
          font-weight: 600;
          line-height: 140%;
          margin-top: 50px;
          text-transform: capitalize;
          margin-bottom: 20px;
        }
      }

      /* Tổng thể form */
      .custom-contact-form {
        /* max-width: 600px; */
        /* Độ rộng tùy chỉnh */
        margin: 0 auto;
      }

      /* Định dạng các dòng nhập liệu */
      .custom-contact-form .form-group {
        margin-bottom: 25px;
      }

      /* Tùy chỉnh Input và Textarea */
      .custom-contact-form input[type="text"],
      .custom-contact-form input[type="email"],
      .custom-contact-form input[type="tel"],
      .custom-contact-form textarea {
        width: 100%;
        background: transparent;
        border: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.5);
        /* Màu gạch chân mờ */
        border-radius: 0;
        padding: 10px 0;
        color: #ffffff;
        /* Màu chữ người dùng nhập */
        font-size: 16px;
        outline: none;
        transition: border-color 0.3s ease;
      }

      /* Hiệu ứng khi click vào ô nhập */
      .custom-contact-form input:focus,
      .custom-contact-form textarea:focus {
        border-bottom: 1px solid #ffffff;
        box-shadow: none;
        /* Gạch chân sáng hơn khi focus */
      }

      /* Tùy chỉnh màu chữ của Placeholder (Chữ gợi ý) */
      .custom-contact-form ::placeholder {
        color: rgba(255, 255, 255, 0.8);
        font-weight: 300;
      }

      /* Tùy chỉnh nút Gửi */
      .custom-contact-form .form-submit {
        text-align: center;
        margin-top: 30px;
      }

      .custom-btn-submit {
        border-radius: 5px;
        background: #FFF;
        box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.16);
        padding: 14px 65px 14px 86px;
        color: var(--fs-color-primary);
        line-height: unset;
        position: relative;

        &::before {
          content: "";
          position: absolute;
          left: 40px;
          top: 0;
          width: 50px;
          height: 100%;
          background-image: url('../../uploads/2026/04/9333991-1.svg');
          opacity: 1;
          transition: opacity 0.3s ease;
          background-repeat: no-repeat;
          background-position: center;
          z-index: 1;
        }
      }

      .custom-contact-form input[type="submit"]:hover {
        background-color: #f0f0f0;
      }

      /* Xử lý khoảng cách cho textarea */
      .custom-contact-form textarea {
        height: 80px;
        resize: none;
      }
    }
  }
}

.absolute-footer,
.footer-widgets {
  display: none;
}

.sec-back-top {
  .button {
    margin-bottom: 0;
    background-color: var(--fs-color-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;

    color: #FFF;
    font-family: "Open Sans";
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%;

    /* 25.2px */
    i {
      font-size: 32px;
    }

    &:hover {
      box-shadow: none;
    }
  }
}

.wpcf7-response-output {
  color: #fff !important;
}

#top-link {
  display: none !important;
}