/* Ý 7 – Hướng dẫn từng bước. Hiệu ứng chỉ đổi transform và opacity. */
.fg button.fg-off, .fg button.fg-later, .fg button.fg-replay { background: none; border: 0; padding: 0; font-size: .8rem; color: var(--fa-muted); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.fg button.fg-off:hover, .fg button.fg-later:hover, .fg button.fg-replay:hover { color: var(--fa-amber-dark); }
.fg .fg-x { background: none; border: 0; width: 32px; height: 32px; border-radius: 50%; color: var(--fa-muted); }
.fg .fg-x:hover { background: var(--fa-soft); color: var(--fa-ink); }
.fg-kicker { margin: 0 0 .15rem; font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: var(--fa-amber-dark); }
.fg h3 { font-size: 1.05rem; font-weight: 700; margin: 0 0 .35rem; color: var(--fa-ink); }
.fg-num { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%;
  background: var(--fa-soft); color: var(--fa-amber-dark); font-weight: 700; font-size: .85rem; }

/* ---------- Nút "Bắt đầu" + bảng 5 bước ---------- */
.fg-journey { position: fixed; right: 16px; bottom: 16px; z-index: 1045; display: flex; flex-direction: column; align-items: flex-end; gap: .6rem; }
.fg-pill { display: inline-flex; align-items: center; gap: .55rem; border: 1px solid var(--fa-line); background: var(--fa-surface); color: var(--fa-ink);
  border-radius: 999px; padding: .35rem 1rem .35rem .4rem; box-shadow: var(--fa-shadow-lg); cursor: pointer;
  transition: transform .3s var(--fa-ease); animation: fg-pop .6s var(--fa-ease) both; }
.fg-pill:hover { transform: translateY(-2px); }
.fg-pill:focus-visible { outline: 3px solid var(--fa-honey); outline-offset: 2px; }
.fg-ring { width: 38px; height: 38px; transform: rotate(-90deg); }
.fg-ring circle { fill: none; stroke-width: 4; }
.fg-ring-bg { stroke: var(--fa-soft); }
.fg-ring-fill { stroke: var(--fa-amber); stroke-linecap: round; }
.fg-pill-txt { display: flex; flex-direction: column; line-height: 1.1; text-align: left; }
.fg-pill-txt b { font-size: .9rem; } .fg-pill-txt small { font-size: .72rem; color: var(--fa-muted); }

.fg-panel { width: min(360px, calc(100vw - 32px)); background: var(--fa-surface); border: 1px solid var(--fa-line); border-radius: 20px;
  box-shadow: var(--fa-shadow-lg); padding: 1rem 1.1rem; transform-origin: 100% 100%; }
.fg-panel:not([hidden]) { animation: fg-grow .35s var(--fa-ease); }
.fg-panel-head { display: flex; align-items: center; justify-content: space-between; }
.fg-panel h2 { font-size: 1.05rem; font-weight: 700; margin: 0; } .fg-panel h2 i { color: var(--fa-honey); }
.fg-sub { font-size: .8rem; color: var(--fa-muted); margin: .2rem 0 .7rem; }
.fg-steps { list-style: none; padding: 0; margin: 0; display: grid; gap: .35rem; }
.fg-steps li { display: flex; align-items: center; gap: .6rem; padding: .45rem .5rem; border-radius: 12px; }
.fg-steps li.now { background: linear-gradient(135deg, rgba(255, 214, 120, .35), rgba(255, 217, 194, .35)); }
.fg-steps li.now .fg-num { background: linear-gradient(135deg, var(--fa-honey), var(--fa-amber)); color: #fff; }
.fg-steps li.done .fg-num { background: #DDF2D6; color: #3E8E41; }
.fg-steps li.done .fg-txt b { color: var(--fa-muted); text-decoration: line-through; text-decoration-color: rgba(134, 105, 90, .4); }
.fg-txt { flex: 1; min-width: 0; line-height: 1.2; } .fg-txt b { display: block; font-size: .88rem; } .fg-txt small { font-size: .74rem; color: var(--fa-muted); }
.fg-go { flex: none; font-size: .78rem; font-weight: 600; text-decoration: none; color: var(--fa-amber-dark); }
.fg-steps li:not(.now) .fg-go { opacity: .7; }
.fg-panel-foot { display: flex; justify-content: space-between; margin-top: .7rem; padding-top: .6rem; border-top: 1px dashed var(--fa-line); }

/* ---------- Thẻ "đang kẹt" ---------- */
.fg-card { position: fixed; z-index: 1060; left: 50%; bottom: 24px; width: min(440px, calc(100vw - 32px)); transform: translateX(-50%);
  background: var(--fa-surface); border: 1px solid var(--fa-line); border-radius: 22px; box-shadow: 0 30px 60px -20px rgba(120, 70, 20, .55);
  padding: 1.3rem 1.3rem 1rem; text-align: center; }
.fg-card:not([hidden]) { animation: fg-rise .5s var(--fa-ease); }
.fg-card-icon { width: 54px; height: 54px; margin: -2.6rem auto .4rem; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 1.6rem; color: #fff; background: linear-gradient(135deg, var(--fa-honey), var(--fa-amber)); box-shadow: 0 8px 20px -8px rgba(232, 131, 58, .8); }
.fg-card-icon i { animation: fg-spin-slow 6s ease-in-out infinite; display: inline-block; }
.fg-card p { margin: 0 0 .5rem; color: var(--fa-muted); font-size: .9rem; }
.fg-next-step { display: flex; align-items: center; gap: .6rem; text-align: left; background: var(--fa-soft); border-radius: 14px; padding: .55rem .7rem; }
.fg-next-step b { display: block; color: var(--fa-ink); } .fg-next-step small { font-size: .78rem; }
.fg-next-step .fg-num { background: linear-gradient(135deg, var(--fa-honey), var(--fa-amber)); color: #fff; }
.fg-card .fg-actions { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; margin: .8rem 0 .5rem; }
.fg-foot { font-size: .8rem; color: var(--fa-muted); }

/* ---------- Bong bóng chỉ dẫn / giới thiệu trang ---------- */
.fg-tip { position: fixed; z-index: 1065; left: 0; top: 0; width: min(320px, calc(100vw - 32px)); background: var(--fa-surface);
  border: 1px solid var(--fa-line); border-radius: 18px; box-shadow: 0 24px 50px -18px rgba(120, 70, 20, .55); padding: .9rem 1rem .8rem;
  transition: transform .45s var(--fa-ease), opacity .3s; will-change: transform; }
.fg-tip.is-hidden { opacity: 0; pointer-events: none; }
.fg-tip .fg-text { font-size: .9rem; margin: 0 0 .7rem; color: var(--fa-ink); }
.fg-tip .fg-actions { display: flex; align-items: center; gap: .4rem; justify-content: flex-end; }
.fg-tip .fg-actions .fg-off { margin-right: auto; }
.fg-tip::before { content: ''; position: absolute; left: var(--fg-arrow, 50%); width: 14px; height: 14px; background: var(--fa-surface);
  border: 1px solid var(--fa-line); transform: translateX(-50%) rotate(45deg); }
.fg-tip.below::before { top: -8px; border-right: 0; border-bottom: 0; }
.fg-tip.above::before { bottom: -8px; border-left: 0; border-top: 0; }
.fg-tip.sheet::before { display: none; }
.fg-count { letter-spacing: 0; }
/* Không có nút để chỉ (hoặc màn hình nhỏ): hiện thành tấm dưới đáy */
.fg-tip.sheet { left: 0; right: 0; top: auto; bottom: 16px; margin: 0 auto; width: min(420px, calc(100vw - 24px)); transform: none !important; }

/* Vòng sáng quanh nút cần bấm: phần còn lại của trang tối đi một chút */
.fg-spot { position: fixed; z-index: 1050; left: 0; top: 0; border-radius: 14px; pointer-events: none;
  box-shadow: 0 0 0 4px rgba(245, 166, 35, .9), 0 0 0 9999px rgba(74, 52, 38, .32); transition: transform .45s var(--fa-ease); }
.fg-spot::after { content: ''; position: absolute; inset: -4px; border-radius: inherit; border: 3px solid var(--fa-honey); animation: fg-pulse 1.6s ease-out infinite; }

/* ---------- Chúc mừng ---------- */
.fg-toast { position: fixed; z-index: 1070; left: 50%; top: 76px; transform: translateX(-50%); width: min(420px, calc(100vw - 32px));
  display: flex; align-items: center; gap: .7rem; background: var(--fa-surface); border: 1px solid var(--fa-line); border-radius: 16px;
  box-shadow: var(--fa-shadow-lg); padding: .7rem .6rem .7rem .8rem; }
.fg-toast:not([hidden]) { animation: fg-drop .55s var(--fa-ease); }
.fg-toast-icon { flex: none; width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: #DDF2D6; color: #3E8E41; font-size: 1.3rem; }
.fg-toast-icon i { animation: fg-pop .6s var(--fa-ease) .2s both; display: inline-block; }
.fg-toast-txt { flex: 1; min-width: 0; line-height: 1.25; } .fg-toast-txt b { display: block; } .fg-toast-txt small { color: var(--fa-muted); }
.fg-flash { position: fixed; z-index: 1070; left: 50%; bottom: 24px; transform: translateX(-50%); background: var(--fa-ink); color: #FFF6E4;
  border-radius: 14px; padding: .6rem 1rem; font-size: .88rem; width: max-content; max-width: calc(100vw - 32px); }
.fg-flash:not([hidden]) { animation: fg-rise .4s var(--fa-ease); }

/* Điện thoại: bong bóng thành tấm trượt dưới đáy màn hình */
@media (max-width: 575px) {
  .fg-tip.sheet { bottom: 12px; }
  .fg-tip.sheet:not(.is-hidden) { animation: fg-rise .45s var(--fa-ease); }
  .fg-journey { right: 12px; bottom: 12px; }
  .fg-card, .fg-flash { left: 12px; right: 12px; bottom: 12px; width: auto; transform: none; }
  .fg-toast { top: 64px; }
}

@keyframes fg-pop { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }
@keyframes fg-grow { from { opacity: 0; transform: scale(.85) translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes fg-rise { from { opacity: 0; transform: translate(-50%, 24px); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes fg-drop { from { opacity: 0; transform: translate(-50%, -16px); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes fg-pulse { from { opacity: .9; transform: scale(1); } to { opacity: 0; transform: scale(1.12); } }
@keyframes fg-spin-slow { 0%, 100% { transform: rotate(-12deg); } 50% { transform: rotate(18deg); } }
@media (max-width: 575px) { @keyframes fg-rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } } }

@media (prefers-reduced-motion: reduce) {
  .fg *, .fg *::before, .fg *::after, .fg-tip, .fg-spot, .fg-pill { animation: none !important; transition: none !important; }
}