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

/* ==========================================================================
   SHELL — khung app + thành phần dùng chung trên điện thoại / tablet
   Chỉ ghi đè style.css, không đổi id/class JS dùng. Mọi luật nằm trong
   @media (max-width:960px) hoặc (max-width:760px): desktop ≥961px giữ nguyên.
   Các trang (#page-xxx) có file riêng nạp SAU file này nên luật trang thắng.
   ========================================================================== */

/* Mép mờ động cho dải cuộn ngang: đầu dải không mờ, cuộn tới cuối thì tắt mờ phải.
   Trình duyệt chưa có scroll-timeline vẫn dùng mép mờ phải tĩnh của style.css. */
@property --m-fl{syntax:'<length>';inherits:false;initial-value:0px}
@property --m-fr{syntax:'<length>';inherits:false;initial-value:28px}
@keyframes m-edge-fade{
  0%{--m-fl:0px;--m-fr:28px}
  6%{--m-fl:28px}
  94%{--m-fr:28px}
  100%{--m-fl:28px;--m-fr:0px}
}
@keyframes m-sheet-up{from{transform:translateY(28px);opacity:.4}to{transform:none;opacity:1}}

/* ---------- ≤960px: TOPBAR gọn + DRAWER ---------- */
@media (max-width:960px){
  /* Topbar thành lưới: [☰ tiêu đề] [dải chip] [↻] — cùng một hàng ở tablet. */
  .topbar{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:8px 12px;
    padding:calc(10px + var(--sat)) calc(16px + var(--sar)) 10px calc(16px + var(--sal))}
  .imp-bar + .topbar{padding-top:10px}
  .topbar-left{gap:10px;min-width:0}
  .topbar h2{font-size:18px;line-height:1.25;letter-spacing:-.1px}
  .burger{width:40px;height:40px;border-radius:11px}
  .topbar-right{display:contents}
  .chip-rail{grid-column:2;grid-row:1;flex-wrap:nowrap;gap:6px;overflow-x:auto;overflow-y:hidden;
    -webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;scrollbar-width:none;padding:2px 0}
  .chip-rail::-webkit-scrollbar{display:none}
  .chip-rail>.chip:first-child{margin-left:auto}   /* vừa khung thì dạt phải, tràn thì cuộn được từ đầu */
  .chip{flex:0 0 auto;padding:5px 11px;font-size:12px;line-height:16px;font-variant-numeric:tabular-nums}
  .btn-refresh{grid-column:3;grid-row:1;width:40px;min-width:40px;height:40px;min-height:40px;
    padding:0;font-size:18px;border-radius:11px}

  /* style.css (khối cuối) tắt mép mờ của dải chip — bật lại vì giờ nó cuộn ngang. */
  .chip-rail.is-scroll-x,.seg.is-scroll-x{
    -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);
    mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent)}
}
@supports (animation-timeline:scroll()){
  @media (max-width:960px){
    .chip-rail.is-scroll-x,.filter-chips.is-scroll-x,.seg.is-scroll-x{
      animation:m-edge-fade linear both;animation-timeline:scroll(self inline);
      -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 var(--m-fl),#000 calc(100% - var(--m-fr)),transparent 100%);
      mask-image:linear-gradient(90deg,transparent 0,#000 var(--m-fl),#000 calc(100% - var(--m-fr)),transparent 100%)}
  }
}

/* Drawer: mục menu to, dễ chạm. Chỉ khi cửa sổ đủ cao — màn nằm ngang đã có
   khối nén riêng trong style.css (max-height 430/480px), đừng phá nó. */
@media (max-width:960px) and (min-height:481px){
  .sidebar{width:min(300px,84vw);padding-top:calc(14px + var(--sat));padding-right:12px;
    padding-bottom:calc(14px + var(--sab))}
  .sb-brand{padding:2px 2px 16px 6px}
  .sb-close{width:40px;height:40px;border-radius:10px}
  .sb-nav{gap:2px}
  .nav-item{min-height:46px;padding:11px 12px;font-size:15px;border-radius:12px;gap:12px}
  .nav-item.active{box-shadow:inset 3px 0 0 var(--brand2)}
  .sb-foot{gap:8px;padding-top:12px}
  .sb-user{margin-bottom:6px}
  .sb-foot .btn{min-height:42px;font-size:13.5px}
}

/* Điện thoại NẰM NGANG (thấp): chân drawer gom 1 hàng [avatar][Tài khoản][Đăng xuất]
   để đủ chỗ cho cả 9 mục menu; modal bớt đệm đầu/chân để thân còn chỗ đọc. */
@media (max-width:960px) and (max-height:480px){
  .sb-foot{flex-wrap:nowrap;align-items:center;gap:6px}
  .sb-user{flex:0 0 auto;margin:0}
  .sb-user-info{display:none}
  .sb-foot .btn{flex:1 1 0;min-width:0;min-height:34px;padding:6px 8px;font-size:12.5px}
  .modal{padding:6px calc(12px + var(--sar)) 6px calc(12px + var(--sal))}
  .modal-card,.modal-card.modal-wide{max-height:calc(100vh - 12px);max-height:calc(100dvh - 12px)}
  .modal-head{padding:8px 10px 8px 20px}
  .modal-body{padding:12px 20px}
  .modal-card>.modal-actions{padding:8px 20px calc(8px + var(--sab))}
}

/* ---------- ≤760px: ĐIỆN THOẠI ---------- */
@media (max-width:760px){
  :root{--padx:16px;--pady:14px;--gap:12px}

  /* ===== TOPBAR: hàng 1 = ☰ + tiêu đề + ↻ · hàng 2 = dải chip cuộn tràn mép ===== */
  .topbar{grid-template-columns:minmax(0,1fr) auto;gap:8px 10px;padding-bottom:8px}
  .btn-refresh{grid-column:2}
  .chip-rail{grid-column:1/-1;grid-row:2;
    margin:0 calc(-16px - var(--sar)) 0 calc(-16px - var(--sal));
    padding:0 calc(16px + var(--sar)) 2px calc(16px + var(--sal));
    scroll-padding-inline:16px}
  .chip-rail>.chip:first-child{margin-left:0}

  /* ===== THANH ĐĂNG NHẬP HỘ ===== */
  .imp-bar{flex-wrap:nowrap;gap:10px;font-size:12.5px;line-height:1.4;
    padding:calc(8px + var(--sat)) calc(16px + var(--sar)) 8px calc(16px + var(--sal))}
  .imp-bar>span{min-width:0;flex:1 1 auto;overflow-wrap:anywhere}
  .imp-bar .imp-by{display:none}   /* điện thoại: chỉ cần biết đang ở tài khoản nào */
  .imp-bar .btn{flex:0 0 auto;min-height:36px;padding:7px 11px}

  /* ===== BĂNG GIẢ LẬP ===== */
  .sim-banner{padding:10px 12px;font-size:13px;line-height:1.5;margin-bottom:12px;border-radius:12px}

  /* ===== ĐĂNG NHẬP ===== */
  .auth-wrap{padding:calc(24px + var(--sat)) calc(16px + var(--sar)) calc(24px + var(--sab)) calc(16px + var(--sal))}
  .auth-card{padding:26px 20px 22px;border-radius:18px}
  .auth-brand{gap:12px;margin-bottom:20px}
  .auth-brand .logo-badge{width:46px;height:46px;font-size:22px}
  .auth-brand h1{font-size:19px;line-height:1.2}
  .auth-brand p{font-size:13px;line-height:1.4;margin-top:2px}
  .auth-tabs{padding:4px;margin-bottom:16px}
  .auth-tab{min-height:40px;font-size:14px}
  .auth-form label{font-size:13px;margin:12px 0 6px}
  .auth-form input{min-height:48px;padding:12px 14px}
  .auth-form .btn{min-height:48px;margin-top:20px;font-size:15px}
  .auth-hint{font-size:12.5px;line-height:1.5}

  /* ===== NÚT ===== */
  .btn{min-height:44px;padding:10px 14px;font-size:14px}
  .btn-sm,.toolbar-sub .btn{min-height:40px;padding:8px 12px;font-size:13px}
  .btn-refresh{min-height:40px;padding:0}

  /* ===== Ô NHẬP ===== */
  input:where(:not([type="checkbox"],[type="radio"],[type="file"],[type="range"])),select{min-height:44px}
  textarea{line-height:1.45}
  label{font-size:13px}

  /* ===== PANEL ===== */
  .panel{padding:14px;border-radius:14px}
  .panel-head{gap:8px 10px;margin-bottom:12px}
  .panel-head h3{font-size:15px;line-height:1.3}

  /* ===== TOOLBAR: nút chia lưới 2 cột đều thay vì rớt dòng lởm chởm ===== */
  .toolbar{gap:8px;margin-bottom:12px}
  .toolbar>.btn{flex:1 1 calc(50% - 4px);min-width:0;white-space:normal;text-align:center}
  .toolbar>.seg{flex:1 1 100%}
  .toolbar>select{flex:1 1 160px;width:auto}
  .toolbar-sub{gap:8px;margin-top:0}
  .toolbar-sub>.btn{flex:1 1 calc(50% - 4px);min-width:0;white-space:normal;text-align:center}

  /* ===== DẢI TAB / CHIP LỌC (cuộn ngang) ===== */
  .fchip{min-height:38px;padding:7px 12px;font-size:13px}
  .fc-n{font-variant-numeric:tabular-nums}
  .seg{padding:3px}
  .seg-btn{min-height:36px;padding:7px 12px;font-size:13px}

  /* ===== THỐNG KÊ CƠ BẢN ===== */
  .stat-grid{gap:10px;margin-bottom:12px}
  .stat{padding:12px 14px;border-radius:12px}
  .stat .s-label{font-size:12px;margin-bottom:6px}
  .stat .s-val{font-size:22px;line-height:1.15;font-variant-numeric:tabular-nums}
  .stat .s-sub{font-size:12px;line-height:1.4}
  .proxy-summary{gap:8px}
  .psum{padding:11px 12px}
  .psum .k{font-size:12px}
  .psum .v{font-size:17px;font-variant-numeric:tabular-nums}

  /* ===== VIÊN / NHÃN / RỖNG ===== */
  .pill{font-size:11.5px;padding:3px 9px}
  .tagx{font-size:11px}
  .empty{padding:24px 12px;font-size:13.5px;line-height:1.5}
  .pg-btn{min-width:40px;height:40px}

  /* =====================================================================
     BẢNG → THẺ: nhãn chữ thường, thẳng hàng với dòng đầu của giá trị,
     vạch ngăn liền mảnh thay vì gạch đứt.
     (Chỉ đổi padding TRÊN/DƯỚI — padding-left là máng nhãn, để style.css lo,
     kể cả khối ≤359px nhãn nằm trên giá trị.)
     ===================================================================== */
  .tbl{font-size:13.5px}
  .tbl tr{padding:3px 14px;border-radius:12px;margin-bottom:10px}
  .tbl td{line-height:1.4;min-height:40px;padding-top:9px;padding-bottom:9px}
  .tbl tbody tr td:first-child{padding-top:9px}
  .tbl tbody tr td:last-child,.tbl tbody tr td.cell-last-visible{padding-bottom:9px}
  .tbl tbody tr:nth-child(n) td{border-bottom-style:solid}
  .tbl tbody tr:nth-child(n) td:last-child,
  .tbl tbody tr:nth-child(n) td.cell-last-visible{border-bottom:none}
  .tbl td::before{top:12px;font-size:12px;line-height:16px;font-weight:500;letter-spacing:0;
    text-transform:none;color:var(--muted)}
  .tbl tbody tr td:first-child::before{top:12px}
  .tbl td.cell-act::before{margin-bottom:8px}
  .tbl td .empty{padding:20px 8px}
  .tbl .mono{font-size:12.5px}

  /* =====================================================================
     MODAL → bottom sheet: đầu gọn, thân cuộn, chân nút cố định chia đều
     ===================================================================== */
  .modal{background:rgba(4,7,14,.74)}
  .modal-card,.modal-card.modal-wide{border-radius:20px 20px 0 0;
    max-height:calc(100vh - 12px);max-height:calc(100dvh - 12px - var(--sat));
    box-shadow:0 -12px 40px rgba(0,0,0,.45);animation:m-sheet-up .22s ease-out}
  .modal-head{min-height:56px;padding:8px 8px 8px 16px;gap:8px}
  .modal-head h3{font-size:16px;font-weight:700;line-height:1.3;min-width:0;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .modal-x{width:40px;height:40px;font-size:18px;border-radius:10px}
  .modal-x:active{background:var(--panel2)}
  .modal-body{padding:14px 16px 16px}
  .modal-body label{font-size:13px;margin:12px 0 6px}
  .modal-body .chk-inline{min-height:40px;margin-top:10px}
  .form-grid label>input,.form-grid label>select,.form-grid label>textarea{margin-top:6px}
  .modal-card>.modal-actions{display:flex;flex-wrap:nowrap;gap:10px;
    padding:12px 16px calc(12px + var(--sab))}
  .modal-card>.modal-actions .btn{flex:1 1 0;min-width:0;min-height:46px;white-space:normal;
    text-align:center;line-height:1.25}
  /* Cụm nút phụ còn nằm trong thân (vd "Đăng xuất mọi thiết bị"): đã có <hr>
     phía trên nên bỏ vạch ngăn thứ hai. */
  .modal-body .modal-actions{border-top:0;padding-top:0;margin-top:12px}
  .modal-body hr{margin:14px 0}
  .dropzone{padding:18px 14px}

  /* ===== TOAST: sát đáy, không nuốt cú chạm; nổi trên chân bottom-sheet ===== */
  .toast{left:calc(16px + var(--sal));right:calc(16px + var(--sar));bottom:calc(16px + var(--sab));
    padding:12px 16px;font-size:14px;line-height:1.4;text-align:left;border-radius:12px;pointer-events:none}
  body.modal-open .toast{bottom:calc(84px + var(--sab))}
}

/* Máy rất nhỏ (≤359px): nhãn nằm trên giá trị — khai lại sau khối trên. */
@media (max-width:359px){
  .tbl td,.tbl-myvideo td{padding-left:0}
  .tbl td{min-height:0}
  .tbl td::before{position:static;display:block;width:auto;margin-bottom:4px;top:auto}
  .tbl tbody tr td:first-child::before{top:auto}
  .toolbar>.btn,.toolbar-sub>.btn{flex-basis:100%}
}

/* Rà cuối: máy ≤400px — chân bottom-sheet 2 nút ("🔎 Kiểm tra LIVE/DIE" + "＋ Thêm cookie")
   rớt thành 2 dòng; nén đệm + cỡ chữ để mỗi nút giữ 1 dòng. */
@media (max-width:400px){
  .modal-card>.modal-actions{gap:8px}
  .modal-card>.modal-actions .btn{font-size:13.5px;padding-left:8px;padding-right:8px;letter-spacing:-.1px}
}

/* Popup "video mới hoàn thành" (18/09/2026): điện thoại — chữ vừa khung, nút full ngang, mỗi video 2 tầng */
@media (max-width:760px){
  .vid-pop .vp-card{max-width:100%}
  .vp-hero{padding:14px;gap:12px}
  .vp-ring{width:46px;height:46px}
  .vp-emo{font-size:22px}
  .vp-title{font-size:16.5px}
  .vp-title b{font-size:19px}
  .vp-row{grid-template-columns:auto minmax(0,1fr);row-gap:2px}
  .vp-row .vp-pr{grid-column:1/-1}
  .vp-ck{max-width:none}
  .vp-tip{font-size:12.5px;padding:11px 12px}
  .vp-tip ul{padding-left:18px}
  .vp-actions .btn-lg{flex:1 1 100%;min-height:44px}
  .vp-actions .btn-ghost{flex:1 1 100%;min-height:40px}
}

/* Popup "X2 tốc độ" (18/09/2026): điện thoại — 3 ô số xếp dọc, nút full ngang */
@media (max-width:760px){
  .x2-facts{grid-template-columns:1fr;gap:6px}
  .x2-fact{display:flex;align-items:baseline;justify-content:space-between;gap:10px;text-align:left;padding:8px 11px}
  .x2-fact b{font-size:14px}
  .x2-fact span{margin-top:0;text-align:right}
}