/*
Theme Name: UDesign Child
Theme URI: https://d-themes.com/wordpress/udesign/envato-market/
Author: Andon
Author URI: https://1.envato.market/OdObz
Description: A slick, powerful and clean theme UDesign provides an intuitive set of options to help you setup your WordPress site quickly and effectively. Flexibility is key and it has been optimized for SEO and speed. It is also responsive & mobile ready should you choose that option. The UDesign theme features include: unlimited colors, widgetized home page, over 600 fonts to choose from, WooCommerce Integration, it is also translation and multilingual ready, step by step documentation, exclusive UDesign support forum and a helpful community. Always up-to-date security and many new features are constantly added as the theme evolves.
Version: 1.0
Template: u-design
License: GNU General Public License v2 and ThemeForest license
License URI: http://themeforest.net/licenses/regular_extended
Tags: woocommerce, corporate, responsive, one-column, two-columns, three-columns, four-columns, full-width-template, left-sidebar, right-sidebar, custom-menu, custom-background, custom-colors, custom-header, custom-logo, featured-images, flexible-header, microformats, post-formats, rtl-language-support, theme-options, translation-ready, accessibility-ready

*/

/*************** ADD YOUR CUSTOM CSS HERE  ***************/

/* Subsciber Form */
/* Áp dụng riêng cho form có class 'newsletter-inline' */
.newsletter-inline .elementor-form-fields-wrapper {
  display: flex; /* Bật Flexbox cho container chính */
  align-items: center; /* Căn giữa các mục con theo chiều dọc */
  gap: 0; /* Đảm bảo không có khoảng trống giữa các phần tử nếu chúng nằm cạnh nhau */
  position: relative; /* Quan trọng: làm điểm neo cho các phần tử con absolute */
  width: 100%; /* Đảm bảo wrapper chiếm đủ chiều rộng */
  overflow: hidden; /* Đảm bảo nút không tràn ra ngoài wrapper nếu có vấn đề */
  /* height: 48px; */ /* Bạn có thể đặt chiều cao cố định cho wrapper nếu muốn form luôn có chiều cao nhất định */
}

/* Đảm bảo trường email chiếm toàn bộ không gian và không bị đẩy xuống dòng */
.newsletter-inline .elementor-field-type-email {
  flex-grow: 1; /* Cho phép trường email mở rộng và chiếm không gian */
  flex-basis: 0; /* Quan trọng: Thiết lập kích thước cơ sở để flex-grow hoạt động đúng */
  width: auto; /* Ghi đè elementor-col-100 để không chiếm 100% nếu nó đang gây lỗi */
  position: relative; /* Rất quan trọng: Làm ngữ cảnh cho nút absolute bên trong nó */
  /*float: none; clear: none; */ /* Bỏ các thuộc tính float/clear của Elementor nếu có */
}

.newsletter-inline .elementor-field-type-email input {
  width: 100%; /* Input chiếm 100% của phần tử cha .elementor-field-type-email */
  padding-right: 120px; /* Tinh chỉnh khoảng trống cho nút. Có thể cần điều chỉnh */
  border-radius: 8px; /* Giữ bo tròn mà bạn đã có */
  /* position: relative; z-index: 2; và background-color: white; đã được chuyển xuống */
  background-color: white;
  height: 48px; /* Chiều cao cố định cho input */
  box-sizing: border-box; /* Đảm bảo padding không làm tăng tổng chiều rộng */
  padding-left: 15px; /* Giữ padding trái nếu có */
}

/* Đảm bảo nút submit nằm chồng lên input, cân đối và sát lề phải */
.newsletter-inline .elementor-field-type-submit {
  position: absolute; /* Quan trọng: Sử dụng absolute để nút nằm chồng lên */
  top: 50%; /* Căn giữa theo chiều dọc của phần tử cha .elementor-form-fields-wrapper (hoặc .elementor-field-type-email nếu bạn đặt nó là relative) */
  right: 0px; /* Đặt sát mép phải của .elementor-form-fields-wrapper hoặc .elementor-field-type-email */
  transform: translateY(-60%); /* Căn giữa hoàn hảo theo chiều dọc */
  margin: 0; /* Bỏ margin mặc định */
  z-index: 3; /* Cao hơn input */
  width: auto; /* Để nút có chiều rộng tự nhiên */
  padding: 0; /* Đảm bảo không có padding thừa đẩy nút ra xa */
  /* Ghi đè các thuộc tính column của Elementor nếu cần */
  flex-basis: auto;
  flex-grow: 0;
  flex-shrink: 0;
}

.newsletter-inline .elementor-button {
  padding: 10px 20px; /* Padding nội dung nút */
  border-radius: 6px; /* Bo tròn nút */
  cursor: pointer;
  height: 48px; /* Quan trọng: Đặt chiều cao nút bằng với chiều cao input */
  line-height: 1;
  display: flex; /* Để căn giữa nội dung nút */
  align-items: center;
  justify-content: center;
  /* Đảm bảo màu sắc nút khớp với thiết kế của bạn */
  background-color: #A00030; /* Ví dụ màu đỏ, thay đổi nếu cần */
  color: white;
  border: none; /* Bỏ viền nếu muốn nút liền khối với màu nền */
  box-sizing: border-box; /* Quan trọng để padding và border không làm tăng kích thước nút */
}

.newsletter-inline .elementor-button:hover {
  background-color: #CC003C; /* Màu khi hover */
}


/* Dành cho màn hình nhỏ hơn 600px (tablet + mobile) */
@media (max-width: 600px) {
  .newsletter-inline .elementor-form-fields-wrapper {
    flex-direction: column; /* Chuyển thành cột */
    gap: 10px; /* Khoảng cách giữa các phần tử khi xếp cột */
    overflow: visible; /* Cho phép tràn nếu cần ở mobile */
  }

  /* Reset lại thuộc tính để chúng chiếm 100% chiều rộng */
  .newsletter-inline .elementor-field-type-email,
  .newsletter-inline .elementor-field-type-submit {
    flex-basis: auto;
    flex-grow: 0;
    width: 100%; /* Đảm bảo chiếm toàn bộ chiều rộng */
  }

  .newsletter-inline .elementor-field-type-submit {
    position: static; /* Trở về vị trí bình thường */
    transform: none; /* Bỏ transform */
    z-index: auto; /* Reset z-index */
    text-align: center; /* Căn giữa nút khi nó là static */
  }

  .newsletter-inline .elementor-field-type-email input {
    padding-right: 15px !important; /* Không cần chừa chỗ cho nút */
    z-index: auto; /* Reset z-index */
  }

  .newsletter-inline .elementor-button {
    width: 100%;
    display: block;
    text-align: center;
  }
}