/* tickmi.com — tường lời chúc online (src/freeWish.mjs, public/wish/wish.js). Dựa trên public/ft/ft.css. */
.fw-tool { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.fw-create { display: grid; gap: 14px; }
.fw-field { display: grid; gap: 6px; min-width: 0; }
.fw-req { color: #dc2626; font-weight: 700; }
.ft-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.fw-preview { padding: 14px; }
.fw-demo { border-radius: 16px; min-height: 260px; }
.fw-cmp-wrap { overflow-x: auto; }
.fw-cmp { width: 100%; border-collapse: collapse; font-size: 15px; min-width: 520px; }
.fw-cmp th, .fw-cmp td { padding: 10px 12px; border-bottom: 1px solid var(--line); text-align: left; }
.fw-cmp .is-us { background: var(--soft); font-weight: 600; }

/* ---- thẻ lời chúc + sân khấu ---- */
.fw-stage { --fw-ink: #fff; --fw-card: rgba(255,255,255,.1); --fw-card-line: rgba(255,255,255,.18); color: var(--fw-ink); background: #14121c; padding: 18px; position: relative; overflow: hidden; }
.fw-theme-night { background: radial-gradient(1200px 600px at 10% 0%, #3b1d4a, transparent), radial-gradient(900px 500px at 100% 100%, #4a1d2a, transparent), #120f1a; }
.fw-theme-paper { --fw-ink: #3f2d20; --fw-card: #fffdf8; --fw-card-line: #e9dcc6; background: #f6efe3; }
.fw-theme-rose { --fw-ink: #5a1830; --fw-card: rgba(255,255,255,.75); --fw-card-line: #f4c3d1; background: linear-gradient(135deg, #ffe4ec, #ffd1dc); }
.fw-theme-gold { --fw-ink: #fff7e0; --fw-card: rgba(0,0,0,.28); --fw-card-line: rgba(240,200,110,.5); background: radial-gradient(1000px 600px at 50% 0%, #5c4410, #1c1405); }
.fw-theme-mint { --fw-ink: #0f3b33; --fw-card: rgba(255,255,255,.8); --fw-card-line: #b9e6da; background: linear-gradient(135deg, #e2fbf4, #c8f1e6); }
.fw-stage.has-bg { background-size: cover; background-position: center; }
.fw-stage-head { text-align: center; margin: 0 0 14px; }
.fw-stage-head h1, .fw-stage-head b { font-size: clamp(18px, 3vw, 44px); font-weight: 800; margin: 0; display: block; }
.fw-stage-head p { margin: 4px 0 0; opacity: .8; }
.fw-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.fw-card { position: relative; background: var(--fw-card); border: 1px solid var(--fw-card-line); border-radius: 16px; padding: 14px 16px; color: var(--fw-ink); backdrop-filter: blur(6px); overflow: hidden; display: flex; gap: 10px; min-width: 0; }
.fw-card.is-pinned { box-shadow: 0 0 0 2px #f5c451; }
.fw-card-img { width: 84px; height: 84px; object-fit: cover; border-radius: 10px; flex: none; }
.fw-card-body { min-width: 0; flex: 1; }
.fw-card-ic { font-size: 22px; line-height: 1; display: block; margin-bottom: 6px; }
.fw-card-text { margin: 0; font-size: 16px; line-height: 1.45; white-space: pre-line; overflow-wrap: anywhere; }
.fw-card-name { margin: 8px 0 0; font-weight: 700; font-size: 14px; opacity: .85; overflow-wrap: anywhere; }
.fw-frame-heart:after { content: "♥"; position: absolute; top: 6px; right: 10px; color: #f5c451; font-size: 18px; }
.fw-frame-double { border: 3px double #f5c451; }
.fw-frame-dashed { border: 2px dashed currentColor; }
.fw-frame-corners:before { content: ""; position: absolute; inset: 6px; border: 2px solid transparent; border-image: linear-gradient(135deg, #f5c451 0 18%, transparent 18% 82%, #f5c451 82%) 1; pointer-events: none; }
.fw-frame-ribbon:before { content: ""; position: absolute; left: -26px; top: 10px; width: 90px; height: 16px; background: #e11d48; transform: rotate(-40deg); }

/* ---- màn chiếu ---- */
.fw-live-body { margin: 0; padding: 0 !important; background: #0f0f14; }
.fw-live-body .fw-app { padding: 0; max-width: none; }
.fw-live { min-height: 100vh; padding: 3vh 3vw; box-sizing: border-box; display: flex; flex-direction: column; }
.fw-live .fw-stage-head h1 { font-size: clamp(24px, 4vw, 72px); }
.fw-live-row { display: flex; gap: 2.5vw; flex: 1; min-height: 0; }
.fw-live-main { flex: 1; min-width: 0; position: relative; }
.fw-live .fw-grid { grid-template-columns: repeat(auto-fill, minmax(clamp(220px, 20vw, 420px), 1fr)); gap: 1.2vw; }
.fw-live .fw-card-text { font-size: clamp(16px, 1.4vw, 30px); }
.fw-live .fw-grid.is-few { height: 100%; align-content: center; justify-content: center; grid-template-columns: repeat(auto-fit, minmax(clamp(260px, 26vw, 560px), 560px)); }
.fw-live .fw-grid.is-few .fw-card { padding: 1.6vw 1.8vw; }
.fw-live .fw-grid.is-few .fw-card-text { font-size: clamp(18px, 1.9vw, 40px); }
.fw-live .fw-card-name { font-size: clamp(13px, 1vw, 22px); }
.fw-live-qr { flex: none; width: clamp(160px, 15vw, 300px); align-self: flex-end; text-align: center; background: #fff; color: #18181b; border-radius: 18px; padding: 12px; }
.fw-live-qr canvas { width: 100%; height: auto; display: block; }
.fw-live-qr p { margin: 6px 0 0; font-weight: 700; font-size: clamp(13px, 1vw, 20px); }
.fw-live-qr small { color: #52525b; overflow-wrap: anywhere; }
.fw-live-empty { display: grid; place-items: center; text-align: center; height: 100%; min-height: 40vh; font-size: clamp(20px, 2.4vw, 44px); opacity: .9; }
.fw-live-empty span { font-size: 2.4em; }
.fw-live-brand { position: absolute; right: 1.4vw; bottom: 1vh; margin: 0; font-size: 12px; opacity: .55; }
.fw-live-brand a { color: inherit; text-decoration: none; letter-spacing: .08em; }
.fw-single { height: 100%; display: grid; place-items: center; }
.fw-single .fw-card { max-width: min(1100px, 90%); padding: 3vw; animation: fw-in .6s ease; }
.fw-single .fw-card-text { font-size: clamp(22px, 3vw, 60px); }
.fw-single .fw-card-img { width: clamp(120px, 18vw, 360px); height: clamp(120px, 18vw, 360px); }
.fw-float { position: absolute; inset: 0; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.fw-float .fw-card { position: absolute; left: 100%; width: clamp(240px, 22vw, 440px); animation: fw-fly 26s linear infinite; }
@keyframes fw-fly { from { transform: translateX(0); } to { transform: translateX(calc(-100vw - 120%)); } }
@keyframes fw-in { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .fw-float .fw-card { animation-duration: 80s; } .fw-single .fw-card { animation: none; } }

/* ---- khách ---- */
.fw-guest { max-width: 520px; margin: 20px auto; padding: 22px; display: grid; gap: 16px; }
.fw-ghead { text-align: center; }
.fw-ghead-ic { font-size: 34px; }
.fw-ghead h1 { font-size: 24px; margin: 6px 0 2px; overflow-wrap: anywhere; }
.fw-gform { display: grid; gap: 12px; }
.fw-ta { min-height: 110px; resize: vertical; font: inherit; }
.fw-count { justify-self: end; margin-top: -8px; }
.fw-icons { display: flex; flex-wrap: wrap; gap: 8px; }
.fw-ic { width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--line); background: #fff; font-size: 22px; cursor: pointer; }
.fw-ic.is-on { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(255,92,64,.2); background: var(--soft); }
.fw-photo { display: grid; gap: 8px; justify-items: start; }
.fw-photo-prev { display: flex; gap: 10px; align-items: center; }
.fw-photo-prev img { width: 88px; height: 88px; object-fit: cover; border-radius: 12px; }
.fw-thanks { text-align: center; display: grid; gap: 8px; justify-items: center; }
.fw-mine ul { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 8px; }
.fw-mine li { display: flex; justify-content: space-between; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; font-size: 14px; }
.fw-mine li span { min-width: 0; overflow-wrap: anywhere; }
.fw-st { flex: none; font-weight: 600; }
.fw-st-approved { color: var(--ok); }
.fw-st-pending { color: var(--warn); }
.fw-st-hidden { color: var(--muted); }
.fw-foot { text-align: center; }

/* ---- quản lý ---- */
.fw-manage { max-width: 1200px; margin: 0 auto; padding: 20px 16px 40px; display: grid; gap: 16px; }
.fw-mhead { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.fw-mhead h1 { margin: 2px 0; font-size: 26px; overflow-wrap: anywhere; }
.fw-prem-pill { background: #fef3c7; color: #92400e; flex: none; }
.fw-usage { display: grid; gap: 6px; font-weight: 600; }
.fw-usage-bar { height: 8px; border-radius: 99px; background: #f4f4f5; overflow: hidden; }
.fw-usage-bar i { display: block; height: 100%; background: var(--grad); }
.fw-usage.is-near .fw-usage-bar i { background: #f59e0b; }
.fw-usage.is-full .fw-usage-bar i { background: var(--brand-dark); }
.fw-mgrid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.fw-mcol { display: grid; gap: 16px; min-width: 0; }
.fw-manage .ft-box { padding: 18px; }
.fw-manage .ft-box h2 { font-size: 18px; margin: 0 0 6px; }
.fw-share-row { display: flex; gap: 14px; align-items: center; margin: 10px 0 18px; flex-wrap: wrap; }
.fw-share-row .fw-qr { width: 140px; height: 140px; border: 1px solid var(--line); border-radius: 12px; }
.fw-share-actions { display: grid; gap: 8px; justify-items: start; min-width: 0; }
.fw-url { overflow-wrap: anywhere; font-weight: 600; }
.fw-up-h3 { font-size: 16px; margin: 16px 0 4px; }
.fw-set summary { cursor: pointer; font-weight: 700; font-size: 18px; }
.fw-settings { display: grid; gap: 12px; margin-top: 12px; }
.fw-h3 { font-size: 15px; margin: 8px 0 0; }
.fw-prem { border: 1px dashed var(--line); border-radius: 14px; padding: 12px; display: grid; gap: 10px; margin: 0; }
.fw-prem legend { font-weight: 700; color: #92400e; padding: 0 6px; }
.fw-prem.is-locked { opacity: .55; }
.fw-inline { display: flex; gap: 10px; align-items: center; }
.fw-color { width: 44px; height: 32px; border: 1px solid var(--line); border-radius: 8px; padding: 0; background: none; }
.fw-bg-prev { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.fw-bg-prev img { width: 160px; max-width: 100%; aspect-ratio: 16/9; object-fit: cover; border-radius: 10px; }
.fw-list-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.fw-tabs { display: flex; gap: 6px; margin: 10px 0; flex-wrap: wrap; }
.fw-tab { border: 1px solid var(--line); background: #fff; border-radius: 99px; padding: 6px 12px; font: inherit; font-size: 14px; cursor: pointer; }
.fw-tab.is-on { background: var(--ink); color: #fff; border-color: var(--ink); }
.fw-tab small { opacity: .7; }
.fw-items { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.fw-item { display: flex; gap: 12px; padding: 12px; border: 1px solid var(--line); border-radius: 14px; }
.fw-item-pending { background: var(--warn-bg); border-color: #fde68a; }
.fw-item-hidden { opacity: .65; }
.fw-item-ic { font-size: 24px; flex: none; }
.fw-item-img { width: 56px; height: 56px; object-fit: cover; border-radius: 10px; flex: none; }
.fw-item-body { min-width: 0; flex: 1; }
.fw-item-text { margin: 0 0 4px; white-space: pre-line; overflow-wrap: anywhere; }
.fw-item-acts { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.fw-flag { color: var(--err); font-weight: 600; }
.fw-del { color: var(--err); }

@media (max-width: 900px) {
  .fw-tool, .fw-mgrid { grid-template-columns: minmax(0, 1fr); }
  .fw-live-row { flex-direction: column; }
  .fw-live-qr { align-self: center; }
}
@media (max-width: 480px) {
  .fw-guest { margin: 0; border-radius: 0; border-left: 0; border-right: 0; padding: 18px 16px; }
  .fw-mhead h1 { font-size: 22px; }
  .fw-grid { grid-template-columns: minmax(0, 1fr); }
}
.fw-mcol { min-width: 0; }
.fw-up .fw-cmp { min-width: 0; font-size: 13px; margin: 10px 0 12px; }
.fw-up .fw-cmp th, .fw-up .fw-cmp td { padding: 6px 6px; vertical-align: top; }