.link-disabled { pointer-events: none; cursor: not-allowed !important; background: #999 !important; text-decoration: none; } .backdrop { display: none; } .nav-links .links-item-close { display: none; } /* hero */ .hero-banner { padding-bottom: 110px; position: relative; overflow: hidden; } .hero-content { display: grid; grid-template-columns: 1fr 1fr; gap: 17px; align-items: center; position: relative; z-index: 2; } .hero-title { color: #1A79C8; font-size: 36px; font-style: normal; font-weight: 600; line-height: 60px; margin: 0; } .highlight { color: #1A79C8; font-size: 45px; font-style: normal; font-weight: 800; line-height: 60px; } .hero-description { color: #000; font-size: 18px; font-style: normal; font-weight: 400; line-height: 30px; } .description-highlight { display: block; color: #000; font-size: 18px; font-style: normal; font-weight: 700; line-height: 30px; margin-top: 30px; } .user-type-links { display: flex; gap: 2rem; } .teacher-links, .student-links { flex: 1; } .link-category-title { color: #707070; font-size: 18px; font-style: italic; font-weight: 400; line-height: 70px; margin-bottom: 0; } .platform-buttons { display: flex; flex-direction: column; gap: 0.5rem; } .access-btn { padding: 6px 29px; color: white; border: none; cursor: pointer; font-weight: 500; transition: all 0.3s ease; width: 135px; border-radius: 10px; background: #2194F3; display: inline; } .banner-image { width: 100%; height: auto; } .hero-image { margin: auto; text-align: center; } .hero-image .hero-links { display: none; } .hero-image .hero-description { display: none; } .hero-text { padding-left: 47px; } .problems { background: #2194F3; margin-top: 110px; } .problems-section { background-size: cover; padding: 5rem 0; color: white; position: relative; background-position: center; background-repeat: no-repeat; } .problems-section-title { text-align: center; } .problems-section-title h1 { color: #FFF; font-size: 33px; font-style: normal; font-weight: 700; line-height: normal; margin: 0; } .problem-card { display: flex; align-items: center; gap: 3rem; margin-bottom: 23px; padding: 2rem; border-radius: 20px; backdrop-filter: blur(10px); } .problem-visual { text-align: center; min-width: 200px; } .problem-icon { width: 423px; height: 282px; flex-shrink: 0; aspect-ratio: 3/2; margin: 0 auto 1rem; filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.2)); } .problem-title { padding-top: 15px; font-weight: 700; color: white; color: #FFF; font-size: 29px; font-style: normal; font-weight: 700; line-height: normal; } .problem-content { flex: 1; } .problem-item { margin-bottom: 2rem; } .problem-heading { color: #FFF; font-size: 22px; font-style: normal; font-weight: 700; line-height: normal; } .problem-description { margin-top: 19px; color: #FFF; font-size: 18px; font-style: normal; font-weight: 400; line-height: normal; } .student-problems { flex-direction: row-reverse; } .class-image img { width: 423px; height: 282px; flex-shrink: 0; aspect-ratio: 3/2; } .student-image img { width: 423px; height: 282px; flex-shrink: 0; aspect-ratio: 3/2; } /* Solutions Section */ .solutions-section { padding: 5rem 0; background: white; } .section-header { text-align: center; margin-bottom: 4rem; } .section-title { max-width: 624px; color: #1A79C8; text-align: center; margin: auto; font-size: 33px; font-style: normal; font-weight: 700; line-height: 55px; letter-spacing: 0.66px; } .solution-card { display: flex; align-items: start; background: white; gap: 30px; } .solution-content { border-radius: 30px; background: rgba(213, 236, 255, 0.47); max-width: 52%; padding: 21px 45px 60px 45px; } .solution-header { display: flex; align-items: center; text-align: center; gap: 1rem; margin-bottom: 2rem; margin: auto; } .solution-icon { width: 100px; height: 100px; flex-shrink: 0; aspect-ratio: 1/1; } .solution-category { color: #1A79C8; text-align: center; font-size: 30px; font-style: normal; font-weight: 700; line-height: normal; } .solution-features { display: flex; flex-direction: column; gap: 40px; padding-top: 33px; } .feature-title { color: #1A79C8; font-size: 22px; font-style: normal; font-weight: 700; line-height: normal; } .feature-description { margin-top: 15px; color: #707070; font-size: 18px; font-style: normal; font-weight: 400; line-height: normal; } .solution-visual { width: 50%; padding-top: 41px; } .decorative-stars { z-index: 1; display: flex; justify-content: space-between } /* .star-pattern { display: flex; } */ .star-pattern-1 { padding-top: 0; } .star-pattern-2 { padding-top: 55px; } .star-pattern-3 { padding-top: 110px; } .solution-screenshot { padding-top: 16px; width: 100%; max-width: 561px; position: relative; z-index: 2; } .mobile-screenshot { border-radius: 20px; } .solution-mobile { position: relative; min-height: 700px; } .solution-mobile img { position: absolute; top: 0; left: 0; object-fit: cover; } .mobile-screenshot-1 { width: 275px; height: 563px; margin-top: 110px; z-index: 2; } .mobile-screenshot-2 { width: 312px; height: 643px; margin-left: 175px; z-index: 1; } .student-solution { margin-top: 56px; } .testimonials-wp { background: rgba(213, 236, 255, 0.47); } .testimonials-container { display: flex; gap: 30px; } .testimonials-section { padding: 5rem 0; background: rgba(213, 236, 255, 0.47); } .testimonials-header { text-align: center; margin-bottom: 3rem; } .testimonials-title { color: #1A79C8; font-size: 33px; font-style: normal; font-weight: 700; line-height: 60px; margin-bottom: 48px; } .community-love-image { width: 320px; height: 320px; margin: auto; } .testimonials-block { display: block; } .testimonials { display: flex; gap: 46px; margin-top: 46px; } .testimonial-card2 { margin-top: 45px } .testimonial-card3 { margin-top: -45px } @media (max-width: 768px) { .testimonials-grid .testimonial-card:nth-child(even) { margin-top: 0; } } .testimonial-card { width: 323px; height: 323px; background: white; padding: 32px; border-radius: 10px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); transition: transform 0.3s ease; } .testimonial-card:hover { transform: translateY(-5px); } .testimonial-author { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.5rem; } .author-avatar { width: 100px; height: 100px; border-radius: 50%; } .author-name { font-size: 1.1rem; font-weight: 600; color: #2c3e50; margin-bottom: 0.3rem; } .author-role { color: #5a6c7d; font-size: 0.9rem; margin-bottom: 0.5rem; } .rating-stars { width: 80px; height: auto; } .testimonial-content { color: #5a6c7d; line-height: 1.6; font-style: italic; } /* FAQ Section */ .faq-section-title { color: #1A79C8; text-align: center; font-size: 33px; font-style: normal; font-weight: 700; line-height: 55px; letter-spacing: 0.66px; } .faq-section { padding: 35px 0; background: white; } .faq-list { margin: 0 auto; } .faq-item { overflow: hidden; transition: all 0.3s ease; border-bottom: 1px solid #A5A5A5; } .faq-question { color: #000; font-size: 22px; font-style: normal; font-weight: 700; line-height: normal; padding: 25px; font-weight: 600; cursor: pointer; border: none; list-style: none; display: flex; justify-content: space-between; align-items: center; transition: transform 0.3s ease; } .faq-question::after { content: '+'; font-size: 1.5rem; color: #000000; transition: transform 0.3s ease; } .faq-item[open] .faq-question::after { content: '-'; } .faq-answer { padding: 0 1.5rem 1.5rem; background: white; } .faq-answer p { color: #000; font-size: 18px; font-style: normal; font-weight: 400; line-height: normal; } .faq-footer { text-align: center; margin-top: 3rem; } .additional-questions-link { color: #1A79C8; font-size: 18px; font-style: normal; font-weight: 700; line-height: normal; text-decoration-line: underline; text-decoration-style: solid; text-decoration-skip-ink: auto; text-decoration-thickness: auto; text-underline-offset: auto; text-underline-position: from-font; border-bottom: 2px solid transparent; transition: border-color 0.3s ease; } .additional-questions-link:hover { border-bottom-color: #4A90E2; } /* Contact Section */ .contact-section { background: rgba(213, 236, 255, 0.47); position: relative; margin-top: 41px; text-align: left; padding-top: 41px; } .contact-container { max-width: 866px; position: relative; } .contact-wp { position: relative; } .support-image-bg { position: absolute; right: 100px; top: 100px; } .contact-title { color: #1A79C8; font-size: 33px; font-style: normal; font-weight: 700; line-height: 60px; } .contact-form { margin-top: 20px; padding: 30px 73px 54px 62px; background: white; border-radius: 20px; box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1); } .form-group { /* padding-bottom: 20px */ } .you-are { display: flex; justify-content: space-between; } .you-are .form-label { flex-grow: 2 } .you-are .radio-group { flex-grow: 3 } .form-label { display: block; align-items: center; margin: auto 0; color: #000; font-size: 18px; font-style: normal; font-weight: 700; line-height: 60px; } .support-image-container { display: flex; justify-content: space-between; } .support-image-left { text-align: left; } .support-image-left img { left: -150px; z-index: -1; top: -130px; } .support-image-right { text-align: right; } .support-image { width: 446px; height: 223px; position: relative; right: 0; top: -50px; } .radio-group { display: flex; justify-content: space-between; } .radio-option { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; } .radio-input { width: 18px; height: 18px; accent-color: #4A90E2; } .radio-text { color: #000; font-size: 18px; font-style: normal; font-weight: 400; line-height: 60px; } .form-input, .form-textarea { width: 100%; height: 52px; padding: 6px 10px; border: 2px solid #e1e8ed; border-radius: 8px; font-size: 1rem; transition: border-color 0.3s ease; } .form-input:focus, .form-textarea:focus { outline: none; } .form-textarea { min-height: 120px; resize: vertical; } .form-submit-wrapper { display: flex; justify-content: center; } .form-submit-btn { border: none; cursor: pointer; transition: all 0.3s ease; border-radius: 10px; margin-top: 30px; background: #2194F3; padding: 10px 50px; color: #FFF; font-size: 20px; font-style: normal; font-weight: 400; line-height: normal; } .form-submit-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 25px rgba(74, 144, 226, 0.3); } /* Footer */ .site-footer { background: #051F7C; color: white; padding: 10px 0 39px 0px; /* top: -50px; position: relative; */ } .contact-label-wp { width: 80px; } .footer-content { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 2rem; padding: 50px 0; } .footer-logo { width: 149px; height: auto; margin-bottom: 1rem; filter: brightness(0) invert(1); } .footer-address { color: #FFF; font-size: 15px; font-style: normal; font-weight: 400; line-height: normal; } .contact-item { display: flex; margin-bottom: 14px; } .footer-contact { display: grid; grid-template-columns: 1fr 1fr; } .contact-label { color: #FFF; font-size: 15px; font-style: normal; font-weight: 400; line-height: normal; margin-right: 30px; width: 50px; } .contact-link { color: #FFF; font-size: 15px; font-style: normal; font-weight: 400; line-height: normal; text-align: left; text-decoration: none; } .contact-link:hover { color: #4A90E2; } .legal-links { list-style: none; } .legal-links li { margin-bottom: 0.8rem; align-items: center; } .legal-link { color: #FFF; font-size: 15px; font-style: normal; font-weight: 400; line-height: normal; text-decoration-style: solid; text-decoration-skip-ink: auto; text-decoration-thickness: auto; text-underline-offset: auto; text-underline-position: from-font; transition: color 0.3s ease; } .legal-link:hover { color: #4A90E2; } /* popup */ /* Popup Styles */ /* Popup Styles - Fixed version */ .popup-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); display: none; /* Thêm display: none để hoàn toàn ẩn */ align-items: center; justify-content: center; z-index: 1000; opacity: 0; visibility: hidden; transition: all 0.3s ease; backdrop-filter: blur(5px); } .popup-overlay.show { display: flex; /* Hiển thị khi có class show */ opacity: 1; visibility: visible; } .popup { background: white; border-radius: 20px; padding: 40px; text-align: center; max-width: 400px; width: 90%; transform: scale(0.7); transition: all 0.3s ease; box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2); } .popup-overlay.show .popup { transform: scale(1); } .success-icon { width: 80px; height: 80px; background: #2194F3; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 20px; animation: pulse 2s infinite; } .success-icon::before { content: '✓'; color: white; font-size: 40px; font-weight: bold; } @keyframes pulse { 0% { box-shadow: 0 0 0 0 #2194F3; } 70% { box-shadow: 0 0 0 10px rgba(33, 148, 243, 0); } 100% { box-shadow: 0 0 0 0 rgba(33, 148, 243, 0); } } .popup h3 { color: #333; font-size: 24px; margin-bottom: 15px; } .popup p { color: #666; line-height: 1.6; margin-bottom: 25px; } .popup-btn { background: #2194F3; color: white; border: none; padding: 12px 30px; border-radius: 25px; font-size: 14px; font-weight: 600; cursor: pointer; transition: all 0.3s ease; } .popup-btn:hover { transform: translateY(-2px); box-shadow: 0 4px 15px rgba(33, 148, 243, 0.3); } @media screen and (max-width: 1024px) { /* Các quy tắc cụ thể cho màn hình dưới 768px mà không phải là critical */ /* hero */ .grid-container { grid-template-columns: 1fr; } .hero-text .hero-links { display: none; } .hero-text .hero-description { display: none; } .hero-image .user-type-links { display: block; } .hero-image .hero-links { display: block; } .hero-image .hero-description { display: block; } .hero-image img { width: 281px; height: 281px; flex-shrink: 0; aspect-ratio: 1/1; } .hero-text { padding: 0 28px; } .navbar { padding-bottom: 29px; } .hero-title { text-align: center; font-size: 23px; line-height: 40px; } .highlight { font-size: 28px; font-style: normal; font-weight: 800; line-height: 40px; } .hero-description-mobile { margin-top: 9px; } .hero-description-mobile .description-highlight-mobile { color: #707070; text-align: center; font-size: 15px; font-style: normal; font-weight: 400; line-height: 25px; margin: 0; } .teacher-links { display: flex; margin-top: 37px; } .student-links { display: flex; margin-top: 12px; } .access-btn { width: 89px; height: auto; flex-shrink: 0; color: #FFF; font-size: 15px; font-style: normal; font-weight: 400; line-height: normal; padding: 8px 12px; } .link-category-title { width: 83px; color: #707070; font-size: 15px; font-style: italic; font-weight: 400; line-height: normal; margin: 0 12px 0 0; } .teacher-access-btn { color: #FFF; font-size: 15px; font-style: normal; font-weight: 400; line-height: normal; padding: 8px 12px; } .platform-buttons { flex-direction: row; gap: 0.5rem; } .hero-description { margin-top: 44px; color: #000; text-align: center; font-size: 15px; font-style: normal; font-weight: 400; line-height: 26px; } } @media screen and (max-width: 1280px) { .backdrop.active { display: block; position: fixed; background: rgba(105, 105, 105, 0.79); width: 100vw; height: 100vh; z-index: 8; opacity: 0.5; top: 0; left: 0; } .nav-links.active .links-item-close { display: block; text-align: right; margin-right: 20px; margin-top: 20px; } .nav-links.active .links-item-close span { cursor: pointer; } .nav-links.active { display: block; width: 326px; height: 873px; flex-shrink: 0; border-radius: 15px 0 0 15px; background: white; position: fixed; right: 0; top: 0; z-index: 9; padding: 0 28px } .nav-links.active div { margin-top: 17px; } .nav-links.active .auth-buttons { display: inline-grid; } .problems-section { padding: 3rem 0; } .problems-section-title h1 { font-size: 26px; line-height: 36px; margin-bottom: 30px; } .problem-card { flex-direction: column; text-align: center; gap: 1.5rem; margin-bottom: 30px; padding: 1.5rem; } .student-problems { flex-direction: column; } .problem-icon { width: 280px; height: 190px; } .problem-title { font-size: 24px; padding-top: 10px; } .problem-heading { font-size: 18px; margin-bottom: 10px; } .problem-description { font-size: 16px; margin-top: 10px; } /* Solutions Section Responsive */ .solutions-section { padding: 3rem 0; } .section-title { font-size: 26px; line-height: 40px; letter-spacing: 0.5px; } .solution-card { flex-direction: column; gap: 20px; margin-bottom: 40px; } .solution-content { max-width: 100%; padding: 20px 25px 40px 25px; } .solution-header { flex-direction: column; gap: 15px; margin-bottom: 25px; } .solution-icon { width: 80px; height: 80px; } .solution-category { font-size: 24px; } .solution-features { gap: 30px; padding-top: 20px; } .feature-title { font-size: 18px; } .feature-description { font-size: 16px; margin-top: 10px; } .solution-visual { width: 100%; padding-top: 20px; text-align: center; } .decorative-stars { display: none; } .solution-screenshot { max-width: 100%; padding-top: 0; } .solution-mobile { min-height: 400px; display: flex; justify-content: center; align-items: center; } .mobile-screenshot-1 { width: 200px; height: 410px; margin-top: 0; position: relative; left: -20px; } .mobile-screenshot-2 { width: 220px; height: 450px; margin-left: 100px; margin-top: 30px; } .student-solution { margin-top: 0; } .testimonials-grid { grid-template-columns: 1fr; } .radio-group { flex-direction: column; gap: 1rem; } .section-title { font-size: 1.8rem; } .contact-form { padding: 2rem; } /* Testimonials Section Responsive */ .testimonials-section { padding: 3rem 0; } .testimonials-container { flex-direction: column; gap: 20px; } .testimonials-title { font-size: 26px; line-height: 40px; margin-bottom: 30px; } .community-love-image { width: 200px; height: 200px; } .testimonials-block { display: flex; flex-direction: column; gap: 20px; } .testimonials { flex-direction: column; gap: 20px; margin-top: 20px; align-items: center; } .testimonial-card { width: 100%; max-width: 350px; height: auto; min-height: 250px; padding: 24px; margin-top: 0 !important; /* Override tất cả margin-top */ } .testimonial-card2, .testimonial-card3 { margin-top: 0 !important; } .author-avatar { width: 60px; height: 60px; } .author-name { font-size: 16px; } .author-role { font-size: 14px; } .rating-stars { width: 60px; } .testimonial-content { font-size: 14px; } /* FAQ Section Responsive */ .faq-section { padding: 30px 0; } .faq-section-title { font-size: 26px; line-height: 40px; letter-spacing: 0.5px; margin-bottom: 30px; } .faq-question { font-size: 18px; padding: 20px 15px; } .faq-answer p { font-size: 16px; padding: 0 15px 20px; } .additional-questions-link { font-size: 16px; } /* Contact Section Responsive */ .contact-section { padding-top: 30px; margin-top: 30px; } .contact-title { font-size: 26px; line-height: 40px; text-align: center; margin-bottom: 20px; } .contact-form { padding: 25px 20px 40px 20px; margin-top: 15px; } .you-are { flex-direction: column; gap: 15px; } .you-are .form-label { line-height: normal; margin-bottom: 10px; } .radio-group { flex-direction: column; gap: 10px; } .radio-text { line-height: normal; } .form-label { font-size: 16px; line-height: normal; margin-bottom: 8px; } .form-input, .form-textarea { height: 45px; font-size: 16px; padding: 8px 12px; } .form-textarea { min-height: 100px; } .form-submit-btn { padding: 12px 40px; font-size: 18px; margin-top: 25px; } .support-image-container { display: none; /* Ẩn support images trên mobile */ } .support-image-bg { display: none; } /* Footer Responsive */ .site-footer { padding: 30px 0; top: 0; } .footer-content { grid-template-columns: 1fr; gap: 30px; padding: 30px 0; text-align: center; } .footer-logo { width: 120px; margin: 0 auto 15px; } .footer-address { font-size: 14px; margin-bottom: 20px; } .legal-links li { margin-bottom: 12px; } .contact-label { width: 60px; font-size: 14px; margin-right: 15px; } .contact-link { font-size: 14px; } .legal-link { font-size: 14px; } /* Popup Responsive */ .popup { padding: 30px 20px; max-width: 350px; margin: 0 20px; } .success-icon { width: 60px; height: 60px; margin-bottom: 15px; } .popup h3 { font-size: 20px; margin-bottom: 12px; } .popup p { font-size: 14px; margin-bottom: 20px; } .popup-btn { padding: 10px 25px; font-size: 14px; } } .policy { min-height: 100vh; } .policy .section-title { max-width: 768px; } .policy .section-sub-title { font-size: 1.25rem; line-height: 1.75rem; color: #4b5563; padding: 0; margin: 0 0 20px; text-align: center; } .policy .sub-title { color: #000; font-size: 22px; font-style: normal; font-weight: 700; line-height: normal; padding: 25px 25px 0; font-weight: 600; cursor: pointer; border: none; list-style: none; display: flex; justify-content: space-between; align-items: center; transition: transform 0.3s ease; } .policy .policy-content { font-size: 16px; font-style: normal; line-height: 1.4em; font-weight: 400; border: none; } .policy .policy-content strong { margin: 10px 25px 0; font-size: 18px; font-style: normal; line-height: 1.4em; font-weight: 600; border: none; display: block; } .policy .policy-content p, .policy .policy-content strong { text-align: justify; } .policy { padding-bottom: 50px; } @media screen and (max-width: 1024px) { .policy .container { padding-left: 15px; padding-right: 15px; } .policy .section-title { max-width: 100%; padding: 0 20px; } .policy .section-sub-title { font-size: 1rem; line-height: 1.5rem; } .policy .sub-title { font-size: 18px; padding: 20px; } .policy .policy-content { font-size: 14px; } } @media screen and (max-width: 768px) { .policy .section-title { font-size: 1.4rem; line-height: 1.3em; } .legal-links li.flex { display: flex; justify-content: start; } }