.elementor-11 .elementor-element.elementor-element-677cf4c9{--display:flex;--min-height:75vh;--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;--justify-content:center;--overlay-opacity:0.5;}.elementor-11 .elementor-element.elementor-element-677cf4c9:not(.elementor-motion-effects-element-type-background), .elementor-11 .elementor-element.elementor-element-677cf4c9 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;background-image:url("https://cdn.lawmaster.vn/2026/05/banner.jpeg");background-position:center center;background-repeat:no-repeat;background-size:cover;}.elementor-11 .elementor-element.elementor-element-677cf4c9::before, .elementor-11 .elementor-element.elementor-element-677cf4c9 > .elementor-background-video-container::before, .elementor-11 .elementor-element.elementor-element-677cf4c9 > .e-con-inner > .elementor-background-video-container::before, .elementor-11 .elementor-element.elementor-element-677cf4c9 > .elementor-background-slideshow::before, .elementor-11 .elementor-element.elementor-element-677cf4c9 > .e-con-inner > .elementor-background-slideshow::before, .elementor-11 .elementor-element.elementor-element-677cf4c9 > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{--background-overlay:'';}.elementor-11 .elementor-element.elementor-element-677cf4c9.e-con{--flex-grow:0;--flex-shrink:0;}:root{--page-title-display:none;}@media(min-width:768px){.elementor-11 .elementor-element.elementor-element-677cf4c9{--width:100%;}}/* Start custom CSS for container, class: .elementor-element-677cf4c9 *//* ========================= FIX FULL WIDTH BACKGROUND ========================= */ .elementor-11 .elementor-element.elementor-element-677cf4c9 { width: 100vw !important; max-width: 100vw !important; margin-left: calc(-50vw + 50%) !important; margin-right: calc(-50vw + 50%) !important; } /* ========================= 1. CĂN GIỮA NÚT GOOGLE ========================= */ .elementor-11 .elementor-element.elementor-element-677cf4c9 #tutor-pro-google-authentication { width: 100%; display: flex; justify-content: center; } .elementor-11 .elementor-element.elementor-element-677cf4c9 #tutor-pro-google-authentication > div { width: 100%; display: flex; justify-content: center; } .elementor-11 .elementor-element.elementor-element-677cf4c9 #tutor-pro-social-authentication iframe { margin: 0 auto !important; display: block; } /* ========================= 2. STYLE NÚT ĐĂNG NHẬP ========================= */ .elementor-11 .elementor-element.elementor-element-677cf4c9 .tutor-btn.tutor-btn-primary { background-color: #f5c000 !important; border-color: #f5c000 !important; color: #fff !important; text-transform: uppercase; font-weight: 600; } /* ========================= 3. ẨN TEXT GỐC (Sign In) ========================= */ .elementor-11 .elementor-element.elementor-element-677cf4c9 .tutor-btn.tutor-btn-primary { font-size: 0; } /* ========================= 4. THÊM TEXT MỚI ========================= */ .elementor-11 .elementor-element.elementor-element-677cf4c9 .tutor-btn.tutor-btn-primary::after { content: "ĐĂNG NHẬP"; font-size: 16px; color: #fff; } /* ========================= 5. HIỆU ỨNG HOVER ========================= */ .elementor-11 .elementor-element.elementor-element-677cf4c9 .tutor-btn.tutor-btn-primary:hover { background-color: #e0b000 !important; border-color: #e0b000 !important; } /* ========== FIX ALL - THẲNG HÀNG 100% ========== */ /* 1. Container chính */ .tutor-login-form .tutor-text-center.tutor-fs-6.tutor-mt-20, .tutor-text-center.tutor-fs-6.tutor-mt-20 { display: flex !important; align-items: baseline !important; justify-content: center !important; flex-wrap: nowrap !important; gap: 4px !important; /* 👈 giảm từ 8px xuống 4px, sát hơn */ } /* 2. Ẩn HOÀN TOÀN nội dung cũ bên trong (kể cả text gốc) */ .tutor-login-form .tutor-text-center.tutor-fs-6.tutor-mt-20, .tutor-text-center.tutor-fs-6.tutor-mt-20 { font-size: 0 !important; color: transparent !important; } /* 3. Ẩn mọi text con bên trong (nếu có span, text node) */ .tutor-login-form .tutor-text-center.tutor-fs-6.tutor-mt-20 *, .tutor-text-center.tutor-fs-6.tutor-mt-20 * { font-size: 0 !important; color: transparent !important; } /* 4. Tạo text "Bạn chưa có tài khoản?" */ .tutor-login-form .tutor-text-center.tutor-fs-6.tutor-mt-20::before, .tutor-text-center.tutor-fs-6.tutor-mt-20::before { content: "Bạn chưa có tài khoản?" !important; font-size: 14px !important; color: #ffffff !important; display: inline-block !important; line-height: 1.4 !important; } /* 5. Link "Đăng ký ngay" - MÀU XÁM GIỐNG TEXT BÊN TRÁI */ .tutor-login-form .tutor-text-center.tutor-fs-6.tutor-mt-20 a, .tutor-text-center.tutor-fs-6.tutor-mt-20 a { display: inline-block !important; font-size: 14px !important; color: #ffffff !important; /* 👈 đổi từ vàng sang xám, giống text bên trái */ font-weight: 500 !important; line-height: 1.4 !important; text-decoration: none !important; background: transparent !important; padding: 0 !important; margin: 0 !important; border: none !important; } /* 6. Hover - Khi hover mới chuyển thành màu vàng */ .tutor-login-form .tutor-text-center.tutor-fs-6.tutor-mt-20 a:hover, .tutor-text-center.tutor-fs-6.tutor-mt-20 a:hover { color: #f5c000 !important; /* 👈 hover mới thành vàng */ text-decoration: underline !important; } /* ========== ĐỔI TEXT + FIX CHECKBOX + STYLE GIỐNG ĐĂNG KÝ NGAY ========== */ /* 1. Container - căn giữa text với checkbox */ .tutor-login-form .tutor-d-flex.tutor-justify-between.tutor-align-center.tutor-mb-40 .tutor-form-check, .tutor-d-flex.tutor-justify-between.tutor-align-center.tutor-mb-40 .tutor-form-check { display: flex !important; align-items: center !important; gap: 8px !important; } /* 2. Đổi text "Remember me" -> "Ghi nhớ đăng nhập" và KHÔNG hover, KHÔNG click */ .tutor-login-form .tutor-d-flex.tutor-justify-between.tutor-align-center.tutor-mb-40 .tutor-form-check label, .tutor-d-flex.tutor-justify-between.tutor-align-center.tutor-mb-40 .tutor-form-check label { font-size: 0 !important; color: #ffffff !important; pointer-events: none !important; /* Không click được */ cursor: default !important; /* Không thành bàn tay */ } .tutor-login-form .tutor-d-flex.tutor-justify-between.tutor-align-center.tutor-mb-40 .tutor-form-check label::before, .tutor-d-flex.tutor-justify-between.tutor-align-center.tutor-mb-40 .tutor-form-check label::before { content: "Ghi nhớ đăng nhập" !important; font-size: 14px !important; color: #ffffff !important; display: inline-block !important; line-height: 1.4 !important; } /* 3. KHÔNG đổi màu khi hover vào label "Ghi nhớ đăng nhập" */ .tutor-login-form .tutor-d-flex.tutor-justify-between.tutor-align-center.tutor-mb-40 .tutor-form-check label:hover::before, .tutor-d-flex.tutor-justify-between.tutor-align-center.tutor-mb-40 .tutor-form-check label:hover::before { color: f1f5f9 !important; /* Giữ nguyên màu xám, không đổi thành vàng */ } /* 4. Checkbox màu vàng */ .tutor-login-form .tutor-d-flex.tutor-justify-between.tutor-align-center.tutor-mb-40 .tutor-form-check-input, .tutor-d-flex.tutor-justify-between.tutor-align-center.tutor-mb-40 .tutor-form-check-input { accent-color: #f5c000 !important; /* Màu vàng cho checkbox */ width: 16px !important; height: 16px !important; cursor: pointer !important; margin: 0 !important; } /* 5. Đổi text "Forgot password?" -> "Quên mật khẩu?" (giữ nguyên hover vàng) */ .tutor-login-form .tutor-d-flex.tutor-justify-between.tutor-align-center.tutor-mb-40 a.tutor-btn.tutor-btn-ghost, .tutor-d-flex.tutor-justify-between.tutor-align-center.tutor-mb-40 a.tutor-btn.tutor-btn-ghost { font-size: 0 !important; text-decoration: none !important; background: transparent !important; padding: 0 !important; margin: 0 !important; border: none !important; } .tutor-login-form .tutor-d-flex.tutor-justify-between.tutor-align-center.tutor-mb-40 a.tutor-btn.tutor-btn-ghost::after, .tutor-d-flex.tutor-justify-between.tutor-align-center.tutor-mb-40 a.tutor-btn.tutor-btn-ghost::after { content: "Quên mật khẩu?" !important; font-size: 14px !important; color: f1f5f9 !important; display: inline-block !important; line-height: 1.4 !important; } /* 6. Hover "Quên mật khẩu?" -> màu vàng + gạch chân */ .tutor-login-form .tutor-d-flex.tutor-justify-between.tutor-align-center.tutor-mb-40 a.tutor-btn.tutor-btn-ghost:hover::after, .tutor-d-flex.tutor-justify-between.tutor-align-center.tutor-mb-40 a.tutor-btn.tutor-btn-ghost:hover::after { color: #f5c000 !important; text-decoration: underline !important; } /* ========== ĐỔI TEXT "Hi, Welcome back!" -> "Chào mừng bạn đến với Lawmaster!" ========== */ .tutor-login-form .tutor-fs-5.tutor-color-black.tutor-mb-32, .tutor-fs-5.tutor-color-black.tutor-mb-32 { font-size: 0 !important; color: transparent !important; } .tutor-login-form .tutor-fs-5.tutor-color-black.tutor-mb-32::before, .tutor-fs-5.tutor-color-black.tutor-mb-32::before { content: "Chào mừng bạn đến với Lawmaster!" !important; font-size: 18px !important;color: #ffffff !important; display: inline-block !important; line-height: 1.4 !important; } /* ========================================================= 🔥 LAWMASTER LOGIN UI - PRO VERSION (LEVEL 2) ========================================================= */ /* ========================= 0. BACKGROUND PAGE ========================= */ body { background: linear-gradient(135deg, #f9fafb, #f3f4f6); } /* ========================= 1. CARD LOGIN (GLASS) ========================= */ .elementor-11 .elementor-element.elementor-element-677cf4c9 .tutor-login-form { background: rgba(255, 255, 255, 0.9); border-radius: 18px; padding: 36px 30px; backdrop-filter: blur(10px); box-shadow: 0 20px 60px rgba(0,0,0,0.08), 0 4px 10px rgba(0,0,0,0.03); transition: all 0.3s ease; } /* Hover nhẹ */ .elementor-11 .elementor-element.elementor-element-677cf4c9 .tutor-login-form:hover { transform: translateY(-2px); } /* ========================= 2. TITLE ========================= */ .elementor-11 .elementor-element.elementor-element-677cf4c9 .tutor-login-form .tutor-fs-5 { font-size: 20px !important; font-weight: 700; text-align: center; margin-bottom: 24px; } /* ========================= 3. INPUT (PREMIUM FEEL) ========================= */ .elementor-11 .elementor-element.elementor-element-677cf4c9 .tutor-form-control { border-radius: 12px !important; padding: 14px 16px !important; border: 1px solid #ffffff !important; background: #fff; transition: all 0.25s ease; font-size: 14px; } /* hover */ .elementor-11 .elementor-element.elementor-element-677cf4c9 .tutor-form-control:hover { border-color: #ffffff !important; } /* focus */ .elementor-11 .elementor-element.elementor-element-677cf4c9 .tutor-form-control:focus { border-color: #f5c000 !important; box-shadow: 0 0 0 4px rgba(245,192,0,0.18); transform: scale(1.01); } /* ========================= 4. BUTTON LOGIN (PRO) ========================= */ .elementor-11 .elementor-element.elementor-element-677cf4c9 .tutor-btn.tutor-btn-primary { background: linear-gradient(135deg, #f5c000, #ffd84d) !important; border: none !important; color: #fff !important; text-transform: uppercase; font-weight: 700; border-radius: 12px; height: 50px; letter-spacing: 0.5px; transition: all 0.25s ease; position: relative; overflow: hidden; } /* shine effect */ .elementor-11 .elementor-element.elementor-element-677cf4c9 .tutor-btn.tutor-btn-primary::before { content: ""; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient( 120deg, transparent, rgba(255,255,255,0.4), transparent ); transition: 0.6s; } /* hover */ .elementor-11 .elementor-element.elementor-element-677cf4c9 .tutor-btn.tutor-btn-primary:hover::before { left: 100%; } .elementor-11 .elementor-element.elementor-element-677cf4c9 .tutor-btn.tutor-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(245,192,0,0.45); } /* click */ .elementor-11 .elementor-element.elementor-element-677cf4c9 .tutor-btn.tutor-btn-primary:active { transform: scale(0.97); } /* ========================= 5. GOOGLE BUTTON CENTER ========================= */ .elementor-11 .elementor-element.elementor-element-677cf4c9 #tutor-pro-google-authentication { width: 100%; display: flex; justify-content: center; } .elementor-11 .elementor-element.elementor-element-677cf4c9 #tutor-pro-social-authentication iframe { margin: 0 auto !important; } /* ========================= 6. TEXT REGISTER ========================= */ .tutor-login-form .tutor-text-center.tutor-fs-6.tutor-mt-20 { display: flex !important; justify-content: center !important; align-items: center !important; gap: 6px; font-size: 14px; color: #6c757d; } /* link */ .tutor-login-form .tutor-text-center a { color: #f5c000 !important; font-weight: 600; position: relative; text-decoration: none; } /* underline animation */ .tutor-login-form .tutor-text-center a::after { content: ""; position: absolute; left: 0; bottom: -3px; width: 0; height: 2px; background: #f5c000; transition: 0.3s; } .tutor-login-form .tutor-text-center a:hover::after { width: 100%; } /* ========================= 7. CHECKBOX ========================= */ .tutor-form-check-input { accent-color: #f5c000 !important; transform: scale(1.1); } /* ========================= 8. FORGOT PASSWORD ========================= */ .tutor-btn.tutor-btn-ghost { color: #ffffff !important; transition: 0.2s; } .tutor-btn.tutor-btn-ghost:hover { color: #f5c000 !important; text-decoration: underline; } /* ========================= 9. SPACING ========================= */ .tutor-login-form .tutor-mb-32, .tutor-login-form .tutor-mb-40 { margin-bottom: 22px !important; } /* ========================= BACKGROUND LOGO TOP ========================= */ .elementor-11 .elementor-element.elementor-element-677cf4c9 .tutor-login-form { position: relative; overflow: hidden; } /* background logo */ .elementor-11 .elementor-element.elementor-element-677cf4c9 .tutor-login-form::before { content: ""; position: absolute; top: -40px; left: 0; width: 100%; height: 180px; background: url("https://lawmaster.vn/wp-content/uploads/2024/your-logo.png") no-repeat center; background-size: contain; opacity: 0.08; /* 👈 mờ mờ cho xịn */ pointer-events: none; } /* đẩy content xuống để không đè */ .elementor-11 .elementor-element.elementor-element-677cf4c9 .tutor-login-form > * { position: relative; z-index: 2; } .elementor-11 .elementor-element.elementor-element-677cf4c9 .tutor-login-form { padding-top: 120px; /* 👈 tạo khoảng cho logo */ } /* ========================= WRAP FULL LOGIN + GOOGLE ========================= */ .elementor-11 .elementor-element.elementor-element-677cf4c9 .tutor-template-segment.tutor-login-wrap { /* nền glass nhẹ */ background: rgba(255,255,255,0.06); /* 🔥 border vàng full */ border: 2px solid rgba(245,192,0,0.6); border-radius: 24px; padding: 40px 30px; /* shadow tách nền */ box-shadow: 0 25px 70px rgba(0,0,0,0.55), 0 0 40px rgba(245,192,0,0.25); backdrop-filter: blur(12px); max-width: 420px; margin: auto; }/* End custom CSS */