@charset "UTF-8";
/*----------------------------------------------------------------------------
# Short video - CSS rieng, chi load o 2 trang: Category/ShortVideo + Detail/ShortVideo
# Gom: Swiper 11.1.4 core (MIT) + layout trang danh sach + trang chi tiet
----------------------------------------------------------------------------*/

/*---------- Swiper 11.1.4 core - MIT License - https://swiperjs.com ----------*/
:root {
  --swiper-theme-color: #007aff;
  /*
  --swiper-preloader-color: var(--swiper-theme-color);
  --swiper-wrapper-transition-timing-function: initial;
  */
}

:host {
  position: relative;
  display: block;
  margin-left: auto;
  margin-right: auto;
  z-index: 1;
}

.swiper {
  margin-left: auto;
  margin-right: auto;
  position: relative;
  overflow: hidden;
  list-style: none;
  padding: 0;
  /* Fix of Webkit flickering */
  z-index: 1;
  display: block;
}

.swiper-vertical > .swiper-wrapper {
  flex-direction: column;
}

.swiper-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 1;
  display: flex;
  transition-property: transform;
  transition-timing-function: var(--swiper-wrapper-transition-timing-function, initial);
  box-sizing: content-box;
}

.swiper-android .swiper-slide,
.swiper-ios .swiper-slide,
.swiper-wrapper {
  transform: translate3d(0px, 0, 0);
}

.swiper-horizontal {
  touch-action: pan-y;
}

.swiper-vertical {
  touch-action: pan-x;
}

.swiper-slide {
  flex-shrink: 0;
  width: 100%;
  height: 100%;
  position: relative;
  transition-property: transform;
  display: block;
}

.swiper-slide-invisible-blank {
  visibility: hidden;
}

/* Auto Height */
.swiper-autoheight,
.swiper-autoheight .swiper-slide {
  height: auto;
}

.swiper-autoheight .swiper-wrapper {
  align-items: flex-start;
  transition-property: transform, height;
}

.swiper-backface-hidden .swiper-slide {
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* 3D Effects */
.swiper-3d.swiper-css-mode .swiper-wrapper {
  perspective: 1200px;
}

.swiper-3d .swiper-wrapper {
  transform-style: preserve-3d;
}

.swiper-3d {
  perspective: 1200px;
}

.swiper-3d .swiper-slide,
.swiper-3d .swiper-cube-shadow {
  transform-style: preserve-3d;
}

/* CSS Mode */
.swiper-css-mode > .swiper-wrapper {
  overflow: auto;
  scrollbar-width: none;
  /* For Firefox */
  -ms-overflow-style: none;
  /* For Internet Explorer and Edge */
}

.swiper-css-mode > .swiper-wrapper::-webkit-scrollbar {
  display: none;
}

.swiper-css-mode > .swiper-wrapper > .swiper-slide {
  scroll-snap-align: start start;
}

.swiper-css-mode.swiper-horizontal > .swiper-wrapper {
  scroll-snap-type: x mandatory;
}

.swiper-css-mode.swiper-vertical > .swiper-wrapper {
  scroll-snap-type: y mandatory;
}

.swiper-css-mode.swiper-free-mode > .swiper-wrapper {
  scroll-snap-type: none;
}

.swiper-css-mode.swiper-free-mode > .swiper-wrapper > .swiper-slide {
  scroll-snap-align: none;
}

.swiper-css-mode.swiper-centered > .swiper-wrapper::before {
  content: "";
  flex-shrink: 0;
  order: 9999;
}

.swiper-css-mode.swiper-centered > .swiper-wrapper > .swiper-slide {
  scroll-snap-align: center center;
  scroll-snap-stop: always;
}

.swiper-css-mode.swiper-centered.swiper-horizontal > .swiper-wrapper > .swiper-slide:first-child {
  margin-inline-start: var(--swiper-centered-offset-before);
}

.swiper-css-mode.swiper-centered.swiper-horizontal > .swiper-wrapper::before {
  height: 100%;
  min-height: 1px;
  width: var(--swiper-centered-offset-after);
}

.swiper-css-mode.swiper-centered.swiper-vertical > .swiper-wrapper > .swiper-slide:first-child {
  margin-block-start: var(--swiper-centered-offset-before);
}

.swiper-css-mode.swiper-centered.swiper-vertical > .swiper-wrapper::before {
  width: 100%;
  min-width: 1px;
  height: var(--swiper-centered-offset-after);
}

/* Slide styles start */
/* 3D Shadows */
.swiper-3d .swiper-slide-shadow,
.swiper-3d .swiper-slide-shadow-left,
.swiper-3d .swiper-slide-shadow-right,
.swiper-3d .swiper-slide-shadow-top,
.swiper-3d .swiper-slide-shadow-bottom,
.swiper-3d .swiper-slide-shadow,
.swiper-3d .swiper-slide-shadow-left,
.swiper-3d .swiper-slide-shadow-right,
.swiper-3d .swiper-slide-shadow-top,
.swiper-3d .swiper-slide-shadow-bottom {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 10;
}

.swiper-3d .swiper-slide-shadow {
  background: rgba(0, 0, 0, 0.15);
}

.swiper-3d .swiper-slide-shadow-left {
  background-image: linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}

.swiper-3d .swiper-slide-shadow-right {
  background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}

.swiper-3d .swiper-slide-shadow-top {
  background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}

.swiper-3d .swiper-slide-shadow-bottom {
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}

.swiper-lazy-preloader {
  width: 42px;
  height: 42px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -21px;
  margin-top: -21px;
  z-index: 10;
  transform-origin: 50%;
  box-sizing: border-box;
  border: 4px solid var(--swiper-preloader-color, var(--swiper-theme-color));
  border-radius: 50%;
  border-top-color: transparent;
}

.swiper:not(.swiper-watch-progress) .swiper-lazy-preloader,
.swiper-watch-progress .swiper-slide-visible .swiper-lazy-preloader {
  animation: swiper-preloader-spin 1s infinite linear;
}

.swiper-lazy-preloader-white {
  --swiper-preloader-color: #fff;
}

.swiper-lazy-preloader-black {
  --swiper-preloader-color: #000;
}

@keyframes swiper-preloader-spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
/* Slide styles end */
.swiper-virtual .swiper-slide {
  -webkit-backface-visibility: hidden;
  transform: translateZ(0);
}

.swiper-virtual.swiper-css-mode .swiper-wrapper::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
}

.swiper-virtual.swiper-css-mode.swiper-horizontal .swiper-wrapper::after {
  height: 1px;
  width: var(--swiper-virtual-size);
}

.swiper-virtual.swiper-css-mode.swiper-vertical .swiper-wrapper::after {
  width: 1px;
  height: var(--swiper-virtual-size);
}

/*---------- end Swiper core ----------*/

/*---------- icons bo sung cho short video ----------*/
.icon24-share-white {
  background-image: url("../images/icons/icon24-share-white.svg");
}

.icon24-comment-white {
  background-image: url("../images/icons/icon24-comment-white.svg");
}

.icon24-close-gray {
  background-image: url("../images/icons/icon24-close-gray.svg");
}

/*---------- news short video css ----------*/
.c-template-grid.is-short-video .b-grid {
  min-height: 0;
}
.c-template-grid.is-short-video .b-grid .b-grid__img a {
  padding-top: 177.5510204082%;
}

@media (min-width: 768px) {
  .c-template-grid.is-short-video.is-border > ul > li {
    border-bottom: none;
    margin-bottom: 0;
  }
  .c-template-grid.is-short-video.is-border > ul > li .b-grid {
    padding-bottom: 20px;
    border-bottom: 1px solid #EBEBEB;
    height: 100%;
  }
}
@media (min-width: 992px) {
  .c-template-grid.is-short-video .b-grid .b-grid__title {
    font-size: 16px;
  }
  .c-template-grid.is-short-video > ul > li {
    padding-bottom: 30px;
  }
  .c-template-grid.is-short-video > ul > li:last-child {
    padding-bottom: 30px;
  }
}
/*---------- end news short video css ----------*/
/*---------- short video detail css ----------*/
.c-theme-short-video {
  background-color: #27303e;
  overflow: hidden;
}
.c-theme-short-video .l-footer {
  display: none;
}
.c-theme-short-video .c-powered {
  display: none;
}

.c-short-video-detail-frame {
  height: 100vh;
  height: calc(var(--vh, 1vh) * 100);
  height: 100dvh; /* trinh duyet moi: khong nhay khi thanh dia chi mobile thu/hien */
}

.c-short-video-detail-container {
  margin-left: auto;
  margin-right: auto;
  height: 100%;
}

.c-short-video-detail-box {
  position: relative;
  height: 100%;
  max-height: 100%;
}
.c-short-video-detail-box__frame {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  transition: all 0.2s ease;
}
.c-short-video-detail-box__frame:before {
  content: "";
  position: absolute;
  z-index: 3;
  bottom: 0;
  left: 0;
  right: 0;
  height: 120px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0)); /* Firefox 3.6+ */ /* IE 10 */ /* Opera 11.10+ */
  background: -o-linear-gradient(to top, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0));
}
.c-short-video-detail-box__frame iframe {
  width: 100%;
  height: 100%;
}
.c-short-video-detail-box__frame video {
  width: 100%;
  height: 100%;
  transition: all 0.2s ease;
}
.c-short-video-detail-box__frame > img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
  transition: all 0.2s ease;
}
.c-short-video-detail-box__frame:has(> img) {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.c-short-video-intro {
  z-index: 50;
  position: absolute;
  bottom: 20px;
  left: 15px;
  right: 70px;
}
.c-short-video-intro__cat {
  margin-bottom: 5px;
}
.c-short-video-intro__cat a {
  text-decoration: none;
  font-size: 14px;
  color: #EBEBEB;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.4);
}
.c-short-video-intro__title {
  margin-bottom: 0;
  line-height: 1.3;
  font-size: 18px;
  color: #fff;
  font-family: "IBM Plex Serif", Arial, Helvetica, sans-serif;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.4);
  font-weight: 600;
}

.c-short-video-share {
  position: absolute;
  z-index: 100;
  right: 15px;
  bottom: 15px;
}
.c-short-video-share > ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.c-short-video-share > ul > li {
  padding-bottom: 12px;
}
.c-short-video-share > ul > li:last-child {
  padding-bottom: 0;
}
.c-short-video-share > ul > li > a {
  display: flex;
  text-decoration: none;
  color: #fff !important;
  font-size: 11px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.c-short-video-share > ul > li > a .c-short-video-share__icon {
  width: 40px;
  height: 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.c-short-video-share > ul > li > a .c-short-video-share__text {
  line-height: 1.3;
}

.c-short-video-next {
  display: none;
  position: absolute;
  z-index: 2;
  top: calc(100% + 15px);
  left: 0;
  right: 0;
}
.c-short-video-next figure {
  margin-bottom: 0;
}
.c-short-video-next img {
  width: 100%;
  height: auto;
  -o-object-fit: cover;
     object-fit: cover;
}

.c-smart-arrow {
  position: fixed;
  z-index: 200;
  top: 50%;
  right: 15px;
  margin-top: -48px;
  display: none;
}
.c-smart-arrow .c-smart-arrow__btn {
  width: 40px;
  height: 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  margin-bottom: 16px;
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
}
.c-smart-arrow .c-smart-arrow__btn:last-child {
  margin-bottom: 0;
}
.c-smart-arrow .c-smart-arrow__btn .icon24-left-white {
  background-image: url("../images/icons/icon24-left-white.svg");
  transform: rotate(90deg);
}
.c-smart-arrow .c-smart-arrow__btn .icon24-right-white {
  background-image: url("../images/icons/icon24-right-white.svg");
  transform: rotate(90deg);
}
.c-smart-arrow .c-smart-arrow__btn.swiper-button-disabled {
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
  filter: alpha(opacity=30);
  -moz-opacity: 0.3;
  -khtml-opacity: 0.3;
  opacity: 0.3;
}

.c-short-video-comment {
  position: absolute;
  z-index: 300;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #fff;
  display: none;
}
.c-short-video-comment.active {
  display: block;
}
.c-short-video-comment__title {
  padding: 12px 15px;
  text-align: center;
  line-height: 1.3;
  font-weight: 700;
  font-size: 15px;
  border-bottom: 1px solid #EBEBEB;
}
.c-short-video-comment__close {
  position: absolute;
  z-index: 2;
  top: 10px;
  right: 5px;
  cursor: pointer;
}
.c-short-video-comment__content {
  padding: 15px;
  max-height: 50vh;
  max-height: 50dvh;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.c-short-video-comment__content .c-comments {
  margin-bottom: 0;
}

.c-short-video-fit {
  width: 100%;
  height: 100%;
  margin-left: auto;
  margin-right: auto;
  position: relative;
}
.c-short-video-fit .swiper {
  height: 100%;
}

.swiper-slide.swiper-slide-active .c-short-video-detail-box__frame {
  cursor: pointer;
}
.swiper-slide.swiper-slide-active .c-short-video-detail-box__frame > img {
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
  -moz-opacity: 0;
  -khtml-opacity: 0;
  opacity: 0;
}

body.video-pause .swiper-slide.swiper-slide-active .c-short-video-detail-box__frame:after {
  content: "";
  z-index: 4;
  width: 48px;
  height: 48px;
  background-image: url("../images/icons/icon36-play.svg");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -24px;
  margin-left: -24px;
}

.touch-slide .swiper-slide.swiper-slide-active .c-short-video-detail-box__frame > img {
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  filter: alpha(opacity=100);
  -moz-opacity: 1;
  -khtml-opacity: 1;
  opacity: 1;
}
.touch-slide .c-short-video-show .c-short-video-detail-box__frame video,
.touch-slide .c-short-video-show .c-short-video-detail-box__frame iframe {
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
  -moz-opacity: 0;
  -khtml-opacity: 0;
  opacity: 0;
}

.c-short-video-show {
  position: relative;
}
.c-short-video-show .c-short-video-detail-box {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100vh;
  height: calc(var(--vh, 1vh) * 100);
  height: 100dvh;
  max-height: none;
}

@media (min-width: 768px) {
  .c-short-video-detail-frame {
    height: 100vh;
    padding-top: 10px;
    padding-bottom: 10px;
  }
  .c-short-video-detail-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .c-short-video-detail-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .c-short-video-detail-box__frame {
    position: static;
    overflow: hidden;
    height: 100%;
    border-radius: 8px;
  }
  .c-short-video-detail-box__frame:before {
    border-radius: 0 0 8px 8px;
  }
  .c-short-video-detail-box__frame video, .c-short-video-detail-box__frame iframe {
    width: auto;
    max-width: 100%;
  }
  .c-short-video-detail-box__frame > img {
    -o-object-fit: cover;
       object-fit: cover;
  }
  .c-short-video-fit {
    width: -moz-fit-content;
    width: fit-content;
  }
  .c-short-video-fit .swiper {
    overflow: visible !important;
  }
  .c-short-video-show {
    width: 100%;
  }
  .c-short-video-show .c-short-video-detail-box {
    height: calc(100vh - 20px);
  }
  .c-short-video-show .c-short-video-detail-box__frame:before {
    display: none;
  }
}
@media (min-width: 992px) {
  .c-short-video-detail-frame {
    height: calc(100vh - 52px);
    padding-top: 40px;
    padding-bottom: 40px;
  }
  .c-theme-short-video .c-header-sticky.is-mobile {
    top: 0;
    z-index: 200;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    -moz-opacity: 1;
    -khtml-opacity: 1;
    opacity: 1;
  }
  .c-short-video-share {
    right: -60px;
  }
  .c-short-video-share > ul > li > a .c-short-video-share__icon {
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
  }
  .c-short-video-share > ul > li > a .c-short-video-share__text {
    padding-top: 5px;
  }
  .c-short-video-next {
    display: block;
    overflow: hidden;
    border-radius: 8px;
  }
  .c-smart-arrow {
    display: block;
  }
  .c-short-video-comment {
    border-radius: 0 0 8px 8px;
  }
  .c-short-video-show .c-short-video-detail-box {
    height: calc(100vh - 132px);
  }
}
@media (max-width: 991px) {
  .c-theme-short-video .l-nav {
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0)); /* Firefox 3.6+ */ /* IE 10 */ /* Opera 11.10+ */
    background: -o-linear-gradient(to bottom, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0));
  }
  .c-theme-short-video .l-nav.is-small {
    position: fixed;
    z-index: 100;
    top: 0;
    left: 0;
    right: 0;
  }
  .c-theme-short-video .l-nav.is-small .c-menu-expand {
    background-image: url("../images/icons/icon24-menu-white.svg");
    border-color: #fff;
  }
  .c-theme-short-video .l-nav.is-small .c-nav-inner {
    background: transparent;
  }
  .c-theme-short-video .l-nav.is-small .c-header {
    background-image: none;
  }
}
/*---------- player mp4 / youtube ----------*/
.c-short-video-show .c-short-video-detail-box__frame > .is-player-off {
  display: none;
}

/* kich thuoc iframe da khai bao o block tren + media query desktop, o day chi bo vien */
.c-short-video-detail-box__frame > iframe {
  border: 0;
}

/*---------- gradient day khung khong duoc chan chuot/cham ----------*/
/*
  .swiper-wrapper co z-index:1 + transform nen tao stacking context rieng: moi thu ben
  trong slide, ke ca .c-short-video-share (z-index 100), deu bi nhot o muc 1.
  Trong khi :before cua khung video co z-index 3 -> no nam TREN toan bo swiper va nuot
  chuot o dai 120px sat day, dung cho nut chia se va nut loa. Nut binh luan o cao hon
  120px nen thoat. Desktop khong dinh vi rule ben duoi da display:none gradient nay.
  Gradient chi de trang tri -> cho no trong suot voi con tro, khung van nhan cham
  play/pause binh thuong vi pointer-events chi dat tren pseudo-element.
*/
.c-short-video-detail-box__frame:before {
  pointer-events: none;
}

/* ca lop video la lop trang tri, moi tuong tac deu o slide ben tren */
.c-short-video-show {
  pointer-events: none;
}

/*---------- vung cham tren mobile ----------*/
/* chua vach an toan cua may co home indicator, giu nguyen khoang cach thiet ke */
@media (max-width: 991px) {
  .c-short-video-share {
    bottom: calc(15px + env(safe-area-inset-bottom, 0px));
  }
  .c-short-video-intro {
    bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  }
}

.c-short-video-share > ul > li > a {
  cursor: pointer;
  /* bo do tre 300ms va khong cho trinh duyet hieu la cu vuot/zoom */
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0.15);
}

/*---------- khung san khau co dinh tren desktop ----------*/
/*
  Mac dinh video duoc keo cao bang khung roi tinh rong theo ti le, nen nguon 16:9
  nam ngang se tran het be ngang container. Chot be rong san khau de:
  - video ngang bi lot vao trong (object-fit: contain), khong tran
  - cot slide (chua tieu de + nut chia se) va lop video cung mot be rong, khong lech nhau
  Lay so nho hon giua 660px va be rong suy ra tu chieu cao theo ti le 9:16,
  de video doc van vua khit san khau chu khong bi vien trong hai ben.
*/
@media (min-width: 768px) {
  .c-short-video-detail-frame {
    --short-video-stage: 660px;
    --short-video-stage: min(660px, calc((100vh - 20px) * 0.5625));
  }
  .c-short-video-fit,
  .c-short-video-show {
    width: var(--short-video-stage, 660px);
    max-width: 100%;
  }
  .c-short-video-show .c-short-video-detail-box__frame video,
  .c-short-video-show .c-short-video-detail-box__frame iframe {
    width: 100%;
    height: 100%;
    -o-object-fit: contain;
       object-fit: contain;
  }
}

@media (min-width: 992px) {
  .c-short-video-detail-frame {
    --short-video-stage: 660px;
    --short-video-stage: min(660px, calc((100vh - 132px) * 0.5625));
  }
}
/*---------- end short video detail css ----------*/