/* ===== Headings preset (frontend) ===== */
.apini-h1{ color:#0b67ff; font-size:clamp(28px,3vw,30px); font-weight:800; line-height:1.2 }
.apini-h2{ color:#111;    font-size:clamp(22px,2.4vw,26px); font-weight:700; line-height:1.25 }
.apini-h3{ color:#222;    font-size:clamp(18px,2vw,22px);   font-weight:600; line-height:1.3 }
.apini-h4{ color:#333;    font-size:clamp(16px,1.6vw,16px); font-weight:500; line-height:1.35 }
.entry-content .apini-h1{
  margin-top: 1.45em;
  margin-bottom: .95em;
}

/* H2–H4: khoảng hở tiêu chuẩn (nhỏ hơn H1 một chút) */
.entry-content .apini-h2,
.entry-content .apini-h3,
.entry-content .apini-h4{
  margin-top: 1.1em;
  margin-bottom: .7em;
}


/* ===== Ảnh chuẩn (không chồng nhau, luôn full bề rộng vùng nội dung) ===== */
.apini-figure{
  position: relative !important;
  display: block !important;
  float: none !important;
  clear: both;
  margin: 24px 0;
  max-width: 100%;
  isolation: isolate;
  z-index: 0;
}
.apini-figure img{
  width:100%;
  height:auto;
  display:block;
  border-radius:14px;
  box-shadow:0 6px 18px rgba(0,0,0,.10);
  transition: filter .35s cubic-bezier(.22,.61,.36,1), transform .35s cubic-bezier(.22,.61,.36,1);
}

/* Watermark cố định góc phải–trên, co giãn theo ảnh */
.apini-figure[data-apini-figure]::after{
  content:"";
  position:absolute; inset:auto 14px  auto auto; top:14px; right:14px;
  width:clamp(56px, 9vw, 96px);
  aspect-ratio:1;
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
  pointer-events:none;
  opacity:.95;
}


.apini-figure .apini-cap-bg{ display:none !important; }
/* BG động: bám theo kích thước thực của caption */
.apini-figure figcaption::before{
  content:"";
  position:absolute; inset:0;    /* viền ôm quanh chữ, bo theo padding */
  border-radius:12px;
  background:linear-gradient(180deg, rgba(0,0,0,.00), rgba(0,0,0,.55));

  /* (giữ nguyên hiệu ứng & bóng xanh bạn đã set) */
  opacity:.95; 
  
  transition: box-shadow .38s cubic-bezier(.22,.61,.36,1);
  
  /* bóng MẶC ĐỊNH theo yêu cầu */
  box-shadow: 0 18px 40px rgba(0,140,255,.90);
  pointer-events:none; z-index:-1;
}
/* Caption (text) – transform đồng bộ */
.apini-figure figcaption{
  position:absolute; left:18px; right:18px; bottom:18px;
  display:flex; align-items:center; justify-content:center;
  padding:12px 14px; line-height:1.3;
  text-align:center; color:#fff;
  text-shadow:0 0 18px rgba(0,140,255,.70), 0 2px 10px rgba(0,0,0,.55);
  font-weight:700; letter-spacing:.2px;

  opacity: 0;
  transform: translateY(12px);
  transition:
    transform .38s cubic-bezier(.22,.61,.36,1),
    opacity   .38s cubic-bezier(.22,.61,.36,1);
  will-change: transform;
  pointer-events:none; 
}
.apini-figure figcaption em{ color:#fff; font-style:normal; }

/* Ảnh mờ khi hold – giữ nguyên */
.apini-figure.apini-overlay img{
  transition: filter .28s ease, opacity .28s ease;
}
.apini-figure.apini-overlay:hover img,
.apini-figure.apini-overlay.is-active img{
  filter: brightness(.78) blur(1px);
  opacity:.92;
}
/* Hover/hold: chỉ đổi bóng + viền, KHÔNG transform/opacity */
.apini-figure.apini-overlay:hover figcaption::before,
.apini-figure.apini-overlay.is-active figcaption::before,
.apini-figure.overlay:hover figcaption::before,
.apini-figure.overlay.is-active figcaption::before{
  box-shadow:
    0 0 0 2px rgba(255,255,255,.95),
    0 0 24px rgba(255,255,255,.60),
    0 18px 40px rgba(0,140,255,.90);
}
/* Hover/hold – chỉ caption di chuyển; BG tự đi theo */
.apini-figure.apini-overlay:hover figcaption,
.apini-figure.apini-overlay.is-active figcaption,
.apini-figure.overlay:hover figcaption,
.apini-figure.overlay.is-active figcaption{
  opacity:1;
  transform: translateY(-36px);
}
/* Căn ngang: loại 1 giữa, loại 2 trái (không ảnh hưởng canh dọc) */
.apini-figure.type-1 figcaption{ text-align:center;  justify-content:center; }
.apini-figure.type-2 figcaption{ text-align:left;    justify-content:flex-start; }


/* === APINI: Ký hiệu dòng (symbol) – hiển thị ngoài site 
============================================================
=========================================================*/
/* Base cho các đoạn có ký hiệu */
/* === APINI: Ký hiệu dòng (symbol) – hiển thị ngoài site =============== */
/* Căn theo editor chuẩn, không vượt biên nội dung */
.entry-content .apini-li{
  position: relative;
  box-sizing: border-box;           /* quan trọng: padding không làm tràn cột */
  line-height: 1.7;
   width: 100%;
  /* cột ký tự cố định + khoảng cách với chữ */
--symw: 1.2em;      /* bề rộng cột ký tự */
--gap:  .45em;      /* khoảng cách ký tự ↔ chữ */
--step: 1.6em;      /* độ thụt mỗi cấp */
--level: 0;         /* sẽ set ở lớp apini-li-1..4 */
padding-left: calc(var(--level)*var(--step) + var(--symw) + var(--gap));
  word-break: normal;
}

/* Ký hiệu treo trước dòng */
.entry-content .apini-li::before{
  content: var(--apini-sym, "—");
  position: absolute;
  top: .22em;                       /* căn dọc khớp baseline Gutenberg */
  left: calc(var(--level)*var(--step));
  width: var(--symw);
  text-align: center;
  opacity: .95;
}

/* Cấp và loại ký hiệu – KHÔNG dùng margin-left nữa */
.entry-content .apini-li.apini-li-1{ --apini-sym:"—"; --level:0; }
.entry-content .apini-li.apini-li-2{ --apini-sym:"•"; --level:1; }
.entry-content .apini-li.apini-li-3{ --apini-sym:"▸"; --level:2; }
.entry-content .apini-li.apini-li-4{ --apini-sym:"+"; --level:3; }

/* Căn đều hai bên cho MỌI nội dung text khi tổ tiên có .apini-justify */
.entry-content .apini-justify,
.entry-content .apini-justify :where(p, li, dd, dt, blockquote, figcaption, cite),
.entry-content .apini-justify .wp-block-quote :where(p, cite),
.entry-content .apini-justify .wp-block-pullquote :where(p, cite),
.entry-content .apini-justify .wp-block-column :where(p, li, dd, dt, blockquote, figcaption, cite),
.entry-content .apini-justify .wp-block-group :where(p, li, dd, dt, blockquote, figcaption, cite) {
  text-align: justify !important;
  text-justify: inter-word;
  hyphens: auto;
}

/* (Tùy chọn) Câu thơ/Verse mặc định white-space:pre; cho phép justify */
.entry-content .wp-block-verse.apini-justify,
.entry-content .apini-justify .wp-block-verse{
  white-space: normal;
}

/* Justify – hỗ trợ cả class chuẩn của Gutenberg */
.entry-content .has-text-align-justify,
.entry-content .apini-justify,
.entry-content p.has-text-align-justify,
.entry-content p.apini-justify{
  text-align: justify !important;
  text-justify: inter-word;
  hyphens: auto;
}
/* Headings – CHO PHÉP justify khi CHÍNH heading có class/attr; 
   KHÔNG thừa kế justify từ container */
.entry-content .apini-justify :where(h1,h2,h3,h4):not(.apini-justify):not(.has-text-align-justify){
  text-align: inherit !important;
}
.entry-content :where(h1,h2,h3,h4).apini-justify,
.entry-content :where(h1,h2,h3,h4).has-text-align-justify{
  text-align: justify !important;
}