/* ============================================================
   css/desktop-toi-uu.css — TỐI ƯU GIAO DIỆN DESKTOP
   Ngày tạo: 21/10/2026
   Sàn: AIAUTO.COM.VN

   NGUYÊN TẮC AN TOÀN:
   - Chỉ dùng @media (min-width: ...) => KHÔNG ảnh hưởng điện thoại
   - File nạp SAU style.css và thich-ung-moi-may.css nên thắng về
     thứ tự, không cần sửa file CSS gốc
   - Chỉ dùng !important ở nơi buộc phải ghi đè style inline

   VẤN ĐỀ ĐÃ ĐO THỰC TẾ (viewport 1920, clientWidth 1910):
     .wrap (container gốc)        : rộng 1440, mép trái 235, nội dung từ 251
     .product-grid                : rộng 1408, mép trái 251  <- MỐC ĐÚNG
     #bct-trial-banner > div      : rộng 1180, mép trái 365  <- LỆCH +114px
     .app-banner-inner            : rộng 1280, mép trái 315  <- LỆCH +64px
   => 3 khối lớn mỗi khối tự canh giữa theo max-width riêng
      (1180 / 1280 / 1440) nên không khối nào thẳng mép nhau.

   CÁCH SỬA: cho 2 khối lệch dùng ĐÚNG chiều rộng nội dung của
   .wrap tại từng mốc màn hình:
     .wrap max-width 1240 (>=769)  -> nội dung 1240-32 = 1208
     .wrap max-width 1400 (>=1200) -> nội dung 1400-32 = 1368
     .wrap max-width 1440 (>=1600) -> nội dung 1440-32 = 1408
   ============================================================ */

/* ---------- 1. MỐC DESKTOP NHỎ: 1024px trở lên ---------- */
@media (min-width: 1024px) {

  /* 1.1 Đệm 2 bên của banner pháp lý bằng đúng đệm của .wrap (16px)
         để khối con canh giữa trùng mép nội dung .wrap */
  #bct-trial-banner {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* 1.2 Khung vàng thông báo pháp lý: ghi đè max-width:1180px inline */
  #bct-trial-banner > div {
    max-width: 1208px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* 1.3 Thanh banner tải app: đưa về cùng chiều rộng.
         BẮT BUỘC !important: .app-banner-inner được khai báo trong khối
         <style> nội tuyến ở dòng 318 của index.html, tức NẰM SAU thẻ
         <link> nạp file này (dòng 106). Cùng độ ưu tiên thì khai báo
         sau thắng, nên không có !important sẽ không ghi đè được. */
  .app-banner-inner {
    max-width: 1208px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Đệm của khối cha đang là 7px 14px, lệch 2px so với đệm 16px của
     .wrap => đưa về 16px để mép con trùng mép nội dung .wrap */
  .app-banner {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* 1.4 Lưới app sỉ: 1 cột ở mobile, trên desktop cho 4 cột thoáng
         thay vì 5 cột ô hẹp 252px như đo được */
  .luoi-app-si {
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  }

  /* 1.5 Độ dài dòng chữ dễ đọc cho phần văn bản pháp lý.
         Màn 1408px mà chữ kéo hết chiều ngang thì mắt phải quét quá xa.
         Chỉ giới hạn ĐOẠN VĂN, không giới hạn bảng/lưới/khối con. */
  .legal-section > p,
  .legal-body > p,
  .legal-public-top > p {
    max-width: 78ch;
  }
}

/* ---------- 2. MỐC DESKTOP PHỔ THÔNG: 1200px trở lên ---------- */
@media (min-width: 1200px) {

  #bct-trial-banner > div {
    max-width: 1368px !important;
  }

  .app-banner-inner {
    max-width: 1368px !important;
  }
}

/* ---------- 3. MỐC MÀN HÌNH LỚN: 1600px trở lên ---------- */
@media (min-width: 1600px) {

  #bct-trial-banner > div {
    max-width: 1408px !important;
  }

  .app-banner-inner {
    max-width: 1408px !important;
  }

  /* Màn rất rộng thì 5 cột mới hợp lý (1408 / 270 = 5 cột) */
  .luoi-app-si {
    grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  }
}

/* ---------- 4. CHUỘT THẬT (desktop) — phản hồi khi trỏ vào ----------
   Chỉ áp dụng cho thiết bị có con trỏ chính xác, nên điện thoại
   cảm ứng hoàn toàn không bị ảnh hưởng. */
@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {

  /* Thẻ sản phẩm nhấc nhẹ khi trỏ vào — giúp biết đang chọn ô nào */
  .product-card {
    transition: transform .18s ease, box-shadow .18s ease;
  }
  .product-card:hover {
    transform: translateY(-3px);
  }

  /* Viền focus rõ khi dùng bàn phím Tab — bắt buộc cho khả năng
     tiếp cận, desktop dùng Tab rất nhiều */
  a:focus-visible,
  button:focus-visible,
  input:focus-visible,
  select:focus-visible,
  textarea:focus-visible,
  summary:focus-visible {
    outline: 2px solid #00e5ff;
    outline-offset: 2px;
  }
}

/* ---------- 5. GIẢM HIỆU ỨNG NẾU NGƯỜI DÙNG YÊU CẦU ---------- */
@media (prefers-reduced-motion: reduce) {
  .product-card {
    transition: none;
  }
  .product-card:hover {
    transform: none;
  }
}