/* Tối ưu điện thoại (cookies) — nạp SAU style.css + shell.css. Mọi luật đặt trong @media khổ hẹp; desktop không đổi.
   Phạm vi: #page-cookies (thanh công cụ, thẻ cookie, phân trang) + nội dung modal
   Thêm / Sửa cookie, Nhập cookie, Lịch sử nhập (#modal + id/class riêng của các form đó). */

@media (max-width:760px){

  #page-cookies{
    --ck-ic-bolt:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13 2 3 14h9l-1 8 10-12h-9l1-8z'/%3E%3C/svg%3E");
    --ck-ic-video:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m22 8-6 4 6 4V8z'/%3E%3Crect x='2' y='6' width='14' height='12' rx='2'/%3E%3C/svg%3E");
    --ck-ic-clock:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9.5'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E");
    --ck-ic-search:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a97b2' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E");
  }

  /* =====================================================================
     THANH CÔNG CỤ: lưới 2 cột đều — [＋ Thêm][📥 Nhập] / [Kiểm tra đã chọn][Kiểm tra tất cả]
     / [ô tìm kiếm] · dải chip lọc cuộn ngang tràn mép · 4 nút phụ lưới 2×2
     ===================================================================== */
  #page-cookies > .toolbar{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;
    margin:0 0 12px;flex-wrap:nowrap}
  #page-cookies > .toolbar > .spacer{display:none}
  #page-cookies > .toolbar > .btn{width:100%;min-width:0;min-height:44px;padding:9px 10px;font-size:14px;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:none}
  /* User thường không có "Kiểm tra tất cả" -> nút còn lại trải cả hàng */
  body:not(.is-admin) #page-cookies #btn-check-sel{grid-column:1/-1}
  #page-cookies #cookie-search{grid-column:1/-1;width:100%;max-width:none;min-height:44px;
    padding-left:40px;background-color:var(--bg2);background-image:var(--ck-ic-search);
    background-repeat:no-repeat;background-position:13px center;background-size:18px 18px}

  #page-cookies > .toolbar-sub{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:0 0 14px;
    overflow:visible}
  #page-cookies > .toolbar-sub > .filter-chips{grid-column:1/-1;min-width:0;gap:6px;
    margin:0 calc(-1 * var(--padx)) 2px;padding:0 var(--padx) 2px;scroll-padding-inline:var(--padx)}
  #page-cookies > .toolbar-sub > .btn{min-height:40px;padding:8px 10px;font-size:13px}
  #page-cookies .fchip{min-height:38px;padding:7px 12px}
  #page-cookies .fc-n{font-variant-numeric:tabular-nums}

  /* =====================================================================
     KHUNG DANH SÁCH: bỏ lớp panel lồng — thẻ nằm thẳng trên nền trang,
     mỗi thẻ tự mang nền panel (đỡ "thẻ trong khung trong trang").
     ===================================================================== */
  #page-cookies > .panel{background:none;border:0;padding:0;border-radius:0;box-shadow:none}

  /* Ô "chọn cả trang" vốn nằm ở <thead> (bị ẩn ở chế độ thẻ) -> hiện lại thành
     một dải nhỏ trên danh sách, thẳng hàng với ô tick của từng thẻ. */
  #tbl-cookies thead{display:block;margin:0 0 8px}
  #tbl-cookies thead tr{display:flex;align-items:center;background:none;border:0;border-radius:0;
    padding:0;margin:0;box-shadow:none}
  #tbl-cookies thead th{display:none}
  #tbl-cookies thead th.col-check{display:flex;align-items:center;gap:10px;width:auto;min-height:40px;
    padding:0 0 0 13px;border:0;text-transform:none;letter-spacing:0;font-size:13px;font-weight:500;
    color:var(--muted);white-space:nowrap}
  #tbl-cookies thead th.col-check::after{content:"Chọn cả trang này"}
  #tbl-cookies:has(.empty) thead{display:none}

  /* =====================================================================
     THẺ COOKIE — 3 hàng:
       1) ☐  tên cookie (1 dòng, "…")  [JSON]              ● LIVE
       2) #STT  tài khoản (gói)                        👤 user (admin)
       ── vạch ngăn ──
       3) ⚡ credit / ⏳ đồng hồ   🎬 video   🕒 kiểm tra     [↻][✎][🗑]
     Dùng flex + order; 2 giả phần tử ::before/::after của <tr> làm chỗ ngắt hàng.
     ===================================================================== */
  #tbl-cookies tbody{display:block}
  #tbl-cookies tbody tr{display:flex;flex-wrap:wrap;align-items:flex-start;column-gap:10px;row-gap:0;
    position:relative;background:var(--panel);border:1px solid var(--line);border-radius:14px;
    padding:12px 12px 10px;margin:0 0 8px;opacity:1}
  #tbl-cookies tbody tr:hover{background:var(--panel)}
  #tbl-cookies tbody tr:last-child{margin-bottom:0}
  #tbl-cookies tbody tr::before{content:"";order:2;flex:0 0 100%;height:0}
  #tbl-cookies tbody tr::after{content:"";order:6;flex:0 0 100%;height:1px;background:var(--line);margin:10px 0 6px}

  #tbl-cookies tbody td{display:block;position:static;min-width:0;min-height:0;width:auto;max-width:none;
    padding:0;border:0;text-align:left;line-height:20px;overflow-wrap:normal;word-break:normal}
  #tbl-cookies tbody td::before{content:none;display:none}

  /* hàng 1 */
  #tbl-cookies tbody td.col-check{order:1;flex:0 0 28px;height:24px;display:flex;align-items:center}
  #tbl-cookies tbody td.ck-c-name{order:1;flex:1 1 0;min-width:0}
  #tbl-cookies tbody td.ck-c-st{order:1;flex:0 0 auto;padding-top:1px}
  /* hàng 2 */
  #tbl-cookies tbody td.ck-c-stt{order:3;flex:0 0 28px;margin-top:6px}
  #tbl-cookies tbody td.ck-c-acc{order:4;flex:1 1 0;min-width:0;margin-top:6px;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px;color:var(--txt)}
  #tbl-cookies tbody td.ck-c-user{order:5;flex:0 1 auto;max-width:48%;min-width:0;margin-top:6px}
  /* hàng 3 */
  #tbl-cookies tbody td:is(.ck-c-cr,.ck-c-vid,.ck-c-chk){order:7;flex:0 0 auto;align-self:center;
    display:flex;align-items:center;gap:5px;font-size:13px;font-variant-numeric:tabular-nums;white-space:nowrap}
  #tbl-cookies tbody td.ck-c-act{order:7;flex:0 0 auto;margin-left:auto;align-self:center}

  /* Ô tick: nhìn 24px, vùng chạm ~44px */
  #page-cookies input.ck-check,#page-cookies #cookie-select-all{margin:0}
  #page-cookies input.ck-check::before,#page-cookies #cookie-select-all::before{content:"";position:absolute;
    top:-10px;right:-10px;bottom:-10px;left:-10px}

  /* Tên cookie: 1 dòng, cắt "…"; tiền tố "sessionid:" giống nhau ở mọi thẻ nên ẩn */
  #tbl-cookies tbody .ck-name{display:flex;flex-wrap:nowrap;align-items:center;gap:6px;min-width:0;line-height:24px}
  #tbl-cookies tbody .ck-name b{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
    font-size:14.5px;font-weight:650;letter-spacing:-.1px;overflow-wrap:normal}
  #tbl-cookies tbody .ck-key{display:none}
  #tbl-cookies tbody .ck-name .fmt-badge{flex:0 0 auto;line-height:16px}
  #tbl-cookies tbody .ck-idn{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;line-height:18px}
  #tbl-cookies tbody .tag-chip{margin-top:4px;font-size:11px;line-height:16px}

  #tbl-cookies tbody .st-chip{font-size:11px;padding:2px 10px;line-height:18px}

  /* STT: chữ nhạt "#12" thay cho ô vuông — ô vuông ngay dưới ô tick trông như ô tick thứ hai */
  #tbl-cookies tbody td.ck-c-stt .seq-badge{display:inline;width:auto;height:auto;border:0;background:none;
    border-radius:0;font-size:12px;font-weight:600;color:var(--muted2);font-variant-numeric:tabular-nums;letter-spacing:-.2px}
  #tbl-cookies tbody td.ck-c-stt .seq-badge::before{content:"#"}
  #tbl-cookies tbody td.ck-c-acc .muted{font-size:12.5px}

  /* Chủ sở hữu (admin): viên nhỏ bên phải */
  #tbl-cookies tbody td.ck-c-user .u-cell{gap:6px;justify-content:flex-end;min-width:0;white-space:nowrap;
    font-size:12.5px;color:var(--muted)}
  #tbl-cookies tbody td.ck-c-user .u-dot{flex:0 0 auto;width:20px;height:20px;border-radius:6px;font-size:9px}
  #tbl-cookies tbody td.ck-c-user .u-cell{overflow:hidden;text-overflow:ellipsis}

  /* Hàng số liệu: biểu tượng đơn sắc thay cho nhãn cột */
  #tbl-cookies tbody td:is(.ck-c-cr,.ck-c-vid,.ck-c-chk)::before{content:"";display:block;position:static;
    flex:0 0 auto;width:14px;height:14px;margin:0;background:currentColor;
    -webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;
    -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
  #tbl-cookies tbody td.ck-c-cr{color:var(--amber)}
  #tbl-cookies tbody td.ck-c-cr::before{-webkit-mask-image:var(--ck-ic-bolt);mask-image:var(--ck-ic-bolt)}
  #tbl-cookies tbody td.ck-c-cr:has(.credit-cd)::before{display:none}   /* đồng hồ đã có ⏳ */
  #tbl-cookies tbody td.ck-c-cr:has(.credit-cd){color:var(--cyan)}
  #tbl-cookies tbody td.ck-c-cr .credit-chip{font-size:13px;line-height:20px}
  #tbl-cookies tbody td.ck-c-cr .credit-cd{font-size:12.5px}
  #tbl-cookies tbody td.ck-c-vid{color:var(--muted);margin-left:4px}
  #tbl-cookies tbody td.ck-c-vid::before{-webkit-mask-image:var(--ck-ic-video);mask-image:var(--ck-ic-video);width:15px}
  #tbl-cookies tbody td.ck-c-chk{color:var(--muted);font-size:12.5px;margin-left:4px}
  #tbl-cookies tbody td.ck-c-chk::before{-webkit-mask-image:var(--ck-ic-clock);mask-image:var(--ck-ic-clock)}
  #tbl-cookies tbody td.ck-c-vid{color:var(--txt)}
  #tbl-cookies tbody td.ck-c-vid::before{opacity:.6}
  #tbl-cookies tbody td.ck-c-chk::before{opacity:.85}

  /* Cụm thao tác: 3 nút 40×40 một hàng, không rớt dòng */
  #tbl-cookies tbody td.ck-c-act .row-actions{flex-wrap:nowrap;gap:6px;justify-content:flex-end}
  #tbl-cookies tbody td.ck-c-act .btn-icon{width:40px;height:40px;min-width:40px;min-height:40px;padding:0;
    border-radius:10px;font-size:16px;line-height:1}

  /* Đã tick: viền tím nhạt để biết thẻ nào đang được chọn */
  #tbl-cookies tbody tr:has(.ck-check:checked){border-color:var(--brand);
    background:linear-gradient(var(--brand-soft),var(--brand-soft)),var(--panel)}

  /* DIE: thẻ lùi xuống nền tối, chữ mờ — nhưng nhãn DIE, ô tick, nút vẫn rõ để bấm
     (điện thoại không có hover để "rê vào cho rõ" như desktop). */
  #tbl-cookies tbody tr.row-die{opacity:1;background:var(--bg2)}
  #tbl-cookies tbody tr.row-die:hover{background:var(--bg2)}
  #tbl-cookies tbody tr.row-die td:is(.ck-c-name,.ck-c-stt,.ck-c-acc,.ck-c-user,.ck-c-cr,.ck-c-vid,.ck-c-chk){opacity:.55}

  /* Trạng thái rỗng: một ô trải hết thẻ, không vạch ngăn */
  #tbl-cookies tbody tr:has(> td[colspan])::before,
  #tbl-cookies tbody tr:has(> td[colspan])::after{display:none}
  #tbl-cookies tbody td[colspan]{flex:1 1 100%}

  /* =====================================================================
     PHÂN TRANG: [Hiển thị 1–20 / 425]  [Mỗi trang ▾]  ·  dải số trang chia đều
     ===================================================================== */
  #page-cookies #cookie-pager{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;
    gap:10px 12px;margin-top:12px;padding-top:12px;font-size:13px}
  #page-cookies #cookie-pager .pg-ctrl{display:contents}
  #page-cookies #cookie-pager .pg-info{grid-column:1;width:auto;justify-content:flex-start;text-align:left;
    font-variant-numeric:tabular-nums;line-height:1.4}
  #page-cookies #cookie-pager .pg-sel{flex-basis:100%}
  #page-cookies #cookie-pager .pg-sel::before{display:none}
  #page-cookies #cookie-pager .pg-link{min-height:32px}
  #page-cookies #cookie-pager label.pg-size{grid-column:2;font-size:13px}
  #page-cookies #cookie-pager .pg-size select{min-height:40px;padding:6px 30px 6px 10px;font-size:16px}
  #page-cookies #cookie-pager .pg-nav{grid-column:1/-1;display:flex;justify-content:center;gap:4px;min-width:0}
  #page-cookies #cookie-pager .pg-btn{flex:1 1 0;min-width:0;max-width:46px;height:40px;padding:0;
    border-radius:10px;font-size:13.5px}
  #page-cookies #cookie-pager .pg-gap{flex:0 0 auto;min-width:12px;text-align:center}

  /* =====================================================================
     MODAL — Thêm / Sửa cookie (#m-name, #m-cv …)
     ===================================================================== */
  #modal .form-row:has(#m-name) > div{flex:1 1 100% !important}
  #modal .cv-meta{flex-wrap:wrap;gap:8px;margin-top:8px;font-size:13px}
  #modal .cv-meta .file-btn{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:8px 12px;
    font-size:13px;border-radius:10px}
  #modal #m-cv{min-height:112px;font-family:var(--mono);font-size:16px;line-height:1.45}
  #modal #m-cv::placeholder{font-family:var(--font)}
  #modal #m-result .verify-card{overflow-wrap:anywhere}
  #modal #m-result .vc-meta{line-height:1.5}

  /* =====================================================================
     MODAL — Nhập cookie (dán / upload nhiều file)
     ===================================================================== */
  #modal #imp-drop{padding:16px 14px;border-radius:14px;font-size:13.5px;line-height:1.5}
  #modal #imp-drop .dz-ic{font-size:22px;margin-bottom:4px;line-height:1}
  #modal #imp-drop .muted{font-size:12.5px}
  #modal #imp-files{gap:6px;margin-top:8px}
  #modal #imp-files .imp-file{min-height:48px;padding:6px 6px 6px 12px;gap:8px;border-radius:10px;flex-wrap:wrap}
  #modal #imp-files .if-name{flex:1 1 0;min-width:0;font-size:13.5px}
  #modal #imp-files .if-meta{font-size:12px;order:3;flex:1 1 100%;padding-left:25px;margin-top:-2px;margin-bottom:4px}
  #modal #imp-files .btn-icon{width:36px;height:36px;min-width:36px;min-height:36px;padding:0}
  #modal #imp-paste{min-height:112px;font-family:var(--mono);line-height:1.45}
  #modal #imp-paste::placeholder{font-family:var(--font)}
  /* Tag chung + "Chỉ thêm cookie LIVE": xếp chồng thay vì chen 2 cột (nhãn tick rớt 2 dòng ở 360px) */
  #modal .form-row:has(#imp-tag){margin-top:4px !important}
  #modal .form-row:has(#imp-tag) > *{flex:1 1 100% !important}
  #modal .form-row:has(#imp-tag) > .chk-inline{margin-top:4px !important}
  #modal #imp-preview{margin-top:10px;font-size:13.5px;line-height:1.5}
  #modal #imp-result{max-height:none;overflow:visible}   /* thân modal đã cuộn — bỏ vùng cuộn lồng */
  #modal #imp-result .vrow{min-height:40px;padding:8px 10px;font-size:12.5px}

  /* =====================================================================
     MODAL — Lịch sử nhập
     ===================================================================== */
  #modal #imp-hist{max-height:none;overflow:visible;gap:8px;margin-top:0}
  #modal #imp-hist .hist-row{padding:12px;border-radius:12px}
  #modal #imp-hist .hist-top{gap:4px 8px;font-size:14px;line-height:1.4}
  #modal #imp-hist .hist-top b{font-variant-numeric:tabular-nums}
  #modal #imp-hist .hist-meta{margin-top:4px;font-size:13px;line-height:1.5}
  /* Danh sách nguồn (có lần 100+ file): 1 dải cuộn ngang, mờ mép phải, thay vì cả trăm dòng */
  #modal #imp-hist .hist-files{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;
    overscroll-behavior-x:contain;scrollbar-width:none;margin:8px -12px 0;padding:0 12px 2px;
    -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);
    mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent)}
  #modal #imp-hist .hist-files::-webkit-scrollbar{display:none}
  #modal #imp-hist .hist-files .fmt-badge{flex:0 0 auto;padding:3px 8px;font-size:11.5px;line-height:16px;
    text-transform:none;letter-spacing:0;border-radius:7px}
}

/* Máy hẹp (<375px, vd 360): hàng số liệu + đồng hồ ⏳ + 3 nút phải vừa một hàng */
@media (max-width:374px){
  #tbl-cookies tbody tr{padding-left:10px;padding-right:10px}
  #tbl-cookies tbody td:is(.ck-c-vid,.ck-c-chk){margin-left:0}
  #tbl-cookies tbody tr{column-gap:8px}
  #tbl-cookies tbody td.ck-c-act .row-actions{gap:4px}
  #tbl-cookies tbody td.ck-c-act .btn-icon{width:38px;min-width:38px}
  #tbl-cookies thead th.col-check{padding-left:11px}
}