/** Shopify CDN: Minification failed

Line 234:38 Unexpected "{"

**/
.popuplink-btn {
  font-family: "Noto Serif";
  font-size: 14px;
  font-weight: 400;
  line-height: 14px;
  text-transform: uppercase;
  margin-right: 10px;
  padding: 10px 16px;
  border: 1px solid #cc1a68; /* hồng */
  color: #000; /* chữ đen */
  background: transparent;
  border-radius: 6px;
  cursor: pointer;
 
}

.popuplink-btn:hover {
  background: #cc1a68; /* hồng */
  color: #fff; /* chữ trắng */
}


.popup-button-wrapper .popuplink-btn,
.popup-button-wrapper a.button {
  flex: 1;              /* auto chiếm đều */
  width: 30%;           /* mỗi nút 50% */
  text-align: center;
}
/* 1. CĂN GIỮA POPUP (Đã bỏ display:block) */
.popup-form-link.popup {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    z-index: 9999 !important;
    /* Không thêm display ở đây để JS tự điều khiển */
    width: 90% !important; 
    max-width: 850px !important;
}

/* 2. ĐẢO VỊ TRÍ: FORM TRÁI - ẢNH PHẢI */
.popup-form-link.popup .popup-outer {
    display: flex !important;
    flex-direction: row-reverse !important; 
    align-items: stretch !important;
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    min-height: 450px; /* Thêm chiều cao tối thiểu cho cân đối */
}

/* 3. CHỈNH TỈ LỆ 1:1 */
.popup-form-link.popup .popup-content,
.popup-form-link.popup .popup-thumbnail {
    flex: 1 1 50% !important; /* Dùng flex 1 1 để ép chia đều */
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
}

/* 4. CHỈNH NỘI DUNG FORM (BÊN TRÁI) */
.popup-form-link.popup .popup-content {
    padding: 15px ;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.popup-form-link.popup .popup-text {
    font-family: 'Noto Serif', serif ;
    font-size: 26px ;
    color: #d0226d ; /* Màu hồng giống logo/nút bấm của bạn */
    text-align: left; /* Căn trái cho đồng bộ với form */
    margin-bottom: 20px ;
    font-weight: 600 ;
}
 .popup-success-heading{
    font-family: 'Noto Serif', serif ;
    font-size: 26px ;
    color: #d0226d ; /* Màu hồng giống logo/nút bấm của bạn */
    text-align: center; /* Căn trái cho đồng bộ với form */
    margin-bottom: 20px ;
    font-weight: 600 ;
}
.popup-success-text{ 
    font-size: 20px;
    margin-bottom: 20px !important;
    font-weight: 600!important;}
.modal-close-button .icon-close {color: #fff}
/* 1. CĂN GIỮA CHỮ TRONG NÚT CỐ ĐỊNH */
.popup-form-link.popup .popup-content .button {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important; /* Luôn giữ nội dung ở tâm nút */
    width: 100% !important; 
    height: 48px !important;
    overflow: hidden !important;
    background-color: #d0226d !important;
    color: #fff !important;
    border: 2px solid #d0226d !important;
    transition: all 0.3s ease-in-out !important;
}

/* 2. HIỆU ỨNG CHỮ NHÍCH SANG TRÁI */
/* Nếu chữ chưa có thẻ span bọc lại, CSS này vẫn cố gắng tác động vào text node */
.popup-form-link.popup .popup-content .button {
    text-align: center;
}

.popup-form-link.popup .popup-content .button:hover {
    padding-right: 25px !important; /* Ép chữ nhích sang trái bằng cách tăng padding phải */
    background-color: #fff !important;
    color: #d0226d !important;
}

/* 3. HIỆU ỨNG SVG BAY TỪ TRÁI SANG PHẢI */
.popup-form-link.popup .popup-content .button svg {
    position: absolute !important;
    /* Trạng thái ẩn: Nằm dịch về bên trái so với vị trí xuất hiện */
    opacity: 0 !important;
    left: 40% !important; 
    transform: translateX(-50px) !important; 
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    fill: currentColor !important; /* Tự đổi màu theo màu chữ (hồng) */
    width: 18px;
    height: 18px;
}

/* Khi hover: Mũi tên lướt sang phải và hiện ra */
.popup-form-link.popup .popup-content .button:hover svg {
    opacity: 1 !important;
    left: auto !important;
    right: 15px !important; /* Dừng lại ở mép phải nút */
    transform: translateX(0) !important;
}

/* 4. ĐẢM BẢO CHỮ CĂN GIỮA TUYỆT ĐỐI KHI CHƯA HOVER */
.popup-form-link.popup .popup-content .button span {
    margin: 0 auto !important;
}

/* 1. CĂN GIỮA VÀ ĐỊNH CHIỀU RỘNG CHO CỤM NÚT */
.popup-form-link.popup .btn-group {
    display: flex !important;
    justify-content: center !important; /* Căn giữa cụm nút */
    gap: 15px !important;              /* Khoảng cách giữa 2 nút */
    width: 100% !important;             /* Tổng 2 nút chiếm 80% */
     /* Căn giữa cụm này so với form */
}

/* 2. CHỈNH ĐỘ RỘNG TỪNG NÚT */
.popup-form-link.popup .btn-group button,
.popup-form-link.popup .btn-group .button {
    flex: 1 !important;                /* Mỗi nút chiếm 50% của phần 80% đó */
    padding: 0 !important;             /* Bỏ padding thừa để chữ không bị xuống dòng */
    height: 45px !important;
    font-size: 13px !important;        /* Giảm nhẹ size chữ để nút không bị chật */
    white-space: nowrap !important;    /* Không cho chữ nhảy xuống dòng */
}

/* 3. ĐẢM BẢO NÚT "ĐÓNG" CŨNG ĐẸP */
.popup-form-link.popup .btn-group .button--secondary,
.popup-form-link.popup .btn-group button:first-child {
    background-color: #fff !important;
    color: #333 !important;
    border: 1px solid #ccc !important;
}
.popup-success-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none; /* mặc định ẩn */
  justify-content: center;
  align-items: center;
  background: rgba(0,0,0,0.5);
  z-index: 10000;
}

.popup-success-overlay.active {
  display: flex !important; /* HIỆN RA */
}

.popup-success-box {
  transform: scale(0.8);
  opacity: 0;
  transition: all 0.3s ease;
}

.popup-success-overlay.active .popup-success-box {
  transform: scale(1);
  opacity: 1;
}

/* 4. RESPONSIVE CHO MOBILE */
@media screen and (max-width: 768px) {
    .popup-button-wrapper {
  display: flex;
 
}
.popup-button-wrapper a {
    font-size: 14px;
    margin-left: 15px;
    max-width: 148px;
}
.popuplink-btn {margin-right: 0!important}
.popup{
    margin-top: 0!important;
}
    .newsletter-close-btn {
        margin-left: 0px !important;
    }
}
/* 5. CHỈNH HÌNH ẢNH (BÊN PHẢI) */
.popup-form-link.popup .popup-thumbnail img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block;
}

/* 6. CHỈNH CÁC Ô INPUT */
.popup-form-link.popup .field {
    margin-bottom: 10px ;
}

.popup-form-link.popup .field__input, {
    height: 50px !important;
    border: 1px solid red !important;
    padding: 5px 10px !important;
}
.popup-form-link .field{
    height: 50px !important;    
    border: 1px solid #ddd !important;
    padding: 15px
}
.popup-form-link input[name="contact[email]"] {
  
  background: #fff;
}    
.field input[type=text]+label,.field .field__input+label {top: 50%}
.field input[type=text], .field input[type=email],
 .field input[type=tel], .field input[type=password], .field .field__input {

   height: 3rem !important
  
}
#NewsletterMessage-2025 {
  display: block;
  margin-top: 10px;
  font-size: 14px;
}

.newsletter-form__message--error {
  color: red;
}
/* 7. RESPONSIVE MOBILE */
@media screen and (max-width: 768px) {
    .popup-form-link.popup .popup-outer {
        flex-direction: column !important; /* Mobile thì ảnh trên form dưới cho dễ nhìn */
    }
    .popup-form-link.popup .popup-content,
    .popup-form-link.popup .popup-thumbnail {
        flex: 0 0 100% !important;
        width: 100% !important;
        max-width: 100% !important;
    }
        .popup-button-wrapper a, .popuplink-btn {font-size: 10px}
}