/* EO ui — xem eo-ui.js (hiệu ứng lõi mọi mẫu). Màu theo token của mẫu (--c-accent, --c-border, --c-surface, --c-text, --c-muted). */

/* thanh tiến độ đọc (trang bài viết) */
.eo-readbar { position: fixed; left: 0; right: 0; top: 0; height: 3px; z-index: 2147482000; pointer-events: none; background: transparent; }
.eo-readbar span { display: block; height: 100%; background: var(--c-accent, #0b5ed7); transform: scaleX(0); transform-origin: 0 50%; will-change: transform; }

/* nút cuộn-lên có vòng tiến độ */
.eo-totop { position: relative; }
.eo-totop .eo-ring { position: absolute; inset: -3px; width: calc(100% + 6px); height: calc(100% + 6px); transform: rotate(-90deg); pointer-events: none; }
.eo-totop .eo-ring circle { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; opacity: .9; }

/* bản đồ chỉ tải khi bấm */
.eo-map { display: grid; gap: 10px; }
.eo-map__btn { display: grid; place-items: center; align-content: center; gap: 6px; width: 100%; min-height: 240px; padding: 24px 16px; cursor: pointer; text-align: center; font: inherit; color: var(--c-text, #111);
  border: 1.5px dashed var(--c-border, #d1d5db); border-radius: var(--r-lg, 14px);
  background: repeating-linear-gradient(45deg, rgba(127, 127, 127, .05) 0 14px, rgba(127, 127, 127, .09) 14px 28px), var(--c-surface, #f6f7f9); transition: border-color .18s, background-color .18s; }
.eo-map__btn:focus-visible{ border-color: var(--c-accent, #0b5ed7); }@media (hover: hover) and (pointer: fine){.eo-map__btn:hover{ border-color: var(--c-accent, #0b5ed7); }}
.eo-map__pin { font-size: 34px; line-height: 1; }
.eo-map__btn strong { font-size: 16px; }
.eo-map__addr { font-size: 14px; color: var(--c-muted, #6b7280); max-width: 46ch; }
.eo-map iframe { width: 100%; min-height: 320px; border: 0; border-radius: var(--r-lg, 14px); display: block; }
/* link nằm trong khung có viền của mẫu → tự có đệm (không sát mép), vùng bấm ≥ 44px */
.eo-map__link { display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 24px; font-size: 14px; font-weight: 600; text-align: center; color: var(--c-accent-ink, var(--c-accent, #0b5ed7)); }
.eo-map { gap: 0; } .eo-map__btn { border-radius: 0; border-width: 0 0 1.5px; } .eo-map iframe { border-radius: 0; }

/* form: lỗi từng ô */
.eo-field-msg { display: block; margin-top: 6px; font-size: 13px; line-height: 1.4; color: #b91c1c; }
.eo-invalid, input.eo-invalid, select.eo-invalid, textarea.eo-invalid { border-color: #dc2626 !important; box-shadow: 0 0 0 3px rgba(220, 38, 38, .12); }
.eo-valid, input.eo-valid, textarea.eo-valid { border-color: #16a34a; }
.eo-btn-done { background: #16a34a !important; border-color: #16a34a !important; color: #fff !important; }

/* trạng thái trống */
.eo-empty { display: grid; justify-items: center; gap: 10px; text-align: center; padding: 48px 20px; }
.eo-empty__art { width: 112px; height: 112px; border-radius: 50%; display: grid; place-items: center; font-size: 52px; line-height: 1;
  background: radial-gradient(circle at 50% 40%, var(--c-surface, #f3f4f6), transparent 70%), var(--c-surface, #f3f4f6); box-shadow: inset 0 0 0 1px var(--c-border, #e5e7eb); animation: eoFloat 3.4s ease-in-out infinite; }
.eo-empty__title { margin: 6px 0 0; font-size: 20px; color: var(--c-text, #111); }
.eo-empty__text { margin: 0; max-width: 44ch; color: var(--c-muted, #6b7280); font-size: 15px; line-height: 1.6; }
.eo-empty__btn { margin-top: 8px; }
@keyframes eoFloat { 50% { transform: translateY(-6px); } }

@media (prefers-reduced-motion: reduce) { .eo-empty__art { animation: none; } .eo-map__btn { transition: none; }}

/* 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-readbar { position: fixed !important; z-index: 2147482000 !important; }