/* Module engage (0.14): Like/Share có số ở đầu và cuối bài (Story thêm ở Task 4).
   CHỈ biến skin (--c-*, --f-*, --radius, --shadow) và hai ngoại lệ ảnh của main.css. Nền nhạt là --c-soft /
   --c-accent-soft khai ở :root của main.css (pha 7%, EngageContrastTest). Mọi transition/animation phải có tên
   trong khối prefers-reduced-motion CUỐI tệp (EngageCssTest). Nguồn: docs/design/engage-v1/src/engage.css.
   Keyframe `kit-up` (hiện lên từ dưới) khai MỘT lần ở main.css của theme, dùng chung với cột bên bài viết. */

@keyframes eg-pop { 0% { transform: scale(1); } 30% { transform: scale(.7); } 60% { transform: scale(1.35); } 100% { transform: scale(1); } }
@keyframes eg-burst { from { transform: rotate(var(--r)) translateY(0) scale(1); opacity: 1; } to { transform: rotate(var(--r)) translateY(-26px) scale(.2); opacity: 0; } }

/* ---------- Đầu bài: [♥ N] [Share N ▾], canh phải ---------- */
.react { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; margin: 14px 0 6px; }
.react-btn { position: relative; display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--c-border); background: var(--c-surface); color: var(--c-text); font: 600 14px/1 var(--f-body); cursor: pointer; transition: border-color .2s, background .2s, color .2s, transform .12s; }
.react-btn:hover { border-color: var(--c-primary); }
.react-btn:focus-visible { outline: 2px solid var(--c-primary); outline-offset: 2px; }
.react-btn:active { transform: scale(.95); }
.react-btn svg { width: 18px; height: 18px; flex: none; overflow: visible; }
.react-btn .heart { fill: none; stroke: currentColor; transform-origin: center; transform-box: fill-box; }
.react-btn--like[aria-pressed="true"] { color: var(--c-accent); border-color: var(--c-accent); background: var(--c-accent-soft); }
.react-btn--like[aria-pressed="true"] .heart { fill: currentColor; }
.react-btn.is-pop .heart { animation: eg-pop .5s cubic-bezier(.2, 1.6, .4, 1); }
.burst { position: absolute; width: 0; height: 0; pointer-events: none; }
.burst i { position: absolute; width: 6px; height: 6px; margin: -3px; border-radius: 50%; animation: eg-burst .6s ease-out forwards; }
.burst i:nth-child(odd) { background: var(--c-accent); }
.burst i:nth-child(even) { background: var(--c-primary); }
.react-num { display: inline-flex; align-items: baseline; }
.react-num[hidden] { display: none; }
/* Trong câu (cuối bài) số đi liền chữ: inline-flex sẽ nuốt khoảng trắng ở mép (" · ", "1 like" thành "·1like"). */
.engage .react-num:not([hidden]) { display: inline; }
.odo { display: inline-flex; overflow: hidden; height: 1.2em; line-height: 1.2em; font-variant-numeric: tabular-nums; }
.odo > span { display: inline-block; overflow: hidden; transition: width .3s; }
.odo__col { display: flex; flex-direction: column; transition: transform .45s cubic-bezier(.2, .8, .2, 1); }
.odo__col span { display: block; height: 1.2em; text-align: center; }
.share-pop { position: relative; }
.share-pop__menu { position: absolute; right: 0; top: calc(100% + 8px); z-index: 20; min-width: 220px; max-width: calc(100vw - 32px); padding: 6px; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius); box-shadow: var(--shadow); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .18s, transform .18s, visibility 0s linear .18s; }
.share-pop.is-open .share-pop__menu { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.share-pop__menu a, .share-pop__menu button { display: flex; width: 100%; align-items: center; gap: 10px; padding: 9px 10px; border: 0; background: none; border-radius: calc(var(--radius) - 2px); font: 600 14px/1.2 var(--f-body); color: var(--c-text); text-decoration: none; cursor: pointer; text-align: left; }
.share-pop__menu a:hover, .share-pop__menu a:focus-visible, .share-pop__menu button:hover, .share-pop__menu button:focus-visible { background: var(--c-soft); color: var(--c-text); }
/* Nền --c-soft chỉ ~1,1:1 so với nền menu: một mình nó không cho người dùng bàn phím thấy mình đang ở đâu (WCAG 2.4.7).
   Vòng focus vẽ VÀO TRONG (offset âm) để không bị mép menu xén. */
.share-pop__menu a:focus-visible, .share-pop__menu button:focus-visible { outline: 2px solid var(--c-primary); outline-offset: -2px; }
.share-pop__menu svg { width: 18px; height: 18px; flex: none; }
/* Không JS thì Like và menu chia sẻ không làm gì được: giấu nhưng giữ chỗ (không nhảy bố cục). Hàng nút mạng
   cuối bài là link thuần nên vẫn chạy. */
.no-js .react, .no-js .engage__like .react-btn { visibility: hidden; }

/* ---------- Cuối bài: kêu gọi like + chia sẻ ---------- */
.engage { margin: 28px 0 0; padding: 18px 20px; background: var(--c-accent-soft); border: 1px solid color-mix(in srgb, var(--c-accent) 30%, var(--c-border)); border-radius: calc(var(--radius) + 6px); display: flex; flex-direction: column; gap: 14px; }
.entry-layout .engage { max-width: var(--measure); }
.engage__like { display: flex; align-items: center; gap: 14px; }
.engage__icon { flex: none; width: 44px; height: 44px; border-radius: var(--radius); background: var(--c-surface); border: 1px solid var(--c-border); display: inline-flex; align-items: center; justify-content: center; color: var(--c-accent); }
.engage__icon svg { width: 22px; height: 22px; }
.engage__q { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.engage__q strong { font: 700 16px/1.35 var(--f-head); color: var(--c-text); }
.engage__q > span { font-size: 13px; color: var(--c-muted); }
.engage__q .odo { color: var(--c-accent); font-weight: 700; }
.engage__thanks { display: none; animation: kit-up .4s cubic-bezier(.2, .7, .2, 1); }
.engage.is-liked .engage__ask { display: none; }
.engage.is-liked .engage__thanks { display: block; color: var(--c-accent); }
.engage .react-btn--like { flex: none; height: 44px; padding: 0 18px; }
.engage__share { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-top: 12px; border-top: 1px dashed var(--c-border); }
.engage__share-label { font-size: 13px; color: var(--c-muted); font-weight: 600; }
.engage__share .share__btn { transition: transform .15s; }
.engage__share .share__btn:hover { transform: translateY(-2px); }
.engage__count { margin-left: auto; font-size: 13px; color: var(--c-muted); white-space: nowrap; }
.engage__count .odo { color: var(--c-text); font-weight: 700; }
@media (max-width: 600px) {
  .engage { padding: 16px; }
  .engage__like { flex-wrap: wrap; }
  .engage__icon { display: none; }
  .engage .react-btn--like { width: 100%; justify-content: center; }
  .engage__share-label { flex: 1 0 100%; }
}

/* ---------- Story đầu trang chủ (parts/home-story.php của theme) ---------- */
@keyframes eg-in-right { from { opacity: 0; transform: translateX(28px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes eg-ping { from { transform: scale(1); opacity: .7; } to { transform: scale(2.8); opacity: 0; } }
@property --eg-a { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
@keyframes eg-spin { to { --eg-a: 360deg; } }
.story__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.story__title { margin: 0; display: inline-flex; align-items: center; gap: 8px; font: 700 13px/1 var(--f-body); letter-spacing: .06em; text-transform: uppercase; color: var(--c-muted); }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--c-accent); position: relative; flex: none; }
.live-dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--c-accent); animation: eg-ping 1.6s ease-out 4; } /* hữu hạn: không vẽ lại mãi */
.story__nav { display: flex; gap: 6px; }
.story__nav button { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--c-border); background: var(--c-surface); color: var(--c-text); font: 700 20px/1 var(--f-body); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: opacity .2s, transform .15s, color .15s; }
.story__nav button:hover:not(:disabled) { transform: translateY(-1px); color: var(--c-primary); }
.story__nav button:focus-visible { outline: 2px solid var(--c-primary); outline-offset: 2px; }
.story__nav button:disabled { opacity: .35; cursor: default; }
.story__rail { position: relative; }
.story__list { list-style: none; margin: 0; padding: 4px 2px 8px; display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; }
.story__list::-webkit-scrollbar { display: none; }
.story__item { flex: none; scroll-snap-align: start; animation: eg-in-right .55s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(var(--i) * 60ms); }
.story__card { position: relative; display: block; width: 132px; aspect-ratio: 9 / 15; border-radius: calc(var(--radius) + 6px); overflow: hidden; background: var(--c-image-bg); color: var(--c-on-image); text-decoration: none; box-shadow: var(--shadow); transition: transform .25s cubic-bezier(.2, .7, .2, 1); }
.story__card:hover, .story__card:focus-visible { color: var(--c-on-image); transform: translateY(-3px); }
.story__card:focus-visible { outline: 2px solid var(--c-primary); outline-offset: 2px; }
.story__card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.story__card:hover img { transform: scale(1.07); }
.story__card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, var(--scrim-1) 0%, var(--scrim-0) 32%, var(--scrim-0) 50%, var(--scrim-2) 100%); }
.story__ring { position: absolute; z-index: 2; top: 10px; left: 10px; width: 38px; height: 38px; border-radius: 50%; padding: 3px; background: conic-gradient(from var(--eg-a), var(--c-primary), var(--c-accent), var(--c-primary)); }
/* Chỉ vòng của thẻ đầu xoay, đúng 3 vòng rồi dừng: conic-gradient + @property vẽ lại mỗi khung hình nên không xoay vô hạn trên mọi thẻ. */
.story__item:first-child .story__ring { animation: eg-spin 4s linear 3; }
.story__ring span { display: flex; width: 100%; height: 100%; align-items: center; justify-content: center; border-radius: 50%; border: 2px solid var(--c-image-bg); background: var(--c-surface); color: var(--c-primary); font: 700 11px/1 var(--f-body); }
.story__item.is-seen .story__ring { background: var(--c-muted); animation: none; }
.story__time { position: absolute; z-index: 2; top: 14px; right: 10px; max-width: calc(100% - 56px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 11px; font-weight: 600; text-shadow: var(--text-shadow-image); }
.story__name { position: absolute; z-index: 2; left: 10px; right: 10px; bottom: 10px; margin: 0; font: 700 13px/1.32 var(--f-body); display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; text-shadow: var(--text-shadow-image); }
.story__item:first-child .story__card { box-shadow: 0 0 0 2px var(--c-accent), var(--shadow); }
.story__fade { pointer-events: none; position: absolute; top: 0; bottom: 8px; width: 40px; z-index: 3; transition: opacity .2s; }
.story__fade--l { left: 0; background: linear-gradient(90deg, var(--c-bg), transparent); opacity: 0; }
.story__fade--r { right: 0; background: linear-gradient(270deg, var(--c-bg), transparent); }
.story__rail:not(.at-start) .story__fade--l { opacity: 1; }
.story__rail.at-end .story__fade--r { opacity: 0; }
@media (max-width: 760px) {
  .story__nav { display: none; }
  .story__card { width: 108px; }
  .story__name { font-size: 12px; }
  .story__ring { width: 32px; height: 32px; top: 8px; left: 8px; }
  .story__time { max-width: calc(100% - 50px); }
  .story__list { gap: 8px; }
}

/* ---------- Giảm chuyển động: mọi selector có transition/animation ở trên phải có tên ở đây ---------- */
@media (prefers-reduced-motion: reduce) {
  .react-btn.is-pop .heart, .burst i, .engage__thanks { animation: none; }
  .react-btn, .odo > span, .odo__col, .share-pop__menu, .share-pop.is-open .share-pop__menu, .engage__share .share__btn { transition: none; }
  .react-btn:active, .engage__share .share__btn:hover { transform: none; }
  .story__item, .live-dot::after, .story__ring, .story__item:first-child .story__ring { animation: none; }
  .story__nav button, .story__card, .story__card img, .story__fade { transition: none; }
  .story__card:hover, .story__card:focus-visible, .story__card:hover img, .story__nav button:hover:not(:disabled) { transform: none; }
  .story__list { scroll-behavior: auto; }
}