@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@200;300;400;500;600;700&display=swap'); :root{ --main-color:#ff72a1; --red:#e74c3c; --orange:#f39c12; --light-color:#888; --light-bg:#eee; --black:#2c3e50; --white:#fff; --border:.1rem solid rgba(0,0,0,.2); } *{ font-family: 'Nunito', sans-serif; margin:0; padding:0; box-sizing: border-box; outline: none; border:none; text-decoration: none; } *::selection{ background-color: var(--main-color); color:#fff; } html{ font-size: 62.5%; overflow-x: hidden; } html::-webkit-scrollbar{ width: .5rem; height: .5rem; } html::-webkit-scrollbar-track{ background-color: transparent; } html::-webkit-scrollbar-thumb{ background-color: var(--main-color); } body{ background-color: var(--light-bg); padding-left: 30rem; } body.dark{ --light-color:#aaa; --light-bg:#232333; --black:#fff; --white:#2b2c40; --border:.1rem solid rgba(255,255,255,.2); } body.active{ padding-left: 0; } section{ padding:2rem; margin: 0 auto; max-width: 1200px; } .heading{ font-size: 2.5rem; color:var(--black); margin-bottom: 2.5rem; border-bottom: var(--border); padding-bottom: 1.5rem; text-transform: capitalize; } .inline-btn, .inline-option-btn, .inline-delete-btn, .btn, .delete-btn, .option-btn{ border-radius: .5rem; color:#fff; font-size: 1.8rem; cursor: pointer; text-transform: capitalize; padding:1rem 3rem; text-align: center; margin-top: 1rem; } .btn, .delete-btn, .option-btn{ display: block; width: 100%; } .inline-btn, .inline-option-btn, .inline-delete-btn{ display: inline-block; } .btn, .inline-btn{ background-color: var(--main-color); } .option-btn, .inline-option-btn{ background-color:var(--orange); } .more-btn{ text-align: center; } .delete-btn, .inline-delete-btn{ background-color: var(--red); } .inline-btn:hover, .inline-option-btn:hover, .inline-delete-btn:hover, .btn:hover, .delete-btn:hover, .option-btn:hover{ background-color: var(--black); color: var(--white); } .flex-btn{ display: flex; gap: 1rem; } .header{ position: sticky; top:0; left:0; right: 0; background-color: var(--white); z-index: 1000; border-bottom: var(--border); } .header .flex{ display: flex; align-items: center; justify-content: space-between; position: relative; padding: 1.5rem 2rem; } .header .flex .logo { font-size: 2.5rem; color: var(--black); } .logo i { color: #ff72a1; } .header .flex .search-form{ width: 50rem; border-radius: .5rem; background-color: var(--light-bg); padding:1.5rem 2rem; display: flex; gap:2rem; } .header .flex .search-form input{ width: 100%; font-size: 1.8rem; color:var(--black); background:none; } .header .flex .search-form button{ background:none; font-size: 2rem; cursor: pointer; color:var(--black); } .header .flex .search-form button:hover{ color: var(--main-color); } .header .flex .icons div{ font-size: 2rem; color:var(--black); background-color: var(--light-bg); border-radius: .5rem; height: 4.5rem; width: 4.5rem; line-height: 4.5rem; cursor: pointer; text-align: center; margin-left: .7rem; } .header .flex .icons div:hover{ background-color: var(--black); color:var(--white); } .header .flex .profile{ position: absolute; top:120%; right: 2rem; background-color: var(--white); border-radius: .5rem; padding: 1.5rem; text-align: center; overflow: hidden; transform-origin: top right; transform: scale(0); transition: .2s linear; width: 30rem; } .header .flex .profile.active{ transform: scale(1); } .header .flex .profile .image{ height: 10rem; width: 10rem; border-radius: 50%; object-fit: contain; margin-bottom: 1rem; } .header .flex .profile .name{ font-size: 2rem; color:var(--black); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .header .flex .profile .role{ font-size: 1.8rem; color: var(--light-color); } #search-btn{ display: none; } .side-bar{ position: fixed; top: 0; left: 0; width: 30rem; background-color: var(--white); height: 100vh; border-right: var(--border); z-index: 1200; } .side-bar #close-btn{ text-align: right; padding: 2rem; display: none; } .side-bar #close-btn i{ text-align: right; font-size: 2.5rem; background:var(--red); border-radius: .5rem; color:var(--white); cursor: pointer; height: 4.5rem; width: 4.5rem; line-height: 4.5rem; text-align: center; } .side-bar #close-btn i:hover{ background-color: var(--black); } .side-bar .profile{ padding:3rem 2rem; text-align: center; } .side-bar .profile .image{ height: 12rem; width: 12rem; border-radius: 50%; object-fit: contain; margin-bottom: 1rem; margin-top: -2rem; } .side-bar .profile .name{ font-size: 2rem; color:var(--black); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .side-bar .profile .role{ font-size: 1.8rem; color: var(--light-color); } .navbar{ overflow-x: hidden; } .navbar::-webkit-scrollbar{ width: .5rem; height: .5rem; } .navbar::-webkit-scrollbar-track{ background-color: transparent; } .navbar:hover::-webkit-scrollbar-thumb{ background-color: var(--main-color); } .side-bar .navbar a{ display: block; padding: 1.5rem; font-size: 2rem; } .side-bar .navbar a i{ margin-right: 1.5rem; color:var(--main-color); transition: .2s linear; } .side-bar .navbar a span{ color:var(--light-color); } .navbar a span{ color: red; } nav a.active { background:var(--light-bg); overflow:hidden; border-left:5px solid #ff72a1; padding: auto; } .side-bar .navbar a:hover i{ margin-right: 2.5rem; } .side-bar.active{ left: -30rem; } .home-grid .box-container{ display: grid; grid-template-columns: repeat(auto-fit, 27.5rem); gap:1.5rem; justify-content: center; align-items: flex-start; } .home-grid .box-container .box{ background-color: var(--white); border-radius: .5rem; padding:2rem; } .home-grid .box-container .box .title{ font-size: 2rem; color: var(--black); text-transform: capitalize; } .home-grid .box-container .box .flex{ display: flex; flex-wrap: wrap; gap: 1.5rem; margin-top: 2rem; } .home-grid .box-container-dv{ display: grid; grid-template-columns: repeat(auto-fit, minmax(27rem, 1fr)); gap:1.5rem; justify-content: center; align-items: flex-start; } .home-grid .box-container-dv .box{ background-color: var(--white); border-radius: 1rem; transition: transform .5s; } .home-grid .box-container-dv .box:hover{ transform: translate(0, -10px); } .home-grid .box-container-dv .box img{ width: 100%; border-top-right-radius: 1rem; border-top-left-radius: 1rem; } .home-grid .box-container-dv a{ padding: 0 1rem; color:var(--black); font-size: 2rem; font-weight:bold; } .home-grid .box-container-dv p{ padding: 0 1rem; font-size: 1.5rem; margin-bottom: 1.5rem; color:var(--light-color); } .home-grid .box-container .flex a{ background-color: var(--light-bg); border-radius: .5rem; padding: 1rem 1.5rem; font-size: 1.5rem; } .home-grid .box-container .flex a i{ margin-right: 1rem; color:var(--black); } .home-grid .box-container .flex a span{ color:var(--light-color); } .home-grid .box-container .flex a:hover{ background-color: var(--black); } .home-grid .box-container .flex a:hover span{ color:var(--white); } .home-grid .box-container .flex a:hover i{ color:var(--white); } .home-grid .box-container .tutor{ padding: 1rem 0; font-size: 1.8rem; color:var(--light-color); line-height: 2; } .home-grid .box-container .likes{ color:var(--light-color); font-size: 1.7rem; margin-top: 1.5rem; } .home-grid .box-container .likes span{ color:var(--main-color); } .about .row{ display: flex; align-items: center; flex-wrap: wrap; gap:1.5rem; } .about .row .image{ flex: 1 1 40rem; } .about .row .image img{ width: 100%; height: 50rem; animation: animHero 3s linear infinite; } @keyframes animHero { 0%{ transform: translateY(0px); } 50%{ transform: translateY(16px); } 100%{ transform: translateY(0px); } } .about .row .content{ flex: 1 1 40rem; } .about .row .content a{ transition: transform .5s; } .about .row .content a:hover{ transform: translate(0, -10px); } .about .row .content p{ font-size: 1.7rem; line-height: 2; color: var(--light-color); padding: 1rem 0; } .about .row .content h3{ font-size: 3rem; color:var(--black); text-transform: capitalize; } .about .box-container{ display: grid; grid-template-columns: repeat(auto-fit, minmax(27rem, 1fr)); gap:1.5rem; justify-content: center; align-items: flex-start; margin-top: 3rem; } .about .box-container .box{ border-radius: .5rem; background-color: var(--white); padding: 2rem; display: flex; align-items: center; gap: 0.2rem; } .about .box-container .box i{ font-size: 4rem; color: var(--main-color); } .about .box-container .box h3{ font-size: 2.5rem; color: var(--black); margin-bottom: .3rem; } .about .box-container .box p{ font-size: 1.7rem; color:var(--light-color); display: block; } .reviews .box-container{ display: grid; grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr)); gap:1.5rem; justify-content: center; align-items: flex-start; } .reviews .box-container .box{ border-radius: .5rem; background-color: var(--white); padding: 2rem; } .reviews .box-container .box p{ line-height: 1.7; font-size: 1.7rem; color: var(--light-color); } .reviews .box-container .box .student{ margin-top: 2rem; display: flex; align-items: center; gap: 1.5rem; } .reviews .box-container .box .student img{ height: 6rem; width: 6rem; object-fit: cover; border-radius: 20%; } .reviews .box-container .box .student a{ font-size: 2rem; color: var(--black); font-weight: bold; margin-bottom: .3rem; } .reviews .box-container .box .student1{ text-align: center; align-items: center; margin-top: -3rem; } .reviews .box-container .box .student1 img{ height: 15rem; width: 15rem; text-align: center; border-radius: 20%; } .reviews .box-container .box .student1 a{ font-size: 2rem; color: var(--black); font-weight: bold; margin-bottom: .3rem; } .reviews .box-container .box .student .stars{ font-size: 1.5rem; color:var(--orange); } .courses .box-container{ display: grid; grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr)); gap:1.5rem; justify-content: center; align-items: flex-start; } .courses .box-container .box{ border-radius: .5rem; background-color: var(--white); padding: 2rem; } .courses .box-container .box:hover img { transition-duration: 0.5s; -webkit-transform: scale(1.1); transform: scale(1.1); } .courses .box-container .box .thumb{ position: relative; height: 20rem; overflow: hidden; border-radius: .5rem; width: 100%; } .courses .box-container .box .thumb span{ position: absolute; top:1rem; left: 1rem; border-radius: .5rem; padding: .5rem 1.5rem; background-color: rgba(0, 0, 0, 0.605); color: #fff; font-size: 1.5rem; } .courses .box-container .box .thumb img{ width: 100%; height: 20rem; object-fit: cover; border-radius: .5rem; -o-object-fit: cover; object-fit: cover; } .courses .box-container .box .title{ font-size: 2rem; color: var(--black); padding-bottom: .5rem; padding-top: 1rem; } .playlist-details .row{ display: flex; align-items: flex-end; gap:3rem; flex-wrap: wrap; background-color: var(--white); padding: 2rem; } .playlist-details .row .column{ flex: 1 1 40rem; } .playlist-details .row .column .save-playlist{ margin-bottom: 1.5rem; } .playlist-details .row .column .save-playlist button{ border-radius: .5rem; background-color: var(--light-bg); padding:1rem 1.5rem; cursor: pointer; } .playlist-details .row .column .save-playlist button i{ font-size: 2rem; color:var(--black); margin-right: .8rem; } .playlist-details .row .column .save-playlist button span{ font-size: 1.8rem; color:var(--light-color); } .playlist-details .row .column .save-playlist button:hover{ background-color: var(--black); } .playlist-details .row .column .save-playlist button:hover i{ color:var(--white); } .playlist-details .row .column .save-playlist button:hover span{ color:var(--white); } .playlist-details .row .column .thumb{ position: relative; } .playlist-details .row .column .thumb span{ font-size: 1.8rem; color: #fff; background-color: rgba(0,0,0,.3); border-radius: .5rem; position: absolute; top: 1rem; left: 1rem; padding: .5rem 1.5rem; } .playlist-details .row .column .thumb img{ height: 30rem; width: 100%; object-fit: cover; border-radius: .5rem; } .playlist-details .row .column .details h3{ font-size: 2.5rem; color: var(--black); text-transform: capitalize; } .playlist-details .row .column .details p{ padding: 1rem 0; line-height: 2; font-size: 1.8rem; color: var(--light-color); } .playlist-videos .box-container{ display: grid; grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr)); gap:1.5rem; justify-content: center; align-items: flex-start; } .playlist-videos .box-container .box{ background-color: var(--white); border-radius: .5rem; padding: 2rem; position: relative; } .playlist-videos .box-container .box i{ position: absolute; top: 2rem; left: 2rem; right: 2rem; height: 20rem; border-radius: .5rem; background-color: rgba(0,0,0,.3); display: flex; align-items: center; justify-content: center; font-size: 5rem; color: #fff; display: none; } .playlist-videos .box-container .box:hover i{ display: flex; } .playlist-videos .box-container .box img{ width: 100%; height: 20rem; object-fit: cover; border-radius: .5rem; } .playlist-videos .box-container .box h3{ margin-top: 1.5rem; font-size: 1.8rem; color: var(--black); } .playlist-videos .box-container .box:hover h3{ color: var(--main-color); } .watch-video .video-container{ background-color: var(--white); border-radius: .5rem; padding: 2rem; } .watch-video .video-container .video{ position: relative; margin-bottom: 1.5rem; } .watch-video .video-container .video video{ border-radius: .5rem; width: 100%; object-fit: contain; background-color: #000; } .watch-video .video-container .title{ font-size: 2rem; color: var(--black); } .watch-video .video-container .info{ display: flex; margin-top: 1.5rem; margin-bottom: 2rem; border-bottom: var(--border); padding-bottom: 1.5rem; gap: 2.5rem; align-items: center; } .watch-video .video-container .info p{ font-size: 1.6rem; } .watch-video .video-container .info p span{ color: var(--light-color); } .watch-video .video-container .info i{ margin-right: 1rem; color: var(--main-color); } .watch-video .video-container .tutor{ display: flex; align-items: center; gap: 2rem; margin-bottom: 1rem; } .watch-video .video-container .tutor img{ border-radius: 50%; height: 5rem; width: 5rem; object-fit: cover; } .watch-video .video-container .tutor h3{ font-size: 2rem; color: var(--black); margin-bottom: .2rem; } .watch-video .video-container .tutor span{ font-size: 1.5rem; color: var(--light-color); } .watch-video .video-container .flex{ display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; } .watch-video .video-container .flex button{ border-radius: .5rem; padding: 1rem 1.5rem; font-size: 1.8rem; cursor: pointer; background-color: var(--light-bg); } .watch-video .video-container .flex button i{ margin-right: 1rem; color: var(--black); } .watch-video .video-container .flex button span{ color: var(--light-color); } .watch-video .video-container .flex button:hover{ background-color: var(--black); } .watch-video .video-container .flex button:hover i{ color: var(--white); } .watch-video .video-container .flex button:hover span{ color: var(--white); } .watch-video .video-container .description{ line-height: 1.5; font-size: 1.7rem; color: var(--light-color); margin-top: 2rem; } .comments .add-comment{ background-color: var(--white); border-radius: .5rem; padding: 2rem; margin-bottom: 3rem; } .comments .add-comment h3{ font-size: 2rem; color: var(--black); margin-bottom: 1rem; } .comments .add-comment textarea{ height: 20rem; resize: none; background-color: var(--light-bg); border-radius: .5rem; border: var(--border); padding: 1.4rem; font-size: 1.8rem; color: var(--black); width: 100%; margin: .5rem 0; } .comments .box-container{ display: grid; gap: 2.5rem; background-color: var(--white); padding: 2rem; border-radius: .5rem; } .comments .box-container .box .user{ display: flex; align-items: center; gap: 1.5rem; margin-bottom: 2rem; } .comments .box-container .box .user img{ height: 5rem; width: 5rem; border-radius: 50%; } .comments .box-container .box .user h3{ font-size: 2rem; color: var(--black); margin-bottom: .2rem; } .comments .box-container .box .user span{ font-size: 1.5rem; color: var(--light-color); } .comments .box-container .box .comment-box{ border-radius: .5rem; background-color: var(--light-bg); padding:1rem 1.5rem; white-space: pre-line; margin: .5rem 0; font-size: 1.8rem; color: var(--black); line-height: 1.5; position: relative; z-index: 0; } .comments .box-container .box .comment-box::before{ content: ''; position: absolute; top: -1rem; left: 1.5rem; background-color: var(--light-bg); height: 1.2rem; width: 2rem; clip-path: polygon(50% 0%, 0% 100%, 100% 100%); } .teachers .search-tutor{ margin-bottom: 2rem; border-radius: .5rem; background-color: var(--white); padding: 1.5rem 2rem; display: flex; align-items: center; gap: 1.5rem; } .teachers .search-tutor input{ width: 100%; background: none; font-size: 1.8rem; color: var(--black); } .teachers .search-tutor button{ font-size: 2rem; color: var(--black); cursor: pointer; background:none; } .teachers .search-tutor button:hover{ color: var(--main-color); } .teachers .box-container{ display: grid; grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr)); gap:1.5rem; justify-content: center; align-items: flex-start; } .teachers .box-container .box{ background-color: var(--white); border-radius: .5rem; padding: 2rem; } .teachers .box-container .offer{ text-align: center; } .teachers .box-container .offer h3{ font-size: 2.5rem; color: var(--black); text-transform: capitalize; padding-bottom: .5rem; } .teachers .box-container .offer p{ line-height: 1.7; padding: .5rem 0; color: var(--light-color); font-size: 1.7rem; } .teachers .box-container .box .tutor{ display: flex; align-items: center; gap:2rem; margin-bottom: 1.5rem; } .teachers .box-container .box .tutor img{ height: 5rem; width: 5rem; border-radius: 50%; } .teachers .box-container .box .tutor h3{ font-size: 2rem; color: var(--black); margin-bottom: .2rem; } .teachers .box-container .box .tutor span{ font-size: 1.6rem; color: var(--light-color); } .teachers .box-container .box p{ padding: .5rem 0; font-size: 1.7rem; color: var(--light-color); } .teachers .box-container .box p span{ color: var(--main-color); } .teacher-profile .details{ text-align: center; background-color: var(--white); border-radius: .5rem; padding: 2rem; } .teacher-profile .details .tutor img{ height: 10rem; width: 10rem; border-radius: 50%; object-fit: cover; margin-bottom: 1rem; } .teacher-profile .details .tutor h3{ font-size: 2rem; color: var(--black); } .teacher-profile .details .tutor span{ color: var(--light-color); font-size: 1.7rem; } .teacher-profile .details .flex{ display: flex; flex-wrap: wrap; gap: 1.5rem; margin-top: 2rem; } .teacher-profile .details .flex p{ flex: 1 1 20rem; border-radius: .5rem; background-color: var(--light-bg); padding: 1.2rem 2rem; font-size: 1.8rem; color: var(--light-color); } .teacher-profile .details .flex p span{ color: var(--main-color); } .user-profile .info{ background-color: var(--white); border-radius: .5rem; padding: 2rem; } .user-profile .info .user{ text-align: center; margin-bottom: 2rem; padding: 1rem; } .user-profile .info .user img{ height: 10rem; width: 10rem; border-radius: 50%; object-fit: cover; margin-bottom: 1rem; } .user-profile .info .user h3{ font-size: 2rem; color: var(--black); } .user-profile .info .user p{ font-size: 1.7rem; color: var(--light-color); padding: .3rem 0; } .user-profile .info .box-container{ display: flex; flex-wrap: wrap; gap: 1.5rem; } .user-profile .info .box-container .box{ background-color: var(--light-bg); border-radius: .5rem; padding: 2rem; flex: 1 1 25rem; } .user-profile .info .box-container .box .flex{ display: flex; align-items: center; gap: 2rem; margin-bottom: 1rem; } .user-profile .info .box-container .box .flex span{ font-size: 2.5rem; color: var(--main-color); } .user-profile .info .box-container .box .flex p{ color: var(--light-color); font-size: 1.7rem; } .contact .row{ display: flex; align-items: center; flex-wrap: wrap; gap: 1.5rem; } .contact .row .image{ flex: 1 1 50rem; } .contact .row .image img{ width: 100%; } .contact .row form{ flex: 3 3 40rem; background-color: var(--white); padding: 1rem; text-align: center; } .contact .row #status { width: 100%; text-align: center; padding: 10px; margin: 0 auto; font-size: 2.5rem; border-radius: 8px; } .contact .row #status.success { background-color: rgb(211, 250, 153); animation: status 4s ease forwards; } .contact .row form h3{ margin-bottom: 1rem; text-transform: capitalize; color:var(--black); font-size: 2.5rem; } .contact .row form .box{ width: 100%; border-radius: .5rem; background-color: var(--light-bg); margin: 1rem 0; padding: 1.4rem; font-size: 1.8rem; color: var(--black); } .contact .row form textarea{ height: 20rem; resize: none; } .contact .box-container{ display: grid; grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr)); gap:1.5rem; justify-content: center; align-items: flex-start; margin-top: 3rem; } .contact .box-container .box{ text-align: center; background-color: var(--white); border-radius: .5rem; padding: 3rem; } .contact .box-container .box i{ font-size: 3rem; color: var(--main-color); margin-bottom: 1rem; } .contact .box-container .box h3{ font-size: 2rem; color:var(--black); margin: 1rem 0; } .contact .box-container .box a{ display: block; padding-top: .5rem; font-size: 1.8rem; color: var(--light-color); } .contact .box-container .box a:hover{ text-decoration: underline; color:var(--black); } .form-container{ min-height: calc(100vh - 20rem); display: flex; align-items: center; justify-content: center; } .form-container form{ background-color: var(--white); border-radius: .5rem; padding: 2rem; width: 50rem; } .form-container .TI{ background-color: var(--white); border-radius: .5rem; padding: 2rem; width: 100%; } .form-container form h2{ font-size: 2.5rem; text-transform: capitalize; color: var(--black); text-align: center; } .form-container form h3{ font-size: 2.5rem; text-transform: capitalize; color: rgb(80,150,0); } .form-container form h3.Camon{ font-size: 2.5rem; text-transform: capitalize; color: var(--red); } .form-container form p{ font-size: 1.7rem; color: var(--light-color); padding-top: 1rem; padding: 1rem; word-break: break-word; } .form-container form p span{ color: var(--red); font-weight: bold; } .form-container form .box{ font-size: 1.8rem; color: var(--black); border-radius: .5rem; padding: 1.4rem; background-color: var(--light-bg); width: 100%; margin: 1rem 0; } .form-container .TI .box{ font-size: 1.8rem; color: var(--black); border-radius: .5rem; padding: 1.4rem; background-color: var(--light-bg); width: 100%; margin: 1rem 0; } .error { text-align: center; } .btthongbao{ margin-top: 1rem; font-size: 2rem; background-color: #ff72a1; border-radius: 1.5rem; color: #fff; font-weight: bold; display: inline-block; padding: 0.5rem 3rem; } .footer{ background-color: var(--white); border-top: var(--border); /* position: sticky; */ bottom: 0; left: 0; right: 0; text-align: center; font-size: 2rem; padding:1rem 2rem; color:var(--black); margin-top: 1rem; z-index: 1000; } .footer span{ color:var(--main-color); } .rung{animation:code-pro-rung-lac 2s ease infinite} .duykhoa-messenger{bottom:16px;right:16px;position:fixed;display:flex;align-items:center;justify-content:center;background:linear-gradient(179.83deg,rgb(226,73,167) 0.15%,rgb(120,76,255) 92.02%);height:50px;width:50px;z-index:100;border-radius:100%;animation:duykhoa-messengerfb 2s 0s ease-out infinite}.duykhoa-messenger i{font-size:25px;margin:0;color:#fff}.duykhoa-messenger svg{fill:#fff}@keyframes duykhoa-messengerfb{0%{box-shadow:0 0 0 0 rgb(231, 108, 255)}75%{box-shadow:0 0 0 16px transparent}100%{box-shadow:0 0 0 0 transparent}} .rung{animation:duykhoa-messengerfb-rung-lac 2s ease infinite}@-webkit-keyframes duykhoa-messengerfb-rung-lac{0%{-webkit-transform:rotate(0) scale(1) skew(1deg)}10%{-webkit-transform:rotate(-25deg) scale(1) skew(1deg)}20%{-webkit-transform:rotate(25deg) scale(1) skew(1deg)}30%{-webkit-transform:rotate(-25deg) scale(1) skew(1deg)}40%{-webkit-transform:rotate(25deg) scale(1) skew(1deg)}50%{-webkit-transform:rotate(0) scale(1) skew(1deg)}100%{-webkit-transform:rotate(0) scale(1) skew(1deg)}} @-webkit-keyframes code-pro-rung-lac{0%{-webkit-transform:rotate(0) scale(1) skew(1deg)}10%{-webkit-transform:rotate(-25deg) scale(1) skew(1deg)}20%{-webkit-transform:rotate(25deg) scale(1) skew(1deg)}30%{-webkit-transform:rotate(-25deg) scale(1) skew(1deg)}40%{-webkit-transform:rotate(25deg) scale(1) skew(1deg)}50%{-webkit-transform:rotate(0) scale(1) skew(1deg)}100%{-webkit-transform:rotate(0) scale(1) skew(1deg)}} @media (max-width:1250px){ body{ padding-left: 0; } .side-bar{ left: -30rem; transition: .2s linear; } .side-bar #close-btn{ display: block; } .side-bar.active{ left: 0; box-shadow: 0 0 0 100vw rgba(0,0,0,.8); border-right: 0; } } @media (max-width:991px){ html{ font-size: 55%; } } @media (max-width:820px){ #search-btn{ display: inline-block; } .header .flex .search-form{ position: absolute; top: 99%; left: 0; right: 0; border-top: var(--border); border-bottom: var(--border); background-color: var(--white); border-radius: 0; width: auto; padding: 2rem; clip-path: polygon(0 0, 100% 0, 100% 0, 0 0); transition: .2s linear; } .header .flex .search-form.active{ clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); } } @media (max-width:450px){ html{ font-size: 50%; } .flex-btn{ gap: 0; flex-flow: column; } .home-grid .box-container{ grid-template-columns: 1fr; } .about .row .image img{ height: 25rem; } } @media (max-width: 380px) { .header .flex .logo { font-size: 1.55rem; } }