/* ==========================================================================
   File: web2/templates/blocks/video-feed/style.css
   Version: v3.1.2 COMPACT — TikTok-style Shorts CSS fullscreen feed
   - Sync with:
     + templates/blocks/video-feed/block.js
     + templates/blocks/video-feed/render.php
     + templates/blocks/video-feed/render-part.php
     + assets/js/video-feed-runtime.js
     + assets/js/video-player-runtime.js
     + assets/js/video-player-shorts-addon.js
   - Purpose:
     + Feed wrapper/layout/filter/pagination
     + Title/meta/badge/overlay
     + Shorts rail alignment
     + Loading / appended items / state bridge
     + Grid thumb UX: hover-only controls
     + Hide center play while playing
   ========================================================================== */

/* ==========================================================================
   ROOT
   ========================================================================== */

.pf-vf {
  width: var(--pf-container-w, 100%);
  margin: var(--pf-m, 0 auto 40px); /* Đã đồng bộ với logic fix lỗi margin */
  padding: var(--pf-pad, 0);

  background-color: var(--pf-bg, transparent);
  border-width: var(--pf-b-width, 0);
  border-style: var(--pf-b-style, solid);
  border-color: var(--pf-b-color, transparent);
  border-radius: var(--pf-b-radius, 12px);
  box-shadow: var(--pf-shadow, none);

  position: relative;
  container-type: inline-size;
}

.pf-vf * {
  box-sizing: border-box;
}

.pf-vf.is-loading .pf-vf-wrapper {
  opacity: .55;
  pointer-events: none;
  transition: opacity .25s ease;
}

/* ==========================================================================
   HEADER
   ========================================================================== */

.pf-vf-head {
  display: flex;
  flex-direction: column;
  align-items: var(--pf-head-align, flex-start);
  position: relative;

  padding: var(--pf-head-pad, 0);
  margin: var(--pf-head-m, 0 0 16px 0);

  background: var(--pf-head-bg, transparent);
  color: var(--pf-head-color, inherit);
}

.pf-vf-head .pf-title-wrap {
  display: flex;
  align-items: center;
  justify-content: var(--pf-head-align, flex-start);
  width: 100%;
  text-align: var(--pf-head-align, left);
}

.pf-vf-head .pf-title {
  margin: 0;
  line-height: 1.25;
  font-size: var(--pf-head-fs, 24px);
  font-weight: var(--pf-head-fw, 700);
  font-style: var(--pf-head-fstyle, normal);
  text-transform: var(--pf-head-tt, none);
}

.pf-vf-head .pf-title a {
  color: inherit;
  text-decoration: none;
}

.pf-vf-head .pf-title a:hover {
  opacity: .86;
}

/* line top / bottom */
.pf-vf-head[data-line="1"][data-line-pos="bottom"]::after,
.pf-vf-head[data-line="1"][data-line-pos="top"]::before {
  content: "";
  display: block;
  position: relative;
  height: var(--pf-head-line-thickness, 3px);
  width: var(--pf-head-line-len, 40%);
  background: var(--pf-head-line-color, currentColor);
  border-radius: 2px;
}

.pf-vf-head[data-line="1"][data-line-pos="bottom"]::after {
  margin-top: var(--pf-head-line-offset, 6px);
}

.pf-vf-head[data-line="1"][data-line-pos="top"]::before {
  margin-bottom: var(--pf-head-line-offset, 6px);
}

/* line left / right */
.pf-vf-head[data-line-pos="left"] .pf-title-wrap,
.pf-vf-head[data-line-pos="right"] .pf-title-wrap {
  gap: var(--pf-head-line-offset, 8px);
}

.pf-vf-head[data-line="1"][data-line-pos="left"] .pf-title-wrap::before,
.pf-vf-head[data-line="1"][data-line-pos="right"] .pf-title-wrap::after {
  content: "";
  display: block;
  flex-shrink: 0;
  height: var(--pf-head-line-thickness, 3px);
  width: var(--pf-head-line-len, 40px);
  background: var(--pf-head-line-color, currentColor);
  border-radius: 2px;
}

.pf-vf-head[data-line="1"][data-line-pos="right"] .pf-title-wrap .pf-title {
  order: -1;
}

/* mid line */
.pf-vf-head[data-line="1"][data-line-pos="mid"] .pf-title {
  position: relative;
  display: inline-block;
}

.pf-vf-head[data-line="1"][data-line-pos="mid"] .pf-title::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: var(--pf-head-line-thickness, 3px);
  background: var(--pf-head-line-color, currentColor);
  transform: translateY(-50%);
  pointer-events: none;
  opacity: .95;
}

/* ==========================================================================
   HEADER + FILTER WRAP
   ========================================================================== */

.pf-vf-header-filter-wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 15px;
  margin-bottom: 16px;
}

.pf-vf-header-filter-wrap.is-inline .pf-vf-head {
  margin-bottom: 0;
  flex-grow: 1;
}

.pf-vf-header-filter-wrap.is-inline .pf-filter {
  margin-bottom: 0;
  justify-content: var(--pf-head-filter-align, flex-start);
}

@media (max-width: 767.98px) {
  .pf-vf-header-filter-wrap {
    flex-direction: column;
    align-items: stretch;
  }
  .pf-vf-header-filter-wrap.is-inline .pf-filter {
    width: 100%;
  }
}

/* ==========================================================================
   FILTER
   ========================================================================== */

.pf-vf .pf-filter {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  flex-wrap: wrap;
  justify-content: var(--pf-head-filter-align, flex-start);
}

.pf-vf .pf-filter .pf-dropdown {
  min-width: 180px;
  max-width: 100%;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid #e5e7eb;
  background: #fff;
  color: #0f172a;
  outline: none;
}

.pf-vf .pf-filter .pf-pill,
.pf-vf .pf-filter .pf-tab {
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid #334155;
  background: transparent;
  color: inherit;
  cursor: pointer;
  user-select: none;
  transition: all .2s ease;
}

.pf-vf .pf-filter .pf-tab {
  border-radius: 8px;
}

.pf-vf .pf-filter .pf-pill:hover,
.pf-vf .pf-filter .pf-tab:hover {
  opacity: .82;
}

.pf-vf .pf-filter .is-active {
  background: #22d3ee;
  color: #000;
  border-color: #22d3ee;
  font-weight: 600;
}

/* ==========================================================================
   WRAPPERS
   ========================================================================== */

.pf-vf-wrapper {
  width: 100%;
  position: relative;
}

.pf-vf-item {
  display: flex;
  flex-direction: column;
  width: 100%;
  position: relative;
  min-width: 0;
  animation: pfVfFadeIn .22s ease;
}

@keyframes pfVfFadeIn {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ==========================================================================
   GRID MODE (Đã Fix lỗi Container Width Builder)
   ========================================================================== */

.pf-vf-grid {
  display: grid;
  grid-template-columns: repeat(var(--pf-vf-cols, 3), minmax(0, 1fr));
  gap: var(--pf-vf-gap, 24px);
}

/* Container Queries: Hạ mốc breakpoint xuống 800px để không dính nhầm ở PC Canvas (Builder) */
@container (max-width: 800px) {
  .pf-vf-grid {
    grid-template-columns: repeat(var(--pf-vf-cols-t, 2), minmax(0, 1fr));
  }
}

@container (max-width: 480px) {
  .pf-vf-grid {
    grid-template-columns: repeat(var(--pf-vf-cols-m, 1), minmax(0, 1fr));
  }
}

/* Media Queries Fallback cho các trình duyệt hoặc ngữ cảnh không bọc container */
@supports not (container-type: inline-size) {
  @media (max-width: 991.98px) {
    .pf-vf-grid {
      grid-template-columns: repeat(var(--pf-vf-cols-t, 2), minmax(0, 1fr));
    }
  }
  @media (max-width: 767.98px) {
    .pf-vf-grid {
      grid-template-columns: repeat(var(--pf-vf-cols-m, 1), minmax(0, 1fr));
    }
  }
}

/* ==========================================================================
   SCROLL / SHORTS MODE
   ========================================================================== */

.pf-vf-scroll {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--pf-vf-gap, 40px);
  width: 100%;
}

.pf-vf-scroll .pf-vf-item {
  width: min(420px, 100%);
  margin: 0 auto;
}

.pf-vf-scroll .pf-vp {
  width: 100%;
  height: calc(100vh - 80px);
  max-height: 850px;
  aspect-ratio: 9 / 16;
  box-shadow: 0 18px 60px rgba(0,0,0,.35);
}

.pf-vf-scroll.is-snapping {
  height: 100vh;
  max-height: 850px;
  overflow-y: auto;
  scroll-snap-type: y mandatory;
  scrollbar-width: none;
}

.pf-vf-scroll.is-snapping::-webkit-scrollbar {
  display: none;
}

.pf-vf-scroll.is-snapping .pf-vf-item {
  scroll-snap-align: center;
  scroll-snap-stop: always;
  height: 100%;
  justify-content: center;
}

@media (max-width: 520px) {
  .pf-vf-scroll .pf-vf-item {
    width: 100%;
  }

  .pf-vf-scroll .pf-vp {
    height: auto !important;
    max-height: none;
    border-radius: 0;
    box-shadow: none;
  }

  .pf-vf-scroll.is-snapping {
    max-height: none;
  }
}

/* ==========================================================================
   TITLE / META CONTENT
   ========================================================================== */

.pf-vf-content {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  margin: var(--vf-t-m, 12px 0 0 0);
  align-items: var(--vf-t-align, flex-start);
  min-width: 0;
}

.pf-vf-title-link {
  width: 100%;
  pointer-events: auto;
  text-decoration: none;
  font-size: var(--vf-t-fs, 16px);
  font-weight: var(--vf-t-fw, 600);
  font-style: var(--vf-t-style, normal);
  text-transform: var(--vf-t-tt, none);
  color: var(--vf-t-c, #ffffff);
  background: var(--vf-t-bg, transparent);
  padding: var(--vf-t-pad, 0);
  text-align: var(--vf-t-text-align, left);
  transition: opacity .2s;
  text-shadow: var(--vf-t-shadow, none);

  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.pf-vf-title-link:hover {
  opacity: .82;
  text-decoration: underline;
}

.pf-vf-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  font-size: var(--vf-m-fs, 13px);
  color: var(--vf-m-c, #cbd5e1);
  font-weight: 400;
  line-height: 1.4;
  text-shadow: var(--vf-t-shadow, none);
}

.pf-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
}

.pf-meta-item svg {
  width: 1.1em;
  height: 1.1em;
  flex-shrink: 0;
  opacity: .85;
}

/* ==========================================================================
   OVERLAY CONTENT
   ========================================================================== */

.pf-vf-overlay {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 25;
  display: flex;
  padding: 15px;
  pointer-events: none;
}

.pf-vf-overlay .pf-vf-content {
  margin: 0;
}

.pf-vf-overlay .pf-vf-title-link {
  pointer-events: auto;
}

.pf-vf-overlay.is-top {
  top: 0;
}

.pf-vf-overlay.is-bottom {
  bottom: 40px;
}

/* dành chỗ cho right rail trong shorts */
.pf-vp.pf-vp--shorts .pf-vf-overlay {
  padding-right: 72px;
}

@media (max-width: 520px) {
  .pf-vp.pf-vp--shorts .pf-vf-overlay {
    padding-right: 66px;
  }
}

/* ==========================================================================
   BADGE
   ========================================================================== */

.pf-vf-badge {
  position: absolute;
  top: 15px;
  z-index: 30;
  background: var(--vf-b-bg, #e30000);
  color: var(--vf-b-c, #ffffff);
  font-size: var(--vf-b-fs, 11px);
  padding: var(--vf-b-pad, 4px 8px);
  border-radius: var(--vf-b-radius, 4px);
  font-weight: 700;
  pointer-events: none;
  box-shadow: 0 4px 12px rgba(0,0,0,.3);
  max-width: calc(100% - 30px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pf-vf-badge.is-left {
  left: 15px;
}

.pf-vf-badge.is-right {
  right: 15px;
}

/* ==========================================================================
   SHORTS / RIGHT RAIL BRIDGE
   ========================================================================== */

.pf-vp.pf-vp--shorts .pf-vpui-top__right {
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
  align-items: center;
  justify-content: flex-start;
  pointer-events: auto;
}

.pf-vpui-action {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-width: 44px;
}

.pf-vpui-action__count {
  font-size: 13px;
  color: #fff;
  font-weight: 600;
  text-shadow: 0 1px 4px rgba(0,0,0,.8);
  text-align: center;
  line-height: 1.2;
  word-break: break-word;
  max-width: 56px;
}

/* trạng thái liked */
.pf-vpui__like.is-liked {
  border-color: rgba(255, 0, 79, .42) !important;
  animation: pfHeartBump .3s cubic-bezier(.175, .885, .32, 1.275);
}

.pf-vpui__like.is-liked::before {
  background: #ff004f !important;
}

@keyframes pfHeartBump {
  0% { transform: scale(1); }
  50% { transform: scale(1.3); }
  100% { transform: scale(1); }
}

/* ==========================================================================
   FEED ↔ PLAYER VISIBILITY BRIDGE
   ========================================================================== */

/* Desktop hover behavior chung */
.pf-vf .pf-vp:not(:hover) .pf-vpui,
.pf-vf .pf-vp:not(:hover) .pf-vpui-top,
.pf-vf .pf-vp:not(:hover) .pf-vpui-menu {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition: all .2s ease !important;
}

.pf-vf .pf-vp:hover .pf-vpui,
.pf-vf .pf-vp:hover .pf-vpui-top {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

/* Runtime classes bridge */
.pf-vf .pf-vp.is-ui-show .pf-vpui,
.pf-vf .pf-vp.is-ui-show .pf-vpui-top {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

.pf-vf .pf-vp.is-ui-hide .pf-vpui,
.pf-vf .pf-vp.is-ui-hide .pf-vpui-top {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* shorts thường cần UI rõ hơn */
.pf-vf-scroll .pf-vp.pf-vp--shorts .pf-vpui-top,
.pf-vf-scroll .pf-vp.pf-vp--shorts .pf-vpui {
  transition: opacity .2s ease, visibility .2s ease;
}

/* ==========================================================================
   GRID THUMB UX — chỉ hover mới hiện control (giống block.js preview)
   Chỉ áp cho grid mode / non-shorts
   ========================================================================== */

/* Mặc định ẩn UI của player trong grid */
.pf-vf-grid .pf-vp:not(.pf-vp--shorts) .pf-vpui,
.pf-vf-grid .pf-vp:not(.pf-vp--shorts) .pf-vpui-top,
.pf-vf-grid .pf-vp:not(.pf-vp--shorts) .pf-vpui-menu {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition: opacity .2s ease, visibility .2s ease !important;
}

/* Hover mới hiện top/bottom/menu */
.pf-vf-grid .pf-vp:not(.pf-vp--shorts):hover .pf-vpui,
.pf-vf-grid .pf-vp:not(.pf-vp--shorts):hover .pf-vpui-top,
.pf-vf-grid .pf-vp:not(.pf-vp--shorts):hover .pf-vpui-menu {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

/* Runtime có thêm is-ui-show thì grid vẫn phải theo hover */
.pf-vf-grid .pf-vp:not(.pf-vp--shorts).is-ui-show:not(:hover) .pf-vpui,
.pf-vf-grid .pf-vp:not(.pf-vp--shorts).is-ui-show:not(:hover) .pf-vpui-top,
.pf-vf-grid .pf-vp:not(.pf-vp--shorts).is-ui-show:not(:hover) .pf-vpui-menu {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Center play: mặc định hiện nhẹ khi chưa play */
.pf-vf-grid .pf-vp:not(.pf-vp--shorts) .pf-vpui-center {
  opacity: .92 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transition: opacity .2s ease, transform .2s ease !important;
}

.pf-vf-grid .pf-vp:not(.pf-vp--shorts):hover .pf-vpui-center {
  opacity: 1 !important;
}

/* QUAN TRỌNG: video đang play thì ẩn nút play giữa */
.pf-vf-grid .pf-vp:not(.pf-vp--shorts).is-playing .pf-vpui-center {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* nếu pause/ended thì hiện lại nút giữa */
.pf-vf-grid .pf-vp:not(.pf-vp--shorts):not(.is-playing) .pf-vpui-center {
  opacity: .92 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

/* đang play nhưng không hover: vẫn ẩn toàn bộ control */
.pf-vf-grid .pf-vp:not(.pf-vp--shorts).is-playing:not(:hover) .pf-vpui,
.pf-vf-grid .pf-vp:not(.pf-vp--shorts).is-playing:not(:hover) .pf-vpui-top,
.pf-vf-grid .pf-vp:not(.pf-vp--shorts).is-playing:not(:hover) .pf-vpui-menu {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* đang play và hover: hiện control dưới/top nhưng nút play giữa vẫn ẩn */
.pf-vf-grid .pf-vp:not(.pf-vp--shorts).is-playing:hover .pf-vpui,
.pf-vf-grid .pf-vp:not(.pf-vp--shorts).is-playing:hover .pf-vpui-top {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

.pf-vf-grid .pf-vp:not(.pf-vp--shorts).is-playing:hover .pf-vpui-center {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* ==========================================================================
   STATE / ERROR / LOADING BRIDGE
   ========================================================================== */

.pf-vf .pf-vp.is-loading {
  cursor: progress;
}

.pf-vf .pf-vp.has-error {
  outline: 1px solid rgba(248,113,113,.3);
  outline-offset: 0;
}

.pf-vf .pf-vp.has-error .pf-vp__err {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 14px;
  color: #fecaca;
  background: linear-gradient(to top, rgba(0,0,0,.75), rgba(0,0,0,.3));
  border-radius: inherit;
}

.pf-vf .pf-vp .pf-vp__spinner {
  transition: opacity .2s ease;
}

.pf-vf .pf-vp:not(.is-loading) .pf-vp__spinner {
  opacity: 0;
  pointer-events: none;
}

/* YouTube wrapper bridge */
.pf-vf .pf-vp .pf-vp__yt-wrapper {
  border-radius: inherit;
  overflow: hidden;
}

/* ==========================================================================
   PAGINATION — NUMBERS / NEXT-PREV
   ========================================================================== */

.pf-vf .pf-pgrid-pagi {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: var(--pf-pagi-m, 30px 0 0 0);
  flex-wrap: wrap;
}

.pf-vf .pf-pgrid-pagi button {
  display: inline-flex;
  height: 36px;
  align-items: center;
  justify-content: center;
  padding: var(--pf-pagi-pad, 8px 16px);
  border-radius: var(--pf-pagi-br, 8px);
  border-width: var(--pf-pagi-bw, 1px);
  border-style: var(--pf-pagi-bs, solid);
  font-size: var(--pf-pagi-fs, 14px);
  font-weight: var(--pf-pagi-fw, 500);
  font-style: var(--pf-pagi-fstyle, normal);
  text-transform: var(--pf-pagi-tt, none);
  border-color: var(--pf-pagi-bc, #334155);
  background: var(--pf-pagi-bg, transparent);
  color: var(--pf-pagi-color, inherit);
  text-decoration: none;
  cursor: pointer;
  transition: all .2s;
}

.pf-vf .pf-pgrid-pagi button:not(:disabled):hover {
  opacity: .82;
  background: rgba(255,255,255,.05);
}

.pf-vf .pf-pgrid-pagi button.is-active {
  background: var(--pf-pagi-bg-active, #22d3ee);
  color: var(--pf-pagi-color-active, #000);
  border-color: var(--pf-pagi-bc-active, #22d3ee);
  font-weight: 700;
}

.pf-vf .pf-pgrid-pagi button:disabled {
  opacity: .4;
  cursor: not-allowed;
}

.pf-vf .pf-pgrid-pagi .pf-page-indicator {
  padding: 0 8px;
  color: var(--pf-pagi-color, #94a3b8);
}

/* ==========================================================================
   LOAD MORE / INFINITE
   ========================================================================== */

.pf-vf .pf-pgrid-load {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: var(--pf-pagi-m, 30px 0 0 0);
}

.pf-vf .pf-pgrid-load button {
  padding: var(--pf-lm-pad, 10px 24px);
  border-radius: var(--pf-lm-br, 999px);
  border-width: var(--pf-lm-bw, 0px);
  border-style: var(--pf-lm-bs, solid);
  font-size: var(--pf-lm-fs, 14px);
  font-weight: var(--pf-lm-fw, 600);
  font-style: var(--pf-lm-fstyle, normal);
  text-transform: var(--pf-lm-tt, none);
  border-color: var(--pf-loadmore-bc, transparent);
  background: var(--pf-loadmore-bg, #22d3ee);
  color: var(--pf-loadmore-color, #0b1220);
  cursor: pointer;
  transition: opacity .2s, transform .2s;
}

.pf-vf .pf-pgrid-load.is-button-mode button {
  display: inline-flex;
}

.pf-vf .pf-pgrid-load:not(.is-button-mode) button {
  display: none;
}

.pf-vf .pf-pgrid-load button:hover {
  opacity: .9;
  transform: translateY(-2px);
}

.pf-vf .pf-pgrid-load button:disabled {
  opacity: .5;
  cursor: not-allowed;
  transform: none;
}

/* ==========================================================================
   SMALL UX HELPERS
   ========================================================================== */

.pf-vf .pf-vp,
.pf-vf .pf-vp * {
  -webkit-tap-highlight-color: transparent;
}

.pf-vf .pf-vp a,
.pf-vf .pf-vp button,
.pf-vf .pf-vp input,
.pf-vf .pf-vp select {
  touch-action: manipulation;
}

.pf-vf-item > .pf-vf-content:first-child {
  margin-top: 0;
  margin-bottom: 10px;
}

.pf-vf-item > .pf-vf-content:last-child {
  margin-top: 10px;
}

/* ==========================================================================
   DARK FRIENDLY DEFAULTS
   ========================================================================== */

.pf-vf .pf-filter .pf-dropdown,
.pf-vf .pf-pgrid-pagi button,
.pf-vf .pf-pgrid-load button {
  backdrop-filter: blur(2px);
}

/* ==========================================================================
   MOBILE TWEAKS
   ========================================================================== */

@media (max-width: 767.98px) {
  .pf-vf .pf-filter {
    gap: 8px;
  }

  .pf-vf .pf-filter .pf-pill,
  .pf-vf .pf-filter .pf-tab {
    padding: 7px 13px;
  }

  .pf-vf .pf-pgrid-pagi {
    gap: 6px;
  }

  .pf-vf .pf-pgrid-pagi button {
    min-width: 34px;
    height: 34px;
  }

  .pf-vf .pf-pgrid-load button {
    width: 100%;
    justify-content: center;
  }

  .pf-vf-scroll .pf-vpui-action__count {
    font-size: 12px;
    max-width: 52px;
  }

  .pf-vf-badge {
    top: 12px;
  }
}

/* ==========================================================================
   SHORTS APP FULLSCREEN UX — TikTok style, vẫn lướt video kế tiếp
   Không dùng native requestFullscreen vì native fullscreen chỉ khóa 1 video hiện tại.
   ========================================================================== */

body.pf-shorts-fullscreen-active {
  overflow: hidden !important;
  overscroll-behavior: none !important;
  touch-action: none;
}

body.pf-shorts-fullscreen-active .pf-vf-scroll--fullscreen,
body.pf-shorts-fullscreen-active .pf-vf-scroll--fullscreen * {
  touch-action: pan-y manipulation;
}

.pf-vp.pf-vp--shorts .pf-vpui__shorts-fs,
.pf-vp.pf-vp--shorts .pf-vpui__fs {
  display: inline-flex !important;
}

.pf-vf-scroll--fullscreen {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  gap: 0 !important;
  z-index: 2147483000 !important;
  background: #000 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  scroll-snap-type: y mandatory !important;
  scrollbar-width: none !important;
  -webkit-overflow-scrolling: touch;
}

.pf-vf-scroll--fullscreen::-webkit-scrollbar {
  display: none !important;
}

.pf-vf-scroll--fullscreen .pf-vf-item {
  width: 100vw !important;
  max-width: none !important;
  height: 100vh !important;
  min-height: 100vh !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  scroll-snap-align: center !important;
  scroll-snap-stop: always !important;
  background: #000 !important;
}

/* Ẩn title/meta nằm ngoài video trong app-fullscreen để giống TikTok hơn. */
.pf-vf-scroll--fullscreen .pf-vf-item > .pf-vf-content:not(.pf-vf-overlay) {
  display: none !important;
}

.pf-vf-scroll--fullscreen .pf-vp.pf-vp--shorts {
  width: min(100vw, 520px) !important;
  height: 100vh !important;
  max-width: 520px !important;
  max-height: none !important;
  margin: 0 auto !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: #000 !important;
  aspect-ratio: auto !important;
}

.pf-vf-scroll--fullscreen .pf-vp.pf-vp--shorts.pf-vp--shorts-fullscreen,
.pf-vf-scroll--fullscreen .pf-vp.pf-vp--shorts.is-shorts-fullscreen {
  outline: 0 !important;
}

.pf-vf-scroll--fullscreen .pf-vp.pf-vp--shorts .pf-vp__stage,
.pf-vf-scroll--fullscreen .pf-vp.pf-vp--shorts .pf-vp__wrap,
.pf-vf-scroll--fullscreen .pf-vp.pf-vp--shorts video.pf-vp__video,
.pf-vf-scroll--fullscreen .pf-vp.pf-vp--shorts .pf-vp__yt-wrapper {
  width: 100% !important;
  height: 100% !important;
  max-height: none !important;
  border-radius: 0 !important;
}

.pf-vf-scroll--fullscreen .pf-vp.pf-vp--shorts video.pf-vp__video {
  object-fit: var(--pf-vp-fit, cover) !important;
  background: #000 !important;
}

.pf-vf-scroll--fullscreen .pf-vp.pf-vp--shorts .pf-vpui-top,
.pf-vf-scroll--fullscreen .pf-vp.pf-vp--shorts .pf-vpui,
.pf-vf-scroll--fullscreen .pf-vp.pf-vp--shorts.is-ui-show .pf-vpui-top,
.pf-vf-scroll--fullscreen .pf-vp.pf-vp--shorts.is-ui-show .pf-vpui {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

.pf-vf-scroll--fullscreen .pf-vp.pf-vp--shorts .pf-vpui-top__right {
  right: max(12px, env(safe-area-inset-right)) !important;
  bottom: max(88px, env(safe-area-inset-bottom)) !important;
}

.pf-vf-scroll--fullscreen .pf-vp.pf-vp--shorts .pf-vpui {
  left: max(12px, env(safe-area-inset-left)) !important;
  right: max(12px, env(safe-area-inset-right)) !important;
  bottom: max(10px, env(safe-area-inset-bottom)) !important;
}

.pf-vf-scroll--fullscreen .pf-vp.pf-vp--shorts .pf-vf-overlay {
  padding-top: max(16px, env(safe-area-inset-top)) !important;
  padding-right: 78px !important;
}

@media (max-width: 520px) {
  .pf-vf-scroll--fullscreen .pf-vp.pf-vp--shorts {
    width: 100vw !important;
    max-width: none !important;
  }

  .pf-vf-scroll--fullscreen .pf-vp.pf-vp--shorts .pf-vf-overlay {
    padding-right: 68px !important;
  }
}

/* ==========================================================================
   PATCH v3.1.2 — Shorts rail always visible + TikTok position
   ========================================================================== */
.pf-vp.pf-vp--shorts .pf-vpui-top{
  display:block !important;
  position:absolute !important;
  inset:0 !important;
  z-index:75 !important;
  opacity:1 !important;
  visibility:visible !important;
  pointer-events:none !important;
}

.pf-vp.pf-vp--shorts .pf-vpui-top__right{
  position:absolute !important;
  top:auto !important;
  right:12px !important;
  bottom:96px !important;
  display:flex !important;
  flex-direction:column !important;
  gap:14px !important;
  align-items:center !important;
  justify-content:flex-end !important;
  opacity:1 !important;
  visibility:visible !important;
  pointer-events:auto !important;
  z-index:90 !important;
}

.pf-vp.pf-vp--shorts .pf-vpui-action{
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  gap:5px !important;
  min-width:48px !important;
  pointer-events:auto !important;
}

.pf-vp.pf-vp--shorts .pf-vpui-action .pf-vpui__btn{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:42px !important;
  height:42px !important;
  min-width:42px !important;
  min-height:42px !important;
  border-radius:999px !important;
  opacity:1 !important;
  visibility:visible !important;
  pointer-events:auto !important;
}

.pf-vp.pf-vp--shorts .pf-vpui-action__count{
  display:block !important;
  opacity:1 !important;
  visibility:visible !important;
  color:#fff !important;
  font-size:12px !important;
  font-weight:800 !important;
  text-shadow:0 2px 8px rgba(0,0,0,.9) !important;
}

/* Ghi đè rule hover cũ: Shorts luôn hiện right rail, dù không hover trên PC/mobile */
.pf-vf .pf-vp.pf-vp--shorts:not(:hover) .pf-vpui-top,
.pf-vf .pf-vp.pf-vp--shorts.is-ui-hide .pf-vpui-top{
  opacity:1 !important;
  visibility:visible !important;
  pointer-events:none !important;
}

.pf-vf .pf-vp.pf-vp--shorts:not(:hover) .pf-vpui-top__right,
.pf-vf .pf-vp.pf-vp--shorts.is-ui-hide .pf-vpui-top__right{
  opacity:1 !important;
  visibility:visible !important;
  pointer-events:auto !important;
}

@media (max-width:520px){
  .pf-vp.pf-vp--shorts .pf-vpui-top__right{
    right:max(10px, env(safe-area-inset-right)) !important;
    bottom:max(90px, env(safe-area-inset-bottom)) !important;
  }
}
/* =========================================================
   Shorts Like Button -> Heart icon đẹp hơn
   Dán ở CUỐI file style.css để ghi đè
   ========================================================= */

.pf-vp.pf-vp--shorts .pf-vpui__like{
  position: relative !important;
  overflow: hidden !important;
  background: rgba(17, 24, 39, .68) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  box-shadow:
    0 10px 24px rgba(0,0,0,.28),
    inset 0 1px 0 rgba(255,255,255,.06) !important;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition:
    transform .18s ease,
    background .18s ease,
    border-color .18s ease,
    box-shadow .18s ease !important;
}

/* reset icon cũ nếu có */
.pf-vp.pf-vp--shorts .pf-vpui__like::before,
.pf-vp.pf-vp--shorts .pf-vpui__like::after{
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  pointer-events: none;
}

/* icon heart */
.pf-vp.pf-vp--shorts .pf-vpui__like::before{
  width: 20px;
  height: 20px;
  background: #ffffff;
  opacity: .98;
  transform: translateY(-1px) scale(1);
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.25));
  -webkit-mask: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'>\
<path d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z'/>\
</svg>") center / contain no-repeat;
          mask: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'>\
<path d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z'/>\
</svg>") center / contain no-repeat;
}

/* vòng glow nhẹ */
.pf-vp.pf-vp--shorts .pf-vpui__like::after{
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(255,255,255,.10) 0%, rgba(255,255,255,0) 72%);
  opacity: .9;
}

/* hover / focus */
.pf-vp.pf-vp--shorts .pf-vpui__like:hover,
.pf-vp.pf-vp--shorts .pf-vpui__like:focus-visible{
  transform: translateY(-1px) scale(1.04) !important;
  background: rgba(30, 41, 59, .78) !important;
  border-color: rgba(255,255,255,.22) !important;
  box-shadow:
    0 14px 28px rgba(0,0,0,.34),
    inset 0 1px 0 rgba(255,255,255,.08) !important;
  outline: none !important;
}

/* trạng thái đã like */
.pf-vp.pf-vp--shorts .pf-vpui__like.is-liked{
  background: linear-gradient(180deg, rgba(255,53,94,.22), rgba(255,0,102,.18)) !important;
  border-color: rgba(255, 68, 119, .55) !important;
  box-shadow:
    0 14px 34px rgba(255, 0, 102, .25),
    inset 0 1px 0 rgba(255,255,255,.10) !important;
}

.pf-vp.pf-vp--shorts .pf-vpui__like.is-liked::before{
  background: linear-gradient(180deg, #ff6b8a 0%, #ff2d55 55%, #ff004f 100%) !important;
  transform: translateY(-1px) scale(1.06);
  filter:
    drop-shadow(0 2px 4px rgba(255, 0, 85, .28))
    drop-shadow(0 0 10px rgba(255, 45, 85, .22));
}

.pf-vp.pf-vp--shorts .pf-vpui__like.is-liked::after{
  background: radial-gradient(circle, rgba(255,45,85,.22) 0%, rgba(255,45,85,0) 72%);
}

/* nhấn xuống */
.pf-vp.pf-vp--shorts .pf-vpui__like:active{
  transform: scale(.96) !important;
}

/* count chữ "Thích" / số like nhìn gọn hơn */
.pf-vp.pf-vp--shorts .pf-vpui__like + .pf-vpui-action__count{
  font-weight: 800 !important;
  letter-spacing: .1px;
}