/* [14/10] CHIP HẠ TẦNG TRÊN THANH ĐẦU — CEO chọn PA 2 (thanh tài nguyên kiểu game). Lệch "chờ" theo màu đèn rd-cho của WOW (cam nhạt),
   hỏng theo --wow-xau; cam đã là màu nhấn nên không có vàng riêng. Hover chỉ brightness (§13). */
.htc { position: relative; display: inline-flex; align-items: center; flex: none; }
.htc:not([data-co]) { display: none; }
.htc-ds { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--wow-vien); border-radius: 10px; background: rgb(0 0 0 / .35); }
.htc-chip { display: inline-flex; align-items: baseline; gap: 5px; padding: 5px 10px; border: 0; border-radius: 7px; background: none; color: var(--wow-chu);
  cursor: pointer; white-space: nowrap; transition: filter .15s; }
.htc-chip:hover { filter: brightness(1.35); }
.htc-chip .tt-vat { color: var(--wow-cam-sang); align-self: center; } .htc-chip .tt-vat svg { width: 14px; height: 14px; }
.htc-chip b { font-family: var(--wow-font-so); font-weight: 400; font-size: 15px; font-variant-numeric: tabular-nums; }
.htc-chip small { font-size: 11px; color: var(--wow-chu-3); }
.htc-chip.htc-vang { background: rgb(var(--wow-cam-rgb) / .16); } .htc-chip.htc-vang b { color: var(--wow-cam-nhat); }
.htc-chip.htc-do { background: rgb(255 92 122 / .15); } .htc-chip.htc-do .tt-vat, .htc-chip.htc-do b { color: var(--wow-xau); }
.htc-chip[aria-expanded="true"] { box-shadow: inset 0 0 0 1px var(--wow-cam-sang); }

/* đích cuộn của nút ô thả: chừa chỗ thanh đầu dính (sticky) để tiêu đề khối không bị che */
#ht-nick, #ht-ip, #ht-vi, #ht-may, #ht-ai { scroll-margin-top: 84px; }

/* ô thả xuống — đúng một nút việc */
.htc-tha { position: absolute; top: calc(100% + 10px); z-index: 30; width: 300px; display: grid; gap: 6px; padding: 16px 18px; border-radius: 12px;
  border: 1px solid var(--wow-vien); background: #120d0c; box-shadow: 0 18px 40px rgb(0 0 0 / .7); }
.htc-tha.htc-vang { border-color: rgb(var(--wow-cam-sang-rgb) / .45); } .htc-tha.htc-do { border-color: rgb(255 92 122 / .5); }
.htc-so-to { font-family: var(--wow-font-so); font-weight: 400; font-size: 30px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.htc-tha small { font-size: 12.5px; color: var(--wow-chu-3); }
.htc-lech { margin: 4px 0 0; font-size: 13px; line-height: 1.45; color: var(--wow-cam-nhat); }
.htc-tha.htc-do .htc-lech { color: var(--wow-xau); }
.htc-tha .wow-nut { margin-top: 8px; }

/* chip gộp: điện thoại (một chip "Hạ tầng") · đứng ở màn Tài nguyên (nhãn chỗ đang đứng, thay 5 chip — khỏi lặp số của các khối dưới) */
.htc-gon { display: none; align-items: center; gap: 8px; padding: 6px 12px; border: 1px solid var(--wow-vien); border-radius: 999px; color: var(--wow-chu-2);
  font-size: 13px; text-decoration: none; white-space: nowrap; transition: filter .15s; }
.htc-gon:hover { filter: brightness(1.35); }
.htc-gon i { width: 7px; height: 7px; border-radius: 50%; background: var(--wow-tot); box-shadow: 0 0 8px var(--wow-tot); }
.htc-gon.htc-vang i { background: var(--wow-cam-sang); box-shadow: 0 0 8px var(--wow-cam-sang); }
.htc-gon.htc-do i { background: var(--wow-xau); box-shadow: 0 0 8px var(--wow-xau); }
.htc-gon em { font-style: normal; font-family: var(--wow-font-so); color: var(--wow-chu); }
.htc.htc-o-man .htc-ds { display: none; }
.htc.htc-o-man .htc-gon { display: inline-flex; pointer-events: none; border-color: rgb(var(--wow-cam-sang-rgb) / .6); color: #fff; }
/* [14/10] đo thật thanh đầu (máy chủ giả, đèn "Máy quét chưa chạy"): 5 chip đủ chữ vừa một dòng từ 1280px (1241 đã xuống dòng); 1180 phải bỏ chữ đơn vị
   (396 → 296px); 1024 bỏ cả đơn vị lẫn ngày dữ liệu vẫn xuống dòng ⇒ dưới 1160 gộp một chip như điện thoại, dưới 1000 chip gộp chỉ còn đèn + số lệch. Chữ đơn vị vẫn ở aria-label + gợi ý. */
@media (max-width: 1399px) { .htc-chip small { display: none; } .htc-chip { padding-inline: 8px; } }
@media (max-width: 1279px) {
  .htc-ds, .htc-tha { display: none; }
  .htc-gon { display: inline-flex; padding: 5px 10px; }
}
@media (max-width: 1120px) { .htc-gon b { display: none; } }
/* [23/10] CEO "trên điện thoại… ko có nút vào hạ tầng": ≤640 thanh đầu đã xuống 2 dòng nên còn chỗ — chip chỉ còn "● 3" thì không ai biết là nút ⇒ hiện lại chữ, nút cao đủ ngón tay */
@media (max-width: 640px) { .htc-gon b { display: inline; } .htc-gon { min-height: 36px; padding: 6px 14px; } }
/* 901–989px vẫn xuống dòng dù chip đã gộp ⇒ nhãn ngày dữ liệu nhường chỗ sớm hơn (≤900 trang trung tâm vốn đã ẩn nó) */
