/* ==========================================================================
   AIAUTOVN — HỆ THIẾT KẾ GỐC (rút từ frontend/index.html, 933 dòng)
   --------------------------------------------------------------------------
   Mục đích: GIỮ NGUYÊN giao diện cũ, chỉ chuẩn hoá lại thành biến CSS
   để dễ lập trình và dễ mở rộng.

   Cách dùng:
     <link rel="stylesheet" href="aiautovn-design-system.css">

   Lưu ý tiếng Việt: luôn đặt lang="vi" trên thẻ <html> để trình duyệt
   dựng dấu đúng, và dùng font Be Vietnam Pro (có đủ dấu tiếng Việt).
   ========================================================================== */

:root{
  /* ---- Nền: navy kỹ thuật (giữ nguyên mã màu gốc) ---- */
  --nen-sau:#050b18;        /* nền trang */
  --nen-vua:#070e1d;        /* nền thẻ */
  --nen-nhat:#0b1322;       /* nền thẻ nổi */
  --nen-xanh:#04121f;       /* nền vùng nhấn */

  /* ---- Màu nhấn (giữ nguyên mã màu gốc) ---- */
  --ngoc:#10b981;           /* emerald — màu chính, thành công */
  --lam:#06b6d4;            /* cyan — màu phụ, liên kết */
  --ho-phach:#f59e0b;       /* amber — cảnh báo */
  --tim:#8b5cf6;            /* violet — nhóm sáng tạo */
  --do:#f43f5e;             /* rose — lỗi, nguy hiểm */

  /* ---- Chữ ---- */
  --chu-sang:#e8eef7;       /* chữ chính */
  --chu-vua:#cbd5e1;        /* chữ phụ (slate-300) */
  --chu-mo:#94a3b8;         /* chữ nhạt  (slate-400) */
  --chu-rat-mo:#64748b;     /* ghi chú   (slate-500) */

  /* ---- Viền ---- */
  --vien:rgba(148,163,184,.18);
  --vien-sang:rgba(148,163,184,.32);

  /* ---- Bo góc (khớp rounded-xl / rounded-2xl của Tailwind) ---- */
  --bo-nho:12px;
  --bo-vua:16px;
  --bo-lon:24px;

  /* ---- Chữ: Be Vietnam Pro có đủ dấu tiếng Việt ---- */
  --font-chinh:"Be Vietnam Pro","Segoe UI",system-ui,-apple-system,sans-serif;
  --font-tieu-de:"Orbitron","Be Vietnam Pro",sans-serif;
  --font-ma:"JetBrains Mono",Consolas,ui-monospace,monospace;
}

/* ==========================================================================
   1. CHỮ TIẾNG VIỆT DỄ ĐỌC
   Đây là phần quan trọng nhất cho giao diện tiếng Việt.
   ========================================================================== */

body{
  background:var(--nen-sau);
  color:var(--chu-sang);
  font-family:var(--font-chinh);

  /* Cỡ chữ 16px là mức tối thiểu để đọc thoải mái trên màn hình.
     Nhỏ hơn 15px thì dấu tiếng Việt bị nhoè, rất khó đọc. */
  font-size:16px;

  /* Dòng cao 1.75: tiếng Việt có dấu ở TRÊN (á, ô, ể) và DƯỚI (ạ, ộ, ự).
     Dòng quá sát làm dấu của hai dòng chồng nhau. Đây là lỗi hay gặp
     nhất khi lấy nguyên thiết kế tiếng Anh sang tiếng Việt. */
  line-height:1.75;

  /* Làm mịn nét chữ, dấu trông rõ hơn */
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}

/* Tiêu đề: dòng thấp hơn được, nhưng không dưới 1.3 */
h1,h2,h3,h4{
  font-family:var(--font-tieu-de);
  line-height:1.35;
  letter-spacing:-.02em;
  text-wrap:balance;          /* ngắt dòng cân đối, không để chữ lẻ loi */
}
h1{font-size:1.875rem;font-weight:900}
h2{font-size:1.5rem;font-weight:700}
h3{font-size:1.25rem;font-weight:700}

/* Đoạn văn: giới hạn 70 ký tự mỗi dòng.
   Dòng quá dài khiến mắt mất chỗ khi xuống dòng. */
p,li{
  max-width:70ch;
  line-height:1.8;
}

/* KHÔNG dùng letter-spacing âm cho chữ thường tiếng Việt —
   các dấu sẽ dính vào nhau. Chỉ dùng cho TIÊU ĐỀ IN HOA. */
.chu-hoa{
  text-transform:uppercase;
  letter-spacing:.08em;
  font-size:.75rem;
  font-weight:700;
}

/* Chữ nhỏ: nếu buộc phải nhỏ thì phải tăng dòng cao để bù lại */
.chu-nho{font-size:.875rem;line-height:1.7}
.chu-rat-nho{font-size:.8125rem;line-height:1.65}

/* Không bao giờ dùng chữ mảnh (font-weight 300) cho tiếng Việt
   ở cỡ nhỏ — dấu sẽ mất nét. Tối thiểu là 400. */
strong,b{font-weight:600;color:#fff}


/* ==========================================================================
   2. CÁC LỚP GỐC CỦA index.html — GIỮ NGUYÊN TÊN VÀ HIỆU ỨNG
   ========================================================================== */

/* Nền lưới kỹ thuật */
.tech-bg{
  background-color:var(--nen-sau);
  background-image:
    linear-gradient(rgba(6,182,212,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(6,182,212,.045) 1px,transparent 1px);
  background-size:40px 40px;
}

/* Thẻ cơ bản */
.card{
  background:var(--nen-vua);
  border:1px solid var(--vien);
  border-radius:var(--bo-vua);
  transition:border-color .18s ease,transform .18s ease;
}
.card:hover{border-color:var(--vien-sang);transform:translateY(-2px)}

/* Thẻ có vạch màu bên trái — phân biệt nhóm nghiệp vụ */
.card-accent{border-left:3px solid var(--ngoc)}
.card-cyan  {border-left:3px solid var(--lam)}
.card-amber {border-left:3px solid var(--ho-phach)}
.card-violet{border-left:3px solid var(--tim)}

/* Viền phát sáng */
.glow{box-shadow:0 0 0 1px rgba(16,185,129,.28),0 8px 32px rgba(16,185,129,.12)}

/* Khung gợi ý */
.hint{
  background:rgba(16,185,129,.08);
  border:1px solid rgba(16,185,129,.26);
  border-radius:var(--bo-nho);
  padding:12px 14px;
  font-size:.875rem;
  line-height:1.7;
  color:var(--chu-vua);
}
.hint-blue{
  background:rgba(6,182,212,.08);
  border-color:rgba(6,182,212,.26);
}

/* Số thứ tự bước */
.step-num{
  width:28px;height:28px;flex:none;
  display:grid;place-items:center;
  border-radius:999px;
  background:var(--ngoc);color:#042f21;
  font-weight:800;font-size:.8125rem;
}

/* Hiệu ứng hiện dần khi tải trang */
.fade-up{animation:fadeUp .45s ease-out both}
@keyframes fadeUp{
  from{opacity:0;transform:translateY(12px)}
  to  {opacity:1;transform:none}
}


/* ==========================================================================
   3. BỔ SUNG CHO LẬP TRÌNH — giữ đúng phong cách cũ
   ========================================================================== */

/* Nút bấm */
.nut{
  display:inline-flex;align-items:center;gap:8px;
  padding:10px 18px;border-radius:var(--bo-nho);
  font-weight:600;font-size:.9375rem;
  border:1px solid transparent;cursor:pointer;
  transition:filter .15s,background .15s;
}
.nut-chinh{background:var(--ngoc);color:#042f21}
.nut-chinh:hover{filter:brightness(1.1)}
.nut-phu{background:var(--nen-nhat);color:var(--chu-vua);border-color:var(--vien-sang)}
.nut-phu:hover{background:#13203a;color:#fff}
.nut-nguy-hiem{background:transparent;color:var(--do);border-color:var(--do)}

/* Ô nhập liệu — cỡ chữ 16px để iPhone không tự phóng to trang */
.o-nhap,textarea.o-nhap{
  width:100%;
  background:var(--nen-xanh);
  border:1px solid var(--vien-sang);
  border-radius:var(--bo-nho);
  padding:11px 14px;
  color:var(--chu-sang);
  font-family:var(--font-chinh);
  font-size:16px;
  line-height:1.7;
}
.o-nhap:focus{
  outline:none;
  border-color:var(--ngoc);
  box-shadow:0 0 0 3px rgba(16,185,129,.16);
}
.o-nhap::placeholder{color:var(--chu-rat-mo)}

/* Nhãn trạng thái */
.nhan{
  display:inline-block;padding:3px 10px;border-radius:999px;
  font-size:.75rem;font-weight:600;line-height:1.6;
}
.nhan-ngoc {background:rgba(16,185,129,.14);color:var(--ngoc)}
.nhan-lam  {background:rgba(6,182,212,.14); color:var(--lam)}
.nhan-phach{background:rgba(245,158,11,.14);color:var(--ho-phach)}
.nhan-do   {background:rgba(244,63,94,.14); color:var(--do)}

/* Bảng — tiếng Việt cần padding dọc rộng hơn tiếng Anh */
.bang{width:100%;border-collapse:collapse;font-size:.9375rem}
.bang th,.bang td{
  padding:12px 14px;
  text-align:left;
  border-bottom:1px solid var(--vien);
  line-height:1.7;
}
.bang th{
  color:var(--chu-mo);font-weight:600;
  font-size:.8125rem;text-transform:uppercase;letter-spacing:.06em;
}

/* Mã nguồn */
code,.ma{
  font-family:var(--font-ma);
  font-size:.875em;
  background:var(--nen-xanh);
  border:1px solid var(--vien);
  border-radius:6px;
  padding:2px 6px;
  color:var(--lam);
}


/* ==========================================================================
   4. ĐIỆN THOẠI
   ========================================================================== */
@media(max-width:768px){
  body{font-size:15.5px;line-height:1.8}   /* giữ dòng cao để dấu không dính */
  h1{font-size:1.5rem}
  h2{font-size:1.25rem}
  p,li{max-width:100%}
  .bang th,.bang td{padding:10px}
}

/* Tôn trọng người dùng tắt hiệu ứng chuyển động */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}