/* ══════════════════════════════════════════════════════════════════════════════
   TRANG TUYỂN DỤNG - THẺ VỊ TRÍ VÀ CÁC MẢNH RIÊNG · DÙNG CHUNG
   Nạp ở /tuyen-dung (danh sách) và sau này ở trang chi tiết từng vị trí (đợt 3,
   chờ team R1 cấp mã vị trí). Một nguồn, theo đúng lối nav-sheet / project-card /
   product-card đã làm.

   ⚠ Sửa tệp này thì nhớ BUMP ?v= ở mọi trang đang nạp.

   Trường phái Thầy chọn 14/08/2026: CON NGƯỜI LÀM TÂM - mỗi vị trí mở ra bằng
   người thật, bảng số liệu đứng SAU con người. Ba mảnh mới của trang:
     .jb-faces  - dải mặt người ở hero (grayscale bật màu khi rê - cùng ngôn ngữ
                  dải logo Colossyan mà Thầy đã chốt cho trang chủ)
     .jb-seat   - chiếc ghế trống viền nét đứt ĐỦ BỐN CẠNH - "chỗ này chưa có tên"
     .jbcard    - thẻ vị trí KHÔNG ảnh bìa: danh sách vị trí là để QUÉT, không để
                  ngắm; mặt người thu về chân dung tròn 56px
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── DẢI MẶT NGƯỜI Ở HERO ──────────────────────────────────────────────────── */
.jb-faces{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;margin-top:26px}
.jb-face{display:inline-flex;flex-direction:column;align-items:center;gap:7px;text-decoration:none;color:#D6E4F5}
.jb-face img{
  width:64px;height:64px;border-radius:50%;object-fit:cover;display:block;
  border:2px solid rgba(150,195,235,.38);
  filter:grayscale(.35);
  transition:filter .25s ease,transform .25s var(--ease-back,cubic-bezier(.34,1.4,.64,1)),border-color .25s;
}
.jb-face:hover img,.jb-face:focus-visible img{filter:grayscale(0);transform:translateY(-3px);border-color:#8FD2F7}
.jb-face span{font-size:12.5px;font-weight:600;max-width:86px;text-align:center;line-height:1.3}
.jb-face:focus-visible{outline:2px solid #8FD2F7;outline-offset:4px;border-radius:12px}

/* Chiếc ghế trống - mô-típ của trang. Viền nét đứt chạy KÍN bốn cạnh (luật 10/07),
   giữa là dấu ◆ mờ. Không phải nút bấm, là một lời nhắn. */
.jb-seat{display:inline-flex;flex-direction:column;align-items:center;gap:7px;color:#AFC6DE}
.jb-seat .seat{
  width:64px;height:64px;border-radius:50%;box-sizing:border-box;
  border:1.5px dashed rgba(150,195,235,.4);
  display:flex;align-items:center;justify-content:center;
  font-size:19px;color:rgba(150,195,235,.55);
}
.jb-seat span{font-size:12.5px;font-weight:600;max-width:96px;text-align:center;line-height:1.3;font-style:italic}

@media (max-width:640px){
  .jb-faces{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;scroll-snap-type:x proximity;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;padding:0 8px}
  .jb-faces::-webkit-scrollbar{display:none}
  .jb-face,.jb-seat{flex:0 0 auto;scroll-snap-align:center}
  .jb-face img,.jb-seat .seat{width:54px;height:54px}
}

/* ── CHÂN DUNG LỚN - khối "Người bạn sẽ làm cùng" ──────────────────────────── */
.jb-people{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;max-width:1120px;margin:0 auto}
@media (max-width:900px){ .jb-people{grid-template-columns:1fr;max-width:560px} }
.jb-person{
  background:var(--card);border:1px solid var(--line);border-radius:20px;overflow:hidden;
  box-shadow:0 6px 22px rgba(2,20,40,.05);
  transition:transform .22s var(--ease,ease),box-shadow .25s,border-color .2s;
}
.jb-person:hover{transform:translateY(-4px);border-color:rgba(110,200,245,.4);box-shadow:0 18px 40px -18px rgba(2,20,40,.5)}
.jb-person-img{position:relative;height:280px;overflow:hidden}
.jb-person-img img{width:100%;height:100%;object-fit:cover;object-position:center 22%;display:block}
.jb-person-img::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,color-mix(in srgb,var(--card) 88%,transparent))}
.jb-person-body{padding:18px 22px 24px}
.jb-person-k{font-family:'Inter',system-ui,sans-serif;font-weight:800;font-size:12.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--g2,#3FD9A0)}
.jb-person h3{font-family:'Inter',system-ui,sans-serif;font-weight:800;font-size:21px;color:var(--ink);margin:6px 0 2px}
.jb-person .sub{color:var(--muted);font-size:14.5px;font-weight:600}
.jb-person blockquote{
  margin:14px 0 0;padding:0;border:0;
  font-style:italic;font-size:16.5px;line-height:1.6;color:var(--ink);
}
.jb-person blockquote::before{content:"\201C";color:var(--gold);font-size:1.4em;line-height:0;margin-right:2px}

/* ── THẺ VỊ TRÍ ────────────────────────────────────────────────────────────── */
.jb-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;max-width:1120px;margin:0 auto}
@media (max-width:900px){ .jb-grid{grid-template-columns:1fr;max-width:640px} }

.jbcard{
  display:flex;flex-direction:column;gap:11px;
  background:var(--card);border:1px solid var(--line);border-radius:18px;
  padding:22px 24px;text-decoration:none;color:inherit;
  box-shadow:0 6px 22px rgba(2,20,40,.05);
  transition:transform .2s var(--ease-back,cubic-bezier(.34,1.4,.64,1)),box-shadow .25s,border-color .2s;
}
.jbcard:hover,.jbcard:focus-visible{transform:translateY(-4px);border-color:rgba(110,200,245,.45);box-shadow:0 20px 44px -20px rgba(2,20,40,.55)}
.jbcard:focus-visible{outline:2px solid var(--b,#1E78C4);outline-offset:3px}

/* Hàng người dẫn. Vị trí chưa gán người thật thì trang ẨN HẲN hàng này - không bịa mặt. */
.jb-lead{display:flex;align-items:center;gap:10px}
.jb-lead img{width:44px;height:44px;border-radius:50%;object-fit:cover;border:2px solid var(--line)}
.jb-lead span{font-size:13.5px;font-weight:600;color:var(--muted)}
.jb-lead b{color:var(--ink);font-weight:700}

.jb-role{font-family:'Inter',system-ui,sans-serif;font-weight:800;font-size:20px;line-height:1.3;color:var(--ink);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

.jb-meta{display:flex;flex-wrap:wrap;gap:7px}
.jb-chip{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--ink);
  background:var(--band-ice,rgba(150,195,235,.1));border:1px solid var(--line);border-radius:999px;padding:4px 11px}
.jb-chip .dot{width:8px;height:8px;border-radius:50%;flex:none}
/* 5 chấm màu lĩnh vực - rút từ 5 mã màu .pj-cover-* của thẻ dự án, giữ đúng họ màu */
.jb-chip .dot.IT{background:#5B9BF6}.jb-chip .dot.MGT{background:#E7B84C}
.jb-chip .dot.MKT{background:#F472A6}.jb-chip .dot.SALES{background:#34D399}.jb-chip .dot.LANG{background:#8B7CF8}

/* Thu nhập: champagne var(--gold) chứ KHÔNG phải #FFE9B8 - màu ấy chỉ đọc được trên
   ảnh tối, còn trên nền thẻ sáng thì tàng hình. --gold hai tông đều đạt ngưỡng đọc. */
.jb-inc{font-family:'Inter',system-ui,sans-serif;font-weight:800;font-size:19px;color:var(--gold)}
.jb-inc small{font-weight:600;font-size:13px;color:var(--muted)}
.jb-inc.na{font-weight:600;font-size:15px;color:var(--muted)}

.jb-pitch{font-size:15px;line-height:1.6;color:var(--muted);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

.jb-foot{display:flex;flex-wrap:wrap;gap:6px 16px;align-items:center;margin-top:auto;padding-top:10px;
  font-size:13px;color:var(--muted)}
.jb-foot b{color:var(--ink);font-weight:700}

/* Nhãn nháp minh hoạ ⟡ - Thầy chốt 14/08: mở trang với hàng mẫu thì nhãn phải THẬT TO,
   và ô thu nhập của hàng mẫu bị ẩn. Không có đường thứ ba. */
.jb-sample{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:800;letter-spacing:.05em;
  /* chữ sẫm hơn --gold một nấc: tông Sáng trên nền trần đo 4,49 - hụt ngưỡng một sợi tóc */
  color:color-mix(in srgb,var(--gold) 88%,var(--ink));background:color-mix(in srgb,var(--gold) 12%,transparent);
  border:1px solid color-mix(in srgb,var(--gold) 40%,transparent);border-radius:999px;padding:4px 11px}

/* Dải khởi hành ở chân thẻ - ghép từ phương án Hành Trình: điểm khác biệt HIỆN RA
   thay vì chỉ được nói ra. Là NỀN, không phải vạch một cạnh; thẻ vẫn viền đủ bốn. */
.jb-gate{display:flex;align-items:center;gap:9px;margin-top:2px;padding:8px 12px;border-radius:10px;
  background:var(--band-ice,rgba(150,195,235,.1));font-size:12.5px;font-weight:700;
  /* chữ kéo về --ink một nấc: trên nền band vừa đủ 4,5 nhưng ở trang tin (nền trần) đo 4,46 */
  color:color-mix(in srgb,var(--muted) 82%,var(--ink))}
.jb-gate .dots{display:inline-flex;gap:4px}
.jb-gate .dots i{width:7px;height:7px;border-radius:50%;background:var(--line);flex:none}
.jb-gate .dots i:first-child{background:var(--b,#1E78C4)}

/* ── NHÓM THEO DỰ ÁN ───────────────────────────────────────────────────────── */
.jb-group{max-width:1120px;margin:0 auto 30px}
.jb-group-h{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin:0 0 14px}
.jb-group-h h3{font-family:'Inter',system-ui,sans-serif;font-weight:800;font-size:18px;color:var(--ink);margin:0}
.jb-group-h .fld{font-size:13px;font-weight:700;color:var(--muted);letter-spacing:.04em;text-transform:uppercase}


/* ══ VỊ TRÍ TRỌNG YẾU - HỆ SINH THÁI ESUHAI GROUP ═════════════════════════════
   Thầy chốt 14/08: trang tuyển không chỉ cho dự án công nghệ Diatalent mà cho cả
   hệ sinh thái - trợ lý Ban điều hành, quản lý trường JPC, đối ngoại thị trường
   Nhật... Đây là những vị trí THẬT, dữ liệu khai tĩnh trong trang (đúng quyết
   định 31/07: nội dung sửa thẳng trong mã), và là hàng thật đầu tiên của trang.
   Chất quý: champagne trên sapphire - cùng họ với chip thu nhập và huy hiệu
   KIM CƯƠNG, vì đây là chỗ trang trọng nhất của trang. Viền đủ bốn cạnh. */
.jb-key-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;max-width:1120px;margin:0 auto}
@media (max-width:960px){ .jb-key-grid{grid-template-columns:1fr;max-width:600px} }
/* Mỗi thẻ mang MÀU RIÊNG của tin bên trong (Thầy giao 17/08) - cùng bảng tông đã
   chốt cho bốn trang tin chi tiết, để người ta nhận ra tin từ ngoài cổng và bấm
   vào không bị "đổi nhà". Mọi mốc màu của thẻ treo vào MỘT biến --vtc; thẻ không
   khai gì thì rơi về champagne cũ - thêm thẻ mới không sợ vỡ. Tông Sáng khai đè
   riêng vì các màu pha cho nền tối sẽ chìm trên nền trắng. */
.jb-key{--vtc:var(--gold)}
.jb-key.vt-luc{--vtc:#4FD8C8}   /* Quản lý trường JPC - ngọc lục bảng học */
.jb-key.vt-son{--vtc:#FF9070}   /* Giáo viên tiếng Nhật - son ấm ChopChep */
.jb-key.vt-lam{--vtc:#9BB4FF}   /* Thị trường Nhật - chàm áo lam */
/* Hai tông thêm 17/08 khi khối lên tám tin. Màu KHÔNG lấy tuỳ tiện: cả hai đã có
   sẵn trong hệ (nền thẻ Proyaku #8B7CF8 và SWABB #F472A6), chỉ nâng sáng cho đọc
   được trên nền tối. Tông đi theo HỌ CÔNG VIỆC chứ không mỗi tin một màu - hai
   tin cùng họ dùng chung tông là CÓ CHỦ Ý, để người xem nhận ra chúng cùng nhà. */
.jb-key.vt-tim{--vtc:#B49BFF}   /* Kinh doanh & tăng trưởng */
.jb-key.vt-hong{--vtc:#FF9DC4}  /* Thương hiệu & cộng đồng */
:root[data-theme="light"] .jb-key.vt-luc{--vtc:#0B6E63}
:root[data-theme="light"] .jb-key.vt-son{--vtc:#A03A22}
:root[data-theme="light"] .jb-key.vt-lam{--vtc:#3A55C4}
:root[data-theme="light"] .jb-key.vt-tim{--vtc:#5B3FBF}
:root[data-theme="light"] .jb-key.vt-hong{--vtc:#B01E63}
.jb-key{
  position:relative;display:flex;flex-direction:column;gap:12px;
  background:
    radial-gradient(120% 90% at 85% -10%, color-mix(in srgb,var(--vtc) 13%,transparent), transparent 55%),
    var(--card);
  border:1px solid color-mix(in srgb,var(--vtc) 38%,var(--line));
  border-radius:20px;padding:26px 26px 24px;text-decoration:none;color:inherit;
  box-shadow:0 8px 26px rgba(2,20,40,.07);
  transition:transform .2s var(--ease-back,cubic-bezier(.34,1.4,.64,1)),box-shadow .25s,border-color .2s;
}
.jb-key:hover,.jb-key:focus-visible{transform:translateY(-5px);
  border-color:color-mix(in srgb,var(--vtc) 62%,var(--line));
  box-shadow:0 24px 52px -22px rgba(2,20,40,.6)}
.jb-key:focus-visible{outline:2px solid var(--vtc);outline-offset:3px}
.jb-key-tag{display:inline-flex;align-items:center;gap:7px;align-self:flex-start;
  font-size:12px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--vtc)}
.jb-key-tag b{font-size:8px}
/* Tên vị trí = mỏ neo nhận diện, mang màu của tin - khớp tiêu đề lớn trang trong */
.jb-key h3{font-family:'Inter',system-ui,sans-serif;font-weight:800;font-size:21.5px;line-height:1.28;color:var(--vtc);margin:0}
.jb-key .org{font-size:13.5px;font-weight:700;color:var(--muted)}
.jb-key p{font-size:15px;line-height:1.64;color:var(--muted);margin:0}
.jb-key .jb-meta{margin-top:2px}
/* HÀNG THU NHẬP + MỨC KINH NGHIỆM: hai câu người tìm việc hỏi đầu tiên, nay trả
   lời ngay trên thẻ. Số lấy NGUYÊN từ trang tin bên trong - thẻ không tự bịa. */
.jb-key-inc{display:flex;align-items:baseline;justify-content:space-between;gap:8px 14px;flex-wrap:wrap;margin-top:2px}
.jb-key-inc .so{font-family:'Bricolage Grotesque','Sora',sans-serif;font-weight:700;font-size:19px;letter-spacing:-.2px;color:var(--vtc)}
.jb-key-inc .kn{font-size:12.5px;font-weight:700;color:var(--muted)}
/* Lối vào: người đi trước không làm bài Cửa 1 - bắt đầu bằng một buổi trò chuyện */
.jb-key-go{display:flex;align-items:center;gap:9px;margin-top:auto;padding:10px 13px;border-radius:11px;
  background:color-mix(in srgb,var(--vtc) 10%,transparent);
  font-size:13.5px;font-weight:700;color:color-mix(in srgb,var(--vtc) 72%,var(--ink))}
.jb-key-go .dot9{width:8px;height:8px;border-radius:50%;background:var(--vtc);flex:none}

/* ── DẢI HỆ SINH THÁI - lòng tin bằng vật thật, không bằng lời ─────────────────
   Sáu logo sản phẩm đã có sẵn trong kho ảnh; đây là "bạn sẽ làm việc giữa những
   thứ này". Khung trắng như thẻ sản phẩm để logo giữ đúng màu thương hiệu. */
/* Dải CHẠY vô tận (marquee) - 18 logo pháp nhân + sản phẩm, cùng ngôn ngữ dải
   Colossyan Thầy đã chốt cho trang chủ. Track = HAI NỬA y hệt nhau, mỗi nửa tự
   mang khoảng đệm phải nên translateX(-50%) khớp tuyệt đối - vòng lặp không giật.
   Hai mép mờ dần bằng mask. Rê vào là dải dừng cho đọc; tắt chuyển động thì về
   lưới tĩnh xuống dòng, nửa nhân bản tự ẩn. */
.jb-eco-vien{max-width:1120px;margin:0 auto;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.jb-eco-hang{margin-bottom:24px}
.jb-eco-hang:last-child{margin-bottom:0}
/* Nhãn hai tầng ĂN ĐÚNG bộ kiểu kicker section (Thầy chốt 14/08): mint --g2 ·
   13px · giãn 1.8px; tông Sáng sẫm theo án lệ band-ice (4,39→5,42 đã đo) */
.jb-eco-nhan{text-align:center;font-size:13px;font-weight:800;letter-spacing:1.8px;
  text-transform:uppercase;color:var(--g2);margin:0 0 12px}
:root[data-theme="light"] .jb-eco-nhan{color:color-mix(in srgb,var(--g2) 82%,#0B2237)}
.jb-eco{display:flex;width:max-content;animation:ecoChay 58s linear infinite}
/* hàng sản phẩm trôi NGƯỢC chiều - hai dòng chảy đan nhau, nhịp của các trang lớn */
.jb-eco.nguoc{animation-direction:reverse;animation-duration:44s}
.jb-eco:hover{animation-play-state:paused}
.jb-eco-nua{display:flex;align-items:center;gap:12px;padding-right:12px;flex:none}
.jb-eco-nua span,.jb-eco-nua a{display:inline-flex;align-items:center;justify-content:center;flex:none;
  background:#FFFFFF;border:1px solid var(--line);border-radius:12px;padding:6px 14px;
  transition:transform .18s var(--ease,ease),box-shadow .2s,border-color .18s}
:root[data-theme="light"] .jb-eco-nua span,:root[data-theme="light"] .jb-eco-nua a{background:#EDF3FA}
.jb-eco-nua span:hover{transform:translateY(-2px);box-shadow:0 8px 18px -10px rgba(2,20,40,.45)}
/* logo CÓ WEBSITE THẬT là thẻ <a> - nâng rõ hơn + viền sapphire khi rê để biết bấm được */
.jb-eco-nua a{cursor:pointer}
.jb-eco-nua a:hover{transform:translateY(-3px);border-color:var(--b);box-shadow:0 10px 22px -10px rgba(30,120,196,.5)}
.jb-eco-nua a:focus-visible{outline:2px solid var(--b);outline-offset:3px}
.jb-eco-nua img{height:59px;width:auto;display:block}   /* 48 × (380/310) - bù khổ canvas mới, cỡ nhìn thấy KHÔNG đổi */
@keyframes ecoChay{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){
  .jb-eco{animation:none;width:auto;flex-wrap:wrap;justify-content:center}
  .jb-eco-nua{flex-wrap:wrap;justify-content:center;padding-right:0}
  .jb-eco-nua[aria-hidden="true"]{display:none}
}
.jb-eco-line{text-align:center;font-size:clamp(13px,1.6vw,14.5px);font-weight:800;letter-spacing:.09em;
  line-height:1.4;text-transform:uppercase;color:var(--muted);margin:0 0 18px;text-wrap:balance}

@media (max-width:480px){
  .jb-key p{font-size:17px}
  .jb-key .org,.jb-key-go{font-size:15px}
  .jb-eco-nua img{height:47px}
  .jb-eco-nua span{padding:5px 10px}
  .jb-eco-line{font-size:16px}
  .jb-eco-nhan{font-size:16px}
}

/* ── SÀN CỠ CHỮ ĐIỆN THOẠI (chuẩn 15/06: mobile chữ to hơn desktop) ─────────── */
@media (max-width:480px){
  .jb-pitch{font-size:17px}
  .jb-chip{font-size:14.5px}
  .jb-lead span,.jb-foot{font-size:15px}
  .jb-face span,.jb-seat span{font-size:14px}
  .jb-person .sub{font-size:16px}
  .jb-person blockquote{font-size:18px}
}
@media(max-width:640px){
  .jb-key-inc .so{font-size:20px}
  .jb-key-inc .kn{font-size:14px}
}
@media (prefers-reduced-motion: reduce){
  .jb-face img,.jbcard,.jb-person{transition:none}
}

/* ═══ TỆP ĐÍNH KÈM TRONG FORM ỨNG TUYỂN (Thầy giao 17/08/2026) ════════════════
   Trước đây CV chỉ là một ô dán link - ứng viên phải tự tải lên Drive rồi mở
   quyền xem, mất một bước và hay quên mở quyền (hội đồng bấm vào là gặp trang
   "bạn cần xin quyền"). Nay có chỗ chọn tệp thẳng từ máy.

   Khối này do ung-tuyen-eco.js CHÈN VÀO, không đặt sẵn trong HTML. Ngoại lệ có
   chủ đích với án lệ "UI tĩnh đặt sẵn": nút chọn tệp chỉ hoạt động được nhờ JS,
   nên JS hỏng mà vẫn bày nút ra thì người ta bấm vào một thứ không ăn - thà
   không hiện, ô dán link vẫn còn đó làm đường lui. */
.ea-tep{margin:13px 0}
.ea-tep>label{display:block;font-size:13.5px;font-weight:700;color:var(--ink);margin-bottom:5px}
/* Vùng thả: viền đứt ĐỦ BỐN CẠNH (luật 10/07 - không viền một cạnh) */
.ea-drop{position:relative;border:1.5px dashed color-mix(in srgb,var(--ink) 24%,transparent);
  border-radius:14px;padding:18px 16px;text-align:center;background:color-mix(in srgb,var(--ink) 3%,transparent);
  transition:border-color .2s ease,background .2s ease}
.ea-drop:hover,.ea-drop.hover{border-color:var(--g2);background:color-mix(in srgb,var(--g2) 8%,transparent)}
.ea-drop.hover{border-style:solid}
.ea-drop input[type=file]{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.ea-drop .ic{display:block;font-size:22px;line-height:1;margin-bottom:7px;color:var(--g2)}
/* CẢ HAI phải là block: chúng vốn là <span> nên nằm chung một dòng, câu phụ
   dính đuôi câu chính thành một cục chữ (đo thấy ngay lần dựng đầu 17/08) */
.ea-drop .chinh{display:block;font-size:14.5px;font-weight:700;color:var(--ink)}
.ea-drop .chinh u{text-decoration-thickness:1.5px;text-underline-offset:2px}
.ea-drop .phu{display:block;font-size:12.5px;color:var(--muted);margin-top:5px;line-height:1.5}
/* Danh sách tệp đã chọn */
.ea-ds{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:7px}
.ea-ds li{display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:11px;
  border:1px solid var(--line);background:var(--card);font-size:13.5px}
.ea-ds .ten{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink);font-weight:600}
.ea-ds .co{color:var(--muted);font-size:12.5px;font-variant-numeric:tabular-nums;flex:none}
.ea-ds .bo{flex:none;width:26px;height:26px;border-radius:8px;border:1px solid var(--line);
  background:transparent;color:var(--muted);font-size:15px;line-height:1;cursor:pointer;
  transition:color .2s ease,border-color .2s ease}
.ea-ds .bo:hover,.ea-ds .bo:focus-visible{color:#F87171;border-color:#F87171}
.ea-tep .tong{margin-top:8px;font-size:12.5px;color:var(--muted);text-align:right;font-variant-numeric:tabular-nums}
.ea-tep .tong.day{color:#FB923C;font-weight:700}
/* Thanh tiến trình lúc gửi tệp */
.ea-thanh{margin-top:9px;height:5px;border-radius:99px;background:color-mix(in srgb,var(--ink) 12%,transparent);overflow:hidden}
.ea-thanh i{display:block;height:100%;width:0;border-radius:99px;background:var(--g2);transition:width .25s ease}
@media(max-width:640px){
  .ea-tep>label{font-size:15px}
  .ea-drop .chinh{font-size:16px}
  .ea-drop .phu,.ea-ds li,.ea-tep .tong{font-size:14px}
  .ea-ds .co{font-size:13px}
}
@media (prefers-reduced-motion: reduce){
  .ea-drop,.ea-ds .bo,.ea-thanh i{transition:none}
}