:root {
  --bg:#0f1115; --card:#f2f2f2; --line:#eeeeee; --txt:#e6e9ef; --mut:#8b93a4;
  --acc:#4f8cff; --acc2:#1f2630; --warn:#e0a23c; --ok:#46c08a;
}
* { box-sizing:border-box; }
.wrap {    max-width: 95%; margin:32px auto; padding:0 16px; }
.card { background:var(--card); border:1px solid var(--line); border-radius:14px; padding:20px; margin-bottom:16px; }
h1 { font-size:2rem; margin:0 0 4px; }
.sub { color:var(--mut); font-size:13px; margin:0 0 20px; }
label { display:block; font-size:13px; color:#000; margin:18px 0 8px; }
input[type=file] {
  width:100%; padding:0; background:none; border:0; color:var(--mut);
  font-size:12px; cursor:pointer;
}
input[type=file]::file-selector-button,
input[type=file]::-webkit-file-upload-button {
  display:block; width:100%; margin:0 0 8px; padding:14px; border:0; border-radius:10px;
  background:var(--acc); color:#fff; font-size:15px; font-weight:600; cursor:pointer; transition:.15s;
}
input[type=file]::file-selector-button:hover { filter:brightness(1.12); }
input[type=number], input[type=text], select {
  width:100%; padding:9px; background:#e3e3e3; border:1px solid var(--line); border-radius:8px; color:#000000;
}
.row { display:flex; gap:12px; }
.row > .fld { flex:1; }
video { max-width:70%;     width: 60%; border-radius:10px; margin-top:12px; }
.src-info { font-size:13px; color:#000; margin-top:10px; }
.src-info b { color:#000000; }

.seg { display:flex; gap:8px; flex-wrap:wrap; }
.seg button { flex:1; min-width:64px; padding:9px 4px; background:#ebeaea; border:1px solid #dcd9d9; border-radius:9px; color:#080808; font-size:14px; cursor:pointer; transition:.15s; }
.seg button.active { background:var(--acc); border-color:var(--acc); color:#fff; font-weight:600; }
.seg button:disabled { opacity:.3; cursor:not-allowed; }

.badge { display:inline-block; margin-top:12px; padding:5px 11px; border-radius:99px; font-size:12px; font-weight:600; }
.badge.copy { background:rgba(70,192,138,.15); color:var(--ok); border:1px solid rgba(70,192,138,.3); }
.badge.reencode { background:rgba(224,162,60,.15); color:var(--warn); border:1px solid rgba(224,162,60,.3); }

.convert { width:100%; padding:13px; margin-top:22px; border:0; border-radius:10px; background:var(--acc); color:#fff; font-size:15px; font-weight:600; cursor:pointer; }
.convert:disabled { opacity:.5; cursor:not-allowed; }
.bar { height:8px; background:#ffffff; border-radius:99px; overflow:hidden; margin-top:14px;border: 1px solid #ccc; }
.bar > i { display:block; height:100%; width:0; background:var(--acc); transition:width .2s; }
.log { font-size:12px; color:var(--mut); margin-top:10px; min-height:18px; white-space:pre-wrap; }
.log.mono { font-family:ui-monospace,Menlo,Consolas,monospace; max-height:340px; overflow:auto; background:#0c0e12; padding:10px; border-radius:8px; }
a.dl { display:none; margin-top:14px; text-align:center; padding:11px; background:#08b890; border-radius:10px; color:#fff; text-decoration:none; font-size:14px; }
.slider { position:relative; height:36px; margin-top:6px; }
.slider .track { position:absolute; top:50%; left:0; right:0; height:6px; transform:translateY(-50%); background:#0c0e12; border-radius:99px; }
.slider .range { position:absolute; top:50%; height:6px; transform:translateY(-50%); background:var(--acc); border-radius:99px; }
.slider input[type=range] { position:absolute; top:0; left:0; width:100%; height:36px; margin:0; background:none; pointer-events:none; -webkit-appearance:none; appearance:none; }
.slider input[type=range]::-webkit-slider-thumb { -webkit-appearance:none; pointer-events:auto; width:18px; height:18px; border-radius:50%; background:#fff; border:3px solid var(--acc); cursor:pointer; box-shadow:0 1px 4px rgba(0,0,0,.4); }
.slider input[type=range]::-moz-range-thumb { pointer-events:auto; width:18px; height:18px; border-radius:50%; background:#fff; border:3px solid var(--acc); cursor:pointer; }
.dur-info { font-size:12px; color:var(--mut); margin-top:6px; }
/* ẩn input thật nhưng vẫn cho label[for] mở được hộp thoại (mọi trình duyệt) */
input[type=file].enhanced {
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); border:0;
}
.file-wrap { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.file-btn { display:inline-block; padding:12px 18px; border-radius:10px; background:var(--acc); color:#fff; font-size:14px; font-weight:600; cursor:pointer; transition:.15s; }
.file-btn:hover { filter:brightness(1.12); }
.file-name { font-size:13px; color:var(--mut); }
.tool_title{font-weight: 600;
    font-size: 42px;
    line-height: 52px;
    color: #33333b;
    text-align: center;}