/* templates/blocks/block-4/style.css — v3.2 (PRO MAX: Skeleton Pulse, Smooth DOM Appending & Image Fix) */

.pf-b4 {
  width: var(--pf-container-w, 100%);
  margin: var(--pf-m, 0 auto var(--pf-bottom-space, 60px) auto);
  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);
  box-sizing: border-box;
}
.pf-b4 * { box-sizing: border-box; }

.pf-b4.is-loading .pf-b4-grid {
  opacity: .5;
  pointer-events: none;
  transition: opacity .3s;
}

/* Header */
.pf-b4-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-b4-head .pf-title-wrap {
  display: flex;
  align-items: center;
  justify-content: var(--pf-head-align, flex-start);
  width: 100%;
}
.pf-b4-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-b4-head .pf-title a { color: inherit; text-decoration: none; }

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

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

.pf-b4-head[data-line="1"][data-line-pos="left"] .pf-title-wrap::before,
.pf-b4-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-b4-head[data-line="1"][data-line-pos="right"] .pf-title-wrap .pf-title { order: -1; }
.pf-b4-head[data-line="1"][data-line-pos="mid"] .pf-title { position: relative; display: inline-block; }
.pf-b4-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 inline */
.pf-b4-header-filter-wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 15px;
  margin-bottom: 16px;
}
.pf-b4-header-filter-wrap.is-inline .pf-b4-head { margin-bottom: 0; flex-grow: 1; }
.pf-b4-header-filter-wrap.is-inline .pf-filter { margin-bottom: 0; justify-content: var(--pf-head-filter-align, flex-start); }

/* Filter */
.pf-b4 .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-b4 .pf-filter .pf-dropdown {
  min-width: 180px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid #e5e7eb;
}
.pf-b4 .pf-filter .pf-pill,
.pf-b4 .pf-filter .pf-tab {
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid #e5e7eb;
  background: #fff;
  cursor: pointer;
  user-select: none;
}
.pf-b4 .pf-filter .pf-tab { border-radius: 10px; }
.pf-b4 .pf-filter .is-active {
  background: #111827;
  color: #fff;
  border-color: #111827;
}

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

/* Card root */
.pf-b4 .pf-pcard { 
  position: relative; 
  transition: transform 0.4s ease, opacity 0.4s ease; /* BẢN NÂNG CẤP PRO MAX */
}

/* Thumb */
.pf-b4 .pf-thumb { 
  position: relative; 
  display: block; /* FIX: Rất quan trọng để hiển thị ảnh */
  overflow: hidden; 
  border-radius: var(--pf-thumb-radius, 12px); 
  text-decoration: none;
}
.pf-b4 .pf-thumb::before { content: ""; display: block; padding-top: var(--pf-thumb-ratio, 56.25%); }
.pf-b4 .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%);
}

/* Body (content box) */
.pf-b4 .pf-body {
  position: relative;
  z-index: 2;
  width: var(--pf-body-w-pct, 90%);
  margin-top: var(--pf-body-final-mt);
  margin-bottom: var(--pf-body-bottom-m, 0px);
  background: var(--pf-item-bg, #fff);
  padding: var(--pf-item-pad, 20px);
  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);
}
/* Căn ngang hộp nội dung */
.pf-b4[data-body-align="center"] .pf-body { margin-left: auto; margin-right: auto; }
.pf-b4[data-body-align="left"]   .pf-body { margin-left: var(--pf-body-hoffset, 20px); margin-right: auto; }
.pf-b4[data-body-align="right"]  .pf-body { margin-right: var(--pf-body-hoffset, 20px); margin-left: auto; }

/* Khi tắt thumbnail: bỏ chồng, vẫn giữ top/bottom margin do người dùng đặt */
.pf-b4-grid[data-thumb="0"] .pf-body { 
  margin-top: var(--pf-body-top-m, 0px); 
}

/* Title in card */
.pf-b4 .pf-pcard .pf-title,
.pf-b4 .pf-pcard .pf-title a { color: var(--pf-title-color, inherit); background: var(--pf-title-bg, transparent); }
.pf-b4 .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 */
.pf-b4 .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);
}

/* Excerpt */
.pf-b4 .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, 0);
  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-b4 .pf-excerpt > *:first-child { margin-top: 0; }
.pf-b4 .pf-excerpt > *:last-child { margin-bottom: 0; }

/* Read more */
.pf-b4 .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-b4 .pf-readmore:hover { opacity: .85; }
.pf-b4 .pf-readmore-wrap { display: flex; justify-content: var(--pf-btn-align); }

/* Category/Badge */
.pf-b4 .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: 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-b4 a.pf-badge:hover { opacity: .9; }

.pf-b4 .pf-thumb > .pf-badge { position: absolute; top: 12px; left: 12px; z-index: 3; }
.pf-b4-grid[data-catpos="over"][data-catalign="right"]  .pf-thumb > .pf-badge { left: auto; right: 12px; }
.pf-b4-grid[data-catpos="over"][data-catalign="center"] .pf-thumb > .pf-badge { left: 50%; transform: translateX(-50%); }
.pf-b4 .pf-cat-row { display: flex; flex-wrap: wrap; justify-content: var(--pf-cat-align-justify, flex-start); }

/* Search Highlight */
.pf-b4 mark.pf-search-hl { padding:.08em .18em; border-radius:.22em; background-color: #ffe082; color: #333; }

/* Pagination & Load more */
.pf-b4 .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-b4 .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);
  text-decoration: none;
  cursor: pointer;
  transition: opacity .2s, background-color .2s, color .2s, border-color .2s;
}
.pf-b4 .pf-pgrid-pagi button:not(:disabled):hover { opacity: .8; }
.pf-b4 .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-b4 .pf-pgrid-pagi button:disabled { opacity: .5; cursor: not-allowed; }
.pf-b4 .pf-pgrid-pagi .pf-page-indicator { padding: 0 8px; color: var(--pf-pagi-color, #6b7280); }

.pf-b4 .pf-pgrid-load {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: var(--pf-pagi-m, 20px 0 0 0);
}
.pf-b4 .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;
}
.pf-b4 .pf-pgrid-load.is-button-mode button { display: inline-flex; }
.pf-b4 .pf-pgrid-load:not(.is-button-mode) button { display: none; }
.pf-b4 .pf-pgrid-load button:hover { opacity: .8; }
.pf-b4 .pf-pgrid-load button:disabled { opacity: .5; cursor: not-allowed; }

/* Feature toggles */
.pf-b4-grid[data-thumb="0"] .pf-thumb { display: none !important; }
.pf-b4-grid[data-cat="0"]  .pf-badge,
.pf-b4-grid[data-cat="0"]  .pf-cat-row { display: none !important; }
.pf-b4-grid[data-meta="0"] .pf-meta { display: none !important; }
.pf-b4-grid[data-author="0"] .pf-meta .pf-author,
.pf-b4-grid[data-author="0"] .pf-meta [data-meta="author"] { display: none !important; }
.pf-b4-grid[data-date="0"] .pf-meta time,
.pf-b4-grid[data-date="0"] .pf-meta [data-meta="date"] { display: none !important; }
.pf-b4-grid[data-excerpt="0"] .pf-excerpt { display: none !important; }
.pf-b4-grid[data-readmore="0"] .pf-readmore-wrap,
.pf-b4-grid[data-readmore="0"] .pf-readmore { display: none !important; }

/* =========================
   META ICONS
   ========================= */

.pf-b4 .pf-meta .pf-meta-item,
.pf-b4 .pf-meta [data-meta],
.pf-b4 .pf-meta .pf-author,
.pf-b4 .pf-meta time{
  display:inline-flex;
  align-items:center;
  gap:.4em;
  line-height:1;
}

.pf-b4 .pf-meta .pf-meta-item[data-meta="author"]::before,
.pf-b4 .pf-meta .pf-meta-item[data-meta="date"]::before,
.pf-b4 .pf-meta [data-meta="author"]::before,
.pf-b4 .pf-meta [data-meta="date"]::before,
.pf-b4 .pf-meta .pf-author::before,
.pf-b4 .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-b4 .pf-meta .pf-meta-item[data-meta="author"]::before,
.pf-b4 .pf-meta [data-meta="author"]::before,
.pf-b4 .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-b4 .pf-meta .pf-meta-item[data-meta="date"]::before,
.pf-b4 .pf-meta [data-meta="date"]::before,
.pf-b4 .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-b4 .pf-meta svg,
.pf-b4 .pf-meta .pf-ic,
.pf-b4 .pf-meta i{ display:none !important; }

/* Responsive */
@media (max-width: 991.98px) {
  .pf-b4-grid { grid-template-columns: repeat(var(--pf-cols-tablet, 1), 1fr); }
}
@media (max-width: 767.98px) {
  .pf-b4-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; }
}