@charset "UTF-8";
/* start css Homepage aoi */
.detail-homepage-content {
  padding: 80px;
  position: absolute;
  left: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  top: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 16px; }
  .detail-homepage-content .title {
    color: #ffffff;
    font-size: 40px;
    font-weight: 400;
    font-family: var(--font-family-heading); }
    @media (max-width: 767.98px) {
      .detail-homepage-content .title {
        font-size: 32px; } }
  .detail-homepage-content .content {
    color: #ffffff;
    font-size: 24px;
    font-weight: 500; }
    @media (max-width: 991.98px) {
      .detail-homepage-content .content {
        font-size: 14px;
        margin-top: 8px;
        margin-bottom: 16px; } }
  @media (max-width: 767.98px) {
    .detail-homepage-content {
      padding: 40px; }
      .detail-homepage-content .title {
        font-size: 32px; }
      .detail-homepage-content .content {
        font-size: 14px; } }

.home-page-slider .slide--video {
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  overflow: hidden; }
  .home-page-slider .slide--video video {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    min-width: 100%;
    min-height: 100%;
    transform: translate(-50%, -50%);
    object-fit: cover; }

.home-page-slider .swiper:not(.swiper-initialized) {
  display: flex;
  display: -ms-flex;
  display: -webkit-flex;
  overflow: hidden; }

.home-page-slider .swiper:not(.swiper-initialized) .slider-item {
  -webkit-flex: 0 0 100%;
  flex: 0 0 100%; }

.home-page-slider .swiper .slider-item {
  position: relative;
  width: 100%;
  overflow: hidden;
  height: 100vh; }
  .home-page-slider .swiper .slider-item video, .home-page-slider .swiper .slider-item img {
    height: 100vh;
    width: 100%;
    object-fit: cover; }
  @media (max-width: 767.98px) {
    .home-page-slider .swiper .slider-item {
      height: auto; }
      .home-page-slider .swiper .slider-item video, .home-page-slider .swiper .slider-item img {
        height: auto; } }

.home-page-slider .swiper .section-slider-swiper-pagination {
  position: absolute;
  bottom: 40px;
  text-align: center;
  left: 0;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  justify-content: center;
  z-index: 99999; }
  .home-page-slider .swiper .section-slider-swiper-pagination .swiper-pagination-bullet {
    display: flex;
    display: -ms-flex;
    display: -webkit-flex;
    width: 8px;
    height: 8px;
    border-radius: 9999px;
    background: #333333;
    cursor: pointer;
    opacity: 0.4;
    transition: all 0.3s ease; }
    .home-page-slider .swiper .section-slider-swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
      border-radius: 9999px;
      width: 48px;
      opacity: 1; }

#home-page-slider {
  line-height: 0; }

.home-page-video {
  line-height: 0; }
  .home-page-video .frame-video {
    position: relative;
    overflow: hidden;
    /* @media (max-width: 767.98px){
      height: 0;
      padding-bottom: 100%;
    }*/
    /*&:after{
      content: '';
      background: linear-gradient(0deg, rgba(51, 51, 51, 0.15) 0%, rgba(51, 51, 51, 0.15) 100%);
      z-index: 1;
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
    }*/ }
    .home-page-video .frame-video video {
      width: 100%; }

.home-page-category-grid {
  display: flex;
  flex-direction: column;
  /* mặc định */
  /* item lớn */
  /* =========================
     ROW 1
  ========================= */
  /* nếu thiếu 1 trong 2 → item còn lại full */
  /* =========================
     ROW 2
  ========================= */
  /* default: 3 | 4 | 5(2x) đã OK */
  /* nếu thiếu 5 → 3-4 chia đều */
  /* nếu thiếu 1 trong 3 hoặc 4 → chia đều */
  /* =========================
     ROW 3
  ========================= */
  /* default: 6(2x) | 7 | 8 */
  /* nếu thiếu bất kỳ item nào → chia đều */ }
  .home-page-category-grid .category-row {
    display: flex;
    flex-wrap: wrap; }
  .home-page-category-grid .item {
    flex: 1;
    background: #eee;
    height: 405px;
    position: relative;
    overflow: hidden; }
    .home-page-category-grid .item img {
      object-fit: cover;
      width: 100%;
      height: 100%; }
    .home-page-category-grid .item .content {
      position: absolute;
      bottom: 0;
      left: 0;
      padding: 48px;
      color: #fff; }
      @media (max-width: 767.98px) {
        .home-page-category-grid .item .content {
          padding: 40px; } }
      .home-page-category-grid .item .content h3 {
        font-size: 32px;
        margin: 0 0 16px;
        color: #ffffff;
        font-family: var(--font-family-heading); }
      .home-page-category-grid .item .content p {
        font-size: 14px;
        font-weight: 500;
        margin-bottom: 0; }
    @media (max-width: 767.98px) {
      .home-page-category-grid .item {
        height: 490px;
        flex: 0 0 100%;
        max-width: 100%; }
        .home-page-category-grid .item .content {
          padding: 40px; } }
  .home-page-category-grid .item.big {
    flex: 2; }
    @media (max-width: 767.98px) {
      .home-page-category-grid .item.big {
        flex: 0 0 100%;
        max-width: 100%; } }
  .home-page-category-grid .row-1 .item {
    height: 100vh; }
    .home-page-category-grid .row-1 .item img {
      object-fit: cover; }
    .home-page-category-grid .row-1 .item .content {
      padding: 64px 80px; }
    @media (max-width: 767.98px) {
      .home-page-category-grid .row-1 .item {
        height: 490px; }
        .home-page-category-grid .row-1 .item .content {
          padding: 40px; } }
  .home-page-category-grid .row-1.no-1 .item,
  .home-page-category-grid .row-1.no-2 .item {
    flex: 1; }
  .home-page-category-grid .row-2.no-5 .item {
    flex: 1; }
  .home-page-category-grid .row-2.no-3 .item,
  .home-page-category-grid .row-2.no-4 .item {
    flex: 1; }
  .home-page-category-grid .row-3.no-6 .item,
  .home-page-category-grid .row-3.no-7 .item,
  .home-page-category-grid .row-3.no-8 .item {
    flex: 1; }

.home-page-banner .item-banner {
  position: relative; }
  .home-page-banner .item-banner img {
    width: 100%;
    display: block;
    height: 100vh;
    object-fit: cover; }
  .home-page-banner .item-banner:after {
    content: '';
    background: linear-gradient(0deg, rgba(51, 51, 51, 0.15) 0%, rgba(51, 51, 51, 0.15) 100%);
    z-index: 1;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0; }
  @media (max-width: 767.98px) {
    .home-page-banner .item-banner {
      height: 0;
      padding-bottom: 100%; }
      .home-page-banner .item-banner img {
        width: 100%;
        height: 105%;
        position: absolute; } }

.home-page-customer {
  background: #e4eff7;
  padding: 64px 0; }
  @media (max-width: 767.98px) {
    .home-page-customer {
      padding: 40px 0; } }
  .home-page-customer .heading {
    margin-bottom: 40px; }
    .home-page-customer .heading h2 {
      font-size: 40px;
      font-weight: 400;
      margin-bottom: 16px;
      color: #333;
      line-height: 48px; }
      @media (max-width: 767.98px) {
        .home-page-customer .heading h2 {
          font-size: 32px; } }
    .home-page-customer .heading p {
      color: #333;
      font-size: 24px;
      font-weight: 500;
      line-height: 32px;
      margin-bottom: 0; }
      @media (max-width: 767.98px) {
        .home-page-customer .heading p {
          font-size: 14px; } }
  .home-page-customer .story-slider-wrap {
    position: relative;
    width: 100%; }
  .home-page-customer .story-slider {
    display: block; }
    .home-page-customer .story-slider .item {
      padding: 0px;
      position: relative;
      border-radius: 8px;
      overflow: hidden; }
      .home-page-customer .story-slider .item img {
        width: 100%;
        display: block; }
      .home-page-customer .story-slider .item .overlay {
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: flex-end;
        justify-content: flex-start;
        padding: 0;
        background: linear-gradient(181deg, rgba(51, 51, 51, 0) 50.16%, rgba(51, 51, 51, 0.7) 99.25%);
        opacity: 0;
        transition: all 0.3s;
        padding: 16px 0; }
        .home-page-customer .story-slider .item .overlay span {
          color: #fff;
          font-size: 24px;
          font-style: normal;
          font-weight: 400;
          line-height: 32px;
          letter-spacing: -0.2px;
          padding: 8px 24px;
          font-family: var(--font-family-heading); }
          @media (max-width: 767.98px) {
            .home-page-customer .story-slider .item .overlay span {
              font-size: 18px; } }
        @media (max-width: 991.98px) {
          .home-page-customer .story-slider .item .overlay {
            opacity: 1; } }
      .home-page-customer .story-slider .item:hover .overlay {
        opacity: 1; }
  .home-page-customer .bottom-control {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 40px;
    width: 100%; }
  .home-page-customer .progress {
    flex: 1;
    height: 2px;
    background: #F9F9F9;
    border-radius: 2px;
    overflow: hidden;
    margin-top: 0; }
  .home-page-customer .nav {
    position: static;
    display: flex;
    gap: 8px; }
    .home-page-customer .nav button {
      width: 40px;
      height: 40px;
      border: none;
      background: #fff;
      cursor: pointer; }
      @media (max-width: 767.98px) {
        .home-page-customer .nav button {
          width: 32px;
          height: 32px; } }

/* end css Homepage aoi */