/* ==========================================================================
   tc-file – Ô chọn tệp đẹp dùng chung toàn site (tự áp dụng bởi media/js/tc-file.js)
   Bỏ qua 1 ô:   <input type="file" data-tc-skip>
   Đổi chữ nút:  data-label="Chọn ảnh đại diện"
   Giới hạn MB:  data-max-mb="5"
   Ảnh xem trước: data-preview="#idCuaTheImg"
   ========================================================================== */
.tc-file{
  --tcf-fire:#F25C05; --tcf-fire-2:#D94E00; --tcf-fire-7:#B54000;
  --tcf-bg:#FFF9F4; --tcf-tint:#FFF0E3; --tcf-line:#E6D2C2;
  --tcf-ink:#3A2A20; --tcf-mute:#9C8577; --tcf-red:#D7263D;
  position:relative; display:flex; align-items:center; gap:14px;
  width:100%; max-width:620px; box-sizing:border-box; margin:4px 0 0;
  padding:10px 12px; border:1.5px dashed var(--tcf-line); border-radius:14px;
  background:var(--tcf-bg); font-family:inherit; font-weight:400; line-height:1.35;
  transition:border-color .2s, background .2s, box-shadow .2s; cursor:pointer;
}
.tc-file:hover, .tc-file.is-drag{ border-color:var(--tcf-fire); background:var(--tcf-tint); }
.tc-file.is-drag, .tc-file:focus-within{ border-color:var(--tcf-fire); box-shadow:0 0 0 4px rgba(242,92,5,.14); }
.tc-file.is-invalid{ border-color:var(--tcf-red); background:#FFF5F6; }
/* input thật phủ kín khung (trong suốt): bấm / kéo thả / báo "bắt buộc" đều hoạt động tự nhiên */
.tc-file > input[type=file]{
  position:absolute !important; inset:0 !important; width:100% !important; height:100% !important;
  margin:0 !important; padding:0 !important; border:0 !important; opacity:0 !important;
  cursor:pointer; z-index:1; font-size:0; box-shadow:none !important; background:none !important;
}
.tc-file__btn{
  flex:none; display:inline-flex; align-items:center; gap:8px; padding:9px 16px; border-radius:10px;
  background:linear-gradient(135deg,var(--tcf-fire),var(--tcf-fire-2)); color:#fff;
  font-size:14px; font-weight:700; white-space:nowrap; box-shadow:0 6px 14px -8px rgba(217,78,0,.8);
  transition:transform .15s, box-shadow .15s;
}
.tc-file__btn svg{ width:18px; height:18px; flex:none; }
.tc-file:hover .tc-file__btn{ transform:translateY(-1px); box-shadow:0 10px 18px -10px rgba(217,78,0,.9); }
.tc-file__thumb{ display:none; flex:none; width:44px; height:44px; border-radius:10px; object-fit:cover; background:#fff; border:1px solid var(--tcf-line); }
.tc-file.has-thumb .tc-file__thumb{ display:block; }
.tc-file__info{ display:flex; flex-direction:column; min-width:0; flex:1; }
.tc-file__name{ font-size:14px; font-weight:600; color:var(--tcf-ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tc-file.is-empty .tc-file__name{ color:var(--tcf-mute); font-weight:500; }
.tc-file__hint{ font-size:12.5px; color:var(--tcf-mute); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tc-file__clear{
  display:none; position:relative; z-index:2; flex:none; width:28px; height:28px; padding:0; border:0; border-radius:50%;
  background:#fff; color:var(--tcf-fire-7); font-size:20px; line-height:26px; text-align:center; cursor:pointer;
  box-shadow:0 1px 3px rgba(0,0,0,.14);
}
.tc-file__clear:hover{ background:var(--tcf-red); color:#fff; }
.tc-file.has-file .tc-file__clear{ display:block; }
.tc-file-error{ display:none; margin:6px 2px 0; font-size:13px; color:#D7263D; }
.tc-file-error.is-show{ display:block; }
.tc-file-preview-new{ outline:3px solid rgba(242,92,5,.35); outline-offset:2px; border-radius:12px; }
@media (max-width:480px){
  .tc-file{ flex-wrap:wrap; }
  .tc-file__btn{ width:100%; justify-content:center; }
}