/* ==========================================================================
   SelfCare.vn v2 — 3 hình minh hoạ trang chủ dựng lại bằng HTML + CSS + SVG inline
   (thay ảnh NguyenNhuQuynh-SelfCare-2_3 / 2_4 / 2_5). Chữ là chữ thật, font Lexend của site.
   Desktop: bố cục theo đúng toạ độ ảnh gốc (đơn vị cqw = % bề rộng khung) nên sắc nét ở mọi cỡ.
   Khung < 640px: tự xếp lại thành cột dễ đọc (container query, không phụ thuộc theme).
   Trạng thái ẩn-để-hiện-dần chỉ áp khi JS đã gắn .scfx-js lên <html> → không JS vẫn đọc được đủ.
   ========================================================================== */

.scfx-fig { container-type: inline-size; position: relative; margin: 0 auto 1.2em; font-family: Lexend, sans-serif;
  color: #464a5c; text-align: left; -webkit-font-smoothing: antialiased; }
.scfx-fig *, .scfx-fig *::before { box-sizing: border-box; }
.scfx-fig .scfx-stage { position: relative; aspect-ratio: 2000 / 1400; overflow: hidden; }
.scfx-fig ul, .scfx-fig ol, .scfx-fig li, .scfx-fig p { margin: 0 !important; padding: 0; list-style: none; } /* Flatsome thêm margin-left cho li */
.scfx-fig .nw { white-space: nowrap; }
.scfx-fig svg { display: block; overflow: visible; }
.scfx-fig .ln { display: block; }
.scfx-fig b { font-weight: 600; }

/* ------------------------------- 1. BÁNH XE ------------------------------ */
.scfx-wheel .scfx-stage { background: #fff; }
.scfx-wheel .w-intro { position: absolute; left: 2.1%; top: 6.85%; width: 43.7%; font-size: 1.72cqw; line-height: 1.165;
  font-weight: 300; color: #3c3f4f; text-align: justify; text-indent: 2.3cqw; hyphens: none; }
.scfx-wheel .w-dot { position: absolute; left: -.5cqw; top: -1.35cqw; width: 1cqw; height: 1cqw; border-radius: 50%; background: #7db578; }
.scfx-wheel .w-rule { position: absolute; left: 0; top: 25.5%; width: 45.75%; height: max(1px, .1cqw); background: #9cb89a; transform-origin: left; }
.scfx-wheel .w-svg { position: absolute; left: 33.9%; top: 22.57%; width: 42%; height: auto; }
.scfx-wheel .w-labels li { position: absolute; left: var(--x); top: var(--y); transform: translateX(-50%); white-space: nowrap;
  text-align: center; font-size: 2.35cqw; line-height: 1.06; font-weight: 500; letter-spacing: -.01em; color: #464a5c;
  transition: color .3s; cursor: default; }
.scfx-wheel .w-labels li.is-hot { color: var(--c); }
.scfx-wheel .w-labels li { transform-origin: center; }
.scfx-wheel .w-brand { position: absolute; left: 66.5%; top: 90.4%; font-size: 1.62cqw; font-weight: 500; white-space: nowrap; color: #464a5c; }
.scfx-wheel .w-seg { transition: transform .35s cubic-bezier(.2,.8,.2,1), filter .35s; cursor: default; }
.scfx-wheel .w-seg.is-hot { transform: translate(calc(var(--dx) * 1.6), calc(var(--dy) * 1.6)); filter: brightness(1.08) drop-shadow(0 0 12px rgba(255,255,255,.6)) drop-shadow(0 8px 12px rgba(0,0,0,.18)); }

/* ------------------------------- 2. BẬC THANG ---------------------------- */
.scfx-stairs .scfx-stage { background: #f9fff5; }
.scfx-stairs .s-frame { position: absolute; inset: 0; width: 100%; height: 100%; }
.scfx-stairs .s-frame path { fill: none; stroke: #7d97b0; stroke-width: 1.6; vector-effect: non-scaling-stroke; }
.scfx-stairs .s-title, .scfx-stairs .s-sub, .scfx-stairs .s-tag { position: absolute; left: 49.85%; transform: translateX(-50%);
  white-space: nowrap; text-align: center; }
.scfx-stairs .s-title { top: 6.3%; font-size: 3.05cqw; font-weight: 700; letter-spacing: -.035em; color: #183a53; }
.scfx-stairs .s-sub { top: 12.6%; font-size: 1.55cqw; font-weight: 200; color: #3a4654; }
.scfx-stairs .s-tag { top: 16.6%; font-size: 2.9cqw; font-weight: 200; letter-spacing: -.01em; color: #1f2a33; }
.scfx-stairs .s-tag .tg { display: inline; }
.scfx-stairs .s-logo { position: absolute; left: 49.85%; top: 23.5%; width: 2.6cqw; transform: translateX(-50%); }
.scfx-stairs .s-svg { position: absolute; left: var(--l); top: var(--t); width: var(--w); height: auto; }
.scfx-stairs .s-links path { stroke: #9fb3c6; stroke-width: 1.2; }
.scfx-stairs .s-link-dot { fill: #9fb3c6; stroke: none; }
.scfx-stairs .s-arrow { fill: none; stroke: #9cb0cc; stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; }
.scfx-stairs .s-arrow-flow { fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-dasharray: .035 .055; opacity: 0; }
.scfx-stairs .s-items li { transform-origin: left center; }
.scfx-stairs .s-num { font: 400 40px Lexend, sans-serif; fill: #111; }
.scfx-stairs .s-slab { transition: transform .35s cubic-bezier(.2,.8,.2,1), filter .35s; cursor: default; }

.scfx-stairs .s-items li { position: absolute; left: var(--x); top: var(--y); transform: translateY(-50%); white-space: nowrap;
  text-align: left; font-size: 1.6cqw; line-height: 1.14; font-weight: 300; color: #2a3a48; transition: color .3s; cursor: default; }
.scfx-stairs .s-items li.is-hot { color: #a98786; }
.scfx-stairs .s-badge { display: none; }
.scfx-stairs .s-mail { position: absolute; left: 49.85%; top: 89.6%; transform: translateX(-50%); display: flex; align-items: center; gap: .9cqw;
  font-size: 2.15cqw; font-weight: 300; color: #2a3a48; white-space: nowrap; }
.scfx-stairs .s-mail a { color: inherit !important; text-decoration: none !important; } /* thắng luật link của mu-plugin sc-home-polish */
.scfx-stairs .s-mail a:hover { color: #a98786; }
.scfx-stairs .s-play { width: 2.3cqw; flex: none; }

/* ------------------------------- 3. VÒNG TRÒN ---------------------------- */
.scfx-cycle .c-stage { aspect-ratio: 800 / 650;
  background:
    radial-gradient(60% 55% at 92% 8%, #fde0f6 0%, rgba(253,224,246,0) 72%),
    radial-gradient(55% 55% at 6% 94%, #c3dbf5 0%, rgba(195,219,245,0) 72%),
    radial-gradient(55% 55% at 94% 94%, #cdbfea 0%, rgba(205,191,234,0) 72%),
    radial-gradient(60% 50% at 8% 6%, #e2ecfb 0%, rgba(226,236,251,0) 72%),
    #ece6f7;
  box-shadow: inset 0 0 28px 18px rgba(255,255,255,.35); }
.scfx-cycle .c-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.scfx-cycle .c-w { font: 600 40px Lexend, sans-serif; letter-spacing: -.5px; cursor: default; transition: filter .3s; }
.scfx-cycle .c-w:hover { filter: drop-shadow(0 0 6px rgba(255,255,255,.9)); }
.scfx-cycle .c-site { font: 200 25px Lexend, sans-serif; fill: #7f86ad; }
.scfx-cycle .c-flower, .scfx-wheel .w-flower { transform-box: fill-box; transform-origin: center; }
.scfx-cycle .c-orbit-rot { opacity: 0; transform-box: view-box; transform-origin: 389px 327px; }

/* ------------------------------- Mobile: xếp lại ------------------------- */
@container (max-width: 639px) {
  .scfx-wheel .scfx-stage, .scfx-stairs .scfx-stage { aspect-ratio: auto; display: flex; flex-direction: column; gap: 14px; overflow: visible; }
  .scfx-wheel .scfx-stage > *, .scfx-stairs .scfx-stage > *, .scfx-wheel .w-labels li, .scfx-stairs .s-items li {
    position: relative; left: auto; top: auto; width: auto; transform: none; white-space: normal; }
  .scfx-fig .ln { display: inline; }
  .scfx-wheel .w-intro { font-size: 15px; line-height: 1.5; text-indent: 0; text-align: left; padding-left: 20px; }
  .scfx-wheel .w-dot { position: absolute; left: 0; top: .45em; width: 10px; height: 10px; }
  .scfx-wheel .w-rule { width: 100%; height: 1px; }
  .scfx-wheel .w-svg { width: min(80%, 340px); margin: 4px auto; }
  .scfx-wheel .w-labels { display: grid; gap: 10px; }
  .scfx-wheel .w-labels li { text-align: left; font-size: 16px; line-height: 1.35; padding-left: 24px; }
  .scfx-wheel .w-labels li::before { content: ""; position: absolute; left: 0; top: .3em; width: 14px; height: 14px; border-radius: 50%; background: var(--c); }
  .scfx-wheel .w-brand { font-size: 13px; text-align: right; }

  .scfx-stairs .scfx-stage { align-items: center; border: 1px solid #9fb3c6; padding: 18px 14px; gap: 10px; }
  .scfx-stairs .s-frame { display: none; }
  .scfx-stairs .s-title { font-size: 21px; line-height: 1.25; white-space: normal; text-wrap: balance; }
  .scfx-stairs .s-sub { font-size: 14px; line-height: 1.3; margin-top: -4px !important; }
  .scfx-stairs .s-tag { font-size: 16px; line-height: 1.45; white-space: normal; width: 100%; }
  .scfx-stairs .s-tag .tg { display: block; }
  .scfx-stairs .s-logo { width: 28px; }
  .scfx-stairs .s-svg { width: min(78%, 320px); }
  .scfx-stairs .s-items { display: grid; gap: 12px; width: 100%; }
  .scfx-stairs .s-items li { text-align: left; font-size: 15px; line-height: 1.45; padding-left: 46px; }
  .scfx-stairs .s-badge { display: grid; place-items: center; position: absolute; left: 0; top: 0; width: 36px; height: 26px;
    border-radius: 6px; font-weight: 600; font-size: 13px; color: #fff; }
  .scfx-stairs [data-i="0"] .s-badge { background: linear-gradient(90deg, #3b3f9c, #c75cf6); }
  .scfx-stairs [data-i="1"] .s-badge { background: linear-gradient(90deg, #ee3f7c, #ff5c86); }
  .scfx-stairs [data-i="2"] .s-badge { background: linear-gradient(90deg, #ff5252, #ffc54a); }
  .scfx-stairs [data-i="3"] .s-badge { background: linear-gradient(90deg, #00c4ae, #3f8dff); }
  .scfx-stairs [data-i="4"] .s-badge { background: linear-gradient(90deg, #ffd86e, #b9ec5a); color: #333; }
  .scfx-stairs .s-mail { font-size: 15px; gap: 8px; }
  .scfx-stairs .s-play { width: 20px; }
}

/* ------------------------------- Chuyển động (chỉ khi có JS) ------------- */
/* Bánh xe: vòng nền → 6 ô bay vào theo chiều kim đồng hồ → biểu tượng → nhãn */
.scfx-js .scfx-wheel .w-intro { transition: opacity .9s ease, translate .9s ease; }
.scfx-js .scfx-wheel .w-rule { transition: scale 1.2s cubic-bezier(.6,0,.2,1) .2s; }
.scfx-js .scfx-wheel .w-ring, .scfx-js .scfx-wheel .w-hub { transition: opacity .8s ease .1s, transform 1s cubic-bezier(.2,.8,.2,1) .1s; transform-box: fill-box; transform-origin: center; }
.scfx-js .scfx-wheel .w-seg { transition: opacity .7s ease calc(.3s + var(--i) * .14s), transform .9s cubic-bezier(.2,.8,.2,1) calc(.3s + var(--i) * .14s), filter .35s; }
.scfx-js .scfx-wheel .w-icon { transition: opacity .6s ease calc(1s + var(--i) * .14s); }
.scfx-js .scfx-wheel .w-labels li { transition: opacity .8s ease calc(.6s + var(--i) * .14s), translate .8s ease calc(.6s + var(--i) * .14s), color .3s; }
.scfx-js .scfx-wheel .w-brand { transition: opacity 1s ease 1.6s; }
.scfx-js .scfx-wheel:not(.is-in) .w-intro { opacity: 0; translate: 0 10px; }
.scfx-js .scfx-wheel:not(.is-in) .w-rule { scale: 0 1; }
.scfx-js .scfx-wheel:not(.is-in) .w-ring, .scfx-js .scfx-wheel:not(.is-in) .w-hub { opacity: 0; transform: scale(.85); }
.scfx-js .scfx-wheel:not(.is-in) .w-seg { opacity: 0; transform: translate(calc(var(--dx) * 5), calc(var(--dy) * 5)); }
.scfx-js .scfx-wheel:not(.is-in) .w-icon { opacity: 0; }
.scfx-js .scfx-wheel:not(.is-in) .w-labels li { opacity: 0; translate: 0 12px; }
.scfx-js .scfx-wheel:not(.is-in) .w-brand { opacity: 0; }

/* Bậc thang: khung vẽ dần → tiêu đề → từng bậc 01→05 nâng lên cùng dòng chữ của nó → mũi tên vẽ dần */
.scfx-js .scfx-stairs .s-frame path { stroke-dasharray: 1; transition: stroke-dashoffset 1.6s cubic-bezier(.6,0,.3,1) calc(var(--k) * .25s); }
.scfx-js .scfx-stairs .s-title { transition: opacity .9s ease .15s, translate .9s ease .15s; }
.scfx-js .scfx-stairs .s-sub { transition: opacity .9s ease .3s; }
.scfx-js .scfx-stairs .s-tag { transition: opacity 1s ease .45s, translate 1s ease .45s; }
.scfx-js .scfx-stairs .s-logo { transition: opacity .8s ease .6s, rotate .8s ease .6s; }
.scfx-js .scfx-stairs .s-slab { transition: opacity .6s ease calc(.7s + var(--i) * .28s), transform .8s cubic-bezier(.3,1.25,.5,1) calc(.7s + var(--i) * .28s), filter .35s; }
.scfx-js .scfx-stairs .s-links > * { transition: stroke-dashoffset .7s ease calc(1s + var(--i) * .28s), opacity .5s ease calc(1s + var(--i) * .28s); }
.scfx-js .scfx-stairs .s-link { stroke-dasharray: 1; }
.scfx-js .scfx-stairs:not(.is-in) .s-link { stroke-dashoffset: 1; }
.scfx-js .scfx-stairs:not(.is-in) .s-link-dot { opacity: 0; }
.scfx-js .scfx-stairs .s-items li { transition: opacity .8s ease calc(1.1s + var(--i) * .28s), translate .8s ease calc(1.1s + var(--i) * .28s), color .3s; }
.scfx-js .scfx-stairs .s-arrow { stroke-dasharray: 1; transition: stroke-dashoffset 1.1s cubic-bezier(.5,0,.3,1) 2s; }
.scfx-js .scfx-stairs .s-head { transition-duration: .35s; transition-delay: 3s; }
.scfx-js .scfx-stairs .s-mail { transition: opacity 1s ease 2.4s; }
.scfx-js .scfx-stairs:not(.is-in) .s-frame path { stroke-dashoffset: 1; }
.scfx-js .scfx-stairs:not(.is-in) .s-title { opacity: 0; translate: 0 -8px; }
.scfx-js .scfx-stairs:not(.is-in) .s-sub { opacity: 0; }
.scfx-js .scfx-stairs:not(.is-in) .s-tag { opacity: 0; translate: 0 6px; }
.scfx-js .scfx-stairs:not(.is-in) .s-logo { opacity: 0; rotate: -60deg; }
.scfx-js .scfx-stairs:not(.is-in) .s-slab { opacity: 0; transform: translateY(-60px); }
.scfx-js .scfx-stairs:not(.is-in) .s-items li { opacity: 0; translate: 16px 0; }
.scfx-js .scfx-stairs:not(.is-in) .s-arrow { stroke-dashoffset: 1; }
.scfx-js .scfx-stairs:not(.is-in) .s-mail { opacity: 0; }

/* Vòng tròn: đĩa hiện → viền trắng vẽ dần theo chiều kim đồng hồ → chữ sáng lần lượt → đốm sáng đi mãi quanh vòng */
.scfx-js .scfx-cycle .c-disc { transition: opacity .9s ease, transform 1.1s cubic-bezier(.2,.8,.2,1); transform-box: fill-box; transform-origin: center; }
.scfx-js .scfx-cycle .c-ring { stroke-dasharray: 1; transition: stroke-dashoffset 2s cubic-bezier(.5,0,.3,1) .35s; }
.scfx-js .scfx-cycle .c-w { transition: opacity .8s ease calc(.65s + var(--k) * .4s), filter .3s; }
.scfx-js .scfx-cycle .c-chev path { transition: opacity .6s ease calc(.9s + var(--k) * .4s); }
.scfx-js .scfx-cycle .c-site, .scfx-js .scfx-cycle .c-site-flower { transition: opacity 1s ease 2s; }
.scfx-js .scfx-wheel .w-flower { transition: opacity 1.2s ease 1.3s, scale 1.4s cubic-bezier(.2,.8,.2,1) 1.3s; }
.scfx-js .scfx-wheel:not(.is-in) .w-flower { opacity: 0; scale: .8; }
.scfx-js .scfx-cycle .c-flower { transition: opacity 1.2s ease 1.2s, scale 1.4s cubic-bezier(.2,.8,.2,1) 1.2s; }
.scfx-js .scfx-cycle:not(.is-in) .c-flower { opacity: 0; scale: .85; }
.scfx-js .scfx-cycle:not(.is-in) .c-disc { opacity: 0; transform: scale(.88); }
.scfx-js .scfx-cycle:not(.is-in) .c-ring { stroke-dashoffset: 1; }
.scfx-js .scfx-cycle:not(.is-in) .c-w, .scfx-js .scfx-cycle:not(.is-in) .c-chev path, .scfx-js .scfx-cycle:not(.is-in) .c-site, .scfx-js .scfx-cycle:not(.is-in) .c-site-flower { opacity: 0; }
@keyframes scfx-orbit { to { transform: rotate(360deg); } }
@keyframes scfx-in { to { opacity: 1; } }

/* ------------------------------- Lặp nhẹ sau khi hiện xong (idle) -------- */
/* Bánh xe: từng ô lần lượt nhô ra + sáng lên, nhãn tương ứng đổi sang màu ô — chu kỳ 12s, mỗi ô 2s */
@keyframes scfx-w-idle { 0%, 15%, 100% { translate: 0 0; opacity: .78; filter: none; } 5%, 10% { translate: calc(var(--dx) * 1.7) calc(var(--dy) * 1.7); opacity: 1; filter: drop-shadow(0 0 10px rgba(255,255,255,.55)) drop-shadow(0 6px 10px rgba(0,0,0,.18)); } }
@keyframes scfx-w-shine { 0%, 15%, 100% { opacity: 0; } 5%, 10% { opacity: .22; } }
@keyframes scfx-w-label { 0%, 15%, 100% { color: #464a5c; scale: 1; } 5%, 10% { color: var(--c); scale: 1.05; } }
.scfx-wheel .w-shine { opacity: 0; pointer-events: none; }
.scfx-js .scfx-wheel.is-done .w-seg { animation: scfx-w-idle 12s cubic-bezier(.4,0,.2,1) calc(var(--i) * 2s) infinite backwards; }
.scfx-js .scfx-wheel.is-done .w-shine { animation: scfx-w-shine 12s ease-in-out calc(var(--i) * 2s) infinite backwards; }
.scfx-js .scfx-wheel.is-done .w-labels li { animation: scfx-w-label 12s cubic-bezier(.4,0,.2,1) calc(var(--i) * 2s) infinite backwards; }
/* Đĩa giữa bánh xe đổi sang đúng màu (tông đậm) của ô đang sáng, mượt ~0.8s; hover ô → đĩa theo ô đó */
@keyframes scfx-w-disc { 0%, 100% { fill: #5ba012; } 4.17%, 14.17% { fill: #d57401; } 20.83%, 30.83% { fill: #5f4462; } 37.50%, 47.50% { fill: #c91d59; } 54.17%, 64.17% { fill: #2839a3; } 70.83%, 80.83% { fill: #008491; } 87.50%, 97.50% { fill: #5ba012; } }
.scfx-wheel .w-disc { transition: fill .7s ease; }
.scfx-js .scfx-wheel.is-done .w-disc { animation: scfx-w-disc 12s linear infinite; }
.scfx-wheel.has-hot .w-disc { fill: var(--scfx-hot) !important; }
/* Bậc thang: tháp "thở" từ dưới lên — khối 01 nhấc lên kéo cả phần trên, rồi 02… 05, hạ dần; ánh sáng quét theo; chu kỳ 9s */
.scfx-stairs .s-glint { opacity: 0; pointer-events: none; }
@keyframes scfx-s-lift { 0%, 22%, 100% { translate: 0 0; } 9% { translate: 0 -30px; } }
@keyframes scfx-s-glint { 0%, 22%, 100% { opacity: 0; } 9% { opacity: .38; } }
@keyframes scfx-s-link { 0%, 22%, 100% { opacity: .55; } 9% { opacity: 1; } }
@keyframes scfx-s-arrow { 0%, 25%, 100% { opacity: .55; } 10% { opacity: 1; } }
.scfx-js .scfx-stairs.is-done .s-slab { animation: scfx-s-lift 9s cubic-bezier(.4,0,.2,1) calc(var(--i) * .5s) infinite backwards; }
.scfx-js .scfx-stairs.is-done .s-glint { animation: scfx-s-glint 9s ease-in-out calc(var(--i) * .5s) infinite backwards; }
.scfx-js .scfx-stairs.is-done .s-links > * { animation: scfx-s-link 9s ease-in-out calc(var(--i) * .5s) infinite backwards; }
.scfx-js .scfx-stairs.is-done .s-arrow { animation: scfx-s-arrow 9s ease-in-out 2.4s infinite backwards; }
/* Mũi tên: nét đứt sáng chạy mãi dọc đường cong về phía đầu mũi tên; đầu mũi tên nhích lên-phải theo nhịp */
@keyframes scfx-s-flow { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -.09; } }
@keyframes scfx-s-nudge { 0%, 100% { translate: 0 0; } 50% { translate: 5px -6px; } }
.scfx-js .scfx-stairs.is-done .s-arrow-flow { opacity: .75; transition: opacity 1s; animation: scfx-s-flow 1.6s linear infinite; }
.scfx-js .scfx-stairs.is-done .s-head { animation: scfx-s-arrow 9s ease-in-out 2.4s infinite backwards, scfx-s-nudge 1.6s ease-in-out infinite; }
/* Đoạn chữ của bậc đang sáng: to lên 5% (scale, gốc trái → không xô bố cục) + đậm màu, đồng bộ nhịp nâng bậc */
@keyframes scfx-s-text { 0%, 22%, 100% { scale: 1; color: #55636f; } 9% { scale: 1.06; color: #0f1c27; } }
.scfx-js .scfx-stairs.is-done .s-items li { animation: scfx-s-text 9s cubic-bezier(.4,0,.2,1) calc(var(--i) * .5s) infinite backwards; }
/* Vòng tròn: đốm sáng đi một vòng 10s; chữ sáng đúng lúc đốm đi qua (trên → phải → dưới → trái) */
@keyframes scfx-c-word { 0%, 18%, 100% { opacity: .7; filter: none; } 4% { opacity: 1; filter: drop-shadow(0 0 10px #fff); } }
.scfx-js .scfx-cycle.is-done .c-orbit-rot { animation: scfx-in 1.2s ease forwards, scfx-orbit 10s linear infinite; }
@keyframes scfx-c-flower { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.045); } }
.scfx-js .scfx-wheel.is-done .w-flower { animation: scfx-c-flower 10s ease-in-out infinite; }
/* Vòng tròn thở: cả nhóm (đĩa, viền, chữ, hoa, đốm) co giãn 0.97↔1.03, 1 vòng đốm sáng (10s) = 1 nhịp hít-thở */
.scfx-cycle .c-breath { transform-box: view-box; transform-origin: 389px 327px; }
@keyframes scfx-c-breath { 0%, 100% { transform: scale(1); } 25% { transform: scale(1.03); } 75% { transform: scale(.97); } }
.scfx-js .scfx-cycle.is-done .c-breath { animation: scfx-c-breath 10s ease-in-out infinite; }
.scfx-js .scfx-cycle.is-done .c-w { animation: scfx-c-word 10s ease-in-out calc(var(--k) * 2.5s) infinite backwards; }

/* Sau khi hiện xong: hover phản hồi ngay, không trễ */
.scfx-fig.is-done .w-seg, .scfx-fig.is-done .s-slab, .scfx-fig.is-done li { transition-delay: 0s !important; transition-duration: .35s !important; }
/* Tạm dừng vòng lặp khi ra khỏi khung nhìn */
.scfx-fig:not(.is-visible) *, .scfx-tab-hidden .scfx-fig * { animation-play-state: paused !important; }

@media (prefers-reduced-motion: reduce) {
  .scfx-fig *, .scfx-fig *::before { transition: none !important; animation: none !important; }
  .scfx-fig .c-orbit-rot { display: none; }
}

/* ------------------------------- Hover / chạm: nhấn một phần, phần khác lùi lại ---- */
/* Đang hover/chạm: tắt vòng lặp tự động (bánh xe, tháp) / tạm dừng (vòng tròn); rời ra thì chạy lại */
.scfx-wheel.is-hovering *, .scfx-stairs.is-hovering * { animation: none !important; }
.scfx-cycle.is-hovering * { animation-play-state: paused !important; }
.scfx-cycle.is-hovering .c-w { animation: none !important; }
.scfx-wheel .w-seg, .scfx-stairs .s-face, .scfx-cycle .c-w { transition: opacity .35s ease, transform .4s cubic-bezier(.4,0,.2,1), translate .4s cubic-bezier(.4,0,.2,1), filter .35s ease; }
.scfx-wheel.has-hot .w-seg:not(.is-hot) { filter: saturate(.4) brightness(1.12); }
.scfx-wheel .w-labels li.is-hot { scale: 1.07; }
/* Tháp: tầng được chọn nổi lên + glow cùng màu tầng, tầng khác mờ; chữ to + đổi màu tầng + chấm màu bên trái */
.scfx-stairs .s-slab { transition: translate .4s cubic-bezier(.4,0,.2,1), opacity .35s; }
.scfx-stairs.has-hot .s-slab > .s-face { filter: saturate(.35) brightness(1.15); }
.scfx-stairs.has-hot .s-slab.is-hot > .s-face { opacity: 1; filter: drop-shadow(0 0 9px var(--c)); }
.scfx-stairs .s-slab.is-hot { translate: 0 -12px; }
.scfx-stairs .s-items li { transition: color .3s, scale .35s cubic-bezier(.4,0,.2,1), opacity .35s; }
.scfx-stairs.has-hot .s-items li:not(.is-hot) { opacity: .55; }
.scfx-stairs .s-items li.is-hot { color: var(--c); scale: 1.07; }
.scfx-stairs .s-items li::before { content: ""; position: absolute; left: -1.1cqw; top: 50%; width: .6cqw; height: .6cqw; margin-top: -.3cqw;
  border-radius: 50%; background: var(--c); opacity: 0; transition: opacity .3s; }
.scfx-stairs .s-items li.is-hot::before { opacity: 1; }
.scfx-stairs .s-items li.is-hot .ln:last-child { text-decoration: underline; text-decoration-color: var(--c); text-underline-offset: .25em; }
/* Vòng tròn: nhãn được chọn sáng rõ, nhãn khác lùi */
.scfx-cycle.has-hot .c-w:not(.is-hot) { opacity: .5; }
.scfx-cycle .c-w.is-hot { filter: drop-shadow(0 0 10px #fff) drop-shadow(0 0 4px #fff); }
@container (max-width: 639px) { .scfx-stairs .s-items li::before { display: none; } }
@media (prefers-reduced-motion: reduce) { .scfx-fig .is-hot { scale: 1 !important; translate: none !important; } }

/* Cả "hàng" sáng khi chọn: tháp = tầng + dải mờ + chữ; bánh xe = ô + nhãn; vòng tròn = cung + nhãn */
.scfx-stairs .s-band { fill: var(--c); fill-opacity: 0; stroke: var(--c); stroke-opacity: 0; stroke-width: 1.5; vector-effect: non-scaling-stroke;
  transition: fill-opacity .35s ease, stroke-opacity .35s ease; }
.scfx-stairs .s-band.is-hot { fill-opacity: .1; stroke-opacity: .35; }
.scfx-wheel .w-seg.is-hot { filter: brightness(1.08) drop-shadow(0 0 14px var(--c)) drop-shadow(0 8px 12px rgba(0,0,0,.15)); }
.scfx-wheel .w-labels li { border-radius: .6em; transition: color .3s, scale .35s cubic-bezier(.4,0,.2,1), background-color .35s, box-shadow .35s; }
.scfx-wheel .w-labels li.is-hot { background-color: color-mix(in srgb, var(--c) 12%, transparent); box-shadow: 0 0 0 .35em color-mix(in srgb, var(--c) 12%, transparent); }
.scfx-cycle .c-arc { fill: none; stroke: #fff; stroke-width: 9; stroke-linecap: round; opacity: 0; transition: opacity .35s ease; filter: drop-shadow(0 0 6px #fff); }
.scfx-cycle .c-arc.is-hot { opacity: .85; }

/* 2026-11-11 live: sc-home-polish dat `body.home #main p{text-wrap:pretty}` (id) ghi de white-space:nowrap cua tieu de thap -> dong khau hieu gay va icon de chu. */
@container (min-width: 640px) {
  body.home #main .scfx-stairs :is(.s-title, .s-sub, .s-tag),
  .scfx-stairs :is(.s-title, .s-sub, .s-tag) { text-wrap: nowrap; white-space: nowrap; }
}