/* DOCHIFOOD PUBLIC V5.2.0 — VIDEO-ONLY RECOMMENDED SOCIAL FEED */

/* Tab Đề xuất: feed video sạch, không còn ảnh đại diện/card ảnh */
.v5-page[data-page="recommended"] .v5-feed-scroll {
  background: #050706 !important;
  scroll-snap-type: y mandatory !important;
  overscroll-behavior-y: contain !important;
}

.v5-page[data-page="recommended"] .v5-feed {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  background: #050706 !important;
}

.v5-page[data-page="recommended"] .v5-feed-card {
  position: relative !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  overflow: hidden !important;
  scroll-snap-align: start !important;
  scroll-snap-stop: always !important;
  background: #050706 !important;
  box-shadow: none !important;
}

.v5-page[data-page="recommended"] .v5-feed-media,
.v5-page[data-page="recommended"] .v520-video-media {
  position: absolute !important;
  inset: 0 !important;
  background: #050706 !important;
  overflow: hidden !important;
  border-radius: 0 !important;
}

/* Không còn ảnh poster đại diện trong Đề xuất */
.v5-page[data-page="recommended"] .v5-feed-media > img,
.v5-page[data-page="recommended"] .v5-no-image {
  display: none !important;
}

.v5-page[data-page="recommended"] .v5-feed-player,
.v5-page[data-page="recommended"] .v5-feed-player iframe {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  border: 0 !important;
  background: #050706 !important;
  opacity: 1 !important;
  z-index: 2 !important;
}

.v5-page[data-page="recommended"] .v5-feed-player {
  pointer-events: none !important;
}

/* loading tinh gọn, không dùng ảnh đại diện */
.v520-video-loading {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  place-items: center;
  background: #050706;
}
.v520-video-loading span {
  width: 28px;
  height: 28px;
  border: 2px solid rgba(255,255,255,.22);
  border-top-color: rgba(255,255,255,.9);
  border-radius: 50%;
  animation: v520-spin .8s linear infinite;
}
.v5-feed-card.is-playing .v520-video-loading { opacity: 0; pointer-events: none; }
@keyframes v520-spin { to { transform: rotate(360deg); } }

/* gradient chỉ để caption đọc rõ, trong suốt như social video */
.v5-page[data-page="recommended"] .v5-feed-gradient,
.v5-page[data-page="recommended"] .v520-video-gradient {
  display: block !important;
  position: absolute !important;
  z-index: 4 !important;
  inset: 42% 0 0 !important;
  background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,.16) 36%, rgba(0,0,0,.72) 100%) !important;
  pointer-events: none !important;
}

/* Caption góc trái dưới: tên + mô tả */
.v5-page[data-page="recommended"] .v5-feed-info,
.v5-page[data-page="recommended"] .v520-caption {
  position: absolute !important;
  z-index: 10 !important;
  left: 18px !important;
  right: 82px !important;
  bottom: 22px !important;
  min-height: 0 !important;
  padding: 0 !important;
  display: block !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: #fff !important;
  text-shadow: 0 2px 10px rgba(0,0,0,.55) !important;
  pointer-events: none !important;
}

.v5-page[data-page="recommended"] .v5-feed-info small { display: none !important; }

.v5-page[data-page="recommended"] .v5-feed-info h2 {
  margin: 0 0 7px !important;
  display: -webkit-box !important;
  overflow: hidden !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
  color: #fff !important;
  font-size: 18px !important;
  line-height: 1.18 !important;
  font-weight: 900 !important;
  letter-spacing: -.018em !important;
}

.v5-page[data-page="recommended"] .v5-feed-info p {
  margin: 0 !important;
  display: -webkit-box !important;
  overflow: hidden !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 3 !important;
  max-width: 560px !important;
  color: rgba(255,255,255,.92) !important;
  font-size: 13px !important;
  line-height: 1.38 !important;
  font-weight: 500 !important;
}

/* Cột action phải: Báo giá / Like / Share. Không vòng tròn. */
.v5-page[data-page="recommended"] .v5-feed-actions,
.v5-page[data-page="recommended"] .v520-actions {
  position: absolute !important;
  z-index: 12 !important;
  right: 12px !important;
  bottom: 24px !important;
  display: grid !important;
  gap: 14px !important;
  transform: none !important;
}

.v5-page[data-page="recommended"] .v5-round-action,
.v5-page[data-page="recommended"] .v520-action {
  width: 46px !important;
  height: 46px !important;
  min-width: 46px !important;
  min-height: 46px !important;
  padding: 0 !important;
  margin: 0 !important;
  display: grid !important;
  place-items: center !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #fff !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  text-shadow: 0 2px 9px rgba(0,0,0,.65) !important;
}

.v5-page[data-page="recommended"] .v520-action svg {
  width: 29px !important;
  height: 29px !important;
  display: block !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.8 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.48));
}

/* Báo giá active = xanh Dochi */
.v5-page[data-page="recommended"] .v520-action-quote.active {
  color: #38d98b !important;
}
.v5-page[data-page="recommended"] .v520-action-quote.active svg {
  stroke-width: 2.25 !important;
}

/* Like active = tim đỏ fill, dữ liệu vẫn lưu riêng */
.v5-page[data-page="recommended"] .v520-action-like.active {
  color: #ff4258 !important;
}
.v5-page[data-page="recommended"] .v520-action-like.active svg {
  fill: currentColor !important;
  stroke: currentColor !important;
}

/* Xóa các badge cũ khỏi feed video */
.v5-page[data-page="recommended"] .v5-promo-badge,
.v5-page[data-page="recommended"] .v5-duration {
  display: none !important;
}

/* Empty state vẫn sáng, rõ nếu chưa có video */
.v5-page[data-page="recommended"] .v5-error {
  min-height: 100% !important;
  display: grid !important;
  align-content: center !important;
  justify-items: center !important;
  padding: 32px !important;
  text-align: center !important;
  color: #fff !important;
  background: #07100d !important;
}
.v5-page[data-page="recommended"] .v5-error h2 { color: #fff !important; }
.v5-page[data-page="recommended"] .v5-error p { color: rgba(255,255,255,.72) !important; }

/* Desktop: giữ khung video dọc 9:16 chuyên nghiệp thay vì kéo tràn màn hình */
@media (min-width: 900px) {
  .v5-page[data-page="recommended"] .v5-feed {
    width: min(520px, calc(100vw - 180px)) !important;
    height: 100% !important;
    margin: 0 auto !important;
    background: #050706 !important;
  }
  .v5-page[data-page="recommended"] .v5-feed-card {
    width: 100% !important;
    height: 100% !important;
    border-left: 1px solid rgba(255,255,255,.08) !important;
    border-right: 1px solid rgba(255,255,255,.08) !important;
  }
  .v5-page[data-page="recommended"] .v5-feed-info h2 { font-size: 20px !important; }
  .v5-page[data-page="recommended"] .v5-feed-info p { font-size: 14px !important; }
}