@charset "UTF-8";
:root {
  --shorts-logo-accent: #e14d67;
}

body {
  font-family: Inter;
  font-size: 14px;
  line-height: 20px;
  color: #333;
  -webkit-animation-duration: 0.1s;
  -webkit-animation-name: fontfix;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-timing-function: linear;
  -webkit-animation-delay: 0.1s;
  -webkit-tap-highlight-color: transparent;
  margin: 0;
}

.container {
  width: 1310px;
  margin-right: auto;
  margin-left: auto;
  padding-left: 15px;
  padding-right: 15px;
  max-width: 100%;
}

* {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: geometricPrecision;
}

*,
::after,
::before {
  box-sizing: border-box;
}

ul {
  padding: 0;
  margin: 0;
  list-style: none;
}

a {
  text-decoration: none;
  color: #666666;
  outline: none;
}
a:hover {
  text-decoration: none;
}

p {
  margin: 0;
}

h1,
h2,
h3 {
  margin: 0;
}

img {
  max-width: 100%;
  height: 100%;
  display: block;
  image-rendering: -webkit-optimize-contrast;
  color: transparent;
}

input,
textarea,
select,
a {
  outline: none;
}

.qc-hdtop {
  display: flex;
  justify-content: center;
}

.qc-ads {
  display: flex;
  margin-bottom: 30px;
}

.icon {
  display: flex;
}

.w730 {
  width: 730px;
  margin: 0 auto;
}

.mb {
  margin-bottom: 44px;
}

.br-bot {
  border-bottom: 1px solid #E5E5E5;
  padding-bottom: 44px;
  margin-bottom: 44px;
}

.br-color {
  border-top: 1px solid #E5E5E5;
  padding-top: 12px;
}

.br-none-vd {
  border-bottom: 0 !important;
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}

.mb {
  margin-bottom: 40px;
}

.mb32 {
  margin-bottom: 32px;
}

.mt32 {
  margin-top: 32px;
}

.hidden {
  display: none !important;
}

.hidden-icon::after {
  display: none !important;
}

.w800 {
  width: 800px;
  margin: 0 auto;
}

.show-tab {
  opacity: 0;
  height: 0;
}

.img-resize {
  display: block;
  position: relative;
  height: -moz-max-content;
  height: max-content;
}
.img-resize:before {
  padding-bottom: 62.5%; /* 16:10 */
  content: "";
  display: block;
}
.img-resize img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  bottom: 0;
  margin: auto;
  background-size: cover;
  background-position: center;
  -o-object-fit: cover;
     object-fit: cover;
}

.img-square {
  display: block;
  position: relative;
  height: -moz-max-content;
  height: max-content;
}
.img-square:before {
  padding-bottom: 133.33%; /* 3:4 */
  content: "";
  display: block;
}
.img-square img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  bottom: 0;
  margin: auto;
  background-size: cover;
  background-position: center;
  -o-object-fit: cover;
     object-fit: cover;
}

.iframe-resize {
  display: block;
  position: relative;
  height: -moz-max-content;
  height: max-content;
}
.iframe-resize:before {
  padding-bottom: 56.25%;
  content: "";
  display: block;
}
.iframe-resize .iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.flex {
  display: flex;
}

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

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

.gap-2 {
  gap: 8px;
}

button {
  cursor: pointer;
}

.hidden_tab {
  opacity: 0;
  height: 0;
  visibility: hidden;
}
.hidden_tab > * {
  height: 0;
  overflow: hidden;
  z-index: 0;
  visibility: hidden;
}

.show_tab {
  opacity: 1;
  height: auto;
  z-index: 90;
  transform: translateY(0);
  transition: 0.6s;
  visibility: visible;
}
.show_tab > * {
  height: auto;
  z-index: 9;
  visibility: visible;
}

.box-category .box-category-link-title[data-newstype="1"]::after {
  content: "";
  background: url(https://static.mediacdn.vn/VTV/web/images/ic-anh.svg) no-repeat;
  background-size: cover;
  display: inline-flex;
  width: 16px;
  height: 16px;
  margin-left: 5px;
}
.box-category .box-category-link-title[data-newstype="2"]::after {
  content: "";
  background: url(https://static.mediacdn.vn/VTV/web/images/ic-video.svg) no-repeat;
  background-size: cover;
  display: inline-flex;
  width: 16px;
  height: 13px;
  margin-left: 5px;
}
.box-category .box-category-link-title[data-newstype="5"]::after {
  content: "";
  background: url(https://static.mediacdn.vn/VTV/web/images/ic-live.svg) no-repeat;
  background-size: cover;
  display: inline-flex;
  width: 40px;
  height: 11px;
  margin-left: 5px;
}
.box-category .box-category-link-title[data-newstype="11"]::after {
  content: "";
  background: url(https://static.mediacdn.vn/VTV/web/images/ic-live.svg) no-repeat;
  background-size: cover;
  display: inline-flex;
  width: 40px;
  height: 11px;
  margin-left: 5px;
}
.box-category .box-category-link-title[data-newstype="10"]::after {
  content: "";
  background: url(https://static.mediacdn.vn/VTV/web/images/ic-info.svg) no-repeat;
  background-size: cover;
  display: inline-flex;
  width: 12px;
  height: 13px;
  margin-left: 5px;
}
.box-category .box-category-link-title[data-newstype="4"]::after {
  content: "";
  background: url(https://static.mediacdn.vn/VTV/web/images/ic-podcast.svg) no-repeat;
  background-size: cover;
  display: inline-flex;
  width: 14px;
  height: 12px;
  margin-left: 5px;
}
.box-category .box-category-link-title[data-newstype="8"]::after {
  content: "";
  background: url(https://static.mediacdn.vn/VTV/web/images/ic-mag.svg) no-repeat;
  background-size: cover;
  display: inline-flex;
  width: 24px;
  height: 8px;
  margin-left: 5px;
}
.box-category .box-category-link-with-avatar[data-newstype="1"]::after {
  content: "";
  background: url(https://static.mediacdn.vn/VTV/web/images/ic-anh-img.svg) no-repeat;
  background-size: cover;
  display: inline-flex;
  width: 25px;
  height: 25px;
  left: 10px;
  bottom: 10px;
  position: absolute;
}
.box-category .box-category-link-with-avatar[data-newstype="2"]::after {
  content: "";
  background: url(https://static.mediacdn.vn/VTV/web/images/ic-video-img.svg) no-repeat;
  background-size: cover;
  display: inline-flex;
  width: 25px;
  height: 25px;
  left: 10px;
  bottom: 10px;
  position: absolute;
}
.box-category .box-category-link-with-avatar[data-newstype="10"]::after {
  content: "";
  background: url(https://static.mediacdn.vn/VTV/web/images/ic-info-img.svg) no-repeat;
  background-size: cover;
  display: inline-flex;
  width: 25px;
  height: 25px;
  left: 10px;
  bottom: 10px;
  position: absolute;
}
.box-category .box-category-link-with-avatar[data-newstype="4"]::after {
  content: "";
  background: url(https://static.mediacdn.vn/VTV/web/images/ic-podcast-img.svg) no-repeat;
  background-size: cover;
  display: inline-flex;
  width: 25px;
  height: 25px;
  left: 10px;
  top: 10px;
  position: absolute;
}
.box-category .box-category-link-with-avatar[data-newstype="8"]::after {
  content: "";
  background: url(https://static.mediacdn.vn/VTV/web/images/ic-mag-img.svg) no-repeat;
  background-size: cover;
  display: inline-flex;
  width: 25px;
  height: 25px;
  left: 10px;
  bottom: 10px;
  position: absolute;
}
.box-category .box-category-link-with-avatar .icon-time {
  position: absolute;
  background: rgba(0, 0, 0, 0.6588235294);
  border-radius: 2px;
  padding: 2px 4px;
  display: flex;
  align-items: baseline;
  gap: 6px;
  left: 10px;
  bottom: 10px;
}
.box-category .box-category-link-with-avatar .icon-time .txt {
  font-family: Inter;
  font-size: 13px;
  font-weight: 400;
  line-height: 18px;
  text-align: left;
  color: #ffffff;
}
.box-category .box-category-item.avatar-vertical {
  display: flex;
  margin-top: 20px;
  border-bottom: 1px solid #f1f1f1;
  padding-bottom: 20px;
  margin-bottom: 20px;
}
.box-category .box-category-item.avatar-vertical .box-category-link-with-avatar {
  width: 230px;
  order: 1;
}
.box-category .box-category-item.avatar-vertical .box-category-link-with-avatar:before {
  padding-bottom: 134%;
}
.box-category .box-category-item.avatar-vertical .box-category-content {
  display: flex;
  flex-direction: column;
  width: calc(100% - 246px);
  margin-right: 16px;
}
.box-category .box-category-item.avatar-vertical .box-category-link-title {
  display: block;
  margin-bottom: 10px;
  color: #222222;
  font-family: Merriweather;
  font-size: 17px;
  font-weight: 700;
  line-height: 26px;
  text-align: left;
}
.box-category .box-category-item.avatar-vertical .box-category-sapo {
  color: #707070;
  font-family: Inter;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  text-align: left;
  flex: 1;
}
.box-category .box-category-item.avatar-vertical .box-content-bot .title-box {
  margin-bottom: 8px;
  font-family: Roboto;
  font-size: 13px;
  font-weight: 600;
  line-height: 16px;
  text-align: left;
  color: #222222;
}
.box-category .box-category-item.avatar-vertical .box-content-bot .box-bot-item {
  display: flex;
  border: 1px solid #f2f2f2;
  border-radius: 8px;
  padding: 12px;
}
.box-category .box-category-item.avatar-vertical .box-content-bot .box-bot-item .box-bot-link-with-avatar {
  width: 96px;
  order: 1;
}
.box-category .box-category-item.avatar-vertical .box-content-bot .box-bot-item .box-bot-content {
  width: calc(100% - 112px);
  margin-right: 12px;
}
.box-category .box-category-item.avatar-vertical .box-content-bot .box-bot-item .box-category-link-title {
  font-family: Merriweather;
  font-size: 14px;
  font-weight: 700;
  line-height: 19.6px;
  text-align: left;
  display: block;
  margin-bottom: 0;
  color: #222222;
}
.box-category .box-category-item.avatar-vertical .box-category-category,
.box-category .box-category-item.avatar-vertical .box-category-time {
  display: none;
}
.box-category[data-layout="16"] {
  height: 100%;
  flex: 1;
  padding: 32px 22px;
}
.box-category[data-layout="16"] .box-category-middle {
  position: relative;
  height: 100%;
  text-align: center;
  gap: 30px;
}
.box-category[data-layout="16"] .box-category-middle .swiper {
  padding-left: 40px;
}
.box-category[data-layout="16"] .box-category-middle .box-category-item {
  display: flex;
  align-items: flex-end;
  gap: 16px;
  justify-content: center;
}
.box-category[data-layout="16"] .box-category-middle .box-category-item.show-comment {
  justify-content: flex-end;
  padding-right: 62px;
}
.box-category[data-layout="16"] .box-category-middle .box-category-item.show-comment .vPlayer {
  left: -20px;
}
.box-category[data-layout="16"] .box-category-middle .box-category-item .box-category-link-with-avatar {
  width: 100%;
  height: 100%;
}
.box-category[data-layout="16"] .box-category-middle .box-category-item .box-category-link-with-avatar video,
.box-category[data-layout="16"] .box-category-middle .box-category-item .box-category-link-with-avatar img {
  height: 100%;
  border-radius: 12px;
}
.box-category[data-layout="16"] .box-category-middle .box-category-item .box-category-action {
  display: flex;
  flex-direction: column;
  padding-bottom: 60px;
}
.box-category[data-layout="16"] .box-category-middle .box-category-item .box-category-action > * + * {
  margin-top: 12px;
}
.box-category[data-layout="16"] .box-category-middle .box-category-item .box-category-action button {
  background: none;
  border: none;
  padding: 0;
  font-family: Inter, sans-serif;
  cursor: pointer;
}
.box-category[data-layout="16"] .box-category-middle .box-category-item .box-category-action button.active svg path {
  fill: #D4111B;
}
.box-category[data-layout="16"] .box-category-middle .box-category-item .box-category-action button.active .icon-comment {
  background: #d1d1d1 url("https://static.mediacdn.vn/sohashorts/images/comment.svg") no-repeat center center;
}
.box-category[data-layout="16"] .box-category-middle .box-category-item .box-category-action .icon {
  width: 48px;
  height: 48px;
  margin-bottom: 4px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
}
.box-category[data-layout="16"] .box-category-middle .box-category-item .box-category-action .icon-heart {
  background: #F1F1F1 url("https://static.mediacdn.vn/sohashorts/images/heart.svg") no-repeat center center;
}
.box-category[data-layout="16"] .box-category-middle .box-category-item .box-category-action .icon-comment {
  background: #F1F1F1 url("https://static.mediacdn.vn/sohashorts/images/comment.svg") no-repeat center center;
}
.box-category[data-layout="16"] .box-category-middle .box-category-item .box-category-action .icon-save {
  background: #F1F1F1 url("https://static.mediacdn.vn/sohashorts/images/save.svg") no-repeat center center;
}
.box-category[data-layout="16"] .box-category-middle .box-category-item .box-category-action .icon-share {
  background: #F1F1F1 url("https://static.mediacdn.vn/sohashorts/images/share.svg") no-repeat center center;
}
.box-category[data-layout="16"] .box-category-middle .box-category-item .box-category-action .icon-replay {
  background: #F1F1F1 url("https://static.mediacdn.vn/sohashorts/images/icon-replay.svg") no-repeat center center;
}
.box-category[data-layout="16"] .box-category-middle .box-category-item .box-category-action span {
  white-space: nowrap;
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  text-align: center;
  color: #292929;
}
.box-category[data-layout="16"] .swiper-slide {
  width: 100%;
  margin: 0 auto;
  border-radius: 12px;
}
.box-category[data-layout="16"] .vPlayer {
  width: 100%;
  max-width: calc((100vh - 40px) / 1.7777777778);
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  transition: left 0.45s;
  left: 0px;
}
.box-category[data-layout="16"] .vPlayer .thumb {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.box-category[data-layout="16"] .VCSortableInPreviewMode {
  height: 100%;
}
.box-category[data-layout="16"] .swiper-nav-control {
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: absolute;
  right: 38px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
}
.box-category[data-layout="16"] .swiper-nav-control a, .box-category[data-layout="16"] .swiper-nav-control button {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #F5F5F5 url("https://static.mediacdn.vn/sohashorts/images/Down.svg") no-repeat center center;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
}
.box-category[data-layout="16"] .swiper-nav-control a.swiper-button-disabled, .box-category[data-layout="16"] .swiper-nav-control button.swiper-button-disabled {
  opacity: 0.3;
  cursor: not-allowed;
}
.box-category[data-layout="16"] .swiper-nav-control .prev-short-video {
  transform: rotate(180deg);
}
.box-category[data-layout="16"] .swiper-nav-control button.short-feed-nav-next {
  transform: rotate(180deg);
}
.box-category[data-layout="16"] .views {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50%;
  border-radius: 4px;
  border: 1px solid var(--Neutral-30, #e8e8e8);
  background: var(--Neutral-05, #f5f6f8);
  padding: 12px 0;
  color: #d20001;
  text-align: center;
  font-family: Inter;
  font-size: 18px;
  font-style: normal;
  font-weight: 600;
  line-height: 130%;
  cursor: pointer;
  margin: 30px auto auto;
}
.box-category[data-layout="4"] {
  margin-bottom: 40px;
}
.box-category[data-layout="4"]:last-child {
  margin-bottom: 0;
}
.box-category[data-layout="4"] .box-category-top {
  margin-bottom: 12px;
}
.box-category[data-layout="4"] .box-category-top .box-category-title {
  color: #040404;
  font-weight: 600;
  font-size: 20px;
  line-height: 28px;
}
.box-category[data-layout="4"] .box-category-middle {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  /* Empty state <p> is direct child of .box-category-middle, not inside .box-category-item */
}
.box-category[data-layout="4"] .box-category-middle .box-category-item {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  background: #141414;
  /* Shorter than 9/16 grid card; adjust ratio (e.g. 5/6, 3/4) to match design */
  aspect-ratio: 4/5;
}
.box-category[data-layout="4"] .box-category-middle .box-category-item .img-resize {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.box-category[data-layout="4"] .box-category-middle .box-category-item .img-resize:before {
  display: none;
}
.box-category[data-layout="4"] .box-category-middle .box-category-item .box-category-link-with-avatar {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.box-category[data-layout="4"] .box-category-middle .box-category-item .box-category-link-with-avatar img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  border-radius: 0;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
}
.box-category[data-layout="4"] .box-category-middle .box-category-item .box-category-content {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 8px;
  padding: 40px 12px 12px;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  box-sizing: border-box;
  min-height: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.2) 28%, rgba(0, 0, 0, 0.75) 72%, rgba(0, 0, 0, 0.92) 100%);
  border-radius: 0;
  pointer-events: none;
}
.box-category[data-layout="4"] .box-category-middle .box-category-item .box-category-content a,
.box-category[data-layout="4"] .box-category-middle .box-category-item .box-category-content .box-category-link-title {
  pointer-events: auto;
}
.box-category[data-layout="4"] .box-category-middle .box-category-item .box-category-content .flex {
  order: 1;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  gap: 8px;
  flex-shrink: 0;
}
.box-category[data-layout="4"] .box-category-middle .box-category-item .box-category-content .box-category-title-text {
  order: 2;
  margin: 0;
  width: 100%;
  min-width: 0;
}
.box-category[data-layout="4"] .box-category-middle .box-category-item .box-category-sapo {
  display: none;
}
.box-category[data-layout="4"] .box-category-middle .box-category-item .box-category-link-title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.85);
  color: #fff !important;
  /* Khớp .box-category-category (dòng Đời sống - Xã hội): Inter 500 13/18 */
  font: 500 14px/18px Inter, sans-serif;
}
.box-category[data-layout="4"] .box-category-middle .box-category-item a.box-category-link-title:hover {
  color: #fff !important;
  opacity: 0.92;
}
.box-category[data-layout="4"] .box-category-middle .box-category-item .box-category-category,
.box-category[data-layout="4"] .box-category-middle .box-category-item .box-category-view {
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85);
  color: #fff;
  font: 500 13px/18px Inter, sans-serif;
  flex-shrink: 0;
}
.box-category[data-layout="4"] .box-category-middle .box-category-item .box-category-view {
  display: inline-block;
  margin-left: auto;
  padding-right: 24px;
  min-height: 20px;
  line-height: 20px;
  vertical-align: middle;
  white-space: nowrap;
  background: url("https://static.mediacdn.vn/sohashorts/images/icon-video.svg") no-repeat right center;
  background-size: 16px 16px;
}
.box-category[data-layout="4"] .box-category-middle .short-grid-empty-full {
  grid-column: 1/-1;
  text-align: center;
  white-space: nowrap;
}

@media (max-width: 1100px) {
  .box-category[data-layout="4"] .box-category-middle {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 640px) {
  .box-category[data-layout="4"] .box-category-middle {
    grid-template-columns: 1fr;
  }
}
@font-face {
  font-family: "Merriweather";
  font-weight: normal;
  font-style: normal;
  src: url("https://static.mediacdn.vn/fonts/Merriweather-Regular.woff2") format("woff2"), url("https://static.mediacdn.vn/fonts/Merriweather-Regular.woff") format("woff"), url("https://static.mediacdn.vn/fonts/Merriweather-Regular.ttf") format("truetype"), url("https://static.mediacdn.vn/fonts/Merriweather-Regular.eot") format("embedded-opentype");
  font-display: block;
}
@font-face {
  font-family: "Merriweather";
  font-weight: bold;
  font-style: normal;
  src: url("https://static.mediacdn.vn/fonts/Merriweather-Bold.woff2") format("woff2"), url("https://static.mediacdn.vn/fonts/Merriweather-Bold.woff") format("woff"), url("https://static.mediacdn.vn/fonts/Merriweather-Bold.ttf") format("truetype"), url("https://static.mediacdn.vn/fonts/Merriweather-Bold.eot") format("embedded-opentype");
  font-display: block;
}
@font-face {
  font-family: "Merriweather";
  font-weight: 900;
  font-style: normal;
  src: url("https://static.mediacdn.vn/fonts/Merriweather-Black.woff2") format("woff2"), url("https://static.mediacdn.vn/fonts/Merriweather-Black.woff") format("woff"), url("https://static.mediacdn.vn/fonts/Merriweather-Black.ttf") format("truetype"), url("https://static.mediacdn.vn/fonts/Merriweather-Black.eot") format("embedded-opentype");
  font-display: block;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  src: url("https://static.mediacdn.vn/fonts/Inter-Regular.woff2") format("woff2"), url("https://static.mediacdn.vn/fonts/Inter-Regular.woff") format("woff"), url("https://static.mediacdn.vn/fonts/Inter-Regular.ttf") format("truetype"), url("https://static.mediacdn.vn/fonts/Inter-Regular.eot") format("embedded-opentype");
  font-display: block;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 500;
  src: url("https://static.mediacdn.vn/fonts/Inter-Medium.woff2") format("woff2"), url("https://static.mediacdn.vn/fonts/Inter-Medium.woff") format("woff"), url("https://static.mediacdn.vn/fonts/Inter-Medium.ttf") format("truetype"), url("https://static.mediacdn.vn/fonts/Inter-Medium.eot") format("embedded-opentype");
  font-display: block;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 600;
  src: url("https://static.mediacdn.vn/fonts/Inter-SemiBold.woff2") format("woff2"), url("https://static.mediacdn.vn/fonts/Inter-SemiBold.woff") format("woff"), url("https://static.mediacdn.vn/fonts/Inter-SemiBold.ttf") format("truetype"), url("https://static.mediacdn.vn/fonts/Inter-SemiBold.eot") format("embedded-opentype");
  font-display: block;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 700;
  src: url("https://static.mediacdn.vn/fonts/Inter-Bold.woff2") format("woff2"), url("https://static.mediacdn.vn/fonts/Inter-Bold.woff") format("woff"), url("https://static.mediacdn.vn/fonts/Inter-Bold.ttf") format("truetype"), url("https://static.mediacdn.vn/fonts/Inter-Bold.eot") format("embedded-opentype");
  font-display: block;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 800;
  src: url("https://static.mediacdn.vn/fonts/Inter-Black.woff2") format("woff2"), url("https://static.mediacdn.vn/fonts/Inter-Black.woff") format("woff"), url("https://static.mediacdn.vn/fonts/Inter-Black.ttf") format("truetype"), url("https://static.mediacdn.vn/fonts/Inter-Black.eot") format("embedded-opentype");
  font-display: block;
}
@font-face {
  font-family: "SF Pro Display";
  font-style: normal;
  font-weight: 400;
  src: url("https://static.mediacdn.vn/fonts/SFProDisplay-Regular.woff2") format("woff2"), url("https://static.mediacdn.vn/fonts/SFProDisplay-Regular.woff") format("woff"), url("https://static.mediacdn.vn/fonts/SFProDisplay-Regular.ttf") format("truetype"), url("https://static.mediacdn.vn/fonts/SFProDisplay-Regular.eot") format("embedded-opentype");
  font-display: block;
}
.header {
  padding: 9px 20px;
  background: url("https://static.mediacdn.vn/vtvshorts/images/bg-header.jpg") no-repeat 0 50%/cover;
}

.header .btn-back {
  width: 122px;
  height: 32px;
  background: url("https://static.mediacdn.vn/sohashorts/images/btn-back-home.svg") no-repeat 0 0/contain;
  font-size: 0;
}

.header .box-btn {
  display: flex;
  margin-left: auto;
}

.header .box-btn > * + * {
  margin-left: 12px;
  padding-left: 12px;
}

.header .box-btn > * + *::after {
  content: "";
  width: 1px;
  height: 16px;
  background: #F1F1F1;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}

ul#list-tags-trending {
  display: flex;
}

ul.list-tags li a.tag-link {
  margin-left: 0 !important;
  text-transform: uppercase;
}

.list-tags li.tag {
  float: left;
  margin-left: 22px;
}

.list-tags .tag,
.header .box-btn a,
.header .box-btn button {
  display: flex;
  align-items: center;
  gap: 4px;
  color: #555;
  font-weight: 500;
  font-size: 14px;
  line-height: 18px;
  position: relative;
}

.header .box-btn a:nth-child(2),
.header .box-btn button:nth-child(2) {
  margin-left: 16px;
  padding-left: 0;
}

.header .box-btn a:nth-child(2)::after,
.header .box-btn button:nth-child(2)::after {
  display: none;
}

.header .box-btn a.btn-th,
.header .box-btn button.btn-th {
  padding: 5px 11px;
  border-radius: 4px;
  border: 1px solid var(--stroke-03, #f1f1f1);
  background: var(--f8, #f8f8f8);
}

.header .box-btn span span {
  color: #ED212B;
}

.header .box-btn i {
  width: 20px;
  height: 20px;
  display: block;
}

.header .box-btn .icon-play {
  background: url("https://static.mediacdn.vn/sohashorts/images/Play-1.svg") no-repeat 0 0/contain;
}

.header .box-btn .icon-doc {
  background: url("https://static.mediacdn.vn/vtvshorts/images/Public.svg") no-repeat 0 0/contain;
}

.header .box-btn .icon-star {
  width: 14px;
  height: 14px;
  background: url("https://static.mediacdn.vn/sohashorts/images/ic_round-star.svg") no-repeat 0 0/contain;
}

.header .box-btn .icon-phone {
  width: 18px;
  height: 18px;
  background: url("https://static.mediacdn.vn/sohashorts/images/icon_call.svg") no-repeat 0 0/contain;
}

/* Header shorts: chi icon play + sao dung mau logo; chu #555, hover -> mau logo */
.page-short-video .header .box-btn a.btn-th {
  transition: color 0.2s ease;
}

.page-short-video .header .box-btn a.btn-th:hover {
  color: var(--shorts-logo-accent);
}

.page-short-video .header .box-btn a.btn-th .icon-play {
  background-color: var(--shorts-logo-accent);
  background-image: none;
  -webkit-mask-image: url("https://static.mediacdn.vn/sohashorts/images/Play-1.svg");
  mask-image: url("https://static.mediacdn.vn/sohashorts/images/Play-1.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

.page-short-video .header .list-tags .icon-star {
  background-color: var(--shorts-logo-accent);
  background-image: none;
  -webkit-mask-image: url("https://static.mediacdn.vn/sohashorts/images/ic_round-star.svg");
  mask-image: url("https://static.mediacdn.vn/sohashorts/images/ic_round-star.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

.page-short-video .header ul.list-tags li a.tag-link {
  color: #555 !important;
  transition: color 0.2s ease;
}

.page-short-video .header ul.list-tags li a.tag-link:hover {
  color: var(--shorts-logo-accent) !important;
}

.page-short-video .header ul.list-tags li.tag.is-active a.tag-link {
  color: var(--shorts-logo-accent) !important;
  font-weight: 700;
}

.page-short-video .header ul.list-tags li.tag.is-active .icon-star {
  opacity: 1;
}

.header .language {
  margin: 0 12px;
  padding: 0 12px;
  border-left: 1px solid #f1f1f1;
  border-right: 1px solid #f1f1f1;
}

.header .language .btn {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #565656;
  font-weight: 500;
  font-size: 13px;
  line-height: 18px;
}

.header .language .btn .icon-earth {
  width: 18px;
  height: 18px;
  background: url("https://static.mediacdn.vn/vtvshorts/images/earth.svg") no-repeat 0 0/contain;
}

.header .social .icon-fb {
  display: block;
  width: 18px;
  height: 18px;
  background: url("https://static.mediacdn.vn/vtvshorts/images/facebook.svg") no-repeat 0 0/contain;
}

.header .login {
  padding-left: 12px;
  margin-left: 12px;
  border-left: 1px solid #f1f1f1;
}

.header .login .btn-login {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #565656;
  font-weight: 500;
  font-size: 13px;
  line-height: 18px;
}

.footer {
  border-top: 1px solid #FCDDDF;
  margin-top: 100px;
  padding: 20px 0 40px;
}

.footer__menu-top {
  border-bottom: 8px solid #F1F1F1;
  padding-bottom: 24px;
  margin-bottom: 30px;
}

.footer__menu-top .list {
  display: flex;
  align-items: center;
  gap: 17px;
}

.footer__menu-top .list .item {
  display: block;
  font-family: Inter;
  font-size: 14px;
  font-weight: 500;
  line-height: 16.94px;
  text-align: left;
  color: #292929;
  padding: 8px 0;
  text-transform: uppercase;
}

.footer__middle {
  display: flex;
  border-bottom: 1px dashed #E2E2E2;
  padding-bottom: 30px;
  margin-bottom: 16px;
}

.footer__middle .col-middle {
  width: 256px;
  margin-right: 30px;
}

.footer__middle .col-middle .logo {
  display: flex;
  height: 36px;
  margin-bottom: 8px;
}

.footer__middle .col-middle .text-lg {
  display: block;
  font-family: Inter;
  font-size: 13px;
  font-weight: 500;
  line-height: 22px;
  text-align: left;
  margin-bottom: 12px;
  color: #707070;
}

.footer__middle .col-middle .list-folow {
  display: flex;
  align-items: center;
  gap: 8px;
}

.footer__middle .col-middle .list-folow .fl {
  font-family: Inter;
  font-size: 15px;
  font-weight: 400;
  line-height: 22px;
  text-align: left;
  color: #707070;
}

.footer__middle .col-organ {
  width: 301px;
  margin-right: 30px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.footer__middle .col-organ .des {
  font-family: Inter;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  text-align: left;
  color: #555555;
}

.footer__middle .col-organ .des .bold {
  font-family: Inter;
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  text-align: left;
}

.footer__middle .col-total {
  width: 422px;
  margin-right: 30px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.footer__middle .col-total .des {
  font-family: Inter;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  text-align: left;
  color: #555555;
}

.footer__middle .col-total .des:nth-child(2) .bold {
  font-family: Inter;
  font-size: 13px;
  font-weight: 600;
  line-height: 20px;
  text-align: left;
}

.footer__middle .col-total .des .bold {
  font-family: Inter;
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  text-align: left;
}

.footer__middle .col-channels {
  width: 210px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.footer__middle .col-channels .channel-link {
  width: calc(50% - 5px);
  border: 1px solid #EBEBEB;
  background: #F8F8F8;
  border-radius: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 7px 0;
}

.footer__bottom .sapo {
  color: #8F8F8F;
  font-family: Inter;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  text-align: left;
}

.box-short-video {
  display: flex;
  height: calc(100vh - 50px);
}

.box-short-video .box-sidebar {
  width: 300px;
}

.box-short-video .sidebar {
  width: 300px;
  height: 100%;
  background: #fff;
  border-right: 1px solid #f1f1f1;
  padding: 32px 0 0;
  display: flex;
  flex-direction: column;
  z-index: 11;
  position: relative;
  transition: width 0.6s;
}

.box-short-video .sidebar .logo span {
  font-size: 20px;
  font-weight: 700;
  font-family: "Inter";
}

.box-short-video .sidebar.active::after {
  content: "";
  width: 1px;
  height: 100%;
  background: #f1f1f1;
  position: absolute;
  left: 79px;
  top: 0;
}

.box-short-video .sidebar.active {
  width: 81px;
}

.box-short-video .sidebar.active .logo {
  margin-bottom: 16px;
  flex-direction: column;
  gap: 4px;
}

.box-short-video .sidebar.active .logo span {
  font-size: 15px;
  line-height: 22px;
}

.box-short-video .sidebar.active .logo img {
  width: 49px;
}

.box-short-video .sidebar.active .logo .mob {
  display: block;
}

.box-short-video .sidebar.active .logo .pc {
  display: none;
}

.box-short-video .sidebar.active .form-search .btn-search {
  font-size: 0;
  padding: 8px;
  background-position: center center;
}

.box-short-video .sidebar.active .menu span {
  display: none;
}

.box-short-video .sidebar.active .menu .sub-menu,
.box-short-video .sidebar.active .menu .btn-expand {
  display: none;
}

.box-short-video .box-ads {
  width: 336px;
  padding: 32px 16px;
  border-left: 1px solid #f1f1f1;
}

.box-short-video .box-ads img {
  height: auto;
}

.box-short-video .logo {
  margin-bottom: 32px;
  padding: 0 16px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.box-short-video .logo img {
  height: auto;
}

.box-short-video .logo img.pc {
  width: 42px;
}

.box-short-video .logo img.mob {
  width: 52px;
}

.box-short-video .logo span {
  color: #292929;
  font: 700 20px/28px Merriweather, sans-serif;
}

.box-short-video .logo .mob {
  display: none;
}

.box-short-video .form-search {
  margin-bottom: 16px;
  padding: 0 16px;
}

.box-short-video .form-search.searched .btn-search {
  font-weight: 500;
  color: #040404;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.box-short-video .form-search .btn-search {
  width: 100%;
  height: 48px;
  border-radius: 99px;
  background: #f5f5f5 url("https://static.mediacdn.vn/sohashorts/images/search.svg") no-repeat 12px center;
  padding: 12px 12px 12px 48px;
  border: none;
  color: #999;
  font: 400 16px/24px Inter, sans-serif;
  text-align: left;
}

.box-short-video .menu {
  flex: 1;
  overflow: auto;
  padding: 0 16px;
}

.box-short-video .menu::-webkit-scrollbar {
  width: 4px;
}

.box-short-video .menu::-webkit-scrollbar-thumb {
  background: #dcdcdc;
  border-radius: 4px;
}

.box-short-video .menu > * + * {
  margin-top: 4px;
}

.box-short-video .menu > li {
  position: relative;
}

.box-short-video .menu > li > a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  color: #292929;
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  transition: color 0.2s ease;
}

.box-short-video .menu > li > a.active {
  color: var(--shorts-logo-accent);
}

/* Icon active: mask mau logo, khong dung filter */
.box-short-video .menu > li > a.active i {
  filter: none;
  background-color: var(--shorts-logo-accent);
  background-image: none;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

.box-short-video .menu > li > a.active i.icon-home {
  -webkit-mask-image: url("https://static.mediacdn.vn/sohashorts/images/Home.svg");
  mask-image: url("https://static.mediacdn.vn/sohashorts/images/Home.svg");
}

.box-short-video .menu > li > a.active i.icon-explore {
  -webkit-mask-image: url("https://static.mediacdn.vn/sohashorts/images/khampha.svg");
  mask-image: url("https://static.mediacdn.vn/sohashorts/images/khampha.svg");
}

.box-short-video .menu .sub-menu {
  margin-left: 24px;
  padding-left: 16px;
  height: auto;
  border-left: 1px solid #f1f1f1;
  transition: max-height 0.4s ease-out, opacity 0.3s ease;
  overflow: hidden;
  opacity: 0;
  visibility: visible;
  max-height: 0;
}

.box-short-video .menu .sub-menu.show {
  max-height: 1000px;
  opacity: 1;
  transition: max-height 0.6s ease-in, opacity 0.4s ease;
}

.box-short-video .menu .sub-menu.hidden-submenu {
  height: 0;
  opacity: 0;
  visibility: hidden;
}

.box-short-video .menu .sub-menu a {
  display: inline-block;
  padding: 12px 8px;
  color: #565656;
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  transition: color 0.2s ease;
}

.box-short-video .menu .sub-menu a:hover {
  color: var(--shorts-logo-accent);
}

.box-short-video .menu .sub-menu a.active {
  color: var(--shorts-logo-accent);
}

.box-short-video .menu > li > a:hover:not(.active) {
  color: var(--shorts-logo-accent);
}

.box-short-video .menu .btn-expand {
  padding: 0;
  background: none;
  border: none;
  position: absolute;
  right: 0;
  top: 16px;
  transition: transform 0.3s ease;
}

.box-short-video .menu .btn-expand.active {
  transform: rotate(180deg);
}

.box-short-video .menu i {
  width: 24px;
  height: 24px;
  filter: grayscale(1);
}

.box-short-video .menu .icon-home {
  background: url("https://static.mediacdn.vn/sohashorts/images/Home.svg") no-repeat 0 0/contain;
}

.box-short-video .menu .icon-explore {
  background: url("https://static.mediacdn.vn/sohashorts/images/khampha.svg") no-repeat 0 0/contain;
}

.box-short-video .menu .icon-khampha {
  background: url("https://static.mediacdn.vn/sohashorts/images/khampha.svg") no-repeat 0 0/contain;
}

.box-short-video .menu > li > a.active i.icon-khampha {
  -webkit-mask-image: url("https://static.mediacdn.vn/sohashorts/images/khampha.svg");
  mask-image: url("https://static.mediacdn.vn/sohashorts/images/khampha.svg");
}

.box-short-video .menu .icon-play {
  background: url("https://static.mediacdn.vn/sohashorts/images/short-video.svg") no-repeat 0 0/contain;
}

.box-short-video .menu .icon-save {
  background: url("https://static.mediacdn.vn/sohashorts/images/save.svg") no-repeat 0 0/contain;
}

.box-short-video .swiper-slide iframe,
.box-short-video .vPlayer {
  height: 100% !important;
}

.box-short-video .swiper,
.box-short-video .container {
  height: 100%;
}

.box-short-video .box-category-item.active .box-category-comment {
  display: flex;
}

.box-short-video .box-category-comment {
  width: 0;
  height: 100%;
  text-align: left;
  margin-left: 14px;
  max-width: 0px;
  background: #fff;
  flex: 1;
  border-radius: 12px;
  border: 1px solid var(--stroke-02, #ebebeb);
  background: var(--Color-Background, #fff);
  box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.04);
  padding: 20px;
  position: relative;
  visibility: hidden;
  left: -100px;
  overflow: hidden;
  transition: left 0.35s;
}

.box-short-video .box-category-comment::-webkit-scrollbar {
  width: 8px;
}

.box-short-video .box-category-comment::-webkit-scrollbar-thumb {
  background: #dcdcdc;
  border-radius: 4px;
}

.box-short-video .box-category-comment.active {
  display: block;
  width: auto;
  left: 0;
  max-width: 460px;
  overflow: auto;
  visibility: visible;
}

.box-short-video .box-category-comment .btn-close {
  position: absolute;
  top: 8px;
  right: 8px;
  border: none;
  background: none;
}

.box-short-video .box-category-comment .cate-day {
  font-size: 15px;
  line-height: 22px;
  color: #707070;
}

.box-short-video .box-category-comment .caegory {
  color: #d4111b;
}

.box-short-video .box-category-comment .title {
  margin: 4px 0 16px;
  font: 700 18px/26px Merriweather, sans-serif;
}

.box-short-video .box-category-comment .social .btn-like,
.box-short-video .box-category-comment .social .btn-share {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 6px;
  border-radius: 4px;
  background: #2872e3;
  color: #fff;
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
}

.box-short-video .box-category-comment .social .icon-like {
  width: 16px;
  height: 16px;
  background: url("https://static.mediacdn.vn/sohashorts/images/like.svg") no-repeat 0 0/contain;
}

.box-short-video .box-category-comment .box-btn {
  display: flex;
  gap: 12px;
  margin-left: auto;
}

.box-short-video .box-category-comment .box-btn .icon {
  width: 24px;
  height: 24px;
  display: inline-block;
}

.box-short-video .box-category-comment .box-btn .icon-link {
  background: url("https://static.mediacdn.vn/sohashorts/images/icon_link_line.svg") no-repeat 0 0/contain;
}

.box-short-video .box-category-comment .box-btn .icon-facebook {
  background: url("https://static.mediacdn.vn/sohashorts/images/facebook.svg") no-repeat 0 0/contain;
}

.box-short-video .box-category-comment .box-btn .icon-twitter {
  background: url("https://static.mediacdn.vn/sohashorts/images/icon_Twitter_fill.svg") no-repeat 0 0/contain;
}

.box-short-video .box-category-comment .box-btn .icon-save {
  background: url("https://static.mediacdn.vn/sohashorts/images/save2.svg") no-repeat 0 0/contain;
}

.box-short-video .box-category-comment .box-comment {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid #f1f1f1;
}

.box-short-video .box-category-comment .btn-submit-reply {
  border: none;
  font-family: Inter;
  font-size: 15px;
  font-weight: 500;
  border-radius: 4px;
  background: var(--Branding, linear-gradient(93deg, #d72525 0%, #cf750e 147.8%));
  color: #fff;
  padding: 6px 14px;
  display: block;
  margin: 10px 0 0 auto;
}

.box-short-video .box-category-comment .list-comment > * + * {
  margin-top: 16px;
}

.box-short-video .box-category-comment .list-comment .item,
.box-short-video .box-category-comment .list-comment .sub_comment_item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.box-short-video .box-category-comment .list-comment .item .avatar,
.box-short-video .box-category-comment .list-comment .sub_comment_item .avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  -o-object-fit: cover;
  object-fit: cover;
}

.box-short-video .box-category-comment .list-comment .item .avatar img,
.box-short-video .box-category-comment .list-comment .sub_comment_item .avatar img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

.box-short-video .box-category-comment .list-comment .item .item-content,
.box-short-video .box-category-comment .list-comment .sub_comment_item .item-content {
  flex: 1;
}

.box-short-video .box-category-comment .list-comment .item .user-name,
.box-short-video .box-category-comment .list-comment .sub_comment_item .user-name {
  font-weight: 600;
  font-size: 16px;
  line-height: 24px;
  color: #292929;
}

.box-short-video .box-category-comment .list-comment .item .text-comment,
.box-short-video .box-category-comment .list-comment .sub_comment_item .text-comment {
  color: #4f4f4f;
  font-size: 16px;
  line-height: 24px;
}

.box-short-video .box-category-comment .list-comment .item-bottom {
  display: flex;
  flex-wrap: wrap;
  margin-top: 8px;
  -moz-column-gap: 24px;
  column-gap: 24px;
  row-gap: 12px;
  align-items: center;
  color: #757575;
  font-size: 14px;
  line-height: 20px;
}

.box-short-video .box-category-comment .list-comment .item-bottom .item-ls {
  display: flex;
  align-items: center;
  gap: 4px;
}

.box-short-video .box-category-comment .list-comment .item-bottom .ic {
  width: 16px;
  height: 16px;
}

.box-short-video .box-category-comment .list-comment .item-bottom .ic-like {
  background: url("https://static.mediacdn.vn/sohashorts/images/like-comment.svg") no-repeat 0 0/contain;
}

.box-short-video .box-category-comment .list-comment .item-bottom .ic-time {
  background: url("https://static.mediacdn.vn/sohashorts/images/icon-time.svg") no-repeat 0 0/contain;
}

.box-short-video .box-category-comment .list-comment .item-bottom .ic-like-heart {
  width: 24px;
  height: 14px;
  background: url("https://static.mediacdn.vn/sohashorts/images/like3.svg") no-repeat 0 0/contain;
}

.box-short-video .box-category-comment .list-comment .box-reply {
  margin-top: 8px;
}

.box-short-video .box-category-comment .list-comment .box-reply .btn-view-reply {
  display: flex;
  align-items: center;
  gap: 4px;
  color: #8b8b8b;
  font-size: 14px;
  line-height: 20px;
  background: none;
  border: none;
  padding: 0;
}

.box-short-video .box-category-comment .list-comment .box-reply .btn-view-reply .icon-reply {
  width: 16px;
  height: 16px;
  background: url("https://static.mediacdn.vn/sohashorts/images/icon_reply_fill.svg") no-repeat 0 0/contain;
}

.box-short-video .box-category-comment .list-comment .box-reply-content {
  position: relative;
}

.box-short-video .box-category-comment .list-comment .box-reply-content.show-reply .form-reply-comment {
  display: block;
}

.box-short-video .box-category-comment .list-comment .box-reply-content.show-view-reply .list-sub-comment {
  display: block;
}

.box-short-video .box-category-comment .list-comment .box-reply-content > * + * {
  margin-top: 16px;
}

.box-short-video .box-category-comment .list-comment .box-reply-content::before {
  content: "";
  position: absolute;
  top: 0;
  left: -12px;
  width: 1px;
  height: 100%;
  background: #ebebeb;
}

.box-short-video .box-category-comment .comment-number {
  margin-bottom: 14px;
  color: #292929;
  font: 700 16px/24px Merriweather, sans-serif;
}

.box-short-video .box-category-comment .form-reply-comment {
  display: none;
  margin-top: 16px;
}

.box-short-video .box-category-comment .form-reply-comment.active {
  display: block;
}

.box-short-video .box-category-comment .form-comment {
  margin-bottom: 24px;
}

.box-short-video .box-category-comment .form-comment .input-reply input {
  border-radius: 4px;
  border-left: 2.5px solid var(--Primary-6, #ed212b);
  background: var(--neutral-color-05, #fafafa);
}

.box-short-video .box-category-comment .list-sub-comment {
  display: none;
}

.box-short-video .box-category-comment .list-sub-comment.active {
  display: block;
}

.box-short-video .box-category-comment .list-sub-comment > * + * {
  margin-top: 16px;
}

.box-short-video .box-category-comment .input-reply {
  position: relative;
}

.box-short-video .box-category-comment .input-reply .btn-emoj {
  position: absolute;
  right: 8px;
  top: 15px;
  border: none;
  background: none;
  padding: 0;
}

.box-short-video .box-category-comment .input-reply input {
  width: 100%;
  height: 55px;
  border-radius: 4px;
  border: 1px solid #e6e6e6;
  background: #fff;
  padding: 8px 36px 8px 8px;
  font-size: 17px;
  line-height: 26px;
}

.box-short-video .box-category-comment .input-reply input::-moz-placeholder {
  color: #8b8b8b;
}

.box-short-video .box-category-comment .input-reply input::placeholder {
  color: #8b8b8b;
}

.box-short-video .box-category-comment .bottom {
  padding: 12px;
  border-top: 1px solid #1e2a3b;
  display: flex;
  align-items: center;
  gap: 16px;
}

.box-short-video .box-category-comment .bottom .box-input {
  position: relative;
  flex: 1;
}

.box-short-video .box-category-comment .bottom .box-input .btn-emoj {
  position: absolute;
  right: 0;
  top: 7px;
}

.box-short-video .box-category-comment .bottom input {
  height: 40px;
  background: #1e2a3b;
  color: #fff;
  width: 100%;
  padding: 0 12px;
  font-weight: 500;
  font-size: 14px;
  border-radius: 4px;
  border: none;
}

.box-short-video .box-category-comment .bottom input::-moz-placeholder {
  color: #64748b;
}

.box-short-video .box-category-comment .bottom input::placeholder {
  color: #64748b;
}

.box-short-video .box-category-comment .bottom .btn-heart {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 8px;
  border: 1px solid #64748b;
  background: #1e2a3b;
  border-radius: 50%;
}

.box-short-video .box-category-comment .tab-comment {
  margin-bottom: 24px;
  display: flex;
  gap: 16px;
  border-bottom: 1px solid var(--Stroke-01, #ebebeb);
}

.box-short-video .box-category-comment .tab-comment a {
  padding-bottom: 8px;
  position: relative;
  color: #b0b0b0;
  font-weight: 500;
  font-size: 16px;
  line-height: 26px;
}

.box-short-video .box-category-comment .tab-comment a.active {
  color: #ed212b;
}

.box-short-video .box-category-comment .tab-comment a.active::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  height: 1px;
  background: #ed212b;
}

.box-search {
  width: 320px;
  display: flex;
  flex-direction: column;
  background: #fff;
  position: absolute;
  left: -320px;
  border-right: 1px solid #f1f1f1;
  height: 100%;
  transition: left 0.6s;
  height: calc(100vh - 51px);
  overflow: hidden;
  z-index: 99;
}

.box-search.custom {
  position: absolute;
  width: 0;
}

.box-search.custom.active {
  width: 320px;
  left: 80px;
  z-index: 99;
}

.box-search.active {
  width: 320px;
  left: 80px;
  z-index: 99;
}

.box-search .scroll {
  margin-top: 20px;
  padding: 20px 16px;
  border-top: 1px solid #f1f1f1;
  flex: 1;
  overflow: auto;
}

.box-search .scroll::-webkit-scrollbar {
  width: 4px;
}

.box-search .scroll::-webkit-scrollbar-thumb {
  background: #dcdcdc;
  border-radius: 4px;
}

.box-search .title {
  color: #292929;
  padding: 32px 16px 40px;
  font: 600 18px/26px "SF Pro Display", sans-serif;
}

.box-search .btn-close {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  position: absolute;
  top: 32px;
  right: 16px;
  border: none;
  border-radius: 99px;
  background: #f5f5f5;
}

.box-search .form-search-box {
  padding: 0 16px;
  position: relative;
}

.box-search .form-search-box input {
  width: 100%;
  height: 48px;
  padding: 12px 33px 12px 12px;
  border-radius: 99px;
  border: 1px solid var(--stroke-02, #ebebeb);
  background: #f5f5f5;
  font: 500 16px/24px Inter, sans-serif;
  color: #040404;
}

.box-search .form-search-box input::-moz-placeholder {
  color: #999999;
}

.box-search .form-search-box input::placeholder {
  color: #999999;
}

.box-search .form-search-box .btn-clear {
  position: absolute;
  right: 28px;
  top: 14px;
  border: none;
  background: none;
  padding: 0;
}

.box-search .most-search h4 {
  margin: 0 0 8px;
  padding: 0 12px;
  color: #565656;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
}

.box-search .most-search .list > * + * {
  margin-top: 8px;
}

.box-search .most-search .list a {
  display: flex;
  align-items: center;
  padding: 8px 12px;
  gap: 8px;
  border-radius: 8px;
  background: #f5f5f5;
  color: #040404;
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
}

.box-search .most-search .list a span {
  color: var(--shorts-logo-accent);
}

/* Tag trending + goi y trong panel tim kiem — cung template header */
.box-search .list-tags-in-search-title {
  padding: 0 12px;
  margin: 0 0 8px;
  color: #565656;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
}

.box-search ul.list-tags-in-search {
  display: flex;
  flex-direction: column;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0 12px;
}

.box-search ul.list-tags-in-search li.tag {
  float: none;
  margin: 0;
}

.box-search ul.list-tags-in-search a.tag-link,
.box-search ul.list-tags-in-search button.tag-link {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  box-sizing: border-box;
  padding: 8px 12px;
  border-radius: 8px;
  background: #f5f5f5;
  color: #555 !important;
  font-weight: 500;
  font-size: 14px;
  line-height: 18px;
  text-decoration: none;
  border: none;
  cursor: pointer;
  text-align: left;
  margin-left: 0 !important;
  transition: color 0.2s ease;
  font-family: Inter, sans-serif;
}

.box-search ul.list-tags-in-search .tag-link-text {
  text-transform: uppercase;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.box-search ul.list-tags-in-search a.tag-link:hover,
.box-search ul.list-tags-in-search button.tag-link:hover {
  color: var(--shorts-logo-accent) !important;
}

.box-search ul.list-tags-in-search .icon-star {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  display: block;
  background-color: var(--shorts-logo-accent);
  background-image: none;
  -webkit-mask-image: url("https://static.mediacdn.vn/sohashorts/images/ic_round-star.svg");
  mask-image: url("https://static.mediacdn.vn/sohashorts/images/ic_round-star.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

.box-search .short-search-suggest-dropdown .list-tags-in-search--dropdown {
  padding: 0 8px 8px;
  max-height: 200px;
  overflow-y: auto;
}

.box-search .recent-search {
  margin-bottom: 20px;
  position: relative;
}

.box-search .recent-search h4 {
  margin: 0 0 4px;
  padding: 0 12px;
  color: #565656;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
}

.box-search .recent-search .list > * + * {
  margin-top: 4px;
}

.box-search .recent-search .list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 8px 8px 12px;
}

.box-search .recent-search .list a {
  display: inline-block;
  flex: 1;
  padding-left: 28px;
  color: #040404;
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
  background: url("https://static.mediacdn.vn/sohashorts/images/mingcute_time-fill.svg") no-repeat left center;
}

.box-search .recent-search .list .btn-remove {
  width: 16px;
  height: 16px;
  border: none;
  background: url("https://static.mediacdn.vn/sohashorts/images/close.svg") no-repeat 0 0/contain;
}

.box-search .search-suggess h4 {
  padding: 0 12px;
  margin: 0 0 4px;
  color: #565656;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
}

.box-search .search-suggess .list > * + * {
  margin-top: 4px;
}

.box-search .search-suggess .list li {
  padding: 8px 8px 8px 12px;
  cursor: pointer;
}

.box-search .search-suggess .list p {
  padding-left: 28px;
  color: #040404;
  font: 500 16px/24px Inter, sans-serif;
  background: url("https://static.mediacdn.vn/sohashorts/images/icon-search.svg") no-repeat left center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.box-search .form-search-box .short-search-suggest-dropdown {
  position: absolute;
  left: 16px;
  right: 16px;
  top: 52px;
  z-index: 40;
  max-height: 240px;
  overflow-y: auto;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.12);
  border: 1px solid var(--stroke-02, #ebebeb);
  padding: 8px 0 12px;
}

.box-search .short-suggest-line {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  text-align: left;
}

.box-search .short-suggest-line:hover p {
  color: var(--shorts-logo-accent, #d20001);
}

.box-search .short-recent-empty,
.box-search .short-trend-empty {
  display: block;
  padding: 8px 12px;
  color: #999;
  font: 400 14px/22px Inter, sans-serif;
}

.page-content {
  flex: 1;
  padding: 32px 78px;
  overflow: auto;
}

@media (max-width: 1600px) {
  .page-content {
    padding: 32px;
  }
}
.page-content::-webkit-scrollbar {
  width: 4px;
}

.page-content::-webkit-scrollbar-thumb {
  background: #dcdcdc;
  border-radius: 4px;
}

.page-content .title {
  margin-bottom: 12px;
  color: #040404;
  font-weight: 600;
  font-size: 20px;
  line-height: 28px;
}

.page-content .swiper-tag {
  height: auto;
  margin-bottom: 40px;
}

.page-content .swiper-tag .swiper-slide {
  width: auto;
}

.page-content .swiper-tag .swiper-wrapper {
  height: auto;
}

.page-content .swiper-tag a {
  display: flex;
  align-items: center;
  padding: 8px 12px 8px 8px;
  gap: 8px;
  border-radius: 8px;
  background: #f5f5f5;
  color: #040404;
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
}

.page-content .swiper-tag a span {
  color: var(--shorts-logo-accent);
}

.tab-search {
  margin-bottom: 32px;
  display: flex;
  border-bottom: 1px solid var(--Stroke-01, #f1f1f1);
}

.tab-search a,
.tab-search button {
  padding: 10px 20px;
  border: none;
  background: none;
  position: relative;
  color: #565656;
  font: 500 16px/24px Inter, sans-serif;
}

.tab-search a.active,
.tab-search button.active {
  color: #040404;
}

.tab-search a.active::after,
.tab-search button.active::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--shorts-logo-accent);
}

.box-result {
  margin-bottom: 12px;
  color: #565656;
  font-size: 16px;
  line-height: 24px;
}

.box-result span {
  font-weight: 500;
  color: #292929;
}

.tags {
  padding-top: 12px;
  border-top: 1px solid #f1f1f1;
  margin-bottom: 40px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tags a {
  display: flex;
  align-items: center;
  padding: 8px 12px 8px 8px;
  gap: 8px;
  border-radius: 8px;
  background: #f5f5f5;
  color: #040404;
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
}

.tags a span {
  color: var(--shorts-logo-accent);
}

.info-short .title,
.info-short .cate-day {
  text-align: left !important;
}

.info-short {
  bottom: 16px !important;
  top: inherit;
  left: 16px !important;
  right: inherit;
}

.vtvshort .vjs-tech {
  -o-object-fit: cover;
  object-fit: cover;
}

@media (max-width: 1600px) {
  .box-short-video .box-ads {
    display: none;
  }
}
.keyboard-action {
  position: fixed;
  right: 38px;
  bottom: 171px;
  z-index: 100;
}

.keyboard-action.open .list-action-keyboard {
  opacity: 1;
  visibility: visible;
  bottom: calc(100% + 10px);
}

.keyboard-action .in-flex {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.keyboard-action .icon-keyboard {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #1f1f1f;
  cursor: pointer;
}

.keyboard-action .icon-keyboard .ic {
  fill: #bdbdbd;
  width: 27px;
  height: 27px;
}

.keyboard-action .list-action-keyboard {
  width: 280px;
  border-radius: 10px 10px 0px 0px;
  background: #151515;
  padding: 16px 0 16px 0;
  position: absolute;
  right: 10px;
  bottom: 80%;
  opacity: 0;
  visibility: hidden;
  transition-duration: 300ms;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.7, 1, 0.7, 1);
}

.keyboard-action .list-action-keyboard .head-action {
  width: 100%;
  padding: 0 16px 16px 16px;
  border-bottom: 1px solid #1f1f1f;
  margin-bottom: 8px;
  color: #e5e5e5;
  font-size: 14px;
  font-weight: 600;
  line-height: normal;
}

.keyboard-action .list-action {
  width: 100%;
  display: flex;
  padding: 0 16px 0 16px;
  flex-direction: column;
  gap: 4px;
}

.keyboard-action .list-action li {
  align-items: center;
  display: flex;
}

.keyboard-action .list-action .icon-action {
  width: 36px;
  height: 36px;
  border-radius: 4px;
  background: #2c2626;
  flex-shrink: 0;
}

.keyboard-action .list-action .icon-action .ic {
  width: 16px;
  height: 16px;
  fill: #bdbdbd;
}

/* 4 phím mũi tên: chevron Down.svg giống nút prev/next feed (ảnh 1) */
.keyboard-action .list-action .icon-action.icon-up,
.keyboard-action .list-action .icon-action.icon-down,
.keyboard-action .list-action .icon-action.icon-right,
.keyboard-action .list-action .icon-action.icon-left {
  background-color: #2c2626;
  background-image: url("https://static.mediacdn.vn/sohashorts/images/Down.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 18px 18px;
}

.keyboard-action .list-action .icon-action.icon-up {
  transform: none;
}

.keyboard-action .list-action .icon-action.icon-down {
  transform: rotate(180deg);
}

.keyboard-action .list-action .icon-action.icon-right {
  transform: rotate(-90deg);
}

.keyboard-action .list-action .icon-action.icon-left {
  transform: rotate(90deg);
}

.keyboard-action .list-action .txt-action {
  flex-shrink: 1;
  flex-grow: 1;
  padding-left: 16px;
  color: #e5e5e5;
  font-size: 14px;
  line-height: normal;
}

.modal-share {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
  opacity: 0;
  visibility: hidden;
  background: rgba(0, 0, 0, 0.5);
}

.modal-share.active {
  z-index: 99;
  opacity: 1;
  visibility: visible;
}

.modal-share .modal-content {
  max-width: 460px;
  background: #fff;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 8px;
  box-shadow: 0 2px 8px 0 rgba(51, 51, 51, 0.12);
}

.modal-share .modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #f0f0f0;
  padding: 6px 20px;
}

.modal-share .modal-header .title {
  margin: 0;
  color: #292929;
  font: 600 16px/24px "SF Pro Display", sans-serif;
}

.modal-share .modal-header .btn-close-modal-share {
  padding: 0;
  border: none;
  background: none;
  height: 28px;
}

.modal-share .modal-body {
  padding: 20px;
}

.modal-share .modal-body .list-share {
  display: flex;
  justify-content: space-between;
}

.modal-share .modal-body .list-share a {
  display: block;
  padding: 8px;
  text-align: center;
  font: 400 14px/22px "SF Pro Display", sans-serif;
}

.modal-share .modal-body .list-share a span {
  margin-top: 4px;
  display: block;
}

.modal-share .modal-body .list-share a img {
  width: 37px;
  height: 37px;
  margin: 0 auto;
  -o-object-fit: cover;
  object-fit: cover;
  border-radius: 50%;
}

.modal-share .copy {
  padding: 7px 12px;
  margin-top: 16px;
  border-radius: 4px;
  border: 1px solid var(--stroke-05, #e2e2e2);
  background: var(--Color-White, #fff);
  display: flex;
}

.modal-share .copy .url {
  flex: 1;
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font: 400 14px/22px "SF Pro Display";
  color: #292929;
}

.modal-share .copy .btn-copy {
  border-radius: 99px;
  background: var(--shorts-logo-accent);
  color: #fff;
  border-radius: 9999px;
  padding: 2px 8px;
  border: none;
  font: 400 14px/22px "SF Pro Display";
  cursor: pointer;
}

.modal-share .copy .btn-copy.btn-copy-success {
  background: #ecfdf5;
  color: #059669;
  font-weight: 500;
  cursor: default;
}

.modal-share .copy .btn-copy:disabled {
  opacity: 1;
}

/* Mo rong layout 16 (feed doc, video, volume) — phan co ban trong scss/_box.scss */
/* Shorts: scroll doc + snap; video giua viewport thi play (IntersectionObserver) */
.box-category[data-layout="16"] .box-category-middle .swiper.short-video-feed {
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
  padding-left: 12px;
}

.box-category[data-layout="16"] .box-category-middle .swiper.short-video-feed .short-video-wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

.box-category[data-layout="16"] .swiper-slide.short-video-snap {
  min-height: calc(100vh - 122px);
  scroll-snap-align: start;
  scroll-snap-stop: always;
  flex-shrink: 0;
  box-sizing: border-box;
}

/* Feed dùng Swiper.js (vertical): tắt scroll-snap tay, để Swiper điều khiển */
.box-category[data-layout="16"] .box-category-middle .swiper.short-video-feed.short-swiper-js {
  overflow: hidden;
  scroll-snap-type: none;
  scroll-behavior: auto;
}

.box-category[data-layout="16"] .box-category-middle .swiper.short-video-feed.short-swiper-js .short-video-wrapper {
  height: 100%;
}

.box-category[data-layout="16"] .swiper.short-video-feed.short-swiper-js .swiper-slide.short-video-snap {
  height: calc(100vh - 122px);
  min-height: calc(100vh - 122px);
  scroll-snap-align: unset;
  scroll-snap-stop: unset;
}

.short-empty-msg {
  margin: auto;
  padding: 40px 20px;
  color: #707070;
  font: 500 16px/24px Inter, sans-serif;
}

.box-category[data-layout="16"] .short-video-snap .vPlayer {
  position: relative;
  width: min(100%, (100vh - 140px) * 9 / 16);
  aspect-ratio: 9/16;
  max-height: calc(100vh - 140px);
  margin: 0;
  flex-shrink: 0;
  background: #111;
  overflow: hidden;
  border-radius: 12px;
}

.box-category[data-layout="16"] .short-native-video {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
  border-radius: 12px;
}

/* Short feed: volume goc tren-trai video; prev/next .swiper-nav-control ben phai */
.short-top-ui {
  position: absolute;
  left: 10px;
  top: 10px;
  z-index: 6;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  pointer-events: none;
}

.short-top-ui > * {
  pointer-events: auto;
}

.short-volume-widget {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px 5px 8px;
  border-radius: 999px;
  background: rgba(45, 45, 45, 0.85);
}

/* Chi hien thanh volume khi hover vung video; mobile/touch luon hien */
@media (hover: hover) and (pointer: fine) {
  .vPlayer .short-volume-widget {
    opacity: 0;
    transition: opacity 0.2s ease;
    pointer-events: none;
  }
  .vPlayer:hover .short-volume-widget,
  .vPlayer .short-volume-widget:focus-within {
    opacity: 1;
    pointer-events: auto;
  }
}
.short-vol-icon-btn {
  width: 34px;
  height: 34px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.short-vol-icon-btn:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

.short-vol-svg {
  display: block;
  flex-shrink: 0;
}

.short-vol-range {
  width: 72px;
  height: 14px;
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
  background: transparent;
  vertical-align: middle;
}

.short-vol-range::-webkit-slider-runnable-track {
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(to right, #fff 0%, #fff var(--vol-pct, 0%), rgba(255, 255, 255, 0.28) var(--vol-pct, 0%), rgba(255, 255, 255, 0.28) 100%);
}

.short-vol-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 7px;
  height: 7px;
  margin-top: -2px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15);
}

.short-vol-range::-moz-range-track {
  height: 3px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.28);
}

.short-vol-range::-moz-range-progress {
  height: 3px;
  border-radius: 2px;
  background: #fff;
}

.short-vol-range::-moz-range-thumb {
  width: 7px;
  height: 7px;
  border: none;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15);
}

.short-center-playpause {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 4;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  border: none;
  background: rgba(0, 0, 0, 0.4);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.2s ease, transform 0.15s ease;
  opacity: 0;
  pointer-events: none;
}

.box-category[data-layout="16"] .short-video-snap .vPlayer:hover .short-center-playpause,
.box-category[data-layout="16"] .short-video-snap .vPlayer:focus-within .short-center-playpause {
  opacity: 0.95;
  pointer-events: auto;
}

.short-center-playpause:hover {
  background: rgba(0, 0, 0, 0.52);
}

.short-center-playpause:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
  opacity: 0.95;
  pointer-events: auto;
}

.short-ico-play {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 16px 0 16px 26px;
  border-color: transparent transparent transparent #fff;
  margin-left: 8px;
}

.short-ico-pause {
  display: flex;
  gap: 7px;
}

.short-ico-pause::before,
.short-ico-pause::after {
  content: "";
  width: 7px;
  height: 28px;
  background: #fff;
  border-radius: 1px;
}

.short-load-more-hint {
  text-align: center;
  padding: 16px 12px 24px;
  color: #707070;
  font: 500 14px/20px Inter, sans-serif;
}

/* Đáy khung video: chữ (trên) + thanh progress sát cạnh dưới (flex-end, progress là phần tử cuối) */
.short-video-bottom-stack {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 8;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 6px;
  padding: 0;
  pointer-events: none;
}

.box-category[data-layout="16"] .short-video-bottom-stack .short-video-meta-overlay {
  position: relative;
  left: auto;
  right: auto;
  bottom: auto;
  margin: 0;
  min-width: 0;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  padding: 0 16px 2px 10px;
  z-index: 2;
}

.short-feed-progress-pc {
  width: 100%;
  flex-shrink: 0;
  height: 4px;
  background: rgba(255, 255, 255, 0.28);
  border-radius: 0 0 12px 12px;
  overflow: hidden;
  pointer-events: none;
}

.short-feed-progress-pc__fill {
  height: 100%;
  width: 0;
  background: #ff2d55;
  transition: width 0.08s linear;
}

.short-video-meta-overlay {
  position: absolute;
  left: 10px;
  right: 20px;
  bottom: 10px;
  z-index: 2;
  text-align: left;
  color: #fff;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.65);
  pointer-events: none;
}

.short-video-meta-overlay .short-time-ago {
  font: 500 13px/18px Inter, sans-serif;
  opacity: 0.95;
}

.short-video-meta-overlay .short-title-line,
.short-video-meta-overlay .short-sapo-line {
  pointer-events: auto;
  cursor: pointer;
}

.short-video-meta-overlay .short-title-line {
  margin: 6px 0 0;
  font: 600 15px/22px Inter, sans-serif;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.short-video-meta-overlay .short-sapo-line {
  margin: 4px 0 0;
  font: 400 14px/20px Inter, sans-serif;
  opacity: 0.92;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.short-video-meta-overlay .short-title-line.is-expanded,
.short-video-meta-overlay .short-sapo-line.is-expanded {
  display: block;
  -webkit-line-clamp: unset;
  overflow: visible;
}

.box-category[data-layout="16"] .box-category-middle .box-category-item {
  display: flex;
  align-items: flex-end;
  gap: 16px;
  justify-content: center;
}

/* Short feed: khoang cach video va nut tim/chia se/phat lai */
.box-category[data-layout="16"] .box-category-middle .box-category-item.short-video-snap {
  gap: 12px;
  justify-content: center;
}

.box-category[data-layout="16"] .box-category-middle .box-category-item.short-video-snap .box-category-action {
  flex-shrink: 0;
  padding-bottom: 56px;
  margin-left: 4px;
}

.box-category[data-layout="16"] .box-category-middle .box-category-item.show-comment {
  justify-content: flex-end;
  padding-right: 62px;
}

.box-category[data-layout="16"] .box-category-middle .box-category-item.show-comment .vPlayer {
  left: -20px;
}

.box-category[data-layout="16"] .box-category-middle .box-category-item .box-category-link-with-avatar {
  width: 100%;
  height: 100%;
}

.box-category[data-layout="16"] .box-category-middle .box-category-item .box-category-link-with-avatar video,
.box-category[data-layout="16"] .box-category-middle .box-category-item .box-category-link-with-avatar img {
  height: 100%;
  border-radius: 12px;
}

.box-category[data-layout="16"] .box-category-middle .box-category-item .box-category-action {
  display: flex;
  flex-direction: column;
  padding-bottom: 60px;
}

.box-category[data-layout="16"] .box-category-middle .box-category-item .box-category-action > * + * {
  margin-top: 12px;
}

.box-category[data-layout="16"] .box-category-middle .box-category-item .box-category-action button {
  background: none;
  border: none;
  padding: 0;
  font-family: Inter, sans-serif;
  cursor: pointer;
}

.box-category[data-layout="16"] .box-category-middle .box-category-item .box-category-action button.active svg path {
  fill: #D4111B;
}

.box-category[data-layout="16"] .box-category-middle .box-category-item .box-category-action button.active .icon-comment {
  background: #d1d1d1 url("https://static.mediacdn.vn/sohashorts/images/comment.svg") no-repeat center center;
}

.box-category[data-layout="16"] .box-category-middle .box-category-item .box-category-action .icon {
  width: 48px;
  height: 48px;
  margin-bottom: 4px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
}

.box-category[data-layout="16"] .box-category-middle .box-category-item .box-category-action .icon-heart {
  background: url("https://static.mediacdn.vn/sohashorts/images/heart.svg") no-repeat center center;
}

.box-category[data-layout="16"] .box-category-middle .box-category-item .box-category-action .icon-comment {
  background: #F1F1F1 url("https://static.mediacdn.vn/sohashorts/images/comment.svg") no-repeat center center;
}

.box-category[data-layout="16"] .box-category-middle .box-category-item .box-category-action .icon-save {
  background: #F1F1F1 url("https://static.mediacdn.vn/sohashorts/images/save.svg") no-repeat center center;
}

.box-category[data-layout="16"] .box-category-middle .box-category-item .box-category-action .icon-share {
  background: url("https://static.mediacdn.vn/sohashorts/images/share.svg") no-repeat center center;
}

.box-category[data-layout="16"] .box-category-middle .box-category-item .box-category-action .icon-replay {
  background: url("https://static.mediacdn.vn/sohashorts/images/icon-replay.svg") no-repeat center center;
}

.box-category[data-layout="16"] .box-category-middle .box-category-item .box-category-action span {
  white-space: nowrap;
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  text-align: center;
  color: #292929;
}

.box-category[data-layout="16"] .swiper-slide {
  width: 100%;
  margin: 0 auto;
  border-radius: 12px;
}

.box-category[data-layout="16"] .vPlayer {
  width: 100%;
  max-width: calc((100vh - 40px) / 1.7777777778);
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  transition: left 0.45s;
  left: 0px;
}

.box-category[data-layout="16"] .vPlayer .thumb {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

.box-category[data-layout="16"] .VCSortableInPreviewMode {
  height: 100%;
}

.box-category[data-layout="16"] .swiper-nav-control {
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: absolute;
  right: 38px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
}

.box-category[data-layout="16"] .swiper-nav-control a, .box-category[data-layout="16"] .swiper-nav-control button {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #F5F5F5 url("https://static.mediacdn.vn/sohashorts/images/Down.svg") no-repeat center center;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
}

/* Down.svg (sohashorts) là caret lên; prev = lên; next xoay 180° = xuống */
.box-category[data-layout="16"] .swiper-nav-control button.short-feed-nav-next {
  transform: rotate(180deg);
}

.box-category[data-layout="16"] .swiper-nav-control a.swiper-button-disabled, .box-category[data-layout="16"] .swiper-nav-control button.swiper-button-disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.box-category[data-layout="16"] .swiper-nav-control button.short-feed-nav-prev:disabled,
.box-category[data-layout="16"] .swiper-nav-control button.short-feed-nav-next:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

/* Luoi danh muc Short — cot giua co gian + cuon */
.box-short-video .short-category-grid-shell {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  height: 100%;
}

.box-short-video .page-content.short-category-grid-scroll {
  flex: 1;
  min-height: 0;
}

/* Chi tiet Short: hero doc + luoi cung danh muc */
.box-short-video .short-category-detail-shell {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  height: 100%;
}

.short-category-detail-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 24px 22px 40px;
}

.short-detail-hero-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: 8px;
  width: 100%;
  min-width: 0;
}

.short-detail-hero-row {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  justify-content: center;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  min-height: calc(100vh - 122px);
  box-sizing: border-box;
}

.short-detail-hero-row .vPlayer {
  position: relative;
  /* Row must have definite width first; otherwise min(100%, …) is cyclic and collapses the player. */
  width: calc((100vh - 140px) * 9 / 16);
  max-width: 100%;
  aspect-ratio: 9/16;
  max-height: calc(100vh - 140px);
  margin: 0;
  flex-shrink: 0;
  background: #111;
  border-radius: 12px;
  overflow: hidden;
}

/* Detail short: video layer dưới overlay (tránh compositor đè chữ/progress) */
.short-detail-hero-row .short-video-bottom-stack {
  z-index: 10;
}

/* Detail short: cùng logic feed — chữ trên, progress sát đáy khung */
.short-detail-hero-row .short-video-bottom-stack .short-video-meta-overlay {
  position: relative;
  left: auto;
  right: auto;
  bottom: auto;
  margin: 0;
  min-width: 0;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  padding: 0 16px 4px 10px;
  z-index: 2;
}

.short-detail-hero-row .short-video-meta-overlay .short-title-line {
  font: 500 13px/18px Inter, sans-serif;
}

.short-detail-hero-row .short-native-video {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
  border-radius: 12px;
}

.short-detail-hero-row .vPlayer:hover .short-center-playpause,
.short-detail-hero-row .vPlayer:focus-within .short-center-playpause {
  opacity: 0.95;
  pointer-events: auto;
}

.short-detail-hero-row .box-category-action {
  display: flex;
  flex-direction: column;
  padding-bottom: 56px;
  flex-shrink: 0;
}

.short-detail-hero-row .box-category-action > * + * {
  margin-top: 12px;
}

.short-detail-hero-row .box-category-action button {
  background: none;
  border: none;
  padding: 0;
  font-family: Inter, sans-serif;
  cursor: pointer;
}

.short-detail-hero-row .box-category-action .icon {
  width: 48px;
  height: 48px;
  margin-bottom: 4px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
}

.short-detail-hero-row .box-category-action .icon-heart {
  background: #f1f1f1 url("https://static.mediacdn.vn/sohashorts/images/heart.svg") no-repeat center center;
}

.short-detail-hero-row .box-category-action .icon-share {
  background: #f1f1f1 url("https://static.mediacdn.vn/sohashorts/images/share.svg") no-repeat center center;
}

.short-detail-hero-row .box-category-action .icon-replay {
  background: #f1f1f1 url("https://static.mediacdn.vn/sohashorts/images/icon-replay.svg") no-repeat center center;
}

.short-detail-hero-row .box-category-action span {
  white-space: nowrap;
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  text-align: center;
  color: #292929;
}

.short-detail-grid-section {
  padding-top: 16px;
  border-top: 1px solid var(--Stroke-01, #f1f1f1);
}

.short-detail-grid-section .box-category[data-layout="4"] {
  margin-bottom: 0;
}

/* Trang /kham-pha.chn: tag swiper cuon ngang (khong can Swiper JS) */
.page-short-video .page-content.explore-discover .explore-discover-tags .swiper-wrapper {
  display: flex;
  flex-wrap: nowrap;
  gap: 10px;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  padding-bottom: 4px;
}

.page-short-video .page-content.explore-discover .explore-discover-tags .swiper-slide {
  flex: 0 0 auto;
}

.page-short-video .explore-discover-shell.short-category-grid-shell .page-content.explore-discover {
  overflow-y: auto;
}

/* VTVShort: thanh progress desktop — ẩn mặc định, hover vùng feed hoặc video */
@media (hover: hover) and (pointer: fine) {
  .page-short-video .vtvshort-progress--desktop {
    opacity: 0;
    transition: opacity 0.2s ease;
  }
  /* Chi tiet Short: khong co .short-video-feed / data-layout="16" — luon hien progress */
  .page-short-video .short-detail-hero-row .vtvshort-progress--desktop {
    opacity: 1;
  }
  .page-short-video .short-video-feed:hover .vtvshort-progress--desktop,
  .page-short-video .short-video-feed:focus-within .vtvshort-progress--desktop,
  .page-short-video .box-category[data-layout="16"] .vPlayer:hover .vtvshort-progress--desktop,
  .page-short-video .box-category[data-layout="16"] .vPlayer:focus-within .vtvshort-progress--desktop {
    opacity: 1;
  }
}