/* ============================================================
   UNIVISTA MOBILE DESIGN SYSTEM v1 — 17/07/2026
   Chuan so lieu ap dung (Apple HIG / Material Design / NN-g):
   1. Vung cham toi thieu 44x44px, khoang cach targets >= 8px
   2. Font input >= 16px (chong iOS tu zoom khi go)
   3. Bo loc/chip: 1 hang CUON NGANG — khong xep chong 3-4 hang
   4. Data-first: du lieu phai xuat hien trong man hinh dau tien
      (banner huong dan an tren mobile)
   5. Safe-area cho notch + home indicator
   6. Tuong phan WCAG AA >= 4.5:1 cho text chinh
   Ap dung <= 768px — desktop giu nguyen 100%.
   ============================================================ */
@media (max-width: 768px) {

  /* --- 1. TYPOGRAPHY & INPUT --- */
  input, select, textarea { font-size: 16px !important; }
  body { -webkit-text-size-adjust: 100%; }

  /* --- 2. TOUCH TARGET >= 44px cho nut & chip pho bien --- */
  button:not(.uv-inline-x), .ms-cta, .msg-btn, .uvx-btn,
  select.pr-flt {
    min-height: 44px;
  }
  .dxx-fchip, .dxx-vtab {
    display: inline-flex !important; align-items: center;
    min-height: 40px; padding: 8px 14px !important;
    font-size: 14px !important; border-radius: 10px !important;
  }

  /* --- 3. HANG LOC/CHIP: 1 hang cuon ngang --- */
  .dxx-bar {
    display: flex !important; flex-wrap: nowrap !important;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    gap: 8px; padding-bottom: 4px;
    scrollbar-width: none;
  }
  .dxx-bar::-webkit-scrollbar { display: none; }
  .dxx-bar > * { flex: 0 0 auto; white-space: nowrap; }
  .pr-filter-bar {
    display: flex !important; flex-wrap: nowrap !important;
    overflow-x: auto; gap: 8px; scrollbar-width: none;
  }
  .pr-filter-bar::-webkit-scrollbar { display: none; }

  /* --- 4. DATA-FIRST: an banner huong dan tren mobile --- */
  #uv-guide-strip { display: none !important; }

  /* --- 5. SEARCH: sticky + du cao cham --- */
  .dxx-search {
    position: sticky; top: 0; z-index: 5;
    min-height: 44px; font-size: 16px !important;
  }

  /* --- 6. BANG DU LIEU: cuon ngang thay vi vo layout --- */
  .uvx-content table {
    display: block; max-width: 100%;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
  }

  /* --- 7. DRAWER: rong chuan + khong thua khoang trang --- */
  .uvx-sidebar.is-open { width: min(320px, 85vw) !important; }

  /* --- 8. CONTENT PADDING theo luoi 8pt --- */
  .uvx-content { padding-left: 12px !important; padding-right: 12px !important; }

  /* --- 9. TUONG PHAN: label xam nhat -> dam hon (WCAG AA) --- */
  .uvx-state__hint, .dxx-pkh { color: #4B5563 !important; }
}

/* ============================================================
   v2 — 17/07 chieu: quet A-Z toan bo trang
   ============================================================ */
@media (max-width: 768px) {

  /* --- 10. MEDIA khong duoc trao man hinh --- */
  img, video, canvas, svg { max-width: 100%; height: auto; }

  /* --- 11. SAN CHU TOI THIEU 12px (WCAG floor) —
         inline font-size 6-11px -> nang len 12px --- */
  [style*="font-size:10px"], [style*="font-size: 10px"],
  [style*="font-size:11px"], [style*="font-size: 11px"],
  [style*="font-size:9px"],  [style*="font-size: 9px"],
  [style*="font-size:8px"],  [style*="font-size: 8px"] {
    font-size: 12px !important;
  }

  /* --- 12. KHOI CO DINH RONG (dialog/panel 500-900px) -> co gian --- */
  [style*="width:500px"], [style*="width: 500px"],
  [style*="width:600px"], [style*="width: 600px"],
  [style*="width:700px"], [style*="width: 700px"],
  [style*="width:800px"], [style*="width: 800px"],
  [style*="width:900px"], [style*="width: 900px"] {
    width: 100% !important; max-width: 100% !important;
  }
  [style*="min-width:500px"], [style*="min-width: 500px"],
  [style*="min-width:600px"], [style*="min-width: 600px"] {
    min-width: 0 !important;
  }

  /* --- 13. BANG: cuon ngang o MOI trang (khong chi uvx-content) --- */
  table { max-width: 100%; display: block; overflow-x: auto;
          -webkit-overflow-scrolling: touch; }

  /* --- 14. NUT BAM NHO inline (x, del, badge co onclick) ->
         vung cham toi thieu 32px (compromise layout, chuan 44 cho nut chinh) --- */
  .file-rm, .del-btn, .pi-hub, .dxx-pstage[onclick], span[onclick] {
    min-height: 32px; min-width: 32px;
    display: inline-flex; align-items: center; justify-content: center;
  }

  /* --- 15. FORM control chuan cham --- */
  select, input[type="date"], input[type="time"], input[type="number"] {
    min-height: 44px;
  }
  label { display: inline-block; padding: 4px 0; }

  /* --- 16. KHOANG CACH GIUA CAC TARGET >= 8px trong hang nut --- */
  .msg-row, .dxx-bar, .pr-filter-bar { gap: 8px; }
}

/* ============================================================
   v3 — 17/07: CHONG LANG + HEADER DINH + THANG CHU CHUAN
   (tu screenshot iPhone anh Linh: trang tran ngang -> luot bi lang,
    header khong dinh -> noi dung de len vung dong ho)
   ============================================================ */
@media (max-width: 768px) {

  /* --- 17. CHONG TRAN NGANG TOAN CUC = het "lang" khi luot --- */
  html, body { overflow-x: hidden !important; max-width: 100vw; }
  .uvx-main, .uvx-content { overflow-x: hidden; max-width: 100vw; }

  /* --- 18. HEADER DINH TREN CUNG khi cuon + ne tai tho iPhone --- */
  .uvx-topbar {
    position: sticky !important; top: 0; z-index: 60;
    background: #fff;
    padding-top: max(6px, env(safe-area-inset-top));
    box-shadow: 0 1px 0 #E5E7EB;
  }

  /* --- 19. LUOI SO LIEU DU AN (ph-cards): 3 cot, so tu xuong dong --- */
  .ph-cards {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px !important;
  }
  .ph-card { min-width: 0; }
  .ph-card .v {
    font-size: 19px !important;
    overflow-wrap: anywhere; word-break: break-word;
    line-height: 1.25;
  }
  .ph-card .l { font-size: 12px !important; }

  /* --- 20. THANG CHU CHUAN TOAN APP (type scale 1.2) ---
     H1/pagehead 20 · section 16 · body 14-15 · caption 12 */
  .uv-pagehead__tt { font-size: 20px !important; }
  h1 { font-size: 22px !important; }
  h2 { font-size: 18px !important; }
  h3 { font-size: 16px !important; }
  .uvx-content { font-size: 14.5px; }

  /* --- 21. TAB NGANG (Tong quan/Thi cong/...): cuon ngang, khong tran --- */
  .hub-tabs, .uvx-tabs, [class*="tabbar"], [class*="tab-row"] {
    display: flex; flex-wrap: nowrap; overflow-x: auto;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
    max-width: 100vw;
  }
}

/* --- 22. [17/07] FAB/toast neo day: nang len tren thanh dieu huong --- */
@media (max-width: 768px) {
  .st-fab { bottom: 86px !important; }
}

/* --- 23. [17/07] bottomnav goc: chu doc duoc + safe-area + body padding --- */
@media (max-width: 768px) {
  .uvx-bottomnav { padding-bottom: max(12px, env(safe-area-inset-bottom)) !important; }
  .uvx-bottomnav a { font-size: 11.5px !important; font-weight: 600; }
  body { padding-bottom: 76px; }
}


/* ===== 24. PERF24 (17/07): breadcrumb mobile 1 dong + bang CDT admin gon ===== */
@media (max-width: 768px) {
  /* Breadcrumb: chi hien trang hien tai, khong wrap 2-3 dong chiem header */
  .uvx-breadcrumb { flex-wrap: nowrap !important; overflow: hidden; }
  .uvx-breadcrumb a, .uvx-breadcrumb .uvx-crumb-sep { display: none !important; }
  .uvx-breadcrumb .uvx-crumb-cur {
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    max-width: 70vw; font-weight: 700; font-size: 15px; color: #1C1C2E;
  }
  /* Bang Tai khoan CDT (admin): giu cot du rong + cuon ngang, het row cao vut */
  .cdt-table { min-width: 900px; }
  .cdt-table th, .cdt-table td { padding: 6px 8px; font-size: 12px; white-space: nowrap; }
  .cdt-table td:nth-child(2) { white-space: normal; min-width: 140px; }
}