Update static/assets/css/style.css

static/assets/css/style.css

@@ -1,1225 +1,1225 @@
-@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
-*
-{
-    margin: 0;
-    padding: 0;
-    box-sizing: border-box;
-    font-family: 'Roboto', sans-serif;
-}
-.active-nav {
-    text-decoration: underline;
-}
-
-
-#chatBot
-{
-    width: 50px;
-    height: 50px;
-    position: fixed;
-    bottom: 20px;
-    right: 20px;
-    background-color: #1164FE;
-    color: white;
-    border-radius: 50%;
-    text-align: center;
-    line-height: 50px;
-    cursor: pointer;
-    z-index: 1000;
-}
-#chatBotContent {
-    display: none;
-    position: fixed;
-    bottom: 80px; /* Cách vị trí chatbot icon một khoảng */
-    right: 20px;
-    width: 400px;
-    background-color: white;
-    border-radius: 10px;
-    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
-    border: 1px solid lightgray;
-    z-index: 1000;
-    height: 500px;
-}
-
-#chatBotContentTop {
-    margin-top: 5px;
-    color: black;
-}
-#chatBotContentTop-1
-{
-    float: left;
-    width: 400px;
-    height: 40px;
-    font-size: 17px;
-    border-bottom: 1px solid #ccc;
-}
-#chatBotmid
-{
-    float: left;
-    width: 400px;
-    height: 380px;
-    margin-top: 10px;
-}
-
-#chatBotContentBottom {
-    float: left;
-    margin-top: 5px;
-    width: 400px;
-    height: 60px;
-    padding: 10px;
-
-}
-
-#chatBotForm {
-    display: flex;
-    justify-content: space-between;
-}
-
-#chatBotInput {
-    width: 80%;
-    padding: 10px;
-    border: 1px solid #ccc;
-    border-radius: 5px;
-}
-
-#chatBotBtn {
-    padding: 10px 15px;
-    border: none;
-    background-color: #1164FE;
-    color: white;
-    border-radius: 5px;
-    cursor: pointer;
-}
-
-#chatBotBtn:hover {
-    background-color: #0a4ec4;
-}
-
-#chatMessages {
-    display: flex;
-    flex-direction: column;
-    padding: 10px;
-    overflow-y: auto;
-    height: 100%;
-}
-
-/* Styles for customer messages */
-.customerMessage {
-    align-self: flex-end;
-    background-color: #e1ffc7;
-    color: black;
-    padding: 10px;
-    margin-top: 10px;
-    border-radius: 10px;
-    max-width: 70%;
-    text-align: right;
-}
-
-/* Styles for system messages */
-.systemMessage {
-    align-self: flex-start;
-    background-color: #f1f1f1;
-    color: black;
-    padding: 10px;
-    margin-top: 10px;
-    border-radius: 10px;
-    max-width: 70%;
-    text-align: left;
-}
-
-
-
-.hero
-{
-    width: 100%;
-    height: 100vh;
-    background-image: linear-gradient(rgba(12,3,51,0.3), rgba(12,3,51,0.3));
-    position: relative;
-    padding: 0 5%;
-    display: flex;
-    align-items: center;
-    justify-content: flex-start;
-    flex-direction: column;
-}
-
-nav
-{
-    width: 100%;
-    position: fixed;
-    top: 0;
-    left: 0;
-    padding: 17px 10px;
-    display: flex;
-    align-items: center;
-    justify-content: right;
-    background-color: rgba(0, 0, 0, 0.4);
-    z-index: 1000;
-}
-
-nav .logo
-{
-    width: 40px;
-    margin-right: 700px;
-}
-
-nav ul
-{
-    display: flex;
-    list-style: none;
-    margin: 0;
-    padding: 0;
-}
-
-nav ul li
-{
-    margin-right: 20px;
-}
-
-nav ul li a
-{
-    text-decoration: none;
-    color: #fff;
-    font-size: 17px;
-}
-
-/* Thêm phần này */
-nav .search-form
-{
-    display: flex;
-    align-items: center;
-    margin-right: 20px;
-
-}
-
-nav .search-form input[type="text"]
-{
-    padding: 5px 10px;
-    font-size: 17px;
-    border: 1px solid #fff;
-    background-color: rgba(255, 255, 255, 0.2);
-    color: #fff;
-    border-radius: 100px;
-}
-
-nav .search-form input[type="text"]::placeholder
-{
-    color: #fff;
-}
-
-.content
-{
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start; /* Căn về bên trái */
-    justify-content: center; /* Căn giữa theo trục dọc */
-    height: 100%; /* Chiều cao 100% để căn giữa theo trục dọc */
-    padding: 0 6%; /* Căn lề trong để đồng bộ với phần nav */
-}
-
-.content h1
-{
-    color: #fff;
-    font-size: 90px;
-    font-weight: 600;
-    transition: 0.5s;
-}
-
-.content a
-{
-    text-decoration: none;
-    display: inline-block;
-    color: #fff;
-    font-size: 24px;
-    border: 2px solid #fff;
-    padding: 14px 70px;
-    border-radius: 50px;
-    margin-top: 50px;
-}
-
-.content h1:hover
-{
-    -webkit-text-stroke: 2px #fff;
-    color: transparent;
-}
-
-.back-video
-{
-    position: absolute;
-    right: 0;
-    bottom: 0;
-    z-index: -1;
-}
-
-@media (min-aspect-ratio: 16/9) {
-    .back-video
-    {
-        width: 100%;
-        height: auto;
-    }
-}
-
-@media (max-aspect-ratio: 16/9) {
-    .back-video
-    {
-        width: auto;
-        height: 100%;
-    }
-}
-
-/* Sứ mệnh */
-.sumenh
-{
-    width: 100%;
-    height: 100vh;
-    background-color: #ffffff;
-}
-#gif-phattrien
-{
-    overflow: hidden;
-}
-
-#text-sumenh-top
-{
-    font-size: 30px;
-    font-weight: 600;
-    margin-top: 90px;
-    float: left;
-    margin-left: 120px;
-    height: 200px;
-    width: 800px;
-}
-#text-sumenh-top-xam
-{
-    color: gray;
-}
-/* gif phát triển cho sứ mệnh bênh cạnh text-sứ mệnh*/
-#gif-phattrien
-{
-    float: right;
-    margin-top: 90px;
-    width: 800px;
-    height: 90.5vh;
-}
-/* text phát triển cho sứ mệnh bênh cạnh gif-sứ mệnh*/
-#text-sumenh-bottom
-{
-    float: left;
-    margin-left: 120px;
-    margin-top: 10px;
-    width: 600px;
-    height: 67vh;
-}
-
-/* text phát triển nằm trong text sứ mệnh bottom */
-#text-sumenh-bottom1, #text-sumenh-bottom2,#text-sumenh-bottom3,#text-sumenh-bottom4
-{
-    float: left;
-    margin-left: 30px;
-    margin-top: 20px;
-    width: 250px;
-    height: 250px;
-    text-align: center;
-}
-#text-in-sm-bt1-top,#text-in-sm-bt2-top,#text-in-sm-bt3-top,#text-in-sm-bt4-top
-{
-    font-size: 80px;
-    font-weight: 600;
-    margin-top: 10px;
-    margin-left: 10px;
-    margin-right: 10px;
-    width: 230px ;
-    height: 85px;
-    text-align: left;
-    background: linear-gradient(20deg,rgba(200, 100, 250, 0.6), rgba(20, 146, 255, 2));
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-}
-#text-in-sm-bt1-bottom,#text-in-sm-bt2-bottom,#text-in-sm-bt3-bottom,#text-in-sm-bt4-bottom
-{
-    font-size: 20px;
-    font-weight: 600;
-    background-color: white;
-    margin-top: 5px;
-    margin-left: 10px;
-    margin-right: 10px;
-    width: 200px ;
-    height: 125px;
-    text-align: left;
-    border-top: 3px solid darkgray;
-    border-top-style: groove;
-    text-space: 10px;
-    color: darkgray;
-}
-#img-sumenh
-{
-    margin-left: 80px;
-    width: auto;
-    height: 90.5vh;
-}
-.home__swiper {
-    margin: initial;
-}
-
-.home__images {
-    display: flex;
-    justify-content: center; /* Center horizontally */
-    align-items: center; /* Center vertically */
-    height: 100%;
-    width: 100%;
-}
-
-.home__swiper {
-    width: 80%; /* Adjust width as needed */
-}
-
-.home__article,
-.home__img {
-    width: 500px;
-    height: auto;
-    transition: transform .4s; /* Use transform for better performance */
-    margin-top: 50px;
-    margin-left: 23px;
-    margin-bottom: 50px;
-}
-
-.home__article {
-    transform: scale(.8);
-}
-
-/* Swiper class */
-.swiper-slide-active,
-.swiper-slide-duplicate-active {
-    transform: scale(1);
-}
-
-/* Phần about team research */
-.aboutUS
-{
-    width: 100%;
-    height: 100vh;
-    border-color: white;
-    border-right: white;
-}
-.back-video2
-{
-    height: 80vh;
-    width: 100%;
-    border-color: white;
-    border-right: white;
-
-}
-@media (min-aspect-ratio: 16/9) {
-    .back-video2
-    {
-        width: 100%;
-        height: 100%;
-    }
-}
-
-@media (max-aspect-ratio: 16/9) {
-    .back-video2
-    {
-        width: auto;
-        height: 100%;
-    }
-}
-
-#about1
-{
-    position: absolute;
-    top: 1050px;
-    left: 30px;
-    width: 1100px;
-    height: 300px;
-    color: black;
-    font-size: 35px;
-    font-weight: 90;
-    transition: 0.5s;
-    background: linear-gradient(360deg,rgba(100, 149, 237, 0.6), rgba(166, 146, 255, 2));
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-
-}
-
-/* Phần research */
-.research
-{
-    width: 100%;
-    height: 157vh;
-    background-color: white;
-    float: left;
-    font-family: Surt Regular, sans-serif;
-
-    opacity: 0;
-    transform: translateY(-50px);
-    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
-
-}
-.research.visible {
-    opacity: 1;
-    transform: translateY(0);
-}
-
-#research-children
-{
-    margin-left: 300px;
-    margin-top: 100px;
-}
-
-.section-thumbnails-grid {
-    display: flex;
-    flex-wrap: wrap;
-}
-.section-thumbnails-grid.item-col-2 .grid-item {
-    display: flex;
-    flex-direction: column;
-    text-decoration: none;
-    outline: 0;
-    width: 600px;
-    margin-bottom: 60px;
-}
-.section-thumbnails-grid.item-col-2 .grid-item:nth-child(odd) {
-    margin-right: 48px;
-}
-.section-thumbnails-grid.item-col-2 .grid-item-image {
-    width: 100%;
-    height: 342px;
-    border-radius: 40px;
-    padding: 20px 23px;
-    display: flex;
-    align-items: flex-end;
-}
-
-.section-thumbnails-grid.item-col-2 .grid-item-image:hover
-{
-    transition: transform 0.3s;
-    box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2);
-    transform: scale(1.02);
-
-}
-
-.section-thumbnails-grid.item-col-2 .grid-item-tags {
-    display: flex;
-    margin-top: auto;
-}
-.section-thumbnails-grid.item-col-2 .grid-item-tag {
-    height: 32px;
-    font-size: 14px;
-    line-height: 32px;
-    font-weight: 600;
-    text-transform: uppercase;
-    color: #181821;
-    padding: 0 16px;
-    border-radius: 40px;
-    background: radial-gradient(
-            1060.11% 100% at 100% -11.84%,
-            #e9e9ff 0,
-            rgba(207, 207, 255, 0.4) 100%
-    );
-    mix-blend-mode: luminosity;
-    box-shadow: 0 8px 24px 0 rgba(18, 18, 26, 0.08);
-    backdrop-filter: blur(10px);
-    margin-right: 7px;
-}
-.section-thumbnails-grid.item-col-2 .grid-item-tag:last-child {
-    margin-right: 0;
-}
-.section-thumbnails-grid.item-col-2 .grid-item-title {
-    font-size: 32px;
-    line-height: 38px;
-    font-weight: 400;
-    padding: 16px 0;
-    color: #181821;
-}
-.section-thumbnails-grid.item-col-2 .grid-item-text {
-    font-size: 18px;
-    line-height: 22px;
-    color: #181821;
-}
-.section-thumbnails-grid.item-col-2 .grid-item-text span {
-    padding-right: 20px;
-}
-.section-thumbnails-grid.item-col-3 .grid-item {
-    display: flex;
-    flex-direction: column;
-    text-decoration: none;
-    outline: 0;
-    width: calc(33% - 12px);
-    margin-right: 24px;
-    margin-bottom: 96px;
-}
-.section-thumbnails-grid.item-col-3 .grid-item:nth-child(3n) {
-    margin-right: 0;
-}
-.section-thumbnails-grid.item-col-3 .grid-item-image {
-    width: 100%;
-    height: 229px;
-    border-radius: 20px;
-}
-.section-thumbnails-grid.item-col-3 .grid-item-title {
-    font-size: 32px;
-    line-height: 38px;
-    font-weight: 400;
-    padding: 16px 0;
-    color: rgba(233, 233, 255, 0.9);
-}
-.section-thumbnails-grid.item-col-3 .grid-item-text {
-    font-size: 18px;
-    line-height: 22px;
-    color: rgba(233, 233, 255, 0.6);
-}
-.section-thumbnails-grid.item-col-3 .grid-item-text span {
-    padding-right: 20px;
-}
-.section-text-blocks-slider-wrapper {
-    overflow: unset !important;
-}
-.section-text-blocks-slider-wrapper .section-text-blocks-slides .swiper-slide {
-    max-width: 560px !important;
-}
-.section-text-blocks-slider-wrapper .section-text-blocks-slide {
-    background: rgba(233, 233, 255, 0.02);
-    padding: 26px 28px;
-    border-radius: 40px;
-    border: 1px solid rgba(233, 233, 255, 0.04);
-}
-.section-text-blocks-slider-wrapper .section-text-blocks-slide .slide-title {
-    font-size: 32px;
-    font-weight: 400;
-    padding-bottom: 5px;
-}
-.section-text-blocks-slider-wrapper .section-text-blocks-slide .slide-text {
-    font-size: 18px;
-    line-height: 24px;
-    color: rgba(233, 233, 255, 0.6);
-}
-.section-text-blocks-slider-wrapper .section-text-blocks-slide .slide-text p {
-    font-size: 18px;
-    line-height: 24px;
-    color: rgba(233, 233, 255, 0.6);
-    padding-bottom: 5px;
-}
-.section-cta
-{
-    width: 80%;
-    height: 8vh;
-    float: left;
-}
-
-.button-opacity-1 {
-    background: rgba(10, 10, 2, 0.09);
-    display: inline-flex;
-    font-size: 18px;
-    color: rgba(10, 10, 2, 0.9);
-    padding: 19px 20px;
-    border-radius: 28px;
-    border: 1px solid rgba(233, 233, 255, 0.04);
-    backdrop-filter: blur(15px);
-    text-decoration: none;
-    outline: 0;
-}
-.button-opacity-1.button-icon {
-    padding-left: 51px;
-    position: relative;
-}
-.button-research
-{
-    margin-left: 43%;
-}
-.button-opacity-1.button-icon:before {
-    position: absolute;
-    content: "";
-    height: 24px;
-    width: 24px;
-    left: 20px;
-    top: calc(50% - 12px);
-    background-image: url(../images/icon-main.svg);
-}
-.button-opacity-1.button-icon:hover
-{
-    background: rgba(10, 10, 2, 0.2);
-    transform: scale(1.1);
-    transition: 0.7s;
-}
-
-#text-rs-top
-{
-    float: left;
-}
-#text-rs-top-1
-{
-    font-size: 20px;
-    margin-top: 20px;
-    margin-left: 850px;
-    color: lightgray;
-}
-
-/* Phần application */
-.application
-{
-    width: 100%;
-    height: 100vh;
-    background-color: white;
-    float: left;
-    font-family: "Roboto", sans-serif;
-
-    opacity: 0;
-    transform: translateY(-50px);
-    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
-}
-.application.visible {
-    opacity: 1;
-    transform: translateY(0);
-}
-
-
-#box1,#box2,#box3
-{
-    width: 386px;
-    height: 600px;
-    float: left;
-    margin-left: 252px;
-    border-radius: 40px;
-    margin-top: 10px;
-    background-color: gainsboro;
-    cursor: pointer;
-
-}
-#box1-top img
-{
-    width: 386px;
-    height: 385px;
-    border-top-left-radius: 40px;
-    border-top-right-radius: 40px;
-}
-#box1-top img:hover
-{
-    transition: transform 0.3s;
-    box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2);
-}
-#box2-top img
-{
-    width: 386px;
-    height: 385px;
-    border-top-left-radius: 40px;
-    border-top-right-radius: 40px;
-}
-
-#box3-top img
-{
-    width: 386px;
-    height: 385px;
-    border-top-left-radius: 40px;
-    border-top-right-radius: 40px;
-}
-.text-top-box
-{
-    font-size:20px;
-    color: darkgray;
-    margin-top: 10px;
-    float: left;
-}
-.text-mid-box
-{
-    font-size: 30px;
-    color: black;
-    margin-top: 25px;
-    float: left;
-    margin-left: -45px;
-}
-#box1-bottom,#box2-bottom,#box3-bottom
-{
-    margin-left: 20px;
-    float: left;
-}
-.text-bottom-box
-{
-    font-size: 17px;
-    color: black;
-    margin-top: 10px;
-    font-weight: 200;
-    float: left;
-}
-
-#box2,#box3
-{
-    width: 386px;
-    height: 600px;
-    float: left;
-    margin-left: 100px;
-    border-radius: 40px;
-    margin-top: 10px;
-    background-color: gainsboro;
-}
-
-#box1:hover,#box2:hover,#box3:hover
-{
-    background-color: white;
-    box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2);
-    transition: 0.5s;
-    transform: scale(1.02);
-}
-#text-application-top
-{
-    width: 100%;
-    height: 100px;
-    float: left;
-    margin-top: 70px;
-    text-align: center;
-}
-
-#text-application-top-1
-{
-    font-size: 20px;
-    margin-top: 20px;
-    margin-left: 20px;
-    color: lightgray;
-}
-#text-application-top-2,#text-rs-top-2{
-    font-size: 30px;
-    margin-top: 15px;
-    margin-left: 690px;
-    background: linear-gradient(360deg,rgba(66, 133, 244, 0.6), rgba(166, 146, 255, 2));
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-    float: left;
-}
-.icon_bottom
-{
-    width: 100%;
-    height: 35px;
-    float: left;
-    margin-top: 10px;
-}
-.icon-b
-{
-    width: 35px;
-    height: 35px;
-    float: right;
-    margin-right: 20px;
-}
-
-
-.section-cta1
-{
-    width: 80%;
-    height: 8vh;
-    float: left;
-    align-items: center;
-}
-
-.button-opacity-2 {
-    background: rgba(10, 10, 2, 0.09);
-    display: inline-flex;
-    font-size: 18px;
-    color: rgba(10, 10, 2, 0.9);
-    padding: 19px 20px;
-    border-radius: 28px;
-    border: 1px solid rgba(233, 233, 255, 0.04);
-    backdrop-filter: blur(15px);
-    text-decoration: none;
-    outline: 0;
-}
-.button-opacity-2.button-icon {
-    padding-left: 51px;
-    position: relative;
-}
-.button-research1
-{
-    margin-left: 57%;
-    margin-top: 3%;
-}
-.button-opacity-2.button-icon:before {
-    position: absolute;
-    content: "";
-    height: 24px;
-    width: 24px;
-    left: 20px;
-    top: calc(50% - 12px);
-    background-image: url(../images/icon-main.svg);
-}
-.button-opacity-2.button-icon:hover
-{
-    background: rgba(10, 10, 2, 0.2);
-    transform: scale(1.1);
-    transition: 0.7s;
-}
-/* Phần contact */
-.contactUS
-{
-    width: 100%;
-    height: 90vh;
-    float: left;
-
-    opacity: 0;
-    transform: translateY(-50px);
-    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
-}
-.contactUS.visible {
-    opacity: 1;
-    transform: translateY(0);
-}
-#contactUs-left
-{
-    width: 60%;
-    height: 70vh;
-    float: left;
-}
-#contactUS-leftTop
-{
-    width: 100%;
-    height: 40vh;
-    float: left;
-}
-#contactUs-left-1
-{
-    font-size: 50px;
-    margin-left: 70px;
-    font-weight: 550;
-    color: black;
-    margin-top: 100px;
-    float: left;;
-}
-#contactUs-left-2
-{
-    font-size: 17px;
-    margin-left: -240px;
-    font-weight: 200;
-    color: darkgray;
-    margin-top: 160px;
-    float: left;
-}
-#contactUs-left-3
-{
-    font-size: 17px;
-    margin-left: -240px;
-    font-weight: 200;
-    color: black;
-    margin-top: 170px;
-    float: left;
-}
-#contactUs-left-4
-{
-    font-size: 17px;
-    margin-left: -240px;
-    font-weight: 200;
-    color: black;
-    margin-top: 180px;
-    float: left;
-}
-#contactUs-left-5
-{
-    font-size: 17px;
-    margin-left: -240px;
-    font-weight: 200;
-    color: black;
-    margin-top: 190px;
-    float: left;
-}
-#contactUs-left-bottom
-{
-    width: 100%;
-    height: 50vh;
-    float: left;
-}
-#left
-{
-    width: 33%;
-    height: 40vh;
-    float: left;
-}
-#mid{
-    width: 33%;
-    height: 40vh;
-    float: left;
-}
-#right
-{
-    width: 34%;
-    height: 40vh;
-    float: left;
-}
-#left-1,#right-1
-{
-    font-weight: bold;
-    font-size: 20px;
-    margin-top: 10px;
-    float: left;
-    margin-left: 80px;
-}
-#left-2,#mid-2,#right-2
-{
-    font-weight: 520;
-    font-size: 17px;
-    margin-top: 10px;
-    float: left;
-    margin-left: 80px;
-    color: darkgray;
-}
-#mid-2
-{
-    margin-left: 30px;
-}
-#mid-1
-{
-    font-weight: bold;
-    font-size: 20px;
-    margin-top: 10px;
-    float: left;
-    margin-left: 30px;
-}
-#right-1
-{
-    margin-left: 20px;
-}
-#right-2
-{
-    margin-left: 20px;
-}
-
-#contactUs-right{
-    width: 40%;
-    height: 70vh;
-    float: left;
-}
-#contactUs-right-children
-{
-    width:80%;
-    height: 70vh;
-    margin-top: 100px;
-    float: left;
-    margin-left: 100px;
-    border-radius: 40px;
-    box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2);
-}
-#contactUs-right-children:hover
-{
-    transition: 0.5s;
-    transform: scale(1.04);
-    box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2);
-}
-#contactUs-rightTop
-{
-    width: 100%;
-    height: 10vh;
-    float: left;
-    border-top-left-radius: 40px;
-    border-top-right-radius: 40px ;
-}
-#contactUs-right-1
-{
-    font-size: 45px;
-    margin-left: 40px;
-    font-weight: 550;
-    color: black;
-    margin-top: 10px;
-    float: left;;
-}
-#contactUs-right-2
-{
-    font-size: 17px;
-    margin-left: -250px;
-    font-weight: 200;
-    color: black;
-    margin-top: 50px;
-    float: left;
-}
-#firstName
-{
-    width: 40%;
-    height: 40px;
-    float: left;
-    margin-top: 30px;
-    margin-left: 40px;
-    border-radius: 20px;
-    border: 1px solid gray;
-    text-align: left;
-}
-#lastName
-{
-    width: 40%;
-    height: 40px;
-    float: left;
-    margin-top: 30px;
-    margin-left: 10px;
-    border-radius: 20px;
-    border: 1px solid gray;
-    text-align: left;
-}
-#Email
-{
-    width: 82%;
-    height: 40px;
-    float: left;
-    margin-top: 20px;
-    margin-left: 40px;
-    border-radius: 20px;
-    border: 1px solid gray;
-    text-align: left;
-}
-#cboChon
-{
-    width:15%;
-    height: 40px;
-    float: left;
-    margin-top: 20px;
-    margin-left: 40px;
-    border-radius: 20px;
-    border: 1px solid gray;
-}
-#phonenumber
-{
-    width: 65%;
-    height: 40px;
-    float: left;
-    margin-top: 20px;
-    margin-left: 10px;
-    border-radius: 20px;
-    border: 1px solid gray;
-    text-align: left;
-}
-#message
-{
-    width: 82%;
-    height: 150px;
-    float: left;
-    margin-top: 20px;
-    margin-left: 40px;
-    border-radius: 20px;
-    border: 1px solid gray;
-    text-align: left;
-}
-
-#btnSend
-{
-    width: 82%;
-    height: 40px;
-    float: left;
-    margin-top: 20px;
-    margin-left: 40px;
-    border-radius: 20px;
-    border: 1px solid #1164FE;
-    background-color: #1164FE;
-    color: white;
-    font-weight: 520;
-    font-size: 17px;
-    text-align: center;
-    cursor: pointer;
-}
-#btnSend:hover
-{
-    background-color: #1164FE;
-    transition: 0.5s;
-    transform: scale(1.04);
-    box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2);
-
-}
-#text-dit
-{
-    font-size: 13px;
-    margin-top: 12px;
-    margin-left: 150px;
-    color: darkgray;
-    float: left;
-}
-
-/* Phần footer */
-.footer
-{
-    width: 100%;
-    height: 35vh;
-    background-color: #2980b9;
-    float: left;
-}
-
-body{
-    line-height: 1.5;
-    font-family: 'Poppins', sans-serif;
-}
-.footer{
-    margin:0;
-    padding:0;
-    box-sizing: border-box;
-}
-.container{
-    max-width: 1170px;
-    margin:auto;
-}
-.row{
-    display: flex;
-    flex-wrap: wrap;
-}
-ul{
-    list-style: none;
-}
-.footer{
-    background-color: #24262b;
-    padding: 70px 0;
-}
-.footer-col{
-    width: 25%;
-    padding: 0 15px;
-}
-.footer-col h4{
-    font-size: 18px;
-    color: #ffffff;
-    text-transform: capitalize;
-    margin-bottom: 35px;
-    font-weight: 500;
-    position: relative;
-}
-.footer-col h4::before{
-    content: '';
-    position: absolute;
-    left:0;
-    bottom: -10px;
-    background-color: #e91e63;
-    height: 2px;
-    box-sizing: border-box;
-    width: 50px;
-}
-.footer-col ul li:not(:last-child){
-    margin-bottom: 10px;
-}
-.footer-col ul li a{
-    font-size: 16px;
-    text-transform: capitalize;
-    color: #ffffff;
-    text-decoration: none;
-    font-weight: 300;
-    color: #bbbbbb;
-    display: block;
-    transition: all 0.3s ease;
-}
-.footer-col ul li a:hover{
-    color: #ffffff;
-    padding-left: 8px;
-}
-.footer-col .social-links a{
-    display: inline-block;
-    height: 40px;
-    width: 40px;
-    background-color: rgba(255,255,255,0.2);
-    margin:0 10px 10px 0;
-    text-align: center;
-    line-height: 40px;
-    border-radius: 50%;
-    color: #ffffff;
-    transition: all 0.5s ease;
-}
-.footer-col .social-links a:hover{
-    color: #24262b;
-    background-color: #ffffff;
-}
-
-/*responsive*/
-@media(max-width: 767px){
-    .footer-col{
-        width: 50%;
-        margin-bottom: 30px;
-    }
-}
-@media(max-width: 574px){
-    .footer-col{
-        width: 100%;
-    }
+@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
+*
+{
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    font-family: 'Roboto', sans-serif;
+}
+.active-nav {
+    text-decoration: underline;
+}
+
+
+#chatBot
+{
+    width: 50px;
+    height: 50px;
+    position: fixed;
+    bottom: 20px;
+    right: 20px;
+    background-color: #1164FE;
+    color: white;
+    border-radius: 50%;
+    text-align: center;
+    line-height: 50px;
+    cursor: pointer;
+    z-index: 1000;
+}
+#chatBotContent {
+    display: none;
+    position: fixed;
+    bottom: 80px; /* Cách vị trí chatbot icon một khoảng */
+    right: 20px;
+    width: 400px;
+    background-color: white;
+    border-radius: 10px;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
+    border: 1px solid lightgray;
+    z-index: 1000;
+    height: 500px;
+}
+
+#chatBotContentTop {
+    margin-top: 5px;
+    color: black;
+}
+#chatBotContentTop-1
+{
+    float: left;
+    width: 400px;
+    height: 40px;
+    font-size: 17px;
+    border-bottom: 1px solid #ccc;
+}
+#chatBotmid
+{
+    float: left;
+    width: 400px;
+    height: 380px;
+    margin-top: 10px;
+}
+
+#chatBotContentBottom {
+    float: left;
+    margin-top: 5px;
+    width: 400px;
+    height: 60px;
+    padding: 10px;
+
+}
+
+#chatBotForm {
+    display: flex;
+    justify-content: space-between;
+}
+
+#chatBotInput {
+    width: 80%;
+    padding: 10px;
+    border: 1px solid #ccc;
+    border-radius: 5px;
+}
+
+#chatBotBtn {
+    padding: 10px 15px;
+    border: none;
+    background-color: #1164FE;
+    color: white;
+    border-radius: 5px;
+    cursor: pointer;
+}
+
+#chatBotBtn:hover {
+    background-color: #0a4ec4;
+}
+
+#chatMessages {
+    display: flex;
+    flex-direction: column;
+    padding: 10px;
+    overflow-y: auto;
+    height: 100%;
+}
+
+/* Styles for customer messages */
+.customerMessage {
+    align-self: flex-end;
+    background-color: #e1ffc7;
+    color: black;
+    padding: 10px;
+    margin-top: 10px;
+    border-radius: 10px;
+    max-width: 70%;
+    text-align: right;
+}
+
+/* Styles for system messages */
+.systemMessage {
+    align-self: flex-start;
+    background-color: #f1f1f1;
+    color: black;
+    padding: 10px;
+    margin-top: 10px;
+    border-radius: 10px;
+    max-width: 70%;
+    text-align: left;
+}
+
+
+
+.hero
+{
+    width: 100%;
+    height: 100vh;
+    background-image: linear-gradient(rgba(12,3,51,0.3), rgba(12,3,51,0.3));
+    position: relative;
+    padding: 0 5%;
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    flex-direction: column;
+}
+
+nav
+{
+    width: 100%;
+    position: fixed;
+    top: 0;
+    left: 0;
+    padding: 17px 10px;
+    display: flex;
+    align-items: center;
+    justify-content: right;
+    background-color: rgba(0, 0, 0, 0.4);
+    z-index: 1000;
+}
+
+nav .logo
+{
+    width: 30px;
+    margin-right: 970px;
+}
+
+nav ul
+{
+    display: flex;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+}
+
+nav ul li
+{
+    margin-right: 20px;
+}
+
+nav ul li a
+{
+    text-decoration: none;
+    color: #fff;
+    font-size: 17px;
+}
+
+/* Thêm phần này */
+nav .search-form
+{
+    display: flex;
+    align-items: center;
+    margin-right: 20px;
+
+}
+
+nav .search-form input[type="text"]
+{
+    padding: 5px 10px;
+    font-size: 17px;
+    border: 1px solid #fff;
+    background-color: rgba(255, 255, 255, 0.2);
+    color: #fff;
+    border-radius: 100px;
+}
+
+nav .search-form input[type="text"]::placeholder
+{
+    color: #fff;
+}
+
+.content
+{
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start; /* Căn về bên trái */
+    justify-content: center; /* Căn giữa theo trục dọc */
+    height: 100%; /* Chiều cao 100% để căn giữa theo trục dọc */
+    padding: 0 6%; /* Căn lề trong để đồng bộ với phần nav */
+}
+
+.content h1
+{
+    color: #fff;
+    font-size: 90px;
+    font-weight: 600;
+    transition: 0.5s;
+}
+
+.content a
+{
+    text-decoration: none;
+    display: inline-block;
+    color: #fff;
+    font-size: 24px;
+    border: 2px solid #fff;
+    padding: 14px 70px;
+    border-radius: 50px;
+    margin-top: 50px;
+}
+
+.content h1:hover
+{
+    -webkit-text-stroke: 2px #fff;
+    color: transparent;
+}
+
+.back-video
+{
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    z-index: -1;
+}
+
+@media (min-aspect-ratio: 16/9) {
+    .back-video
+    {
+        width: 100%;
+        height: auto;
+    }
+}
+
+@media (max-aspect-ratio: 16/9) {
+    .back-video
+    {
+        width: auto;
+        height: 100%;
+    }
+}
+
+/* Sứ mệnh */
+.sumenh
+{
+    width: 100%;
+    height: 100vh;
+    background-color: #ffffff;
+}
+#gif-phattrien
+{
+    overflow: hidden;
+}
+
+#text-sumenh-top
+{
+    font-size: 30px;
+    font-weight: 600;
+    margin-top: 90px;
+    float: left;
+    margin-left: 120px;
+    height: 200px;
+    width: 800px;
+}
+#text-sumenh-top-xam
+{
+    color: gray;
+}
+/* gif phát triển cho sứ mệnh bênh cạnh text-sứ mệnh*/
+#gif-phattrien
+{
+    float: right;
+    margin-top: 90px;
+    width: 800px;
+    height: 90.5vh;
+}
+/* text phát triển cho sứ mệnh bênh cạnh gif-sứ mệnh*/
+#text-sumenh-bottom
+{
+    float: left;
+    margin-left: 120px;
+    margin-top: 10px;
+    width: 600px;
+    height: 67vh;
+}
+
+/* text phát triển nằm trong text sứ mệnh bottom */
+#text-sumenh-bottom1, #text-sumenh-bottom2,#text-sumenh-bottom3,#text-sumenh-bottom4
+{
+    float: left;
+    margin-left: 30px;
+    margin-top: 20px;
+    width: 250px;
+    height: 250px;
+    text-align: center;
+}
+#text-in-sm-bt1-top,#text-in-sm-bt2-top,#text-in-sm-bt3-top,#text-in-sm-bt4-top
+{
+    font-size: 80px;
+    font-weight: 600;
+    margin-top: 10px;
+    margin-left: 10px;
+    margin-right: 10px;
+    width: 230px ;
+    height: 85px;
+    text-align: left;
+    background: linear-gradient(20deg,rgba(200, 100, 250, 0.6), rgba(20, 146, 255, 2));
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+}
+#text-in-sm-bt1-bottom,#text-in-sm-bt2-bottom,#text-in-sm-bt3-bottom,#text-in-sm-bt4-bottom
+{
+    font-size: 20px;
+    font-weight: 600;
+    background-color: white;
+    margin-top: 5px;
+    margin-left: 10px;
+    margin-right: 10px;
+    width: 200px ;
+    height: 125px;
+    text-align: left;
+    border-top: 3px solid darkgray;
+    border-top-style: groove;
+    text-space: 10px;
+    color: darkgray;
+}
+#img-sumenh
+{
+    margin-left: 80px;
+    width: auto;
+    height: 90.5vh;
+}
+.home__swiper {
+    margin: initial;
+}
+
+.home__images {
+    display: flex;
+    justify-content: center; /* Center horizontally */
+    align-items: center; /* Center vertically */
+    height: 100%;
+    width: 100%;
+}
+
+.home__swiper {
+    width: 80%; /* Adjust width as needed */
+}
+
+.home__article,
+.home__img {
+    width: 500px;
+    height: auto;
+    transition: transform .4s; /* Use transform for better performance */
+    margin-top: 50px;
+    margin-left: 23px;
+    margin-bottom: 50px;
+}
+
+.home__article {
+    transform: scale(.8);
+}
+
+/* Swiper class */
+.swiper-slide-active,
+.swiper-slide-duplicate-active {
+    transform: scale(1);
+}
+
+/* Phần about team research */
+.aboutUS
+{
+    width: 100%;
+    height: 100vh;
+    border-color: white;
+    border-right: white;
+}
+.back-video2
+{
+    height: 80vh;
+    width: 100%;
+    border-color: white;
+    border-right: white;
+
+}
+@media (min-aspect-ratio: 16/9) {
+    .back-video2
+    {
+        width: 100%;
+        height: 100%;
+    }
+}
+
+@media (max-aspect-ratio: 16/9) {
+    .back-video2
+    {
+        width: auto;
+        height: 100%;
+    }
+}
+
+#about1
+{
+    position: absolute;
+    top: 1050px;
+    left: 30px;
+    width: 1100px;
+    height: 300px;
+    color: black;
+    font-size: 35px;
+    font-weight: 90;
+    transition: 0.5s;
+    background: linear-gradient(360deg,rgba(100, 149, 237, 0.6), rgba(166, 146, 255, 2));
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+
+}
+
+/* Phần research */
+.research
+{
+    width: 100%;
+    height: 157vh;
+    background-color: white;
+    float: left;
+    font-family: Surt Regular, sans-serif;
+
+    opacity: 0;
+    transform: translateY(-50px);
+    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
+
+}
+.research.visible {
+    opacity: 1;
+    transform: translateY(0);
+}
+
+#research-children
+{
+    margin-left: 300px;
+    margin-top: 100px;
+}
+
+.section-thumbnails-grid {
+    display: flex;
+    flex-wrap: wrap;
+}
+.section-thumbnails-grid.item-col-2 .grid-item {
+    display: flex;
+    flex-direction: column;
+    text-decoration: none;
+    outline: 0;
+    width: 600px;
+    margin-bottom: 60px;
+}
+.section-thumbnails-grid.item-col-2 .grid-item:nth-child(odd) {
+    margin-right: 48px;
+}
+.section-thumbnails-grid.item-col-2 .grid-item-image {
+    width: 100%;
+    height: 342px;
+    border-radius: 40px;
+    padding: 20px 23px;
+    display: flex;
+    align-items: flex-end;
+}
+
+.section-thumbnails-grid.item-col-2 .grid-item-image:hover
+{
+    transition: transform 0.3s;
+    box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2);
+    transform: scale(1.02);
+
+}
+
+.section-thumbnails-grid.item-col-2 .grid-item-tags {
+    display: flex;
+    margin-top: auto;
+}
+.section-thumbnails-grid.item-col-2 .grid-item-tag {
+    height: 32px;
+    font-size: 14px;
+    line-height: 32px;
+    font-weight: 600;
+    text-transform: uppercase;
+    color: #181821;
+    padding: 0 16px;
+    border-radius: 40px;
+    background: radial-gradient(
+            1060.11% 100% at 100% -11.84%,
+            #e9e9ff 0,
+            rgba(207, 207, 255, 0.4) 100%
+    );
+    mix-blend-mode: luminosity;
+    box-shadow: 0 8px 24px 0 rgba(18, 18, 26, 0.08);
+    backdrop-filter: blur(10px);
+    margin-right: 7px;
+}
+.section-thumbnails-grid.item-col-2 .grid-item-tag:last-child {
+    margin-right: 0;
+}
+.section-thumbnails-grid.item-col-2 .grid-item-title {
+    font-size: 32px;
+    line-height: 38px;
+    font-weight: 400;
+    padding: 16px 0;
+    color: #181821;
+}
+.section-thumbnails-grid.item-col-2 .grid-item-text {
+    font-size: 18px;
+    line-height: 22px;
+    color: #181821;
+}
+.section-thumbnails-grid.item-col-2 .grid-item-text span {
+    padding-right: 20px;
+}
+.section-thumbnails-grid.item-col-3 .grid-item {
+    display: flex;
+    flex-direction: column;
+    text-decoration: none;
+    outline: 0;
+    width: calc(33% - 12px);
+    margin-right: 24px;
+    margin-bottom: 96px;
+}
+.section-thumbnails-grid.item-col-3 .grid-item:nth-child(3n) {
+    margin-right: 0;
+}
+.section-thumbnails-grid.item-col-3 .grid-item-image {
+    width: 100%;
+    height: 229px;
+    border-radius: 20px;
+}
+.section-thumbnails-grid.item-col-3 .grid-item-title {
+    font-size: 32px;
+    line-height: 38px;
+    font-weight: 400;
+    padding: 16px 0;
+    color: rgba(233, 233, 255, 0.9);
+}
+.section-thumbnails-grid.item-col-3 .grid-item-text {
+    font-size: 18px;
+    line-height: 22px;
+    color: rgba(233, 233, 255, 0.6);
+}
+.section-thumbnails-grid.item-col-3 .grid-item-text span {
+    padding-right: 20px;
+}
+.section-text-blocks-slider-wrapper {
+    overflow: unset !important;
+}
+.section-text-blocks-slider-wrapper .section-text-blocks-slides .swiper-slide {
+    max-width: 560px !important;
+}
+.section-text-blocks-slider-wrapper .section-text-blocks-slide {
+    background: rgba(233, 233, 255, 0.02);
+    padding: 26px 28px;
+    border-radius: 40px;
+    border: 1px solid rgba(233, 233, 255, 0.04);
+}
+.section-text-blocks-slider-wrapper .section-text-blocks-slide .slide-title {
+    font-size: 32px;
+    font-weight: 400;
+    padding-bottom: 5px;
+}
+.section-text-blocks-slider-wrapper .section-text-blocks-slide .slide-text {
+    font-size: 18px;
+    line-height: 24px;
+    color: rgba(233, 233, 255, 0.6);
+}
+.section-text-blocks-slider-wrapper .section-text-blocks-slide .slide-text p {
+    font-size: 18px;
+    line-height: 24px;
+    color: rgba(233, 233, 255, 0.6);
+    padding-bottom: 5px;
+}
+.section-cta
+{
+    width: 80%;
+    height: 8vh;
+    float: left;
+}
+
+.button-opacity-1 {
+    background: rgba(10, 10, 2, 0.09);
+    display: inline-flex;
+    font-size: 18px;
+    color: rgba(10, 10, 2, 0.9);
+    padding: 19px 20px;
+    border-radius: 28px;
+    border: 1px solid rgba(233, 233, 255, 0.04);
+    backdrop-filter: blur(15px);
+    text-decoration: none;
+    outline: 0;
+}
+.button-opacity-1.button-icon {
+    padding-left: 51px;
+    position: relative;
+}
+.button-research
+{
+    margin-left: 43%;
+}
+.button-opacity-1.button-icon:before {
+    position: absolute;
+    content: "";
+    height: 24px;
+    width: 24px;
+    left: 20px;
+    top: calc(50% - 12px);
+    background-image: url(../images/icon-main.svg);
+}
+.button-opacity-1.button-icon:hover
+{
+    background: rgba(10, 10, 2, 0.2);
+    transform: scale(1.1);
+    transition: 0.7s;
+}
+
+#text-rs-top
+{
+    float: left;
+}
+#text-rs-top-1
+{
+    font-size: 20px;
+    margin-top: 20px;
+    margin-left: 850px;
+    color: lightgray;
+}
+
+/* Phần application */
+.application
+{
+    width: 100%;
+    height: 100vh;
+    background-color: white;
+    float: left;
+    font-family: "Roboto", sans-serif;
+
+    opacity: 0;
+    transform: translateY(-50px);
+    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
+}
+.application.visible {
+    opacity: 1;
+    transform: translateY(0);
+}
+
+
+#box1,#box2,#box3
+{
+    width: 386px;
+    height: 600px;
+    float: left;
+    margin-left: 252px;
+    border-radius: 40px;
+    margin-top: 10px;
+    background-color: gainsboro;
+    cursor: pointer;
+
+}
+#box1-top img
+{
+    width: 386px;
+    height: 385px;
+    border-top-left-radius: 40px;
+    border-top-right-radius: 40px;
+}
+#box1-top img:hover
+{
+    transition: transform 0.3s;
+    box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2);
+}
+#box2-top img
+{
+    width: 386px;
+    height: 385px;
+    border-top-left-radius: 40px;
+    border-top-right-radius: 40px;
+}
+
+#box3-top img
+{
+    width: 386px;
+    height: 385px;
+    border-top-left-radius: 40px;
+    border-top-right-radius: 40px;
+}
+.text-top-box
+{
+    font-size:20px;
+    color: darkgray;
+    margin-top: 10px;
+    float: left;
+}
+.text-mid-box
+{
+    font-size: 30px;
+    color: black;
+    margin-top: 25px;
+    float: left;
+    margin-left: -45px;
+}
+#box1-bottom,#box2-bottom,#box3-bottom
+{
+    margin-left: 20px;
+    float: left;
+}
+.text-bottom-box
+{
+    font-size: 17px;
+    color: black;
+    margin-top: 10px;
+    font-weight: 200;
+    float: left;
+}
+
+#box2,#box3
+{
+    width: 386px;
+    height: 600px;
+    float: left;
+    margin-left: 100px;
+    border-radius: 40px;
+    margin-top: 10px;
+    background-color: gainsboro;
+}
+
+#box1:hover,#box2:hover,#box3:hover
+{
+    background-color: white;
+    box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2);
+    transition: 0.5s;
+    transform: scale(1.02);
+}
+#text-application-top
+{
+    width: 100%;
+    height: 100px;
+    float: left;
+    margin-top: 70px;
+    text-align: center;
+}
+
+#text-application-top-1
+{
+    font-size: 20px;
+    margin-top: 20px;
+    margin-left: 20px;
+    color: lightgray;
+}
+#text-application-top-2,#text-rs-top-2{
+    font-size: 30px;
+    margin-top: 15px;
+    margin-left: 690px;
+    background: linear-gradient(360deg,rgba(66, 133, 244, 0.6), rgba(166, 146, 255, 2));
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    float: left;
+}
+.icon_bottom
+{
+    width: 100%;
+    height: 35px;
+    float: left;
+    margin-top: 10px;
+}
+.icon-b
+{
+    width: 35px;
+    height: 35px;
+    float: right;
+    margin-right: 20px;
+}
+
+
+.section-cta1
+{
+    width: 80%;
+    height: 8vh;
+    float: left;
+    align-items: center;
+}
+
+.button-opacity-2 {
+    background: rgba(10, 10, 2, 0.09);
+    display: inline-flex;
+    font-size: 18px;
+    color: rgba(10, 10, 2, 0.9);
+    padding: 19px 20px;
+    border-radius: 28px;
+    border: 1px solid rgba(233, 233, 255, 0.04);
+    backdrop-filter: blur(15px);
+    text-decoration: none;
+    outline: 0;
+}
+.button-opacity-2.button-icon {
+    padding-left: 51px;
+    position: relative;
+}
+.button-research1
+{
+    margin-left: 57%;
+    margin-top: 3%;
+}
+.button-opacity-2.button-icon:before {
+    position: absolute;
+    content: "";
+    height: 24px;
+    width: 24px;
+    left: 20px;
+    top: calc(50% - 12px);
+    background-image: url(../images/icon-main.svg);
+}
+.button-opacity-2.button-icon:hover
+{
+    background: rgba(10, 10, 2, 0.2);
+    transform: scale(1.1);
+    transition: 0.7s;
+}
+/* Phần contact */
+.contactUS
+{
+    width: 100%;
+    height: 90vh;
+    float: left;
+
+    opacity: 0;
+    transform: translateY(-50px);
+    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
+}
+.contactUS.visible {
+    opacity: 1;
+    transform: translateY(0);
+}
+#contactUs-left
+{
+    width: 60%;
+    height: 70vh;
+    float: left;
+}
+#contactUS-leftTop
+{
+    width: 100%;
+    height: 40vh;
+    float: left;
+}
+#contactUs-left-1
+{
+    font-size: 50px;
+    margin-left: 70px;
+    font-weight: 550;
+    color: black;
+    margin-top: 100px;
+    float: left;;
+}
+#contactUs-left-2
+{
+    font-size: 17px;
+    margin-left: -240px;
+    font-weight: 200;
+    color: darkgray;
+    margin-top: 160px;
+    float: left;
+}
+#contactUs-left-3
+{
+    font-size: 17px;
+    margin-left: -240px;
+    font-weight: 200;
+    color: black;
+    margin-top: 170px;
+    float: left;
+}
+#contactUs-left-4
+{
+    font-size: 17px;
+    margin-left: -240px;
+    font-weight: 200;
+    color: black;
+    margin-top: 180px;
+    float: left;
+}
+#contactUs-left-5
+{
+    font-size: 17px;
+    margin-left: -240px;
+    font-weight: 200;
+    color: black;
+    margin-top: 190px;
+    float: left;
+}
+#contactUs-left-bottom
+{
+    width: 100%;
+    height: 50vh;
+    float: left;
+}
+#left
+{
+    width: 33%;
+    height: 40vh;
+    float: left;
+}
+#mid{
+    width: 33%;
+    height: 40vh;
+    float: left;
+}
+#right
+{
+    width: 34%;
+    height: 40vh;
+    float: left;
+}
+#left-1,#right-1
+{
+    font-weight: bold;
+    font-size: 20px;
+    margin-top: 10px;
+    float: left;
+    margin-left: 80px;
+}
+#left-2,#mid-2,#right-2
+{
+    font-weight: 520;
+    font-size: 17px;
+    margin-top: 10px;
+    float: left;
+    margin-left: 80px;
+    color: darkgray;
+}
+#mid-2
+{
+    margin-left: 30px;
+}
+#mid-1
+{
+    font-weight: bold;
+    font-size: 20px;
+    margin-top: 10px;
+    float: left;
+    margin-left: 30px;
+}
+#right-1
+{
+    margin-left: 20px;
+}
+#right-2
+{
+    margin-left: 20px;
+}
+
+#contactUs-right{
+    width: 40%;
+    height: 70vh;
+    float: left;
+}
+#contactUs-right-children
+{
+    width:80%;
+    height: 70vh;
+    margin-top: 100px;
+    float: left;
+    margin-left: 100px;
+    border-radius: 40px;
+    box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2);
+}
+#contactUs-right-children:hover
+{
+    transition: 0.5s;
+    transform: scale(1.04);
+    box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2);
+}
+#contactUs-rightTop
+{
+    width: 100%;
+    height: 10vh;
+    float: left;
+    border-top-left-radius: 40px;
+    border-top-right-radius: 40px ;
+}
+#contactUs-right-1
+{
+    font-size: 45px;
+    margin-left: 40px;
+    font-weight: 550;
+    color: black;
+    margin-top: 10px;
+    float: left;;
+}
+#contactUs-right-2
+{
+    font-size: 17px;
+    margin-left: -250px;
+    font-weight: 200;
+    color: black;
+    margin-top: 50px;
+    float: left;
+}
+#firstName
+{
+    width: 40%;
+    height: 40px;
+    float: left;
+    margin-top: 30px;
+    margin-left: 40px;
+    border-radius: 20px;
+    border: 1px solid gray;
+    text-align: left;
+}
+#lastName
+{
+    width: 40%;
+    height: 40px;
+    float: left;
+    margin-top: 30px;
+    margin-left: 10px;
+    border-radius: 20px;
+    border: 1px solid gray;
+    text-align: left;
+}
+#Email
+{
+    width: 82%;
+    height: 40px;
+    float: left;
+    margin-top: 20px;
+    margin-left: 40px;
+    border-radius: 20px;
+    border: 1px solid gray;
+    text-align: left;
+}
+#cboChon
+{
+    width:15%;
+    height: 40px;
+    float: left;
+    margin-top: 20px;
+    margin-left: 40px;
+    border-radius: 20px;
+    border: 1px solid gray;
+}
+#phonenumber
+{
+    width: 65%;
+    height: 40px;
+    float: left;
+    margin-top: 20px;
+    margin-left: 10px;
+    border-radius: 20px;
+    border: 1px solid gray;
+    text-align: left;
+}
+#message
+{
+    width: 82%;
+    height: 150px;
+    float: left;
+    margin-top: 20px;
+    margin-left: 40px;
+    border-radius: 20px;
+    border: 1px solid gray;
+    text-align: left;
+}
+
+#btnSend
+{
+    width: 82%;
+    height: 40px;
+    float: left;
+    margin-top: 20px;
+    margin-left: 40px;
+    border-radius: 20px;
+    border: 1px solid #1164FE;
+    background-color: #1164FE;
+    color: white;
+    font-weight: 520;
+    font-size: 17px;
+    text-align: center;
+    cursor: pointer;
+}
+#btnSend:hover
+{
+    background-color: #1164FE;
+    transition: 0.5s;
+    transform: scale(1.04);
+    box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2);
+
+}
+#text-dit
+{
+    font-size: 13px;
+    margin-top: 12px;
+    margin-left: 150px;
+    color: darkgray;
+    float: left;
+}
+
+/* Phần footer */
+.footer
+{
+    width: 100%;
+    height: 35vh;
+    background-color: #2980b9;
+    float: left;
+}
+
+body{
+    line-height: 1.5;
+    font-family: 'Poppins', sans-serif;
+}
+.footer{
+    margin:0;
+    padding:0;
+    box-sizing: border-box;
+}
+.container{
+    max-width: 1170px;
+    margin:auto;
+}
+.row{
+    display: flex;
+    flex-wrap: wrap;
+}
+ul{
+    list-style: none;
+}
+.footer{
+    background-color: #24262b;
+    padding: 70px 0;
+}
+.footer-col{
+    width: 25%;
+    padding: 0 15px;
+}
+.footer-col h4{
+    font-size: 18px;
+    color: #ffffff;
+    text-transform: capitalize;
+    margin-bottom: 35px;
+    font-weight: 500;
+    position: relative;
+}
+.footer-col h4::before{
+    content: '';
+    position: absolute;
+    left:0;
+    bottom: -10px;
+    background-color: #e91e63;
+    height: 2px;
+    box-sizing: border-box;
+    width: 50px;
+}
+.footer-col ul li:not(:last-child){
+    margin-bottom: 10px;
+}
+.footer-col ul li a{
+    font-size: 16px;
+    text-transform: capitalize;
+    color: #ffffff;
+    text-decoration: none;
+    font-weight: 300;
+    color: #bbbbbb;
+    display: block;
+    transition: all 0.3s ease;
+}
+.footer-col ul li a:hover{
+    color: #ffffff;
+    padding-left: 8px;
+}
+.footer-col .social-links a{
+    display: inline-block;
+    height: 40px;
+    width: 40px;
+    background-color: rgba(255,255,255,0.2);
+    margin:0 10px 10px 0;
+    text-align: center;
+    line-height: 40px;
+    border-radius: 50%;
+    color: #ffffff;
+    transition: all 0.5s ease;
+}
+.footer-col .social-links a:hover{
+    color: #24262b;
+    background-color: #ffffff;
+}
+
+/*responsive*/
+@media(max-width: 767px){
+    .footer-col{
+        width: 50%;
+        margin-bottom: 30px;
+    }
+}
+@media(max-width: 574px){
+    .footer-col{
+        width: 100%;
+    }
 }