/* =========================================================================
   home/home.css — RIENG CUA TRANG CHU

   Chi chua thu KHONG dung o trang nao khac: the san pham lay tu API.
   Cac phan khac cua trang chu (hero, tinh nang, hoi dap) dung chung cac tep
   hero.css / features.css / faq.css cung thu muc.
   ========================================================================= */

/* ── Luoi san pham ─────────────────────────────────────────
   auto-fit + minmax: tu xuong hang theo cho con lai. So san pham do quan tri
   them/bot, khong biet truoc bao nhieu — nen khong dat cung so cot. */
.prods {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--gap);
}

.prod {
  display: grid;
  gap: 14px;
  align-content: start;
  padding: clamp(20px, 2.4vw, 26px);
}

.prod__head {
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 14px;
  align-items: center;
}

.prod__icon {
  width: 52px; height: 52px;
  border-radius: 11px;
  object-fit: cover;
  background: var(--surface-3);
}
/* Chua co icon that: o vuong mau nhan, khong de o trong lo cho. */
.prod__icon--ph {
  display: grid;
  place-items: center;
  background: var(--accent-soft);
  color: var(--accent);
}

.prod__name { margin: 0 0 3px; font-size: 1.05rem; line-height: 1.3; }

.prod__desc {
  margin: 0;
  color: var(--text-muted);
  font-size: var(--fs-sm);
  white-space: pre-line;    /* ton trong xuong dong go trong admin-content */
  /* Cat con 3 dong cho cac the cao bang nhau; mo ta day du xem o trang san
     pham rieng. */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.prod__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  font-size: var(--fs-xs);
  color: var(--text-faint);
  font-family: var(--font-mono);
}

/* Hang cuoi: chon phien ban + nut tai. margin-top:auto de nut luon nam sat
   day the, cac the canh nhau thang hang du mo ta dai ngan khac nhau. */
.prod__foot {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-top: auto;
  padding-top: 4px;
}

.prod__ver {
  flex: 1;
  min-width: 150px;
  padding: 9px 11px;
  border: var(--hair) solid var(--border-strong);
  border-radius: 4px;
  background: var(--card);
  color: var(--text);
  font: inherit;
  font-size: var(--fs-sm);
}
.prod__ver:focus { outline: 0; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }

/* Chi co mot phien ban: khong can o chon, hien chu cho biet. */
.prod__ver--one {
  border-style: dashed;
  color: var(--text-muted);
  background: var(--surface-2);
}

@media (max-width: 700px) {
  .prod__foot .btn { width: 100%; }
}

/* ── Co chu tieu de trang chu ──────────────────────────────
   Cau tieu de dai hon mac dinh ("Giảm thời gian thao tác thủ công trong
   Autodesk Inventor" — 55 ky tu), de o co --fs-display goc (toi 4.25rem) thi
   tren man hinh rong no chiem 4 dong, day tut phan con lai xuong duoi man
   hinh dau. Ha mot bac: van la chu to nhat trang, ma gon con 2-3 dong. */
.hero h1 { font-size: clamp(2rem, 4vw, 3.3rem); }

/* ── Dong trang thai trong luoi (dang tai / rong / khong khop) ──────────
   .empty truoc day chi co trong shared/css/admin.css — trang chu va trang
   san pham khong nap tep do nen dong "Đang tải danh sách sản phẩm…" hien
   ra tran tru khong dinh dang. Dat o day cho ca hai trang dung chung. */
.empty {
  grid-column: 1 / -1;          /* nam het be ngang luoi, khong co lai mot cot */
  padding: 40px 20px;
  margin: 0;
  text-align: center;
  color: var(--text-faint);
  font-size: var(--fs-sm);
}

/* Nut "xem day du" dat duoi mot khoi noi dung. */
.sec-more {
  margin: clamp(24px, 3vw, 36px) 0 0;
  text-align: center;
}

/* ── Ô chọn phiên bản trên máy cảm ứng ──────────────────────────────────
   ⚠ 16px, KHÔNG phải var(--fs-sm).

   shared/css/mobile.css đã có luật `input, select, textarea { font-size:
   16px }` để iOS không tự phóng to trang khi bấm vào ô nhập. Nhưng luật đó
   chọn bằng TÊN THẺ (select) nên THUA `.prod__ver` (chọn bằng lớp) về độ ưu
   tiên — nạp sau cũng vẫn thua. Không viết lại ở đây thì bấm vào ô chọn
   phiên bản trên iPhone là Safari phóng to và không tự thu lại, trang xem
   như vỡ bố cục. Đây là lý do duy nhất có con số 16px cứng ở đây. */
@media (max-width: 1024px) {
  .prod__ver { font-size: 16px; }
}