/* =========================================================
   KAZUKO LAUNDRY V80
   MOBILE FONT + MEDIA VIEWER
   ========================================================= */

/* Chỉ tăng chữ trên màn hình điện thoại, không ảnh hưởng in K80 */
@media screen and (max-width:600px){

  html{
    -webkit-text-size-adjust:118% !important;
    text-size-adjust:118% !important;
  }

  body,
  .app,
  .page,
  .card,
  .listCard,
  .orderCard40,
  .settingSheet,
  .settingItem,
  .sheet41,
  .modalBody{
    font-size:14px;
  }

  button,
  .primary,
  .outline,
  .miniBtn,
  input,
  select,
  textarea{
    font-size:13px !important;
  }

  label{
    font-size:13px !important;
  }

  small,
  .muted,
  .hint,
  .settingItem small{
    font-size:12px !important;
  }

  .orderCard40 b,
  .orderCard40 strong,
  .settingItem b{
    font-size:13px !important;
  }

  /* Media cũ cũng tăng chữ nút */
  .kzMediaSavedTitle,
  .kzSrvMediaTitle{
    font-size:13px !important;
  }

  .kzMediaActions button,
  .kzSrvBtn{
    font-size:12px !important;
    min-height:36px !important;
  }
}

/* ============ VIEWER ẢNH / VIDEO MỚI ============ */

.kzMediaViewer80{
  position:fixed;
  inset:0;
  z-index:999999;
  background:rgba(0,0,0,.94);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:
    max(12px,env(safe-area-inset-top))
    10px
    max(12px,env(safe-area-inset-bottom));
  box-sizing:border-box;
}

.kzMediaViewer80.hidden80{
  display:none !important;
}

.kzMediaViewerHead80{
  position:absolute;
  top:max(10px,env(safe-area-inset-top));
  left:10px;
  right:10px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  z-index:2;
  pointer-events:none;
}

.kzMediaViewerTitle80{
  color:#fff;
  font-size:14px;
  font-weight:800;
  text-shadow:0 1px 2px #000;
}

.kzMediaViewerClose80{
  pointer-events:auto;
  border:0 !important;
  background:#fff !important;
  color:#222 !important;
  border-radius:999px !important;
  width:44px !important;
  height:44px !important;
  min-width:44px !important;
  min-height:44px !important;
  padding:0 !important;
  display:grid !important;
  place-items:center !important;
  font-size:22px !important;
  font-weight:900 !important;
  box-shadow:0 3px 15px rgba(0,0,0,.35);
}

.kzMediaViewerContent80{
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}

.kzMediaViewerContent80 img,
.kzMediaViewerContent80 video{
  max-width:100%;
  max-height:calc(100dvh - 90px);
  width:auto;
  height:auto;
  object-fit:contain;
  border-radius:8px;
  background:#000;
}

@media screen and (max-width:600px){
  .kzMediaViewer80{
    padding-top:65px;
  }

  .kzMediaViewerContent80 img,
  .kzMediaViewerContent80 video{
    max-height:calc(100dvh - 85px);
  }
}

/* Khi viewer mở không cho trang phía sau chạy */
body.kzMediaViewerOpen80{
  overflow:hidden !important;
  touch-action:none;
}

/* =========================================================
   V82 - MOBILE DỊCH VỤ / BẢNG GIÁ COMPACT
   ========================================================= */
@media screen and (max-width:600px){

  /* Giữ 2 ô / hàng nhưng bỏ chiều cao dư */
  #catalog .catalogGrid{
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    grid-auto-rows:auto !important;
    align-items:start !important;
    gap:8px !important;
  }

  #catalog .catalogCard{
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    aspect-ratio:auto !important;

    padding:9px !important;
    margin:0 !important;
    border-radius:14px !important;

    display:flex !important;
    flex-direction:column !important;
    justify-content:flex-start !important;
    gap:8px !important;
  }

  /* Tên + giá gọn ở phía trên */
  #catalog .catalogCard .listHead{
    min-height:48px !important;
    margin:0 !important;
    padding:0 !important;
    align-items:flex-start !important;
  }

  #catalog .catalogCard .listHead > div:first-child{
    gap:6px !important;
    min-width:0 !important;
  }

  #catalog .catalogCard .svcIcon39{
    width:38px !important;
    height:38px !important;
    min-width:38px !important;
    font-size:25px !important;
  }

  #catalog .catalogCard .listHead b{
    font-size:13.5px !important;
    line-height:1.15 !important;
  }

  #catalog .catalogCard .price{
    font-size:15px !important;
    line-height:1.1 !important;
    white-space:nowrap !important;
  }

  /* Nếu có dòng mô tả phụ thì thu gọn */
  #catalog .catalogCard .muted{
    font-size:10px !important;
    line-height:1.1 !important;
    margin-top:2px !important;
  }

  /* Các nút nằm ngay dưới, không đẩy xuống cuối ô */
  #catalog .catalogCard .actions{
    position:static !important;
    margin:0 !important;
    margin-top:3px !important;
    padding:0 !important;

    display:grid !important;
    grid-template-columns:minmax(0,1fr) 42px 42px !important;
    gap:5px !important;
  }

  #catalog .catalogCard .actions button{
    min-height:36px !important;
    height:36px !important;
    padding:4px 6px !important;
    margin:0 !important;
    font-size:11.5px !important;
    border-radius:9px !important;
  }

  /* Chừa khoảng cho menu dưới */
  #catalog .catalogGrid{
    padding-bottom:105px !important;
  }
}

/* Máy nhỏ vẫn giữ 2 cột */
@media screen and (max-width:390px){
  #catalog .catalogGrid{
    gap:6px !important;
  }

  #catalog .catalogCard{
    padding:8px !important;
  }

  #catalog .catalogCard .price{
    font-size:14px !important;
  }
}
/* ===== END V82 ===== */

/* =========================================================
   V83 - DỊCH VỤ MOBILE: DỒN CÁC HÀNG LÊN TRÊN
   ========================================================= */
@media screen and (max-width:600px){

  #catalog .catalogGrid{
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;

    /* Quan trọng: không chia đều các hàng theo chiều cao màn hình */
    align-content:start !important;
    justify-content:stretch !important;
    align-items:start !important;

    grid-auto-rows:max-content !important;
    grid-auto-flow:row !important;

    row-gap:8px !important;
    column-gap:8px !important;

    height:auto !important;
    min-height:0 !important;
    max-height:none !important;

    padding-bottom:110px !important;
  }

  #catalog .catalogCard{
    height:auto !important;
    min-height:0 !important;
    align-self:start !important;
    margin:0 !important;
  }
}

@media screen and (max-width:390px){
  #catalog .catalogGrid{
    row-gap:6px !important;
    column-gap:6px !important;
  }
}
/* ===== END V83 ===== */

/* =========================================================
   V84 - IOS SAFARI VIEWPORT / INPUT ZOOM FIX
   ========================================================= */
@media screen and (max-width:600px){

  /*
   iPhone Safari tự zoom nếu input < 16px.
   Bắt buộc >=16px để mở bàn phím nhưng không phóng giao diện.
  */
  input,
  textarea,
  select,
  input[type="text"],
  input[type="search"],
  input[type="tel"],
  input[type="number"],
  input[type="password"],
  input[type="email"]{
    font-size:16px !important;
  }

  html,
  body{
    width:100% !important;
    max-width:100% !important;
    overflow-x:hidden !important;
  }

  body{
    min-width:0 !important;
  }

  .app,
  .page,
  main{
    max-width:100vw !important;
    min-width:0 !important;
  }

  button,
  a,
  input,
  select,
  textarea{
    touch-action:manipulation;
  }
}
/* ===== END V84 ===== */

/* =========================================================
   V85 - REAL IPHONE / IOS SAFARI STABLE LAYOUT
   ========================================================= */

/* Chỉ áp dụng riêng Safari/iPhone */
@supports (-webkit-touch-callout: none){

  @media screen and (max-width:600px){

    /*
     Không dùng text inflation của Safari.
     Chữ lớn bằng font-size thật, tránh khác PC.
    */
    html{
      -webkit-text-size-adjust:100% !important;
      text-size-adjust:100% !important;
      width:100% !important;
      overflow-x:hidden !important;
    }

    body{
      width:100% !important;
      min-width:0 !important;
      max-width:100% !important;
      overflow-x:hidden !important;
    }

    /*
     >=16px: Safari không tự zoom khi chạm input
    */
    input,
    textarea,
    select,
    input[type="text"],
    input[type="search"],
    input[type="tel"],
    input[type="number"],
    input[type="password"],
    input[type="email"]{
      font-size:16px !important;
      -webkit-appearance:none;
    }

    /*
     DỊCH VỤ / BẢNG GIÁ:
     xóa hoàn toàn grid-template-row cũ có thể bị Safari kéo giãn
    */
    #catalog .catalogGrid{
      display:grid !important;

      grid-template-columns:
        repeat(2,minmax(0,1fr)) !important;

      grid-template-rows:none !important;
      grid-auto-rows:max-content !important;

      grid-auto-flow:row !important;

      align-content:start !important;
      justify-content:stretch !important;
      align-items:start !important;

      place-content:start stretch !important;

      row-gap:8px !important;
      column-gap:8px !important;

      height:max-content !important;
      min-height:0 !important;
      max-height:none !important;

      flex:none !important;

      padding-bottom:110px !important;
    }

    #catalog .catalogCard{
      height:auto !important;
      min-height:0 !important;
      max-height:none !important;

      align-self:start !important;
      justify-self:stretch !important;

      flex:none !important;

      margin:0 !important;
    }

    #catalog .catalogCard .listHead{
      min-height:46px !important;
      height:auto !important;
    }

    #catalog .catalogCard .actions{
      position:static !important;
      margin-top:4px !important;
    }

    /*
     Không để container cha chia đều khoảng trống
    */
    #catalog,
    #catalog .pageBody,
    #catalog .catalogBody{
      align-content:start !important;
      justify-content:flex-start !important;
    }

    /*
     Giữ chữ mobile rõ như anh đang thích,
     không phụ thuộc text-size-adjust.
    */
    body,
    button,
    .card,
    .catalogCard,
    .orderCard40,
    .settingItem{
      font-size:14px !important;
    }

    small,
    .muted,
    .hint{
      font-size:11.5px !important;
    }
  }
}

/* ===== END V85 ===== */