/* EO base — hiệu ứng CSS THUẦN của bộ lõi, nạp SỚM trong <head> của mọi trang (bản tĩnh: @import ở đầu _common.css;
   WP: wp_enqueue_style). Nhẹ, không cần JS, tôn trọng prefers-reduced-motion. Xem PIPELINE.md "Thư viện lõi". */

/* 1. Chuyển trang mượt (cross-document View Transitions). Trình duyệt chưa hỗ trợ (Firefox) bỏ qua luật này →
      điều hướng bình thường, không lỗi, không chậm. Phải có ở CẢ trang đi lẫn trang đến nên nằm trong file nạp sớm. */
/* LƯU Ý: dòng @view-transition dưới đây chỉ là dự phòng. Quy tắc bật chuyển trang PHẢI có INLINE trong <head> mỗi trang
   (<style id="eo-vt">) — để riêng trong file CSS ngoài thì Chrome quyết định trước khi file kịp tải và huỷ hiệu ứng. Harness fx-check kiểm. */
@view-transition { navigation: auto; }
/* Kiểu chuyển: trang CŨ đứng yên, đậm 100% ở dưới; trang MỚI hiện dần lên trên (0,2s, không xê dịch).
   KHÔNG mờ chồng 2 chiều (cũ mờ đi + mới hiện lên cùng lúc): lúc giữa chừng cả hai cùng nửa trong suốt → nền trắng lộ ra (nháy) và 2 ảnh
   hero lớn nhìn như đè nhau / "tải 2 lần" (03/10). mix-blend-mode: normal vì mặc định của trình duyệt là plus-lighter (cộng sáng) chỉ đúng
   cho mờ chồng đối xứng — trang cũ đứng yên mà cộng sáng thì bị loá. */
::view-transition-old(root) { animation: none; mix-blend-mode: normal; }
::view-transition-new(root) { animation: eoVtIn .2s ease both; mix-blend-mode: normal; }
::view-transition-image-pair(root) { isolation: auto; }
@keyframes eoVtIn { from { opacity: 0; } }

/* 1b. Slider (eo-slide.js) — TRẠNG THÁI ĐẦU bằng CSS, không chờ JS: ngay khung hình đầu tiên chỉ slide 1 hiện, các slide xếp chồng một ô lưới
   (đúng bố cục sau khi JS chạy → không nhảy bố cục). Trước 03/10 mọi slide cùng hiện cho tới khi eo-slide.js tải xong → trang mới hiện ra
   với các ảnh hero chồng / nối đuôi nhau một nhịp rồi mới đúng. [data-nav-flow]: chừa sẵn chỗ cho dải điều hướng (28px + lề 28px). */
[data-eo-slide]:not(.eo-slide) { display: grid; }
[data-eo-slide]:not(.eo-slide) > * { grid-area: 1 / 1; min-width: 0; }
[data-eo-slide]:not(.eo-slide) > :not(:first-child) { visibility: hidden; opacity: 0; pointer-events: none; }
[data-eo-slide][data-nav-flow]:not(.eo-slide)::after { content: ''; grid-area: 2 / 1; height: 28px; margin-top: 28px; }
@media (pointer: fine), (pointer: none) { [data-eo-slide][data-nav-flow]:not([data-arrows="0"]):not(.eo-slide)::after { height: 44px; }}   /* dải điều hướng có 2 mũi tên 44px */

/* 1c. Bộ ảnh sản phẩm (eo-gallery.js) — TRẠNG THÁI ĐẦU bằng CSS: trước khi JS dựng, chỉ ảnh đầu hiện trong khung đúng tỉ lệ, chừa sẵn chỗ
   cho dải thumbnail. Trước 04/10 mọi ảnh xếp nối đuôi (cao 1000–2400px) rồi co lại còn 1 khung khi JS chạy → phần thông tin sản phẩm
   nhảy hơn 1500px trên mobile khi mạng chậm. Bố cục lấy từ [data-layout] trên khung ảnh, hoặc html[data-eo-layout] (eo-core.js đặt). */
[data-eo-product-gallery]:not(.eo-pg-host) { display: grid; gap: 12px; min-width: 0; }
[data-eo-product-gallery]:not(.eo-pg-host) > * { display: none; }
[data-eo-product-gallery]:not(.eo-pg-host) > :first-child { display: block; width: 100%; height: auto; aspect-ratio: var(--eo-pg-ratio, 1 / 1); object-fit: cover; overflow: hidden; border-radius: var(--r-lg, 16px); min-width: 0; }
[data-eo-product-gallery]:not(.eo-pg-host) > :first-child img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* bố cục lưới / xếp dọc (mọi ảnh cùng hiện): khai data-layout="grid" | "stacked" trên khung ảnh → không ẩn ảnh nào */
[data-eo-product-gallery][data-layout="grid"]:not(.eo-pg-host) > *, [data-eo-product-gallery][data-layout="stacked"]:not(.eo-pg-host) > * { display: block; width: 100%; height: auto; aspect-ratio: auto; }
@media (min-width: 768px) {
  /* thumbnail dưới: 68px + 2×2px đệm */
  html[data-eo-layout="thumbs-bottom"] [data-eo-product-gallery]:not(.eo-pg-host):not([data-layout]):has(> :nth-child(2))::after,
  [data-eo-product-gallery][data-layout="thumbs-bottom"]:not(.eo-pg-host):has(> :nth-child(2))::after { content: ''; height: 72px; }
  /* thumbnail dọc bên trái: cột 68px + khung ảnh */
  html[data-eo-layout="thumbs-left"] [data-eo-product-gallery]:not(.eo-pg-host):not([data-layout]):has(> :nth-child(2)),
  [data-eo-product-gallery][data-layout="thumbs-left"]:not(.eo-pg-host):has(> :nth-child(2)) { grid-template-columns: 68px minmax(0, 1fr); }
  html[data-eo-layout="thumbs-left"] [data-eo-product-gallery]:not(.eo-pg-host):not([data-layout]):has(> :nth-child(2))::before,
  [data-eo-product-gallery][data-layout="thumbs-left"]:not(.eo-pg-host):has(> :nth-child(2))::before { content: ''; grid-area: 1 / 1; }
  html[data-eo-layout="thumbs-left"] [data-eo-product-gallery]:not(.eo-pg-host):not([data-layout]):has(> :nth-child(2)) > :first-child,
  [data-eo-product-gallery][data-layout="thumbs-left"]:not(.eo-pg-host):has(> :nth-child(2)) > :first-child { grid-area: 1 / 2; }}

/* 2. Nút "nhún" nhẹ khi bấm */
.btn, .button, button[type="submit"], .eo-pager__btn, .eo-press { transition-property: transform, background-color, border-color, color, box-shadow, opacity; transition-duration: .16s; }
.btn:active, .button:active, button[type="submit"]:active, a.eo-pager__btn:active, .eo-press:active { transform: scale(.97); }

/* 3. Gạch chân chạy khi rê link (link chữ trong nội dung + chân trang; không áp cho nút / thẻ / ảnh) */
:where(.post-content, .entry-content, [data-eo-article], .eo-prose) :where(p, li, td, dd, figcaption) a:not(.btn):not(.button),
:where(footer, .site-footer) :where(li, p) a:not(.btn):not(.button):not(:has(img, svg)),
a.eo-link {
  text-decoration: none; background-image: linear-gradient(currentColor, currentColor); background-repeat: no-repeat;
  background-position: 0 100%; background-size: 0% 1px; transition: background-size .25s ease; padding-bottom: 1px;
}
:where(.post-content, .entry-content, [data-eo-article], .eo-prose) :where(p, li, td, dd, figcaption) a:not(.btn):not(.button) { background-size: 100% 1px; background-image: linear-gradient(color-mix(in srgb, currentColor 35%, transparent), color-mix(in srgb, currentColor 35%, transparent)); }
@media (hover: hover) and (pointer: fine){:where(.post-content, .entry-content, [data-eo-article], .eo-prose) :where(p, li, td, dd, figcaption) a:not(.btn):not(.button):hover{ background-image: linear-gradient(currentColor, currentColor); background-size: 100% 2px; }}
:where(footer, .site-footer) :where(li, p) a:not(.btn):not(.button):not(:has(img, svg)):focus-visible,a.eo-link:focus-visible{ background-size: 100% 1px; }@media (hover: hover) and (pointer: fine){:where(footer, .site-footer) :where(li, p) a:not(.btn):not(.button):not(:has(img, svg)):hover,a.eo-link:hover{ background-size: 100% 1px; }}

/* 4. Ảnh hiện dần mượt khi tải: khung mờ → rõ (eo-ui.js gắn .eo-img-pending cho ảnh lazy CHƯA tải xong, gỡ khi xong) */
img.eo-img-pending { opacity: 0; filter: blur(14px); transform: scale(1.02); }
img.eo-img-in { transition: opacity .45s ease, filter .55s ease, transform .55s ease; }

/* 5. Tiêu đề lớn ở hero hiện dần theo dòng (eo-ui.js tách dòng) */
/* không dùng mặt nạ overflow: dấu tiếng Việt (Ậ, Ồ…) sẽ bị cắt ở line-height thấp */
.eo-lines .eo-line { display: block; }
.eo-lines .eo-line > span { display: block; transform: translateY(.45em); opacity: 0; }
.eo-lines.is-in .eo-line > span { transform: none; opacity: 1; transition: transform .7s cubic-bezier(.2, .7, .2, 1), opacity .5s ease; transition-delay: calc(var(--eo-i, 0) * 90ms + 60ms); }

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
  .btn:active, .button:active, button[type="submit"]:active, a.eo-pager__btn:active, .eo-press:active { transform: none; }
  img.eo-img-pending { opacity: 1; filter: none; transform: none; }
  img.eo-img-in { transition: none; }
  .eo-lines .eo-line > span { transform: none; opacity: 1; transition: none !important; }
  a.eo-link, :where(footer, .site-footer) :where(li, p) a { transition: none; }}

/* 6. Trang đọc: dòng chữ ~65–75 ký tự (dễ đọc bài dài); ảnh / video / bảng vẫn rộng hết cột */
:where([data-eo-article]) :where(.post-content, .entry-content, .post-body) > :where(p, ul, ol, blockquote, h2, h3, h4, dl) { max-width: 56ch; } /* 56ch ≈ 70 ký tự tiếng Việt */
/* Bài RẤT dài (máy chủ gắn data-eo-long ngay trong HTML): trình duyệt bỏ qua dựng hình các đoạn ngoài màn hình ngay từ lần dựng đầu.
   Phải nằm ở file nạp sớm — gắn bằng JS sau khi trang đã dựng xong thì không còn tác dụng lúc tải. */
[data-eo-long] > :where(p, figure, blockquote, ul, ol, h2, h3, h4) { content-visibility: auto; contain-intrinsic-size: auto 8em; }
[data-eo-long] > figure { contain-intrinsic-size: auto 420px; }
[data-eo-long].eo-restoring > * { content-visibility: visible; } /* eo-reader: dựng thật 1 lần để về đúng chỗ đang đọc */
/* Chạm 1 lần là bấm (06/10): bỏ độ trễ chạm-đúp-để-phóng-to trên mọi thứ bấm được — cách chuẩn, KHÔNG tự bắt touchstart / touchend.
   Hover (CSS lẫn JS) chỉ dành cho thiết bị có chuột: @media (hover: hover) and (pointer: fine) — kiểm bằng scripts/guard-hover.js --check. */
a, button, summary, label, select, input, textarea, [role="button"], [role="tab"], [tabindex], .btn, .nav-hamburger { touch-action: manipulation; }