/* tickmi.com — bình chọn online + form đăng ký miễn phí (src/freeTools.mjs, public/ft/ft.js).
   Trang tạo dùng token của styles.css; trang /v, /f, live, quản lý đứng riêng nên khai báo lại token tối thiểu. */
:root {
  --brand: #ff5c40; --brand-2: #ff8563; --brand-3: #ffb199; --brand-dark: #c93a22;
  --ink: #18181b; --ink-2: #3f3f46; --muted: #52525b; --line: #ececef; --soft: #fff5f2;
  --grad: linear-gradient(135deg, var(--brand), var(--brand-2));
  --radius: 20px; --shadow: 0 1px 2px rgba(24,24,27,.04), 0 12px 32px -12px rgba(24,24,27,.14);
  --ok: #047857; --ok-bg: #ecfdf5; --warn: #b45309; --warn-bg: #fffbeb; --err: #b91c1c; --info: #0369a1; --info-bg: #f0f9ff;
}

/* ---- trang tạo ---- */
.ft-hero { position: relative; padding: 28px 0 56px; background: linear-gradient(180deg, var(--soft), #fff 70%); }
.ft-glow { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.ft-glow:before, .ft-glow:after { content: ""; position: absolute; border-radius: 50%; filter: blur(70px); opacity: .45; }
.ft-glow:before { width: 420px; height: 420px; background: var(--brand-3); top: -160px; right: -80px; }
.ft-glow:after { width: 320px; height: 320px; background: #ffe2d6; bottom: -120px; left: -100px; }
.ft-hero .wrap { position: relative; }
.ft-hero h1 { font-size: clamp(30px, 4vw, 48px); margin: 14px 0 10px; }
.ft-hero h1 em { font-style: normal; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ft-lead { color: var(--muted); max-width: 720px; margin: 0 0 24px; font-size: 17px; }

.ft-tool { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 20px; align-items: start; }
.ft-panel, .ft-side, .ft-box, .ft-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.ft-panel { padding: 20px 22px; }
.ft-side { padding: 18px; position: sticky; top: 84px; }
.ft-side-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.ft-free { text-align: center; color: var(--muted); font-size: 13px; margin: 12px 0 0; }

.ft-skel { display: grid; gap: 12px; padding: 20px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); }
.ft-skel i { display: block; height: 44px; border-radius: 12px; background: linear-gradient(90deg, #f4f4f5, #fafafa, #f4f4f5); background-size: 200% 100%; animation: ft-sh 1.2s infinite linear; }
.ft-skel i:first-child { width: 60%; }
@keyframes ft-sh { to { background-position: -200% 0; } }

.ft-label { display: block; font-size: 14px; font-weight: 700; color: var(--ink-2); margin: 16px 0 8px; }
.ft-builder > .ft-label:first-child { margin-top: 0; }
.ft-input { width: 100%; border: 1px solid var(--line); border-radius: 12px; padding: 11px 13px; font: inherit; font-size: 16px; background: #fcfcfd; color: var(--ink); transition: border-color .15s, box-shadow .15s; }
textarea.ft-input { resize: vertical; line-height: 1.5; }
.ft-input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(255,92,64,.18); background: #fff; }
.ft-mini { border: 1px solid var(--line); border-radius: 10px; padding: 6px 8px; font: inherit; background: #fff; }
.ft-mini:disabled { opacity: .5; }
.ft-opts, .ft-fields { display: grid; gap: 8px; }
.ft-opt { display: flex; align-items: center; gap: 8px; }
.ft-opt-dot { width: 16px; height: 16px; border-radius: 50%; border: 2px solid #d4d4d8; flex: none; }
.ft-icon-btn { flex: none; width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--line); background: #fff; font-size: 20px; line-height: 1; color: var(--muted); cursor: pointer; }
.ft-icon-btn:hover:not(:disabled) { border-color: #d4d4d8; color: var(--ink); }
.ft-icon-btn:disabled { opacity: .35; cursor: not-allowed; }
.ft-icon-btn.ft-danger:hover { color: var(--err); border-color: #fecaca; }
.ft-link { background: none; border: 0; padding: 8px 0; color: var(--brand-dark); font: inherit; font-weight: 600; cursor: pointer; }
.ft-link:hover { text-decoration: underline; }
.ft-link.ft-danger, .ft-danger { color: var(--err); }
.ft-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 12px; }
.ft-check-row { display: inline-flex; gap: 8px; align-items: center; cursor: pointer; font-size: 15px; }
.ft-check-row input { width: 18px; height: 18px; accent-color: var(--brand); }
.ft-inline { font-size: 14px; color: var(--muted); }
.ft-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 20px; }
.ft-small { font-size: 13px; }
.ft-muted { color: var(--muted); }
.ft-pre { white-space: pre-line; }
.ft-field { border: 1px solid var(--line); border-radius: 14px; padding: 10px; background: #fff; display: grid; gap: 8px; }
.ft-field.is-fixed { background: #fafafa; margin-bottom: 8px; }
.ft-field-top { display: flex; align-items: center; gap: 8px; }
.ft-field-top .ft-input { flex: 1; min-width: 0; padding: 9px 11px; }
.ft-tag { flex: none; font-size: 12px; font-weight: 700; color: var(--brand-dark); background: var(--soft); border-radius: 99px; padding: 3px 9px; white-space: nowrap; }
.ft-small-ta { font-size: 15px; }
.ft-addrow { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 10px; }
.ft-chip { border: 1px dashed #d4d4d8; background: #fff; border-radius: 99px; padding: 6px 12px; font: inherit; font-size: 14px; font-weight: 600; color: var(--ink-2); cursor: pointer; }
.ft-chip:hover { border-color: var(--brand); color: var(--brand-dark); }
.ft-mine { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); }
.ft-mine ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ft-mine li { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; }
.ft-mine li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ft-mine a { color: var(--brand-dark); font-weight: 600; text-decoration: none; white-space: nowrap; }

/* điện thoại xem trước */
.ft-phone { margin: 0 auto; max-width: 300px; border: 10px solid #18181b; border-radius: 38px; background: #fafafa; min-height: 420px; position: relative; overflow: hidden; box-shadow: 0 24px 48px -24px rgba(24,24,27,.35); }
.ft-phone-notch { width: 90px; height: 18px; background: #18181b; border-radius: 0 0 12px 12px; margin: 0 auto; }
.ft-phone-body { padding: 16px 14px 20px; display: grid; gap: 10px; }
.ft-phone-body h3 { font-size: 17px; margin: 0; overflow-wrap: anywhere; }
.ft-pf span { display: block; font-size: 12px; font-weight: 600; color: var(--ink-2); margin-bottom: 4px; }
.ft-pf i { display: block; height: 34px; border: 1px solid var(--line); border-radius: 9px; background: #fff; }
.ft-pf i.is-tall { height: 58px; }

/* nút */
.ft-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 10px 18px; border-radius: 12px; border: 1px solid transparent; font: inherit; font-weight: 700; font-size: 15px; text-decoration: none; cursor: pointer; transition: transform .15s, box-shadow .15s, background .15s; }
.ft-btn:active:not(:disabled) { transform: translateY(1px); }
.ft-btn:disabled { opacity: .5; cursor: not-allowed; }
.ft-btn-primary { background: var(--grad); color: #fff; box-shadow: 0 10px 22px -10px rgba(255,92,64,.7); }
.ft-btn-primary:hover:not(:disabled) { box-shadow: 0 14px 26px -10px rgba(255,92,64,.8); }
.ft-btn-ghost { background: #fff; border-color: var(--line); color: var(--ink); }
.ft-btn-ghost:hover:not(:disabled) { border-color: #d4d4d8; }
.ft-btn-dark { background: #18181b; color: #fff; }
.ft-btn-danger { background: #dc2626; color: #fff; }
.ft-btn-lg { min-height: 50px; padding: 12px 24px; font-size: 16px; }
.ft-btn-sm { min-height: 36px; padding: 6px 12px; font-size: 14px; }
.ft-btn-block { width: 100%; }
.ft-btn.is-busy { position: relative; }

.ft-msg { margin: 10px 0 0; font-size: 14px; min-height: 1.4em; }
.ft-msg.is-err { color: var(--err); }
.ft-msg.is-ok { color: var(--ok); }
.ft-ok { background: var(--ok-bg); color: var(--ok); border-radius: 12px; padding: 10px 14px; font-weight: 600; margin: 0 0 14px; }
.ft-warn { background: var(--warn-bg); color: var(--warn); border-radius: 12px; padding: 10px 14px; font-weight: 600; margin: 0 0 14px; }
.ft-empty { color: var(--muted); text-align: center; border: 1.5px dashed var(--line); border-radius: 14px; padding: 32px 16px; margin: 0; }

/* lựa chọn bình chọn */
.ft-choices { display: grid; gap: 8px; }
.ft-choice { display: flex; align-items: center; gap: 10px; text-align: left; width: 100%; padding: 12px 14px; border: 1.5px solid var(--line); border-radius: 14px; background: #fff; font: inherit; font-size: 15px; color: var(--ink); overflow-wrap: anywhere; }
.ft-choice.is-tap { cursor: pointer; min-height: 54px; font-size: 16px; transition: border-color .15s, background .15s; }
.ft-choice.is-tap:hover { border-color: #d4d4d8; }
.ft-choice.is-on { border-color: var(--brand); background: var(--soft); }
.ft-check { flex: none; width: 20px; height: 20px; border-radius: 50%; border: 2px solid #d4d4d8; display: grid; place-items: center; }
.ft-check.is-box { border-radius: 6px; }
.ft-choice.is-on .ft-check { border-color: var(--brand); background: var(--brand); box-shadow: inset 0 0 0 3px #fff; }
.ft-choice.is-on .ft-check.is-box { box-shadow: none; }
.ft-choice.is-on .ft-check.is-box:after { content: "✓"; color: #fff; font-size: 13px; font-weight: 800; }

/* thanh kết quả */
.ft-bars { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 14px; }
.ft-bar-head { display: flex; justify-content: space-between; gap: 12px; font-size: 15px; }
.ft-bar-label { overflow-wrap: anywhere; }
.ft-bars li.is-mine .ft-bar-label:after { content: " ✓"; color: var(--brand-dark); font-weight: 800; }
.ft-bar { height: 12px; border-radius: 99px; background: #f4f4f5; overflow: hidden; margin: 6px 0 2px; }
.ft-bar i { display: block; height: 100%; border-radius: 99px; background: #d4d4d8; transition: width .45s cubic-bezier(.2,.8,.2,1); }
.ft-bars li.is-top .ft-bar i { background: var(--grad); }
.ft-bars small { color: var(--muted); font-size: 13px; }

/* ---- trang người tham gia ---- */
.ft-body { margin: 0; font-family: 'Be Vietnam Pro', system-ui, -apple-system, 'Segoe UI', sans-serif; color: var(--ink); line-height: 1.55; -webkit-font-smoothing: antialiased; min-height: 100vh; }
.ft-body *, .ft-body *:before, .ft-body *:after { box-sizing: border-box; }
.ft-vote, .ft-fill { background: radial-gradient(1200px 500px at 100% -10%, #ffe2d6, transparent 60%), linear-gradient(180deg, var(--soft), #fff 60%); }
.ft-vote .ft-app, .ft-fill .ft-app { width: min(560px, 100% - 32px); margin: 0 auto; padding: 28px 0 32px; }
.ft-body .ft-card { padding: 22px; }
.ft-body h1 { font-size: clamp(22px, 5vw, 28px); line-height: 1.25; letter-spacing: -.02em; margin: 0 0 14px; overflow-wrap: anywhere; }
.ft-center { text-align: center; }
.ft-card.ft-center { width: min(520px, 100% - 32px); margin: 15vh auto 0; display: grid; gap: 12px; justify-items: center; padding: 28px; }
.ft-center-text { text-align: center; }
.ft-vote .ft-btn-lg { margin-top: 16px; }
.ft-fill-form { display: grid; gap: 14px; margin-top: 8px; }
.ft-fill-row label { display: block; font-weight: 600; font-size: 15px; margin-bottom: 6px; }
/* Dấu * trường bắt buộc: đỏ (chủ dự án 2026-10-24), cả trang khách lẫn xem trước. */
.ft-req { color: #dc2626; font-weight: 700; }
.ft-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.ft-done { text-align: center; display: grid; gap: 8px; justify-items: center; padding: 12px 0; }
.ft-done-ic { width: 64px; height: 64px; border-radius: 50%; background: var(--ok-bg); color: var(--ok); font-size: 32px; font-weight: 800; display: grid; place-items: center; animation: ft-pop .35s ease-out; }
@keyframes ft-pop { from { transform: scale(.6); opacity: 0; } }
.ft-foot { text-align: center; color: var(--muted); font-size: 13px; margin: 18px 0 0; }
.ft-foot a { color: var(--ink); font-weight: 800; letter-spacing: .04em; text-decoration: none; }

/* ---- màn hình lớn ---- */
.ft-live { background: #0f0f14; color: #fff; }
.ft-live .ft-app { min-height: 100vh; }
.ft-live > .ft-app > .ft-live, .ft-app > .ft-live { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 32px; min-height: 100vh; padding: clamp(20px, 4vw, 56px); background: radial-gradient(900px 500px at 0% 0%, rgba(255,92,64,.22), transparent 60%), radial-gradient(700px 500px at 100% 100%, rgba(255,133,99,.14), transparent 60%), #0f0f14; color: #fff; }
.ft-live-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; }
.ft-live-tag { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 14px; letter-spacing: .08em; text-transform: uppercase; color: #6ee7b7; }
.ft-live-tag:before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: currentColor; animation: ft-pulse 1.6s infinite; }
.ft-live-tag.is-paused { color: #fcd34d; }
.ft-live-tag.is-paused:before { animation: none; }
@keyframes ft-pulse { 50% { opacity: .35; } }
.ft-live-fs { background: rgba(255,255,255,.08); color: #fff; border: 1px solid rgba(255,255,255,.14); border-radius: 10px; padding: 8px 14px; font: inherit; font-size: 14px; cursor: pointer; }
.ft-live-main h1 { font-size: clamp(28px, 3.6vw, 56px); line-height: 1.15; margin: 0 0 clamp(20px, 3vw, 40px); }
.ft-bars.is-big { gap: clamp(14px, 2vw, 26px); }
.ft-bars.is-big .ft-bar-head { font-size: clamp(18px, 2vw, 30px); font-weight: 600; }
.ft-bars.is-big .ft-bar { height: clamp(16px, 2vw, 28px); background: rgba(255,255,255,.08); }
.ft-bars.is-big .ft-bar i { background: rgba(255,255,255,.35); }
.ft-bars.is-big li.is-top .ft-bar i { background: var(--grad); box-shadow: 0 0 24px rgba(255,92,64,.55); }
.ft-bars.is-big small { color: rgba(255,255,255,.6); font-size: clamp(13px, 1.2vw, 18px); }
.ft-live-total { margin-top: 24px; font-size: clamp(16px, 1.6vw, 24px); color: rgba(255,255,255,.75); font-weight: 600; }
.ft-live-side { align-self: center; text-align: center; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); border-radius: 28px; padding: 28px; backdrop-filter: blur(10px); }
.ft-live-qr { background: #fff; border-radius: 20px; padding: 14px; display: grid; place-items: center; aspect-ratio: 1; }
.ft-live-qr canvas { width: 100% !important; height: auto !important; }
.ft-live-scan { font-size: 22px; font-weight: 700; margin: 18px 0 4px; }
.ft-live-url { font-size: 18px; color: rgba(255,255,255,.75); margin: 0; overflow-wrap: anywhere; }
.ft-live-brand { margin: 18px 0 0; }
.ft-live-brand a { color: #fff; font-weight: 800; letter-spacing: .08em; text-decoration: none; opacity: .8; }

/* ---- trang quản lý ---- */
.ft-manage-body, .ft-body.ft-manage { background: #fafafa; }
.ft-body.ft-manage .ft-app { min-height: 100vh; }
.ft-mtop { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px max(16px, calc((100% - 1160px) / 2)); background: #fff; border-bottom: 1px solid var(--line); }
.ft-mbrand img { display: block; height: 24px; width: auto; }
main.ft-manage { width: min(1160px, 100% - 32px); margin: 0 auto; padding: 24px 0 48px; }
.ft-mhead { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.ft-mhead h1 { margin-bottom: 8px; }
.ft-mmeta { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; }
.ft-mtools { display: flex; gap: 8px; flex-wrap: wrap; }
.ft-pill { display: inline-flex; align-items: center; gap: 6px; border-radius: 99px; padding: 3px 10px; font-size: 13px; font-weight: 700; }
.ft-pill:before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.ft-pill.is-ok { background: var(--ok-bg); color: var(--ok); }
.ft-pill.is-warn { background: var(--warn-bg); color: var(--warn); }
.ft-pill.is-info { background: var(--info-bg); color: var(--info); }
.ft-usage { font-size: 14px; font-weight: 700; }
.ft-usage.is-warn { color: var(--warn); }
.ft-mgrid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.ft-mcol { display: grid; gap: 18px; min-width: 0; grid-template-columns: minmax(0, 1fr); }
.ft-box { padding: 20px; }
.ft-box h2 { font-size: 18px; margin: 0 0 12px; }
.ft-box-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 12px; }
.ft-box-head h2 { margin: 0; }
.ft-share h2 { margin-bottom: 4px; }
.ft-share-lead { margin: 0 0 16px; color: var(--muted); font-size: 15px; }
.ft-share-grid { display: grid; grid-template-columns: minmax(0, 1fr) 140px; gap: 20px; align-items: start; }
.ft-share-label { margin: 0 0 6px; font-weight: 700; font-size: 14px; color: var(--ink); }
.ft-share-live { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); }
.ft-share-live .ft-small { margin: 0 0 10px; }
.ft-share-qrcol { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.ft-share-qrcol .ft-small { margin: 0; }
.ft-share-qrcol .ft-btn { width: 100%; }
.ft-share-main { min-width: 0; }
.ft-share-qr { width: 140px; height: 140px; border: 1px solid var(--line); border-radius: 14px; padding: 6px; background: #fff; }
.ft-share-qr canvas { width: 100% !important; height: auto !important; }
.ft-copy { display: flex; gap: 8px; flex-wrap: wrap; }
.ft-copy .ft-input { flex: 1 1 180px; min-width: 0; font-size: 14px; }
.ft-keep { margin-top: 20px; padding: 14px 16px; border-radius: 14px; background: var(--soft); }
.ft-keep .ft-small { margin: 0 0 10px; }
.ft-up { background: linear-gradient(135deg, #fff, var(--soft)); border-color: #ffe0d6; }
.ft-up p { color: var(--ink-2); margin: 0 0 14px; }
.ft-up-list { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 8px; color: var(--ink-2); }
.ft-up-list li { position: relative; padding-left: 26px; }
.ft-up-list li:before { content: ""; position: absolute; left: 0; top: 3px; width: 18px; height: 18px; border-radius: 50%; background: #ff5c40 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 8.5 2.5 2.5L12 5.5'/%3E%3C/svg%3E") center/12px no-repeat; }
.ft-up.is-done { background: var(--info-bg); border-color: #bae6fd; }
.ft-danger-zone { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--line); text-align: right; }
.ft-table-wrap { overflow-x: auto; margin: 0 -4px; }
.ft-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.ft-table th, .ft-table td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--line); vertical-align: top; overflow-wrap: anywhere; }
.ft-table th { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); white-space: nowrap; }
.ft-td-act { width: 44px; }

/* hộp xác nhận + toast */
.ft-modal { position: fixed; inset: 0; background: rgba(24,24,27,.45); display: grid; place-items: center; padding: 16px; z-index: 100; animation: ft-fade .15s ease-out; }
.ft-modal-box { background: #fff; border-radius: 20px; padding: 22px; width: min(420px, 100%); box-shadow: 0 30px 60px -20px rgba(0,0,0,.35); }
.ft-modal-box h2 { font-size: 18px; margin: 0 0 8px; }
.ft-modal-box p { color: var(--ink-2); margin: 0 0 18px; }
.ft-modal-actions { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
@keyframes ft-fade { from { opacity: 0; } }
.ft-toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); background: #18181b; color: #fff; padding: 10px 18px; border-radius: 99px; font-size: 14px; font-weight: 600; z-index: 110; transition: opacity .3s; }
.ft-toast.is-out { opacity: 0; }

/* ---- nội dung SEO ---- */
.ft-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.ft-steps li { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; }
.ft-steps li > span { width: 32px; height: 32px; border-radius: 50%; background: var(--grad); color: #fff; font-weight: 800; display: grid; place-items: center; margin-bottom: 10px; }
.ft-steps h3 { font-size: 17px; }
.ft-steps p { color: var(--muted); margin: 0; font-size: 15px; }
.ft-uses { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.ft-uses p { color: var(--muted); font-size: 15px; margin: 0; }
.ft-h2 { font-size: clamp(22px, 2.6vw, 28px); margin: 40px 0 16px; }
.ft-feats { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 24px; }
.ft-feats li { display: flex; gap: 10px; align-items: flex-start; }
.ft-feats svg { width: 20px; height: 20px; color: var(--brand); flex: none; margin-top: 3px; }
.ft-studio { background: linear-gradient(135deg, #fff, var(--soft)); border: 1px solid #ffe0d6; border-radius: 28px; padding: clamp(24px, 4vw, 48px); text-align: center; }
.ft-studio .hero-ctas { justify-content: center; }
.ft-related { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.ft-related a { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px; text-decoration: none; font-weight: 600; background: #fff; }
.ft-related a:hover { border-color: var(--brand-3); }
.ft-related svg { width: 18px; height: 18px; flex: none; }

@media (max-width: 960px) {
  .ft-tool, .ft-mgrid { grid-template-columns: 1fr; }
  .ft-side { position: static; }
  .ft-mgrid > .ft-mcol:last-child { order: -1; }
  .ft-uses { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ft-app > .ft-live { grid-template-columns: 1fr; }
  .ft-live-side { max-width: 380px; width: 100%; margin: 0 auto; }
}
@media (max-width: 640px) {
  .ft-panel { padding: 16px; }
  .ft-steps, .ft-uses, .ft-feats, .ft-related { grid-template-columns: 1fr; }
  .ft-share-grid { grid-template-columns: 1fr; }
  .ft-share-qrcol .ft-btn { width: auto; }
  .ft-field-top { flex-wrap: wrap; }
  .ft-field-top .ft-input { flex-basis: 100%; order: 3; }
  .ft-field-top .ft-icon-btn { margin-left: auto; }
  .ft-table thead { display: none; }
  .ft-table, .ft-table tbody, .ft-table tr, .ft-table td { display: block; width: 100%; }
  .ft-table tr { border: 1px solid var(--line); border-radius: 14px; padding: 8px 12px; margin-bottom: 10px; position: relative; }
  .ft-table td { border: 0; padding: 4px 0; }
  .ft-table td:empty { display: none; }
  .ft-table td:before { content: attr(data-label); display: block; font-size: 12px; color: var(--muted); font-weight: 600; }
  .ft-table td.ft-td-act { position: absolute; top: 8px; right: 8px; width: auto; padding: 0; }
  .ft-table td.ft-td-act:before { display: none; }
  .ft-mtools { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .ft-bar i, .ft-btn, .ft-skel i, .ft-live-tag:before, .ft-done-ic, .ft-modal { transition: none; animation: none; }
}

/* ---- /f/{code}: "Form đơn giản" — cùng bố cục trang đăng ký Studio dựng từ form này khi chuyển (tickmi-studio lib/freeToolRegistration.ts):
   cột giấy trắng 672px sát mép trên trên nền #fff1ee, lề 64/48, tiêu đề 26/700, nhãn 13/600, ô 48px bo 12, nút cam 48px. ---- */
body.ft-fill { background: #fff1ee; color: #18202b; }
.ft-fill .ft-app { width: 100%; max-width: 672px; margin: 0 auto; padding: 0; background: #fff; display: flex; flex-direction: column; }
.ft-sf { padding: 64px 48px 40px; flex: 1; line-height: 1.5; }
.ft-sf h1 { font-size: 32px; font-weight: 700; line-height: 1.15; letter-spacing: -.3px; margin: 0; color: #18202b; }
.ft-sf-desc { font-size: 15px; line-height: 1.65; color: #667085; margin: 12px 0 0; white-space: pre-line; overflow-wrap: anywhere; }
.ft-sf-sub { font-size: 16px; font-weight: 600; color: #171717; margin: 20px 0 16px; }
.ft-sf-form { display: grid; gap: 16px; }
.ft-sf-row label { display: block; padding-bottom: 6px; font-size: 13px; font-weight: 600; color: #404040; }
.ft-sf-row .ft-req { color: #ef4444; font-weight: 600; }
.ft-sf-input { width: 100%; height: 48px; border: 1px solid #e5e5e5; border-radius: 12px; background: #fff; padding: 0 14px; font: inherit; font-size: 16px; color: #171717; outline: none; transition: border-color .15s, box-shadow .15s; }
.ft-sf-input:focus { border-color: #ff5c40; box-shadow: 0 0 0 3px rgba(255,92,64,.15); }
select.ft-sf-input { padding-right: 40px; appearance: none; -webkit-appearance: none; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23737373' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E") no-repeat right 14px center; }
.ft-sf-btn { margin-top: 16px; width: 100%; height: 48px; border: 0; border-radius: 12px; background: #ff5c40; color: #fff; font: inherit; font-size: 16px; font-weight: 600; cursor: pointer; transition: background .15s, transform .15s; }
.ft-sf-btn:hover:not(:disabled) { background: #f04a2e; }
.ft-sf-btn:active:not(:disabled) { transform: scale(.99); }
.ft-sf-btn:disabled { opacity: .6; cursor: not-allowed; }
.ft-sf .ft-msg { margin-top: 4px; }
.ft-sf-note { margin: 24px 0 0; padding: 14px 16px; border-radius: 12px; font-size: 15px; font-weight: 500; }
.ft-sf-note.is-warn { background: #fffbeb; color: #b45309; }
.ft-sf-done { margin-top: 32px; padding: 20px; border-radius: 16px; background: #ecfdf5; color: #065f46; }
.ft-sf-done h2 { font-size: 16px; font-weight: 600; margin: 0 0 4px; }
.ft-sf-done p { margin: 0; font-size: 15px; }
.ft-sf-done button { margin-top: 14px; background: none; border: 0; padding: 0; color: #065f46; font: inherit; font-weight: 600; text-decoration: underline; cursor: pointer; }
.ft-sf-foot { padding: 9px 16px 24px; text-align: center; font-size: 13px; color: #667085; }
.ft-sf-foot a { color: inherit; }
@media (max-width: 640px) {
  body.ft-fill { background: #fff; }
  .ft-sf { padding: 64px 20px 40px; }
  .ft-sf h1 { font-size: 26px; }
}

/* ---- /v/{code}: cùng khung trang bình chọn Studio (tickmi-studio-public GuestPageLayout + guestUi, theme MINIMAL) — chuyển sang Studio
   (theme mặc định MINIMAL) người bình chọn không thấy khác. ---- */
body.ft-vote { background: #0a0a0a; color: #fff; }
.ft-vote .ft-app { width: 100%; padding: 0; margin: 0; }
.ft-gp { position: relative; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; line-height: 1.5; }
.ft-gp-deco { position: fixed; inset: 0; overflow: hidden; pointer-events: none; }
.ft-gp-deco i { position: absolute; border-radius: 50%; filter: blur(64px); }
.ft-gp-deco i:nth-child(1) { left: -8rem; top: -8rem; width: 24rem; height: 24rem; background: rgba(255,255,255,.10); }
.ft-gp-deco i:nth-child(2) { right: -8rem; bottom: -10rem; width: 28rem; height: 28rem; background: rgba(163,163,163,.10); }
.ft-gp-deco b { position: absolute; inset: 0; opacity: .07; background-image: radial-gradient(currentColor 1px, transparent 1px); background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(ellipse at top, #000 20%, transparent 70%); mask-image: radial-gradient(ellipse at top, #000 20%, transparent 70%); }
.ft-gp-in { position: relative; z-index: 1; width: 100%; max-width: 32rem; margin: 0 auto; padding: 16px; flex: 1; display: flex; flex-direction: column; }
.ft-gp-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.ft-gp-pill { display: flex; align-items: center; gap: 8px; min-width: 0; border-radius: 999px; border: 1px solid rgba(255,255,255,.15); background: rgba(255,255,255,.10);
  padding: 6px 12px; font-size: 14px; line-height: 20px; font-weight: 600; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.ft-gp-pill svg { width: 16px; height: 16px; opacity: .9; flex: none; }
.ft-gp-status { font-size: 12px; line-height: 16px; }
.ft-gp-dot { position: relative; width: 8px; height: 8px; flex: none; }
.ft-gp-dot:before, .ft-gp-dot:after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: #34d399; }
.ft-gp-dot:before { animation: ft-ping 1s cubic-bezier(0,0,.2,1) infinite; opacity: .7; }
.ft-gp-dot.is-wait:before, .ft-gp-dot.is-wait:after { background: #7dd3fc; }
@keyframes ft-ping { 75%, 100% { transform: scale(2); opacity: 0; } }
.ft-gp main { margin: auto 0; }
.ft-gp-card { border-radius: 1.75rem; overflow: clip; color: #171717; background: #fff; box-shadow: 0 30px 80px -24px rgba(0,0,0,.55), 0 0 0 1px rgba(0,0,0,.05);
  padding: 20px; }
.ft-gp-card.is-rise { animation: ft-rise .45s cubic-bezier(.2,.8,.2,1) both; }
@keyframes ft-rise { from { opacity: 0; transform: translateY(12px); } }
.ft-gp-eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #171717; margin: 0; line-height: 16px; }
.ft-gp-q { margin: 12px 0 0; font-size: 1.4rem; line-height: 1.375; font-weight: 700; letter-spacing: -.025em; overflow-wrap: anywhere; }
.ft-gp-hint { margin: 16px 0 0; font-size: 14px; font-weight: 500; color: #737373; }
.ft-gp-choices { margin-top: 16px; display: grid; gap: 10px; }
.ft-gp-hint + .ft-gp-choices { margin-top: 10px; }
.ft-gp-choice { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; border: 2px solid #e5e5e5; border-radius: 16px; background: #fff; color: #262626;
  padding: 12px 14px; font: inherit; font-size: 16px; font-weight: 500; cursor: pointer; transition: all .15s; }
.ft-gp-choice:hover { border-color: #a3a3a3; background: #fafafa; }
.ft-gp-choice:active { transform: scale(.99); }
.ft-gp-choice:disabled { opacity: .5; cursor: not-allowed; }
.ft-gp-letter { width: 32px; height: 32px; flex: none; display: grid; place-items: center; border-radius: 12px; background: #f5f5f5; color: #737373; font-size: 14px; font-weight: 700; transition: background .15s, color .15s; }
.ft-gp-choice:hover .ft-gp-letter { background: #e5e5e5; }
.ft-gp-label { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.ft-gp-tick { width: 24px; height: 24px; flex: none; display: grid; place-items: center; border-radius: 50%; border: 2px solid #d4d4d4; color: transparent; transition: all .15s; }
.ft-gp-tick.is-box { border-radius: 6px; }
.ft-gp-tick svg { width: 14px; height: 14px; }
.ft-gp-choice.is-on { border-color: #171717; background: #f5f5f5; color: #171717; box-shadow: 0 0 0 4px rgba(23,23,23,.10); }
.ft-gp-choice.is-on .ft-gp-letter { background: #171717; color: #fff; }
.ft-gp-choice.is-on .ft-gp-tick { border-color: transparent; background: #171717; color: #fff; }
.ft-gp-actions { position: sticky; bottom: 0; margin: 24px -4px 0; padding: 16px 4px 4px; background: linear-gradient(to top, #fff, rgba(255,255,255,.95), rgba(255,255,255,0)); }
.ft-gp-btn { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 3.25rem; border: 0; border-radius: 16px; padding: 0 20px; background: #171717; color: #fff;
  font: inherit; font-size: 16px; font-weight: 600; cursor: pointer; box-shadow: 0 12px 28px -10px rgba(0,0,0,.45); transition: background .15s, transform .15s; }
.ft-gp-btn:hover:not(:disabled) { background: #404040; }
.ft-gp-btn:active:not(:disabled) { transform: scale(.99); }
.ft-gp-btn:disabled { opacity: .4; box-shadow: none; cursor: not-allowed; }
.ft-gp-thanks { display: flex; align-items: center; gap: 8px; margin-top: 16px; border-radius: 16px; background: #ecfdf5; color: #065f46; padding: 10px 14px; font-size: 14px; font-weight: 500; }
.ft-gp-thanks svg { width: 16px; height: 16px; flex: none; }
.ft-gp-results { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 12px; }
.ft-gp-results li { border: 2px solid #f5f5f5; border-radius: 16px; padding: 14px; background: #fff; }
.ft-gp-results li.is-mine { border-color: #171717; background: #f5f5f5; }
.ft-gp-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.ft-gp-row span { min-width: 0; overflow-wrap: anywhere; font-weight: 600; color: #171717; }
.ft-gp-row b { flex: none; font-size: 18px; line-height: 28px; font-variant-numeric: tabular-nums; color: #737373; }
.ft-gp-results li.is-top .ft-gp-row b { color: #171717; }
.ft-gp-bar { margin-top: 8px; height: 8px; border-radius: 999px; background: #f5f5f5; overflow: hidden; }
.ft-gp-bar i { display: block; height: 100%; border-radius: 999px; background: #171717; opacity: .5; transition: width .5s; }
.ft-gp-results li.is-top .ft-gp-bar i { opacity: 1; }
.ft-gp-meta { margin-top: 6px; display: flex; justify-content: space-between; font-size: 12px; line-height: 16px; color: #737373; }
.ft-gp-meta em { display: inline-flex; align-items: center; gap: 4px; font-style: normal; font-weight: 600; color: #171717; }
.ft-gp-meta em svg { width: 14px; height: 14px; }
.ft-gp-note { margin: 24px 0 0; text-align: center; font-size: 12px; line-height: 16px; color: #a3a3a3; }
.ft-gp .ft-msg:empty { display: none; }
.ft-gp-warn { margin-top: 16px; border-radius: 16px; background: #fffbeb; color: #b45309; padding: 10px 14px; font-size: 14px; font-weight: 500; }
.ft-gp-foot { margin-top: 24px; display: flex; justify-content: center; }
.ft-gp-foot a { display: flex; align-items: center; gap: 8px; font-size: 12px; color: #fff; opacity: .45; text-decoration: none; transition: opacity .15s; }
.ft-gp-foot a:hover { opacity: 1; }
.ft-gp-foot img { width: 16px; height: 16px; border-radius: 50%; filter: grayscale(1); }
@media (min-width: 640px) { .ft-gp-in { padding: 32px 16px; } .ft-gp-card { padding: 28px; } .ft-gp-q { font-size: 1.5rem; } }
@media (prefers-reduced-motion: reduce) { .ft-gp-card, .ft-gp-dot:before { animation: none; } }