/* Ảnh · video hàng về — TC4 việc 3 */

.tep-khoi{border:1px solid var(--vien);border-radius:12px;padding:12px 14px;margin:14px 0 0;background:#fff}
.tep-dau{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.tep-dau b{font-size:14px;color:#1e2a2e}
.tep-nut{margin-left:auto;cursor:pointer}
.tep-khoa{margin-left:auto;font-size:12px;color:#8b989d;font-style:italic}
/* grid-column 1/-1: lời nhắn nằm TRONG lưới ảnh nên mặc định bị bó vào một cột 150px,
   câu dài vỡ thành 4 dòng cụt lủn. Bắt được khi soi ảnh chụp thật. */
.tep-cho{font-size:12.5px;color:#8b989d;line-height:1.5;grid-column:1/-1}

.tep-luoi{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.tep-o{position:relative;margin:0;border:1px solid var(--vien);border-radius:10px;overflow:hidden;background:#fafbfb}
.tep-o img,.tep-o video{display:block;width:100%;height:120px;object-fit:cover;background:#eef2f3;cursor:pointer}
.tep-o figcaption{padding:6px 8px;font-size:11.5px;line-height:1.35}
.tep-ct{display:block;color:#37474d}
.tep-ct i{color:#9aa5a9}
.tep-phu{display:block;color:#9aa5a9;font-size:10.5px;margin-top:2px}
/* Nút gỡ nằm góc ảnh, chỉ rõ khi rê chuột — trên điện thoại thì luôn hiện vì không có hover */
.tep-xoa{position:absolute;top:5px;right:5px;width:24px;height:24px;border:none;border-radius:50%;
  background:rgba(0,0,0,.55);color:#fff;font-size:13px;line-height:1;cursor:pointer;opacity:0;transition:opacity .15s}
.tep-o:hover .tep-xoa{opacity:1}
.tep-xoa:hover{background:var(--do)}
.tep-tong{grid-column:1/-1;font-size:11.5px;color:#8b989d}

/* Xem ảnh to */
.tep-to{position:fixed;inset:0;z-index:9998;background:rgba(10,20,22,.9);display:flex;
  align-items:center;justify-content:center;flex-direction:column;gap:12px;padding:20px;cursor:zoom-out}
.tep-to img{max-width:96vw;max-height:82vh;object-fit:contain;border-radius:8px}
.tep-to-ct{color:#fff;font-size:13.5px;text-align:center;max-width:80vw}

@media(max-width:900px){
  .tep-luoi{grid-template-columns:repeat(auto-fill,minmax(120px,1fr))}
  .tep-o img,.tep-o video{height:100px}
  .tep-xoa{opacity:1}          /* không có hover trên cảm ứng */
  .tep-nut{margin-left:0;width:100%;text-align:center;padding:10px}
}