.elementor-56 .elementor-element.elementor-element-a22429c{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:50px;--padding-bottom:50px;--padding-left:0px;--padding-right:0px;}.elementor-56 .elementor-element.elementor-element-7260b66{--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:0px;--padding-bottom:0px;--padding-left:10px;--padding-right:10px;}.elementor-widget-theme-post-featured-image .widget-image-caption{color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-56 .elementor-element.elementor-element-0691e45 img{width:100%;max-width:100%;}.elementor-widget-theme-post-title .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-widget-theme-post-content{color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-56 .elementor-element.elementor-element-e0b39e8{--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:0px;--padding-bottom:0px;--padding-left:10px;--padding-right:10px;}.elementor-widget-divider{--divider-color:var( --e-global-color-secondary );}.elementor-widget-divider .elementor-divider__text{color:var( --e-global-color-secondary );font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-widget-divider.elementor-view-stacked .elementor-icon{background-color:var( --e-global-color-secondary );}.elementor-widget-divider.elementor-view-framed .elementor-icon, .elementor-widget-divider.elementor-view-default .elementor-icon{color:var( --e-global-color-secondary );border-color:var( --e-global-color-secondary );}.elementor-widget-divider.elementor-view-framed .elementor-icon, .elementor-widget-divider.elementor-view-default .elementor-icon svg{fill:var( --e-global-color-secondary );}.elementor-56 .elementor-element.elementor-element-bcb598c{--divider-border-style:solid;--divider-color:#000;--divider-border-width:3px;}.elementor-56 .elementor-element.elementor-element-bcb598c .elementor-divider-separator{width:80%;margin:0 auto;margin-center:0;}.elementor-56 .elementor-element.elementor-element-bcb598c .elementor-divider{text-align:center;padding-block-start:2px;padding-block-end:2px;}.elementor-56 .elementor-element.elementor-element-bcb598c .elementor-divider__text{color:var( --e-global-color-primary );font-family:"Montserrat", Sans-serif;font-size:25px;font-weight:800;line-height:35px;}.elementor-widget-posts .elementor-button{background-color:var( --e-global-color-accent );font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-widget-posts .elementor-post__title, .elementor-widget-posts .elementor-post__title a{color:var( --e-global-color-secondary );font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-widget-posts .elementor-post__meta-data{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-widget-posts .elementor-post__excerpt p{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-widget-posts .elementor-post__read-more{color:var( --e-global-color-accent );}.elementor-widget-posts a.elementor-post__read-more{font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-widget-posts .elementor-post__card .elementor-post__badge{background-color:var( --e-global-color-accent );font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-widget-posts .elementor-pagination{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-widget-posts .e-load-more-message{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-56 .elementor-element.elementor-element-769935c{--grid-row-gap:35px;--grid-column-gap:30px;}.elementor-56 .elementor-element.elementor-element-769935c .elementor-posts-container .elementor-post__thumbnail{padding-bottom:calc( 0.55 * 100% );}.elementor-56 .elementor-element.elementor-element-769935c:after{content:"0.55";}.elementor-56 .elementor-element.elementor-element-769935c .elementor-post__thumbnail__link{width:100%;}.elementor-56 .elementor-element.elementor-element-769935c .elementor-post__meta-data span + span:before{content:"•";}.elementor-56 .elementor-element.elementor-element-769935c .elementor-post__card{border-radius:6px;}.elementor-56 .elementor-element.elementor-element-769935c .elementor-post__text{margin-top:20px;}.elementor-56 .elementor-element.elementor-element-769935c .elementor-post__badge{right:0;}.elementor-56 .elementor-element.elementor-element-769935c .elementor-post__card .elementor-post__badge{margin:20px;}.elementor-56 .elementor-element.elementor-element-769935c .elementor-post__title, .elementor-56 .elementor-element.elementor-element-769935c .elementor-post__title a{color:var( --e-global-color-primary );font-family:"Montserrat", Sans-serif;font-size:22px;font-weight:800;line-height:33px;}.elementor-56 .elementor-element.elementor-element-769935c .elementor-post__meta-data{font-family:"Montserrat", Sans-serif;font-size:12px;font-weight:400;}.elementor-56 .elementor-element.elementor-element-769935c .elementor-post__excerpt p{font-family:"Montserrat", Sans-serif;font-size:13px;font-weight:400;line-height:26px;}@media(max-width:767px){.elementor-56 .elementor-element.elementor-element-769935c .elementor-posts-container .elementor-post__thumbnail{padding-bottom:calc( 0.5 * 100% );}.elementor-56 .elementor-element.elementor-element-769935c:after{content:"0.5";}.elementor-56 .elementor-element.elementor-element-769935c .elementor-post__thumbnail__link{width:100%;}}@media(min-width:768px){.elementor-56 .elementor-element.elementor-element-7260b66{--width:66.6666%;}.elementor-56 .elementor-element.elementor-element-e0b39e8{--width:33.3333%;}}/* Start custom CSS for html, class: .elementor-element-48e52d7 */@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;700&display=swap');

.trinity-newsletter-sidebar-custom {
  font-family: 'Montserrat', sans-serif;
  padding: 30px 25px; /* Tăng padding trên dưới một chút */
  border: 1px solid #E0E0E0; /* Viền xám nhạt như hình */
  border-radius: 12px;   /* Bo góc như hình */
  background-color: #ffffff; /* Nền trắng cho nội dung */
  position: relative;
  overflow: hidden; /* Để chứa gradient nền */
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.07); /* Đổ bóng nhẹ */
  max-width: 380px; /* Điều chỉnh cho phù hợp với sidebar của bạn */
  margin: 20px auto; /* Căn giữa để demo, xóa nếu đặt trong sidebar */
}

/* Lớp giả để tạo hiệu ứng gradient nền mờ */
.trinity-newsletter-sidebar-custom::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  /* 
    Tạo các đốm màu gradient. 
    Chúng ta sẽ dùng các sắc độ xám và đen rất nhạt để tạo hiệu ứng tương tự hình mẫu.
  */
  background-image:
    radial-gradient(circle at 15% 20%, rgba(80, 80, 80, 0.15) 0%, rgba(80, 80, 80, 0) 35%), /* Xám đậm nhạt */
    radial-gradient(circle at 85% 35%, rgba(30, 30, 30, 0.2) 0%, rgba(30, 30, 30, 0) 40%), /* Đen nhạt */
    radial-gradient(circle at 50% 85%, rgba(100, 100, 100, 0.1) 0%, rgba(100, 100, 100, 0) 30%); /* Xám trung bình nhạt */
  background-repeat: no-repeat;
  z-index: 0; /* Nằm dưới nội dung */
  opacity: 0.8; /* Điều chỉnh độ trong suốt của gradient */
  filter: blur(5px); /* Tăng/giảm blur để có hiệu ứng mong muốn */
}

/* Đảm bảo nội dung nổi lên trên gradient */
.trinity-newsletter-sidebar-custom > * {
  position: relative;
  z-index: 1;
}

.trinity-newsletter-sidebar-custom h3 {
  font-size: 26px;
  font-weight: 700;
  color: #1A1A1A; /* Màu đen đậm cho tiêu đề */
  margin-top: 0;
  margin-bottom: 10px;
  line-height: 1.3;
}

.trinity-newsletter-sidebar-custom p {
  font-size: 15px;
  color: #4A4A4A; /* Màu xám đậm cho mô tả */
  margin-bottom: 25px;
  line-height: 1.6;
}

.trinity-newsletter-form-custom {
  display: flex;
  gap: 10px; /* Khoảng cách giữa input và button */
}

.trinity-newsletter-form-custom input[type="email"] {
  flex-grow: 1; /* Input chiếm phần lớn không gian */
  padding: 13px 18px;
  border: 1px solid #D0D0D0; /* Viền input xám hơn một chút */
  border-radius: 8px;
  font-family: 'Montserrat', sans-serif;
  font-size: 15px;
  background-color: rgba(248, 248, 248, 0.8); /* Nền input hơi trong để lộ gradient phía sau */
  color: #333333;
  outline: none;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.trinity-newsletter-form-custom input[type="email"]::placeholder {
  color: #757575; /* Màu placeholder xám */
  font-family: 'Montserrat', sans-serif;
}

.trinity-newsletter-form-custom input[type="email"]:focus {
  border-color: #333333; /* Viền đậm hơn khi focus */
  box-shadow: 0 0 0 3px rgba(50, 50, 50, 0.1); /* Hiệu ứng focus nhẹ */
}

.trinity-newsletter-form-custom button[type="submit"] {
  padding: 13px 22px;
  background-color: #000000; /* Nút màu đen */
  color: #ffffff; /* Chữ nút màu trắng */
  border: none;
  border-radius: 8px;
  font-family: 'Montserrat', sans-serif;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.2s ease;
}

.trinity-newsletter-form-custom button[type="submit"]:hover {
  background-color: #333333; /* Màu đen sẫm hơn khi hover */
  transform: translateY(-1px); /* Hiệu ứng nhấc nhẹ khi hover */
}

/* Responsive cho màn hình nhỏ */
@media (max-width: 480px) {
  .trinity-newsletter-sidebar-custom {
    padding: 20px 20px;
  }
  .trinity-newsletter-sidebar-custom h3 {
    font-size: 22px;
  }
  .trinity-newsletter-sidebar-custom p {
    font-size: 14px;
    margin-bottom: 20px;
  }
  .trinity-newsletter-form-custom {
    flex-direction: column; /* Input và button xếp chồng lên nhau */
  }
  .trinity-newsletter-form-custom input[type="email"] {
    margin-bottom: 10px; /* Khoảng cách khi xếp chồng */
  }
  .trinity-newsletter-form-custom button[type="submit"] {
    width: 100%; /* Button chiếm toàn bộ chiều rộng */
  }
}
</style>

<div class="trinity-newsletter-sidebar-custom">
  <h3>Nhận tin mới nhất...</h3>
  <p>Đăng ký nhận bản tin từ Trinity Watches để không bỏ lỡ các bộ sưu tập mới, ưu đãi độc quyền và tin tức thời trang đồng hồ.</p>
  <form class="trinity-newsletter-form-custom" action="YOUR_FORM_ACTION_URL" method="POST">
    <!-- Cập nhật action URL cho phù hợp với hệ thống của bạn -->
    <input type="email" name="email_address" placeholder="Địa chỉ email của bạn..." required>
    <button type="submit">Đăng ký</button>
  </form>
  <div id="trinity-form-message" style="margin-top:15px; font-size:14px;"></div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
  const newsletterForm = document.querySelector('.trinity-newsletter-form-custom');
  const messageDiv = document.getElementById('trinity-form-message');

  if (newsletterForm) {
    newsletterForm.addEventListener('submit', function(event) {
      event.preventDefault(); // Ngăn form submit theo cách truyền thống

      const emailInput = newsletterForm.querySelector('input[type="email"]');
      const email = emailInput.value;
      const submitButton = newsletterForm.querySelector('button[type="submit"]');
      const originalButtonText = submitButton.textContent;

      // Kiểm tra email đơn giản
      if (!email || !/^\S+@\S+\.\S+$/.test(email)) {
        messageDiv.textContent = 'Vui lòng nhập địa chỉ email hợp lệ.';
        messageDiv.style.color = 'red';
        return;
      }

      submitButton.textContent = 'Đang gửi...';
      submitButton.disabled = true;
      messageDiv.textContent = ''; // Xóa thông báo cũ

      // ---------- PHẦN QUAN TRỌNG: XỬ LÝ GỬI FORM ----------
      // Bạn cần thay thế phần này bằng logic gửi form thực tế của mình.
      // Ví dụ: Gửi bằng Fetch API đến một endpoint của WordPress (Rest API, admin-ajax.php)
      // hoặc dịch vụ email marketing (Mailchimp, SendGrid,...).

      // Giả lập một yêu cầu AJAX
      // const formData = new FormData(newsletterForm);
      // fetch(newsletterForm.action, { // Sử dụng action từ form HTML
      //   method: 'POST',
      //   body: formData
      //   // Nếu API của bạn yêu cầu JSON:
      //   // headers: { 'Content-Type': 'application/json' },
      //   // body: JSON.stringify({ email: email })
      // })
      // .then(response => {
      //   if (!response.ok) {
      //     // Nếu server trả về lỗi, cố gắng đọc nội dung lỗi (nếu có)
      //     return response.json().then(err => { throw err; }).catch(() => { throw new Error('Lỗi mạng hoặc server: ' + response.status); });
      //   }
      //   return response.json(); // Hoặc response.text() tùy thuộc server trả về
      // })
      // .then(data => {
      //   messageDiv.textContent = data.message || 'Cảm ơn bạn đã đăng ký!'; // Giả sử server trả về { message: "..." }
      //   messageDiv.style.color = 'green';
      //   emailInput.value = ''; // Xóa email sau khi gửi thành công
      //   console.log('Success:', data);
      // })
      // .catch(error => {
      //   messageDiv.textContent = (error && error.message) ? error.message : 'Có lỗi xảy ra. Vui lòng thử lại.';
      //   messageDiv.style.color = 'red';
      //   console.error('Error:', error);
      // })
      // .finally(() => {
      //   submitButton.textContent = originalButtonText;
      //   submitButton.disabled = false;
      // });

      // GIẢ LẬP GỬI THÀNH CÔNG (XÓA PHẦN NÀY KHI TÍCH HỢP THỰC TẾ)
      console.log('Email đăng ký (demo):', email);
      setTimeout(() => {
        messageDiv.textContent = 'Cảm ơn bạn đã đăng ký! (Đây là demo)';
        messageDiv.style.color = 'green';
        emailInput.value = '';
        submitButton.textContent = originalButtonText;
        submitButton.disabled = false;
      }, 1500);
      // KẾT THÚC GIẢ LẬP
      // ----------------------------------------------------------
    });
  }
});
</script>
Use code with caution.
Html
Giải thích và Lưu ý:
Font Montserrat:
Dòng @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;700&display=swap'); ở đầu CSS sẽ tải font Montserrat từ Google Fonts. Nếu theme của bạn hoặc Elementor đã tải font này rồi, bạn có thể xóa dòng này.
Gradient Nền (.trinity-newsletter-sidebar-custom::before):
Phần này sử dụng pseudo-element ::before để tạo lớp nền gradient mờ ảo phía sau nội dung, tương tự như trong hình ảnh tham khảo nhưng với tông màu đen/xám.
radial-gradient: Tạo các đốm màu tròn lan tỏa. Bạn có thể điều chỉnh vị trí (circle at X% Y%), màu sắc (rgba(...)) và kích thước lan tỏa (0%, 35%, 40%...) để đạt được hiệu ứng mong muốn.
filter: blur(5px);: Tăng/giảm giá trị này để điều chỉnh độ mờ của các đốm gradient.
Input Email (.trinity-newsletter-form-custom input[type="email"]):
background-color: rgba(248, 248, 248, 0.8);: Tôi đã để nền input hơi trong suốt để một phần nhỏ của gradient nền có thể xuyên qua, tạo hiệu ứng chiều sâu nhẹ. Bạn có thể đổi thành màu nền đặc (#F8F8F8 chẳng hạn) nếu muốn.
Xử lý Form (JavaScript):
action="YOUR_FORM_ACTION_URL": Đây là phần quan trọng nhất để form hoạt động. Bạn cần thay thế YOUR_FORM_ACTION_URL bằng URL thực tế nơi form sẽ gửi dữ liệu đến (ví dụ: một file PHP xử lý, một API của dịch vụ email marketing, hoặc endpoint của WordPress REST API/admin-ajax.php).
JavaScript:
Đoạn script nhỏ kèm theo sẽ bắt sự kiện submit của form.
event.preventDefault();: Ngăn trình duyệt gửi form theo cách mặc định (tải lại trang).
Nó thực hiện kiểm tra email cơ bản.
Phần "XỬ LÝ GỬI FORM" được comment lại là nơi bạn cần tích hợp logic gửi AJAX thực tế.
Hiện tại, có một đoạn setTimeout để giả lập việc gửi thành công và hiển thị thông báo. BẠN CẦN XÓA HOẶC THAY THẾ PHẦN GIẢ LẬP NÀY.
Cách tích hợp:
Elementor Pro Forms: Nếu bạn muốn dễ dàng, hãy cân nhắc dùng widget "Form" của Elementor Pro. Bạn có thể style nó gần giống với thiết kế này thông qua các tùy chọn của Elementor và Custom CSS. Nó đã tích hợp sẵn các hành động sau khi gửi (ví dụ: gửi email, Mailchimp,...).
Tự xử lý AJAX: Nếu bạn dùng widget HTML này, bạn sẽ cần code backend (ví dụ PHP trong WordPress) để nhận và xử lý dữ liệu, sau đó dùng fetch hoặc jQuery.ajax trong JavaScript để gửi dữ liệu đến đó.
Dịch vụ bên thứ ba: Các dịch vụ như Mailchimp thường cung cấp mã HTML form sẵn. Bạn có thể lấy mã đó, dán vào widget HTML, rồi dùng CSS ở trên để style lại cho phù hợp.
Nội dung Tiêu đề và Mô tả: Tôi đã cập nhật lại nội dung cho phù hợp với Trinity Watches dựa trên thông tin bạn cung cấp.
Cách sử dụng:
Trong trình chỉnh sửa Elementor, kéo widget "HTML" vào sidebar (hoặc vị trí bạn muốn).
Sao chép toàn bộ đoạn code trên (bao gồm cả thẻ <style>, HTML của form và thẻ <script>).
Dán vào trường "HTML Code" của widget.
Quan trọng: Cấu hình lại phần xử lý form trong JavaScript và thuộc tính action của thẻ <form> cho phù hợp với hệ thống của bạn.
Hy vọng đoạn code này sẽ giúp bạn tạo được form đăng ký ưng ý!/* End custom CSS */