/* Tối ưu điện thoại (myvideo) — nạp SAU style.css. Mọi luật đặt trong @media khổ hẹp; desktop không đổi. */

/* ==========================================================================
   MY VIDEO — ĐIỆN THOẠI (≤760px)
   Mọi selector bắt đầu bằng #page-myvideo (độ ưu tiên ID) nên thắng các luật
   chế độ thẻ chung của style.css mà không cần !important.
   ========================================================================== */
@media (max-width:760px){

  /* ---------- 1. Panel "Worker của bạn" ---------- */
  #page-myvideo .worker-panel .panel-head{gap:10px;margin-bottom:12px}
  #page-myvideo .worker-panel .panel-head h3{flex:1 1 100%;min-width:0;font-size:15px;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  /* select (admin) một hàng riêng, hai nút chia đôi hàng dưới */
  #page-myvideo .worker-panel .panel-head .row-actions{flex:1 1 100%;display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;justify-content:stretch}
  #page-myvideo .worker-panel .mv-scope{grid-column:1/-1;width:100%;min-width:0;max-width:none;
    min-height:44px;font-size:16px;padding:8px 34px 8px 12px;border-radius:10px}
  #page-myvideo .worker-panel .row-actions .btn{width:100%;min-width:0;min-height:42px;
    padding:8px 10px;font-size:13.5px;border-radius:10px}

  /* 7 ô số liệu -> "Trạng thái" thành một dải ngang, 6 ô còn lại lưới 3 cột nhỏ */
  #page-myvideo .worker-grid{grid-template-columns:repeat(auto-fit,minmax(88px,1fr));gap:8px}
  #page-myvideo .wcell{min-width:0;padding:8px 10px;border-radius:10px;
    display:flex;flex-direction:column;justify-content:space-between;gap:3px}
  #page-myvideo .wcell .k{margin:0;font-size:11.5px;line-height:1.3;color:var(--muted)}
  #page-myvideo .wcell .v{font-size:16px;line-height:1.25;gap:2px 4px;font-variant-numeric:tabular-nums}
  #page-myvideo .wcell .v b,
  #page-myvideo .wcell .v .credit-chip,
  #page-myvideo .wcell .v .err-txt{font-family:var(--font);font-size:16px;font-weight:700}
  #page-myvideo .wcell .v .muted{font-size:12px}
  #page-myvideo .wcell:first-child{grid-column:1/-1;flex-direction:row;align-items:center;
    justify-content:space-between;gap:10px;padding:7px 10px}
  #page-myvideo .wcell:first-child .badge{font-size:12px;padding:4px 10px}

  /* dải hàng đợi: cuộn ngang 1 hàng, mờ mép phải báo "còn nữa" */
  #page-myvideo .queue-strip{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;
    overscroll-behavior-x:contain;scrollbar-width:none;gap:6px;margin-top:12px;padding:12px 28px 2px 0;
    -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);
    mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent)}
  #page-myvideo .queue-strip::-webkit-scrollbar{display:none}
  #page-myvideo .queue-strip>*{flex:0 0 auto}
  #page-myvideo .queue-strip .qlabel{white-space:nowrap}
  #page-myvideo .qchip{min-height:30px;font-size:12px;padding:5px 9px}

  /* ---------- 2. Thanh lọc ---------- */
  #page-myvideo .toolbar{gap:8px;margin-bottom:8px}
  /* 7 tab thành lưới đều (3 cột trên điện thoại) — không còn cắt chữ "Xon" */
  #page-myvideo #mv-filter{display:grid;grid-template-columns:repeat(auto-fit,minmax(100px,1fr));
    width:100%;gap:4px;overflow:visible;-webkit-mask-image:none;mask-image:none}
  #page-myvideo #mv-filter .seg-btn{justify-content:center;min-width:0;min-height:38px;
    padding:6px 4px;font-size:13px;white-space:nowrap}
  #page-myvideo #mv-filter .seg-n{font-size:12px}
  /* lọc cookie + ô tìm: chung một hàng khi đủ chỗ (≥ ~420px), không thì mỗi thứ một hàng */
  #page-myvideo #mv-cookie-filter{flex:1 1 200px;width:auto;min-width:0;max-width:none;
    min-height:44px;font-size:16px;padding:8px 34px 8px 12px;border-radius:10px}
  #page-myvideo #mv-search{flex:1 1 200px;min-width:0;max-width:none;min-height:44px;
    font-size:16px;text-overflow:ellipsis}
  /* hai nút thao tác danh sách: chia đôi hàng */
  #page-myvideo .toolbar-sub{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;
    margin:0 0 12px;overflow:visible}
  #page-myvideo .toolbar-sub .spacer{display:none}
  #page-myvideo .toolbar-sub .btn{width:100%;min-width:0;min-height:40px;padding:8px 10px;
    font-size:13px;border-radius:10px}

  /* ---------- 3. Danh sách: bỏ khung panel bọc ngoài, thẻ trải hết bề ngang ---------- */
  #page-myvideo > .panel:not(.worker-panel){background:transparent;border:0;padding:0;border-radius:0;box-shadow:none}

  /* ---------- 4. Thẻ job: lưới gọn thay cho 8 hàng nhãn/giá trị ----------
     Hàng 1: STT | cookie          Hàng 4: tiến độ + thời gian
     Hàng 2: xem trước + prompt    Hàng 5: tải về
     Hàng 3: trạng thái | credit   Hàng 6: cụm nút thao tác (chia đều) */
  #page-myvideo #mv-body tr[data-key]{display:grid;grid-template-columns:auto minmax(0,1fr) auto;
    column-gap:10px;row-gap:0;align-items:center;padding:12px;margin:0 0 10px;
    background:var(--bg2);border:1px solid var(--line);border-radius:12px}
  #page-myvideo #mv-body tr[data-key]:last-child{margin-bottom:0}
  #page-myvideo #mv-body tr[data-key]>td{display:block;position:static;min-width:0;min-height:0;
    width:auto;max-width:none;padding:0;border:0;text-align:left;white-space:normal}
  #page-myvideo #mv-body tr[data-key]>td::before{display:none}
  #page-myvideo #mv-body tr.row-running{border-color:rgba(255,178,62,.38);
    background:linear-gradient(rgba(255,178,62,.07),rgba(255,178,62,.07)),var(--bg2)}

  /* Hàng 1 — STT + cookie + Tag (18/09: thêm cột Tag là ô thứ 2 -> các ô sau dời 1 số) */
  #page-myvideo #mv-body tr[data-key]>td:nth-child(1){grid-column:1;grid-row:1;align-self:start}
  #page-myvideo #mv-body .seq-badge{width:auto;min-width:28px;height:28px;padding:0 6px;font-size:12.5px;
    font-variant-numeric:tabular-nums}
  #page-myvideo #mv-body tr[data-key]>td:nth-child(3){grid-column:2;grid-row:1}
  #page-myvideo #mv-body tr[data-key]>td.tag-cell{grid-column:3;grid-row:1;justify-self:end;align-self:center;max-width:36vw}
  #page-myvideo #mv-body .mv-tag{min-height:32px;padding:5px 9px;font-size:13px;border-radius:8px}
  #page-myvideo #mv-body .mv-tag-empty{opacity:.7}
  #page-myvideo #mv-body .mv-tag-input{width:36vw;min-height:36px;font-size:16px}
  #page-myvideo #mv-body .u-cell{align-items:center;gap:8px;min-width:0}
  #page-myvideo #mv-body .u-cell .u-dot{display:none}
  #page-myvideo #mv-body .ck-ident{flex:1 1 auto;min-width:0;padding-left:8px}
  #page-myvideo #mv-body .ck-ident>b{display:block;font-size:13.5px;line-height:1.35;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;overflow-wrap:normal;word-break:normal}
  #page-myvideo #mv-body .ck-ident>b.ck-wait{white-space:normal}
  #page-myvideo #mv-body .ck-sub{display:flex;align-items:center;gap:6px;min-width:0;margin-top:3px;flex-wrap:nowrap}
  #page-myvideo #mv-body .ck-sub .ck-acc{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;
    white-space:nowrap;overflow-wrap:normal;word-break:normal;font-size:12px}
  #page-myvideo #mv-body .ck-sub .badge,
  #page-myvideo #mv-body .ck-sub .ck-cr{flex:0 0 auto}

  /* Hàng 2 — xem trước + prompt (đường kẻ tách phần đầu thẻ) */
  #page-myvideo #mv-body tr[data-key]>td.vid-cell{grid-column:1/-1;grid-row:2;margin-top:10px;
    padding-top:10px;border-top:1px solid var(--line)}
  #page-myvideo #mv-body .vid-row{align-items:flex-start;gap:12px}
  #page-myvideo #mv-body .vid-row .vthumb{width:54px;height:72px}
  #page-myvideo #mv-body .vid-title{font-size:14px;line-height:1.4;-webkit-line-clamp:3;margin-bottom:4px;
    overflow-wrap:anywhere}
  #page-myvideo #mv-body .vid-empty{font-size:13.5px}
  #page-myvideo #mv-body .vid-meta{justify-content:space-between;gap:8px;margin-top:2px}
  #page-myvideo #mv-body .vid-meta .mono{flex:1 1 auto;min-width:0;font-size:12px;white-space:nowrap;
    overflow:hidden;text-overflow:ellipsis;overflow-wrap:normal;word-break:normal}
  #page-myvideo #mv-body .vid-edit{min-width:40px;min-height:34px;padding:4px 10px;font-size:14px;opacity:1}
  /* cookie chưa tạo video: bỏ khung ảnh trống, chữ + nút ✎ nằm một hàng */
  #page-myvideo #mv-body tr.row-idle .vthumb-empty{display:none}
  #page-myvideo #mv-body tr.row-idle .vid-body{display:flex;align-items:center;justify-content:space-between;gap:10px}
  #page-myvideo #mv-body tr.row-idle .vid-body .vid-meta{margin:0}

  /* Hàng 3 — trạng thái (+ ghi chú) | credit */
  #page-myvideo #mv-body tr[data-key]>td.st-cell{grid-column:1/3;grid-row:3;margin-top:10px;
    display:flex;align-items:center;flex-wrap:wrap;gap:4px 8px;line-height:1.35}
  #page-myvideo #mv-body td.st-cell .badge{font-size:12px;padding:4px 10px}
  #page-myvideo #mv-body td.st-cell .prog-note{margin:0;min-width:0;font-size:12.5px}
  #page-myvideo #mv-body td.st-cell .err-txt{font-family:var(--font);font-size:12.5px;line-height:1.4;overflow-wrap:anywhere}
  #page-myvideo #mv-body tr[data-key]>td:nth-child(7){grid-column:3;grid-row:3;margin-top:10px;
    justify-self:end;align-self:start;min-height:27px;display:flex;align-items:center;gap:6px;white-space:nowrap}
  #page-myvideo #mv-body tr[data-key]>td:nth-child(7)::before{display:inline;position:static;width:auto;
    content:attr(data-label);font-size:11px;font-weight:600;letter-spacing:.4px;text-transform:uppercase;
    color:var(--muted2);font-family:var(--font)}
  #page-myvideo #mv-body tr[data-key]>td:nth-child(7) .credit-chip{font-size:14px}

  /* Hàng 4 — thanh tiến độ | % | thời gian chạy */
  #page-myvideo #mv-body tr[data-key]>td:nth-child(5){grid-column:1/-1;grid-row:4;margin-top:10px;
    display:flex;align-items:center;gap:10px}
  #page-myvideo #mv-body tr[data-key]>td:nth-child(5) .prog-row{flex:1 1 auto;min-width:0;gap:8px}
  #page-myvideo #mv-body tr[data-key]>td:nth-child(5) .prog{flex:1 1 auto;min-width:0;height:6px}
  #page-myvideo #mv-body tr[data-key]>td:nth-child(5) .pct{min-width:38px;text-align:right;font-size:12px;
    font-variant-numeric:tabular-nums}
  #page-myvideo #mv-body tr[data-key]>td:nth-child(5) .prog-note{flex:0 0 auto;margin:0;font-size:12px}
  /* chưa tạo / đang chờ: thanh 0% không nói gì — bỏ cho thẻ gọn */
  #page-myvideo #mv-body tr.row-idle>td:nth-child(5),
  #page-myvideo #mv-body tr:is(.row-queued,.row-failed,.row-cancelled)>td:nth-child(5):not(:has(.prog-note)){display:none}

  /* Hàng 5 — tải về: nút cao 40px, nhiều biến thể thì chia cột */
  #page-myvideo #mv-body tr[data-key]>td.dl-cell{grid-column:1/-1;grid-row:5;margin-top:10px}
  #page-myvideo #mv-body td.dl-cell .dl-list{max-width:none;display:grid;
    grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:8px}
  #page-myvideo #mv-body td.dl-cell .dl-btn{min-height:40px;padding:8px 12px;font-size:13px;border-radius:10px}
  #page-myvideo #mv-body td.dl-cell .dl-btn .dl-size{font-size:11px}
  /* chưa có video (dấu "—"): bỏ hẳn hàng; job xong mà không có file thì giữ lại, kèm nhãn */
  #page-myvideo #mv-body tr:not(.row-done)>td.dl-cell:has(>.dl-none){display:none}
  #page-myvideo #mv-body td.dl-cell .dl-none{padding:0;font-size:12.5px}
  #page-myvideo #mv-body tr[data-key]>td.dl-cell:has(>.dl-none)::before{display:inline;position:static;
    width:auto;content:attr(data-label) " · ";font-size:11px;font-weight:600;letter-spacing:.4px;
    text-transform:uppercase;color:var(--muted2);font-family:var(--font)}

  /* Hàng 6 — cụm nút: chia đều bề ngang, cao 40px */
  #page-myvideo #mv-body tr[data-key]>td:nth-child(9){grid-column:1/-1;grid-row:6;margin-top:12px;
    padding-top:12px;border-top:1px solid var(--line)}
  #page-myvideo #mv-body td:nth-child(9) .row-ctrl{display:grid;grid-auto-flow:column;
    grid-auto-columns:minmax(0,1fr);gap:8px;justify-content:stretch}
  #page-myvideo #mv-body td:nth-child(9) .row-ctrl .btn-icon{width:100%;min-width:0;min-height:40px;
    padding:6px 0;font-size:15px;border-radius:10px}
  /* cookie chưa tạo: cả cụm đều mờ, không bấm được gì -> bỏ hẳn hàng nút */
  #page-myvideo #mv-body tr.row-idle>td:nth-child(9):not(:has(a,button:not([disabled]))){display:none}

  /* ---------- 5. Ô sửa ✎ ngay trong thẻ ---------- */
  #page-myvideo #mv-body tr.row-editing>td.vid-cell{min-width:0}
  #page-myvideo .vid-edit-box .ve-prompt{font-size:16px;line-height:1.45;padding:9px 11px;min-height:118px}
  #page-myvideo .vid-edit-box .qa-opts{margin-top:8px}
  #page-myvideo .ve-act{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
  #page-myvideo .ve-act .btn{flex:1 1 auto;min-height:42px;padding:8px 12px;font-size:13.5px;border-radius:10px}
  #page-myvideo .ve-cost{margin-top:8px;font-size:12.5px}
  #page-myvideo .ve-hint{font-size:12px}

  /* Bộ chọn tỉ lệ / chất lượng / độ dài: 3 cột đều (dùng chung cho hàng ＋ và ô sửa) */
  #page-myvideo .qa-opts{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1.3fr);
    gap:8px;align-items:center}
  #page-myvideo .qa-opts>*{width:100%;min-width:0}
  #page-myvideo .qa-mini{width:100%;min-width:0;min-height:42px;font-size:16px;padding:6px 26px 6px 10px;
    border-radius:10px;background-position:right 9px center}
  #page-myvideo .qa-mini.qa-num{padding:6px 4px 6px 8px;text-align:left}
  #page-myvideo .qa-lbl{display:flex;align-items:center;justify-content:flex-start;gap:5px;margin:0;
    font-size:12px;white-space:nowrap}
  #page-myvideo .qa-lbl .qa-mini{flex:1 1 auto;width:auto;min-width:0}

  /* ---------- 6. Hàng nhập nhanh ＋ ----------
     Hàng 1: ＋ | chọn cookie · Hàng 2: Tag · Hàng 3: prompt + tuỳ chọn + nút · Hàng 4: gợi ý + credit */
  #page-myvideo #mv-quickadd .qa-row{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:10px;
    align-items:center;padding:12px;margin:0 0 12px;border:1px solid var(--brand);border-radius:12px;
    background:linear-gradient(160deg,var(--brand-soft),transparent 70%)}
  #page-myvideo #mv-quickadd .qa-row>td{display:block;position:static;min-width:0;min-height:0;width:auto;
    max-width:none;padding:0;border:0}
  #page-myvideo #mv-quickadd .qa-row>td::before{display:none}
  #page-myvideo #mv-quickadd .qa-cell-plus{grid-column:1;grid-row:1}
  #page-myvideo #mv-quickadd .qa-cell-plus .qa-plus{width:44px;min-width:44px;height:44px;padding:0;
    border-radius:10px;font-size:18px}
  /* 18/09: thêm ô Tag là ô thứ 2 của hàng ＋ -> chọn cookie thành ô thứ 3; Tag một hàng riêng ngay trên prompt */
  #page-myvideo #mv-quickadd .qa-row>td:nth-child(3){grid-column:2;grid-row:1}
  #page-myvideo #mv-quickadd .qa-row>td.qa-cell-tag{grid-column:1/-1;grid-row:2;margin-top:8px}
  #page-myvideo #qa-tag{width:100%;min-width:0;min-height:44px;font-size:16px;padding:8px 12px;border-radius:10px}
  #page-myvideo #qa-cookie{width:100%;min-width:0;max-width:none;min-height:44px;font-size:16px;
    padding:8px 34px 8px 12px;border-radius:10px}
  #page-myvideo #mv-quickadd .qa-row>td.qa-prompt-cell{grid-column:1/-1;grid-row:3;margin-top:8px;min-width:0;
    display:flex;flex-direction:column;gap:8px}
  #page-myvideo #mv-quickadd .qa-group{display:contents}
  #page-myvideo #qa-prompt{order:1;width:100%;min-width:0;min-height:44px;font-size:16px;padding:10px 12px;
    border-radius:10px;text-overflow:ellipsis}
  #page-myvideo #mv-quickadd .qa-opts{order:2;margin:0}
  #page-myvideo #qa-add{order:3;width:100%;min-height:44px;font-size:14px;border-radius:10px}
  #page-myvideo #mv-quickadd .qa-cell-hint{grid-column:1/-1;grid-row:4;margin-top:10px}
  #page-myvideo #mv-quickadd .qa-row>td.qa-cell-pad{display:none}
  #page-myvideo #mv-quickadd .qa-foot{display:flex;align-items:flex-start;justify-content:space-between;
    gap:12px;flex-wrap:nowrap}
  #page-myvideo #mv-quickadd .qa-hint{flex:1 1 auto;min-width:0;max-width:none;font-size:12.5px;line-height:1.45}
  #page-myvideo #mv-quickadd .qa-foot .credit-chip{flex:0 0 auto;font-size:15px;line-height:1.3}

  /* ---------- 7. Phân trang ---------- */
  #page-myvideo #mv-pager{justify-content:center;gap:10px 16px;margin-top:12px;padding-top:12px;font-size:13px}
  #page-myvideo #mv-pager .pager-btns{flex:1 1 100%;margin-left:0;justify-content:center;gap:6px}
  #page-myvideo #mv-pager .pg-btn{min-width:40px;height:40px;font-size:14px;border-radius:10px}
  #page-myvideo #mv-pager .pager-size select{width:auto;min-height:40px;font-size:16px;padding:6px 30px 6px 10px}
}

/* Máy hẹp (≤380px): nhãn ô số liệu vừa một dòng ("Trong hàng đợi", "Credit đã dùng") */
@media (max-width:380px){
  #page-myvideo .worker-grid{gap:6px}
  #page-myvideo .wcell{padding:8px}
  #page-myvideo .wcell .k{font-size:11px;letter-spacing:-.1px}
}

/* Bấm vào ô xem trước -> modal xem to: khung video theo đúng tỉ lệ, không viền đen hai bên */
@media (max-width:760px){
  #modal .vprev-big{width:auto;height:auto;max-width:100%;max-height:60vh;max-height:60dvh;margin:0 auto}
  #modal .vprev-meta .vid-title{font-size:14px}
  #modal .vprev-meta .mono{overflow-wrap:anywhere}
}