/* EO shop — xem eo-shop.js. Màu theo token của mẫu. Lớp phủ dùng chung: giỏ trượt, xem nhanh, tìm kiếm. */
html.eo-layer-open { overflow: hidden; }
.eo-layer { position: fixed; inset: 0; z-index: 2147482500; display: grid; }
.eo-layer__back { position: absolute; inset: 0; background: rgba(8, 10, 14, .52); opacity: 0; transition: opacity .25s ease; }
.eo-layer.is-open .eo-layer__back { opacity: 1; }
.eo-layer__panel { position: relative; background: var(--c-bg, #fff); color: var(--c-text, #111); outline: 0; box-shadow: 0 20px 60px rgba(0, 0, 0, .3); }
.eo-layer__close { position: absolute; top: 10px; right: 10px; width: 44px; height: 44px; border: 0; border-radius: 50%; cursor: pointer; font-size: 18px; color: inherit; background: rgba(127, 127, 127, .14); display: grid; place-items: center; z-index: 2; }
@media (hover: hover) and (pointer: fine){.eo-layer__close:hover{ background: rgba(127, 127, 127, .26); }}

/* 1. giỏ hàng trượt từ cạnh phải */
.eo-cart { justify-items: end; }
.eo-cart .eo-layer__panel { width: min(420px, 100vw); height: 100%; display: grid; grid-template-rows: auto 1fr auto; transform: translateX(104%); transition: transform .32s cubic-bezier(.2, .7, .2, 1); }
.eo-cart.is-open .eo-layer__panel { transform: none; }
.eo-cart__head { position: relative; padding: 18px 64px 16px 20px; border-bottom: 1px solid var(--c-border, #e5e7eb); }
.eo-cart__head h2 { margin: 0; font-size: 19px; }
.eo-cart__count { color: var(--c-muted, #6b7280); font-weight: 600; }
.eo-cart__body { overflow-y: auto; padding: 8px 20px; -webkit-overflow-scrolling: touch; }
.eo-cart__list { list-style: none; margin: 0; padding: 0; }
.eo-cart__item { display: grid; grid-template-columns: 64px 1fr 44px; gap: 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--c-border, #eef0f3); animation: eoCartIn .3s ease both; }
.eo-cart__thumb { width: 64px; height: 64px; border-radius: 10px; background: var(--c-surface, #f4f6f8); display: grid; place-items: center; font-size: 28px; overflow: hidden; }
.eo-cart__thumb img { width: 100%; height: 100%; object-fit: contain; }
.eo-cart__info { display: grid; gap: 4px; min-width: 0; }
.eo-cart__info a, .eo-cart__info strong { font-weight: 700; font-size: 15px; color: inherit; text-decoration: none; overflow-wrap: anywhere; }
.eo-cart__info small { color: var(--c-muted, #6b7280); font-size: 13px; }
.eo-cart__rm { width: 44px; height: 44px; border: 0; background: none; color: var(--c-muted, #6b7280); cursor: pointer; border-radius: 50%; font-size: 14px; }
@media (hover: hover) and (pointer: fine){.eo-cart__rm:hover{ background: rgba(220, 38, 38, .1); color: #b91c1c; }}
.eo-cart__foot { padding: 16px 20px calc(16px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--c-border, #e5e7eb); display: grid; gap: 10px; }
.eo-cart__sum { display: flex; justify-content: space-between; align-items: baseline; font-size: 15px; }
.eo-cart__sum strong { font-size: 20px; }
.eo-cart__go { justify-content: center; text-align: center; min-height: 48px; display: flex; align-items: center; }
.eo-cart__view { text-align: center; font-size: 14px; font-weight: 600; color: var(--c-accent-ink, var(--c-accent, #0b5ed7)); padding: 8px; }
.eo-cart__loading { color: var(--c-muted, #6b7280); padding: 24px 0; text-align: center; }
@keyframes eoCartIn { from { opacity: 0; transform: translateX(16px); } }

/* 2. ảnh thứ 2 khi rê lên thẻ */
[data-eo-img2] { position: relative; }
[data-eo-img2] > .eo-img2 { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .32s ease; pointer-events: none; }
@media (hover: hover) { [data-eo-img2].eo-has-img2:hover > .eo-img2, a:hover > [data-eo-img2].eo-has-img2 > .eo-img2, :hover > [data-eo-img2].eo-has-img2 > .eo-img2 { opacity: 1; }}

/* 3. xem nhanh */
.eo-qv { place-items: center; padding: 16px; }
.eo-qv .eo-layer__panel { width: min(860px, 100%); max-height: min(92vh, 720px); overflow-y: auto; border-radius: var(--r-xl, 18px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0;
  opacity: 0; transform: translateY(14px) scale(.98); transition: opacity .24s ease, transform .28s cubic-bezier(.2, .7, .2, 1); }
.eo-qv.is-open .eo-layer__panel { opacity: 1; transform: none; }
.eo-qv__media { background: var(--c-surface, #f4f6f8); padding: 24px; display: grid; gap: 12px; align-content: center; border-radius: inherit; }
.eo-qv__img { width: 100%; aspect-ratio: 1 / 1; object-fit: contain; display: block; }
.eo-qv__emoji { font-size: 120px; text-align: center; }
.eo-qv__thumbs { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.eo-qv__thumb { width: 56px; height: 56px; padding: 0; border: 2px solid var(--c-border, #e5e7eb); border-radius: 8px; overflow: hidden; background: #fff; cursor: pointer; opacity: .7; }
.eo-qv__thumb.is-active { border-color: var(--c-accent, #0b5ed7); opacity: 1; }
.eo-qv__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.eo-qv__info { padding: 28px 28px 24px; display: grid; gap: 12px; align-content: start; }
.eo-qv__info h2 { margin: 0; font-size: 24px; line-height: 1.25; padding-right: 40px; }
.eo-qv__badge { justify-self: start; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; background: color-mix(in srgb, var(--c-accent, #0b5ed7) 14%, transparent); color: var(--c-accent-ink, var(--c-accent, #0b5ed7)); }
.eo-qv__price { margin: 0; font-size: 22px; } .eo-qv__price strong { color: var(--c-price, var(--c-accent-ink, #dc2626)); } .eo-qv__price s { font-size: 15px; color: var(--c-muted, #6b7280); margin-left: 8px; }
.eo-qv__desc { margin: 0; color: var(--c-text2, var(--c-muted, #4b5563)); line-height: 1.65; font-size: 15px; }
.eo-qv__specs { margin: 0; padding-left: 18px; color: var(--c-text2, #4b5563); font-size: 14px; line-height: 1.7; }
.eo-qv__actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 6px; }
.eo-qv__actions .btn { min-height: 46px; }
@media (max-width: 720px) {
  .eo-qv { padding: 0; align-items: end; }
  .eo-qv .eo-layer__panel { grid-template-columns: 1fr; max-height: 88vh; border-radius: 18px 18px 0 0; transform: translateY(100%); opacity: 1; }
  .eo-qv__media { padding: 16px 16px 8px; } .eo-qv__img { max-height: 36vh; }
  .eo-qv__info { padding: 16px 16px calc(18px + env(safe-area-inset-bottom, 0px)); }
  .eo-qv__actions .btn { flex: 1 1 auto; justify-content: center; }}
/* nút "Xem nhanh" trên thẻ sản phẩm */
/* LUÔN hiện (biểu tượng tròn ở góc ảnh) — không ẩn chờ rê chuột; rê / focus thì nở ra kèm chữ. Vùng bấm ≥ 44px. */
.eo-qv-btn { position: absolute; right: 8px; bottom: 8px; z-index: 2; display: inline-flex; align-items: center; justify-content: center; gap: 0; min-width: 44px; min-height: 44px; padding: 0 12px; border: 0; border-radius: 999px; cursor: pointer;
  font: 700 13px/1 system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; white-space: nowrap; background: rgba(17, 17, 17, .78); color: #fff; box-shadow: 0 2px 10px rgba(0, 0, 0, .25); transition: background-color .2s, gap .2s; }
.eo-qv-btn__t { display: inline-block; max-width: 0; opacity: 0; overflow: hidden; transition: max-width .25s ease, opacity .2s ease; }
.eo-qv-btn:focus-visible{ background: rgba(17, 17, 17, .92); gap: 6px; }@media (hover: hover) and (pointer: fine){:hover > .eo-qv-btn,.eo-qv-btn:hover{ background: rgba(17, 17, 17, .92); gap: 6px; }}
.eo-qv-btn:focus-visible .eo-qv-btn__t{ max-width: 90px; opacity: 1; }@media (hover: hover) and (pointer: fine){:hover > .eo-qv-btn .eo-qv-btn__t,.eo-qv-btn:hover .eo-qv-btn__t{ max-width: 90px; opacity: 1; }}

/* 4. lưới lọc / sắp xếp */
@keyframes eoGridIn { from { opacity: 0; transform: translateY(14px) scale(.98); } }
.eo-grid-in > * { animation: eoGridIn .38s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(var(--eo-i, 0) * 40ms); }

/* 5. đếm ngược */
/* đồng hồ tự có ô số riêng → bỏ nền / viền / đệm kiểu "viên" của phần tử gốc trong mẫu (chữ không sát mép khung) */
.eo-cd.eo-cd { display: inline-flex; align-items: center; gap: 6px; font-variant-numeric: tabular-nums; background: none; border: 0; padding: 0; box-shadow: none; border-radius: 0; }
.eo-cd__label { margin-right: 6px; font-size: 14px; opacity: .85; }
.eo-cd__box { display: grid; justify-items: center; min-width: 46px; padding: 6px 6px 4px; border-radius: 8px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .16); }
.eo-cd__box b { font-size: 20px; line-height: 1.1; font-weight: 800; display: block; }
.eo-cd__box i { font-style: normal; font-size: 10px; letter-spacing: .06em; text-transform: uppercase; opacity: .7; }
.eo-cd__sep { font-weight: 800; opacity: .6; }
.eo-cd[data-on="light"] .eo-cd__box { background: var(--c-surface, #f4f6f8); border-color: var(--c-border, #e5e7eb); }
@keyframes eoTick { from { transform: translateY(-30%); opacity: .2; } }
.eo-cd b.eo-tick { animation: eoTick .28s ease; }

/* 6. tìm kiếm toàn màn hình */
.eo-search .eo-layer__back { background: rgba(8, 10, 14, .7); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.eo-search .eo-layer__panel { width: 100%; align-self: start; max-height: 100%; overflow-y: auto; padding: 22px max(16px, calc((100vw - 760px) / 2)) 26px; transform: translateY(-100%); transition: transform .3s cubic-bezier(.2, .7, .2, 1); }
.eo-search.is-open .eo-layer__panel { transform: none; }
.eo-search__label { display: block; font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--c-muted, #6b7280); margin-bottom: 10px; padding-right: 52px; }
.eo-search__row { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; padding: 6px 6px 6px 16px; border: 2px solid var(--c-accent, #0b5ed7); border-radius: 14px; background: var(--c-bg, #fff); }
.eo-search__row input { min-width: 0; border: 0; outline: 0; background: none; font: inherit; font-size: 18px; color: inherit; min-height: 44px; }
.eo-search__row .btn { min-height: 44px; }
.eo-search__out { margin-top: 14px; }
.eo-search__hint { font-size: 13px; color: var(--c-muted, #6b7280); margin: 0 0 8px; }
.eo-search__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.eo-search__chip { min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--c-border, #e5e7eb); background: var(--c-surface, #f4f6f8); color: inherit; cursor: pointer; font: inherit; font-size: 14px; }
@media (hover: hover) and (pointer: fine){.eo-search__chip:hover{ border-color: var(--c-accent, #0b5ed7); }}
.eo-search__list { list-style: none; margin: 0; padding: 0; }
.eo-search__list a { display: grid; grid-template-columns: 52px 1fr auto; gap: 12px; align-items: center; padding: 8px; border-radius: 12px; text-decoration: none; color: inherit; animation: eoGridIn .26s ease both; }
.eo-search__list li:nth-child(2) a { animation-delay: 30ms; } .eo-search__list li:nth-child(3) a { animation-delay: 60ms; } .eo-search__list li:nth-child(n+4) a { animation-delay: 90ms; }
.eo-search__list a:focus-visible{ background: var(--c-surface, #f4f6f8); }@media (hover: hover) and (pointer: fine){.eo-search__list a:hover{ background: var(--c-surface, #f4f6f8); }}
.eo-search__thumb { width: 52px; height: 52px; border-radius: 10px; background: var(--c-surface, #f4f6f8); display: grid; place-items: center; overflow: hidden; font-size: 22px; }
.eo-search__thumb img { width: 100%; height: 100%; object-fit: contain; }
.eo-search__name { font-weight: 700; min-width: 0; overflow-wrap: anywhere; } .eo-search__name small { display: block; font-weight: 500; font-size: 12px; color: var(--c-muted, #6b7280); }
.eo-search__list strong { color: var(--c-price, var(--c-accent-ink, #dc2626)); white-space: nowrap; font-size: 14px; }
.eo-search__all { margin-top: 8px; width: 100%; min-height: 46px; border: 0; border-radius: 12px; background: var(--c-surface, #f4f6f8); color: var(--c-accent-ink, var(--c-accent, #0b5ed7)); font: inherit; font-weight: 700; cursor: pointer; }
.eo-search__none { color: var(--c-muted, #6b7280); padding: 14px 4px; margin: 0; }

@media (prefers-reduced-motion: reduce) {
  .eo-layer__back, .eo-layer__panel, .eo-cart .eo-layer__panel, .eo-qv .eo-layer__panel, .eo-search .eo-layer__panel, [data-eo-img2] > .eo-img2, .eo-qv-btn, .eo-qv-btn__t { transition: none !important; }
  .eo-grid-in > *, .eo-cart__item, .eo-search__list a, .eo-cd b.eo-tick { animation: none !important; }}

/* 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. */
.eo-layer { position: fixed !important; z-index: 2147482500 !important; }