/* Layout: sidebar trái cố định + vùng làm việc; Tổng quan = KPI → chiến dịch/phễu/tuần → sale/hoạt động → Kanban */ :root { --bg: #f3f5fb; --surface: #ffffff; --surface-2: #f7f8fc; --ink: #141b34; --muted: #5d6585; --line: #e6e9f2; --blue: #2f5bea; --blue-2: #8aa5f5; --blue-3: #cfdbfc; --blue-soft: #e9eefd; --green: #1fa971; --green-soft: #e3f6ed; --orange: #f08c1a; --orange-soft: #fdf0dd; --purple: #7c5cf0; --purple-soft: #efeafe; --red: #e5484d; --red-soft: #fde7e8; --col-grey: #f1f3f8; --col-blue: #eef3fe; --col-yellow: #fdf6e3; --col-green: #ebf7f1; --shadow: 0 1px 2px rgba(20, 27, 52, 0.04), 0 4px 16px rgba(20, 27, 52, 0.04); --gold: #b07f1f; --logo-plate: transparent; --f: "Be Vietnam Pro", "Segoe UI", system-ui, -apple-system, sans-serif; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #070b18; --surface: #0e1428; --surface-2: #151d38; --ink: #e9edfb; --muted: #8e99c0; --line: #1e2950; --blue: #4f7dff; --blue-2: #3a5fd0; --blue-3: #24356e; --blue-soft: #15214a; --green: #4fd19a; --green-soft: #173a2c; --orange: #f5a54a; --orange-soft: #3b2c16; --purple: #a28cff; --purple-soft: #2b2450; --red: #f37a7e; --red-soft: #3d1f22; --col-grey: #1b2133; --col-blue: #1a2342; --col-yellow: #2b2616; --col-green: #16291f; --shadow: 0 0 0 1px rgba(79, 125, 255, 0.05), 0 10px 30px rgba(0, 0, 0, 0.35); --gold: #e3b34f; --logo-plate: #f3f1ec; color-scheme: dark; } } :root[data-theme="dark"] { --bg: #070b18; --surface: #0e1428; --surface-2: #151d38; --ink: #e9edfb; --muted: #8e99c0; --line: #1e2950; --blue: #4f7dff; --blue-2: #3a5fd0; --blue-3: #24356e; --blue-soft: #15214a; --green: #4fd19a; --green-soft: #173a2c; --orange: #f5a54a; --orange-soft: #3b2c16; --purple: #a28cff; --purple-soft: #2b2450; --red: #f37a7e; --red-soft: #3d1f22; --col-grey: #1b2133; --col-blue: #1a2342; --col-yellow: #2b2616; --col-green: #16291f; --shadow: 0 0 0 1px rgba(79, 125, 255, 0.05), 0 10px 30px rgba(0, 0, 0, 0.35); --gold: #e3b34f; --logo-plate: #f3f1ec; color-scheme: dark; } /* ---------- Màu chủ đạo tuỳ chỉnh (--accent) ---------- */ :root { --accent: #2f5bea; } :root[data-theme="dark"] { --accent: #4f7dff; } :root[style*="--accent"] { --blue: var(--accent); --blue-2: color-mix(in srgb, var(--accent) 60%, var(--surface)); --blue-3: color-mix(in srgb, var(--accent) 28%, var(--surface)); --blue-soft: color-mix(in srgb, var(--accent) 13%, var(--surface)); } :root[data-theme="dark"] .btn.primary { background: linear-gradient(135deg, var(--blue), color-mix(in srgb, var(--blue) 70%, #000)); box-shadow: 0 6px 20px color-mix(in srgb, var(--blue) 40%, transparent); } :root[data-theme="dark"] .nav a[aria-current="page"] { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--blue) 50%, transparent), 0 0 18px color-mix(in srgb, var(--blue) 22%, transparent); } /* ---------- Nền màu lan nhẹ (aurora) ---------- */ body { position: relative; } .aurora { position: fixed; inset: -10%; z-index: 0; pointer-events: none; overflow: hidden; } .aurora i { position: absolute; width: 46vmax; height: 46vmax; border-radius: 50%; filter: blur(70px); opacity: .10; will-change: transform; } .aurora i:nth-child(1) { background: var(--blue); top: -12%; left: 48%; animation: aur1 26s ease-in-out infinite alternate; } .aurora i:nth-child(2) { background: var(--purple); bottom: -18%; left: -8%; animation: aur2 32s ease-in-out infinite alternate; } .aurora i:nth-child(3) { background: #22d3ee; top: 38%; left: 62%; width: 30vmax; height: 30vmax; opacity: .06; animation: aur3 22s ease-in-out infinite alternate; } :root[data-theme="dark"] .aurora i { opacity: .20; } :root[data-theme="dark"] .aurora i:nth-child(3) { opacity: .10; } :root[data-theme="dark"] body { background: var(--bg); } @keyframes aur1 { to { transform: translate(-22vw, 18vh) scale(1.15); } } @keyframes aur2 { to { transform: translate(26vw, -14vh) scale(1.2); } } @keyframes aur3 { to { transform: translate(-30vw, -22vh) scale(.85); } } .app { position: relative; z-index: 1; } :root.fx-off .aurora { display: none; } /* ---------- Màn hình tải 3D ---------- */ .splash { position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center; background: radial-gradient(800px 500px at 50% 40%, color-mix(in srgb, var(--blue) 18%, transparent), transparent 70%), var(--bg); transition: opacity .6s ease, visibility .6s; } .splash.out { opacity: 0; visibility: hidden; } .splash .box { display: flex; flex-direction: column; align-items: center; gap: 26px; } .s3d { width: 150px; height: 150px; position: relative; perspective: 700px; } .s3d .sc { position: absolute; inset: 0; transform-style: preserve-3d; animation: s3dspin 6s linear infinite; } .s3d .r { position: absolute; inset: 0; border-radius: 50%; border: 3px solid transparent; } .s3d .r1 { border-top-color: var(--blue); border-bottom-color: var(--blue); box-shadow: 0 0 22px color-mix(in srgb, var(--blue) 55%, transparent), inset 0 0 22px color-mix(in srgb, var(--blue) 35%, transparent); animation: r1 2.2s linear infinite; } .s3d .r2 { inset: 14px; border-left-color: var(--purple); border-right-color: var(--purple); box-shadow: 0 0 18px color-mix(in srgb, var(--purple) 55%, transparent); animation: r2 2.8s linear infinite; } .s3d .r3 { inset: 30px; border-top-color: #22d3ee; border-left-color: #22d3ee; box-shadow: 0 0 16px rgba(34,211,238,.5); animation: r3 1.8s linear infinite; } .s3d .core { position: absolute; inset: 52px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, var(--blue) 45%, color-mix(in srgb, var(--blue) 40%, #000)); box-shadow: 0 0 30px var(--blue), 0 0 60px color-mix(in srgb, var(--blue) 50%, transparent); animation: pulse 1.6s ease-in-out infinite; } @keyframes s3dspin { to { transform: rotateY(360deg); } } @keyframes r1 { from { transform: rotateX(65deg) rotateZ(0); } to { transform: rotateX(65deg) rotateZ(360deg); } } @keyframes r2 { from { transform: rotateY(65deg) rotateZ(0); } to { transform: rotateY(65deg) rotateZ(-360deg); } } @keyframes r3 { from { transform: rotateX(-50deg) rotateY(30deg) rotateZ(0); } to { transform: rotateX(-50deg) rotateY(30deg) rotateZ(360deg); } } @keyframes pulse { 50% { transform: scale(.82); opacity: .8; } } .splash .st { text-align: center; } .splash .st b { display: block; font-size: 1.05rem; letter-spacing: .32em; font-weight: 800; background: linear-gradient(90deg, var(--blue), var(--purple), #22d3ee, var(--blue)); background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: shine 3s linear infinite; } .splash .st span { color: var(--muted); font-size: .85rem; } @keyframes shine { to { background-position: 300% 0; } } /* ---------- Bảng chọn màu ---------- */ .palpop { position: absolute; top: 52px; right: 0; z-index: 60; width: 270px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 18px 50px rgba(0,0,0,.28); padding: 16px; display: flex; flex-direction: column; gap: 12px; } .palpop h4 { margin: 0; font-size: .82rem; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; } .palpop .mode { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; } .palpop .mode button { border: 1px solid var(--line); background: var(--surface-2); border-radius: 10px; padding: 8px; font-weight: 700; font-size: .85rem; display: flex; gap: 6px; align-items: center; justify-content: center; } .palpop .mode button[aria-pressed="true"] { border-color: var(--blue); color: var(--blue); background: var(--blue-soft); } .palpop .sw { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; } .palpop .sw button { aspect-ratio: 1; border-radius: 50%; border: 2px solid transparent; background: var(--c); box-shadow: 0 0 12px color-mix(in srgb, var(--c) 45%, transparent); } .palpop .sw button[aria-pressed="true"] { border-color: var(--ink); transform: scale(1.08); } .palpop .row2 { display: flex; align-items: center; gap: 10px; font-size: .88rem; } .palpop input[type=color] { width: 42px; height: 32px; border: 1px solid var(--line); border-radius: 8px; background: none; padding: 2px; } .palpop .row2 .grow { flex: 1; } .palpop .lnk { border: 0; background: none; color: var(--blue); font-weight: 700; font-size: .85rem; padding: 0; } .palpop label.tg { display: flex; align-items: center; gap: 8px; font-size: .88rem; } @media (max-width: 900px) { .palpop { position: fixed; top: 64px; right: 12px; left: 12px; width: auto; } } @media (prefers-reduced-motion: reduce) { .aurora i, .s3d .sc, .s3d .r, .s3d .core, .splash .st b { animation-duration: 0s !important; animation: none !important; } } /* ---------- Giao diện tối PRO + vòng chỉ số ---------- */ :root[data-theme="dark"] .card, :root[data-theme="dark"] .slk, :root[data-theme="dark"] .ringc { background: linear-gradient(155deg, rgba(79,125,255,.08), rgba(14,20,40,0) 42%), var(--surface); border-color: rgba(99,132,255,.16); } :root[data-theme="dark"] .side { background: linear-gradient(180deg, #0b1124, #080d1c); border-right-color: rgba(99,132,255,.14); } :root[data-theme="dark"] .topbar { background: rgba(7,11,24,.72); backdrop-filter: blur(10px); } :root[data-theme="dark"] .nav a[aria-current="page"] { box-shadow: inset 0 0 0 1px rgba(79,125,255,.45), 0 0 18px rgba(79,125,255,.18); } :root[data-theme="dark"] .btn.primary { background: linear-gradient(135deg, #4f7dff, #3a5fd0); box-shadow: 0 6px 20px rgba(79,125,255,.35); } :root[data-theme="dark"] .kpi .ico { border-radius: 14px; box-shadow: 0 6px 18px rgba(0,0,0,.35); } :root[data-theme="dark"] .kpi .ico.bg-blue { background: linear-gradient(135deg, var(--blue), color-mix(in srgb, var(--blue) 65%, #000)); box-shadow: 0 0 24px color-mix(in srgb, var(--blue) 50%, transparent); } :root[data-theme="dark"] .kpi .ico.bg-green { background: linear-gradient(135deg, #3ddc97, #13a06a); box-shadow: 0 0 24px rgba(61,220,151,.35); } :root[data-theme="dark"] .kpi .ico.bg-orange { background: linear-gradient(135deg, #ffb457, #ef7d16); box-shadow: 0 0 24px rgba(255,180,87,.35); } :root[data-theme="dark"] .kpi .ico.bg-purple { background: linear-gradient(135deg, #b18cff, #6a46e8); box-shadow: 0 0 24px rgba(177,140,255,.4); } :root[data-theme="dark"] .slk b, :root[data-theme="dark"] .kpi .val { text-shadow: 0 0 18px rgba(79,125,255,.25); } .kpi > div:last-child { flex: 1; min-width: 0; } .spark { display: block; width: 100%; height: 34px; margin-top: 6px; overflow: visible; } .ringrow:empty { display: none; } #sl-rings { margin-bottom: 16px; } .ringrow { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } .ringc { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); padding: 16px 18px; display: flex; align-items: center; gap: 16px; min-width: 0; } .ringc .ring { flex: none; position: relative; } .ringc .ring svg { display: block; } .ringc { transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s, border-color .35s; } .ringc:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--rgc, var(--blue)) 55%, transparent); box-shadow: 0 14px 34px color-mix(in srgb, var(--rgc, var(--blue)) 25%, transparent); } .ringc .ring svg * { transform-box: view-box; transform-origin: 50% 50%; } .ringc .ring .arc { transform: rotate(-90deg); animation: rdraw 1.3s cubic-bezier(.2,.8,.2,1) both, rglow 3.2s ease-in-out 1.3s infinite; } .ringc .ring .tip { transform-box: fill-box; transform-origin: center; animation: rtipin .4s ease 1.15s both, rtip 1.8s ease-in-out 1.6s infinite; filter: drop-shadow(0 0 6px #fff); } .ringc .ring .orbit { opacity: .45; animation: rspin 18s linear infinite; } .ringc .ring .comet { opacity: .55; animation: rspin 3.6s linear infinite; filter: blur(.6px); } .ringc:hover .ring .comet { animation-duration: 1.6s; } .ringc:hover .ring .orbit { animation-duration: 6s; } @keyframes rdraw { from { stroke-dasharray: 0 var(--C); } to { stroke-dasharray: var(--L) var(--C); } } @keyframes rglow { 50% { opacity: .78; } } @keyframes rspin { to { transform: rotate(360deg); } } @keyframes rtipin { from { transform: scale(0); opacity: 0; } to { transform: scale(1); opacity: 1; } } @keyframes rtip { 50% { transform: scale(1.35); } } :root[data-theme="dark"] .ringc .ring svg { filter: drop-shadow(0 0 10px var(--rg, rgba(79,125,255,.45))); } .ringc .rt { min-width: 0; display: flex; flex-direction: column; gap: 2px; } .ringc .rt small { color: var(--muted); font-weight: 700; font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; } .ringc .rt b { white-space: nowrap; font-size: 1.35rem; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1.2; } .ringc .rt span { color: var(--muted); font-size: .8rem; } .ringc .rt .tag { align-self: flex-start; margin-top: 4px; font-size: .72rem; font-weight: 700; padding: 2px 8px; border-radius: 999px; } .ringc .rt .tag.good { background: var(--green-soft); color: var(--green); } .ringc .rt .tag.bad { background: var(--red-soft); color: var(--red); } .ringc .rt .tag.mid { background: var(--orange-soft); color: var(--orange); } .themebtn svg { width: 20px; height: 20px; } @media (max-width: 1180px) { .ringrow { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 520px) { .ringrow { grid-template-columns: 1fr 1fr; gap: 10px; } .ringc { flex-direction: column; text-align: center; padding: 14px 10px; gap: 8px; } .ringc .rt .tag { align-self: center; } .ringc .rt b { font-size: 1.2rem; } } @media (prefers-reduced-motion: reduce) { .ringc .ring .arc, .ringc .ring .tip, .ringc .ring .orbit, .ringc .ring .comet { animation: none !important; } .ringc:hover { transform: none; } } * { box-sizing: border-box; } [hidden] { display: none !important; } html, body { height: 100%; } body { background: var(--bg); color: var(--ink); font-family: var(--f); font-size: 15.5px; line-height: 1.6; font-weight: 400; letter-spacing: -0.003em; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-feature-settings: "tnum" 0; } button, input, select { font: inherit; color: inherit; } button { cursor: pointer; } :focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; } .num { font-variant-numeric: tabular-nums; } svg.i { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } /* ---------- khung ---------- */ html, body { margin: 0; } .app { display: grid; grid-template-columns: 240px minmax(0, 1fr); min-height: 100%; } .role-viewer .admin-only { display: none !important; } .botlink { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px; background: linear-gradient(135deg, #229ed9, #2aabee); color: #fff; text-decoration: none; } .botlink .tgi { width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,.2); display: grid; place-items: center; flex: none; } .botlink span:nth-child(2) { flex: 1; min-width: 0; } .botlink b { display: block; font-size: 1rem; } .botlink small { opacity: .85; font-size: .8rem; } .botlink:hover { filter: brightness(1.06); } .promo-act { display: flex; gap: 8px; flex-wrap: wrap; } .promo-bot { background: rgba(255,255,255,.18); color: #fff; text-decoration: none; font-weight: 700; font-size: .88rem; padding: 8px 14px; border-radius: 999px; border: 1px solid rgba(255,255,255,.35); } .role-pill { font-size: .72rem; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: var(--green-soft); color: var(--green); margin-left: 6px; vertical-align: middle; } .ulist .u { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line); } .ulist .u:last-child { border-bottom: 0; } .ulist .u .av { width: 38px; height: 38px; border-radius: 50%; color: #fff; display: grid; place-items: center; font-weight: 800; font-size: .8rem; } .ulist .u small { display: block; color: var(--muted); font-size: .8rem; overflow-wrap: anywhere; } .ulist .acts { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; } .ulist .acts .btn { padding: 6px 10px; font-size: .78rem; } .ulist .reset { grid-column: 1 / -1; display: flex; gap: 8px; } .ulist .reset input { flex: 1; font: inherit; border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; background: var(--surface); color: var(--ink); } .uform { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 6px; padding-top: 12px; border-top: 1px dashed var(--line); } .uform .full { grid-column: 1 / -1; } .perm { font-size: .82rem; color: var(--muted); line-height: 1.55; background: var(--surface-2); border-radius: 10px; padding: 10px 12px; } @media (max-width: 600px) { .uform { grid-template-columns: 1fr; } .ulist .u { grid-template-columns: auto minmax(0, 1fr); } .ulist .acts { grid-column: 1 / -1; justify-content: flex-start; } } .card.pf-hero { flex-direction: row; align-items: center; gap: 18px; } .pf-av { width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-size: 1.6rem; font-weight: 800; flex: none; background: var(--blue); } .pf-hero h2 { margin: 0; font-size: 1.35rem; } .pf-mail { font-size: .88rem; margin-top: 4px; color: var(--blue); overflow-wrap: anywhere; } .pf-hero .btn { margin-left: auto; } .btn.danger { color: var(--red); border-color: color-mix(in srgb, var(--red) 40%, var(--line)); } .btn.danger .i { width: 18px; height: 18px; } .btn.danger:hover { background: var(--red-soft); } .pf-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } .fld { display: flex; flex-direction: column; gap: 6px; font-size: .84rem; color: var(--muted); font-weight: 600; } .pwwrap { position: relative; display: block; } .pwwrap input { width: 100%; padding-right: 64px; box-sizing: border-box; } .pwwrap .eye { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); border: 0; background: none; font: inherit; font-size: .8rem; font-weight: 700; color: var(--blue); padding: 6px 8px; border-radius: 8px; cursor: pointer; } .pwwrap .eye:hover { background: var(--blue-soft); } .fld select { font: inherit; font-weight: 500; font-size: .95rem; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; } .fld input { font: inherit; font-weight: 500; font-size: .95rem; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; } .fld input:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-soft); } .fld input:disabled { background: var(--surface-2); color: var(--muted); } .swatches { display: flex; gap: 8px; flex-wrap: wrap; } .swatches button { width: 30px; height: 30px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; box-shadow: inset 0 0 0 2px rgba(255,255,255,.6); } .swatches button[aria-pressed="true"] { border-color: var(--ink); } .pw-meter { height: 6px; border-radius: 6px; background: var(--surface-2); overflow: hidden; } .pw-meter i { display: block; height: 100%; width: 0; background: var(--red); transition: width .2s, background .2s; } .lg { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: .86rem; } .lg:last-child { border-bottom: 0; } .lg .ic { width: 32px; height: 32px; border-radius: 10px; background: var(--blue-soft); color: var(--blue); display: grid; place-items: center; font-size: 15px; } .lg small { color: var(--muted); display: block; } .me { cursor: pointer; border-radius: 12px; padding: 4px 6px; } .me:hover { background: var(--surface-2); } .modesw { position: relative; display: inline-grid; grid-template-columns: 1fr 1fr; background: var(--surface-2); border: 1px solid var(--line); border-radius: 999px; padding: 4px; flex: none; isolation: isolate; } .modesw button { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; gap: 7px; border: 0; background: none; font: inherit; font-weight: 800; font-size: .88rem; letter-spacing: .02em; color: var(--muted); padding: 8px 16px; border-radius: 999px; cursor: pointer; transition: color .2s; white-space: nowrap; } .modesw button .i { width: 17px; height: 17px; } .modesw .knob { position: absolute; z-index: 0; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); border-radius: 999px; background: var(--blue); box-shadow: 0 4px 14px color-mix(in srgb, var(--blue) 35%, transparent); transition: transform .25s cubic-bezier(.4,0,.2,1), background .25s; } .modesw button[aria-selected="true"] { color: #fff; } body.mode-sale .modesw .knob { transform: translateX(100%); background: #0f9d6c; box-shadow: 0 4px 14px rgba(15,157,108,.35); } body.mode-sale .mkt-only, body.mode-mkt .sale-only { display: none !important; } body.mode-sale .logo .brand em { color: #0f9d6c; } body.mode-sale .nav a[aria-current="page"] { background: color-mix(in srgb, #0f9d6c 12%, var(--surface)); color: #0f9d6c; } body.mode-sale .tabbar [aria-current="page"] { color: #0f9d6c; } body.mode-sale .tabbar [aria-current="page"]::before { background: #0f9d6c; } body.mode-sale .stabs { display: none; } .sheet .it.swap { background: var(--surface-2); margin-bottom: 4px; } @media (max-width: 900px) { .modesw { order: 0; flex: 1 1 100%; } .modesw button { padding: 9px 10px; } body.mode-sale .modesw { flex: 1 1 0; } } .nav-h { font-size: .68rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); padding: 12px 12px 4px; } .nav-sep { height: 1px; background: var(--line); margin: 8px 6px; } @media (max-width: 900px) { .pf-grid { grid-template-columns: minmax(0, 1fr); } .card.pf-hero { flex-wrap: wrap; } .pf-hero .btn { margin-left: 0; width: 100%; justify-content: center; } } .stabs { display: flex; gap: 6px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 5px; overflow-x: auto; scrollbar-width: none; } .stabs::-webkit-scrollbar { display: none; } .stabs a { flex: 1 0 auto; text-align: center; padding: 9px 14px; border-radius: 10px; font-weight: 700; font-size: .9rem; color: var(--muted); text-decoration: none; white-space: nowrap; } .stabs a[aria-current="page"] { background: var(--ink); color: var(--bg, #fff); } .sfilters { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; } .sfilters select, .sfilters input[type="search"] { font: inherit; font-size: .9rem; background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; min-width: 0; } .sfilters input[type="search"] { flex: 1 1 260px; } .sfilters label { display: inline-flex; gap: 6px; align-items: center; font-size: .86rem; color: var(--muted); } .slkpis { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; } .slk { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 14px; display: flex; flex-direction: column; gap: 3px; min-width: 0; } .slk small { color: var(--muted); font-size: .78rem; font-weight: 600; } .slk b { font-size: 1.55rem; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; } .slk span { font-size: .78rem; color: var(--muted); } .slk.good b { color: var(--green); } .slk.bad b { color: var(--red); } .slk.gold b { color: #c8963e; } .journey { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 0; overflow-x: auto; } .jstep { position: relative; padding: 12px 10px 12px 16px; background: var(--surface-2); border-top: 3px solid var(--blue); min-width: 108px; display: flex; flex-direction: column; gap: 2px; } .jstep:first-child { border-radius: 12px 0 0 12px; } .jstep:last-child { border-radius: 0 12px 12px 0; } .jstep + .jstep { border-left: 1px dashed var(--line); } .jstep small { font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); } .jstep b { font-size: 1.35rem; font-variant-numeric: tabular-nums; } .jstep .pc { font-size: .78rem; color: var(--muted); } .jstep .st { font-size: .74rem; font-weight: 700; margin-top: 4px; color: var(--green); } .jstep .st.mid { color: var(--orange); } .jstep .st.low { color: var(--red); } .jstep.worst { background: var(--red-soft); border-top-color: var(--red); } .jstep .jbar { height: 5px; border-radius: 5px; background: var(--line); overflow: hidden; margin-top: 6px; } .jstep .jbar i { display: block; height: 100%; background: var(--blue); } .lvgroup { margin-top: 10px; } .lvgroup h4 { margin: 12px 0 6px; font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); } .lvrow { display: grid; grid-template-columns: 54px minmax(0, 1fr) 46px 52px; gap: 8px; align-items: center; padding: 4px 0; font-size: .86rem; } .lvrow .code { font-weight: 800; font-size: .76rem; padding: 3px 0; border-radius: 6px; text-align: center; background: var(--blue-soft); color: var(--blue); } .lvrow.lv-lost .code { background: var(--red-soft); color: var(--red); } .lvrow.lv-churn .code { background: var(--orange-soft); color: var(--orange); } .lvrow.lv-dup .code, .lvrow.lv-ib .code { background: var(--surface-2); color: var(--muted); } .lvrow .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .lvrow .lb { height: 7px; background: var(--surface-2); border-radius: 7px; overflow: hidden; grid-column: 2; margin-top: -2px; } .lvrow .lb i { display: block; height: 100%; background: var(--blue); border-radius: 7px; } .lvrow.lv-lost .lb i { background: var(--red); } .lvrow.lv-churn .lb i { background: var(--orange); } .lvrow .ct { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; } .lvrow .sh { text-align: right; color: var(--muted); font-size: .8rem; } .caremini { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .cm { border: 1px solid var(--line); border-top: 4px solid var(--c); border-radius: 12px; padding: 10px 12px; text-decoration: none; color: inherit; display: flex; flex-direction: column; gap: 2px; } .cm small { font-weight: 700; font-size: .8rem; } .cm b { font-size: 1.5rem; font-variant-numeric: tabular-nums; } .cm span { font-size: .76rem; color: var(--muted); } .cm span.w { color: var(--red); font-weight: 600; } .recs { display: flex; flex-direction: column; gap: 8px; } .rec { display: flex; gap: 10px; align-items: flex-start; font-size: .88rem; line-height: 1.5; padding: 9px 11px; border-radius: 10px; background: var(--surface-2); } .rec.warn { background: var(--red-soft); } .rec.good { background: var(--green-soft); } .rec i { font-style: normal; flex: none; } .qrow { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: .88rem; } .qrow:last-child { border-bottom: 0; } .qrow .n { min-width: 44px; text-align: center; font-weight: 800; color: var(--red); background: var(--red-soft); border-radius: 8px; padding: 2px 6px; height: fit-content; } .qrow .smp { font-size: .78rem; color: var(--muted); margin-top: 3px; } .toprow { display: grid; grid-template-columns: 28px auto minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 7px 0; } .toprow .md { font-size: 1.1rem; text-align: center; } .toprow small { display: block; color: var(--muted); font-size: .78rem; } .scorepill { font-weight: 800; padding: 3px 10px; border-radius: 999px; background: var(--blue-soft); color: var(--blue); font-variant-numeric: tabular-nums; } .podium { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; align-items: end; } .pod { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 18px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 6px; box-shadow: var(--shadow); } .pod.p1 { border-color: #e9a23b; background: linear-gradient(180deg, color-mix(in srgb, #e9a23b 14%, var(--surface)), var(--surface)); padding-top: 26px; } .pod.p1 { order: 1; } .pod.p2 { order: 0; } .pod.p3 { order: 2; } .pod .medal { font-size: 2rem; line-height: 1; } .pod .ring { width: 74px; height: 74px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 1.35rem; background: conic-gradient(var(--c) calc(var(--v) * 1%), var(--surface-2) 0); position: relative; } .pod .ring::before { content: ""; position: absolute; inset: 7px; border-radius: 50%; background: var(--surface); } .pod .ring span { position: relative; } .pod h3 { margin: 4px 0 0; font-size: 1.05rem; } .pod .tm { font-size: .78rem; color: var(--muted); } .pod .ps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; width: 100%; margin-top: 6px; } .pod .ps div { background: var(--surface-2); border-radius: 10px; padding: 6px 2px; } .pod .ps small { display: block; font-size: .68rem; color: var(--muted); } .pod .ps b { font-size: .95rem; } #sl-rank tbody tr { cursor: pointer; } #sl-rank tbody tr.det { cursor: default; background: var(--surface-2); } #sl-rank td.sc { min-width: 120px; } #sl-rank td.snm { min-width: 190px; white-space: nowrap; } #sl-rank td.snm .muted { white-space: nowrap; } .cmp > span:nth-child(2) { white-space: nowrap; } .scbar { display: flex; align-items: center; gap: 8px; } .scbar i { flex: 1; height: 8px; border-radius: 8px; background: var(--surface-2); overflow: hidden; display: block; } .scbar i b { display: block; height: 100%; border-radius: 8px; } .spark { display: flex; align-items: flex-end; gap: 2px; height: 26px; } .spark i { width: 6px; background: var(--blue); border-radius: 2px 2px 0 0; opacity: .85; } .detgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; padding: 6px 4px 10px; } .detgrid h4 { margin: 0 0 6px; font-size: .82rem; } .cmp { display: grid; grid-template-columns: minmax(0, 1fr) 64px; gap: 6px; align-items: center; font-size: .8rem; margin-bottom: 5px; } .cmp .tr { position: relative; height: 8px; background: var(--line); border-radius: 8px; grid-column: 1; } .cmp .tr i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 8px; background: var(--blue); } .cmp .tr em { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--ink); } .goodl, .badl { margin: 0; padding-left: 18px; font-size: .84rem; line-height: 1.6; } .goodl { color: var(--green); } .badl { color: var(--red); } .csg { background: var(--surface); border: 1px solid var(--line); border-top: 4px solid var(--c); border-radius: 16px; margin-bottom: 14px; overflow: hidden; } .csg .hd { display: flex; align-items: center; gap: 14px; padding: 16px 18px; cursor: pointer; flex-wrap: wrap; } .csg .hd h3 { margin: 0; font-size: 1.05rem; } .csg .hd .ic { color: var(--c); } .csg .hd .big { font-size: 2rem; font-weight: 800; margin-left: auto; font-variant-numeric: tabular-nums; } .csg .hd .tag { font-size: .82rem; color: var(--muted); } .csg .hd .tag b { color: var(--ink); } .csg .hd .stl { font-size: .78rem; font-weight: 700; color: var(--red); background: var(--red-soft); padding: 3px 9px; border-radius: 999px; } .csg .bd { border-top: 1px solid var(--line); padding: 4px 18px 14px; } .csg .todo2 { margin: 10px 0; display: flex; flex-direction: column; gap: 6px; } .csg .todo2 div { font-size: .86rem; padding: 7px 10px; border-radius: 9px; background: color-mix(in srgb, var(--c) 10%, var(--surface)); } .csg .splits { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; } .csg .splits span { font-size: .76rem; padding: 3px 9px; border-radius: 999px; background: var(--surface-2); } .csr { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 11px 0; border-bottom: 1px solid var(--line); } .csr:last-child { border-bottom: 0; } .csr .nm b { font-size: .94rem; } .csr .nm .ph { font-variant-numeric: tabular-nums; color: var(--muted); font-size: .84rem; margin-left: 6px; } .csr .nm small { display: block; color: var(--muted); font-size: .78rem; margin-top: 2px; } .csr .nt { font-size: .8rem; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .csr .rt { text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; } .lvpill { font-size: .74rem; font-weight: 700; padding: 3px 9px; border-radius: 999px; background: var(--blue-soft); color: var(--blue); white-space: nowrap; max-width: 220px; overflow: hidden; text-overflow: ellipsis; } .lvpill.lost { background: var(--red-soft); color: var(--red); } .lvpill.churn { background: var(--orange-soft); color: var(--orange); } .lvpill.none { background: var(--surface-2); color: var(--muted); } .idle { font-size: .74rem; color: var(--muted); } .idle.over { color: var(--red); font-weight: 700; } .morebtn { margin-top: 8px; } .wh-intro { flex-direction: row; gap: 18px; align-items: center; flex-wrap: wrap; } .wh-intro > div:first-child { flex: 1 1 420px; } .whstats { display: flex; gap: 10px; flex-wrap: wrap; } .whstats div { background: var(--surface-2); border-radius: 12px; padding: 8px 14px; text-align: center; } .whstats b { display: block; font-size: 1.4rem; } .whstats small { color: var(--muted); font-size: .76rem; } .whgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; } .wh { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 16px; display: flex; flex-direction: column; gap: 10px; } .wh.whale { border-color: color-mix(in srgb, #0f9d6c 50%, var(--line)); box-shadow: 0 0 0 3px color-mix(in srgb, #0f9d6c 10%, transparent); } .wh .top { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: start; } .wh .top b { font-size: 1rem; } .wh .top small { display: block; color: var(--muted); font-size: .8rem; margin-top: 2px; } .wh .sc { width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; background: conic-gradient(var(--c) calc(var(--v) * 1%), var(--surface-2) 0); position: relative; } .wh .sc::before { content: ""; position: absolute; inset: 5px; border-radius: 50%; background: var(--surface); } .wh .sc span { position: relative; } .wh .why { display: flex; flex-wrap: wrap; gap: 5px; } .wh .why span { font-size: .74rem; padding: 3px 8px; border-radius: 999px; background: var(--surface-2); } .wh .act { font-size: .86rem; padding: 9px 11px; border-radius: 10px; background: var(--green-soft); color: var(--ink); line-height: 1.45; } .wh .act b { color: var(--green); } .wh .nt { font-size: .8rem; color: var(--muted); font-style: italic; } @media (max-width: 1180px) { .slkpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } .detgrid { grid-template-columns: 1fr 1fr; } } @media (max-width: 900px) { .journey { grid-template-columns: 1fr; gap: 8px; } .jstep { border-radius: 12px !important; border-left: 0 !important; border-top: 0; border-left: 4px solid var(--blue) !important; flex-direction: row; flex-wrap: wrap; align-items: baseline; column-gap: 10px; } .jstep.worst { border-left-color: var(--red) !important; } .jstep small { flex: 1 1 100%; } .jstep .jbar { flex: 1 1 100%; } .podium { grid-template-columns: 1fr; } .pod.p1 { order: 0; } .pod.p2 { order: 1; } .pod.p3 { order: 2; } .detgrid { grid-template-columns: 1fr; } .csr { grid-template-columns: minmax(0, 1fr) auto; } .csr .nt { grid-column: 1 / -1; grid-row: 2; } } @media (max-width: 520px) { .slkpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .caremini { grid-template-columns: 1fr 1fr; } .whgrid { grid-template-columns: 1fr; } .csg .hd .big { font-size: 1.6rem; } } .scanbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: .84rem; color: var(--muted); background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 8px 12px; } .scanbar:empty { display: none; } .scanbar b { color: var(--ink); font-weight: 600; } .scanbar .sdot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); flex: none; } .scanbar .sdot.warn { background: var(--orange); } .scanbar .btn { margin-left: auto; padding: 5px 12px; font-size: .8rem; } .m-top { display: none; align-items: center; gap: 8px; } .m-top .iconbtn { width: 38px; height: 38px; } .tabbar { display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; grid-template-columns: repeat(5, 1fr); background: color-mix(in srgb, var(--surface) 94%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-top: 1px solid var(--line); padding: 6px max(6px, env(safe-area-inset-right, 0px)) calc(6px + env(safe-area-inset-bottom, 0px)) max(6px, env(safe-area-inset-left, 0px)); box-shadow: 0 -6px 24px rgba(15, 19, 32, .06); } .tabbar a, .tabbar button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 52px; border: 0; background: none; font: inherit; font-size: .7rem; font-weight: 600; color: var(--muted); text-decoration: none; border-radius: 12px; cursor: pointer; position: relative; -webkit-tap-highlight-color: transparent; } .tabbar .i { width: 22px; height: 22px; } .tabbar [aria-current="page"] { color: var(--blue); } .tabbar [aria-current="page"]::before { content: ""; position: absolute; top: -6px; width: 26px; height: 3px; border-radius: 0 0 3px 3px; background: var(--blue); } .tabbar .badge { position: absolute; top: 4px; right: calc(50% - 20px); } .sheet-bg { position: fixed; inset: 0; z-index: 50; background: rgba(10, 12, 18, .45); display: flex; align-items: flex-end; } .sheet { width: 100%; background: var(--surface); border-radius: 20px 20px 0 0; padding: 10px 16px calc(16px + env(safe-area-inset-bottom, 0px)); box-shadow: 0 -10px 40px rgba(0,0,0,.2); animation: up .18s ease-out; } @keyframes up { from { transform: translateY(30px); opacity: .6; } to { transform: none; opacity: 1; } } .sheet .grab { width: 40px; height: 4px; border-radius: 4px; background: var(--line); margin: 0 auto 12px; } .sheet .who { display: flex; align-items: center; gap: 12px; padding: 6px 4px 14px; border-bottom: 1px solid var(--line); margin-bottom: 8px; } .sheet .who small { display: block; color: var(--muted); font-size: .82rem; } .sheet a, .sheet button.it { display: flex; align-items: center; gap: 14px; width: 100%; padding: 14px 8px; border: 0; background: none; font: inherit; font-size: 1rem; font-weight: 600; color: var(--ink); text-decoration: none; border-radius: 12px; cursor: pointer; text-align: left; } .sheet a:active, .sheet button.it:active { background: var(--surface-2); } .sheet .i { width: 22px; height: 22px; color: var(--muted); } .sheet .it.red, .sheet .it.red .i { color: var(--red); } .side { background: var(--surface); border-right: 1px solid var(--line); padding: 22px 16px 22px max(16px, env(safe-area-inset-left, 0px)); display: flex; flex-direction: column; gap: 22px; position: sticky; top: 0; height: 100vh; overflow-y: auto; } .logo { white-space: nowrap; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 0 8px; } .logo .plate { display: inline-flex; padding: 6px 10px; border-radius: 12px; background: var(--logo-plate); } .logo .plate img { height: 40px; width: auto; display: block; } .logo .brand { display: flex; flex-direction: column; line-height: 1.15; } .logo .brand b { font-size: 1.02rem; font-weight: 800; letter-spacing: 0.06em; color: var(--ink); } .logo .brand em { font-style: normal; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.28em; color: var(--gold); margin-top: 3px; } .logo .brand small { margin-top: 5px; } .logo .mark { width: 32px; height: 32px; border-radius: 9px; background: var(--blue); color: #fff; display: grid; place-items: center; font-size: 0.85rem; font-weight: 800; letter-spacing: -0.02em; } .logo small { display: block; font-size: 0.7rem; font-weight: 500; color: var(--muted); } .nav { display: flex; flex-direction: column; gap: 2px; } .nav a { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: 10px; color: var(--ink); text-decoration: none; font-weight: 600; font-size: 0.98rem; white-space: nowrap; } .nav a:hover { background: var(--surface-2); } .nav a[aria-current="page"] { background: var(--blue-soft); color: var(--blue); font-weight: 600; } .nav a .badge { margin-left: auto; font-size: 0.7rem; background: var(--red); color: #fff; border-radius: 999px; padding: 1px 7px; } .promo { margin-top: auto; border-radius: 16px; padding: 18px; color: #fff; background: linear-gradient(150deg, #6d7cf6, #4a55e0 60%, #7c5cf0); display: flex; flex-direction: column; gap: 8px; } .promo b { font-size: 1rem; } .promo p { margin: 0; font-size: 0.8rem; opacity: 0.9; } .promo button { align-self: flex-start; margin-top: 6px; border: 0; background: #fff; color: #3b46c9; font-weight: 700; font-size: 0.82rem; border-radius: 999px; padding: 8px 14px; display: flex; gap: 6px; align-items: center; } .main { min-width: 0; display: flex; flex-direction: column; } .topbar { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 5; background: var(--surface); border-bottom: 1px solid var(--line); padding-block: 12px; padding-left: 24px; padding-right: max(24px, env(safe-area-inset-right, 0px)); display: flex; align-items: center; gap: 16px; } body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 10; background: var(--surface); } .search { flex: 1; max-width: 420px; display: flex; align-items: center; gap: 10px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; color: var(--muted); } .search input { border: 0; background: transparent; outline: none; width: 100%; color: var(--ink); } .accsel { display: flex; align-items: center; gap: 8px; background: var(--blue-soft); color: var(--blue); border-radius: 10px; padding: 0 10px; max-width: 280px; min-width: 0; } .accsel select { border: 0; background: transparent; padding: 9px 0; font-weight: 600; color: var(--blue); outline: none; min-width: 0; max-width: 240px; text-overflow: ellipsis; } .acctag { display: inline-flex; margin-top: 6px; } .top-right { margin-left: auto; display: flex; align-items: center; gap: 14px; position: relative; } .iconbtn { position: relative; border: 0; background: transparent; padding: 8px; border-radius: 10px; color: var(--ink); display: grid; place-items: center; } .iconbtn:hover { background: var(--surface-2); } .dot { position: absolute; top: 5px; right: 5px; min-width: 16px; height: 16px; border-radius: 999px; background: var(--red); color: #fff; font-size: 0.62rem; font-weight: 700; display: grid; place-items: center; padding: 0 4px; border: 2px solid var(--surface); } .me { display: flex; align-items: center; gap: 10px; } .logout { border: 1px solid var(--line); background: var(--surface); color: var(--muted); border-radius: 10px; width: 34px; height: 34px; display: grid; place-items: center; cursor: pointer; margin-left: 4px; } .logout:hover { color: var(--red); border-color: var(--red); } .me b { display: block; font-size: 0.88rem; } .me small { color: var(--muted); font-size: 0.75rem; } .bellpanel { position: absolute; right: 0; top: 48px; width: min(380px, calc(100vw - 32px)); background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 12px 32px rgba(20, 27, 52, 0.14); padding: 14px; display: flex; flex-direction: column; gap: 10px; max-height: 70vh; overflow-y: auto; } .content { padding-block: 24px 48px; padding-left: 24px; padding-right: max(24px, env(safe-area-inset-right, 0px)); display: flex; flex-direction: column; gap: 20px; max-width: 1320px; width: 100%; } /* ---------- chung ---------- */ .pagehead { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: flex-end; justify-content: space-between; } .pagehead h1 { margin: 0; font-size: 1.75rem; font-weight: 800; letter-spacing: -0.015em; text-wrap: balance; } .pagehead p { margin: 4px 0 0; color: var(--muted); font-size: 0.97rem; } .rangesel { display: flex; align-items: center; gap: 8px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 0 10px; box-shadow: var(--shadow); color: var(--muted); } .rangesel select { border: 0; background: transparent; padding: 9px 0; font-weight: 600; color: var(--ink); outline: none; } .card { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); padding: 18px; display: flex; flex-direction: column; gap: 14px; min-width: 0; } .cardhead { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .cardhead h2 { margin: 0; font-size: 1.12rem; font-weight: 700; letter-spacing: -0.005em; } .link { border: 0; background: none; color: var(--blue); font-weight: 600; font-size: 0.82rem; display: inline-flex; align-items: center; gap: 4px; padding: 0; text-decoration: none; } .muted { color: var(--muted); } .small { font-size: 0.86rem; } .banner { border-radius: 12px; padding: 11px 16px; font-size: 0.92rem; background: var(--blue-soft); color: var(--ink); } .banner.warn { background: var(--red-soft); } .pill { display: inline-flex; align-items: center; gap: 5px; font-size: 0.78rem; font-weight: 600; padding: 3px 10px; border-radius: 999px; white-space: nowrap; } .pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; } .pill.plain::before { display: none; } .t-green { background: var(--green-soft); color: var(--green); } .t-blue { background: var(--blue-soft); color: var(--blue); } .t-orange { background: var(--orange-soft); color: var(--orange); } .t-red { background: var(--red-soft); color: var(--red); } .t-purple { background: var(--purple-soft); color: var(--purple); } .t-grey { background: var(--surface-2); color: var(--muted); border: 1px solid var(--line); } .avatar { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-size: 0.72rem; font-weight: 700; color: #fff; flex: none; } .avatar.sm { width: 26px; height: 26px; font-size: 0.62rem; } .btn { border: 1px solid var(--line); background: var(--surface); border-radius: 10px; padding: 10px 16px; font-weight: 700; font-size: 0.9rem; display: inline-flex; align-items: center; gap: 8px; } .btn.primary { background: var(--blue); border-color: var(--blue); color: #fff; } .btn:hover { filter: brightness(0.97); } /* ---------- KPI ---------- */ .kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } .kpi { flex-direction: row; align-items: center; gap: 16px; padding: 18px; } .kpi .ico { width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; color: #fff; flex: none; } .kpi .ico svg { width: 24px; height: 24px; } .kpi .lab { font-size: 0.9rem; color: var(--muted); font-weight: 600; } .kpi .row { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; } .kpi .val { font-size: 2rem; font-weight: 800; letter-spacing: -0.025em; font-variant-numeric: tabular-nums; } .delta { font-size: 0.78rem; font-weight: 700; } .delta.up { color: var(--green); } .delta.down { color: var(--red); } .delta.flat { color: var(--muted); } .kpi .vs { font-size: 0.8rem; color: var(--muted); } .bg-blue { background: var(--blue); } .bg-green { background: var(--green); } .bg-orange { background: var(--orange); } .bg-purple { background: var(--purple); } /* ---------- hàng 2 ---------- */ .row3 { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 1.1fr); gap: 16px; } .camps { display: flex; flex-direction: column; } .camp { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding-block: 11px; border-bottom: 1px solid var(--line); } .camp:last-child { border-bottom: 0; } .tile { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; } .camp b { font-size: 0.94rem; font-weight: 700; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .bar { height: 7px; border-radius: 99px; background: var(--surface-2); margin-top: 7px; overflow: hidden; } .bar i { display: block; height: 100%; border-radius: 99px; } .camp .rt { text-align: right; } .camp .rt b { font-size: 0.9rem; } .camp .rt small { color: var(--muted); font-size: 0.72rem; white-space: nowrap; } .donutwrap { display: grid; place-items: center; } .donut { width: 168px; height: 168px; } .legend { display: flex; flex-direction: column; gap: 8px; font-size: 0.84rem; } .legend div { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto; gap: 10px; align-items: center; } .legend i { width: 10px; height: 10px; border-radius: 50%; } .legend b { font-weight: 600; } .week { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; gap: 2px; } .week .dn { font-size: 0.72rem; color: var(--muted); } .week .dd { font-weight: 600; padding: 7px 0; border-radius: 10px; font-size: 0.9rem; } .week .dd.today { background: var(--blue); color: #fff; } .week .dc { font-size: 0.66rem; color: var(--muted); min-height: 14px; } .todo { display: flex; flex-direction: column; gap: 12px; } .todo div { display: grid; grid-template-columns: 10px minmax(0, 1fr); gap: 10px; font-size: 0.82rem; } .todo i { width: 8px; height: 8px; border-radius: 50%; margin-top: 6px; } .todo b { font-weight: 600; display: block; font-size: 0.8rem; } /* ---------- hàng 3 ---------- */ .row2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 16px; } .people { display: flex; flex-direction: column; gap: 12px; } .person { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 12px; align-items: center; } .person b { font-weight: 700; font-size: 0.95rem; display: block; } .person small { color: var(--muted); font-size: 0.76rem; } .chart { width: 100%; height: auto; display: block; } .chart text { fill: var(--muted); font-size: 11px; font-family: var(--f); } .mstrip { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 0; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; } .mtile { padding: 12px 14px; border-right: 1px solid var(--line); display: flex; flex-direction: column; gap: 2px; min-width: 0; } .mtile:last-child { border-right: 0; } .mtile .lab { font-size: 0.82rem; color: var(--muted); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mtile .v .delta { font-size: 0.72rem; } .mtile .v { white-space: nowrap; font-size: 1.4rem; font-weight: 800; letter-spacing: -0.01em; font-weight: 700; font-variant-numeric: tabular-nums; } .mtile .h { font-size: 0.78rem; color: var(--muted); } .mtile.good .v { color: var(--green); } .mtile.warn .v { color: var(--orange); } .mtile.bad .v { color: var(--red); } .ranks { display: flex; flex-direction: column; } .rank { display: grid; grid-template-columns: 22px 52px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding-block: 10px; border-bottom: 1px solid var(--line); } .rank:last-child { border-bottom: 0; } .rank .no { font-weight: 700; color: var(--muted); text-align: center; font-variant-numeric: tabular-nums; } .rank .no.gold { color: var(--orange); } .thumb { width: 52px; height: 52px; border-radius: 10px; object-fit: cover; background: var(--surface-2); border: 1px solid var(--line); display: grid; place-items: center; color: var(--muted); overflow: hidden; } .thumb.sm { width: 40px; height: 40px; border-radius: 8px; } .rank b { display: block; font-size: 0.95rem; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rank .sub { font-size: 0.8rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rank .body { font-size: 0.74rem; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: 2px; } .rank .rt { text-align: right; white-space: nowrap; } .rank .rt b { font-size: 1.02rem; } .rank .rt small { display: block; font-size: 0.78rem; color: var(--muted); } .sharebar { height: 5px; border-radius: 99px; background: var(--surface-2); margin-top: 6px; overflow: hidden; } .sharebar i { display: block; height: 100%; background: var(--blue); border-radius: 99px; } .hw-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; } .hw { display: grid; grid-template-columns: 84px 1fr; gap: 12px; align-items: center; padding: 10px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); } .hw .media-btn { padding: 0; border: 0; background: none; cursor: pointer; position: relative; } .hw .media-btn img, .hw .media-btn .ph { width: 84px; height: 110px; object-fit: cover; border-radius: 10px; display: block; background: var(--surface-2); } .hw .media-btn .pl { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-size: 22px; text-shadow: 0 2px 8px rgba(0,0,0,.5); } .hw b.nm { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: .92rem; line-height: 1.35; } .hw .hr { display: flex; align-items: baseline; gap: 8px; margin: 4px 0 2px; } .hw .hr strong { font-size: 1.45rem; color: var(--purple); } .hw .meter { height: 6px; border-radius: 6px; background: var(--surface-2); overflow: hidden; margin: 4px 0 6px; } .hw .meter i { display: block; height: 100%; background: linear-gradient(90deg, var(--purple), var(--blue)); } .portrait { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; } .ptile { border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; background: var(--surface); } .ptile small { color: var(--muted); font-size: .8rem; display: block; } .ptile b { font-size: 1.08rem; display: block; margin: 2px 0 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ptile .bar { height: 6px; border-radius: 6px; background: var(--surface-2); overflow: hidden; } .ptile .bar i { display: block; height: 100%; background: var(--green); } .ptile span { font-size: .8rem; color: var(--muted); } .ptile .lift { color: var(--green); font-weight: 700; } .wins { display: flex; flex-direction: column; } .cw { display: grid; grid-template-columns: 26px 56px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 4px; border-bottom: 1px solid var(--line); } .cw:last-child { border-bottom: 0; } .cw-no { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: .85rem; background: var(--surface-2); color: var(--muted); } .cw-no.r1 { background: #e9a23b; color: #fff; } .cw-no.r2 { background: #b8bfcc; color: #fff; } .cw-no.r3 { background: #c98a5a; color: #fff; } .cw-th { width: 56px; height: 56px; border-radius: 10px; overflow: hidden; background: var(--surface-2); position: relative; } .cw-th img { width: 100%; height: 100%; object-fit: cover; display: block; } .cw-th .pl { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-size: 16px; text-shadow: 0 1px 6px rgba(0,0,0,.6); } .cw-mid b { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: .93rem; line-height: 1.35; overflow: hidden; } .cw-mid small { display: block; color: var(--muted); font-size: .8rem; margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cw-rt { text-align: right; white-space: nowrap; } .cw-rt b { color: var(--green); font-size: 1.08rem; } .cw-rt small { display: block; color: var(--muted); font-size: .76rem; } @media (max-width: 600px) { .cw { grid-template-columns: 22px 48px minmax(0, 1fr) auto; gap: 9px; } .cw-th { width: 48px; height: 48px; } .cw-no { width: 22px; height: 22px; font-size: .78rem; } .cw-mid b { font-size: .88rem; } .cw-rt b { font-size: 1rem; } #win-note { display: none; } } .cw-rt em { display: block; font-style: normal; font-size: .74rem; color: var(--green); font-weight: 600; } .win { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; display: flex; flex-direction: column; background: var(--surface); } .win .media { position: relative; aspect-ratio: 4 / 3; background: var(--surface-2); border: 0; padding: 0; cursor: pointer; display: block; width: 100%; overflow: hidden; } .win .media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.3s; } .win .media:hover img { transform: scale(1.04); } .win .media .ph { position: absolute; inset: 0; display: grid; place-items: center; color: var(--muted); font-size: 0.82rem; text-align: center; padding: 12px; } .win .rankb { position: absolute; top: 10px; left: 10px; background: rgba(15, 19, 32, 0.78); color: #fff; font-weight: 800; font-size: 0.82rem; border-radius: 8px; padding: 3px 9px; } .win .rankb.gold { background: #e9a23b; } .win .kind { position: absolute; top: 10px; right: 10px; background: rgba(15, 19, 32, 0.72); color: #fff; font-size: 0.72rem; font-weight: 700; border-radius: 6px; padding: 3px 8px; } .win .play { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; } .win .play span { width: 52px; height: 52px; border-radius: 50%; background: rgba(15, 19, 32, 0.62); display: grid; place-items: center; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3); } .win .play svg { width: 22px; height: 22px; fill: #fff; stroke: none; margin-left: 3px; } .win .info { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 6px; flex: 1; } .win .info b { font-size: 0.95rem; font-weight: 700; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .win .info .body { font-size: 0.84rem; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .win .price { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; } .win .price b { font-size: 1.35rem; font-weight: 800; color: var(--green); -webkit-line-clamp: unset; display: inline; } .win .price small { color: var(--muted); font-size: 0.8rem; } .win .stats { font-size: 0.8rem; color: var(--muted); } .win .go { margin-top: auto; font-size: 0.85rem; font-weight: 700; color: var(--blue); text-decoration: none; display: inline-flex; gap: 4px; align-items: center; } .media-btn { border: 0; padding: 0; background: none; cursor: pointer; display: block; } .lightbox { position: fixed; inset: 0; z-index: 70; background: rgba(10, 12, 20, 0.82); display: grid; place-items: center; padding: calc(16px + env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) calc(16px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); } .lb-card { background: var(--surface); border-radius: 18px; overflow: hidden; width: min(980px, 100%); max-height: 100%; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); } .lb-media { background: #0b0d14; display: grid; place-items: center; min-height: 320px; max-height: calc(100vh - 64px); } .lb-left { display: flex; flex-direction: column; min-width: 0; background: #eef0f5; max-height: calc(100vh - 64px); } .lb-tabs { display: flex; gap: 6px; padding: 10px 12px; background: var(--surface); border-bottom: 1px solid var(--line); flex-wrap: wrap; align-items: center; } .lb-tabs button { border: 1px solid var(--line); background: var(--surface); border-radius: 999px; padding: 6px 12px; font: inherit; font-size: 0.84rem; font-weight: 600; cursor: pointer; color: var(--muted); } .lb-tabs button[aria-pressed="true"] { background: var(--ink, #111827); color: #fff; border-color: transparent; } .lb-tabs .sep { width: 1px; height: 22px; background: var(--line); margin: 0 4px; } .lb-tabs .fmt { font-size: 0.78rem; padding: 4px 10px; } .lb-tabs .fmt[aria-pressed="true"] { background: var(--blue); } .lb-stage { flex: 1; overflow: auto; display: flex; justify-content: center; align-items: flex-start; padding: 16px; min-height: 360px; } .lb-stage.dark { background: #0b0d14; align-items: center; padding: 0; } .lb-stage.dark img, .lb-stage.dark video { max-width: 100%; max-height: calc(100vh - 130px); display: block; } .lb-stage iframe { border: 0; background: #fff; border-radius: 10px; box-shadow: 0 6px 24px rgba(0,0,0,.12); max-width: 100%; } .lb-load { color: var(--muted); padding: 60px 10px; text-align: center; } .fbpost { width: 100%; max-width: 500px; background: #fff; border-radius: 10px; box-shadow: 0 6px 24px rgba(0,0,0,.1); overflow: hidden; color: #050505; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; } .fbpost .hd { display: flex; gap: 10px; align-items: center; padding: 12px 14px 8px; } .fbpost .av { width: 40px; height: 40px; border-radius: 50%; background: #111; flex: none; display: grid; place-items: center; overflow: hidden; } .fbpost .av img { width: 80%; } .fbpost .hd b { font-size: .95rem; display: block; } .fbpost .hd small { color: #65676b; font-size: .8rem; } .fbpost .tx { padding: 0 14px 10px; font-size: .93rem; line-height: 1.45; white-space: pre-wrap; max-height: 9.5em; overflow: hidden; } .fbpost .tx.open { max-height: none; } .fbpost .more { color: #65676b; font-weight: 600; cursor: pointer; padding: 0 14px 10px; font-size: .9rem; background: none; border: 0; } .fbpost .md img, .fbpost .md video { width: 100%; display: block; background: #000; } .fbpost .ct { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: #f0f2f5; } .fbpost .ct div { flex: 1; min-width: 0; } .fbpost .ct small { color: #65676b; font-size: .75rem; text-transform: uppercase; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .fbpost .ct b { font-size: .95rem; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .fbpost .ct span { background: #e4e6eb; border-radius: 6px; padding: 8px 12px; font-weight: 600; font-size: .88rem; white-space: nowrap; } .fbpost .ft { display: flex; justify-content: space-around; padding: 8px; border-top: 1px solid #e4e6eb; color: #65676b; font-weight: 600; font-size: .88rem; } .lb-note { font-size: .8rem; color: var(--muted); text-align: center; padding: 8px 12px 12px; } .ctl { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 12px; border: 1px dashed var(--line); border-radius: 12px; } .ctl .btn.danger { background: var(--red-soft); color: var(--red); border-color: transparent; } .ctl .btn.go { background: var(--green-soft); color: var(--green); border-color: transparent; } .ctl .btn.confirm { background: var(--red); color: #fff; } .st-pill { margin-top: 4px; } .lb-media img, .lb-media video { max-width: 100%; max-height: calc(100vh - 64px); display: block; } .lb-side { padding: 22px; display: flex; flex-direction: column; gap: 14px; overflow-y: auto; max-height: calc(100vh - 64px); } .lb-side h3 { margin: 0; font-size: 1.15rem; line-height: 1.35; } .lb-side .copy { white-space: pre-wrap; font-size: 0.93rem; line-height: 1.65; background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; } .lb-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .lb-stats div { background: var(--surface-2); border-radius: 10px; padding: 8px 10px; } .lb-stats small { display: block; color: var(--muted); font-size: 0.74rem; } .lb-stats b { font-size: 1rem; font-variant-numeric: tabular-nums; } .lb-close { position: absolute; top: calc(14px + env(safe-area-inset-top, 0px)); right: max(14px, env(safe-area-inset-right, 0px)); width: 40px; height: 40px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, 0.14); color: #fff; display: grid; place-items: center; } @media (max-width: 760px) { .lb-card { grid-template-columns: 1fr; overflow-y: auto; } .lb-media { min-height: 220px; max-height: 55vh; } .lb-media img, .lb-media video { max-height: 55vh; } .lb-side { max-height: none; } .lb-left { max-height: none; } .lb-stage { min-height: 260px; } } .row2b { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; } .adname { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 10px; align-items: start; min-width: 260px; } #adtable td:first-child, #adtable th:first-child { position: sticky; left: 0; background: var(--surface); z-index: 1; } .custompanel { position: fixed; z-index: 25; top: calc(72px + env(safe-area-inset-top, 0px)); right: max(24px, env(safe-area-inset-right, 0px)); background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 12px 32px rgba(20, 27, 52, 0.16); padding: 16px; display: flex; flex-direction: column; gap: 12px; width: min(360px, calc(100vw - 32px)); } .custompanel .dates { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .custompanel label { display: flex; flex-direction: column; gap: 4px; font-size: 0.78rem; color: var(--muted); } .custompanel input { border: 1px solid var(--line); border-radius: 8px; padding: 8px; background: var(--surface-2); } .custompanel .quick { display: flex; flex-wrap: wrap; gap: 6px; } .custompanel .quick button { border: 1px solid var(--line); background: var(--surface); border-radius: 999px; padding: 4px 10px; font-size: 0.78rem; } @media (max-width: 1180px) { .mstrip { grid-template-columns: repeat(4, minmax(0, 1fr)); } .mtile:nth-child(4) { border-right: 0; } .mtile:nth-child(-n+4) { border-bottom: 1px solid var(--line); } } @media (max-width: 900px) { .row2b { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 520px) { .mstrip { grid-template-columns: repeat(2, minmax(0, 1fr)); } .mtile { border-right: 0; border-bottom: 1px solid var(--line); } .mtile:nth-child(odd) { border-right: 1px solid var(--line); } } .aigrid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 16px; align-items: start; } .aibody { font-size: 0.98rem; line-height: 1.7; max-width: 76ch; } .aibody h3 { font-size: 1.06rem; font-weight: 800; margin: 18px 0 6px; color: var(--blue); } .aibody h3:first-child { margin-top: 0; } .aibody ul, .aibody ol { margin: 4px 0 8px; padding-left: 20px; } .aibody li { margin: 3px 0; } .aibody p { margin: 6px 0; } .aiwait { display: flex; gap: 14px; align-items: center; padding: 18px; border: 1.5px dashed var(--purple, #7c3aed); border-radius: 12px; background: color-mix(in srgb, var(--purple, #7c3aed) 7%, transparent); } .aiwait .spin { width: 30px; height: 30px; flex: none; border-radius: 50%; border: 3px solid color-mix(in srgb, var(--purple, #7c3aed) 25%, transparent); border-top-color: var(--purple, #7c3aed); animation: aispin .8s linear infinite; } .aiwait b { display: block; font-size: 1.02rem; } .aiwait .muted { font-size: .88rem; } .aiwait .sec { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--purple, #7c3aed); } .aidone { padding: 10px 14px; border-radius: 10px; margin-bottom: 12px; font-weight: 600; background: color-mix(in srgb, var(--green, #16a34a) 12%, transparent); color: var(--green, #16a34a); } .btn .spin-s { display: inline-block; width: 12px; height: 12px; margin-right: 6px; vertical-align: -1px; border-radius: 50%; border: 2px solid currentColor; border-top-color: transparent; animation: aispin .8s linear infinite; } @keyframes aispin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .aiwait .spin, .btn .spin-s { animation-duration: 2.4s; } } .aiempty { border: 1px dashed var(--line); border-radius: 12px; padding: 18px; color: var(--muted); font-size: 0.88rem; display: flex; flex-direction: column; gap: 8px; } .aimeta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 0.78rem; color: var(--muted); } .hist { display: flex; flex-direction: column; gap: 6px; max-height: 260px; overflow-y: auto; } .hist button { text-align: left; border: 1px solid var(--line); background: var(--surface); border-radius: 10px; padding: 8px 10px; font-size: 0.8rem; display: flex; flex-direction: column; gap: 2px; } .hist button[aria-pressed="true"] { border-color: var(--blue); background: var(--blue-soft); } .hist button small { color: var(--muted); } .ask textarea { width: 100%; min-height: 76px; border: 1px solid var(--line); border-radius: 10px; padding: 10px; background: var(--surface-2); resize: vertical; font: inherit; } .qchips { display: flex; flex-wrap: wrap; gap: 6px; } .qchips button { border: 1px solid var(--line); background: var(--surface); border-radius: 999px; padding: 5px 10px; font-size: 0.78rem; color: var(--muted); } .insgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } .insgrid .wide { grid-column: span 2; } .insgrid .full { grid-column: 1 / -1; } .blist { display: flex; flex-direction: column; gap: 8px; } .brow { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto; gap: 10px; align-items: center; font-size: 0.88rem; } .brow .bar { margin: 0; height: 8px; } .brow span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .brow .rt { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--muted); font-size: 0.8rem; } .brow .rt b { color: var(--ink); font-size: 0.88rem; } .trait { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; padding-block: 8px; border-bottom: 1px solid var(--line); font-size: 0.84rem; } .trait:last-child { border-bottom: 0; } .trait .x { font-weight: 700; color: var(--green); font-variant-numeric: tabular-nums; } .hours { display: grid; grid-template-columns: repeat(24, 1fr); gap: 3px; align-items: end; height: 120px; } .hours div { background: var(--blue-3); border-radius: 3px 3px 0 0; position: relative; min-height: 2px; } .hours div i { position: absolute; left: 0; right: 0; bottom: 0; background: var(--blue); border-radius: 3px 3px 0 0; } .hlabels { display: grid; grid-template-columns: repeat(24, 1fr); font-size: 0.62rem; color: var(--muted); text-align: center; } .cov { display: grid; grid-template-columns: minmax(0, 1fr) 90px 42px; gap: 10px; align-items: center; font-size: 0.82rem; } .snippet { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2); } .snippet code { white-space: nowrap; overflow-x: auto; display: block; } @media (max-width: 1180px) { .insgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .insgrid .wide { grid-column: 1 / -1; } } @media (max-width: 900px) { .aigrid, .insgrid { grid-template-columns: minmax(0, 1fr); } } .chartlegend { display: flex; justify-content: center; gap: 22px; flex-wrap: wrap; font-size: 0.82rem; } .chartlegend span { display: inline-flex; align-items: center; gap: 7px; } .chartlegend i { width: 10px; height: 10px; border-radius: 50%; } /* ---------- Kanban ---------- */ .board { display: grid; grid-template-columns: repeat(4, minmax(220px, 1fr)); gap: 14px; overflow-x: auto; padding-bottom: 4px; } .board.full { grid-template-columns: repeat(7, minmax(230px, 1fr)); } .col { border-radius: 14px; padding: 12px; display: flex; flex-direction: column; gap: 10px; min-height: 140px; transition: box-shadow 0.15s; } .col.over { box-shadow: inset 0 0 0 2px var(--blue); } .colhead { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 0.88rem; padding: 2px 4px; } .colhead .count { font-size: 0.72rem; padding: 1px 8px; border-radius: 6px; background: var(--surface); color: var(--muted); font-weight: 600; } .colhead small { margin-left: auto; color: var(--muted); font-weight: 500; font-size: 0.72rem; } .c-grey { background: var(--col-grey); } .c-blue { background: var(--col-blue); } .c-yellow { background: var(--col-yellow); } .c-green { background: var(--col-green); } .c-blue .colhead { color: var(--blue); } .c-yellow .colhead { color: var(--orange); } .c-green .colhead { color: var(--green); } .kcard { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 12px; display: flex; flex-direction: column; gap: 9px; cursor: grab; text-align: left; width: 100%; } .kcard:hover { border-color: var(--blue-3); } .kcard.dragging { opacity: 0.4; } .kcard .top { display: flex; gap: 10px; align-items: flex-start; } .kcard .nm { font-weight: 700; font-size: 0.93rem; } .kcard .ad { color: var(--muted); font-size: 0.75rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .kcard .meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 0.74rem; color: var(--muted); } .kcard .meta .avatar { margin-left: auto; } .check { width: 30px; height: 30px; border-radius: 50%; background: var(--green); color: #fff; display: grid; place-items: center; flex: none; } .check svg { width: 16px; height: 16px; stroke-width: 2.6; } .more { border: 1px dashed var(--line); background: var(--surface); border-radius: 10px; padding: 9px; color: var(--blue); font-weight: 600; font-size: 0.82rem; } .filters { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; } .filters select, .filters input[type="search"] { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; min-width: 0; } .filters label { display: inline-flex; gap: 6px; align-items: center; font-size: 0.85rem; color: var(--muted); } .chips { display: flex; flex-wrap: wrap; gap: 6px; } .chips button { border: 1px solid var(--line); background: var(--surface); color: var(--muted); padding: 5px 12px; border-radius: 999px; font-size: 0.8rem; } .chips button[aria-pressed="true"] { background: var(--blue); border-color: var(--blue); color: #fff; font-weight: 600; } /* ---------- bảng ---------- */ .tablewrap { overflow-x: auto; } table { width: 100%; border-collapse: collapse; font-size: 0.9rem; } th { text-align: left; font-size: 0.82rem; font-weight: 700; color: var(--muted); padding: 10px; border-bottom: 1px solid var(--line); white-space: nowrap; cursor: pointer; user-select: none; background: var(--surface); } th:hover { color: var(--ink); } td { padding: 11px 10px; border-bottom: 1px solid var(--line); vertical-align: top; } tbody tr:hover td { background: var(--surface-2); } tr:last-child td { border-bottom: 0; } .r { text-align: right; } td.r { font-variant-numeric: tabular-nums; white-space: nowrap; } .nm2 { font-weight: 600; min-width: 220px; } .why { color: var(--muted); font-size: 0.82rem; font-weight: 400; margin-top: 3px; line-height: 1.5; } .bad { color: var(--red); font-weight: 600; } .idx { display: inline-flex; align-items: center; gap: 8px; } .idxbar { position: relative; width: 84px; height: 8px; border-radius: 99px; background: var(--surface-2); } .idxbar i { position: absolute; top: 0; height: 100%; border-radius: 99px; } .idxbar b { position: absolute; left: 50%; top: -3px; width: 2px; height: 14px; background: var(--muted); border-radius: 2px; } .reasons { display: flex; flex-direction: column; gap: 10px; } .rrow { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) 36px; gap: 12px; align-items: center; font-size: 0.84rem; } .grid-1-1 { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 16px; } /* ---------- tích hợp ---------- */ .integ { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } .integ .card { gap: 12px; } .ihead { display: flex; gap: 14px; align-items: center; } .ihead .tile { width: 46px; height: 46px; border-radius: 12px; } .ihead h3 { margin: 0; font-size: 1rem; } .ihead .pill { margin-left: auto; } .kv { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 16px; font-size: 0.84rem; } .kv dt { color: var(--muted); } .kv dd { margin: 0; font-weight: 500; overflow-wrap: anywhere; } code { font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-size: 0.8em; background: var(--surface-2); border: 1px solid var(--line); padding: 1px 6px; border-radius: 6px; } .steps { margin: 0; padding-left: 18px; font-size: 0.84rem; display: flex; flex-direction: column; gap: 4px; color: var(--muted); } .steps b { color: var(--ink); font-weight: 600; } .hooks { display: flex; flex-direction: column; gap: 10px; } .hook { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2); } .hook code.url { display: block; margin-top: 6px; white-space: nowrap; overflow-x: auto; background: var(--surface); } .actions { display: flex; gap: 8px; flex-wrap: wrap; } /* ---------- ngăn chi tiết ---------- */ .scrim { position: fixed; inset: 0; background: rgba(15, 19, 32, 0.35); z-index: 20; } .drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(420px, 100vw); background: var(--surface); z-index: 21; padding: calc(20px + env(safe-area-inset-top, 0px)) max(20px, env(safe-area-inset-right, 0px)) calc(20px + env(safe-area-inset-bottom, 0px)) 20px; display: flex; flex-direction: column; gap: 16px; overflow-y: auto; box-shadow: -12px 0 32px rgba(20, 27, 52, 0.15); } .drawer h3 { margin: 0; font-size: 1.15rem; } .levels { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; } .levels button { border: 1px solid var(--line); background: var(--surface); border-radius: 8px; padding: 8px 0; font-weight: 700; font-size: 0.8rem; } .levels button[aria-pressed="true"] { background: var(--blue); border-color: var(--blue); color: #fff; } .note { background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; font-size: 0.85rem; } .toast { position: fixed; z-index: 30; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); left: 50%; transform: translateX(-50%); background: var(--ink); color: var(--bg); padding: 10px 16px; border-radius: 10px; font-size: 0.85rem; font-weight: 500; max-width: calc(100vw - 32px); } /* ---------- thu nhỏ ---------- */ @media (max-width: 1180px) { .row3 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .row3 .weekcard { grid-column: 1 / -1; } .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 900px) { .app { grid-template-columns: minmax(0, 1fr); } .side { position: sticky; top: 0; z-index: 30; height: auto; flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; padding: calc(8px + env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) 8px max(16px, env(safe-area-inset-left, 0px)); overflow: visible; border-right: 0; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } .side .nav { display: none; } .side .m-top { display: flex; } .top-right #theme-btn { display: none; } .tabbar { display: grid; } body { padding-bottom: calc(70px + env(safe-area-inset-bottom, 0px)); } .toast { bottom: calc(84px + env(safe-area-inset-bottom, 0px)) !important; } .topbar { position: static; } .top-right .me { display: none; } .pagehead h1 { font-size: 1.35rem; } .pagehead p { font-size: .88rem; } .logo small, .promo { display: none; } .logo { flex-direction: row; align-items: center; gap: 8px; } .logo .plate { padding: 4px 6px; } .logo .plate img { height: 24px; } .logo .brand em { letter-spacing: 0.18em; } .topbar { padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); } .content { padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); } .row3, .row2, .grid-1-1, .integ { grid-template-columns: minmax(0, 1fr); } .me div { display: none; } .topbar { flex-wrap: wrap; } .accsel { order: 3; max-width: none; flex: 1 1 100%; } .accsel select { max-width: none; width: 100%; } } @media (max-width: 520px) { .kpis { grid-template-columns: minmax(0, 1fr); } .board { grid-template-columns: repeat(4, minmax(240px, 82vw)); } } @media (prefers-reduced-motion: no-preference) { .bar i, .idxbar i { transition: width 0.4s ease; } } .adcards { display: none; } @media (max-width: 900px) { .topbar { gap: 10px; padding-top: 10px; padding-bottom: 10px; } .topbar .search { display: none; order: 0; flex: 1 1 100%; } .topbar.show-search .search { display: flex; } .accsel { order: 1; flex: 1 1 0 !important; min-width: 0; width: auto; } .accsel select { min-width: 0; text-overflow: ellipsis; } .top-right { flex: none; } .filters { display: grid !important; grid-template-columns: 1fr 1fr; gap: 8px; align-items: center; } .filters #kq { grid-column: 1 / -1; } .filters select { width: 100%; max-width: none !important; min-width: 0; } .filters #kcount { justify-self: end; } .filters #exp-leads { margin-left: 0 !important; grid-column: 1 / -1; justify-content: center; padding: 9px 10px; font-size: .85rem; } .top-right { order: 2; } .pagehead { flex-wrap: nowrap; align-items: center; } .pagehead > div:first-child { min-width: 0; } .pagehead p { display: none; } .rangesel { flex: none; } .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px; } .kpi { padding: 14px; gap: 10px; align-items: flex-start; } .kpi .ico { display: none; } .kpi .val { font-size: 1.45rem; } .kpi .lab { font-size: .8rem; } .kpi .vs { font-size: .72rem; } .cardhead { flex-wrap: wrap; } .cardhead h2 { font-size: 1.02rem; } .cardhead .chips { order: 3; flex: 1 1 100%; flex-wrap: nowrap; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; } .cardhead .chips::-webkit-scrollbar { display: none; } .cardhead .chips button { flex: none; } .cardhead .btn { padding: 6px 10px; font-size: .8rem; } #adtable { display: none; } .adcards { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; } .adc { border: 1px solid var(--line); border-radius: 14px; padding: 12px; background: var(--surface); } .adc .hd { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 10px; align-items: start; } .adc .hd .media-btn img, .adc .hd .media-btn .thumb { width: 52px; height: 52px; border-radius: 10px; object-fit: cover; } .adc .nm { font-weight: 700; font-size: .92rem; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .adc .pills { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 5px; } .adc .pills .st-pill { margin: 0; } .adc .mx { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px 6px; margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--line); } .adc .mx small { display: block; font-size: .68rem; color: var(--muted); } .adc .mx b { font-size: .88rem; font-variant-numeric: tabular-nums; } .adc .mx b.bad { color: var(--red); } .adc .mx b.good { color: var(--green); } .adc .why { font-size: .78rem; color: var(--muted); margin-top: 8px; line-height: 1.45; } } @media (max-width: 380px) { .adc .mx { grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* ---------- Điện thoại: gọn, dễ nhìn ---------- */ @media (max-width: 900px) { .side .m-top { gap: 2px; flex: none; } .side .m-top .iconbtn { padding: 6px; } .logo { min-width: 0; flex: 1 1 auto; overflow: hidden; } .logo .brand b { font-size: .86rem; } .logo .brand em { font-size: .62rem; } .tabbar { left: 10px; right: 10px; bottom: calc(8px + env(safe-area-inset-bottom, 0px)); border-radius: 22px; border: 1px solid color-mix(in srgb, var(--blue) 18%, var(--line)); padding: 6px; background: color-mix(in srgb, var(--surface) 80%, transparent); box-shadow: 0 14px 36px rgba(0, 0, 0, .28); } .tabbar a, .tabbar button { min-height: 50px; border-radius: 16px; transition: background .25s, color .25s; } .tabbar [aria-current="page"] { background: var(--blue-soft); font-weight: 800; } .tabbar [aria-current="page"]::before { display: none; } .tabbar [aria-current="page"] .i { filter: drop-shadow(0 0 6px color-mix(in srgb, var(--blue) 60%, transparent)); } body.mode-sale .tabbar [aria-current="page"] { background: color-mix(in srgb, #0f9d6c 16%, transparent); } body { padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)); } .toast { bottom: calc(100px + env(safe-area-inset-bottom, 0px)) !important; } .content { gap: 14px; padding-top: 14px; } .card { padding: 15px; border-radius: 18px; gap: 12px; } .ringrow { gap: 10px; } .banner { font-size: .86rem; line-height: 1.5; } .aurora i { filter: blur(48px); } } @media (max-width: 600px) { .ringrow { grid-template-columns: 1fr 1fr; } .ringc { flex-direction: column; text-align: center; padding: 14px 8px 12px; gap: 6px; } .ringc .rt { align-items: center; } .ringc .ring svg { width: 88px; height: 88px; } .ringc .rt small { font-size: .68rem; } .ringc .rt b { font-size: 1.15rem; } .ringc .rt span { font-size: .72rem; } .ringc .rt .tag { align-self: center; } .slkpis { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .slk { padding: 10px 10px 11px; border-radius: 13px; gap: 2px; } .slk small { font-size: .68rem; line-height: 1.3; } .slk b { font-size: 1.22rem; } .slk span { font-size: .66rem; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .journey { grid-template-columns: 1fr 1fr; } .kpi .val { font-size: 1.35rem; } .spark { height: 28px; } .mtile .v { font-size: 1.15rem; } .pod { display: grid; grid-template-columns: auto auto minmax(0, 1fr); grid-template-areas: "md rg nm" "md rg tm" "ps ps ps"; text-align: left; column-gap: 12px; row-gap: 0; padding: 12px 14px; align-items: center; } .pod .medal { grid-area: md; font-size: 1.6rem; } .pod .ring { grid-area: rg; width: 58px; height: 58px; font-size: 1.1rem; } .pod h3 { grid-area: nm; align-self: end; margin: 0; } .pod .tm { grid-area: tm; align-self: start; } .pod .ps { grid-area: ps; margin-top: 10px; } .csr { grid-template-columns: minmax(0, 1fr); gap: 6px; padding: 12px 0; } .csr .nt { grid-row: auto; } .csr .rt { order: -1; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; text-align: left; } .csr .nm b { font-size: 1rem; } #sl-teams td:first-child, #sl-teams th { white-space: nowrap; } .tablewrap { -webkit-overflow-scrolling: touch; mask-image: linear-gradient(90deg, #000 88%, transparent); } } /* ---- So sánh team ---- */ .tvs { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 16px; } .tcard { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: 20px; padding: 18px; overflow: hidden; box-shadow: var(--shadow); transition: transform .25s, box-shadow .25s; } .tcard::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--tc); } .tcard::after { content: ""; position: absolute; width: 180px; height: 180px; right: -60px; top: -60px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--tc) 22%, transparent), transparent 70%); pointer-events: none; } .tcard:hover { transform: translateY(-3px); } .tcard.win { border-color: var(--tc); box-shadow: 0 0 0 1px var(--tc), 0 14px 34px color-mix(in srgb, var(--tc) 28%, transparent); } .tcard.none { opacity: .82; } .tcard .th { display: flex; align-items: center; gap: 14px; } .tcard h3 { margin: 0 0 2px; font-size: 1.2rem; font-weight: 800; color: var(--tc); } .tcard .crown { display: inline-block; animation: crown 2.4s ease-in-out infinite; } @keyframes crown { 0%, 100% { transform: translateY(0) rotate(-6deg); } 50% { transform: translateY(-3px) rotate(6deg); } } .tstats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 14px; } .tstats div { background: var(--surface-2); border-radius: 12px; padding: 8px 10px; min-width: 0; } .tstats small { display: block; color: var(--muted); font-size: .72rem; } .tstats b { font-size: 1.05rem; } .tstats em { font-style: normal; color: var(--muted); font-size: .75rem; margin-left: 4px; } .mrow { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 14px; padding: 10px 0; border-top: 1px solid var(--line); align-items: center; } .mrow:first-child { border-top: 0; } .mrow .ml { font-weight: 600; font-size: .9rem; display: flex; flex-direction: column; } .mrow .bars { display: grid; gap: 6px; } .mbar { display: grid; grid-template-columns: 96px minmax(0, 1fr) 92px; align-items: center; gap: 10px; font-size: .82rem; } .mbar span { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mbar .tr { height: 10px; background: var(--surface-2); border-radius: 99px; overflow: hidden; } .mbar .tr i { display: block; height: 100%; width: 0; border-radius: 99px; background: linear-gradient(90deg, color-mix(in srgb, var(--tc) 55%, transparent), var(--tc)); transition: width 1.1s cubic-bezier(.2, .8, .2, 1); } .mbar b { text-align: right; white-space: nowrap; } .mbar.win span, .mbar.win b { color: var(--tc); font-weight: 800; } .mbar.win .tr i { box-shadow: 0 0 10px color-mix(in srgb, var(--tc) 60%, transparent); } .tc-mem { display: grid; grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); gap: 16px; } .tdot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--tc); margin-right: 8px; box-shadow: 0 0 8px var(--tc); } .tmt tr.idle td { opacity: .55; } .tm-team { border: 1px solid var(--line); border-left: 4px solid var(--tc); border-radius: 14px; padding: 12px 14px; margin-bottom: 12px; } .tm-h { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .tm-h h3 { margin: 0; font-size: 1rem; } .tm-h .tm-name { font: inherit; font-weight: 700; padding: 6px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink); width: 180px; } .tm-h .tm-color { width: 34px; height: 30px; padding: 0; border: 1px solid var(--line); border-radius: 8px; background: none; cursor: pointer; } .tm-h .muted { margin-left: auto; } .mchips { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; } .mchip { display: inline-flex; align-items: center; gap: 4px; padding: 4px 4px 4px 12px; border-radius: 999px; background: color-mix(in srgb, var(--tc) 12%, var(--surface)); border: 1px solid color-mix(in srgb, var(--tc) 35%, var(--line)); font-size: .84rem; } .mchip.ghost { border-style: dashed; opacity: .75; } .mchip button { border: 0; background: none; color: var(--muted); cursor: pointer; width: 24px; height: 24px; border-radius: 50%; font-size: 1rem; line-height: 1; } .mchip button:hover { background: var(--red-soft); color: var(--red); } .tm-add { display: flex; gap: 8px; flex-wrap: wrap; } .tm-add select, .tm-add input { font: inherit; padding: 7px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink); min-width: 0; flex: 1 1 180px; } @media (max-width: 640px) { .tvs { grid-template-columns: 1fr; gap: 12px; } .tcard { padding: 14px; } .mrow { grid-template-columns: 1fr; gap: 6px; } .mbar { grid-template-columns: 70px minmax(0, 1fr) 78px; gap: 8px; font-size: .78rem; } .tc-mem { grid-template-columns: 1fr; } .tm-h .tm-name { width: 100%; flex: 1 1 140px; } } .hh-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 10px 14px; border: 1px dashed color-mix(in srgb, #c8963e 60%, var(--line)); border-radius: 14px; background: color-mix(in srgb, #c8963e 8%, var(--surface)); } .holdc { align-items: center; text-align: center; padding: 48px 20px; gap: 10px; } .holdc h2 { margin: 0; font-size: 1.4rem; } .holdc p { margin: 0; max-width: 520px; line-height: 1.6; } .hold-ic { width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center; font-size: 2rem; background: color-mix(in srgb, var(--blue) 14%, var(--surface)); box-shadow: 0 0 30px color-mix(in srgb, var(--blue) 35%, transparent); animation: holdp 2.4s ease-in-out infinite; } @keyframes holdp { 50% { transform: scale(1.06); } } .dsw { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 0; padding: 5px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); isolation: isolate; max-width: 560px; } .dsw::before { content: ""; position: absolute; z-index: -1; top: 5px; bottom: 5px; left: 5px; width: calc(50% - 5px); border-radius: 14px; background: linear-gradient(135deg, #4f7dff, #22d3ee); box-shadow: 0 6px 22px rgba(79, 125, 255, .4); transition: transform .3s cubic-bezier(.4, 0, .2, 1), background .3s; } .dsw[data-on="hh"]::before { transform: translateX(100%); background: linear-gradient(135deg, #e9a23b, #c8963e); box-shadow: 0 6px 22px rgba(200, 150, 62, .45); } .dsw button { border: 0; background: none; font: inherit; font-weight: 800; font-size: 1rem; letter-spacing: .02em; color: var(--muted); padding: 12px 10px; border-radius: 14px; cursor: pointer; transition: color .2s; } .dsw button[aria-selected="true"] { color: #fff; } @media (max-width: 640px) { .dsw { max-width: none; } .dsw button { font-size: .92rem; padding: 11px 6px; } }