/* =================================================================
   AutoSPC — Bung vừa khít màn hình (máy tính / máy tính bảng / điện thoại)
   File: css/fix-responsive.css — nạp SAU css/style.css trong index.html
   Dùng selector ".view ..." để thắng các <style> do main.js / solar.js /
   cable.js chèn vào <head> lúc chạy.
   Cập nhật: 20/08/2026
   ================================================================= */

/* -----------------------------------------------------------------
   1. Không để cột lưới bị "phình" theo nội dung bên trong
   ----------------------------------------------------------------- */
.app, .main, .view { min-width: 0; }
.view .sx-wrap,
.view .cb-wrap,
.view .panel-grid { min-width: 0; }
.view .sx-wrap > *,
.view .cb-wrap > *,
.view .panel-grid > * { min-width: 0; }

/* -----------------------------------------------------------------
   2. Khối và ảnh không vượt quá bề ngang khung chứa
   ----------------------------------------------------------------- */
.view .sx-card,
.view .cb-card,
.view .panel,
.view .table-panel { max-width: 100%; }
.view table { max-width: 100%; }
.view img, .view svg { max-width: 100%; height: auto; }

/* Bảng số liệu tự cuộn ngang TRONG khung của nó, không đẩy vỡ cả trang */
.view .cb-scroll,
.view .mbax-tbwrap { min-width: 0; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* -----------------------------------------------------------------
   3. MÁY TÍNH — bung hết chiều ngang màn hình
   style.css khoá .main ở max-width:1080px nên màn 1440/1920 bị đứng yên,
   thừa khoảng trắng hai bên. Bỏ trần để nội dung bung full.
   ----------------------------------------------------------------- */
.main { width: 100%; max-width: none; margin-left: 0; margin-right: 0; }

/* Màn rất rộng: nới đệm hai bên cho đỡ sát mép */
@media (min-width: 1600px) { .main { padding-left: 28px; padding-right: 28px; } }
@media (min-width: 2000px) { .main { padding-left: 40px; padding-right: 40px; } }

/* -----------------------------------------------------------------
   4. LƯỚI 2 CỘT (form bên trái / kết quả bên phải)
   LƯU Ý: bản cũ đặt rule 2 cột KHÔNG kèm media query. Vì nó có 2 class
   (.view .cb-wrap = 0-2-0) nên đè chết breakpoint gốc của site
   (@media max-width:1150px { .cb-wrap {1fr} } = 0-1-0). Hậu quả: trên
   điện thoại lưới vẫn cố giữ 2 cột, cột phải bị bóp còn 0px và nội dung
   tràn ra ngoài 159px → trang phải vuốt ngang.
   Cách sửa: mặc định 1 cột, chỉ bật 2 cột khi màn đủ rộng.
   ----------------------------------------------------------------- */
.view .sx-wrap,
.view .cb-wrap { grid-template-columns: minmax(0, 1fr); }

@media (min-width: 1181px) {
  .view .sx-wrap { grid-template-columns: minmax(320px, 420px) minmax(0, 1fr); }
  .view .cb-wrap { grid-template-columns: minmax(320px, 440px) minmax(0, 1fr); }
}
@media (min-width: 1600px) {
  .view .sx-wrap { grid-template-columns: minmax(360px, 460px) minmax(0, 1fr); }
  .view .cb-wrap { grid-template-columns: minmax(360px, 480px) minmax(0, 1fr); }
}

@media (max-width: 1180px) {
  .view .panel-grid { grid-template-columns: 1fr; }
}

/* -----------------------------------------------------------------
   5. MÁY TÍNH BẢNG
   ----------------------------------------------------------------- */
@media (max-width: 900px) {
  .view .cb-3, .view .mbax-row3 { grid-template-columns: 1fr 1fr; }
}

/* -----------------------------------------------------------------
   6. ĐIỆN THOẠI
   ----------------------------------------------------------------- */
@media (max-width: 640px) {
  .main { padding-left: 12px; padding-right: 12px; }
  .view .sx-card, .view .cb-card, .view .panel { padding: 14px; }

  .view .sx-2, .view .cb-2, .view .cb-3,
  .view .mbax-row, .view .mbax-row3 { grid-template-columns: 1fr; }
  .view .sx-hero, .view .cb-hero { grid-template-columns: 1fr 1fr; }
  .view .sx-grid, .view .cb-grid, .view .mbax-g { grid-template-columns: 1fr 1fr; }

  .view .sx-tb, .view .mbax-tb, .view .cb-tb, .view .cb-load { font-size: 12px; }
  .view .sx-tb th,   .view .sx-tb td,
  .view .mbax-tb th, .view .mbax-tb td,
  .view .cb-tb th,   .view .cb-tb td,
  .view .cb-load th, .view .cb-load td { padding: 6px 5px; }

  .view-header h2 { font-size: 19px; line-height: 1.35; }
  .view .sx-seg button, .view .cb-seg button { font-size: 12px; padding: 8px 4px; }

  /* Vùng bấm tối thiểu 42px; font 16px để iOS không tự phóng to khi focus */
  .view input, .view select, .view button { min-height: 42px; font-size: 16px; }
}

/* Điện thoại nhỏ (iPhone SE...) */
@media (max-width: 380px) {
  .view .sx-hero, .view .cb-hero,
  .view .sx-grid, .view .cb-grid, .view .mbax-g { grid-template-columns: 1fr; }
}

/* -----------------------------------------------------------------
   7. Icon / tiêu đề (giữ nguyên từ bản cũ)
   ----------------------------------------------------------------- */
.nav-ico img { width: 18px; height: 18px; display: block; margin: 0 auto; }
.tool-ico { line-height: 0; }
.tool-ico img { width: 30px; height: 30px; display: block; }
.view-header h2 { display: flex; align-items: center; gap: 8px; }
.view-header h2 .h2-ico { width: 26px; height: 26px; flex: 0 0 auto; }
.au-chip .chip-ico { width: 13px; height: 13px; vertical-align: -2px; margin-right: 4px; }
@media (max-width: 640px) {
  .view-header h2 .h2-ico { width: 22px; height: 22px; }
}

/* ==========================================================================
   AutoSPC — RESPONSIVE V2 (bổ sung 20/08/2026)
   Mục tiêu: mọi màn hình (điện thoại → màn hình lớn) đều tự giãn vừa khít,
   không tràn ngang, không thừa khoảng trống.
   ========================================================================== */

/* --- 1. Chống tràn ngang toàn cục ---------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { max-width: 100%; overflow-x: clip; }
img, svg, video, canvas, iframe { max-width: 100%; height: auto; }
.app, .main, .view, .sidebar, .hotline-bar { min-width: 0; }

/* --- 2. Chiều cao đúng trên điện thoại (thanh địa chỉ trượt) -------------- */
.app { min-height: 100svh; }
.sidebar { height: 100svh; }

/* --- 3. Lề & cỡ chữ tự giãn theo bề ngang màn hình ------------------------ */
.main { padding: clamp(16px, 2.2vw, 34px) clamp(14px, 2.4vw, 40px) 60px; }
.hero h1, .hero h2, .view-header h2 { font-size: clamp(19px, 2.2vw, 30px); line-height: 1.3; }
.hero p, .view-header p { font-size: clamp(13px, 1.05vw, 15.5px); }

/* --- 4. Dải 901–1180px: thu gọn sidebar để nội dung rộng hơn -------------- */
@media (min-width: 901px) and (max-width: 1180px) {
  .app { grid-template-columns: 214px 1fr; }
  .sidebar { padding: 16px 10px; }
  .nav-link { font-size: 13px; padding: 9px 10px; }
  .brand-text { font-size: 12px; }
}

/* --- 5. BẢNG: cho xuống dòng thay vì phải kéo ngang -------------------- */
.view .table-scroll,
.view .cb-scroll,
.view .mbax-tbwrap { -webkit-overflow-scrolling: touch; scrollbar-width: thin; }

@media (max-width: 1180px) {
  .view table,
  .view .cb-tb, .view .sx-tb, .view .mbax-tb, .view .cb-load {
    width: 100%;
    table-layout: auto;
  }
  .view table th, .view table td,
  .view .cb-tb th, .view .cb-tb td,
  .view .sx-tb th, .view .sx-tb td,
  .view .mbax-tb th, .view .mbax-tb td,
  .view .cb-load th, .view .cb-load td {
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
  }
}

@media (max-width: 760px) {
  .view table,
  .view .cb-tb, .view .sx-tb, .view .mbax-tb, .view .cb-load { font-size: 12px; }
  .view table th, .view table td { padding: 6px 6px; }
  .view table th { font-size: 10.5px; letter-spacing: 0; }
  .view .sx-tb .num, .view .cb-tb .num, .view .mbax-tb .num { white-space: normal; }
}

@media (max-width: 430px) {
  .view table,
  .view .cb-tb, .view .sx-tb, .view .mbax-tb, .view .cb-load { font-size: 11px; }
  .view table th, .view table td { padding: 5px 4px; }
  .view table small { font-size: 10px; }
}

/* --- 6. Ô nhập liệu: đủ lớn để bấm, không bị iOS phóng to ----------------- */
@media (max-width: 900px) {
  .view input, .view select, .view textarea {
    width: 100%;
    min-height: 44px;
    font-size: 16px;
  }
  .view button, .view .btn, .view .sx-seg button, .view .cb-seg button { min-height: 44px; }
}

/* --- 7. Lưới kết quả & thanh hotline trên màn nhỏ ------------------------- */
@media (max-width: 520px) {
  .result-grid { grid-template-columns: 1fr; }
  .view .panel-grid, .view .sx-2, .view .cb-2, .view .cb-3 { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  .hotline-bar { gap: 2px 14px; padding: 6px 10px; font-size: 12px; }
  .hotline-bar strong, .hotline-bar b { font-size: 14px; }
  .chip-row { gap: 6px; }
}

/* --- 8. Màn hình lớn: dùng hết bề ngang, giới hạn cho màn siêu rộng ------ */
@media (min-width: 1500px) {
  .view .panel-grid { grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); }
  .card-grid { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
}

@media (min-width: 2400px) {
  .main { max-width: 2200px; margin-left: auto; margin-right: auto; }
}

/* --- 9. Bảng luôn co theo cột chứa nó (kể cả màn hình lớn chia 2 cột) ---- */
.view table,
.view .cb-tb, .view .sx-tb, .view .mbax-tb, .view .cb-load {
  width: 100%;
  table-layout: auto;
}
.view table th, .view table td,
.view .cb-tb th, .view .cb-tb td,
.view .sx-tb th, .view .sx-tb td,
.view .mbax-tb th, .view .mbax-tb td,
.view .cb-load th, .view .cb-load td {
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* --- 10. Khối thương hiệu AutoSPC trên sidebar (bố cục căn giữa) --- */
.brand {
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 16px 12px 13px;
  text-align: center;
  background: linear-gradient(180deg, #ffffff, #eef4fd);
  box-shadow: 0 8px 20px rgba(5, 16, 44, 0.28);
}
.brand-mark {
  height: 48px;
  width: auto;
  filter: drop-shadow(0 3px 6px rgba(20, 49, 107, 0.25));
}
.brand-text { align-items: center; }
.brand-text strong {
  font-size: 23px;
  line-height: 1.15;
  letter-spacing: 0.5px;
  white-space: nowrap;
  position: relative;
  padding-bottom: 9px;
  margin-bottom: 6px;
}
.brand-text strong::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 46px;
  height: 3px;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--blue-600, #1d4ed8), var(--amber-500, #f59e0b));
}
.brand-text > span {
  font-size: 10px;
  color: #5b6b85;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  font-weight: 600;
}
@media (min-width: 901px) and (max-width: 1180px) {
  .brand-text strong { font-size: 20px; }
  .brand-mark { height: 42px; }
}

/* Tên AutoSPC: thắng quy tắc chung .brand-text span (11px đen) của style.css */
.brand-text strong span { font-size: inherit; line-height: inherit; }
.brand-text span.brand-auto { color: var(--blue-600, #1d4ed8); }
.brand-text span.brand-spc { color: var(--amber-500, #f59e0b); }