@charset "UTF-8";
/*primary-color: #1667a0*/
/*primary-color: #009970*/
/****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 Iphone Plus****/
/****Màn hình điện thoại Iphone****/
/****Màn hình điện thoại loại bé****/
/*primary-color: #1667a0*/
/*primary-color: #009970*/
/*primary-color: #1667a0*/
/*primary-color: #009970*/
@font-face {
  font-family: 'Inter';
  src: url("../../fonts/Inter/Inter-VariableFont_slnt,wght.ttf") format("truetype"); }

/*@font-face {
    font-family: 'Roboto';
    src: url('../../fonts/Roboto/Roboto-Black.ttf') format('truetype'), url('../../fonts/Roboto/Roboto-BlackItalic.ttf') format('truetype'), url('../../fonts/Roboto/Roboto-Bold.ttf') format('truetype'), url('../../fonts/Roboto/Roboto-BoldItalic.ttf') format('truetype'), url('../../fonts/Roboto/Roboto-Italic.ttf') format('truetype'), url('../../fonts/Roboto/Roboto-Light.ttf') format('truetype'), url('../../fonts/Roboto/Roboto-LightItalic.ttf') format('truetype'), url('../../fonts/Roboto/Roboto-Medium.ttf') format('truetype'), url('../../fonts/Roboto/Roboto-MediumItalic.ttf') format('truetype'), url('../../fonts/Roboto/Roboto-Regular.ttf') format('truetype'), url('../../fonts/Roboto/Roboto-Thin.ttf') format('truetype'), url('../../fonts/Roboto/Roboto-ThinItalic.ttf') format('truetype');
}*/
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  list-style: none;
  text-decoration: none; }

a:hover {
  text-decoration: none; }

html {
  color: #333;
  font-family: 'Inter', 'Roboto',  sans-serif;
  font-size: 16px; }

/*pastel: #5ebaad*/
/*Share*/
.w-container-fluid {
  max-width: 1680px;
  margin: auto; }

.w-container {
  max-width: 1200px;
  margin: auto; }

.w-flex {
  display: flex; }

/* Header */
header {
  position: fixed;
  top: 0;
  border-bottom: solid 2px #ccc;
  background: #fff;
  width: 100%;
  z-index: 10; }
  @media only screen and (max-width: 992px) {
    header {
      padding: 6px 0; } }
  header .row {
    justify-content: space-between;
    margin: 0; }

.pagebody {
  /*min-height: 100vh;*/
  margin-top: 55px; }

#nav-logo {
  display: flex;
  align-self: center; }
  #nav-logo img {
    width: 45px;
    height: 45px; }
  #nav-logo .logo-title {
    align-self: center;
    margin-left: 10px;
    height: 100%; }
    #nav-logo .logo-title h1, #nav-logo .logo-title p {
      font-size: 0.85rem;
      text-transform: uppercase;
      margin: 0; }
    #nav-logo .logo-title h1 {
      color: #2bc27d; }

#nav-menu-lg ul {
  padding-top: 15px;
  display: flex; }
  #nav-menu-lg ul li.active .dropdown-toggle, #nav-menu-lg ul li.active > a {
    color: #5EBAAD; }
  #nav-menu-lg ul li a {
    color: #333;
    font-weight: 600;
    padding: 10px 15px;
    background: none; }
    #nav-menu-lg ul li a:hover {
      color: #5EBAAD; }
    #nav-menu-lg ul li a.dropdown-item {
      border-bottom: solid 1px #e4e4e4;
      font-size: 14px; }
      #nav-menu-lg ul li a.dropdown-item.active {
        color: #5EBAAD; }
    #nav-menu-lg ul li a i {
      margin-right: 5px;
      width: 15px; }
  #nav-menu-lg ul li .dropdown-menu {
    padding: 20px; }

#nav-menu-lg .dropdown-toggle::after {
  position: inherit; }

#nav-login-lg {
  padding: 10px 20px; }
  #nav-login-lg .sign-in {
    right: 60px;
    position: absolute;
    font-weight: 400;
    font-size: 14px;
    width: 100px;
    height: 40px;
    border: 1px solid #2bc27d;
    border-radius: 7px;
    color: #2bc27d;
    background-color: #ffffff; }
  #nav-login-lg .dropdown-toggle {
    border: 1px solid #2bc27d;
    border-radius: 7px;
    color: #2bc27d; }

#nav-sm {
  height: calc(100vh - 45px);
  width: 100%;
  position: absolute;
  top: 60px;
  right: 0;
  visibility: hidden;
  transition: all .2s ease-in-out; }

#overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  background: #000;
  opacity: 0.5; }

#nav-menu-sm {
  background: #fff;
  z-index: 10;
  position: absolute;
  height: 100%;
  width: 70%;
  right: 0;
  padding: 20px;
  overflow-y: scroll; }
  #nav-menu-sm li {
    padding: 15px; }
    #nav-menu-sm li.active a.dropdown-toggle {
      color: #5EBAAD; }
    #nav-menu-sm li a {
      color: #333;
      font-weight: 600;
      text-transform: uppercase;
      background: none; }
      #nav-menu-sm li a:hover {
        color: #5EBAAD; }
      #nav-menu-sm li a i {
        margin-right: 5px;
        width: 15px; }
    #nav-menu-sm li .dropdown.show {
      z-index: 10; }
    #nav-menu-sm li .dropdown-toggle::after {
      position: absolute;
      right: 10px;
      top: 50%;
      transform: translateY(-50%); }
    #nav-menu-sm li .dropdown-toggle {
      position: relative;
      width: 100%;
      display: inline-block; }
  #nav-menu-sm .dropdown-menu {
    position: static !important;
    border: none;
    border-top: solid 1px #ddd;
    margin-bottom: 30px;
    margin-top: -10px; }
  #nav-menu-sm a.dropdown-item {
    padding: 10px 0 10px 25px;
    border-bottom: dotted 1px #ccc; }
    #nav-menu-sm a.dropdown-item.active {
      color: #5EBAAD; }

#nav-toggle {
  display: none;
  text-align: center;
  padding: 10px;
  font-size: 25px;
  cursor: pointer; }

#nav-toggle-button {
  display: none;
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  cursor: pointer;
  user-select: none; }
  #nav-toggle-button span {
    height: 4px;
    width: 35px;
    border-radius: 2px;
    background-color: #333;
    position: relative;
    display: block;
    transition: all .2s ease-in-out; }
    #nav-toggle-button span:before {
      top: -10px;
      visibility: visible; }
    #nav-toggle-button span:after {
      top: 10px; }
    #nav-toggle-button span:before, #nav-toggle-button span:after {
      height: 4px;
      width: 35px;
      border-radius: 2px;
      background-color: #333;
      position: absolute;
      content: "";
      transition: all .2s ease-in-out; }
  #nav-toggle-button:hover span, #nav-toggle-button:hover span:before, #nav-toggle-button:hover span:after {
    background: #333332; }

input[type=checkbox] {
  /*display: none;*/ }

input[type=checkbox]:checked ~ #nav-sm {
  visibility: visible; }

input[type=checkbox]:checked ~ #nav-toggle-button:hover span, input[type=checkbox]:checked ~ #nav-toggle-button span {
  background: transparent; }

input[type=checkbox]:checked ~ #nav-toggle-button span:before {
  transform: rotate(45deg) translate(7px, 7px);
  opacity: 1; }

input[type=checkbox]:checked ~ #nav-toggle-button span:after {
  transform: rotate(-45deg) translate(7px, -7px); }

@media screen and (max-width: 1260px) {
  .logo-title {
    display: none; } }

@media screen and (max-width: 992px) {
  #nav-toggle-button {
    display: block; }
  #nav-menu-lg, #nav-login-lg {
    display: none; }
  #nav-sm {
    display: block; } }