/* hop-taiapp.css — hàng «Tải ứng dụng StarWork» dưới chân khung tiền sảnh (12/10/2026).
   Màu CHỈ từ token theme (--ink-2/--ink-3 nghỉ · --gold nổi · --line viền) ⇒ đổi theme tự theo.
   ⛔ var() trong thuộc tính fill= của SVG không chạy (bài học H9) ⇒ SVG fill=currentColor, tô bằng `color`. */
.ta-hang { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
/* ⭐ 12/10 vòng 2 (anh qua SoC): CĂN GIỮA hàng tải app trong khoảng trống từ dưới ô «Loa» tới đáy khung.
   Cột trái (.pv, JS gắn lớp ta-cot) thành cột flex, kéo giãn bằng chiều cao hàng (align-self: stretch);
   hàng tải app flex:1 + justify-content:center ⇒ tự giữa theo dọc, ⛔ cố định px.
   Điện thoại (xếp chồng) cột ⛔ có phần dư ⇒ flex:1 = 0 dư ⇒ y như cũ. */
.prejoin .pv.ta-cot { display: flex; flex-direction: column; align-self: stretch; }
.prejoin .pv.ta-cot > * { flex: none; }
.prejoin .pv.ta-cot > .ta-hang { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; align-items: stretch; }
/* máy tính: ⛔ vạch ngang dính dưới ô «Loa» khi khối đã trôi ra giữa khoảng trống (trông như vạch lạc) */
@media (min-width: 901px) { .prejoin .pv.ta-cot > .ta-hang { border-top: 0; padding-top: 0; } }
.ta-td { font-size: 11.5px; color: var(--ink-2); text-align: center; margin-bottom: 8px; letter-spacing: .2px; }
.ta-luoi { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.ta-o {
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 3px;
  min-height: 64px; padding: 8px 4px 7px; margin: 0;
  border: 1px solid var(--line); border-radius: var(--r-s, 8px);
  background: transparent; color: var(--ink-3);
  font: inherit; text-decoration: none; cursor: pointer;
  transition: color .15s, border-color .15s, background .15s;
}
.ta-o:hover, .ta-o:focus-visible { color: var(--ink); border-color: var(--ink-3); background: color-mix(in srgb, var(--ink) 5%, transparent); }
.ta-o:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.ta-ic { display: block; width: 28px; height: 28px; flex: none; }
.ta-ic svg { display: block; width: 100%; height: 100%; }
.ta-ten { font-size: 11px; line-height: 1.25; color: inherit; text-align: center; max-width: 100%; overflow-wrap: anywhere; }
.ta-phu { font-size: 10px; line-height: 1.2; color: var(--ink-3); opacity: .9; }
.ta-phu:empty { display: none; }
/* «Sắp có»: mờ, ⛔ bấm ra tải — chỉ hiện dòng báo */
.ta-sapco { cursor: not-allowed; }
.ta-sapco .ta-ic { opacity: .4; }            /* quy ước nút 12/10: không bấm được = mờ 40 % (giữ màu) + con trỏ cấm */
.ta-sapco .ta-chu { opacity: .75; }
.ta-sapco:hover { color: var(--ink-3); border-color: var(--line); background: transparent; }
.ta-sapco .ta-phu { font-style: italic; }
/* máy đang xem đúng nền tảng ấy (iOS ⇒ Apple · Windows ⇒ Windows) — viền gạch nhẹ */
.ta-may { border-style: dashed; border-color: var(--ink-3); }
/* Android trên máy Android ⇒ làm nổi bằng màu nhấn của theme */
.ta-noi { color: var(--gold); border-color: var(--gold); background: color-mix(in srgb, var(--gold) 10%, transparent); }
.ta-o:not(.ta-sapco):not(.ta-noi) { color: var(--ink-2); }
.ta-noi .ta-phu { color: var(--gold); }
.ta-noi:hover, .ta-noi:focus-visible { color: var(--gold); border-color: var(--gold); }
.ta-bao { font-size: 11px; color: var(--ink-2); text-align: center; min-height: 0; max-height: 0; overflow: hidden; transition: max-height .2s, margin .2s; }
.ta-bao.mo { max-height: 40px; margin-top: 7px; }
/* thẻ khách (pj-moi): cùng nhịp với khối chọn thiết bị gập */
.pj-moi .ta-hang { margin-top: 12px; }
@media (max-width: 380px) { .ta-ten { font-size: 10px; } .ta-luoi { gap: 6px; } }
/* máy tính (2 cột, > 900px): ô nằm ngang — icon trái, chữ phải ⇒ hàng thấp ~70px,
   ⛔ đẩy cột trái cao hơn cột phải trên màn laptop thấp (1366×768). */
@media (min-width: 901px) {
  .ta-hang { margin-top: 12px; padding-top: 10px; }
  .ta-td { margin-bottom: 6px; }
  .ta-o { flex-direction: row; justify-content: center; align-items: center; min-height: 40px; padding: 6px 8px; gap: 8px; text-align: left; }
  .ta-o .ta-ic { width: 26px; height: 26px; }
  .ta-o .ta-ten, .ta-o .ta-phu { text-align: left; }
  .ta-chu { display: flex; flex-direction: column; min-width: 0; }
}
.ta-chu { display: flex; flex-direction: column; align-items: center; min-width: 0; }
@media (min-width: 901px) { .ta-chu { align-items: flex-start; } }