/* ====== PORTFOLIO SHOWCASE (dung chung "mau thiet ke") — BEM / design.md ======
   File CSS DUNG CHUNG cho toan bo UI "luoi card + popup xem nhanh" cua du lieu
   mau thiet ke (tintuc.danhmuc=28). Thay the cac ban sao rieng le truoc day:
   shortcode-portfolio.css, inan-news-portfolio.css (phan pf-*, KHONG gom
   .pf-hero — xem css/inan-portfolio-hero.css), inan-related-designs.css,
   inan-related-portfolio.css, va phan pf-*/pf-modal* trong search.css.
   KHONG lien quan project-marquee.css (.prjm-*) — marquee trang chu la he
   thong rieng, doc lap, khong gop vao day. */
.pf-showcase{max-width:1200px;margin:0 auto;padding:0 32px}
/* Wrap: nut prev/next dinh vi ABSOLUTE de KHONG choan cho tren hang filter
   (.pf-filters van chiem full be rong .pf-filters-wrap, 2 nut noi de len 2
   dau, khong day hep noi dung filter nhu truoc — filter khong con nut cung
   luon co the tu cuon full-width). .pf-filters-wrap lam positioning context
   (position:relative). KHONG them padding cho .pf-filters — 2 nut noi de
   truc tiep len button filter dau/cuoi khi tran (chap nhan, theo yeu cau).
   .pf-filters giu nguyen selector/margin-bottom rieng (van dung doc lap
   khong can wrap, vi du markup cu chua kip cap nhat) — .pf-filters-wrap chi
   override margin-bottom thanh 0 tren .pf-filters de tranh cong don khoang
   cach. */
.pf-filters-wrap{position:relative;margin-bottom:20px}
.pf-filters-wrap .pf-filters{margin-bottom:0}
/* mask-image fade khi cuon ngang — dung y het ky thuat .clogo-viewport
   (customer-logos.css) de bao hieu con noi dung ngoai vung nhin thay, khong
   cat cut cung o mep (dac biet quan trong vi khong con padding chan nut).
   Gia tri o day chi la mac dinh truoc khi JS chay lan dau; pfUpdateFiltersNav/
   vidUpdateFiltersNav/svcUpdateFiltersNav (js/portfolio-showcase.js va cac
   ban clone) TU TINH LAI qua inline style moi lan cuon/resize — CHI fade
   dung phia con nut dang hien (con noi dung de cuon toi), khong fade phia
   nut da an (het noi dung) — xem pfApplyFadeMask/vidApplyFadeMask/
   svcApplyFadeMask/applyVidFadeMask. */
.pf-filters{display:flex;flex-wrap:nowrap;gap:8px;margin-bottom:20px;overflow-x:auto;scroll-behavior:smooth;scrollbar-width:none;-ms-overflow-style:none;-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%)}
.pf-filters::-webkit-scrollbar{display:none}
.pf-filters__btn{background:#fff;border:1px solid #D8E2E6;border-radius:4px;padding:8px 12px;font-size:0.875rem; cursor:pointer;transition:all .25s ease;flex:0 0 auto;white-space:nowrap}
.pf-filters__btn:hover{border-color:#293F7B;color:#293F7B}
.pf-filters__btn--active{background:#293F7B;color:#fff;border-color:#293F7B}
/* Nut vua active vua hover: ".pf-filters__btn:hover" (0,2,0) dac hieu hon
   ".pf-filters__btn--active" (0,1,0) nen se de chu mau navy (:hover) de len
   nen navy (--active) -> mat chu. Rule nay (0,2,0, khai bao sau) giu chu
   trang khi hover nut dang active. */
.pf-filters__btn--active:hover{color:#fff}
/* Nut dieu huong scroll — dinh vi absolute noi de len 2 dau .pf-filters-wrap
   (xem comment tren), khong con la flex item choan cho nua. An mem (opacity/
   visibility, khong display:none) khi khong the cuon them ve huong do, kem
   .pf-filters__nav--collapsed (shortcode-video.css) an han display:none khi
   ca hang khong tran. */
.pf-filters__nav{position:absolute;top:50%;transform:translateY(-50%);z-index:2;display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;background:#fff;border:1px solid #D8E2E6;color:#293F7B;cursor:pointer;font-size:1rem;line-height:1;padding:0;transition:background .2s ease,border-color .2s ease,color .2s ease,transform .15s ease,box-shadow .2s ease;box-shadow:0 1px 3px rgba(16,24,40,.06)}
.pf-filters__nav--prev{left:0}
.pf-filters__nav--next{right:0}
.pf-filters__nav:hover{background:#293F7B;border-color:#293F7B;color:#fff;transform:translateY(calc(-50% - 1px));box-shadow:0 4px 10px rgba(41,63,123,.25)}
.pf-filters__nav:active{transform:translateY(-50%)}
.pf-filters__nav--hidden{opacity:0;visibility:hidden;pointer-events:none}
.pf-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
@media(min-width:768px){.pf-grid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:992px){.pf-grid{grid-template-columns:repeat(4,1fr)}}
@media(min-width:1200px){.pf-grid{grid-template-columns:repeat(4,1fr);gap:16px}}
/* Card: dung dung cau truc + kieu dang cua .prjm-card (marquee trang chu) —
   anh tren + footer trang chua tieu de + nut mui tren, KHONG con overlay
   "Xem nhanh" hay tag danh muc tren card nua. */
.pf-card{display:block;background: linear-gradient(rgba(255, 255, 255, 0.2) 0%, #fff 100%);border: 1px solid #D8E2E6;border-radius:12px;overflow:hidden;padding:12px;text-decoration:none;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease}
.pf-card:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(16,24,40,.1);text-decoration:none}
.pf-card__img{position:relative;width:100%}
.pf-card__img::before{content:'';display:block;padding-top:77.5%}
.pf-card__img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;border-radius:8px}
.pf-card__footer{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-top:16px}
.pf-card__text{min-width:0}
.pf-card__title{margin:0;font-size:0.875rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pf-card__arrow{flex:0 0 auto;display:flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;color:var(--ivd-brand,#1d52d7);background:#eef3fd;font-size:1rem;transition:background .2s,color .2s}
.pf-card:hover .pf-card__arrow{background:var(--ivd-brand,#1d52d7);color:#fff}
/* Pagination */
.pf-pagination{text-align:center;margin-top:40px}
.pf-more-btn{display:none;color:#fff;border:none;border-radius:4px;padding:10px 24px;font-size:1rem;cursor:pointer;}
.pf-spinner{display:none}
.pf-spinner i{color:#F7941D}
/* Loading skeleton - khop dung hinh dang .pf-card moi (border/padding/bo goc) */
.pf-skeleton{border:1px solid #D8E2E6;border-radius:12px;overflow:hidden;background:#fff;padding:12px}
.pf-skeleton__img{width:100%;aspect-ratio:1/1.29;border-radius:8px;background:linear-gradient(110deg,#ececec 8%,#f5f5f5 18%,#ececec 33%);background-size:200% 100%;animation:pfShine 1.5s linear infinite}
.pf-skeleton__body{padding-top:16px}
.pf-skeleton__line{height:14px;border-radius:3px;margin-bottom:8px;background:linear-gradient(110deg,#ececec 8%,#f5f5f5 18%,#ececec 33%);background-size:200% 100%;animation:pfShine 1.5s linear infinite}
@keyframes pfShine{to{background-position-x:-200%}}

/* ====== POPUP MODAL — Premium (ban day du, khong thieu nav/counter/img-wrap
   nhu ban cu inan-related-designs.css tung bi) ====== */
.pf-modal{position:fixed;inset:0;z-index:99999;display:none!important;align-items:center;justify-content:center;padding:20px}
.pf-modal--open{display:flex!important}
.pf-modal__backdrop{position:absolute;inset:0;background:rgba(15,20,40,.72);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.pf-modal__content{position:relative;background:#fff;border-radius:12px;box-shadow:0 24px 60px rgba(0,0,0,.25);display:flex;max-width:980px;width:100%;max-height:88vh;overflow:hidden;animation:pfPopIn .3s cubic-bezier(.16,1,.3,1)}
@keyframes pfPopIn{from{opacity:0;transform:scale(.94) translateY(16px)}to{opacity:1;transform:scale(1) translateY(0)}}
.pf-modal__close{position:absolute;top:14px;right:14px;width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.92);color:inherit;border:none;font-size:22px;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:10;box-shadow:0 2px 8px rgba(0,0,0,.12);transition:background .2s,transform .2s}
.pf-modal__close:hover{background:#fff;transform:scale(1.08)}
.pf-modal__gallery{flex:0 0 56%;display:flex;flex-direction:column;background:#f7f7f9;overflow:hidden}
.pf-modal__img-wrap{position:relative;flex:1;min-height:0;display:flex;align-items:center;justify-content:center;overflow:hidden;padding:16px}
.pf-modal__main-img{max-width:100%;max-height:100%;object-fit:contain;border-radius:4px;display:block;transition:opacity .22s ease;user-select:none}
.pf-modal__main-img.pf-fade{opacity:0}
.pf-modal__nav{position:absolute;top:50%;transform:translateY(-50%);width:35px;height:35px;border-radius:50%;background:rgba(255,255,255,.9);border:none;cursor:pointer;z-index:3;display:flex;align-items:center;justify-content:center;font-size:22px;color:inherit;box-shadow:0 2px 10px rgba(0,0,0,.15);transition:background .18s,transform .18s,box-shadow .18s;line-height:1}
.pf-modal__nav:hover{background:#fff;transform:translateY(-50%) scale(1.1);box-shadow:0 4px 16px rgba(0,0,0,.2)}
.pf-modal__prev{left:5px}.pf-modal__next{right:5px}
.pf-modal__nav--hidden{opacity:0;pointer-events:none}
.pf-modal__counter{position:absolute;bottom:10px;left:50%;transform:translateX(-50%);background:rgba(0,0,0,.5);color:#fff;font-size:12px;font-weight:500;letter-spacing:.5px;padding:3px 10px;border-radius:20px;pointer-events:none;white-space:nowrap}
.pf-modal__thumbs{display:flex;gap:6px;padding:10px 16px 16px;overflow-x:auto;flex-shrink:0;scroll-behavior:smooth;-webkit-overflow-scrolling:touch}
.pf-modal__thumbs::-webkit-scrollbar{height:4px}
.pf-modal__thumbs::-webkit-scrollbar-track{background:transparent}
.pf-modal__thumbs::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:4px}
.pf-modal__thumb{width:60px;height:60px;border-radius:6px;overflow:hidden;cursor:pointer;flex-shrink:0;border:2px solid transparent;opacity:.55;transition:opacity .18s,border-color .18s,transform .18s,box-shadow .18s}
.pf-modal__thumb:hover{opacity:.85;transform:scale(1.06)}
.pf-modal__thumb--active{border-color:var(--ivd-brand,#1d52d7);opacity:1;box-shadow:0 2px 8px rgba(29,82,215,.35)}
.pf-modal__thumb img{width:100%;height:100%;object-fit:cover;display:block}
.pf-modal__info{flex:0 0 44%;min-height:0;padding:16px;display:flex;flex-direction:column;overflow-y:auto}
.pf-modal__tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px}
.pf-modal__tag{background:#EEF4FF;color:#293F7B;font-size:0.75rem;padding:3px 9px;border-radius:3px;font-weight:500}
.pf-modal__title{font-size:1.125rem;font-weight:700;color:#1a1a2e;margin:0 0 14px;line-height:1.3;letter-spacing:-.2px}
.pf-modal__excerpt{font-size:0.875rem;color:#657384;margin:0 0 16px;flex:1}
.pf-modal__divider{border:none;border-top:2px solid var(--ivd-brand,#1d52d7);margin:0 0 16px;opacity:.8}
.pf-modal__cta{display:inline-flex;align-items:center;gap:8px;background:var(--ivd-brand,#1d52d7);color:#fff;border:none;border-radius:50px;padding:11px 22px;font-size:0.875rem;font-weight:600;cursor:pointer;text-decoration:none;transition:opacity .2s,transform .15s;align-self:flex-start}
.pf-modal__cta:hover{opacity:.9;color:#fff;text-decoration:none;transform:translateY(-1px)}
.pf-modal__cta svg{width:15px;height:15px}
.pf-modal__loading{display:flex;align-items:center;justify-content:center;width:100%;padding:60px;color:#94a3b8;font-size:0.875rem}
/* ====== RESPONSIVE ====== */
@media(max-width:991px){
.pf-showcase{padding:0 20px}
}
@media(max-width:767px){
.pf-showcase{padding:0 16px}
.pf-modal__content{flex-direction:column;max-height:92vh;border-radius:8px}
.pf-modal__gallery{flex:none}
.pf-modal__img-wrap{height:52vw;min-height:200px}
.pf-modal__info{flex:none}
.pf-modal__title{font-size:18px}
.pf-modal__thumb{width:50px;height:50px}
.pf-filters__btn{font-size:0.875rem;padding:6px 12px;}
.pf-filters__nav{width:28px;height:28px;font-size:0.875rem}
}

/* ====== .pf-showcase--catpage — CHI danh cho trang danh muc cap 2 ID 28
   (news_portfolio.php), dong bo grid/nut Xem them/filter voi mau brand
   (news_blog.php, cap 2 ID=30). KHONG dung selector bare .pf-showcase/.pf-grid/
   .pf-more-btn/.pf-filters__btn o day de tranh anh huong cac noi khac dang tai
   su dung chung cac class nay (shortcode [portfolio], related-portfolio...) —
   xem comment dau file. pf-card/pf-modal KHONG bi dong den, giu nguyen 100%. */
/* .nb-showcase (news_blog.php) chi co max-width+margin, padding do .container
   long ben trong lo — .pf-showcase goc (dung chung shortcode) lai tu co san
   padding:0 32px rieng, nen o day phai reset ve 0 de khong bi cong don padding
   voi .container vua them vao news_portfolio.php. */
.pf-showcase--catpage{max-width:1280px;margin:0 auto;padding:0}
.pf-showcase--catpage .pf-grid{grid-template-columns:repeat(1,1fr);gap:16px}
@media(min-width:576px){.pf-showcase--catpage .pf-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:768px){.pf-showcase--catpage .pf-grid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:992px){.pf-showcase--catpage .pf-grid{grid-template-columns:repeat(4,1fr)}}
@media(max-width:767px){.pf-showcase--catpage .pf-grid{gap:12px}}
/* Filter tag — doi mau navy #293F7B cu sang mau brand + bo pill, dong bo voi
   nut "Xem them"/mui ten pf-card ben duoi (deu dung var(--ivd-brand)). Cac
   thuoc tinh con lai (display/gap/padding/font-size...) giu nguyen tu goc. */
.pf-showcase--catpage .pf-filters__btn{border-radius:50px}
.pf-showcase--catpage .pf-filters__btn:hover{border-color:var(--ivd-brand,#1d52d7);color:var(--ivd-brand,#1d52d7)}
.pf-showcase--catpage .pf-filters__btn--active{background:var(--ivd-brand,#1d52d7);border-color:var(--ivd-brand,#1d52d7); color: #fff}
/* Nut vua active vua hover: ".pf-filters__btn:hover" (0,3,0) dac hieu hon
   ".pf-filters__btn--active" (0,2,0) nen se de xanh chu (:hover) de len nen
   xanh (--active) -> mat chu. Rule nay gop ca 2 class + :hover (0,3,0, cung
   dac hieu nhung khai bao SAU nen thang) de giu chu trang khi hover nut dang active. */
.pf-showcase--catpage .pf-filters__btn--active:hover{color:#fff}
/* Nut dieu huong filter — dong bo mau brand voi .pf-filters__btn ben tren,
   cung ly do/pattern nhu comment o dong 110. */
.pf-showcase--catpage .pf-filters__nav{color:var(--ivd-brand,#1d52d7)}
.pf-showcase--catpage .pf-filters__nav:hover{background:var(--ivd-brand,#1d52d7);border-color:var(--ivd-brand,#1d52d7); color: #fff}
/* Nut "Xem them" — CHI override 2 thuoc tinh thuc su khac so voi .pf-more-btn
   goc (border-radius 4px->50px, padding 10px 24px->16px 48px). Cac thuoc tinh
   con lai (display:none, border:none, cursor:pointer, color:#fff, font-size:
   14px, font-weight:500) giong het gia tri goc nen KHONG khai bao lai o day —
   tranh code trung lap/gay hieu lam la dang doi thu gi do. "background" cung
   khong khai bao lai: de background-image cua .btn-gradient (header-search.css,
   class them vao HTML) tu phu len tren mau cam #FCAF19 mac dinh, khong can !important. */
.pf-showcase--catpage .pf-more-btn{border-radius:50px;padding:16px 48px}
/* .pf-pagination goc chi co text-align+margin-top, khong co padding —
   .nb-load-more (inan-news-blog.css, ID 30) co them padding:8px 0 48px tren
   chinh wrapper de tao khoang trong duoi nut. Them dung gia tri nay, scoped
   rieng cho trang danh muc, khong dung .pf-pagination bare. */
.pf-showcase--catpage .pf-more-btn i{margin-right:4px}
/* Tuong duong .nb-section-heading (css/inan-news-blog.css) — cung gia tri,
   dat rieng o day de khong phai nap chung ca file CSS blog vao trang portfolio. */
.pf-section-heading{font-size:1.5rem;font-weight:600;margin:0 0 24px;letter-spacing:-0.029em}
/* Khoi "Video noi bat" (news_portfolio.php) — chi khoang cach duoi truoc khi
   sang khoi "Mau thiet ke". KHONG dung selector bare .vid-showcase vi component
   nay dung chung voi trang chu (render_design_video_html(), main_content.php)
   da co spacing rieng qua .row-home, khong duoc dong vao. */
@media(max-width:1200px){
.pf-video-section{margin-top:24px}
.pf-showcase--catpage{margin-top:24px}
}
@media(max-width:767px){
.pf-section-heading{font-size:1.25rem}
}