* {
  padding: 0;
  margin: 0;
  box-sizing: border-box; }

a {
  text-decoration: none; }

ul, li {
  list-style: none; }

h1, h2, h3, h4, h5, h6 img, p {
  margin: 0; }

body {
  background: #FFF;
  font-family: 'Quicksand', sans-serif; }

input, button, select {
  font-family: 'Quicksand', sans-serif; }
  input:focus, button:focus, select:focus {
    outline: none; }

.wrapper_ktdv {
  background-color: white;
}

.scroll-bar-custom {
  /* Track */
  /* Handle */ }
  .scroll-bar-custom::-webkit-scrollbar {
    width: 8px;
    height: 8px; }
  .scroll-bar-custom::-webkit-scrollbar-track {
    background: transparent; }
  .scroll-bar-custom::-webkit-scrollbar-thumb {
    background: #C3C8CF;
    border-radius: 10px;
    -webkit-backdrop-filter: blur(4px);
            backdrop-filter: blur(4px); }

.flex, .flex-column, .flex-align-center, .flex-center, .tab__footer, .tab__result, .flex-justify-center, .flex-between, .flex-wrap {
  display: -webkit-box;
  display: flex; }

.flex-column {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
          flex-direction: column; }

.flex-align-center, .flex-center, .tab__footer, .tab__result {
  -webkit-box-align: center;
          align-items: center; }

.flex-justify-center, .flex-center, .tab__footer, .tab__result {
  -webkit-box-pack: center;
          justify-content: center; }

.flex-between {
  -webkit-box-pack: justify;
          justify-content: space-between; }

.flex-wrap {
  flex-wrap: wrap; }

.grey-text, .tab__order {
  color: #787878; }

.primary-color {
  color: #FF5520; }

.heading, .light-heading {
  font-size: 34px;
  font-weight: 700;
  text-transform: uppercase;
  line-height: calc(42/34); }
  @media screen and (min-width: 900px) {
    .heading, .light-heading {
      font-size: 30px; } }
  @media screen and (min-width: 1024px) {
    .heading, .light-heading {
      font-size: 38px; } }
  @media screen and (min-width: 1280px) {
    .heading, .light-heading {
      font-size: 45px;
      line-height: calc(58/45); } }
  @media screen and (min-width: 1440px) {
    .heading, .light-heading {
      font-size: 50px;
      line-height: calc(62/50); } }

.light-heading {
  font-weight: 400; }

.large-heading {
  font-size: 60px;
  line-height: 1;
  font-weight: 700; }

.p-sub-small {
  font-size: 12px;
  line-height: calc(15/12); }

.p-small {
  font-size: 16px;
  line-height: calc(20/16); }

.p {
  font-size: 18px;
  line-height: calc(24/22);
  font-weight: 300; }
  @media screen and (min-width: 1024px) {
    .p {
      font-size: 20px; } }
  @media screen and (min-width: 1280px) {
    .p {
      font-size: 22px; } }

.p-medium, .tab__btn {
  font-size: 22px;
  line-height: calc(27/22); }

.p-large {
  font-size: 24px;
  line-height: calc(30/24); }
  @media screen and (min-width: 1280px) {
    .p-large {
      font-size: 28px;
      line-height: calc(35/28); } }

.medium {
  font-weight: 500; }

.container-ktdv {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 20px; }
  @media screen and (min-width: 1280px) {
    .container-ktdv {
      padding: 0 30px; } }
  @media screen and (min-width: 1440px) {
    .container-ktdv {
      padding: 0 80px; } }

.figure {
  position: relative;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat; }
  .figure:after {
    content: '';
    display: block; }

.hero {
  position: relative;
  background: #fff; }
  @media screen and (min-width: 1280px) {
    .hero {
      margin-bottom: 0px; } }
  .hero__figure {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-image: url("../img/hero.svg"); }
    @media screen and (min-width: 768px) {
      .hero__figure {
        background-image: url("../img/hero-desktop.svg"); } }
    .hero__figure:after {
      padding-top: 228.53333%; }
      @media screen and (min-width: 768px) {
        .hero__figure:after {
          padding-top: 133.33333%; } }
      @media screen and (min-width: 900px) {
        .hero__figure:after {
          padding-top: 50.90278%; } }
      @media screen and (min-width: 1024px) {
        .hero__figure:after {
          padding-top: 58.10547%; } }
      @media screen and (min-width: 1440px) {
        .hero__figure:after {
          padding-top: 55.69444%; } }
  .hero__img {
    width: 100%;
    background-image: url("../img/cup-hero.svg"); }
    @media screen and (min-width: 768px) {
      .hero__img {
        background-image: url("../img/cup-hero-desktop.svg"); } }
    .hero__img:after {
      padding-top: 115%; }
      @media screen and (min-width: 768px) {
        .hero__img:after {
          padding-top: 85%; } }
      @media screen and (min-width: 900px) {
        .hero__img:after {
          padding-top: 85.1752%; } }
  .hero__wrapper {
    position: relative;
    z-index: 2; }
  .hero__inner {
    padding-top: 70px;
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
            flex-direction: column-reverse; }
    @media screen and (min-width: 900px) {
      .hero__inner {
        padding-bottom: 70px;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
                flex-direction: row; } }
    @media screen and (min-width: 1024px) {
      .hero__inner {
        padding-top: 110px; } }
    @media screen and (min-width: 1200px) {
      .hero__inner {
        padding-bottom: 40px; } }
    @media screen and (min-width: 1440px) {
      .hero__inner {
        padding-top: 140px; } }
  .hero__left {
    width: calc(100% + 40px);
    margin-left: -20px;
    margin-right: -20px; }
    @media screen and (min-width: 900px) {
      .hero__left {
        width: 45%;
        margin: 0; } }
    @media screen and (min-width: 1024px) {
      .hero__left {
        width: 57.51938%; } }
  .hero__right {
    width: 100%; }
    @media screen and (min-width: 768px) {
      .hero__right {
        max-width: 495px;
        margin: 0 auto;
        text-align: center; } }
    @media screen and (min-width: 900px) {
      .hero__right {
        width: 45%; } }
    @media screen and (min-width: 1024px) {
      .hero__right {
        max-width: 100%;
        width: 39.53488%;
        text-align: left; } }
  .hero__heading {
    color: #fff; }
  .hero__description {
    color: #fff; }
  .hero__btn {
    width: 310px; }
    @media screen and (min-width: 900px) {
      .hero__btn {
        width: 250px; } }
    @media screen and (min-width: 1024px) {
      .hero__btn {
        width: 280px; } }
    @media screen and (min-width: 1280px) {
      .hero__btn {
        width: 310px; } }
    .hero__btn img {
      width: 100%; }

.two-up {
  position: relative;
  z-index: 2; }
  .two-up__inner {
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
            flex-direction: column-reverse; }
    @media screen and (min-width: 900px) {
      .two-up__inner {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
                flex-direction: row;
        -webkit-box-pack: justify;
                justify-content: space-between; } }
  .two-up__col-left {
    width: 100%; }
    @media screen and (min-width: 900px) {
      .two-up__col-left {
        width: 54%; } }
  .two-up__col-right {
    width: 100%; }
    @media screen and (min-width: 900px) {
      .two-up__col-right {
        width: 39.53488%; } }

.carousel-ktdv {
  display: none; }
  @media screen and (min-width: 900px) {
    .carousel-ktdv {
      margin-bottom: 40px;
      display: block; } }
  @media screen and (min-width: 1280px) {
    .carousel-ktdv {
      margin-bottom: 70px; } }
  .carousel__heading {
    font-size: 40px;
    line-height: calc(45/40);
    color: #034D72;
    text-align: center; }
    @media screen and (min-width: 1280px) {
      .carousel__heading {
        font-size: 60px;
        line-height: calc(65/60); } }
  .carousel__description {
    color: #034D72;
    font-weight: 700;
    text-align: center; }
  .carousel-list {
    margin-left: auto;
    width: 75%; }
  .carousel__cell {
    min-width: 45%;
    margin: 0 2%; }
  .carousel-ktdv .flickity-button {
    width: 34px;
    height: 34px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center; }
    .carousel-ktdv .flickity-button svg {
      display: none; }
    .carousel-ktdv .flickity-button.flickity-prev-next-button.next {
      left: calc(-25% + 44px);
      right: auto;
      -webkit-transform: translate(25%, -50%);
              transform: translate(25%, -50%);
      background-image: url("../img/next.png"); }
    .carousel-ktdv .flickity-button.flickity-prev-next-button.previous {
      left: -25%;
      -webkit-transform: translate(25%, -50%);
              transform: translate(25%, -50%);
      background-image: url("../img/previous.png"); }

.three-up {
  margin-left: -20px;
  margin-right: -20px; }
  @media screen and (min-width: 768px) {
    .three-up {
      margin-left: 0;
      margin-right: 0; } }
  .three-up__header {
    text-align: center; }
    .three-up__header img {
      margin-bottom: 20px; }
      @media screen and (min-width: 1280px) {
        .three-up__header img {
          margin-bottom: 30px; } }
  .three-up__list {
    border-radius: 3px;
    overflow: hidden; }
  .three-up__item {
    width: calc(33.33% - 3.5px);
    margin-right: 5px;
    margin-bottom: 5px; }
    .three-up__item:nth-of-type(3n+0) {
      margin-right: 0; }
  .three-up__figure::after {
    padding-top: 100%; }

.title-mobile {
  max-width: 320px;
  margin-left: auto;
  margin-right: auto; }
  @media screen and (min-width: 900px) {
    .title-mobile {
      display: none; } }

.title-desktop {
  display: none;
  max-width: 320px;
  margin-left: auto;
  margin-right: auto; }
  @media screen and (min-width: 900px) {
    .title-desktop {
      display: block; } }
  @media screen and (min-width: 1024px) {
    .title-desktop {
      max-width: 495px; } }

.card {
  margin-left: -20px;
  margin-right: -20px;
  margin-bottom: 25px;
  background-color: #fff;
  border-radius: 25px;
  overflow: hidden;
  box-shadow: 0px 8px 50px rgba(36, 48, 62, 0.2); }
  @media screen and (min-width: 768px) {
    .card {
      margin-left: 0;
      margin-right: 0;
      margin-bottom: 60px; } }
  @media screen and (min-width: 900px) {
    .card.card--hero {
      margin-top: -70px; } }
  @media screen and (min-width: 1024px) {
    .card.card--hero {
      margin-top: -150px; } }
  @media screen and (min-width: 1100px) {
    .card.card--hero {
      margin-top: -185px; } }
  @media screen and (min-width: 1200px) {
    .card.card--hero {
      margin-top: -250px; } }
  @media screen and (min-width: 1280px) {
    .card.card--hero {
      margin-top: -200px; } }
  @media screen and (min-width: 1600px) {
    .card.card--hero {
      margin-top: -220px; } }
  .card.card--hero .card__header {
    height: auto;
    background: none; }
  .card__header {
    height: 80px;
    background: -webkit-gradient(linear, left top, left bottom, from(#04689A), to(#2CA9E2));
    background: linear-gradient(180deg, #04689A 0%, #2CA9E2 100%); }
    .card__header img {
      width: 100%;
      display: block; }
    .card__header.card__header-overall img {
      max-width: 38px; }
    .card__header.card__header--math {
      background: #fff; }
      .card__header.card__header--math .card__heading {
        color: #4AC3BC; }
      .card__header.card__header--math img {
        max-width: 24.5px; }
    .card__header.card__header-vietnamese {
      background: -webkit-gradient(linear, left bottom, left top, color-stop(0.03%, #FFA733), color-stop(100.16%, #FF5520));
      background: linear-gradient(0deg, #FFA733 0.03%, #FF5520 100.16%); }
      .card__header.card__header-vietnamese img {
        max-width: 32px; }
  .card__info {
    padding: 20px; }
    @media screen and (min-width: 1280px) {
      .card__info {
        padding: 20px 30px; } }
  .card__img {
    width: 64px;
    height: 64px;
    margin-right: 20px;
    border-radius: 50%;
    overflow: hidden; }
    @media screen and (min-width: 1280px) {
      .card__img {
        width: 92px;
        height: 92px; } }
    .card__img img {
      width: 100%;
      height: 100%;
      -o-object-fit: cover;
         object-fit: cover; }

.tab__item {
  -webkit-box-flex: 1;
          flex: 1;
  padding: 12px 5px;
  text-align: center;
  color: #838383;
  background: #F8F9FD;
  border-right: 1px solid #fff;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  cursor: pointer; }
  .tab__item:last-child {
    border-right: 0; }
  .tab__item.tab__item--active, .tab__item:hover {
    color: #FF5520;
    background: #fff; }

.tab__content {
  padding: 30px 25px;
  display: none; }
  .tab__content#general {
    display: block; }

.tab__row {
  margin-bottom: 12px; }
  .tab__row span {
    margin-left: 12px; }
    .tab__row span:first-child {
      margin-left: 0; }

.tab__total {
  margin-bottom: 25px;
  color: #FF5520; }

.tab__footer {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
          flex-direction: column;
  margin-top: 30px; }
  @media screen and (min-width: 768px) {
    .tab__footer {
      -webkit-box-orient: horizontal;
      -webkit-box-direction: normal;
              flex-direction: row; } }

.tab__btn {
  margin: 0 5px 10px;
  padding: 10px 30px;
  display: block;
  background-color: #4267B2;
  color: #fff;
  font-weight: 700;
  border: 0;
  border-radius: 60px;
  box-shadow: 0px 4px 20px rgba(66, 103, 178, 0.5);
  text-transform: uppercase;
  opacity: 1;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out; }
  .tab__btn.tab__btn--primary {
    background-color: #FF5520;
    box-shadow: 0px 4px 20px rgba(255, 102, 9, 0.5); }
  .tab__btn:hover {
    opacity: 0.65; }
  .tab__btn img {
    margin-left: 13px;
    max-width: 18px; }

.tab__content-rank {
  padding: 30px 12px 20px;
  display: none; }
  .tab__content-rank#gradeOneOverall, .tab__content-rank#gradeOneVietnamese, .tab__content-rank#gradeOneMath {
    display: block; }

.tab__group {
  max-height: 650px;
  overflow-y: auto; }

.tab__member {
  padding: 10px 10px 12.5px;
  border-bottom: 1px solid #d1d1d1; }
  .tab__member:last-child {
    border-bottom: 0; }

.tab__order {
  width: 20px;
  margin-right: 15px;
  text-align: center; }
  .tab__order img {
    width: 100%; }

.tab__detail {
  -webkit-box-flex: 1;
          flex: 1; }

.tab__avatar {
  width: 42px;
  height: 42px;
  margin-right: 10px;
  border-radius: 50%;
  overflow: hidden; }
  .tab__avatar img {
    width: 100%; }

.tab__result img {
  max-width: 21px;
  margin-left: 5px; }

.block__header {
  margin-bottom: 15px;
  text-align: center; }
  @media screen and (min-width: 768px) {
    .block__header {
      margin-bottom: 30px; } }
  .block__header img {
    width: 100%; }

.block__list {
  margin-bottom: 30px;
  border-bottom: 1px solid #D1D1D1; }

.block__card {
  display: none; }
  .block__card#overall {
    display: block; }

.block__item {
  padding-bottom: 15px;
  border-bottom: 2px solid transparent;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  cursor: pointer; }
  .block__item.block__item--active, .block__item:hover {
    color: #FF5520;
    border-color: #FF5520; }
  .block__item img {
    width: auto;
    max-height: 21px;
    margin-right: 10px; }

.footer {
  position: relative; }
  @media screen and (min-width: 900px) {
    .footer {
      margin-top: -200px; } }
  @media screen and (min-width: 900px) {
    .footer {
      margin-top: -270px; } }
  .footer__inner {
    position: absolute;
    width: 100%;
    left: 0;
    bottom: 0; }
  .footer__figure {
    max-width: 100%;
    min-height: 50px; }
    @media screen and (min-width: 900px) {
      .footer__figure {
        max-width: 100%; } }
    .footer__figure:after {
      padding-top: 15.41667%; }
    .footer__figure.bg-moblie:after {
      padding-top: 46.66667%; }
  .footer__logo {
    width: 180px;
    height: 87px;
    margin: 0 auto;
    background-size: contain;
    background-repeat: no-repeat; }
    @media screen and (min-width: 900px) {
      .footer__logo {
        width: 230px;
        height: 87px; } }
    @media screen and (min-width: 1024px) {
      .footer__logo {
        -webkit-transform: translate(-20vw, 100px);
                transform: translate(-20vw, 100px); } }
  .footer__bg {
    max-width: 100%;
    background-position: top;
    min-height: 305px; }
    @media screen and (min-width: 900px) {
      .footer__bg {
        max-width: 100%; } }
    .footer__bg:after {
      padding-top: 34.72222%; }
    .footer__bg.bg-moblie:after {
      padding-top: 61%; }

.bg-desktop {
  display: none; }
  @media screen and (min-width: 768px) {
    .bg-desktop {
      display: block; } }

@media screen and (min-width: 768px) {
  .bg-mobile {
    display: none; } }

.btn-transparent {
  border: none;
  background: transparent; }

.text-center {
  text-align: center; }

.mb-25 {
  margin-bottom: 25px; }

.mb-15 {
  margin-bottom: 15px; }

.card__heading {
  margin-left: 10px;
  font-weight: bold;
  font-size: 32px;
  line-height: 40px;
  color: #FFFFFF;
  text-transform: uppercase;
  text-shadow: 0px 2px 1px rgba(0, 0, 0, 0.25); }

#header_notification_bar {
  z-index: 1000;
}