/* ══════════════════════════════════════════════════════════════════════════════
   THẺ SẢN PHẨM - DÙNG CHUNG
   Khối "Các sản phẩm của các Team Diatalent làm" xuất hiện ở HAI nơi: trang chủ
   (landing.html) và trang Doanh nghiệp (doanh-nghiep.html). Trước 31/07/2026 toàn
   bộ kiểu dáng nằm trong thẻ <style> của riêng doanh-nghiep.html; muốn dùng lại ở
   trang chủ thì phải chép sang - hai bản, sửa một chỗ phải nhớ sửa chỗ kia.
   Nay gom về đây làm MỘT NGUỒN, theo đúng lối đã làm với nav-sheet.css (menu mobile)
   và project-card.css (thẻ dự án).

   ⚠ Sửa tệp này thì nhớ BUMP ?v= ở CẢ HAI trang đang nạp nó.

   Ghi chú về cỡ chữ: các con số dưới đây là GIÁ TRỊ CUỐI CÙNG, đã tính cả những
   luật chồng lên nhau ở bản cũ (thẻ tên 24px bị khối "thang cỡ chữ" hạ về 22px).
   Chép nguyên giá trị gốc sẽ làm thẻ TO LÊN so với hôm nay - đó là bẫy.

   Mỗi thẻ tự mang màu riêng qua biến --pc đặt ngay trên thẻ:
       <div class="prod" style="--pc:#2FE0C4">
   ══════════════════════════════════════════════════════════════════════════════ */

/* ---- Lưới: 3 cột trên máy để bàn, 2 cột trên máy tính bảng, 1 cột trên điện thoại ---- */
.prod-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;max-width:1120px;margin:0 auto}
@media(max-width:860px){ .prod-grid{grid-template-columns:repeat(2,1fr)} }
@media(max-width:560px){ .prod-grid{grid-template-columns:1fr} }

/* ---- Thân thẻ ---- */
.prod{position:relative;border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--card);box-shadow:var(--edge),0 12px 34px -26px var(--sh);transition:transform .22s var(--ease-back,cubic-bezier(.34,1.4,.64,1)),border-color .22s,box-shadow .26s}
.prod:hover{transform:translateY(-5px);border-color:color-mix(in srgb,var(--cyan) 26%,var(--line));box-shadow:var(--edge),0 28px 56px -30px var(--sh)}
/* Vạch màu chạy hết bề ngang mép trên - KHÔNG phải viền một cạnh (luật Thầy chốt 10/07),
   mà là một dải trang trí nằm đè lên ảnh, thẻ vẫn có viền đủ bốn cạnh. */
.prod::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--pc),transparent 82%);z-index:3}

/* ---- Thẻ dẫn được sang trang thật ----
   Sản phẩm nào đã có trang chạy thật thì thẻ của nó là một LIÊN KẾT, bấm vào là sang.
   Sản phẩm chưa lên thì thẻ vẫn là khối thường - cố ý để người dùng không bấm vào chỗ
   không dẫn đi đâu. Vì thế cần dấu hiệu phân biệt: mũi tên nhỏ cạnh tên miền, và tên
   miền gạch chân khi rê chuột. */
a.prod{display:block;text-decoration:none;color:inherit}
.prod-ext{font-size:.85em;opacity:.75;margin-left:2px}
a.prod:hover .prod-dom{text-decoration:underline;text-underline-offset:3px}
a.prod:focus-visible{outline:2px solid var(--pc);outline-offset:3px}

/* ---- Dải ảnh đầu thẻ ---- */
.prod-banner{position:relative;height:150px;overflow:hidden}
.prod-banner img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(.94) brightness(.92);transition:transform .5s var(--ease,cubic-bezier(.22,1,.36,1))}
.prod:hover .prod-banner img{transform:scale(1.06)}
/* Màng phủ để chữ bên dưới đọc được, pha thêm sắc màu riêng của từng sản phẩm ở góc trên phải */
.prod-banner .scrim{position:absolute;inset:0;background:linear-gradient(180deg,transparent 24%,color-mix(in srgb,var(--card) 55%,transparent) 74%,var(--card)),radial-gradient(130% 130% at 100% 0%,color-mix(in srgb,var(--pc) 34%,transparent),transparent 55%)}

/* ---- Ruột thẻ ---- */
.prod-body{position:relative;padding:0 24px 24px}
/* Khung logo. Sáu logo có bề ngang rất lệch nhau - Diatalent 460 điểm ảnh, SWABB chỉ 196 -
   nên nếu để khung ôm sát từng logo thì hàng thẻ nhìn so le, mắt thấy ngay là không đều.
   Cho khung TRẢI HẾT bề ngang thân thẻ và logo căn giữa: sáu khung bằng nhau tăm tắp,
   bề ngang lệch nhau chuyển thành khoảng thở hai bên - thứ mắt không bắt lỗi.
   Về CHIỀU CAO - canh theo PHẦN CHỮ CHÍNH, không tính dòng slogan (Thầy chốt 13/08).
   Cắt sát chữ thôi chưa đủ: sáu logo có tỉ lệ chữ-chính trên tổng chiều cao rất lệch nhau,
   đo được từ 58,6% (ENACTon) tới 76,5% (Tikme). Cùng khổ tệp thì chữ TIKME vẫn to hơn
   chữ ENACT tới một phần tư. Nên sáu tệp được chèn thêm khoảng trong suốt ở trên và dưới
   cho tới khi tỉ lệ ấy bằng nhau - lấy tỉ lệ NHỎ NHẤT làm mốc để chỉ thêm, không phải cắt.
   Đo lại trong tệp đã xuất: phần chữ chính cao 39-40 điểm trên tổng 66 ở cả sáu.
   Trước 13/08 chỗ này là ô vuông 58px đựng một biểu tượng nét vẽ, bên dưới là
   tên sản phẩm gõ bằng chữ. Nay dùng logo thật của từng sản phẩm - mà logo thật là chữ-hình
   NGANG (wordmark) nên ô vuông không đựng vừa, ép vào là bóp méo.
   Nền TRẮNG là bắt buộc, không phải chọn cho đẹp: ba logo (Diatalent · LIBRA System · SWABB)
   là chữ xanh navy rất đậm - đặt thẳng lên nền thẻ tối thì chìm hẳn, đo được dưới 2:1.
   Nền trắng giữ đúng màu thương hiệu của từng sản phẩm mà vẫn đọc rõ ở cả hai tông nền. */
.prod-logo{position:relative;z-index:2;margin:-30px 0 0;width:100%;height:72px;padding:0 18px;display:flex;align-items:center;justify-content:center;box-sizing:border-box;border-radius:14px;background:#FFFFFF;border:1px solid color-mix(in srgb,var(--pc) 46%,transparent);box-shadow:0 14px 28px -10px #000;transition:transform .28s var(--ease-back,cubic-bezier(.34,1.4,.64,1))}
.prod:hover .prod-logo{transform:translateY(-3px)}   /* chỉ nhấc lên, KHÔNG phóng to - logo dài nhất đã gần chạm mép thẻ */
/* Chiều cao RIÊNG cho từng logo, khai ngay trên thẻ ảnh bằng --lh (cùng lối với --pc).
   Vì sao không dùng một con số chung: mốc so sánh của mắt là PHẦN CHỮ, mà mỗi logo có
   phần chữ chiếm một tỉ lệ khác nhau trong tấm ảnh. Bốn logo chữ hoa (Proyaku · Diatalent ·
   ENACTon · SWABB) tình cờ gần bằng nhau nên dùng chung 33-34px. Nhưng LIBRA System có chữ
   "System" viết nghiêng cao vống lên, và tikme là chữ thường có dấu chấm - hai tấm này phải
   để ảnh CAO HƠN thì chữ LIBRA và chữ "me" mới ngang được chữ PROYAKU (Thầy chốt 13/08). */
/* Từ 15/08 dùng CHUNG bộ ảnh logo đã chuẩn hoá (eco-*.png, canvas 310 - khối chữ chính
   đều 140 theo bảng cỡ Thầy duyệt bằng mắt). Vì mọi tấm cùng khổ nên chỉ cần MỘT chiều
   cao chung, không còn phải nướng riêng từng logo bằng --lh. */
.prod-logo img{height:64px;width:auto;max-width:100%;object-fit:contain;display:block}
.prod-dom{display:block;font-family:var(--mono);font-size:14px;letter-spacing:.01em;color:var(--pc);font-weight:600;margin-top:14px}
.prod-dom.intern{color:var(--muted)}
.prod-desc{color:var(--muted);font-size:16px;line-height:1.66;margin-top:12px}

/* Nền SÁNG: màu riêng từng sản phẩm (--pc) vốn chọn cho nền tối nên trên nền trắng chữ mờ tịt
   (mint #2FE0C4 đo được 1,67:1). Pha thêm mực đậm để GIỮ sắc màu riêng mà vẫn đọc rõ. */
:root[data-theme="light"] .prod-dom{color:color-mix(in srgb,var(--pc) 42%,#0A2233)}
/* Khung logo ở nền SÁNG. Đo được: thẻ ở tông Sáng có nền TRẮNG TINH (#FFFFFF), nên khung
   logo cũng trắng thì hai mặt phẳng trùng khít nhau - tỉ số phân biệt đúng bằng 1,00, khung
   biến mất hoàn toàn, chỉ còn sợi viền giữ hình. Đổi sang xanh sương #EDF3FA - đúng màu nền
   phụ tông Sáng đã dùng ở bàn hội đồng, nên không đẻ thêm một màu mới cho hệ thống nhớ. */
:root[data-theme="light"] .prod-logo{background:#EDF3FA;border-color:color-mix(in srgb,var(--pc) 62%,transparent);box-shadow:0 10px 22px -14px rgba(20,55,100,.42)}

/* ---- Lời thành thật đặt dưới lưới ---- */
.honest-line{max-width:800px;margin:28px auto 0;text-align:center;font-style:italic;color:var(--muted);font-size:15.5px;line-height:1.66}

/* Sàn cỡ chữ trên điện thoại - chuẩn Thầy chốt 15/06/2026: mobile chữ TO hơn desktop.
   Tên thẻ CỐ Ý không có mặt ở đây: bản cũ để nguyên 22px ở mọi khổ màn, thêm luật cho
   điện thoại vào đây là làm tên thẻ NHỎ đi so với hôm nay - đúng thứ một lần gom mã
   dùng chung không được phép gây ra. */
@media (max-width:480px){
  .prod-desc,.honest-line{font-size:18px}
}