/** * ============================================================================= * CONTACT FORM 7 - SIMPLE REGISTRATION FORM CSS * ============================================================================= * Form đăng ký đơn giản với 3 trường: Họ tên, Số điện thoại, Email * Layout dọc (vertical) trên MỌI device * * VERSION: 1.0.0 * CREATED: 2025-11-26 * AUTHOR: Advanced Internet Technology * * FEATURES: * ✅ Layout dọc đơn giản trên mọi device * ✅ SVG icons màu cam (#F54900) * ✅ Gradient button cam/đỏ (#F54900 → #E7000B) * ✅ Responsive hoàn toàn * ✅ Fix BR tags auto-generated bởi CF7 * ✅ Focus states với orange border * ✅ Smooth animations * * WRAPPER CLASS: .simple-registration-form-wrapper */ /* ============================================================================= MAIN CONTAINER ============================================================================= */ .simple-registration-form-wrapper { max-width: 600px; margin: 0 auto; padding: 32px 24px; background: #ffffff; border-radius: 16px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); } /* Fix: Remove
tags auto-generated by CF7 */ .simple-registration-form-wrapper br { display: none !important; } /* ============================================================================= TYPOGRAPHY ============================================================================= */ .simple-registration-form-wrapper .form-title { font-size: 28px; font-weight: 700; color: #1a1a1a; margin-bottom: 8px; text-align: center; } .simple-registration-form-wrapper .form-subtitle { font-size: 16px; color: #6b7280; margin-bottom: 32px; text-align: center; } /* ============================================================================= FORM FIELDS ============================================================================= */ .simple-registration-form-wrapper .form-field { width: 100%; margin-bottom: 24px; } .simple-registration-form-wrapper label { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; color: #1a1a1a; margin-bottom: 10px; } /* SVG Icons container */ .simple-registration-form-wrapper label::before { content: ''; display: inline-block; width: 18px; height: 18px; flex-shrink: 0; background-size: contain; background-repeat: no-repeat; background-position: center; } /* Icon: User (Họ và tên) */ .simple-registration-form-wrapper .field-name label::before { background-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 16 17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.6673 14.0938V12.7604C12.6673 12.0532 12.3864 11.3749 11.8863 10.8748C11.3862 10.3747 10.7079 10.0938 10.0007 10.0938H6.00065C5.29341 10.0938 4.61513 10.3747 4.11503 10.8748C3.61494 11.3749 3.33398 12.0532 3.33398 12.7604V14.0938' stroke='%23F54900' stroke-width='1.33333' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M8.00065 7.42708C9.47341 7.42708 10.6673 6.23318 10.6673 4.76042C10.6673 3.28766 9.47341 2.09375 8.00065 2.09375C6.52789 2.09375 5.33398 3.28766 5.33398 4.76042C5.33398 6.23318 6.52789 7.42708 8.00065 7.42708Z' stroke='%23F54900' stroke-width='1.33333' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } /* Icon: Phone (Số điện thoại) */ .simple-registration-form-wrapper .field-phone label::before { background-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 16 17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_62_1206)'%3E%3Cpath d='M9.22198 11.1391C9.35967 11.2024 9.51478 11.2168 9.66178 11.1801C9.80877 11.1434 9.93887 11.0577 10.0307 10.9371L10.2673 10.6271C10.3915 10.4615 10.5526 10.3271 10.7377 10.2346C10.9228 10.142 11.127 10.0938 11.334 10.0938H13.334C13.6876 10.0938 14.0267 10.2343 14.2768 10.4843C14.5268 10.7344 14.6673 11.0735 14.6673 11.4271V13.4271C14.6673 13.7807 14.5268 14.1199 14.2768 14.3699C14.0267 14.62 13.6876 14.7605 13.334 14.7605C10.1514 14.7605 7.09914 13.4962 4.8487 11.2457C2.59827 8.9953 1.33398 5.94305 1.33398 2.76046C1.33398 2.40684 1.47446 2.0677 1.72451 1.81765C1.97456 1.5676 2.3137 1.42712 2.66732 1.42712H4.66732C5.02094 1.42712 5.36008 1.5676 5.61013 1.81765C5.86017 2.0677 6.00065 2.40684 6.00065 2.76046V4.76046C6.00065 4.96745 5.95246 5.1716 5.85989 5.35674C5.76732 5.54188 5.63291 5.70293 5.46732 5.82712L5.15532 6.06112C5.03293 6.15458 4.94666 6.28751 4.91118 6.43736C4.87569 6.5872 4.89317 6.74471 4.96065 6.88312C5.87177 8.7337 7.37027 10.2303 9.22198 11.1391Z' stroke='%23F54900' stroke-width='1.33333' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_62_1206'%3E%3Crect width='16' height='16' fill='white' transform='translate(0 0.09375)'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E"); } /* Icon: Email (Email) */ .simple-registration-form-wrapper .field-email label::before { background-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 16 17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14.6673 4.76038L8.67332 8.57838C8.46991 8.69652 8.23888 8.75875 8.00365 8.75875C7.76843 8.75875 7.53739 8.69652 7.33398 8.57838L1.33398 4.76038' stroke='%23F54900' stroke-width='1.33333' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M13.334 2.76038H2.66732C1.93094 2.76038 1.33398 3.35733 1.33398 4.09371V12.0937C1.33398 12.8301 1.93094 13.427 2.66732 13.427H13.334C14.0704 13.427 14.6673 12.8301 14.6673 12.0937V4.09371C14.6673 3.35733 14.0704 2.76038 13.334 2.76038Z' stroke='%23F54900' stroke-width='1.33333' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } /* ============================================================================= INPUT FIELDS ============================================================================= */ .simple-registration-form-wrapper input[type="text"], .simple-registration-form-wrapper input[type="tel"], .simple-registration-form-wrapper input[type="email"] { width: 100%; padding: 14px 16px !important; font-size: 16px !important; line-height: 1.5; border: 1.5px solid #E5E7EB !important; border-radius: 12px !important; outline: none; transition: all 0.3s ease; background: #ffffff; color: #1a1a1a; font-family: inherit; } .simple-registration-form-wrapper input[type="text"]:focus, .simple-registration-form-wrapper input[type="tel"]:focus, .simple-registration-form-wrapper input[type="email"]:focus { border-color: #F54900; box-shadow: 0 0 0 3px rgba(245, 73, 0, 0.1); } .simple-registration-form-wrapper input::placeholder { color: #9CA3AF; } /* ============================================================================= SUBMIT BUTTON ============================================================================= */ .simple-registration-form-wrapper .form-button-row { width: 100%; margin-top: 8px; } .simple-registration-form-wrapper button[type="submit"], .simple-registration-form-wrapper input[type="submit"] { border: none !important; outline: none; width: 100%; padding: 16px 40px !important; font-size: 18px !important; font-weight: 700; letter-spacing: 0.5px; color: #ffffff; text-transform: uppercase; background: linear-gradient(90deg, #F54900 0%, #E7000B 100%); background-size: 200% 100%; background-position: left; border-radius: 12px; cursor: pointer; box-shadow: 0 4px 12px rgba(245, 73, 0, 0.3); transition: all 0.3s ease; user-select: none; } .simple-registration-form-wrapper button[type="submit"]:hover, .simple-registration-form-wrapper input[type="submit"]:hover { background-position: right; box-shadow: 0 6px 20px rgba(245, 73, 0, 0.5); transform: translateY(-2px); } .simple-registration-form-wrapper button[type="submit"]:active, .simple-registration-form-wrapper input[type="submit"]:active { transform: translateY(0); box-shadow: 0 2px 8px rgba(245, 73, 0, 0.3); } .simple-registration-form-wrapper button[type="submit"]::after, .simple-registration-form-wrapper input[type="submit"]::after { content: " →"; margin-left: 8px; } /* ============================================================================= WPCF7 AUTO-GENERATED ELEMENTS OPTIMIZATION ============================================================================= */ /* Spinner: Ẩn mặc định, HIỆN khi form đang submit */ .simple-registration-form-wrapper .wpcf7-spinner { display: none; /* Ẩn khi idle */ width: 24px; height: 24px; margin-left: 10px; vertical-align: middle; } /* Hiển thị spinner khi form đang submitting */ .simple-registration-form-wrapper .wpcf7-form.submitting .wpcf7-spinner { display: inline-block !important; } /* Hoặc position absolute để không ảnh hưởng layout */ .simple-registration-form-wrapper .form-button-row { position: relative; } .simple-registration-form-wrapper .wpcf7-form.submitting .wpcf7-spinner { position: absolute; right: -35px; top: 50%; transform: translateY(-50%); margin: 0; } /* Remove extra spacing từ CF7 wrapper */ .simple-registration-form-wrapper .wpcf7 { margin: 0; padding: 0; } .simple-registration-form-wrapper .wpcf7-form { margin: 0; padding: 0; } /* ============================================================================= FOOTER TEXT WITH LOCK ICON ============================================================================= */ .simple-registration-form-wrapper .form-footer-text { text-align: center; font-size: 13px; color: #6B7280; margin-top: 16px; line-height: 1.5; display: flex; align-items: center; justify-content: center; gap: 6px; } /* Lock icon before footer text */ .simple-registration-form-wrapper .form-footer-text::before { content: ''; display: inline-block; width: 16px; height: 16px; flex-shrink: 0; background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M3.99844 7.19961V5.59961C3.99844 4.53874 4.41986 3.52133 5.17001 2.77118C5.92016 2.02104 6.93757 1.59961 7.99844 1.59961C9.0593 1.59961 10.0767 2.02104 10.8269 2.77118C11.577 3.52133 11.9984 4.53874 11.9984 5.59961V7.19961C12.4228 7.19961 12.8298 7.36818 13.1298 7.66824C13.4299 7.9683 13.5984 8.37526 13.5984 8.79961V12.7996C13.5984 13.224 13.4299 13.6309 13.1298 13.931C12.8298 14.231 12.4228 14.3996 11.9984 14.3996H3.99844C3.57409 14.3996 3.16712 14.231 2.86707 13.931C2.56701 13.6309 2.39844 13.224 2.39844 12.7996V8.79961C2.39844 8.37526 2.56701 7.9683 2.86707 7.66824C3.16712 7.36818 3.57409 7.19961 3.99844 7.19961ZM10.3984 5.59961V7.19961H5.59844V5.59961C5.59844 4.96309 5.85129 4.35264 6.30138 3.90255C6.75147 3.45247 7.36192 3.19961 7.99844 3.19961C8.63496 3.19961 9.24541 3.45247 9.69549 3.90255C10.1456 4.35264 10.3984 4.96309 10.3984 5.59961Z' fill='%236A7282'/%3E%3C/svg%3E"); background-size: contain; background-repeat: no-repeat; background-position: center; } /* ============================================================================= WPCF7 RESPONSE OUTPUT ============================================================================= */ .simple-registration-form-wrapper .wpcf7-response-output { margin: 12px 0 0 0 !important; /* CF7 có margin mặc định, cần override */ padding: 12px 16px; border-radius: 8px; font-size: 14px; } .simple-registration-form-wrapper .wpcf7-validation-errors { border-color: #FCA5A5; background-color: #FEF2F2; color: #991B1B; } .simple-registration-form-wrapper .wpcf7-mail-sent-ok { border-color: #86EFAC; background-color: #F0FDF4; color: #166534; } /* Hide screen reader text (accessibility text không cần hiển thị) */ .simple-registration-form-wrapper .wpcf7-screen-reader-response { position: absolute; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); height: 1px; width: 1px; margin: -1px; padding: 0; border: 0; } .wpcf7-form p { margin-bottom: 0px !important; } /* ============================================================================= RESPONSIVE (Mobile optimizations) ============================================================================= */ @media (max-width: 640px) { .simple-registration-form-wrapper { padding: 24px 20px; border-radius: 12px; } .simple-registration-form-wrapper .form-title { font-size: 24px; } .simple-registration-form-wrapper .form-subtitle { font-size: 14px; margin-bottom: 24px; } .simple-registration-form-wrapper .form-field { margin-bottom: 20px; } .simple-registration-form-wrapper input[type="text"], .simple-registration-form-wrapper input[type="tel"], .simple-registration-form-wrapper input[type="email"] { padding: 12px 14px !important; font-size: 16px !important; /* Prevent zoom on iOS */ } .simple-registration-form-wrapper button[type="submit"], .simple-registration-form-wrapper input[type="submit"] { padding: 14px 32px !important; font-size: 16px; } }