.elementor-285 .elementor-element.elementor-element-ddf74d3{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:60px;--padding-bottom:60px;--padding-left:60px;--padding-right:60px;}:root{--page-title-display:none;}/* Start custom CSS for html, class: .elementor-element-0c58515 */.xmt-contact-section {
    font-family: 'montserrat', sans-serif; /* Hoặc font chữ chính của website bạn */
    background-color: #FAF7F2; /* Màu nền beige nhạt như hình ảnh */
    padding: 40px 20px;
    color: #333;
  }

  .xmt-contact-section * {
    box-sizing: border-box;
  }

  .xmt-top-info-container {
    display: flex;
    justify-content: space-around;
    align-items: flex-start;
    flex-wrap: wrap;
    margin-bottom: 40px;
    padding-bottom: 30px;
    border-bottom: 1px solid #e0e0e0;
  }

  .xmt-info-item {
    text-align: center;
    margin: 15px;
    flex-basis: 250px; /* Cho phép các item co giãn */
  }

  .xmt-info-item .icon {
    font-size: 24px;
    color: #2A5B5C; /* Màu teal đậm cho icon */
    margin-bottom: 10px;
  }

  .xmt-info-item p {
    font-size: 15px;
    line-height: 1.6;
    color: #555;
    margin: 4px 0;
  }

  .xmt-form-title {
    font-size: 28px;
    font-weight: bold;
    color: #222; /* Màu chữ đậm hơn cho tiêu đề form */
    text-align: center;
    margin-bottom: 30px;
  }

  .xmt-contact-form .xmt-form-row {
    display: flex;
    flex-wrap: wrap;
    gap: 20px; /* Khoảng cách giữa các cột */
    margin-bottom: 20px;
  }

  .xmt-contact-form .xmt-form-group {
    flex: 1; /* Cho các group chiếm không gian đều nhau trong row */
    min-width: calc(50% - 10px); /* Cho layout 2 cột, trừ đi gap */
  }
    /* Cho field textarea chiếm full width */
  .xmt-contact-form .xmt-form-group.full-width {
    min-width: 100%;
  }


  .xmt-contact-form label {
    display: block;
    font-size: 14px;
    color: #444;
    margin-bottom: 8px;
    font-weight: 600;
  }

  .xmt-contact-form label .required-star {
    color: red;
  }

  .xmt-input-wrapper {
    position: relative;
  }

  .xmt-input-wrapper .input-icon {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: #777;
    font-size: 16px;
  }

  .xmt-contact-form input[type="text"],
  .xmt-contact-form input[type="email"],
  .xmt-contact-form input[type="tel"],
  .xmt-contact-form select,
  .xmt-contact-form textarea {
    width: 100%;
    padding: 12px 15px 12px 45px; /* Tăng padding-left cho icon */
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 15px;
    background-color: #fff;
    color: #333;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
  }
  .xmt-contact-form select {
    padding-right: 30px; /* Chừa chỗ cho mũi tên của select */
    appearance: none; /* Xóa giao diện mặc định của select */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23777' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 15px center;
  }
    /* Đặc biệt cho textarea không cần icon cố định quá cao */
  .xmt-contact-form textarea {
     padding: 15px 15px 15px 45px; /* Giữ padding-left cho icon nếu có, hoặc 15px nếu không có icon */
    min-height: 120px;
    resize: vertical;
  }
  .xmt-input-wrapper .textarea-icon { /* Icon cho textarea, có thể đặt vị trí khác một chút */
      top: 18px; /* Điều chỉnh để phù hợp với dòng đầu của textarea */
      transform: none;
  }


  .xmt-contact-form input:focus,
  .xmt-contact-form select:focus,
  .xmt-contact-form textarea:focus {
    outline: none;
    border-color: #2A5B5C; /* Màu teal đậm khi focus */
    box-shadow: 0 0 0 2px rgba(42, 91, 92, 0.2);
  }

  .xmt-contact-form button[type="submit"] {
    background-color: #1E4D4F; /* Màu teal đậm cho nút */
    color: #fff;
    padding: 12px 30px;
    border: none;
    border-radius: 6px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s ease;
    display: block; /* Để căn giữa dễ hơn nếu cần */
    margin: 20px auto 0 auto; /* Căn giữa và cách lề trên */
  }

  .xmt-contact-form button[type="submit"] .btn-icon {
    margin-left: 8px;
  }

  .xmt-contact-form button[type="submit"]:hover {
    background-color: #2A5B5C; /* Sáng hơn một chút khi hover */
  }

    /* Responsive: cho màn hình nhỏ, các cột sẽ xếp chồng lên nhau */
  @media (max-width: 768px) {
    .xmt-contact-form .xmt-form-row {
        flex-direction: column;
        gap: 0; /* Xóa gap khi xếp chồng, vì margin-bottom của group đã có */
    }
    .xmt-contact-form .xmt-form-group {
        min-width: 100%;
        margin-bottom: 20px; /* Giữ khoảng cách khi xếp chồng */
    }
    .xmt-top-info-container {
        flex-direction: column;
        align-items: center;
    }
    .xmt-info-item {
        flex-basis: auto;
        width: 100%;
        max-width: 300px; /* Giới hạn chiều rộng trên mobile */
    }
  }/* End custom CSS */