body {
    /* background-image: url('../Content/img/clean-white.jpg');
    background-repeat: no-repeat;
    background-attachment: fixed; */
    background-color: #F8FAFC;
    font-family: "Roboto", sans-serif !important;
  }

  #outer-main {
    min-height: 100%;
    position: absolute;
  }
.toast-top-right {
  margin-top: 80px !important;
}

img .logo{
  font-size: 13.5rem;
}

input, select, textarea, button{font-family:inherit!important; font-size: inherit!important;}

.tt-title {
    text-align: center;
    font-weight: bold;
    color: #ffbc26;
    text-shadow: 3px 3px 10px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000;
    font-size: 35px;
    margin-top: 40px;
    margin-bottom: 40px;
}

.labelSelect {
  font-size: 14px;
  font-weight: bold !important;
}

.colSTT {
  width: 10% !important;
}

.bodyTableContent {
  font-size: 14px;
 align-content: middle !important;
}

.labelTitleTable {
  font-size: 14px;
  text-align: center !important;
  vertical-align: middle !important;
}

.tt-title2 {
  text-align: center;
  /* font-weight: bold; */
  color: #2E64FE;
  text-transform: uppercase;
  text-shadow: 3px 3px 10px #999, 0 0 1px #999, 0 0 1px #999, 0 0 1px #999, 0 0 1px #999, 0 0 1px #999, 0 0 1px #999;
  /* font-size: 25px; */
  font-size: 180%;
}

.renderTitleHeader{
  font-size: 14pt;
}

.btnDangNhap{
  display: none;
}

.dangerRequire {
  color: red
}

.removePadding {
  padding: 0px !important;
  margin: 0px !important;
}
.btnSearch {
  font-size: 14px !important;
  border: 0px !important;
  padding: 9px 10px 9px 10px;
  color: #fff;
  font-weight: 600;
  border-radius: 4px;
  align-items: center;
  justify-content: center;
}

.titleCardMenuPage{
  font-size: 14px;
  font-weight: 700;
  color: #4559F3;
  text-transform: uppercase;
  margin-top: 20px;

}

.select-container {
  padding-left: 0px !important;
  padding-right: 0px !important;
  align-items: center !important;
  justify-content: center !important;

}

.textFooter {
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  color: #fff;
  padding: 10px 0px 0 0;
  text-align: left !important;

}

.containerDetails {
  padding: 0px;
  align-items: flex-start;
  justify-content: flex-start;
  text-align: left !important;

}

.headerTitle {
  font-size: 20px;
}

.fontTitleFooter {
  font-size: 16px;
}

.titleScreen {
  font-size: 16px;
  font-weight: 700;
  color: #1750F3;
  text-transform: uppercase;
}

.titleCardStyle {
  font-size: 120%;
}

.logoHeader {
  width: 80px;
}

.textSGD .textApp .buttonDangNhap {
  font-size: inherit;
}

@media only screen and (max-width: 3840px) {
  .cardMenuPageDiv {
    width: 30vw !important;
  }
}

@media only screen and (max-width: 2880px) {
  .cardMenuPageDiv {
    width: 35vw !important;
  }
}

@media only screen and (max-width: 2440px) {
  .cardMenuPageDiv {
    width: 40vw !important;
  }
}



@media only screen and (max-width: 1920px) {
  .cardMenuPageDiv {
    width: 50vw !important;
  }
}
@media only screen and (max-width: 1600px) {
  .cardMenuPageDiv {
    width: 60vw !important;
  }
}

@media only screen and (max-width: 1440px) {
  .cardMenuPageDiv {
    width: 65vw !important;
  }
}
@media only screen and (min-width: 1201px) {
  .mainInnerHomePage {
    margin-top: calc(100vw - 95%) !important;
  }
}


@media only screen and (max-width: 1200px) {
  .cardMenuPageDiv {
    width: 70vw !important;
  }
  .main-headerHomePage,
  .main-header {
    padding-left: .5em !important;
    padding-right: .5em !important;
  }
  .logoHeader {
    width: 70px;
  }
  .menuTitleHeader {
    padding-left: .8em;
    padding-right: .8em;
  }
  .mainInnerHomePage {
    margin-top: calc(100vw - 95%) !important;
  } 
}
/* 
@media only screen and (max-width: 1150px) {
  .mainInnerHomePage {
    margin-top: calc(100vw - 92%) !important;
  }
} */
/* @media only screen and (max-width: 1000px) {
  .mainInnerHomePage {
    margin-top: calc(100vw - 94%) !important;
  }
} */

@media only screen and (max-width: 1436px) {
  .main-headerHomePage,
  .main-header {
    padding-left: .3em !important;
    padding-right: .3em !important;
    padding-top: .3em !important;
  }
}


@media only screen and (max-width: 999px){
  .mainInnerHomePage {
    margin-top: calc(100vw - 94%) !important;
  }
}

@media only screen and (max-width: 992px) {
  .cardMenuPageDiv {
    width: 80vw !important;
  }
  .main-headerHomePage,
  .main-header {
    padding-left: .3em !important;
    padding-right: .3em !important;
    padding-top: .3em !important;
  }
  .menuTitleHeaderList {
    font-size: 14px !important;
  }
  .logoHeader {
    width: 60px;
  }
  .menuTitleHeader {
    padding-left: .4em;
    padding-right: .4em;
    padding-top: 5px;
    padding-bottom: 5px;
  }
  .bodyContent {
    margin-left: 30px !important;   
    margin-top: 120px !important;
  }
  .mainInnerHomePage {
    margin-top: calc(100vw - 94%) !important;
  }
}
.profile-image
{
  width: 45px !important;
}

.text-headerPage {
  font-size: 130%;
}

@media only screen and (max-width: 906px){
  .mainInnerHomePage {
    margin-top: calc(100vw - 93%) !important;
  }
}


@media only screen and (max-width: 768px) {
  .profile-image
  {
    width: 30px !important;
  }
  .cardMenuPageDiv {
    width: 80vw !important;
  }
  .mainInner {
    min-height: calc(100vh - 320px);
    padding-top: 120px !important;
  }
  .mainInnerHomePage {
    padding-top: 120px !important;
    /* margin-top: 65px !important; */
    min-height: calc(100vh - 320px);
  }

  .menuTitleHeaderList {
    font-size: 14px !important;
  }
  .logoHeader {
    width: 50px;
  }
  .main-header {
    min-height: 80px;
    max-height: 250px;
    padding: 10px;
  }
  .main-footer {
    /* min-height: 320px; */
    height: 320px;
  }
  .main-footer .info {
    background-color: #1750F3;
    align-items: flex-start;
    min-height: 170px;
    height: 170px;
  }
  .bodyContent {
    margin-left: 20px !important;   
    margin-top: 40px !important;
  }
  
  .main-footer .donvi {
    display: flex ;
    justify-content: center !important;
    padding-bottom: 1em;
  }
  


  .main-footer .donviItemRight {
    display: flex !important;
    /* justify-content: center !important; */
  }

  .menuFooter {
    padding-bottom: 1em;
    display: flex;
    justify-content: center !important;
  }
  .ulMenuFooter  {
    column-gap: 10px !important;
  }

  .activeMenuHeader {
    text-decoration-line: none !important;
  }
  .titleCardStyle {
    font-size: 16px;
    margin-left: 12px;
  } 
  .dropdown-item.active, .dropdown-item:active {
    color: #fff;
    text-decoration: none;
    background-color: #3f6ad8 !important;
  }

  .dropdown-item:hover, .dropdown-item:focus {
    color: #16181b;
    text-decoration: none;
    background-color: #3f6ad8 !important;
  }
  .text-headerPage {
    font-size: 14px !important;
  }
}
@media only screen and (max-width: 620px) {
  .mainInnerHomePage {
    margin-top: calc(100vw - 98%) !important;
  }
  
}

@media only screen and (max-width: 600px) {
  .mainInnerHomePage {
    margin-top: calc(100vw - 94%) !important;
  }
  
}

@media only screen and (max-width: 600px) {

  .paddingHeaderST {
    min-width: 60px
  }

  .paddingHeaderClass {
    min-width: 90px
  }

    .paddingHeader {
    min-width: 130px
  }

  .paddingHeaderCum {
    min-width: 159px
  }
  .bodyHompage {
    margin-top: 10px !important;
  }
  .mainInnerContainer {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .h1Title {
    font-size: 14px !important;
    line-height: 20px !important;
  }
  .cardMenuPage {
    width: 180px !important;
  }

  .cardMenuPageFS {
    width: 180px !important;
    height: 180px !important;
  }
  
  .cardMenuPageDiv {
    width: 90vw !important;
  }
  .textFooter {
    text-align: center !important;
  }
  .bodyContent {
    margin-left: 0px !important;   
    margin-top: 30px !important;
  }

  .menuTitleHeader {
    padding-top: 2px;
    padding-bottom: 2px;
  }

  .fontTitleFooter {
    font-size: 14px;
  }

  .containerRow {
    padding: 18px !important;
    margin: 0px !important;
  }

  .headerTitle {
    font-size: 14px;
  }

  
  .renderTitleHeader{
    font-size: 10pt;
  }

  .footerItem {
    max-width: 100% !important;
    align-items: center !important;
    justify-content: center !important;
    /* text-align: center !important; */
    padding: 16px 0px 0px 0px !important;
  }

  .centerTextFooter {
        text-align: center !important;
        align-items: center !important;
        padding: 0px !important;
        margin: 0px !important;
  }

  .footerContainer{
    display: block;
  }
  .tt-title2 {
    font-size: 100%;
    position: relative;
    animation-name: diQuaDiLai;
    animation-duration: 4s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-direction: alternate;
  }
  .renderUserHeaderNotLogin {
    font-size: 10px !important;
    padding: 0.6rem !important;
  }
  .renderMenuHeader{
      display: none;
  }
  .btnDangNhap{
    display: inline-block;

  }
  .dropdown-menu{
    top: 30% !important;
    right: 5% !important;
  }
  .pageForPhone{
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
  }
  .titleCardMenuPage{
    font-size: 12px;
    font-weight: 700;
    color: #4559F3;
    text-transform: uppercase;
    margin-top: 10px;
  }
  .headerTitle {
    font-size: 14px;
  }
  /* .h1Title {
    font-size: 20px !important;
  } */
  .h2Title {
    margin-bottom: 0px !important; 
    font-size: 18px !important;
    line-height: 24px !important;
  }
  .cardMenuPage {
 
    padding: 24px 12px !important;
    min-height: 160px !important;
    margin: 5px !important;
   
    
    /* font-size: 22px; */
  }
  .cardMenuPageFS {
 
    padding: 16px !important;
    margin: 5px !important;
   
    
    /* font-size: 22px; */
  }

 
}

@media only screen and (max-width: 500px) {
  .cardMenuPage {
    width: 160px !important;
  }
  .cardMenuPageFS {
    width: 160px !important;
    height: 160px !important;

  }
  .main-headerHomePage {
    padding: 0.5em !important;
  }
  .logoHeader {
    width: 45px;
  }
  .textSGD {
    font-size: 14px !important;
  }
  .textApp {
    font-size: 14px !important;
  }
  .buttonDangNhap {
    font-size: 13px !important;
  }    
  .mainInnerHomePage {
    /* margin-top: 0px !important; */
    padding-top: 80px !important;
  }
  .cardMenuPageDiv {
    width: 95% !important;
  }
}

@media only screen and (max-width: 415px) {
  .cardMenuPageDiv {
    width: 97% !important;
  }
}

@media only screen and (max-width: 375px) {
  .cardMenuPageDiv {
    width: 100% !important;
  }
  .cardMenuPage {
    width: 145px !important;
  }
  .cardMenuPageFS {
    width: 145px !important;
    height: 145px !important;
  }
}

.mainInnerContainer {
  padding: 1rem;
}
.headerHomepage {
  cursor: pointer;
}

.outerMain_HomePage {
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
}

.menuHeader:hover {
  text-decoration-line: none;
}
.activeMenuHeader {
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-color: white;
  text-decoration-thickness: 3px;
  text-underline-offset: .5em;
}

.mobileActiveMenuHeader {
  text-decoration-line: none;
}

.bodyContent {
  margin-left: 50px;   
  margin-top: 80px;
}
.outerMain {
  background-image: url("/Content/Images/Background.png");
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
}

.main-headerHomePage,
.main-header {
    /* background:#2e3091 91.19%; */
    /* background-image: linear-gradient(315deg, #2a2a72 0%, #009ffd 74%); */
    background-color: #1750F3;
    display: inline;
    color: white;
    vertical-align: middle;
    width: 100%;
    top: 0px;
    z-index: 499;
    position: fixed;
    height: 120px;
    padding-left: 7em;
    padding-right: 7em; 

}

.menuTitleHeader {
  padding-left: 1em;
  padding-right: 1em;
}

.mainInner  {
  padding-top: 120px;
  min-height: calc(100vh - 180px);
}
.mainInnerHomePage {
  /* margin-top: 100px !important;  */
  padding-bottom: 50px !important;
  /* min-height: calc(100vh - 180px); */
}

.linkCompany {
  color: #1750F3;
  font-weight: bold;
}

.linkCompany:hover {
  color: red !important;
}

.main-footer .donvi {
  display: block;
  justify-content: inherit;
}

.main-footer .donviItemRight {
  display: block;
  justify-content: inherit;
}

.ulMenuFooter {
  display: grid;
  /* grid-template-columns: repeat(auto-fit, minmax(0em, max-content)); */
  grid-template-rows: repeat(3, 1fr);/* 5 rows */
  grid-auto-flow: column;
  list-style: none;
  padding: 0;
  margin-left: 0;
  gap: 5px
}

.ulMenuFooter .linkUrl {
  color: white !important;
}

/* Standard syntax */ 
@keyframes diQuaDiLai {
  0%{left: -1%;}
  25%{left: 0%;}
  50%{left: 1%;}
  75%{left: 2%;}
  100%{left: 3%;}
}

.colSTT {
  width: 24px !important;
}

.main-footer {
    width: 100%;
    bottom: 0px;
    font-size: 14px;
    height: 180px;
}

.main-footer .info {
  /* background-color: #1750F3; */
  height: 160px;
  color: white;
}

.main-footer .company {
  height: 40px;
  background-color: #DEE2FF;
}

.main-header {
    /* background:#2e3091 91.19%; */
    /* background-image: linear-gradient(315deg, #2a2a72 0%, #009ffd 74%); */
    background-color: #1750F3;
    display: inline;
    color: white;
    vertical-align: middle;
    width: 100%;
    top: 0px;
    z-index: 510;
    position: fixed;
    height: 120px;
}

.go-corner {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    width: 32px;
    height: 32px;
    overflow: hidden;
    top: 0;
    right: 0;
    background-color: #00838d;
    border-radius: 0 4px 0 32px;
  }
  
  .go-arrow {
    margin-top: -4px;
    margin-right: -4px;
    color: white;
    font-family: courier, sans;
  }
  
  .cardMenuPageDiv {
    width: 40vw;
    margin: 0 auto;
  }

  .cardMenuPage {
    display: block;
    top: 0px;
    position: relative;
    text-align: center;
    width: 224px;
    background-color: #f2f8f9;
    border-radius: 16px;
    min-height: 180px;
    padding: 32px 10px;
    margin: 12px;
    text-decoration: none;
    z-index: 0;
    overflow: hidden;
    align-items: center;
    justify-content: center;
    
    /* font-size: 22px; */
  }

  .cardMenuPageFS {
    display: flex;
    top: 0px;
    position: relative;
    text-align: center;
    width: 224px;
    height: 224px;
    background-color: #FFE6E0;
    border-radius: 50%;
    padding: 16px;
    margin: 12px;
    text-decoration: none;
    z-index: 0;
    overflow: hidden;
    align-items: center;
    justify-content: center;
    
    
    /* font-size: 22px; */
  }
    .cardMenuPage:hover {
      transition: all 0.2s ease-out;
      box-shadow: 0px 4px 8px rgba(38, 38, 38, 0.2);
      top: -4px;
      text-decoration: none;
      background-color: white;
    }
  
    /* .cardMenuPage:before {
      content: "";
      position: absolute;
      z-index: -1;
      top: -16px;
      right: -16px;
      background: #00838d;
      height: 32px;
      width: 32px;
      border-radius: 32px;
      transform: scale(2);
      transform-origin: 50% 50%;
      transition: transform 0.15s ease-out;
    }
   */
    .cardMenuPage:hover:before {
      transform: scale(2.15);
    }

    .testHeaderMenu {
      width: 25%;
      float: left;
      background: red;
      margin-right: 20px
    }


    .float-iconBack{
      position:fixed;
      width:30px;
      height:30px;
      left:20px;
      background-color:white;
      color:black;
      border-radius:50px;
      text-align:center;
      box-shadow: 2px 2px 3px #999;
    }
    
    .my-float-iconBack{
      margin-top:8px;
    }

    .float-iconHeaderPage{
      position:fixed;
      width:50px;
      height:50px;
      right:20px;
      background-image: linear-gradient(315deg, #2a2a72 0%, #009ffd 74%);
      color:white!important;
      border-radius:50px;
      text-align:center;
      box-shadow: 2px 2px 3px #999;
    }
    
    .my-float-iconHeaderPage{
      margin-top:15px;
    }

.menuDropDown {
  cursor: pointer;
}
.menuDropDown:hover {
  .menuDropDownItem {display: block;}
  .menuDropDownItemMobile {display: block;}
}
.menuDropDownItem {
  display: none;
  position: absolute;
  background-color: white;
  padding: 10px 0px 10px 0px !important;
  color: black;
  min-width: 160px;
  border-radius: 8px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 500;
}

.menuDropDownItemMobile {
  display: none;
  position: absolute;
  background-color: #1750F3;
  /* padding: 10px 0px 0px 0px !important; */
  color: black;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 500;
  top: 50px;
  left: -5px;
}

.menuDropDownItemMobile a {
  border-bottom: 0.5px #fff solid;
  text-decoration-line: none !important;
}