/* ====== VIDEO SHOWCASE — Slider ====== */
.vid-showcase{max-width:1280px;}
.vid-filters { display: flex; flex-wrap: nowrap; gap: 10px; justify-content: flex-start; max-width: 100%; width: fit-content; margin: 0 auto 24px; padding: 5px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;}
/* Khong co filter (che do ids=... luon bo qua filter, hoac category/parent
   khong co tag nao) — div rong khong duoc chiem khoang trong (padding+margin). */
.vid-filters:empty { display: none; margin: 0; padding: 0; }
.vid-filters::-webkit-scrollbar{display:none}
/* Cho .vid-filters chay dung trong .pf-filters-wrap (nut prev/next tai dung
   tu portfolio-showcase.css, dinh vi absolute noi de len 2 dau wrap — xem
   comment .pf-filters-wrap trong portfolio-showcase.css). width:auto thay
   the width:fit-content cua rule goc de .vid-filters tu nhien chiem full be
   rong wrap (khong can flex:1 nua vi .pf-filters-wrap khong con la flex
   container). KHONG padding ngang (2 nut noi de truc tiep len button dau/
   cuoi khi tran, chap nhan theo yeu cau — giong .pf-filters). mask-image
   fade — dung y het ky thuat .clogo-viewport (customer-logos.css). Gia tri
   o day chi la mac dinh truoc khi JS chay lan dau; vidUpdateFiltersNav/
   updateVidFiltersNav TU TINH LAI qua inline style — CHI fade dung phia
   con nut dang hien (con noi dung de cuon toi), khong fade phia nut da
   an/collapsed (het noi dung) — xem vidApplyFadeMask/applyVidFadeMask. */
.pf-filters-wrap .vid-filters{margin:0;width:auto;padding:5px 0;-webkit-mask-image:linear-gradient(to right,transparent 0%,#000 8%,#000 92%,transparent 100%);mask-image:linear-gradient(to right,transparent 0%,#000 8%,#000 92%,transparent 100%)}
/* Khi hang filter khong tran (khong can cuon) thi an han 2 nut prev/next
   (display:none, khac voi .pf-filters__nav--hidden dung opacity/visibility
   luc dang cuon do) de khong con khoang trong thua o 2 dau .pf-filters-wrap. */
.pf-filters__nav--collapsed{display:none}
.vid-filters-heading{font-size:1rem;font-weight:600;margin:0 0 16px}
.vid-filters__btn { flex: 0 0 auto; white-space: nowrap; background: #fff; border: 0; padding: 8px 12px; font-size: 0.875rem; cursor: pointer; transition: all .25s ease; border-radius: 50px; border:1px solid #D8E2E6 }
.vid-filters__btn:hover{   border-color: var(--ivd-brand,#1d52d7);
    color: var(--ivd-brand,#1d52d7)}
.vid-filters__btn--active { background: #1250DC; color: #fff; border-color: #1250DC; border-radius: 50px; }
.vid-filters__btn--active:hover { color:#fff }
/* ── Slider ── */
.vid-slider{position:relative}
.vid-slider__viewport{overflow:hidden}
.vid-slider__track{display:flex;gap:16px;transition:transform .42s cubic-bezier(.25,.46,.45,.94);will-change:transform}
/* ── Slide Card — 9:16 with overlay title ── */
.vid-slide{flex:0 0 calc(20% - 12.8px);border-radius:12px;overflow:hidden;cursor:pointer;position:relative}
.vid-slide__inner{position:relative;width:100%;aspect-ratio:9/16;overflow:hidden}
.vid-slide__img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s ease}
.vid-slide:hover .vid-slide__img{transform:scale(1.06)}
.vid-slide__overlay{position:absolute;inset:0;background:linear-gradient(to bottom,transparent 42%,rgba(0,0,0,.82) 100%);display:flex;flex-direction:column;justify-content:flex-end;padding:12px 12px 14px;pointer-events:none}
.vid-slide__tags{display:flex;flex-wrap:wrap;gap:3px;margin-bottom:5px}
.vid-slide__tag{background:rgba(255,255,255,.18);color:#fff;font-size:0.75rem;padding:2px 7px;border-radius:3px;backdrop-filter:blur(4px)}
.vid-slide__title{margin:0;font-size:0.875rem;font-weight:600;color:#fff;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-shadow:0 1px 4px rgba(0,0,0,.6)}
.vid-slide__play{position:absolute;top:40%;left:50%;transform:translate(-50%,-50%);width:54px;height:54px;border-radius:50%;background:rgba(255,255,255,.2);display:flex;align-items:center;justify-content:center;transition:background .3s,transform .3s;backdrop-filter:blur(6px);pointer-events:none}
.vid-slide:hover .vid-slide__play{background:rgba(255,255,255,.36);transform:translate(-50%,-50%) scale(1.1)}
.vid-slide__play svg{width:20px;height:20px;margin-left:3px}
/* Overlay nav arrow buttons */
.vid-slider__prev,.vid-slider__next{position:absolute;top:45%;transform:translateY(-50%);z-index:10;width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.92);color:#222;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:24px;line-height:1;padding:0;box-shadow:0 4px 16px rgba(0,0,0,.22);transition:background .2s,box-shadow .2s,transform .18s}
.vid-slider__prev{left:-8px}.vid-slider__next{right:-8px}
.vid-slider__prev:hover,.vid-slider__next:hover{background:#fff;box-shadow:0 6px 20px rgba(0,0,0,.28);transform:translateY(-50%) scale(1.08)}
.vid-slider__btn--hidden{opacity:0;pointer-events:none}
/* Skeleton */
.vid-slide--skel .vid-slide__inner{background:linear-gradient(110deg,#1c1c1c 8%,#2a2a2a 18%,#1c1c1c 33%);background-size:200% 100%;animation:vidShine 1.5s linear infinite}
@keyframes vidShine{to{background-position-x:-200%}}
/* Responsive */
@media(max-width:1199px){.vid-slide{flex-basis:calc(25% - 12px)}}
@media(max-width:991px){.vid-slide{flex-basis:calc(33.333% - 10.667px)}}
@media(max-width:767px){
	.vid-slider__track {gap: 12px}
.vid-slide{flex-basis:calc(50% - 8px)}
.vid-slider__prev{left:-4px}.vid-slider__next{right:-4px}
.vid-slider__prev,.vid-slider__next{width:34px;height:34px;font-size:20px}
}

/* ====== Grid (khong slider) — trang /video (news.php ke thua .pf-showcase--
   catpage, xem video.php) va tab Video o trang tim kiem (js/search.js::
   srWrap(), khong co .pf-showcase--catpage) — CHI 2 noi nay dung ca 2 class
   "vid-showcase"+"pf-grid" tren cung 1 wrapper hoac lam to tien-hau due, nen
   selector duoi day KHONG dung den block [video] shortcode thuong (chi co
   .vid-showcase, khong pf-grid/pf-showcase--catpage) hay ID=28/dich vu ID=9
   (chi co pf-showcase--catpage, khong vid-showcase). Do dac hieu cao hon
   .pf-showcase--catpage .pf-grid (0,2,0) va .pf-grid bare @1200 (0,1,0) nen
   thang tuyet doi, khong phu thuoc thu tu nap file. */
@media(min-width:1200px){
.vid-showcase.pf-showcase--catpage .pf-grid,
.vid-showcase.pf-grid{grid-template-columns:repeat(5,1fr)}
}
/* Man hinh rat nho (<576px): .pf-showcase--catpage .pf-grid mac dinh ve 1 cot
   (dung cho ID=28/portfolio anh vuong), nhung the thumbnail video 9:16 hep
   hon nen 1 cot bi rong/lang phi — ep toi thieu 2 cot cho ca 2 noi dung
   .vid-showcase. Cung tien the loai bo han truong hop bien lam tron pixel
   o dung moc 576px (vi du man hinh scale 125%/150% tren Windows co the tinh
   ra 575.9x thay vi 576, khien rule @media(min-width:576px) khong kich hoat
   va ket qua sai ve 1 cot). */
@media(max-width:575px){
.vid-showcase.pf-showcase--catpage .pf-grid,
.vid-showcase.pf-grid{grid-template-columns:repeat(2,1fr)}
}

/* ====== VIDEO POPUP MODAL — TikTok/Reels style ====== */
.vid-modal{position:fixed;inset:0;z-index:99999;display:none!important;align-items:center;justify-content:center}
.vid-modal--open{display:flex!important}
.vid-modal__backdrop{position:absolute;inset:0;background:rgba(15, 20, 40, .72);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.vid-modal__close{position:fixed;top:16px;right:16px;z-index:3;width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.79);border:none;font-size:22px;cursor:pointer;display:flex;align-items:center;justify-content:center;line-height:1;padding:0;transition:background .2s,transform .2s;box-shadow:0 2px 12px rgba(0,0,0,.3)}
.vid-modal__close:hover{background:rgba(255,255,255,.3);transform:scale(1.08)}
.vid-modal__box{position:relative;z-index:1;display:flex;align-items:center;gap:16px}
/* Player — tall 9:16, fills most of screen height */
.vid-modal__player-wrap{height:88vh;aspect-ratio:9/16;background:#000;border-radius:12px;overflow:hidden;position:relative;flex-shrink:0;max-width:calc(88vh * 9 / 16)}
.vid-modal__player-wrap--horizontal{height:auto;aspect-ratio:16/9;width:min(80vw,calc(82vh * 16 / 9));max-width:none}
.vid-modal__player-wrap--square{height:auto;aspect-ratio:1/1;width:min(80vw,82vh);max-width:none}
.vid-modal__iframe,.vid-modal__video{position:absolute;inset:0;width:100%;height:100%;border:none;display:block}
.vid-modal__loading{display:flex;align-items:center;justify-content:center;height:100%;min-height:320px;color:#555;font-size:14px;background:#111;border-radius:12px}
/* Vertical nav — right side of player */
.vid-modal__side-nav{display:flex;flex-direction:column;gap:14px;align-self:center}
.vid-modal__nav-up,.vid-modal__nav-down{width:46px;height:46px;border-radius:50%;background:rgba(255,255,255,.16);color:#fff;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:22px;line-height:1;padding:0;transition:background .2s,transform .2s}
.vid-modal__nav-up svg,.vid-modal__nav-down svg{width:25px;height:24px;}
.vid-modal__nav-up:hover,.vid-modal__nav-down:hover{background:rgba(255,255,255,.3);transform:scale(1.08)}
.vid-modal__nav--hidden{opacity:.2;pointer-events:none}
@media(max-width:767px){
.vid-modal__player-wrap{height:auto;width:calc(100vw - 76px);max-width:none;aspect-ratio:9/16;max-height:90vh;border-radius:8px}
.vid-modal__box{gap:8px}
.vid-modal__side-nav{gap:16px}
.vid-modal__nav-up,.vid-modal__nav-down{width:38px;height:38px;font-size:18px}
.vid-modal__close{top:12px;right:12px;width:32px;height:32px;font-size:18px}
}
@media(max-width:380px){
.vid-modal__player-wrap{width:calc(100vw - 60px)}
.vid-modal__nav-up,.vid-modal__nav-down{width:30px;height:30px;font-size:14px}
.vid-modal__box{gap:6px}
}