/* Thẻ tool — kiểu dáng đi CÙNG bộ dựng `the-tool.js`.
   Để chung một cặp tệp vì cùng một lý do: chợ và bản sửa phải trông giống nhau,
   và cách rẻ nhất để giữ điều đó là không có bản thứ hai để lệch. */

/* ── BÌA ────────────────────────────────────────────────────────────────────
   Hình đứng RIÊNG, không có chữ chồng lên. Bản đầu đặt tên tool đè lên bìa và
   hình — một minh hoạ căn giữa — trùm đúng lên dòng tên. */
.tt-bia{aspect-ratio:16/9;max-height:210px;border-radius:16px;overflow:hidden;
  /* Nền chờ của bìa. Cũ là dải kem cam — hợp trang sáng, nhưng trên nền tối
     nó là mảng sáng nhất màn và đứng ở chỗ chưa có gì để xem. Dải tối trung
     tính giữ đúng vai «chỗ này sắp có ảnh» mà không hút mắt. */
  background:linear-gradient(155deg,#2B2F36,#0E1114);display:flex;align-items:center;
  justify-content:center}
.tt-bia>svg,.tt-bia>img{width:100%;height:100%;display:block;object-fit:cover}

.tt-body{padding:16px 0 0}
.tt-eye{display:flex;align-items:center;gap:8px;font-family:var(--mono,ui-monospace,Menlo,monospace);
  font-size:10.5px;letter-spacing:.05em;color:var(--ink-3,#6B6B72);text-transform:uppercase}
.tt-tt{padding:2px 8px;border-radius:999px;background:var(--sunk,#F2F2F5);
  color:var(--ink-2,#55555C);letter-spacing:.02em}

.tt-ten{display:block;width:100%;text-align:left;margin:7px 0 0;padding:0;background:none;
  font-size:23px;font-weight:680;letter-spacing:-.03em;line-height:1.22;color:var(--ink,#0A0A0B)}
.tt-mota{display:block;width:100%;text-align:left;margin:9px 0 0;padding:0;background:none;
  font-size:14px;line-height:1.62;color:var(--ink-2,#55555C)}

/* ── NHÓM ───────────────────────────────────────────────────────────────────
   Mỗi khối có nhãn riêng. Bản đầu để một dòng «Chốt giá» trôi giữa màn không
   nhãn — không ai biết đó là gì cho tới khi bấm thử. */
.tt-nhom{margin-top:22px}
.tt-nhan{display:flex;align-items:baseline;gap:8px;margin:0 2px 7px;font-size:11px;
  font-family:var(--mono,ui-monospace,Menlo,monospace);letter-spacing:.05em;
  color:var(--ink-3,#6B6B72);text-transform:uppercase}
.tt-nhan>span{margin-left:auto;text-transform:none;letter-spacing:0}

/* Hàng: nhãn · giá trị · lối sửa. Luôn đủ ba phần, kể cả khi giá trị trống. */
.tt-h{display:flex;align-items:center;gap:12px;width:100%;text-align:left;
  padding:12px 14px;background:var(--surface,#fff);border:1px solid var(--line,#E7E7EA);
  border-radius:12px;margin-bottom:7px;font-size:14px;color:var(--ink,#0A0A0B);
  min-height:48px}                                  /* ≥44px: ngưỡng chạm iOS */
.tt-h:last-child{margin-bottom:0}
.tt-h>span{flex:none;width:104px;color:var(--ink-3,#6B6B72);font-size:12.5px}
.tt-h>b{flex:1;min-width:0;font-weight:550;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tt-sua{cursor:pointer;transition:border-color .15s,background .15s}
.tt-sua:hover{border-color:var(--ink-3,#6B6B72)}
.tt-sua:active{transform:scale(.995)}
.tt-ten.tt-sua,.tt-mota.tt-sua{border:0;padding:0;min-height:0;display:block;
  border-radius:6px;box-shadow:inset 0 -1px 0 0 var(--line,#D8D8DC)}
.tt-ten.tt-sua:hover,.tt-mota.tt-sua:hover{background:var(--brand-soft,#FFF1E8);
  box-shadow:inset 0 -1px 0 0 var(--brand,#FF5C00)}
.tt-but{flex:none;color:var(--brand,#FF5C00);opacity:.62;vertical-align:-1px;margin-left:5px}
.tt-sua:hover .tt-but,.tt-sua:focus-visible .tt-but{opacity:1}
.tt-moi{color:var(--brand,#FF5C00);font-weight:550}
.tt-chua{color:var(--ink-3,#6B6B72);font-family:var(--mono,monospace);font-size:12.5px}

/* ── CÒN THIẾU — thứ người vừa khai xong tìm đầu tiên ─────────────────────── */
.tt-thieu{margin-top:20px;padding:12px;border-radius:14px;
  background:color-mix(in srgb,var(--brand,#FF5C00) 6%,transparent);
  border:1px solid color-mix(in srgb,var(--brand,#FF5C00) 20%,transparent)}
.tt-thieu .tt-nhan{color:var(--brand,#FF5C00);margin:2px 2px 8px}
.tt-tv{display:flex;align-items:center;gap:10px;width:100%;text-align:left;
  padding:10px 11px;background:var(--surface,#fff);border:1px solid var(--line,#E7E7EA);
  border-radius:10px;margin-bottom:6px;font-size:13.5px;min-height:44px;cursor:pointer}
.tt-tv:last-child{margin-bottom:0}
.tt-tv>i{flex:none;width:18px;height:18px;border-radius:50%;font-style:normal;font-size:11px;
  background:var(--brand,#FF5C00);color:#fff;display:flex;align-items:center;justify-content:center}
.tt-tv>span{flex:1;min-width:0;color:var(--ink-2,#55555C)}
.tt-tv>em{flex:none;font-style:normal;font-size:12.5px;font-weight:620;color:var(--brand,#FF5C00)}
.tt-tv:hover{border-color:var(--brand,#FF5C00)}

/* ── SỐ ĐO — không có dấu hiệu chạm được, cố ý ───────────────────────────── */
.tt-ribbon{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;
  background:var(--line,#E7E7EA);border:1px solid var(--line,#E7E7EA);
  border-radius:12px;overflow:hidden}
.tt-ribbon>div{background:var(--surface,#fff);padding:11px 13px;min-width:0}
.tt-ribbon span{display:block;font-size:10.5px;color:var(--ink-3,#6B6B72)}
.tt-ribbon b{display:block;margin-top:3px;font-size:15px;font-weight:640;
  font-variant-numeric:tabular-nums;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tt-ribbon i{display:block;font-style:normal;font-size:10.5px;color:var(--ink-3,#6B6B72);margin-top:1px}
.tt-do{margin:8px 2px 0;font-size:12px;line-height:1.55;color:var(--ink-3,#6B6B72)}

.tt-shots{display:flex;gap:10px;overflow-x:auto;padding-bottom:6px;margin-bottom:8px;
  scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
.tt-shot{flex:none;width:230px;scroll-snap-align:start;border:1px solid var(--line,#E7E7EA);
  border-radius:13px;overflow:hidden;background:var(--surface-2,#FAFAFA)}
.tt-shot img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover}
.tt-cap{display:block;padding:8px 11px;font-size:11.5px;color:var(--ink-3,#6B6B72);
  border-top:1px solid var(--line,#E7E7EA)}

.tt-rule{display:flex;gap:10px;padding:8px 2px;font-size:13.5px;color:var(--ink-2,#55555C)}
.tt-rule>span:first-child{flex:none;width:20px;height:20px;border-radius:50%;
  background:var(--sunk,#F2F2F5);color:var(--ink-3,#6B6B72);font-size:11px;
  display:flex;align-items:center;justify-content:center;font-family:var(--mono,monospace)}

.tt-dev{display:flex;align-items:center;gap:11px;padding:2px}
.tt-av{width:38px;height:38px;border-radius:50%;background:var(--ink,#0A0A0B);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:600;flex:none}
.tt-dev b{display:block;font-size:14px;font-weight:620}
.tt-dev span{display:block;font-size:12px;color:var(--ink-3,#6B6B72)}

@media (max-width:400px){
  .tt-h>span{width:88px}
  .tt-shot{width:200px}
}