Spaces:
Running
Running
| /* ─────────────────────── Font phụ đề (hard sub) ──────────────────────────── | |
| Nạp CHÍNH các file font backend dùng để burn (libass đọc backend/app/assets/ | |
| fonts qua fontsdir; trình duyệt nạp CÙNG file qua /fonts). Nhờ vậy bản xem | |
| trước (CSS/canvas) và video render dùng ĐÚNG 1 bộ glyph -> khớp tuyệt đối, | |
| không phụ thuộc font Microsoft của máy. Mỗi file là 1 face nét đậm sẵn, khai | |
| báo weight normal để KHÔNG bị làm-đậm-giả (giữ đúng metric như libass). | |
| Tên family PHẢI trùng hằng FONTS trong SubtitleEditor.jsx và Fontname trong | |
| subtitle_render.py. */ | |
| @font-face { font-family: "Be Vietnam Pro"; src: url("/fonts/BeVietnamPro.ttf") format("truetype"); font-weight: normal; font-style: normal; font-display: swap; } | |
| @font-face { font-family: "Montserrat"; src: url("/fonts/Montserrat.ttf") format("truetype"); font-weight: normal; font-style: normal; font-display: swap; } | |
| @font-face { font-family: "Roboto"; src: url("/fonts/Roboto.ttf") format("truetype"); font-weight: normal; font-style: normal; font-display: swap; } | |
| @font-face { font-family: "Open Sans"; src: url("/fonts/OpenSans.ttf") format("truetype"); font-weight: normal; font-style: normal; font-display: swap; } | |
| @font-face { font-family: "Arimo"; src: url("/fonts/Arimo.ttf") format("truetype"); font-weight: normal; font-style: normal; font-display: swap; } | |
| @font-face { font-family: "Tinos"; src: url("/fonts/Tinos.ttf") format("truetype"); font-weight: normal; font-style: normal; font-display: swap; } | |
| @font-face { font-family: "Oswald"; src: url("/fonts/Oswald.ttf") format("truetype"); font-weight: normal; font-style: normal; font-display: swap; } | |
| @font-face { font-family: "Nunito"; src: url("/fonts/Nunito.ttf") format("truetype"); font-weight: normal; font-style: normal; font-display: swap; } | |
| @font-face { font-family: "Lato"; src: url("/fonts/Lato.ttf") format("truetype"); font-weight: normal; font-style: normal; font-display: swap; } | |
| @font-face { font-family: "Merriweather"; src: url("/fonts/Merriweather.ttf") format("truetype"); font-weight: normal; font-style: normal; font-display: swap; } | |
| @font-face { font-family: "Playfair Display"; src: url("/fonts/PlayfairDisplay.ttf") format("truetype"); font-weight: normal; font-style: normal; font-display: swap; } | |
| @font-face { font-family: "Kanit"; src: url("/fonts/Kanit.ttf") format("truetype"); font-weight: normal; font-style: normal; font-display: swap; } | |
| @font-face { font-family: "Dancing Script"; src: url("/fonts/DancingScript.ttf") format("truetype"); font-weight: normal; font-style: normal; font-display: swap; } | |
| /* ───────────────────────── TNT Group design tokens ───────────────────────── | |
| Bám sát nhận diện sẵn có trong ảnh: cam chủ đạo trên nền kem/trắng, sidebar | |
| trái, thẻ bo tròn, rãnh "Quy trình xử lý" đánh số bên phải. */ | |
| :root { | |
| --orange: #f26f21; | |
| --orange-600: #e85d10; | |
| --orange-700: #cf4f08; | |
| --orange-soft: #fdeee3; /* nền active sidebar / icon chip */ | |
| --orange-tint: #fff4ec; /* nền hero / panel nhạt */ | |
| --cream: #fff9f4; /* nền trang */ | |
| --white: #ffffff; | |
| --ink: #2b2b2b; | |
| --ink-2: #555555; | |
| --muted: #8b8b8b; | |
| --line: #efe7df; | |
| --line-2: #f3ece5; | |
| --green: #16a34a; | |
| --green-soft: #e7f6ec; | |
| --red: #dc2626; | |
| --red-soft: #fdecec; | |
| --shadow: 0 1px 2px rgba(43, 30, 20, 0.04), 0 8px 24px rgba(43, 30, 20, 0.05); | |
| --radius: 16px; | |
| --radius-sm: 10px; | |
| --sidebar-w: 248px; | |
| --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; | |
| } | |
| * { box-sizing: border-box; } | |
| html, body, #root { height: 100%; margin: 0; } | |
| body { | |
| font-family: var(--font); | |
| color: var(--ink); | |
| background: var(--cream); | |
| -webkit-font-smoothing: antialiased; | |
| } | |
| a { color: inherit; text-decoration: none; } | |
| button { font-family: inherit; cursor: pointer; } | |
| /* ───────────────────────────── Layout shell ──────────────────────────── */ | |
| .shell { display: flex; min-height: 100vh; } | |
| .sidebar { | |
| width: var(--sidebar-w); | |
| flex: 0 0 var(--sidebar-w); | |
| background: var(--white); | |
| border-right: 1px solid var(--line); | |
| padding: 16px 14px; | |
| position: sticky; | |
| top: 0; | |
| height: 100vh; | |
| display: flex; | |
| flex-direction: column; | |
| overflow: hidden; /* không có thanh cuộn dọc xấu */ | |
| } | |
| .logo { display: flex; align-items: center; justify-content: flex-start; padding: 2px 8px 14px; } | |
| .logo img { width: 100%; max-width: 158px; height: auto; display: block; } | |
| .logo .tnt { | |
| font-weight: 800; font-size: 26px; letter-spacing: -1px; | |
| color: var(--orange); | |
| font-style: italic; | |
| } | |
| .logo .grp { font-size: 10px; font-weight: 700; color: var(--ink); letter-spacing: 3px; margin: 8px 0 0 4px; } | |
| .nav-group { margin-bottom: 2px; } | |
| .nav-group > .label { | |
| font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .3px; | |
| color: var(--muted); padding: 9px 12px 4px; | |
| } | |
| .nav-item { | |
| display: flex; align-items: center; gap: 11px; | |
| padding: 8px 12px; border-radius: var(--radius-sm); | |
| color: var(--ink-2); font-size: 13.5px; font-weight: 500; | |
| margin-bottom: 1px; | |
| } | |
| .nav-item:hover { background: var(--orange-tint); color: var(--ink); } | |
| .nav-item.active { background: var(--orange-soft); color: var(--orange-700); font-weight: 600; } | |
| .nav-item svg { width: 17px; height: 17px; flex: 0 0 17px; } | |
| .nav-divider { height: 1px; background: var(--line); margin: 8px 8px; } | |
| .nav-spacer { flex: 1 1 auto; } | |
| .main { flex: 1; min-width: 0; display: flex; flex-direction: column; } | |
| .topbar { | |
| display: flex; align-items: center; gap: 30px; | |
| padding: 0 36px; height: 64px; | |
| border-bottom: 1px solid var(--line); | |
| background: var(--white); | |
| position: sticky; top: 0; z-index: 5; | |
| } | |
| .topbar .tab { font-size: 14px; color: var(--ink-2); padding: 22px 2px; font-weight: 500; } | |
| .topbar .tab.active { color: var(--orange); border-bottom: 2px solid var(--orange); font-weight: 600; } | |
| .topbar .spacer { flex: 1; } | |
| .topbar .avatar { | |
| width: 34px; height: 34px; border-radius: 50%; | |
| background: var(--orange-soft); color: var(--orange-700); | |
| display: grid; place-items: center; font-weight: 700; font-size: 13px; | |
| } | |
| .content { padding: 30px 36px 60px; max-width: 1400px; width: 100%; } | |
| /* ───────────────────────────── Typography ────────────────────────────── */ | |
| .h1 { font-size: 26px; font-weight: 800; margin: 0 0 4px; letter-spacing: -0.4px; } | |
| .h1 .accent { color: var(--orange); } | |
| .subtitle { color: var(--ink-2); font-size: 14px; margin: 0 0 22px; } | |
| .section-title { font-size: 15px; font-weight: 700; margin: 0 0 14px; } | |
| .eyebrow { font-size: 12px; font-weight: 700; color: var(--orange); letter-spacing: 0.4px; } | |
| /* ───────────────────────────── Cards / panels ────────────────────────── */ | |
| .card { | |
| background: var(--white); | |
| border: 1px solid var(--line); | |
| border-radius: var(--radius); | |
| padding: 20px; | |
| box-shadow: var(--shadow); | |
| } | |
| .panel-title { font-size: 14px; font-weight: 700; margin: 0 0 14px; } | |
| .grid-2 { display: grid; grid-template-columns: 1fr 320px; gap: 22px; align-items: start; } | |
| .stack { display: flex; flex-direction: column; gap: 18px; } | |
| .row { display: flex; gap: 18px; } | |
| .row.wrap { flex-wrap: wrap; } | |
| /* ───────────────────────────── Buttons ───────────────────────────────── */ | |
| .btn { | |
| display: inline-flex; align-items: center; justify-content: center; gap: 8px; | |
| border: 1px solid var(--line); background: var(--white); color: var(--ink); | |
| padding: 10px 16px; border-radius: var(--radius-sm); font-size: 14px; font-weight: 600; | |
| transition: all .15s ease; | |
| } | |
| .btn:hover { border-color: var(--orange); color: var(--orange-700); } | |
| .btn.primary { background: var(--orange); border-color: var(--orange); color: #fff; } | |
| .btn.primary:hover { background: var(--orange-600); border-color: var(--orange-600); color: #fff; } | |
| .btn.block { width: 100%; padding: 14px; font-size: 15px; } | |
| .btn:disabled { opacity: .5; cursor: not-allowed; } | |
| .btn.ghost { background: transparent; } | |
| .btn.sm { padding: 7px 12px; font-size: 13px; } | |
| /* ───────────────────────────── Form controls ─────────────────────────── */ | |
| .field-label { font-size: 13px; font-weight: 600; color: var(--ink-2); margin-bottom: 8px; display: block; } | |
| textarea, input[type="text"], input[type="number"], select { | |
| width: 100%; font-family: inherit; font-size: 14px; color: var(--ink); | |
| border: 1px solid var(--line); border-radius: var(--radius-sm); | |
| padding: 11px 12px; background: var(--white); outline: none; | |
| } | |
| textarea:focus, input:focus, select:focus { border-color: var(--orange); } | |
| textarea { resize: vertical; min-height: 200px; line-height: 1.6; } | |
| .seg-group { display: inline-flex; border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; } | |
| .seg-group button { border: none; background: var(--white); padding: 9px 16px; font-size: 13px; font-weight: 600; color: var(--ink-2); } | |
| .seg-group button.active { background: var(--orange); color: #fff; } | |
| .stepper { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: var(--radius-sm); } | |
| .stepper button { border: none; background: var(--white); width: 38px; height: 38px; font-size: 18px; color: var(--ink-2); } | |
| .stepper input { border: none; width: 56px; text-align: center; padding: 0; } | |
| /* Toggle */ | |
| .toggle { width: 42px; height: 24px; border-radius: 12px; background: #d9d2cb; position: relative; transition: background .15s; flex: 0 0 42px; } | |
| .toggle.on { background: var(--orange); } | |
| .toggle .knob { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: left .15s; } | |
| .toggle.on .knob { left: 21px; } | |
| .toggle-row { display: flex; align-items: center; gap: 12px; } | |
| /* ───────────────────────────── Dropzone ──────────────────────────────── */ | |
| .dropzone { | |
| border: 2px dashed #f0c9a8; border-radius: var(--radius); | |
| background: var(--orange-tint); | |
| padding: 34px 20px; text-align: center; color: var(--ink-2); | |
| transition: border-color .15s, background .15s; | |
| } | |
| .dropzone.drag { border-color: var(--orange); background: #ffeede; } | |
| .dropzone .chip { width: 56px; height: 56px; border-radius: 50%; background: #fde0cb; color: var(--orange); display: grid; place-items: center; margin: 0 auto 12px; } | |
| .dropzone .big { font-weight: 700; color: var(--ink); margin-bottom: 4px; } | |
| .dropzone .hint { font-size: 12px; color: var(--muted); } | |
| /* ───────────────────────────── Process rail ──────────────────────────── */ | |
| .rail { position: sticky; top: 84px; } | |
| .rail-title { font-size: 14px; font-weight: 700; margin: 0 0 18px; } | |
| .rail-step { display: flex; gap: 14px; padding-bottom: 22px; position: relative; } | |
| .rail-step:not(:last-child)::before { content: ""; position: absolute; left: 13px; top: 30px; bottom: 0; width: 1px; background: var(--line); border-left: 1px dashed var(--line); } | |
| .rail-step .num { width: 28px; height: 28px; border-radius: 50%; background: var(--orange); color: #fff; font-size: 13px; font-weight: 700; display: grid; place-items: center; flex: 0 0 28px; z-index: 1; } | |
| .rail-step .body .t { font-size: 14px; font-weight: 700; margin-bottom: 2px; } | |
| .rail-step .body .d { font-size: 12.5px; color: var(--muted); line-height: 1.5; } | |
| .tip { margin-top: 8px; background: var(--orange-tint); border-radius: var(--radius-sm); padding: 14px; font-size: 12.5px; color: var(--ink-2); line-height: 1.5; } | |
| .tip b { color: var(--orange-700); } | |
| /* ───────────────────────────── Tables ────────────────────────────────── */ | |
| table.list { width: 100%; border-collapse: collapse; font-size: 13.5px; } | |
| table.list th { text-align: left; color: var(--muted); font-weight: 600; padding: 10px 10px; border-bottom: 1px solid var(--line); font-size: 12.5px; } | |
| table.list td { padding: 11px 10px; border-bottom: 1px solid var(--line-2); } | |
| table.list tr:last-child td { border-bottom: none; } | |
| .badge { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; padding: 4px 9px; border-radius: 20px; } | |
| .badge.ready { background: var(--green-soft); color: var(--green); } | |
| .badge.running { background: var(--orange-tint); color: var(--orange-700); } | |
| .badge.done { background: var(--green-soft); color: var(--green); } | |
| .badge.error { background: var(--red-soft); color: var(--red); } | |
| .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; } | |
| /* ───────────────────────────── Log box ───────────────────────────────── */ | |
| .logbox { background: #fffaf5; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 12px 14px; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 12px; line-height: 1.7; max-height: 240px; overflow-y: auto; } | |
| .logbox .err { color: var(--red); } | |
| .logbox .ok { color: var(--green); } | |
| /* progress */ | |
| .progress { height: 8px; border-radius: 6px; background: var(--line); overflow: hidden; } | |
| .progress > i { display: block; height: 100%; background: var(--orange); transition: width .3s ease; } | |
| /* lớp phủ ĐANG XỬ LÝ — chỉ phủ VÙNG WORKSPACE (chừa sidebar) để user vẫn bấm | |
| sang tool khác được. Khoá thao tác trong workspace của tool đang chạy. */ | |
| .proc-overlay { position: fixed; top: 0; right: 0; bottom: 0; left: var(--sidebar-w); | |
| z-index: 900; display: grid; place-items: center; | |
| background: rgba(43, 30, 20, .45); backdrop-filter: blur(2px); padding: 20px; } | |
| @media (max-width: 720px) { .proc-overlay { left: 0; } } /* sidebar ẩn -> phủ hết */ | |
| .proc-box { background: var(--white); border-radius: var(--radius); padding: 30px 32px; | |
| width: min(440px, 92vw); box-shadow: var(--shadow); text-align: center; } | |
| .proc-spinner { width: 46px; height: 46px; margin: 0 auto 16px; border-radius: 50%; | |
| border: 4px solid var(--line); border-top-color: var(--orange); animation: proc-spin .8s linear infinite; } | |
| @keyframes proc-spin { to { transform: rotate(360deg); } } | |
| .proc-title { font-weight: 700; font-size: 17px; color: var(--ink); } | |
| .proc-sub { font-size: 13px; color: var(--ink-2); margin-top: 6px; min-height: 18px; } | |
| .proc-meta { font-size: 12px; color: var(--muted); margin-top: 8px; } | |
| .proc-hint { font-size: 11.5px; color: var(--muted); margin-top: 16px; } | |
| /* ───────────────────────────── Result cards ──────────────────────────── */ | |
| .results { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } | |
| .result-card { border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; background: var(--white); } | |
| .result-card video { display: block; width: auto; max-width: 100%; max-height: 360px; margin: 0 auto; border-radius: var(--radius-sm); background: transparent; object-fit: contain; } | |
| .result-card .name { font-weight: 700; font-size: 14px; margin: 10px 0 4px; word-break: break-all; } | |
| .result-card .meta { font-size: 12px; color: var(--muted); } | |
| /* clip chips (shuffle/dub upload) */ | |
| .clip-chip { position: relative; border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; width: 130px; } | |
| .clip-chip video { width: 100%; height: 80px; object-fit: cover; background: #000; display: block; } | |
| .clip-chip .x { position: absolute; top: 4px; right: 4px; width: 20px; height: 20px; border-radius: 50%; background: rgba(255,255,255,.92); border: none; display: grid; place-items: center; font-size: 12px; } | |
| .clip-chip .cap { padding: 6px 8px; font-size: 11px; } | |
| .clip-chip .cap .fn { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } | |
| .clip-chip .cap .sz { color: var(--muted); } | |
| /* mode cards (cut) */ | |
| .mode-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; } | |
| .mode-card { border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 12px; text-align: center; transition: all .15s; } | |
| .mode-card:hover { border-color: var(--orange); } | |
| .mode-card.active { border-color: var(--orange); background: var(--orange-tint); box-shadow: 0 0 0 1px var(--orange) inset; } | |
| .mode-card .ic { width: 44px; height: 44px; border-radius: 50%; background: var(--orange-soft); color: var(--orange); display: grid; place-items: center; margin: 0 auto 10px; } | |
| .mode-card .t { font-weight: 700; font-size: 14px; margin-bottom: 4px; } | |
| .mode-card .d { font-size: 11.5px; color: var(--muted); line-height: 1.4; } | |
| /* timeline (cut) */ | |
| .timeline { position: relative; width: 100%; border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; user-select: none; touch-action: none; } | |
| .timeline .strip { display: flex; height: 64px; width: 100%; } | |
| .timeline .strip img, .timeline .strip .ph { flex: 1 1 0; width: 0; min-width: 0; height: 100%; object-fit: cover; } | |
| .timeline .strip .ph { background: linear-gradient(135deg,#e9ded4,#d8c8ba); } | |
| .cutmark { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--orange); cursor: ew-resize; z-index: 3; } | |
| .cutmark .pin { position: absolute; top: -10px; left: -10px; width: 22px; height: 22px; border-radius: 50%; background: var(--orange); color: #fff; font-size: 11px; font-weight: 700; display: grid; place-items: center; } | |
| .timeline-ticks { display: flex; justify-content: space-between; font-size: 11px; color: var(--muted); padding: 6px 4px 0; } | |
| /* home */ | |
| .hero { background: linear-gradient(120deg, var(--orange-tint), #ffe9d6 70%, #ffd9bd); border-radius: 20px; padding: 44px 40px; position: relative; overflow: hidden; margin-bottom: 30px; } | |
| .hero h1 { font-size: 46px; font-weight: 800; color: var(--orange); margin: 0 0 8px; letter-spacing: -1.5px; } | |
| .hero .lead { font-size: 18px; font-weight: 600; color: var(--ink); margin: 0 0 10px; } | |
| .hero p { color: var(--ink-2); max-width: 520px; line-height: 1.6; margin: 0 0 22px; font-size: 14px; } | |
| .tool-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; } | |
| .tool-card { display: flex; gap: 16px; align-items: flex-start; } | |
| .tool-card .ic { width: 52px; height: 52px; border-radius: 50%; background: var(--orange-soft); color: var(--orange); display: grid; place-items: center; flex: 0 0 52px; } | |
| .tool-card .t { font-weight: 700; font-size: 15px; margin-bottom: 4px; } | |
| .tool-card .d { font-size: 13px; color: var(--muted); line-height: 1.5; margin-bottom: 12px; } | |
| .tool-card.soon { opacity: .72; } | |
| .tool-card .soon-tag { font-size: 11px; font-weight: 700; color: var(--orange); background: var(--orange-soft); padding: 2px 8px; border-radius: 10px; } | |
| .muted { color: var(--muted); } | |
| .small { font-size: 12.5px; } | |
| .mt8 { margin-top: 8px; } .mt12 { margin-top: 12px; } .mt16 { margin-top: 16px; } .mt24 { margin-top: 24px; } | |
| .right { margin-left: auto; } | |
| .flex { display: flex; } .between { justify-content: space-between; } .center { align-items: center; } | |
| .gap8 { gap: 8px; } .gap12 { gap: 12px; } | |
| @media (max-width: 1100px) { | |
| .grid-2 { grid-template-columns: 1fr; } | |
| .results, .tool-grid { grid-template-columns: 1fr 1fr; } | |
| .mode-grid { grid-template-columns: 1fr 1fr; } | |
| } | |
| @media (max-width: 720px) { | |
| .sidebar { display: none; } | |
| .results, .tool-grid { grid-template-columns: 1fr; } | |
| .content { padding: 20px; } | |
| } | |
| /* ───────────────────── v2 additions ───────────────────── */ | |
| /* checkbox tick (bật/tắt tính năng) */ | |
| .tick { display: inline-flex; align-items: center; gap: 9px; cursor: pointer; font-size: 13.5px; font-weight: 600; color: var(--ink); } | |
| .tick .box { width: 20px; height: 20px; border-radius: 6px; border: 1.6px solid var(--line); display: grid; place-items: center; background: var(--white); flex: 0 0 20px; } | |
| .tick.on .box { background: var(--orange); border-color: var(--orange); color: #fff; } | |
| .tick .box svg { width: 14px; height: 14px; opacity: 0; } | |
| .tick.on .box svg { opacity: 1; } | |
| .tick.disabled { opacity: .5; } | |
| /* hàng file đã upload + nút xoá */ | |
| .filelist { display: flex; flex-direction: column; gap: 8px; } | |
| .filerow { display: flex; align-items: center; gap: 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 10px 12px; background: var(--white); } | |
| .filerow .fn { font-weight: 600; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } | |
| .filerow .meta { color: var(--muted); font-size: 12px; } | |
| .filerow .x { width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--line); background: var(--white); color: var(--red); display: grid; place-items: center; flex: 0 0 30px; } | |
| .filerow .x:hover { background: var(--red-soft); border-color: var(--red); } | |
| /* Nut X xoa dung chung, dat trong hang co chu nho (vd the ban dich o buoc 3) */ | |
| .btn-x { width: 26px; height: 26px; border-radius: 8px; border: 1px solid var(--line); background: var(--white); color: var(--red); display: grid; place-items: center; font-size: 12px; line-height: 1; cursor: pointer; flex: 0 0 26px; } | |
| .btn-x:hover:not(:disabled) { background: var(--red-soft); border-color: var(--red); } | |
| .btn-x:disabled { opacity: .45; cursor: not-allowed; } | |
| /* tab chọn video đang cắt (nhiều video) */ | |
| .vtabs { display: flex; gap: 8px; flex-wrap: wrap; } | |
| .vtab { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 20px; padding: 7px 14px; font-size: 13px; font-weight: 600; color: var(--ink-2); background: var(--white); } | |
| .vtab.active { background: var(--orange); border-color: var(--orange); color: #fff; } | |
| .vtab .x { font-size: 12px; opacity: .8; } | |
| /* thanh công cụ cắt */ | |
| .cut-toolbar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; } | |
| .cutmark.sel { width: 3px; background: var(--orange-700); box-shadow: 0 0 0 2px rgba(242,111,33,.25); } | |
| .cutmark .pin.sel { background: var(--orange-700); transform: scale(1.12); } | |
| .playhead { position: absolute; top: 0; bottom: 0; width: 2px; background: #111; z-index: 4; pointer-events: none; } | |
| .timeline-wrap { position: relative; } | |
| /* segment card (xào) */ | |
| .seg-card { border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; background: var(--white); margin-bottom: 14px; } | |
| .seg-card .seg-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; } | |
| .seg-card .seg-title { font-weight: 700; font-size: 14px; } | |
| .order-modes { display: inline-flex; border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; } | |
| .order-modes button { border: none; background: var(--white); padding: 7px 13px; font-size: 12.5px; font-weight: 600; color: var(--ink-2); } | |
| .order-modes button.active.lock { background: #2563eb; color: #fff; } | |
| .order-modes button.active.shuffle { background: var(--orange); color: #fff; } | |
| .order-modes button.active.drop { background: var(--red); color: #fff; } | |
| .clip-row { display: flex; gap: 10px; flex-wrap: wrap; } | |
| /* audio chip (xào) */ | |
| .audio-chip { display: flex; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 8px 12px; background: var(--white); } | |
| .audio-chip audio { height: 32px; } | |
| /* voice player (dub tts) */ | |
| .voice-player { border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; background: var(--orange-tint); } | |
| .voice-player audio { width: 100%; margin-top: 10px; } | |
| /* guide / support page */ | |
| .guide { max-width: 860px; } | |
| .guide .g-tool { border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 22px; margin-bottom: 16px; background: var(--white); } | |
| .guide .g-tool h3 { margin: 0 0 6px; font-size: 16px; display: flex; align-items: center; gap: 10px; } | |
| .guide .g-tool h3 .ic { width: 34px; height: 34px; border-radius: 9px; background: var(--orange-soft); color: var(--orange); display: grid; place-items: center; flex: 0 0 34px; } | |
| .guide .g-tool ol { margin: 8px 0 0; padding-left: 20px; line-height: 1.7; font-size: 13.5px; color: var(--ink-2); } | |
| .guide .g-tool ol li { margin-bottom: 4px; } | |
| .support-card { max-width: 560px; border: 1px solid var(--line); border-radius: var(--radius); padding: 30px; text-align: center; background: var(--white); } | |
| .support-card .big-ic { width: 64px; height: 64px; border-radius: 50%; background: var(--orange-soft); color: var(--orange); display: grid; place-items: center; margin: 0 auto 16px; } | |
| .support-card h2 { margin: 0 0 8px; font-size: 20px; } | |
| .support-card p { color: var(--ink-2); line-height: 1.6; margin: 0 0 6px; } | |
| /* nhãn nhỏ */ | |
| .pill { display: inline-block; font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 10px; background: var(--orange-soft); color: var(--orange-700); } | |
| .divider { height: 1px; background: var(--line); margin: 20px 0; } | |
| .slider { width: 100%; accent-color: var(--orange); } | |
| /* ───────────────────── v3 fixes ───────────────────── */ | |
| /* tránh trang bị giãn ngang */ | |
| .content { overflow-x: hidden; } | |
| /* bảng cuộn ngang trong khung, không kéo giãn cả trang */ | |
| .tablewrap { width: 100%; overflow-x: auto; border-radius: var(--radius-sm); } | |
| .tablewrap table.list { min-width: 640px; } | |
| td.url-cell { max-width: 420px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } | |
| td.url-cell a, td.url-cell span { color: var(--ink-2); } | |
| /* hộp lỗi gọn, tự cuộn, không kéo dài trang */ | |
| .errbox { max-height: 200px; overflow: auto; } | |
| .errbox .erow { display: flex; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line-2); } | |
| .errbox .erow .u { flex: 0 0 240px; max-width: 240px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 12.5px; } | |
| .errbox .erow .m { flex: 1; min-width: 0; color: var(--red); font-size: 12px; word-break: break-word; max-height: 48px; overflow: hidden; } | |
| /* banner thông báo cache phiên */ | |
| .cache-note { display: flex; align-items: flex-start; gap: 10px; background: var(--orange-tint); border: 1px solid #f6d9c2; border-radius: var(--radius-sm); padding: 10px 14px; font-size: 12.5px; color: var(--ink-2); margin-bottom: 18px; } | |
| .cache-note .ic { color: var(--orange); flex: 0 0 auto; margin-top: 1px; } | |
| .cache-note .x { margin-left: auto; background: none; border: none; color: var(--muted); font-size: 16px; line-height: 1; cursor: pointer; } | |
| /* chip chọn tool chuyển tiếp (down list) */ | |
| .toolchips { display: inline-flex; gap: 8px; flex-wrap: wrap; } | |
| .toolchip { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); border-radius: 20px; padding: 6px 12px; font-size: 12.5px; font-weight: 600; color: var(--ink-2); background: var(--white); cursor: pointer; } | |
| .toolchip.on { background: var(--orange-soft); border-color: var(--orange); color: var(--orange-700); } | |
| .toolchip .tick-mini { width: 14px; height: 14px; border-radius: 4px; border: 1.4px solid var(--line); display: grid; place-items: center; } | |
| .toolchip.on .tick-mini { background: var(--orange); border-color: var(--orange); color: #fff; } | |
| /* mỗi option lọc là 1 block riêng, không vỡ layout khi bật/tắt */ | |
| .filter-opt { padding: 4px 0; } | |
| .filter-opt + .filter-opt { margin-top: 14px; border-top: 1px solid var(--line-2); padding-top: 14px; } | |
| .filter-opt .sub { padding-left: 30px; margin-top: 8px; } | |
| /* tên file kết quả dài -> rút gọn gọn gàng */ | |
| .result-card .name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } | |
| .panel-title.clip { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } | |
| /* ───────────────────── Chấm điểm kết quả (👍/👎) ───────────────────── */ | |
| /* Hộp chấm điểm phải ĐẬP VÀO MẮT: trước đây nó chỉ là một dòng chữ nhỏ lẫn | |
| trong khối kết quả nên gần như không ai bấm -> chỉ số B3 rỗng. Nay là một | |
| thẻ viền cam có nhịp thở, khó lướt qua — nhưng KHÔNG chặn: ai không muốn | |
| chấm thì cứ làm tiếp, chỉ số méo còn hơn ép người ta bấm bừa. */ | |
| .rate-box { border: 2px solid var(--orange); background: var(--orange-tint); | |
| border-radius: var(--radius); padding: 14px 16px; margin-top: 12px; | |
| display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } | |
| .rate-box.pending { animation: rate-pulse 2.2s ease-in-out infinite; } | |
| @keyframes rate-pulse { | |
| 0%, 100% { box-shadow: 0 0 0 0 rgba(242, 111, 33, .28); } | |
| 50% { box-shadow: 0 0 0 7px rgba(242, 111, 33, 0); } | |
| } | |
| .rate-box .q { font-size: 14.5px; font-weight: 700; color: var(--ink); } | |
| .rate-box .why { font-size: 12px; color: var(--ink-2); width: 100%; margin-top: -4px; } | |
| .rate-box .done { font-size: 14px; font-weight: 700; color: var(--green); } | |
| .rate-btn { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; | |
| border: 2px solid var(--line); background: var(--white); color: var(--ink); | |
| border-radius: 999px; padding: 10px 20px; font-size: 14.5px; font-weight: 700; | |
| font-family: inherit; transition: transform .12s ease, border-color .12s ease, background .12s ease; } | |
| .rate-btn .em { font-size: 19px; line-height: 1; } | |
| .rate-btn:hover { transform: translateY(-1px); } | |
| .rate-btn.up:hover { border-color: var(--green); background: var(--green-soft); color: var(--green); } | |
| .rate-btn.down:hover { border-color: var(--red); background: var(--red-soft); color: var(--red); } | |
| .rate-input { flex: 1 1 240px; min-width: 180px; padding: 9px 12px; font-size: 13.5px; | |
| font-family: inherit; border: 1px solid var(--line); border-radius: var(--radius-sm); | |
| background: var(--white); } | |
| /* ─────────────────── Tab "Quản lý thời lượng" (báo cáo) ─────────────────── */ | |
| /* Dựng theo hai file mẫu chốt form (dashboard_mau + dashboard_full): tiêu đề — | |
| thanh lọc — ba nhóm ô chỉ số — rồi tới các card nội dung. Trước đây mọi thứ | |
| là style nội tuyến rải trong JSX nên các khối lệch nhau mỗi chỗ một kiểu. */ | |
| .rep-top { display: flex; justify-content: space-between; align-items: center; | |
| flex-wrap: wrap; gap: 12px; } | |
| .rep-h1 { font-size: 24px; font-weight: 800; letter-spacing: -.01em; margin: 0; } | |
| .rep-h1 .accent { color: var(--orange); } | |
| .rep-badge { display: inline-block; background: var(--white); border: 1px solid var(--line); | |
| border-radius: 99px; padding: 4px 12px; font-size: 11.5px; color: var(--muted); font-weight: 600; } | |
| .rep-subtitle { color: var(--ink-2); font-size: 13.5px; margin: 4px 0 0; } | |
| /* Thanh lọc: mỗi ô là nhãn nhỏ chồng lên ô nhập, hàng ngang cuộn xuống khi hẹp */ | |
| .rep-filters { display: flex; gap: 14px; flex-wrap: wrap; align-items: flex-end; } | |
| .rep-filters .field { display: flex; flex-direction: column; gap: 5px; } | |
| .rep-filters .field > span { font-size: 12px; color: var(--muted); font-weight: 600; } | |
| /* `input`/`select` toàn cục để width:100% -> kéo về đúng bề rộng nội dung */ | |
| .rep-filters .field select, .rep-filters .field input { | |
| width: auto; min-width: 150px; padding: 9px 11px; font-size: 13.5px; | |
| border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--white); } | |
| .rep-filters .field select { min-width: 210px; cursor: pointer; } | |
| .rep-note { font-size: 12.5px; color: var(--muted); margin: -8px 4px 0; } | |
| .rep-note b { color: var(--ink-2); } | |
| /* Nhóm ô chỉ số */ | |
| .grp { margin-top: 26px; } | |
| .grp:first-child { margin-top: 0; } | |
| .grp-title { font-size: 16px; font-weight: 800; letter-spacing: -.01em; } | |
| .grp-hint { font-size: 12.5px; color: var(--muted); margin-top: 1px; } | |
| .grp-rule { height: 2px; background: var(--line); border-radius: 2px; margin: 9px 0 12px; } | |
| .rep-kpis { display: grid; gap: 13px; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); } | |
| .metric { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); | |
| box-shadow: var(--shadow); padding: 15px 17px; min-height: 96px; min-width: 0; } | |
| .metric .lbl { font-size: 12.5px; color: var(--ink-2); font-weight: 600; margin-bottom: 7px; } | |
| .metric .val { font-size: 27px; font-weight: 800; line-height: 1.1; letter-spacing: -.02em; } | |
| .metric .val.orange { color: var(--orange); } | |
| .metric .val.green { color: var(--green); } | |
| .metric .val.muted { color: var(--muted); } | |
| /* Ô mà "giá trị" là TÊN TOOL chứ không phải con số -> cỡ nhỏ hơn, cho xuống dòng. */ | |
| .metric .val.text { font-size: 17px; line-height: 1.25; letter-spacing: 0; } | |
| .metric .sub { font-size: 12px; color: var(--muted); margin-top: 5px; } | |
| .metric .sub.warn { color: var(--orange); } | |
| /* Ô "Hài lòng": chấm chạy trên dải đỏ→vàng→xanh, nhìn phát biết đang ở đâu */ | |
| .sat { display: flex; align-items: center; gap: 10px; margin-top: 4px; } | |
| .sat-val { font-size: 22px; font-weight: 800; white-space: nowrap; } | |
| /* Thang điểm đi kèm ngay cạnh số, cỡ nhỏ — đọc là "3.3 trên 5" mà không | |
| chiếm chỗ của con số chính. */ | |
| .sat-val i { font-size: 12px; font-weight: 600; font-style: normal; color: var(--muted); } | |
| .sat-track { flex: 1; height: 8px; border-radius: 99px; position: relative; | |
| background: linear-gradient(90deg, #e56b6b, #e8a13a, #4fb477); } | |
| .sat-dot { width: 14px; height: 14px; border-radius: 50%; background: var(--white); | |
| border: 2px solid var(--ink); position: absolute; top: 50%; transform: translate(-50%, -50%); } | |
| /* Tiêu đề mỗi card nội dung */ | |
| .sec-title { display: flex; align-items: center; gap: 9px; font-size: 19px; font-weight: 800; | |
| letter-spacing: -.01em; margin: 0 0 18px; } | |
| .sec-title .em { font-size: 19px; } | |
| .sec-title .btn { margin-left: auto; } | |
| /* Thanh ngang trong "Công cụ dùng nhiều nhất" / "Sản phẩm làm ra" */ | |
| .barrow { margin-bottom: 16px; } | |
| .barrow:last-child { margin-bottom: 0; } | |
| .bar-head { display: flex; justify-content: space-between; align-items: baseline; | |
| gap: 12px; margin-bottom: 7px; } | |
| .bar-head .n { font-size: 15px; font-weight: 600; overflow: hidden; | |
| text-overflow: ellipsis; white-space: nowrap; } | |
| .bar-head .v { font-size: 14px; color: var(--ink-2); font-weight: 600; white-space: nowrap; } | |
| .bar-head .v .dim { color: var(--muted); font-weight: 500; font-size: 13px; } | |
| .bar-track { height: 12px; border-radius: 99px; background: var(--orange-soft); } | |
| .bar-fill { height: 100%; border-radius: 99px; background: var(--orange); } | |
| .bar-fill.green { background: var(--green); } | |
| /* Phễu "bỏ dở ở bước nào" trong bảng chi tiết theo tool */ | |
| .funnel { width: 150px; height: 8px; border-radius: 99px; background: var(--orange-soft); | |
| display: flex; overflow: hidden; } | |
| .funnel-lbl { font-size: 12px; color: var(--muted); margin-top: 6px; } | |
| /* Bảng báo cáo: sọc nhẹ, dòng sáng lên khi rê chuột, số canh phải */ | |
| table.list.rep th { position: sticky; top: 0; background: var(--white); z-index: 1; | |
| white-space: nowrap; vertical-align: bottom; } | |
| table.list.rep tbody tr:nth-child(even) { background: #fffdfb; } | |
| table.list.rep tbody tr:hover { background: var(--orange-tint); } | |
| table.list.rep td.num, table.list.rep th.num { text-align: right; font-variant-numeric: tabular-nums; } | |
| table.list.rep td.mid, table.list.rep th.mid { text-align: center; } | |
| table.list.rep td.name { font-weight: 700; min-width: 170px; } | |
| table.list.rep td.big { font-weight: 800; } | |
| /* Chip tool hay dùng trong bảng nhân sự */ | |
| .usechip { display: inline-block; background: var(--orange-soft); color: var(--orange-700); | |
| border-radius: 999px; padding: 2px 9px; font-size: 11.5px; font-weight: 600; | |
| margin: 2px 4px 2px 0; white-space: nowrap; } | |
| .idchip { display: inline-block; background: var(--line-2); color: var(--muted); | |
| border-radius: 5px; padding: 1px 6px; font-size: 11px; font-weight: 600; margin-left: 6px; } | |
| /* Hộp "cách tính chỉ số" — mở ra khi cần cãi nhau về con số */ | |
| details.formula { border: 1px dashed var(--line); border-radius: var(--radius-sm); | |
| padding: 12px 16px; background: var(--orange-tint); } | |
| details.formula summary { cursor: pointer; font-weight: 700; font-size: 13px; color: var(--ink-2); } | |
| details.formula ul { margin: 10px 0 0; padding-left: 18px; color: var(--ink-2); | |
| font-size: 12.5px; line-height: 1.8; } | |
| details.formula code { background: var(--white); border: 1px solid var(--line); | |
| border-radius: 5px; padding: 0 5px; font-size: 12px; } | |