/* ========================================================================== FORM DANG KY TIEM ENVACGEN EV71 - CSS dung chung (LDP Envacgen + bai viet) Tach ra file rieng ngay 16/09/2026. Ly do: truoc day CSS in kem form dau tien; neu luot render dau bi vut bo (vd plugin goi the_content som roi bo ket qua) thi CSS mat theo, form hien tran. Nap bang wp_enqueue_style trong templates/form-ev71-dang-ky.php nen khong con phu thuoc luot render nao, va trinh duyet cache duoc. CHI sua CSS cua form o file nay. ========================================================================== */ /* ========================================================================== FORM ĐĂNG KÝ TIÊM ENVACGEN EV71 - dùng chung (LDP Envacgen + bài viết) Biến màu riêng của form (giá trị giống bộ màu LDP) để chạy được cả ở trang không có CSS LDP. Khai báo ở :root vì lịch chọn ngày + danh sách select2 được gắn thẳng vào (ngoài khung form). ========================================================================== */ :root{ --ev71f-border:#dfe4ee; /* viền lịch chọn ngày / danh sách trung tâm */ --ev71f-blue:#0D37C1; /* chữ nhãn, viền ô khi focus, checkbox */ --ev71f-red:#e2231a; /* dấu *, thông báo lỗi, viền ô sai */ --ev71f-title-blue:#003ABC; /* tiêu đề popup lỗi */ --ev71f-btn:linear-gradient(180deg, #ED0102 0%, #CE0511 100%); --ev71f-btn-rim:linear-gradient(180deg, #FADE34 0%, #F7BF2F 50%, #F4A02A 100%); } .ev71-form-wrap, .ev71-form-wrap input, .ev71-form-wrap select, .ev71-form-wrap textarea, .ev71-form-wrap button, .ev71-popup-root .ev71-popup, .ev71-popup-root button{ font-family: 'Roboto', Arial, Helvetica, sans-serif; } /* ========================================================================== WIDGET — datepicker + select2, copy từ LDP cấp giấy xác nhận tiêm chủng ========================================================================== */ .ui-datepicker { width: 260px !important; background: #fff !important; border: 1px solid #ddd !important; border-radius: 6px !important; padding: 10px !important; font-family: Arial, sans-serif; box-shadow: 0 2px 10px rgba(0,0,0,0.1); } /* ===== HEADER ===== */ .ui-datepicker .ui-datepicker-header { background: none !important; border: none !important; padding: 0 0 10px !important; position: relative; } /* TITLE */ .ui-datepicker .ui-datepicker-title { text-align: center; font-weight: 600; font-size: 16px; } /* PREV / NEXT BUTTON */ .ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-next { position: absolute; top: 0; cursor: pointer; } /* LEFT */ .ui-datepicker .ui-datepicker-prev { left: 0; } /* RIGHT */ .ui-datepicker .ui-datepicker-next { right: 0; } /* REMOVE ICON DEFAULT */ .ui-datepicker .ui-icon { background: none !important; text-indent: 0 !important; } /* ===== TABLE ===== */ .ui-datepicker table { width: 100%; border-collapse: collapse; } /* HEADER DAY */ .ui-datepicker th { font-size: 12px; color: #666; padding: 6px 0; font-weight: 500; } /* CELL */ .ui-datepicker td { padding: 2px; } /* DEFAULT DAY */ .ui-datepicker td a { display: block !important; padding: 6px 0 !important; text-align: center !important; border-radius: 4px; color: #333 !important; text-decoration: none !important; background: none !important; } /* HOVER */ .ui-datepicker td a:hover { background: #f1f1f1 !important; } /* ACTIVE (SELECTED DAY) */ .ui-datepicker .ui-state-active { background: #0d6efd !important; color: #fff !important; border-radius: 4px; } /* TODAY */ .ui-datepicker .ui-state-highlight { background: #e9ecef !important; } /* DISABLED */ .ui-datepicker .ui-state-disabled span { color: #ccc !important; } /* style select search */ .select2-container { box-sizing: border-box; display: inline-block; margin: 0; position: relative; vertical-align: middle; width: 100% !important; } .select2-container .select2-selection--single { box-sizing: border-box; cursor: pointer; display: block; height: 28px; user-select: none; -webkit-user-select: none; } .select2-container .select2-selection--single .select2-selection__rendered { display: block; padding-left: 8px; padding-right: 20px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .select2-container .select2-selection--single .select2-selection__clear { position: relative; } .select2-container[dir="rtl"] .select2-selection--single .select2-selection__rendered { padding-right: 8px; padding-left: 20px; } .select2-container .select2-selection--multiple { box-sizing: border-box; cursor: pointer; display: block; min-height: 32px; user-select: none; -webkit-user-select: none; } .select2-container .select2-selection--multiple .select2-selection__rendered { display: inline-block; overflow: hidden; padding-left: 8px; text-overflow: ellipsis; white-space: nowrap; } .select2-container .select2-search--inline { float: left; } .select2-container .select2-search--inline .select2-search__field { box-sizing: border-box; border: none; font-size: 100%; margin-top: 5px; padding: 0; } .select2-container .select2-search--inline .select2-search__field::-webkit-search-cancel-button { -webkit-appearance: none; } .select2-dropdown { background-color: white; border: 1px solid #aaa; border-radius: 4px; box-sizing: border-box; display: block; position: absolute; left: -100000px; width: 100%; z-index: 1051; } .select2-results { display: block; } .select2-results__options { list-style: none; margin: 0; padding: 0; } .select2-results__option { padding: 6px; user-select: none; -webkit-user-select: none; } .select2-results__option[aria-selected] { cursor: pointer; } .select2-container--open .select2-dropdown { left: 0; } .select2-container--open .select2-dropdown--above { border-bottom: none; border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .select2-container--open .select2-dropdown--below { border-top: none; border-top-left-radius: 0; border-top-right-radius: 0; } .select2-search--dropdown { display: block; padding: 4px; } .select2-search--dropdown .select2-search__field { padding: 4px; width: 100%; box-sizing: border-box; } .select2-search--dropdown .select2-search__field::-webkit-search-cancel-button { -webkit-appearance: none; } .select2-search--dropdown.select2-search--hide { display: none; } .select2-close-mask { border: 0; margin: 0; padding: 0; display: block; position: fixed; left: 0; top: 0; min-height: 100%; min-width: 100%; height: auto; width: auto; opacity: 0; z-index: 99; background-color: #fff; filter: alpha(opacity=0); } .select2-hidden-accessible { border: 0 !important; clip: rect(0 0 0 0) !important; -webkit-clip-path: inset(50%) !important; clip-path: inset(50%) !important; height: 1px !important; overflow: hidden !important; padding: 0 !important; position: absolute !important; width: 1px !important; white-space: nowrap !important; } .select2-container--default .select2-selection--single { border-radius: 6px; border: 1px solid var(--ev71f-border); height: 44px; box-shadow: none; } .select2-container--default .select2-selection--single .select2-selection__rendered { color: #444; line-height: 38px; padding-left: 10px; } .select2-container--default .select2-selection--single .select2-selection__clear { cursor: pointer; float: right; font-weight: bold; } .select2-container--default .select2-selection--single .select2-selection__placeholder { color: #999; } .select2-container--default .select2-selection--single .select2-selection__arrow { height: 36px; position: absolute; top: 1px; right: 1px; width: 20px; } .select2-container--default .select2-selection--single .select2-selection__arrow b { border-color: #888 transparent transparent transparent; border-style: solid; border-width: 5px 4px 0 4px; height: 0; left: 50%; margin-left: -4px; margin-top: -2px; position: absolute; top: 50%; width: 0; } .select2-container--default[dir="rtl"] .select2-selection--single .select2-selection__clear { float: left; } .select2-container--default[dir="rtl"] .select2-selection--single .select2-selection__arrow { left: 1px; right: auto; } .select2-container--default.select2-container--disabled .select2-selection--single { background-color: #eee; cursor: default; } .select2-container--default.select2-container--disabled .select2-selection--single .select2-selection__clear { display: none; } .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b { border-color: transparent transparent #888 transparent; border-width: 0 4px 5px 4px; } .select2-container--default .select2-selection--multiple { background-color: white; border: 1px solid #aaa; border-radius: 4px; cursor: text; } .select2-container--default .select2-selection--multiple .select2-selection__rendered { box-sizing: border-box; list-style: none; margin: 0; padding: 0 5px; width: 100%; } .select2-container--default .select2-selection--multiple .select2-selection__rendered li { list-style: none; } .select2-container--default .select2-selection--multiple .select2-selection__placeholder { color: #999; margin-top: 5px; float: left; } .select2-container--default .select2-selection--multiple .select2-selection__clear { cursor: pointer; float: right; font-weight: bold; margin-top: 5px; margin-right: 10px; } .select2-container--default .select2-selection--multiple .select2-selection__choice { background-color: #e4e4e4; border: 1px solid #aaa; border-radius: 4px; cursor: default; float: left; margin-right: 5px; margin-top: 5px; padding: 0 5px; } .select2-container--default .select2-selection--multiple .select2-selection__choice__remove { color: #999; cursor: pointer; display: inline-block; font-weight: bold; margin-right: 2px; } .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover { color: #333; } .select2-container--default[dir="rtl"] .select2-selection--multiple .select2-selection__choice, .select2-container--default[dir="rtl"] .select2-selection--multiple .select2-selection__placeholder, .select2-container--default[dir="rtl"] .select2-selection--multiple .select2-search--inline { float: right; } .select2-container--default[dir="rtl"] .select2-selection--multiple .select2-selection__choice { margin-left: 5px; margin-right: auto; } .select2-container--default[dir="rtl"] .select2-selection--multiple .select2-selection__choice__remove { margin-left: 2px; margin-right: auto; } .select2-container--default.select2-container--focus .select2-selection--multiple { border: solid black 1px; outline: 0; } .select2-container--default.select2-container--disabled .select2-selection--multiple { background-color: #eee; cursor: default; } .select2-container--default.select2-container--disabled .select2-selection__choice__remove { display: none; } .select2-container--default.select2-container--open.select2-container--above .select2-selection--single, .select2-container--default.select2-container--open.select2-container--above .select2-selection--multiple { border-top-left-radius: 0; border-top-right-radius: 0; } .select2-container--default.select2-container--open.select2-container--below .select2-selection--single, .select2-container--default.select2-container--open.select2-container--below .select2-selection--multiple { border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .select2-container--default .select2-search--dropdown .select2-search__field { border: 1px solid #aaa; } .select2-container--default .select2-search--inline .select2-search__field { background: transparent; border: none; outline: 0; box-shadow: none; -webkit-appearance: textfield; } .select2-container--default .select2-results > .select2-results__options { max-height: 200px; overflow-y: auto; } .select2-container--default .select2-results__option[role="group"] { padding: 0; } .select2-container--default .select2-results__option[aria-disabled="true"] { color: #999; } .select2-container--default .select2-results__option[aria-selected="true"] { background-color: #ddd; } .select2-container--default .select2-results__option .select2-results__option { padding-left: 1em; } .select2-container--default .select2-results__option .select2-results__option .select2-results__group { padding-left: 0; } .select2-container--default .select2-results__option .select2-results__option .select2-results__option { margin-left: -1em; padding-left: 2em; } .select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option { margin-left: -2em; padding-left: 3em; } .select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option { margin-left: -3em; padding-left: 4em; } .select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option { margin-left: -4em; padding-left: 5em; } .select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option { margin-left: -5em; padding-left: 6em; } .select2-container--default .select2-results__option--highlighted[aria-selected] { background-color: #5897fb; color: white; } .select2-container--default .select2-results__group { cursor: default; display: block; padding: 6px; } .select2-container--classic .select2-selection--single { background-color: #f7f7f7; border: 1px solid #aaa; border-radius: 4px; outline: 0; background-image: -webkit-linear-gradient(top, #fff 50%, #eee 100%); background-image: -o-linear-gradient(top, #fff 50%, #eee 100%); background-image: linear-gradient(to bottom, #fff 50%, #eee 100%); background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFFFF', endColorstr='#FFEEEEEE', GradientType=0); } .select2-container--classic .select2-selection--single:focus { border: 1px solid #5897fb; } .select2-container--classic .select2-selection--single .select2-selection__rendered { color: #444; line-height: 28px; } .select2-container--classic .select2-selection--single .select2-selection__clear { cursor: pointer; float: right; font-weight: bold; margin-right: 10px; } .select2-container--classic .select2-selection--single .select2-selection__placeholder { color: #999; } .select2-container--classic .select2-selection--single .select2-selection__arrow { background-color: #ddd; border: none; border-left: 1px solid #aaa; border-top-right-radius: 4px; border-bottom-right-radius: 4px; height: 26px; position: absolute; top: 1px; right: 1px; width: 20px; background-image: -webkit-linear-gradient(top, #eee 50%, #ccc 100%); background-image: -o-linear-gradient(top, #eee 50%, #ccc 100%); background-image: linear-gradient(to bottom, #eee 50%, #ccc 100%); background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFEEEEEE', endColorstr='#FFCCCCCC', GradientType=0); } .select2-container--classic .select2-selection--single .select2-selection__arrow b { border-color: #888 transparent transparent transparent; border-style: solid; border-width: 5px 4px 0 4px; height: 0; left: 50%; margin-left: -4px; margin-top: -2px; position: absolute; top: 50%; width: 0; } .select2-container--classic[dir="rtl"] .select2-selection--single .select2-selection__clear { float: left; } .select2-container--classic[dir="rtl"] .select2-selection--single .select2-selection__arrow { border: none; border-right: 1px solid #aaa; border-radius: 0; border-top-left-radius: 4px; border-bottom-left-radius: 4px; left: 1px; right: auto; } .select2-container--classic.select2-container--open .select2-selection--single { border: 1px solid #5897fb; } .select2-container--classic.select2-container--open .select2-selection--single .select2-selection__arrow { background: transparent; border: none; } .select2-container--classic.select2-container--open .select2-selection--single .select2-selection__arrow b { border-color: transparent transparent #888 transparent; border-width: 0 4px 5px 4px; } .select2-container--classic.select2-container--open.select2-container--above .select2-selection--single { border-top: none; border-top-left-radius: 0; border-top-right-radius: 0; background-image: -webkit-linear-gradient(top, #fff 0%, #eee 50%); background-image: -o-linear-gradient(top, #fff 0%, #eee 50%); background-image: linear-gradient(to bottom, #fff 0%, #eee 50%); background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFFFF', endColorstr='#FFEEEEEE', GradientType=0); } .select2-container--classic.select2-container--open.select2-container--below .select2-selection--single { border-bottom: none; border-bottom-left-radius: 0; border-bottom-right-radius: 0; background-image: -webkit-linear-gradient(top, #eee 50%, #fff 100%); background-image: -o-linear-gradient(top, #eee 50%, #fff 100%); background-image: linear-gradient(to bottom, #eee 50%, #fff 100%); background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFEEEEEE', endColorstr='#FFFFFFFF', GradientType=0); } .select2-container--classic .select2-selection--multiple { background-color: white; border: 1px solid #aaa; border-radius: 4px; cursor: text; outline: 0; } .select2-container--classic .select2-selection--multiple:focus { border: 1px solid #5897fb; } .select2-container--classic .select2-selection--multiple .select2-selection__rendered { list-style: none; margin: 0; padding: 0 5px; } .select2-container--classic .select2-selection--multiple .select2-selection__clear { display: none; } .select2-container--classic .select2-selection--multiple .select2-selection__choice { background-color: #e4e4e4; border: 1px solid #aaa; border-radius: 4px; cursor: default; float: left; margin-right: 5px; margin-top: 5px; padding: 0 5px; } .select2-container--classic .select2-selection--multiple .select2-selection__choice__remove { color: #888; cursor: pointer; display: inline-block; font-weight: bold; margin-right: 2px; } .select2-container--classic .select2-selection--multiple .select2-selection__choice__remove:hover { color: #555; } .select2-container--classic[dir="rtl"] .select2-selection--multiple .select2-selection__choice { float: right; } .select2-container--classic[dir="rtl"] .select2-selection--multiple .select2-selection__choice { margin-left: 5px; margin-right: auto; } .select2-container--classic[dir="rtl"] .select2-selection--multiple .select2-selection__choice__remove { margin-left: 2px; margin-right: auto; } .select2-container--classic.select2-container--open .select2-selection--multiple { border: 1px solid #5897fb; } .select2-container--classic.select2-container--open.select2-container--above .select2-selection--multiple { border-top: none; border-top-left-radius: 0; border-top-right-radius: 0; } .select2-container--classic.select2-container--open.select2-container--below .select2-selection--multiple { border-bottom: none; border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .select2-container--classic .select2-search--dropdown .select2-search__field { border: 1px solid #aaa; outline: 0; } .select2-container--classic .select2-search--inline .select2-search__field { outline: 0; box-shadow: none; } .select2-container--classic .select2-dropdown { background-color: #fff; border: 1px solid transparent; } .select2-container--classic .select2-dropdown--above { border-bottom: none; } .select2-container--classic .select2-dropdown--below { border-top: none; } .select2-container--classic .select2-results > .select2-results__options { max-height: 200px; overflow-y: auto; } .select2-container--classic .select2-results__option[role="group"] { padding: 0; } .select2-container--classic .select2-results__option[aria-disabled="true"] { color: grey; } .select2-container--classic .select2-results__option--highlighted[aria-selected] { background-color: #3875d7; color: #fff; } .select2-container--classic .select2-results__group { cursor: default; display: block; padding: 6px; } .select2-container--classic.select2-container--open .select2-dropdown { border-color: #5897fb; } /* end style select search */ /* ========================================================================== FORM - ô nhập, checkbox đồng ý, nút gửi, select2 trong form, thông báo lỗi dưới ô ========================================================================== */ /* --- Field --- */ .ev71-form-wrap .frm_ev71 .form-group{ margin-bottom: 14px; } .ev71-form-wrap .frm_ev71 label{ display: block; color: var(--ev71f-blue); font-size: 14px; font-weight: 700; line-height: 1.3; margin-bottom: 6px; } .ev71-form-wrap .frm_ev71 .req{ color: var(--ev71f-red); margin-left: 2px; } .ev71-form-wrap .frm_ev71 .form-control{ height: 42px; padding: 8px 14px; color: #333333; font-size: 14px; background: #fff; border: 1px solid #D5DEEC; border-radius: 8px; box-shadow: none; transition: border-color .2s ease, box-shadow .2s ease; } .ev71-form-wrap .frm_ev71 textarea.form-control{ height: auto; min-height: 84px; resize: vertical; } .ev71-form-wrap .frm_ev71 .form-control::placeholder{ color: #9AA7BD; } .ev71-form-wrap .frm_ev71 .form-control:focus{ border-color: var(--ev71f-blue); box-shadow: 0 0 0 3px rgba(13, 55, 193, .12); outline: none; } /* --- Checkbox đồng ý --- */ .ev71-form-wrap .ev71-form-consent{ margin: 14px 0 18px; } .ev71-form-wrap .ev71-form-consent label{ display: flex; align-items: flex-start; gap: 8px; margin: 0; color: var(--ev71f-blue); font-size: 13px; font-weight: 400; line-height: 1.45; cursor: pointer; } .ev71-form-wrap .ev71-form-consent input[type="checkbox"]{ flex: 0 0 auto; width: 16px; height: 16px; margin: 2px 0 0; accent-color: var(--ev71f-blue); } .ev71-form-wrap .ev71-form-consent a{ color: var(--ev71f-blue); text-decoration: underline; } /* --- Nút gửi --- */ .ev71-form-wrap .ev71-btn-submit{ display: inline-block; padding: 11px 34px; border: 0; border-radius: 24px; background: linear-gradient(180deg, #FBA63F 0%, #F7941D 100%); color: #fff; font-size: 15px; font-weight: 800; line-height: 1.2; text-transform: uppercase; box-shadow: 0 4px 10px rgba(247, 148, 29, .35); transition: filter .2s ease, transform .1s ease; } .ev71-form-wrap .ev71-btn-submit:hover{ filter: brightness(1.06); } .ev71-form-wrap .ev71-btn-submit:active{ transform: translateY(1px); } /* --- select2 khớp chiều cao / bo góc với các input còn lại --- */ .ev71-form-wrap .frm_ev71 .select2-container{ width: 100% !important; text-align: justify; } .ev71-form-wrap .frm_ev71 .select2-container .select2-selection--single{ height: 42px; border: 1px solid #D5DEEC; border-radius: 8px; background: #fff; } .ev71-form-wrap .frm_ev71 .select2-container--default .select2-selection--single .select2-selection__rendered{ height: 40px; padding-left: 14px; padding-right: 30px; color: #333333; font-size: 14px; line-height: 40px; } .ev71-form-wrap .frm_ev71 .select2-container--default .select2-selection--single .select2-selection__arrow{ height: 40px; } /* --- Thông báo lỗi dưới ô (kiểm tra khi rời ô + khi bấm Đăng ký) --- */ .ev71-form-wrap .frm_ev71 .ev71-field-error{ margin-top: 5px; color: var(--ev71f-red); font-size: 12.5px; font-weight: 500; line-height: 1.35; } .ev71-form-wrap .frm_ev71 .is-invalid .form-control, .ev71-form-wrap .frm_ev71 .is-invalid .form-control:focus, .ev71-form-wrap .frm_ev71 .is-invalid .select2-container .select2-selection--single{ border-color: var(--ev71f-red); } .ev71-form-wrap .frm_ev71 .is-invalid .form-control:focus{ box-shadow: 0 0 0 3px color-mix(in srgb, var(--ev71f-red) 15%, transparent); } .ev71-form-wrap .ev71-form-consent.is-invalid input[type="checkbox"]{ outline: 2px solid var(--ev71f-red); outline-offset: 1px; } .ev71-form-wrap .ev71-form-consent .ev71-field-error{ margin-left: 24px; } @media (max-width:767px){ .ev71-form-wrap .ev71-btn-submit{ width: 100%; padding: 12px 20px; } } /* ========================================================================== VỊ TRÍ HIỂN THỊ - form chèn bằng shortcode [form_ev71] Chỉ có MỘT cách dùng duy nhất: dán [form_ev71] vào ô "Nội dung tùy chỉnh" của Banner Ads (hoặc vào nội dung bài viết). Shortcode KHÔNG nhận tham số, form in ra ở đâu cũng y hệt nhau. Việc ẩn/hiện do CSS quyết, dựa vào VỊ TRÍ form nằm trong trang: - Nằm trong cột banner bên (.bannerqc_left_nxv / .bannerqc_right_nxv): CHỈ hiện từ 1366px - Nằm trong nội dung bài (.div_detail_post): ẩn từ 1366px, NHƯNG chỉ khi trang đó thật sự có form ở cột bên. Nếu bài chỉ gắn 1 banner trong bài thì form vẫn hiện ở mọi bề rộng. Form của trang LDP (context ldp) không dính quy tắc nào ở đây. Cột bên rộng calc((100% - 850px)/2) (css/style-2024.css) => ở 1366px chỉ còn ~258px (đã đo thực tế) nên phải thu gọn lại cho vừa (xem cuối file). Sticky: .wrap_content_bannerqc đã có sẵn position:sticky trong css/style-2024.css NHƯNG không chạy, vì body ở đó đặt overflow-x:hidden (trình duyệt tự nâng trục dọc thành scroll => sinh vùng cuộn riêng, chỉ cần một tổ tiên như vậy là sticky mất tác dụng). Bên dưới đổi sang overflow-x:clip để sửa. ========================================================================== */ .bannerqc_left_nxv .ev71-form-wrap, .bannerqc_right_nxv .ev71-form-wrap{ display: none; } @media (min-width:1366px){ .bannerqc_left_nxv .ev71-form-wrap, .bannerqc_right_nxv .ev71-form-wrap{ display: block; } /* Form trong bài chỉ nhường chỗ khi trang ĐÃ có form ở cột bên */ body:has(.bannerqc_left_nxv .ev71-form-wrap) .div_detail_post .ev71-form-wrap, body:has(.bannerqc_right_nxv .ev71-form-wrap) .div_detail_post .ev71-form-wrap{ display: none; } /* Cho form ở cột bên DÍNH lại khi cuộn. Khung cột bên (.wrap_content_bannerqc) đã có sẵn position:sticky trong css/style-2024.css, nhưng bị vô hiệu vì body và .section_content đang có overflow khác "visible" (overflow-x:hidden làm trình duyệt nâng trục dọc thành scroll => sinh ra vùng cuộn riêng, mà theo chuẩn CSS chỉ cần MỘT tổ tiên như vậy là sticky mất tác dụng). Đổi sang overflow-x:clip: vẫn cắt phần tràn ngang y như hidden nhưng KHÔNG tạo vùng cuộn, nên sticky hoạt động trở lại. Chỉ áp dụng trên trang có form này và chỉ từ 1366px. */ body{ overflow-x: clip; overflow-y: visible; } .section_content{ overflow-x: clip; overflow-y: visible; } /* Dính cách mép trên 90px, chừa chỗ cho thanh menu; form cao hơn màn hình thì cuộn bình thường */ .bannerqc_left_nxv .wrap_content_bannerqc, .bannerqc_right_nxv .wrap_content_bannerqc{ position: sticky; top: 90px; } } /* --- Khung + tiêu đề + mô tả phía trên form (chỉ form chèn ngoài LDP; LDP tự in của trang) --- */ .ev71-form-wrap--sc{ background: #fff; border-radius: 16px; padding: 20px 18px; box-shadow: 0 4px 20px rgba(0, 0, 0, .08); } .ev71-form-wrap .ev71-form-heading{ color: var(--ev71f-title-blue); font-size: 22px; font-weight: 800; line-height: 1.25; text-align: center; text-transform: uppercase; margin-bottom: 12px; } .ev71-form-wrap .ev71-form-lead{ color: var(--ev71f-title-blue); font-size: 14px; line-height: 1.55; text-align: justify; margin-bottom: 18px; } .ev71-form-wrap .ev71-form-lead p{ margin: 0; } .ev71-form-wrap .ev71-form-lead p + p{ margin-top: 10px; } @media (max-width:767px){ .ev71-form-wrap--sc{ padding: 18px 16px; } .ev71-form-wrap .ev71-form-heading{ font-size: 19px; } .ev71-form-wrap .ev71-form-lead{ font-size: 13.5px; } } /* --- Thu gọn cho vừa cột bên (chỉ áp cho form NẰM TRONG cột banner, ~258px ở 1366px) --- */ /* Ảnh khách tự chèn thêm vào cùng ô "Nội dung tùy chỉnh" với shortcode (đặt trước [form_ev71]). Ảnh dán qua trình soạn thảo ra thẻ trần, không có class img-responsive của theme, nên không gì ghì lại và tràn khỏi khung banner (đo được: khung 450px, ảnh 1024px, tràn 574px). Ghì về đúng bề ngang khung, cao co theo tỉ lệ để ảnh không bị méo. */ .bannerqc_left_nxv .content_insert img, .bannerqc_right_nxv .content_insert img{ max-width: 100%; height: auto; } .bannerqc_left_nxv .ev71-form-wrap, .bannerqc_right_nxv .ev71-form-wrap{ padding: 14px 12px; } .bannerqc_left_nxv .ev71-form-wrap .ev71-form-heading, .bannerqc_right_nxv .ev71-form-wrap .ev71-form-heading{ font-size: 16px; margin-bottom: 8px; } .bannerqc_left_nxv .ev71-form-wrap .ev71-form-lead, .bannerqc_right_nxv .ev71-form-wrap .ev71-form-lead{ font-size: 12.5px; line-height: 1.5; text-align: left; margin-bottom: 12px; } .bannerqc_left_nxv .ev71-form-wrap .frm_ev71 .form-group, .bannerqc_right_nxv .ev71-form-wrap .frm_ev71 .form-group{ margin-bottom: 10px; } .bannerqc_left_nxv .ev71-form-wrap .frm_ev71 label, .bannerqc_right_nxv .ev71-form-wrap .frm_ev71 label{ font-size: 12.5px; margin-bottom: 4px; text-align: justify; } .bannerqc_left_nxv .ev71-form-wrap .frm_ev71 .form-control, .bannerqc_right_nxv .ev71-form-wrap .frm_ev71 .form-control{ height: 36px; padding: 6px 10px; font-size: 13px; border-radius: 6px; } .bannerqc_left_nxv .ev71-form-wrap .frm_ev71 textarea.form-control, .bannerqc_right_nxv .ev71-form-wrap .frm_ev71 textarea.form-control{ min-height: 60px; } .bannerqc_left_nxv .ev71-form-wrap .frm_ev71 .select2-container .select2-selection--single, .bannerqc_right_nxv .ev71-form-wrap .frm_ev71 .select2-container .select2-selection--single{ height: 36px; border-radius: 6px; } .bannerqc_left_nxv .ev71-form-wrap .frm_ev71 .select2-container--default .select2-selection--single .select2-selection__rendered, .bannerqc_right_nxv .ev71-form-wrap .frm_ev71 .select2-container--default .select2-selection--single .select2-selection__rendered{ height: 34px; padding-left: 10px; padding-right: 26px; font-size: 13px; line-height: 34px; } .bannerqc_left_nxv .ev71-form-wrap .frm_ev71 .select2-container--default .select2-selection--single .select2-selection__arrow, .bannerqc_right_nxv .ev71-form-wrap .frm_ev71 .select2-container--default .select2-selection--single .select2-selection__arrow{ height: 34px; } .bannerqc_left_nxv .ev71-form-wrap .ev71-form-consent, .bannerqc_right_nxv .ev71-form-wrap .ev71-form-consent{ margin: 10px 0 12px; } .bannerqc_left_nxv .ev71-form-wrap .ev71-form-consent label, .bannerqc_right_nxv .ev71-form-wrap .ev71-form-consent label{ gap: 6px; font-size: 12px; } .bannerqc_left_nxv .ev71-form-wrap .ev71-form-consent .ev71-field-error, .bannerqc_right_nxv .ev71-form-wrap .ev71-form-consent .ev71-field-error{ margin-left: 22px; } .bannerqc_left_nxv .ev71-form-wrap .ev71-btn-submit, .bannerqc_right_nxv .ev71-form-wrap .ev71-btn-submit{ width: 100%; padding: 10px 12px; font-size: 14px; } .bannerqc_left_nxv .ev71-form-wrap .frm_ev71 .ev71-field-error, .bannerqc_right_nxv .ev71-form-wrap .frm_ev71 .ev71-field-error{ font-size: 11.5px; } /* ========================================================================== FORM ĐĂNG KÝ - trạng thái đang gửi + popup kết quả (thành công / trùng / lỗi) ========================================================================== */ .ev71-form-wrap .ev71-btn-submit.is-sending, .ev71-form-wrap .ev71-btn-submit:disabled{ opacity: .7; cursor: wait; } body.ev71-popup-open{ overflow: hidden; } .ev71-popup-root .ev71-popup{ position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 100000; display: none; align-items: center; justify-content: center; padding: 16px; } .ev71-popup-root .ev71-popup.is-open{ display: flex; } .ev71-popup-root .ev71-popup__overlay{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0, 22, 70, .6); } .ev71-popup-root .ev71-popup__box{ position: relative; width: 100%; max-width: 460px; max-height: calc(100vh - 32px); overflow-y: auto; padding: 34px 24px 26px; border-radius: 14px; background: #fff; box-shadow: 0 18px 50px rgba(0, 0, 0, .28); text-align: center; animation: ev71PopupIn .22s ease-out; } @keyframes ev71PopupIn{ from{ opacity: 0; transform: translateY(14px) scale(.97); } to{ opacity: 1; transform: none; } } .ev71-popup-root .ev71-popup__close{ position: absolute; top: 6px; right: 8px; width: 38px; height: 38px; padding: 0; border: 0; background: none; color: #8a94a6; font-size: 30px; line-height: 1; cursor: pointer; } .ev71-popup-root .ev71-popup__close:hover{ color: #333; } .ev71-popup-root .ev71-popup__icon{ width: 64px; height: 64px; margin: 0 auto 14px; border-radius: 50%; background: #1BA160 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") no-repeat center / 36px; } .ev71-popup-root .ev71-popup--error .ev71-popup__icon{ background: #E5251C url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M12 5.5v8'/%3E%3Cpath d='M12 18v.5'/%3E%3C/svg%3E") no-repeat center / 36px; } /* Popup "đã đăng ký": không hiện hình tròn ở đầu popup (giống popup thành công) */ .ev71-popup-root .ev71-popup--duplicate .ev71-popup__icon{ display: none; } .ev71-popup-root .ev71-popup__title{ margin-bottom: 10px; color: var(--ev71f-title-blue); font-size: 20px; font-weight: 700; line-height: 1.3; text-transform: uppercase; } .ev71-popup-root .ev71-popup__content, .ev71-popup-root .ev71-popup__msg{ color: #333; font-size: 15px; line-height: 1.5; } .ev71-popup-root .ev71-popup__content p{ margin: 0 0 8px; } .ev71-popup-root .ev71-popup__content p:last-child{ margin-bottom: 0; } .ev71-popup-root .ev71-popup__content strong{ white-space: nowrap; } /* giữ số hotline trên 1 dòng */ .ev71-popup-root .ev71-popup__msg{ font-weight: 500; } .ev71-popup-root .ev71-popup__msg:empty{ display: none; } .ev71-popup-root .ev71-popup__btn{ min-width: 150px; margin-top: 20px; padding: 10px 28px; border: 1px solid transparent; border-radius: 999px; background: var(--ev71f-btn) padding-box, var(--ev71f-btn-rim) border-box; color: #fff; font-size: 15px; font-weight: 700; cursor: pointer; } .ev71-popup-root .ev71-popup__btn:hover{ filter: brightness(1.08); } @media (max-width:767px){ .ev71-popup-root .ev71-popup__box{ padding: 30px 18px 22px; } .ev71-popup-root .ev71-popup__title{ font-size: 18px; } } /* ========================================================================== POPUP THÀNH CÔNG - theo thiết kế "Pop up.png" (xuất 3x: khung 500px) Không icon, không nút "ĐÓNG"; tiêu đề cam; nút X trong vòng tròn xanh nhạt ========================================================================== */ .ev71-popup-root .ev71-popup--success .ev71-popup__box{ max-width: 500px; padding: 20px 50px 24px; border-radius: 14px; } .ev71-popup-root .ev71-popup--success .ev71-popup__icon, .ev71-popup-root .ev71-popup--success .ev71-popup__btn{ display: none; } .ev71-popup-root .ev71-popup--success .ev71-popup__title{ margin: 4px 0 16px; color: #FF651B; font-size: 24px; font-weight: 700; line-height: 1.25; text-transform: uppercase; } .ev71-popup-root .ev71-popup--success .ev71-popup__content{ color: #034EA2; font-size: 16px; line-height: 1.25; text-align: justify; } .ev71-popup-root .ev71-popup--success .ev71-popup__content p{ margin: 0 0 20px; } .ev71-popup-root .ev71-popup--success .ev71-popup__content p:last-child{ margin-bottom: 0; } /* cụm chữ in đậm dài (tô cam trong trình soạn thảo) phải được xuống dòng */ .ev71-popup-root .ev71-popup--success .ev71-popup__content strong{ font-weight: 700; white-space: normal; } .ev71-popup-root .ev71-popup--success .ev71-popup__close{ top: 4px; right: 4px; width: 41px; height: 41px; border-radius: 50%; background: #CDE5FF; color: transparent; font-size: 0; } .ev71-popup-root .ev71-popup--success .ev71-popup__close:before, .ev71-popup-root .ev71-popup--success .ev71-popup__close:after{ content: ""; position: absolute; top: 50%; left: 50%; width: 19px; height: 2.5px; margin: -1.25px 0 0 -9.5px; border-radius: 2px; background: #034EA2; transform: rotate(45deg); } .ev71-popup-root .ev71-popup--success .ev71-popup__close:after{ transform: rotate(-45deg); } .ev71-popup-root .ev71-popup--success .ev71-popup__close:hover{ background: #B9D9FC; } @media (max-width:767px){ .ev71-popup-root .ev71-popup--success .ev71-popup__box{ padding: 20px 22px 22px; } .ev71-popup-root .ev71-popup--success .ev71-popup__title{ margin: 26px 0 14px; font-size: 21px; } .ev71-popup-root .ev71-popup--success .ev71-popup__content{ font-size: 15px; } .ev71-popup-root .ev71-popup--success .ev71-popup__content p{ margin-bottom: 16px; } } /* Tiêu đề form: chữ gradient cam (18/09/2026). Trình duyệt không hỗ trợ background-clip:text vẫn thấy màu cam đặc nhờ dòng color phía trên. */ .ev71-form-wrap .ev71-form-heading{ color: #FF631D; } @supports ((-webkit-background-clip: text) or (background-clip: text)){ .ev71-form-wrap .ev71-form-heading{ background-image: linear-gradient(180deg, #FF631D 0%, #FE6816 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } }