/* ============================================================
   responsive.css — Fix responsive mobile/tablet cho toàn bộ site Thinksmart
   Ngày: 17/08/2026 (bản 2 — sửa specificity + polish iPhone 15 Pro Max)
   Nguyên tắc:
   - 100% rule nằm TRONG @media (max-width) => KHÔNG ảnh hưởng giao diện desktop.
   - File được link từ 01-header.php (file include chung MỌI trang: home + subpage).
   - ⚠️ QUAN TRỌNG (bài học 17/08/2026): link đứng TRƯỚC <style> của các section file
     (02-hero, 03-tam-nhin...) nên rule CÙNG độ đặc hiệu sẽ THUA rule trong section.
     => Mọi rule đối đầu với section phải có tiền tố `body ` (tăng specificity lên 0,1,1).
   - Nếu cần sửa tiếp: thêm rule vào đúng block @media, nhớ tiền tố `body ` nếu
     selector trùng với class trong section.
   ============================================================ */

/* ===== Toàn mobile: chống iOS tự phóng chữ + tap highlight + double-tap zoom ===== */
@media (max-width:767px){
  html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
  a,button,input,select,textarea{touch-action:manipulation}
  a,button{-webkit-tap-highlight-color:rgba(255,102,0,0.14)}
}

/* ===== Header: màn hình rất nhỏ (<=480px) tránh tràn ngang ===== */
@media (max-width:480px){
  .header-block{gap:6px;padding:0 10px}
  /* Ẩn cờ ngôn ngữ khi không đủ chỗ (giữ nút tìm kiếm + CTA + hamburger) */
  body .gtranslate_wrapper{display:none}
  body .btn-contact{padding:0 12px;font-size:9.5px;gap:5px}
  body .logo .custom-logo{height:30px}
}

/* ===== Header chung mobile: input search 16px để iOS không tự zoom ===== */
@media (max-width:767px){
  .ts-search-box input{font-size:16px}
}

/* ===== HERO (02-hero.php) ===== */
@media (max-width:767px){
  /* svh: chiều cao khớp viewport thực khi URL bar mobile thu lại — tránh nhảy layout */
  body #hero.hero-section{min-height:calc(100svh - 72px)}
  body .hero-inner{padding:36px 20px}
  body .hero-top{flex-wrap:wrap;gap:10px;margin-bottom:32px}
  body .hero-top-right{font-size:9px;white-space:normal;text-align:right;line-height:1.4}
  body .hero-desc{font-size:14.5px}
}
@media (max-width:480px){
  /* Dòng trạng thái phụ "TẬP ĐOÀN CÔNG NGHỆ..." quá dài -> ẩn trên màn hình rất nhỏ */
  body .hero-top-right{display:none}
  /* 2 nút CTA xếp chồng full-width dễ bấm bằng tay */
  body .hero-actions .btn-primary,
  body .hero-actions .btn-secondary{width:100%;justify-content:center;padding:0 16px}
}

/* ===== TẦM NHÌN (03-tam-nhin.php) ===== */
@media (max-width:767px){
  body .vision-top{flex-wrap:wrap;gap:12px;margin-bottom:32px}
  body .vision-top-right{white-space:normal;text-align:right;font-size:9px;line-height:1.4}
  body .vision-head{margin-bottom:40px}
  /* Card min-height 420px cố định -> để tự nở theo nội dung, tránh trống trơn trên mobile */
  body .vm-card{min-height:auto}
  body .vm-card-top{flex-wrap:wrap;gap:8px}
  body .history-left{min-height:auto}
  body .history-big{font-size:clamp(52px,14vw,72px)}
}

/* ===== HỆ SINH THÁI & MẠNG LƯỚI (04-zFix-bản-đồ-Thinksmart.php) ===== */
@media (max-width:767px){
  body .eco-top{flex-wrap:wrap;gap:10px;margin-bottom:24px}
  body .eco-top-right{white-space:normal;text-align:right;font-size:9px;line-height:1.4}
  body .eco-head{margin-bottom:32px}
  body .map-card{padding:12px}
  body .map-viewport{padding:8px}
}

/* ===== KHÁM PHÁ (08-kham-pha.php) ===== */
@media (max-width:767px){
  /* Card cao 420px cố định -> co lại còn 360px cho vừa màn hình nhỏ */
  body .kp-card{min-height:360px}
}

/* ===== SUBPAGE chung ===== */
@media (max-width:767px){
  body .gt-act-card{min-height:240px}
  body .gt-lead-card{padding:24px;gap:16px}
  body .gt-cert-card{padding:24px}
  body .gt-hero-inner{padding:32px 20px}
}

/* ===== Footer (09-footer (1).php) ===== */
@media (max-width:767px){
  body .ft-inner{padding:0 20px}
  body .ft-grid{gap:36px}
}