/* templates/blocks/block-5/style.css — v3.2 (PRO MAX: Skeleton Pulse, Smooth Fade-in & Image Fix)
 * - Infinite sentinel mode: .pf-pgrid-load is sentinel by default, button shows only in .is-button-mode
 * - Load_more mode: wrapper has .is-button-mode => button visible
 * - Fix typo: --pf-lm-fstyle default
 * - Keep vars parity with block.js/render-part.php
 */

/* =========================
   Root / Wrapper
========================= */
.pf-b5{
  width: var(--pf-container-w, 100%);
  margin: 0 auto var(--pf-bottom-space, 60px);
  padding: var(--pf-pad, 0);

  border-style: var(--pf-b-style, solid);
  border-width: var(--pf-b-width, 0);
  border-color: var(--pf-b-color, transparent);
  border-radius: var(--pf-b-radius, 12px);

  box-shadow: var(--pf-shadow, none);
  background-color: var(--pf-bg, transparent);
  position: relative;
  box-sizing: border-box;
}
.pf-b5 * { box-sizing: border-box; }

/* loading state */
.pf-b5.is-loading .pf-b5-grid{
  opacity: .55;
  pointer-events: none;
  transition: opacity .25s ease;
}

/* =========================
   Header
========================= */
.pf-b5-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-color: var(--pf-head-bg, transparent);
  color: var(--pf-head-color, initial);
}

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

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

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

/* Decorative Line Styles */
.pf-b5-head[data-line="1"][data-line-pos="bottom"]::after,
.pf-b5-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-b5-head[data-line="1"][data-line-pos="bottom"]::after{
  margin-top: var(--pf-head-line-offset, 6px);
}
.pf-b5-head[data-line="1"][data-line-pos="top"]::before{
  margin-bottom: var(--pf-head-line-offset, 6px);
}

.pf-b5-head[data-line-pos="left"] .pf-title-wrap,
.pf-b5-head[data-line-pos="right"] .pf-title-wrap{
  gap: var(--pf-head-line-offset, 8px);
}
.pf-b5-head[data-line="1"][data-line-pos="left"] .pf-title-wrap::before,
.pf-b5-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-color: var(--pf-head-line-color, currentColor);
  border-radius: 2px;
}
.pf-b5-head[data-line="1"][data-line-pos="right"] .pf-title-wrap .pf-title{
  order: -1;
}
.pf-b5-head[data-line="1"][data-line-pos="mid"] .pf-title{
  position: relative;
  display: inline-block;
}
.pf-b5-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;
}

/* Header & Filter Wrapper */
.pf-b5-header-filter-wrap{
  display:flex;
  justify-content: space-between;
  align-items: center;
  gap: 15px;
  margin-bottom: 16px;
}
.pf-b5-header-filter-wrap.is-inline .pf-b5-head{
  margin-bottom: 0;
  flex-grow: 1;
}
.pf-b5-header-filter-wrap.is-inline .pf-filter{
  margin-bottom: 0;
  justify-content: var(--pf-head-filter-align, flex-start);
}

/* =========================
   Filter UI
========================= */
.pf-b5 .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-b5 .pf-filter .pf-dropdown{
  min-width:180px;
  padding:8px 10px;
  border-radius:10px;
  border:1px solid #e5e7eb;
  background:#fff;
}

.pf-b5 .pf-filter .pf-pill,
.pf-b5 .pf-filter .pf-tab{
  padding:8px 12px;
  border-radius:999px;
  border:1px solid #e5e7eb;
  background:#fff;
  cursor:pointer;
  user-select:none;
}

.pf-b5 .pf-filter .pf-tab{
  border-radius:10px;
}

.pf-b5 .pf-filter .is-active{
  background:#111827;
  color:#fff;
  border-color:#111827;
}

/* =========================
   Grid
========================= */
.pf-b5-grid{
  display:grid;
  grid-template-columns: repeat(var(--pf-cols, 1), 1fr);
  gap: var(--pf-gap, 30px);
}

/* =========================
   Card
========================= */
.pf-b5 .pf-pcard{
  position: relative;
  display:flex;
  flex-direction: column;

  padding: var(--pf-item-pad, 20px);
  background-color: var(--pf-item-bg, #fff);

  border-radius: var(--pf-item-br, 8px);
  border: var(--pf-item-bw, 0) var(--pf-item-bs, solid) var(--pf-item-bc, transparent);

  box-shadow: var(--pf-item-shadow, none);
  
  /* BẢN NÂNG CẤP PRO MAX: Thêm Transition để JS có thể tạo hiệu ứng trượt/mờ */
  transition: transform 0.4s ease, opacity 0.4s ease;
}

/* =========================
   Thumb
========================= */
.pf-b5 .pf-thumb{
  position:relative;
  display: block; /* FIX LỖI SẬP ẢNH TƯƠNG TỰ BLOCK-4 */
  overflow:hidden;
  border-radius: var(--pf-thumb-radius, 12px);
  margin-top: 15px;
  margin-bottom: 15px;
  text-decoration: none;
}

.pf-b5 .pf-thumb::before{
  content:'';
  display:block;
  padding-top: var(--pf-thumb-ratio, 56.25%);
}

.pf-b5 .pf-thumb img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit: var(--pf-thumb-fit, cover);
  object-position: center var(--pf-thumb-valign, 50%);
}

/* =========================
   Title
========================= */
.pf-b5 .pf-pcard .pf-title,
.pf-b5 .pf-pcard .pf-title a{
  color: var(--pf-title-color, inherit);
  background: var(--pf-title-bg, transparent);
  text-decoration: none;
}

.pf-b5 .pf-pcard .pf-title{
  padding: var(--pf-title-pad);
  border-radius: var(--pf-title-br);
  border-width: var(--pf-title-bw);
  border-style: var(--pf-title-bs);
  border-color: var(--pf-title-bc, transparent);

  margin: var(--pf-title-space);
  line-height: var(--pf-title-lh);
  font-size: var(--pf-title-fs);
  font-weight: var(--pf-title-fw);
  text-transform: var(--pf-title-tt);
  text-align: var(--pf-title-align, left);
}

/* =========================
   Meta box
========================= */
.pf-b5 .pf-meta{
  padding: var(--pf-meta-box-pad);
  margin: var(--pf-meta-box-m);
  gap: var(--pf-meta-gap);

  color: var(--pf-meta-color, inherit);
  font-size: var(--pf-meta-fs);
  font-weight: var(--pf-meta-fw);

  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content: var(--pf-meta-justify, flex-start);
}

/* META ICONS — safe, no duplicates */
.pf-b5 .pf-meta .pf-meta-item,
.pf-b5 .pf-meta [data-meta],
.pf-b5 .pf-meta .pf-author,
.pf-b5 .pf-meta time{
  display:inline-flex;
  align-items:center;
  gap:.4em;
  line-height:1;
}

.pf-b5 .pf-meta .pf-meta-item[data-meta="author"]::before,
.pf-b5 .pf-meta .pf-meta-item[data-meta="date"]::before,
.pf-b5 .pf-meta [data-meta="author"]::before,
.pf-b5 .pf-meta [data-meta="date"]::before,
.pf-b5 .pf-meta .pf-author::before,
.pf-b5 .pf-meta time::before{
  content:"";
  display:inline-block;
  width: var(--pf-meta-ic-size, 1em);
  height: var(--pf-meta-ic-size, 1em);
  margin-right:.2em;
  background-color: currentColor;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-position:center;  mask-position:center;
  -webkit-mask-size:contain;     mask-size:contain;
}

.pf-b5 .pf-meta .pf-meta-item[data-meta="author"]::before,
.pf-b5 .pf-meta [data-meta="author"]::before,
.pf-b5 .pf-meta .pf-author::before{
  -webkit-mask-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E");
          mask-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E");
}

.pf-b5 .pf-meta .pf-meta-item[data-meta="date"]::before,
.pf-b5 .pf-meta [data-meta="date"]::before,
.pf-b5 .pf-meta time::before{
  -webkit-mask-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E");
          mask-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E");
}

.pf-b5 .pf-meta svg,
.pf-b5 .pf-meta .pf-ic,
.pf-b5 .pf-meta i{
  display:none !important;
}

/* =========================
   Excerpt
========================= */
.pf-b5 .pf-excerpt{
  box-sizing:border-box;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  overflow:hidden;

  text-align: var(--pf-excerpt-align, left);
  column-count: var(--pf-excerpt-cols, 1);
  column-gap: var(--pf-excerpt-gap, 0px);

  color: var(--pf-excerpt-color, inherit);
  background: var(--pf-excerpt-bg, transparent);
  padding: var(--pf-excerpt-pad, 0);
  margin: var(--pf-excerpt-m, var(--pf-excerpt-space, 0));

  border-width: var(--pf-excerpt-bw, 0);
  border-style: var(--pf-excerpt-bs, solid);
  border-color: var(--pf-excerpt-bc, transparent);
  border-radius: var(--pf-excerpt-br, 0);
}

.pf-b5 .pf-excerpt > *:first-child{ margin-top:0; }
.pf-b5 .pf-excerpt > *:last-child{ margin-bottom:0; }

/* =========================
   Read more
========================= */
.pf-b5 .pf-readmore{
  display:inline-block;
  text-decoration:none;
  transition: opacity .2s;

  font-size: var(--pf-readmore-fs);
  font-weight: var(--pf-readmore-fw);
  padding: var(--pf-readmore-pad);
  margin: var(--pf-readmore-m);

  background: var(--pf-readmore-bg);
  color: var(--pf-readmore-color);

  border: var(--pf-readmore-bw) var(--pf-readmore-bs) var(--pf-readmore-bc, transparent);
  border-radius: var(--pf-readmore-br);
}

.pf-b5 .pf-readmore:hover{ opacity:.85; }

.pf-b5 .pf-readmore-wrap{
  display:flex;
  justify-content: var(--pf-btn-align, flex-start);
}

/* =========================
   Category & Badge
========================= */
.pf-b5 .pf-badge{
  display: var(--pf-cat-display, inline-block);
  margin: var(--pf-cat-spacing, 0 6px 6px 0);
  padding: var(--pf-cat-padding, 4px 10px);

  font-size: var(--pf-cat-fs, 13px);
  font-weight: var(--pf-cat-fw, 600);
  line-height: var(--pf-cat-lh, 1);
  font-style: var(--pf-cat-style, normal);
  text-transform: var(--pf-cat-tt, none);

  border-radius: var(--pf-cat-br, 6px);
  border-width: var(--pf-cat-bw, 0);
  border-style: var(--pf-cat-bs, solid);
  border-color: var(--pf-cat-bc, transparent);

  background-color: var(--pf-badge-bg, var(--pf-cat-bg, #000));
  color: var(--pf-badge-text, var(--pf-cat-color, #fff));

  text-decoration:none;
  transition: opacity .2s;
}

.pf-b5 a.pf-badge:hover{ opacity:.9; }

.pf-b5 .pf-thumb > .pf-badge{
  position:absolute;
  top:12px;
  left:12px;
  z-index:3;
}
.pf-b5-grid[data-catpos="over"][data-catalign="right"] .pf-thumb > .pf-badge{
  left:auto;
  right:12px;
}
.pf-b5-grid[data-catpos="over"][data-catalign="center"] .pf-thumb > .pf-badge{
  left:50%;
  transform:translateX(-50%);
}

.pf-b5 .pf-cat-row{
  display:flex;
  flex-wrap:wrap;
  justify-content: var(--pf-cat-align-justify, flex-start);
}

/* =========================
   Pagination (numbers/nextprev)
========================= */
.pf-b5 .pf-pgrid-pagi{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  margin: var(--pf-pagi-m, 20px 0 0 0);
  flex-wrap:wrap;
}

.pf-b5 .pf-pgrid-pagi button{
  display:inline-flex;
  height:36px;
  align-items:center;
  justify-content:center;

  padding: var(--pf-pagi-pad, 0 12px);
  border-radius: var(--pf-pagi-br, 10px);
  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, #e5e7eb);
  background: var(--pf-pagi-bg, #fff);
  color: var(--pf-pagi-color, inherit);

  cursor:pointer;
  transition: opacity .2s ease, background-color .2s ease, color .2s ease, border-color .2s ease;
}

.pf-b5 .pf-pgrid-pagi button:not(:disabled):hover{ opacity:.85; }

.pf-b5 .pf-pgrid-pagi button.is-active{
  background: var(--pf-pagi-bg-active, #111827);
  color: var(--pf-pagi-color-active, #fff);
  border-color: var(--pf-pagi-bc-active, #111827);
}

.pf-b5 .pf-pgrid-pagi button:disabled{
  opacity:.5;
  cursor:not-allowed;
}

.pf-b5 .pf-pgrid-pagi .pf-page-indicator{
  padding: 0 8px;
  color: var(--pf-pagi-color, #6b7280);
}

/* =========================
   Load more / Infinite sentinel
========================= */
.pf-b5 .pf-pgrid-load{
  display:flex;
  align-items:center;
  justify-content:center;
  margin: var(--pf-pagi-m, 20px 0 0 0);
  min-height: 44px;
}

.pf-b5 .pf-pgrid-load button{
  padding: var(--pf-lm-pad, 10px 16px);
  border-radius: var(--pf-lm-br, 10px);
  border-width: var(--pf-lm-bw, 1px);
  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, #e5e7eb);
  background: var(--pf-loadmore-bg, #fff);
  color: var(--pf-loadmore-color, inherit);

  cursor:pointer;
  transition: opacity .2s ease;
}

.pf-b5 .pf-pgrid-load button:hover{ opacity:.85; }
.pf-b5 .pf-pgrid-load button:disabled{ opacity:.5; cursor:not-allowed; }

/* sentinel mode default = button hidden */
.pf-b5 .pf-pgrid-load:not(.is-button-mode) button{
  display:none;
}

/* when break-after reached OR load_more mode => show the button */
.pf-b5 .pf-pgrid-load.is-button-mode button{
  display:inline-flex;
}

/* =========================
   Feature toggles
========================= */
.pf-b5-grid[data-thumb="0"] .pf-thumb{ display:none !important; }

.pf-b5-grid[data-cat="0"] .pf-badge,
.pf-b5-grid[data-cat="0"] .pf-cat-row{ display:none !important; }

.pf-b5-grid[data-meta="0"] .pf-meta{ display:none !important; }

.pf-b5-grid[data-author="0"] .pf-meta .pf-author,
.pf-b5-grid[data-author="0"] .pf-meta [data-meta="author"]{ display:none !important; }

.pf-b5-grid[data-date="0"] .pf-meta time,
.pf-b5-grid[data-date="0"] .pf-meta [data-meta="date"]{ display:none !important; }

.pf-b5-grid[data-excerpt="0"] .pf-excerpt{ display:none !important; }

.pf-b5-grid[data-readmore="0"] .pf-readmore-wrap,
.pf-b5-grid[data-readmore="0"] .pf-readmore{ display:none !important; }

/* =========================
   Mark highlight for search
========================= */
.pf-b5 mark{
  padding: .05em .15em;
  border-radius: .2em;
}

/* =========================
   Responsive
========================= */
@media (max-width: 991.98px){
  .pf-b5-grid{ grid-template-columns: repeat(var(--pf-cols-tablet, 1), 1fr); }
}
@media (max-width: 767.98px){
  .pf-b5-grid{ grid-template-columns: repeat(var(--pf-cols-mobile, 1), 1fr); }
}

/* ==============================================================
   TÍNH NĂNG PRO MAX: SKELETON LOADING ANIMATION
   ============================================================== */
@keyframes skeleton-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}