/* =====================================================================
   VINIS — co giãn theo màn hình (v1, 27/10/2026)
   Tham khảo giao-dien-responsive.md của web SPCN, điều chỉnh cho VINIS:
   trên màn hình lớn, toàn bộ bố cục phóng to THEO TỈ LỆ (chữ, khoảng cách,
   thẻ, ảnh cùng to lên) thay vì để khung giữa nhỏ và hai bên trống / lưới thưa.
   Gỡ bỏ: xoá dòng <link ... css/responsive.css> trong <head> các trang.
   ===================================================================== */

/* 1. Phóng to tỉ lệ: mọi kích thước tính bằng rem (Tailwind) lớn dần từ 1536px.
      1536px = 16px (như cũ) · 1920px ≈ 17.5px · 2560px ≈ 20px · tối đa 22px. */
html { font-size: clamp(16px, calc(16px + (100vw - 1536px) * 0.004), 22px); }

/* 2. Khung nội dung rộng hơn một chút trên màn hình lớn (80rem → 86rem). */
@media (min-width: 1600px) {
  html .max-w-7xl { max-width: 86rem; }
}

/* 3. Chống "chữ mồ côi" cho đoạn văn (tiêu đề đã dùng balance trong từng trang). */
p, li, figcaption, td, th, dd, blockquote { text-wrap: pretty; }

/* 4. Ô lưới không được đẩy trang tràn ngang trên điện thoại. */
.grid > * { min-width: 0; }

/* 5b. Điện thoại rất nhỏ (< 360px): thu gọn nút VI/EN để logo + VI/EN + ☰ vừa một hàng. */
@media (max-width: 359px) {
  #header [data-i18n-skip] { padding: 3px 6px !important; gap: 4px !important; }
  #header [data-i18n-skip] .fa-globe { display: none; }
}

/* 5c. Logo ảnh VINIS (29/10/2026): điện thoại < 400px ẩn dòng "Engineering Solutions"
       cạnh logo (logo đã có chữ VINIS) để logo + VI/EN + ☰ vừa một hàng. */
@media (max-width: 399px) {
  #header img[src*="vinis-logo"] + .leading-tight { display: none; }
}

/* 5a. Header 1024–1279px (iPad ngang, laptop nhỏ): không đủ chỗ cho nút
       "Đăng ký tư vấn" → ẩn nút ở cỡ này (vẫn có trong menu "Giải pháp" và cuối trang). */
#header a.lg\:inline-flex { white-space: nowrap; }
@media (min-width: 1024px) and (max-width: 1279px) {
  #header a.lg\:inline-flex.bg-brand-500 { display: none; }
}

/* 5. Bảng menu "Giải pháp" (820px): căn giữa dưới nút để không tràn mép phải
      ở 1024–1366px, kể cả khi đang ẩn (trước đây gây thanh cuộn ngang). */
.has-menu > .menu-panel.w-\[820px\] {
  left: 50%;
  margin-left: -410px;
  max-width: calc(100vw - 2rem);
}