/* templates/blocks/slider-5/style.css */
/* Version: V1.4 (SAFE DELIVERY – header align + decorative line + category tag variables) */

/* =========================
   WRAPPER
   ========================= */
.pf-s5 {
  width: var(--pf-container-w, 100%);
  margin: 0 auto var(--pf-bottom-space, 36px);
  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: var(--pf-bg, transparent);
  container-type: inline-size;
}
.pf-s5 a { text-decoration: none; color: inherit; }

/* =========================
   HEADER
   ========================= */
.pf-s5 .pf-s5-head{
  background: var(--pf-head-bg, transparent);
  color: var(--pf-head-color, inherit);
  padding: var(--pf-head-pad, 0);
  margin: var(--pf-head-m, 0 0 12px 0);
  border-radius: inherit;
  /* căn chữ của tiêu đề */
  text-align: var(--pf-head-textalign, left);
}

/* Wrap của tiêu đề: full width để % của line tính theo header */
.pf-s5 .pf-s5-head .pf-title-wrap{
  position: relative;
  display: block;
  width: 100%;
}

/* Bản thân tiêu đề hiển thị inline-block để nhận text-align từ .pf-s5-head */
.pf-s5 .pf-s5-head .pf-title{
  display: inline-block;
}

.pf-s5 .pf-s5-head .pf-title,
.pf-s5 .pf-s5-head .pf-title a{
  margin: 0;
  color: var(--pf-head-color, inherit);
  font-size: var(--pf-head-fs, inherit);
  font-weight: var(--pf-head-fw, 700);
  font-style: var(--pf-head-fstyle, normal);
  text-transform: var(--pf-head-tt, none);
  line-height: 1.25;
  text-align: inherit !important; /* không bị rule của card-title đè */
}

/* Decorative line – theo TOP/BOTTOM */
.pf-s5 .pf-s5-head[data-line="1"][data-line-pos="bottom"] .pf-title-wrap::after,
.pf-s5 .pf-s5-head[data-line="1"][data-line-pos="top"] .pf-title-wrap::before{
  content: "";
  display: block;
  width: var(--pf-head-line-len, 40%);      /* % tính theo header nhờ title-wrap width:100% */
  height: var(--pf-head-line-thickness, 3px);
  background: var(--pf-head-line-color, currentColor);
}

/* Khoảng cách tới tiêu đề */
.pf-s5 .pf-s5-head[data-line="1"][data-line-pos="bottom"] .pf-title-wrap::after{
  margin-top: var(--pf-head-line-offset, 6px);
}
.pf-s5 .pf-s5-head[data-line="1"][data-line-pos="top"] .pf-title-wrap::before{
  margin-bottom: var(--pf-head-line-offset, 6px);
}

/* Căn trái/giữa/phải cho chính đường line bằng auto margins */
.pf-s5 .pf-s5-head[data-align="left"]  .pf-title-wrap::after,
.pf-s5 .pf-s5-head[data-align="left"]  .pf-title-wrap::before{
  margin-left: 0; margin-right: auto;
}
.pf-s5 .pf-s5-head[data-align="center"] .pf-title-wrap::after,
.pf-s5 .pf-s5-head[data-align="center"] .pf-title-wrap::before{
  margin-left: auto; margin-right: auto;
}
.pf-s5 .pf-s5-head[data-align="right"] .pf-title-wrap::after,
.pf-s5 .pf-s5-head[data-align="right"] .pf-title-wrap::before{
  margin-left: auto; margin-right: 0;
}

/* Bảo toàn rule của card-title (không ảnh hưởng header) */
.pf-s5 .pf-s5-row .pf-title { text-align: var(--pf-title-align, left); }

/* =========================
   ROW (slider / grid)
   ========================= */
.pf-s5 .pf-s5-row { position: relative; }

/* STATIC GRID (khi slider tắt) */
.pf-s5 .pf-s5-grid {
  display: grid;
  grid-template-columns: repeat(var(--pf-vis, 4), minmax(0, 1fr));
  gap: var(--pf-gap, 16px);
}

/* =========================
   CARD & THUMB
   ========================= */
.pf-s5 .pf-pcard {
  position: relative;
  overflow: hidden;
  border-radius: var(--pf-thumb-radius, 8px);
}

.pf-s5 .pf-thumb {
  position: relative;
  display: block;
  border-radius: inherit;
  overflow: hidden;
}
.pf-s5 .pf-thumb::before {
  content: "";
  display: block;
  padding-top: var(--pf-ratio, 56.25%);
  background: #222; /* nền chờ ảnh */
}
.pf-s5 .pf-thumb > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: var(--pf-thumb-fit, cover);
  object-position: 50% calc(var(--pf-img-pos, 50) * 1%);
  transform: scale(var(--pf-zoom-x, 1), var(--pf-zoom-y, 1));
  border-radius: inherit;
}

/* =========================
   BODY OVERLAY
   ========================= */
.pf-s5 .pf-body {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 2;
  padding: 10px 12px;
  color: #fff;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.82) 100%);
}

.pf-s5 .pf-title,
.pf-s5 .pf-title a {
  color: var(--pf-title-color, #fff);
  background: var(--pf-title-bg, transparent);
}
.pf-s5 .pf-title {
  margin: var(--pf-title-space, 0);
  padding: var(--pf-title-pad, 0);
  border-radius: var(--pf-title-br, 0);
  border-width: var(--pf-title-bw, 0);
  border-style: var(--pf-title-bs, solid);
  border-color: var(--pf-title-bc, transparent);
  text-align: var(--pf-title-align, left);
  line-height: var(--pf-title-lh, 1.35);
  font-size: var(--pf-title-fs, 18px);
  font-weight: var(--pf-title-fw, 700);
  text-transform: var(--pf-title-tt, none);
  text-shadow: 0 1px 2px rgba(0,0,0,.55);
}

/* Meta */
.pf-s5 .pf-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--pf-meta-gap, 10px);
  margin: var(--pf-meta-space, 0);
  padding: var(--pf-meta-pad, 0);
  font-size: var(--pf-meta-fs, 13px);
  font-weight: var(--pf-meta-fw, 400);
  color: var(--pf-meta-color, #e5e7eb);
  justify-content: var(--pf-meta-justify, flex-start);
}

/* =========================
   SLIDER RUNTIME
   ========================= */
.pf-s5 .pf-sld-viewport {
  overflow: hidden;
  margin: 0 calc(var(--pf-gap, 16px) / -2);
}
.pf-s5 .pf-sld-track {
  display: flex;
  will-change: transform;
}
.pf-s5 .pf-sld-item {
  box-sizing: border-box;
  flex-shrink: 0;
  flex-basis: calc(100% / var(--pf-vis));
  padding: 0 calc(var(--pf-gap, 16px) / 2);
}

/* =========================
   BADGE (category)
   ========================= */
/* Biến TOP (global): --pf-cat-*
   Biến Row override: --pf-badge-*  (ưu tiên nếu có; nếu không -> fallback về --pf-cat-*) */
.pf-s5 .pf-badge,
.pf-s5 .pf-badge a { text-decoration: none; }

.pf-s5 .pf-badge {
  display: var(--pf-cat-display, inline-block);
  /* Fallback: row override -> top -> default */
  margin: var(--pf-badge-spacing, var(--pf-cat-spacing, 0 6px 6px 0));
  padding: var(--pf-badge-padding, var(--pf-cat-padding, 4px 10px));
  border-style: solid;
  border-width: var(--pf-badge-bw, var(--pf-cat-bw, 0));
  border-radius: var(--pf-badge-br, var(--pf-cat-br, 8px));
  border-color: var(--pf-badge-bc, var(--pf-cat-bc, transparent));
  font-size: var(--pf-badge-fs, var(--pf-cat-fs, 13px));
  font-weight: var(--pf-badge-fw, var(--pf-cat-fw, 600));
  text-transform: var(--pf-badge-tt, var(--pf-cat-tt, none));
  line-height: var(--pf-cat-lh, 1);
  background-color: var(--pf-badge-bg, var(--pf-cat-bg, #059669));
  color: var(--pf-badge-text, var(--pf-cat-color, #fff));
}
.pf-s5 .pf-badge a { color: inherit; }

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

.pf-s5 .pf-s5-row[data-catpos="before"] .pf-body,
.pf-s5 .pf-s5-row[data-catpos="after"] .pf-body {
  display: flex;
  flex-direction: column;
}
.pf-s5 .pf-s5-row[data-catpos="before"] .pf-badge-wrap { order: -1; }
.pf-s5 .pf-s5-row[data-catpos="after"]  .pf-badge-wrap { order: 1; margin-top: 6px; }

.pf-s5 .pf-s5-row[data-catalign="left"]   .pf-badge-wrap { text-align: left; }
.pf-s5 .pf-s5-row[data-catalign="center"] .pf-badge-wrap { text-align: center; }
.pf-s5 .pf-s5-row[data-catalign="right"]  .pf-badge-wrap { text-align: right; }

/* icons */
.pf-s5 .pf-meta-icon{
  width:1em;height:1em;
  fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round;
  vertical-align:-0.125em;flex:0 0 auto;
}

/* =========================
   RESPONSIVE (Static Grid)
   ========================= */
@container (max-width: 1024px) {
  .pf-s5 .pf-s5-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container (max-width: 640px) {
  .pf-s5 .pf-s5-grid { grid-template-columns: 1fr; }
}

/* Fallback khi không hỗ trợ container queries */
@supports not (container-type: inline-size) {
  @media (max-width: 1024px) {
    .pf-s5 .pf-s5-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
  @media (max-width: 640px) {
    .pf-s5 .pf-s5-grid { grid-template-columns: 1fr; }
  }
}