/* EO lightbox — xem eo-lightbox.js. Nền theo preset của gu: <html data-eo-lb="dark|blur|light|brand">. */
img.eo-zoomable, [data-eo-gallery] img, [data-eo-video] { cursor: zoom-in; }
[data-eo-video] { cursor: pointer; }
img.eo-zoomable:focus-visible { outline: 3px solid var(--c-accent, #0b5ed7); outline-offset: 3px; }
html.eo-lb-open { overflow: hidden; }

.pswp.eo-lb { --pswp-bg: #0a0c10; --pswp-placeholder-bg: transparent; --pswp-icon-color: #fff; --pswp-icon-color-secondary: #111; --pswp-icon-stroke-color: transparent; z-index: 2147483000; }
/* tối nhòe (sang trọng): thấy trang phía sau mờ đi */
.pswp.eo-lb--blur { --pswp-bg: transparent; }
/* blur đặt trên gốc .pswp: .pswp có will-change:opacity (tạo backdrop root) nên blur đặt ở .pswp__bg không thấy được trang phía sau */
.pswp.eo-lb--blur { -webkit-backdrop-filter: blur(20px) saturate(115%); backdrop-filter: blur(20px) saturate(115%); }
.pswp.eo-lb--blur .pswp__bg { background: rgba(14, 11, 8, .8); }
/* sáng (tối giản / mộc) */
.pswp.eo-lb--light { --pswp-bg: #f6f5f1; --pswp-icon-color: #1b1b1b; --pswp-icon-color-secondary: #fff; }
.pswp.eo-lb--light .pswp__counter, .pswp.eo-lb--light .eo-lb-caption { color: #1b1b1b; text-shadow: none; }
/* màu thương hiệu */
.pswp.eo-lb--brand { --pswp-bg: #0b1220; }
@supports (background: color-mix(in srgb, red 10%, blue)) { .pswp.eo-lb--brand { --pswp-bg: color-mix(in srgb, var(--c-accent, #0b5ed7) 26%, #05070b); }}

/* nút ≥ 44px, chừa tai thỏ */
.pswp.eo-lb .pswp__top-bar { height: 60px; padding-top: env(safe-area-inset-top, 0px); box-sizing: content-box; }
.pswp.eo-lb .pswp__button { width: 50px; height: 60px; }
.pswp.eo-lb .pswp__counter { font: 600 15px/60px system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; height: 60px; margin: 0 0 0 16px; opacity: .92; letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.pswp.eo-lb .pswp__button--arrow { width: 64px; height: 96px; margin-top: -48px; }
.pswp.eo-lb .pswp__button--arrow .pswp__icn { width: 44px; height: 44px; margin-top: -22px; background: rgba(0, 0, 0, .34); border-radius: 50%; padding: 8px; box-sizing: border-box; }
.pswp.eo-lb--light .pswp__button--arrow .pswp__icn { background: rgba(255, 255, 255, .82); box-shadow: 0 1px 6px rgba(0, 0, 0, .14); }
/* kiểu mũi tên theo preset */
html[data-eo-arrows="thin"] .pswp.eo-lb .pswp__button--arrow .pswp__icn { background: none; box-shadow: none; padding: 2px; opacity: .92; }
html[data-eo-arrows="thin"] .pswp.eo-lb .pswp__button--arrow .pswp__icn path { transform: scaleX(.8); transform-origin: center; }
html[data-eo-arrows="square"] .pswp.eo-lb .pswp__button--arrow .pswp__icn { border-radius: 6px; }
html[data-eo-arrows="none"] .pswp.eo-lb .pswp__button--arrow { display: none; }
.pswp.eo-lb--single .pswp__button--arrow, .pswp.eo-lb--single .pswp__counter { display: none; }
@media (hover: none) and (max-width: 767px) { .pswp.eo-lb .pswp__button--arrow { display: none; }} /* mobile: vuốt */

/* dải thumbnail ở đáy */
.eo-lb-thumbs { position: absolute; left: 0; right: 0; bottom: 0; z-index: 12; display: flex; gap: 8px; justify-content: safe center; padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
  overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; background: linear-gradient(to top, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0)); transition: opacity .2s; }
.eo-lb-thumbs::-webkit-scrollbar { display: none; }
.pswp.eo-lb--light .eo-lb-thumbs { background: linear-gradient(to top, rgba(246, 245, 241, .92), rgba(246, 245, 241, 0)); }
.eo-lb-thumb { flex: 0 0 auto; width: 56px; height: 56px; padding: 0; border: 2px solid transparent; border-radius: 8px; overflow: hidden; background: rgba(127, 127, 127, .25); cursor: pointer; opacity: .55; transition: opacity .18s, border-color .18s, transform .18s; position: relative; }
.eo-lb-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.eo-lb-thumb:focus-visible{ opacity: .9; }@media (hover: hover) and (pointer: fine){.eo-lb-thumb:hover{ opacity: .9; }}
.eo-lb-thumb.is-active { opacity: 1; border-color: #fff; }
.pswp.eo-lb--light .eo-lb-thumb.is-active { border-color: var(--c-accent, #111); }
.pswp.eo-lb--brand .eo-lb-thumb.is-active { border-color: var(--c-accent, #fff); }
.eo-lb-thumb.is-video::after { content: '▶'; position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-size: 16px; background: rgba(0, 0, 0, .35); }
/* điều hướng mảnh (sang trọng): thumbnail thấp, viền gạch dưới */
html[data-eo-nav="lines"] .eo-lb-thumb { border-radius: 2px; border-width: 0 0 2px; height: 46px; width: 62px; }
html[data-eo-nav="progress"] .eo-lb-thumb, html[data-eo-arrows="square"] .eo-lb-thumb { border-radius: 4px; }
.pswp--ui-visible .eo-lb-thumbs { opacity: 1; } .pswp:not(.pswp--ui-visible) .eo-lb-thumbs, .pswp:not(.pswp--ui-visible) .eo-lb-caption { opacity: 0; pointer-events: none; }
@media (max-height: 420px) { .eo-lb-thumbs { display: none; }} /* máy nằm ngang: nhường chỗ cho ảnh */
/* chừa chỗ cho dải thumbnail: ảnh không nằm dưới nó */
.pswp.eo-lb:not(.eo-lb--single) .pswp__img, .pswp.eo-lb:not(.eo-lb--single) .pswp__img--placeholder { clip-path: none; }

.eo-lb-caption { position: absolute; left: 50%; transform: translateX(-50%); bottom: calc(84px + env(safe-area-inset-bottom, 0px)); z-index: 12; max-width: min(92vw, 760px); padding: 6px 14px; border-radius: 999px;
  font: 500 14px/1.45 system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; color: #fff; text-align: center; background: rgba(0, 0, 0, .42); transition: opacity .2s; }
.pswp.eo-lb--light .eo-lb-caption { background: rgba(255, 255, 255, .86); }
.pswp.eo-lb--single .eo-lb-caption { bottom: calc(18px + env(safe-area-inset-bottom, 0px)); }
@media (max-height: 420px) { .eo-lb-caption { bottom: 10px; }}

/* ĐỔI ẢNH trong lightbox: KHÔNG có CSS nào ở đây — chỉ dùng chuyển động trượt gốc của PhotoSwipe (eo-lightbox.js gọi moveIndexBy có animate).
   Preset của gu chỉ quyết định nền + kiểu MỞ / ĐÓNG. Đừng thêm animation / transition / transform / opacity / scale lên .pswp__item,
   .pswp__zoom-wrap, .pswp__img: lần 1 (transform) làm 3 ảnh chồng nhau, lần 2 (mờ dần từ 0%) làm ảnh nháy mỗi lần đổi. Harness fx-check chặn cả hai. */

/* video trong lightbox (16:9, vừa màn hình) */
.eo-lb-video-slot, .eo-lb-video { position: absolute; inset: 60px 0 92px; display: grid; place-items: center; padding: 0 12px; }
.eo-lb-video > * { width: min(100%, calc((100vh - 170px) * 16 / 9)); aspect-ratio: 16 / 9; border: 0; border-radius: 10px; background: #000; max-height: 100%; }
.eo-lb-video--portrait > * { width: auto; height: 100%; aspect-ratio: 9 / 16; }

@media (prefers-reduced-motion: reduce) {
  .eo-lb-thumb, .eo-lb-thumbs, .eo-lb-caption { transition: none; }}

/* ảnh minh hoạ trong thân bài (mẫu tĩnh + khối Ảnh của WordPress) */
figure.eo-fig, .post-content figure.wp-block-image, .entry-content figure.wp-block-image { margin: 28px 0; }
figure.eo-fig img, .post-content figure.wp-block-image img, .entry-content figure.wp-block-image img { display: block; width: 100%; height: auto; border-radius: var(--r-lg, 12px); }
figure.eo-fig figcaption, .post-content figure.wp-block-image figcaption, .entry-content figure.wp-block-image figcaption { margin-top: 8px; font-size: 13px; line-height: 1.5; text-align: center; color: var(--c-muted, #6b7280); }

/* Theme có luật ép `body > *` thành position:relative + z-index (fx.css) → lớp phủ phải tự khoá vị trí bằng !important,
   nếu không sẽ rơi xuống cuối trang thay vì phủ màn hình. */
.pswp.eo-lb { position: fixed !important; z-index: 2147483000 !important; }