@charset "UTF-8";
/******* RESPONSIVE ********/
/****Màn hình máy tính thông thường****/
/****Màn hình desktop loại bé****/
/**** Màn hình ipad hiển thị theo chiều ngang (Landscape) ****/
/****Màn hình ipad loại bé hiển thị theo chiều ngang (Landscape)****/
/****Màn hình ipad hiển thị theo chiều dọc (Portrait)****/
/****Màn hình ipad loại bé hiển thị theo chiều dọc (Portrait)****/
/****Màn hình điện thoại hiển thị theo chiều ngang (Landscape)****/
/****Màn hình điện thoại Iphone Plus****/
/****Màn hình điện thoại Iphone****/
/****Màn hình điện thoại loại bé****/
@font-face {
  font-family: 'Manrope';
  src: url("../../fonts/Manrope/Manrope-VariableFont_wght.ttf") format("truetype"); }

ul, li {
  list-style: none; }

body {
  color: #0a2540;
  font-family: Manrope, Roboto, Helvetica, Arial, sans-serif;
  font-size: 14px; }

p {
  margin: 0 auto; }

a:hover {
  text-decoration: none; }

@keyframes opacitymove {
  from {
    opacity: 0; }
  to {
    opacity: 1; } }

@keyframes translateXmove {
  from {
    transform: translateX(-30px); }
  to {
    transform: translateX(0); } }

@keyframes pulse-animation {
  0% {
    box-shadow: 0 0 0 0px rgba(0, 0, 0, 0.2); }
  100% {
    box-shadow: 0 0 0 20px transparent; } }

@keyframes animate {
  0% {
    transform: translateY(0) rotate(0deg);
    opacity: 1;
    border-radius: 0; }
  100% {
    transform: translateY(-1000px) rotate(720deg);
    opacity: 0;
    border-radius: 50%; } }

@keyframes rotate {
  0% {
    transform: rotate(0deg); }
  100% {
    transform: rotate(360deg); } }

#web-head {
  display: none; }

#home {
  /*    .section-title {
        text-transform: uppercase;
        font-weight: 800;
        margin: 30px 0;
        font-size: 18px;
        display: flex;
        align-items: center;
        animation: translateXmove 2s;

        &:before {
            content: "";
            width: 14px;
            height: 14px;
            border-radius: 100%;
            background: red;
            margin-right: 10px;
            margin-top: -1px;
            animation: pulse-animation 2s infinite;
        }
    }*/ }
  #home .section-title {
    text-align: center;
    font-weight: 700;
    margin: 30px 0;
    font-size: 30px;
    color: #0a2540;
    font-family: Open Sans, sans-serif; }
  #home .slick-prev:before, #home .slick-next:before {
    color: #3361d9;
    font-size: 40px; }
  #home .slick-prev {
    left: -50px; }
  #home .slick-next {
    right: -50px; }
  #home .banner-bg {
    background: #4e54c8;
    background: linear-gradient(to left, #8f94fb, #4e54c8);
    background-image: url("../../images/home/banner1.jpg");
    height: 100vh;
    background-size: cover;
    position: absolute;
    width: 100%; }
    #home .banner-bg .circles {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      overflow: hidden; }
    #home .banner-bg .circles li {
      position: absolute;
      display: block;
      list-style: none;
      width: 20px;
      height: 20px;
      background: rgba(255, 255, 255, 0.2);
      animation: animate 25s linear infinite;
      bottom: -150px; }
    #home .banner-bg .circles li:nth-child(1) {
      left: 25%;
      width: 80px;
      height: 80px;
      animation-delay: 0s; }
    #home .banner-bg .circles li:nth-child(2) {
      left: 10%;
      width: 20px;
      height: 20px;
      animation-delay: 2s;
      animation-duration: 12s; }
    #home .banner-bg .circles li:nth-child(3) {
      left: 70%;
      width: 20px;
      height: 20px;
      animation-delay: 4s; }
    #home .banner-bg .circles li:nth-child(4) {
      left: 40%;
      width: 60px;
      height: 60px;
      animation-delay: 0s;
      animation-duration: 18s; }
    #home .banner-bg .circles li:nth-child(5) {
      left: 65%;
      width: 20px;
      height: 20px;
      animation-delay: 0s; }
    #home .banner-bg .circles li:nth-child(6) {
      left: 75%;
      width: 110px;
      height: 110px;
      animation-delay: 3s; }
    #home .banner-bg .circles li:nth-child(7) {
      left: 35%;
      width: 150px;
      height: 150px;
      animation-delay: 7s; }
    #home .banner-bg .circles li:nth-child(8) {
      left: 50%;
      width: 25px;
      height: 25px;
      animation-delay: 15s;
      animation-duration: 45s; }
    #home .banner-bg .circles li:nth-child(9) {
      left: 20%;
      width: 15px;
      height: 15px;
      animation-delay: 2s;
      animation-duration: 35s; }
    #home .banner-bg .circles li:nth-child(10) {
      left: 85%;
      width: 150px;
      height: 150px;
      animation-delay: 0s;
      animation-duration: 11s; }
    #home .banner-bg .carousel-item {
      height: 870px;
      overflow: hidden; }
      #home .banner-bg .carousel-item img {
        object-position: center;
        transform: translateY(-5%);
        width: 100%;
        height: 100%;
        object-fit: cover; }
      #home .banner-bg .carousel-item .carousel-caption {
        width: 50%;
        top: 0;
        justify-content: center;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        visibility: visible;
        animation: carouselmove 3s;
        text-align: left;
        left: 11%; }
        #home .banner-bg .carousel-item .carousel-caption h1 {
          color: #97c93e;
          font-size: 40px; }
        #home .banner-bg .carousel-item .carousel-caption h2 {
          color: #fff;
          font-size: 30px; }
        #home .banner-bg .carousel-item .carousel-caption h1, #home .banner-bg .carousel-item .carousel-caption h2 {
          font-weight: 900; }
    #home .banner-bg .carousel-control-next, #home .banner-bg .carousel-control-prev {
      top: 0;
      width: 10%; }
    #home .banner-bg .caption {
      width: 100%;
      position: absolute;
      z-index: 2;
      display: flex;
      flex-direction: column;
      justify-content: center;
      height: 500px; }
      #home .banner-bg .caption z h1 {
        color: #97c93e; }
      #home .banner-bg .caption h2 {
        color: #fff; }
      #home .banner-bg .caption h1, #home .banner-bg .caption h2 {
        font-weight: 900;
        font-size: 50px; }
      #home .banner-bg .caption p .arrow {
        border: solid #97c93e;
        border-width: 0 10px 10px 0;
        display: inline-block;
        padding: 3px;
        width: 30px;
        height: 30px;
        margin: 10px; }
      #home .banner-bg .caption p .down {
        transform: rotate(45deg);
        -webkit-transform: rotate(45deg); }
  #home .banner {
    height: 100vh;
    padding-top: 30px;
    background: none;
    background-size: cover;
    position: relative; }
    #home .banner:after {
      /*            background-image: linear-gradient(to bottom, rgba(255,255,255,0), #fff);
            bottom: -10px;
            content: "";
            height: 5%;
            left: 0;
            position: absolute;
            width: 100%;
            z-index: 2;
            pointer-events: none;*/ }
    #home .banner .col-lg-6:first-child {
      padding-bottom: 60px; }
      #home .banner .col-lg-6:first-child .logo-ubnd {
        margin-bottom: 35px; }
        #home .banner .col-lg-6:first-child .logo-ubnd img {
          height: 40px; }
        #home .banner .col-lg-6:first-child .logo-ubnd h6 {
          text-transform: uppercase;
          margin: 0;
          padding-left: 10px;
          display: flex;
          align-items: center;
          color: #cf0921;
          height: 100%; }
      #home .banner .col-lg-6:first-child h1 {
        color: #cf0921;
        font-weight: 600;
        margin-bottom: 20px;
        animation: opacitymove 2s; }
      #home .banner .col-lg-6:first-child p {
        margin-bottom: 20px;
        animation: opacitymove 2.5s; }
      #home .banner .col-lg-6:first-child .banner-nav {
        position: relative; }
        #home .banner .col-lg-6:first-child .banner-nav .vertical-curve {
          height: 125px;
          width: 125px;
          border-radius: 100%;
          position: absolute;
          outline: solid 50px #ffffff21;
          margin-left: 50px;
          margin-top: 25%;
          background-color: #fff;
          background-image: url(../../images/home/service/1-05.png);
          background-size: cover; }
        #home .banner .col-lg-6:first-child .banner-nav ul {
          z-index: 1;
          position: relative; }
          #home .banner .col-lg-6:first-child .banner-nav ul li {
            padding: 10px;
            display: flex;
            align-items: center;
            animation: translateXmove 2s;
            width: 100%; }
            #home .banner .col-lg-6:first-child .banner-nav ul li:nth-child(2), #home .banner .col-lg-6:first-child .banner-nav ul li:nth-child(3) {
              padding-left: 40%; }
            #home .banner .col-lg-6:first-child .banner-nav ul li:nth-child(1), #home .banner .col-lg-6:first-child .banner-nav ul li:nth-child(4) {
              padding-left: 30%; }
            #home .banner .col-lg-6:first-child .banner-nav ul li img {
              height: 60px;
              width: 60px;
              margin-right: 10px; }
            #home .banner .col-lg-6:first-child .banner-nav ul li a {
              color: #Fff;
              text-transform: uppercase;
              font-weight: 800;
              font-size: 20px;
              transition: all ease 0.5s;
              padding: 10px 15px;
              border-radius: 50px 10px 10px 50px;
              background: rgba(0, 0, 0, 0.3);
              width: 100%; }
              #home .banner .col-lg-6:first-child .banner-nav ul li a:hover {
                color: #ffbf00;
                cursor: pointer;
                background: rgba(0, 0, 0, 0.7); }
    #home .banner .col-lg-6:last-child .data-register-btn {
      border-radius: 5px;
      padding: 10px;
      margin-left: 10px; }
      #home .banner .col-lg-6:last-child .data-register-btn a {
        color: #fff; }
      #home .banner .col-lg-6:last-child .data-register-btn img {
        height: 20px;
        margin-right: 10px; }
      #home .banner .col-lg-6:last-child .data-register-btn:hover {
        outline: solid rgba(79, 142, 247, 0.41);
        cursor: pointer; }
      #home .banner .col-lg-6:last-child .data-register-btn:first-child {
        background: linear-gradient(120deg, #992ad5, #f55469); }
      #home .banner .col-lg-6:last-child .data-register-btn:last-child {
        background: linear-gradient(120deg, #001bf4, #0ff2ed); }
      #home .banner .col-lg-6:last-child .data-register-btn .dropdown-toggle::after {
        margin-top: 8px;
        font-size: 1.2rem; }
      #home .banner .col-lg-6:last-child .data-register-btn ul {
        background: #3361d9;
        padding: 5px;
        top: 10px !important; }
        #home .banner .col-lg-6:last-child .data-register-btn ul li {
          padding: 5px;
          border-radius: 3px;
          font-size: 0.9rem; }
          #home .banner .col-lg-6:last-child .data-register-btn ul li i {
            margin-right: 5px; }
          #home .banner .col-lg-6:last-child .data-register-btn ul li:hover {
            background: #22449d;
            color: #fff376; }
    #home .banner .col-lg-6:last-child .banner-img {
      height: 350px;
      position: absolute;
      top: 25%;
      left: 10%;
      animation: opacitymove 2s; }
  #home .software {
    padding: 15px 0px 0px 0px; }
    #home .software .lst-item {
      justify-content: center !important; }
      #home .software .lst-item .software-item {
        border: 1px solid #DFE3EC;
        border-radius: 10px;
        background: white;
        margin-bottom: 30px;
        transition: .3s linear;
        height: 330px;
        filter: drop-shadow(0px 14px 30px #DDE1EB);
        border-color: white; }
        #home .software .lst-item .software-item:hover img {
          transform: scale(1.1);
          transition: all 500ms ease; }
        #home .software .lst-item .software-item:hover .software-thumb .software-social .list-wrap {
          background: #3361d9; }
        #home .software .lst-item .software-item .software-thumb {
          position: relative;
          overflow: hidden;
          border-radius: 8px 8px 180px; }
          #home .software .lst-item .software-item .software-thumb img {
            height: 180px;
            width: 100%;
            border: none;
            box-shadow: none;
            transition: all 0.3s ease-out 0s;
            vertical-align: middle; }
          #home .software .lst-item .software-item .software-thumb .software-social .list-wrap {
            display: flex;
            flex-direction: column-reverse;
            position: absolute;
            border-radius: 0px 0px 50px 50px;
            background: #3361d9;
            right: 17px;
            top: 0;
            padding: 16px 13px;
            transition: .3s linear; }
            #home .software .lst-item .software-item .software-thumb .software-social .list-wrap li a {
              display: block;
              color: white;
              font-size: 16px; }
        #home .software .lst-item .software-item .software-content {
          padding: 20px 25px 25px; }
          #home .software .lst-item .software-item .software-content .title {
            font-weight: 600;
            font-size: 18px;
            margin-bottom: 3px;
            /*                        overflow: hidden;
                        text-overflow: ellipsis;
                        display: -webkit-box;
                        -webkit-box-orient: vertical;
                        -webkit-line-clamp: 1;*/ }
            #home .software .lst-item .software-item .software-content .title a {
              color: #00194C; }
          #home .software .lst-item .software-item .software-content span {
            font-size: 13px;
            display: block;
            position: relative;
            padding-bottom: 15px;
            color: #667594; }
          #home .software .lst-item .software-item .software-content span::before {
            content: "";
            position: absolute;
            left: 0;
            bottom: 0;
            width: 30px;
            height: 4px;
            border-radius: 4px;
            background: #3361d9; }
  #home .domain {
    color: #fff;
    padding: 30px 0 100px 0;
    background-image: url(../../images/home/bg.png);
    background-size: cover; }
    #home .domain .section-title {
      color: #fff;
      text-align: center; }
    #home .domain h1 {
      font-size: 1.5em;
      font-weight: 700;
      color: #424141;
      text-align: center;
      margin-top: 25px;
      font-stretch: condensed;
      line-height: 35px;
      padding-bottom: 5px; }
      #home .domain h1 span {
        padding-bottom: 2px;
        border-bottom: 2px solid #ffce38; }
    #home .domain .title p {
      font-size: 20px;
      text-align: center;
      color: red;
      font-weight: 600; }
    #home .domain .box {
      padding: 40px 20px; }
      #home .domain .box > p {
        text-align: center;
        margin-bottom: 40px;
        font-weight: 700; }
      #home .domain .box a {
        margin: auto;
        background: wheat;
        padding: 8px;
        border-radius: 100%;
        width: 150px;
        height: 150px;
        display: block;
        box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
        transition: all 500ms ease;
        color: #fff;
        font-weight: 500; }
      #home .domain .box .item {
        height: 100%;
        width: 100%;
        text-align: center;
        font-size: 20px;
        padding: 10px;
        border-radius: 100%;
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        background-size: cover;
        background-position: center; }
      #home .domain .box .item.domain9 {
        background-image: url("../../images/domain/danculaodong.jpg"); }
      #home .domain .box .item.domain2 {
        background-image: url("../../images/domain/giaoduc.jpg"); }
      #home .domain .box .item.domain3 {
        background-image: url("../../images/domain/yte.jpg"); }
      #home .domain .box .item.domain4 {
        background-image: url("../../images/domain/dulich.jpg"); }
      #home .domain .box .item.domain5 {
        background-image: url("../../images/domain/vanhoa.jpg"); }
      #home .domain .box .item.domain6 {
        background-image: url("../../images/domain/thuongmai.jpg"); }
      #home .domain .box .item.domain7 {
        background-image: url("../../images/domain/congnghiep.jpg"); }
      #home .domain .box .item.domain8 {
        background-image: url("../../images/domain/nongnghiep.png"); }
      #home .domain .box .item.domain1 {
        background-image: url("../../images/domain/quyhoach.png"); }
      #home .domain .box .item.domain10 {
        background-image: url("../../images/domain/kktvp.jpg"); }
      #home .domain .box .item.domain11 {
        background-image: url("../../images/domain/nsvsmt.jpg"); }
    #home .domain .slick-center .box a {
      transform: scale(1.3);
      background: linear-gradient(120deg, #001bf4, #0ff2ed); }
  #home .service {
    padding: 50px 0;
    inset: 0;
    display: flex;
    place-content: center;
    align-items: center;
    overflow: hidden;
    background-image: url("../../images/home/pm_bg.jpg");
    background-size: cover; }
    #home .service .section-title {
      text-align: center; }
    #home .service .gradient {
      --size: 250px;
      --speed: 50s;
      --easing: cubic-bezier(0.8, 0.2, 0.2, 0.8);
      transition: all 0.25s ease-out;
      width: var(--size);
      height: var(--size);
      filter: blur(calc(var(--size) / 5));
      background-image: linear-gradient(rgba(55, 235, 169, 0.85), #5b37eb);
      animation: rotate var(--speed) var(--easing) alternate infinite;
      border-radius: 30% 70% 70% 30%/30% 30% 70% 70%;
      position: absolute; }
    @media (min-width: 720px) {
      #home .service .gradient {
        --size: 500px; } }
    #home .service .item {
      height: 300px;
      justify-content: center;
      margin: 10px 20px;
      border-radius: 7px;
      border: 1px solid #DFE3EC;
      background: none;
      background: url("../../images/home/service/service-bg.png");
      background-size: cover;
      background-position-x: left; }
      #home .service .item:hover {
        border: none;
        transition: all 500ms ease;
        filter: drop-shadow(0px 14px 30px #DDE1EB); }
        #home .service .item:hover p, #home .service .item:hover span {
          transition: all 500ms ease; }
        #home .service .item:hover img {
          transform: scale(1.1);
          transition: all 500ms ease; }
      #home .service .item img {
        width: 100px;
        align-self: center; }
      #home .service .item p, #home .service .item span {
        color: #3361d9;
        font-weight: 600;
        margin: 10px 0; }
      #home .service .item span {
        border-radius: 100%;
        display: flex;
        width: 70px;
        height: 70px;
        justify-content: center;
        align-items: center;
        font-size: 18px;
        font-size: 42px; }
      #home .service .item p {
        text-transform: uppercase;
        font-size: 20px; }
  #home .link {
    padding: 50px 0; }
    #home .link .box {
      padding: 15px; }
    #home .link .item {
      display: flex;
      flex-direction: column;
      overflow: hidden;
      background: #eee;
      border-radius: 5px;
      height: 100%;
      padding: 2px;
      text-align: center; }
      #home .link .item img {
        height: 50px; }
      #home .link .item p {
        text-transform: uppercase;
        color: #444;
        margin: 0;
        padding: 10px 0;
        text-align: center;
        font-size: 11px; }
  @media only screen and (max-width: 1200px) {
    #home .banner .banner-nav .vertical-curve {
      margin-left: -15px !important;
      margin-top: 30% !important; }
    #home .banner .banner-nav ul li:nth-child(2), #home .banner .banner-nav ul li:nth-child(3) {
      padding-left: 30% !important; }
    #home .banner .banner-nav ul li:nth-child(1), #home .banner .banner-nav ul li:nth-child(4) {
      padding-left: 15% !important; }
    #home .banner .banner-img {
      top: 35% !important; } }
  @media only screen and (max-width: 1024px) {
    #home .banner .banner-img, #home .banner:after {
      display: none; }
    #home .banner .data-register-btn {
      width: 100%;
      justify-content: center;
      bottom: 15px; }
    #home .banner .banner-nav .vertical-curve {
      margin-left: 50px !important;
      margin-top: 19% !important; }
    #home .banner .banner-nav ul li:nth-child(2), #home .banner .banner-nav ul li:nth-child(3) {
      padding-left: 30% !important; }
    #home .banner .banner-nav ul li:nth-child(1), #home .banner .banner-nav ul li:nth-child(4) {
      padding-left: 15% !important; }
    #home .banner .banner-nav ul li a {
      width: auto !important; }
    #home .slick-prev {
      left: 0; }
    #home .slick-next {
      right: 15px; }
    #home .slick-prev, #home .slick-next {
      z-index: 2; }
      #home .slick-prev:before, #home .slick-next:before {
        font-size: 40px; } }
  @media only screen and (max-width: 768px) {
    #home .banner .banner-nav .vertical-curve {
      margin-left: 0px !important;
      margin-top: 30% !important; }
    #home .banner .banner-nav ul li:nth-child(2), #home .banner .banner-nav ul li:nth-child(3) {
      padding-left: 24% !important; }
    #home .banner .banner-nav ul li:nth-child(1), #home .banner .banner-nav ul li:nth-child(4) {
      padding-left: 12% !important; } }
  @media only screen and (max-width: 480px) {
    #home .banner .banner-nav .vertical-curve {
      display: none; }
    #home .banner .banner-nav ul {
      padding-left: 0; }
      #home .banner .banner-nav ul li:nth-child(2), #home .banner .banner-nav ul li:nth-child(3) {
        padding-left: 10px !important; }
      #home .banner .banner-nav ul li:nth-child(1), #home .banner .banner-nav ul li:nth-child(4) {
        padding-left: 10px !important; }
      #home .banner .banner-nav ul li a {
        width: 100% !important; }
      #home .banner .banner-nav ul li img {
        width: 40px !important;
        height: 40px !important; } }