/* =========================================================
   VPSRE MOBILE OPTIMIZATION V1
   Global responsive overrides for public site
   ========================================================= */

/* Base safety */
html,body{max-width:100%;overflow-x:hidden}
img,video,iframe,svg{max-width:100%}
button,a,input,select,textarea{-webkit-tap-highlight-color:transparent}
input,select,textarea{font-size:16px!important} /* tránh iOS tự zoom */
body{word-break:normal;overflow-wrap:anywhere}

/* Tablet */
@media(max-width:900px){
  .container,
  .vps-global-container,
  .home-container{
    width:min(100% - 20px,1180px)!important;
  }

  /* Global header */
  .vps-global-header{position:sticky!important;top:0!important}
  .vps-global-header__top-inner{min-height:60px!important;gap:8px!important}
  .vps-global-logo{flex:0 0 auto!important;width:auto!important}
  .vps-global-logo strong{font-size:18px!important}
  .vps-global-logo small{display:none!important}
  .vps-global-location{
    margin-left:auto!important;
    width:min(260px,44vw)!important;
    flex-basis:min(260px,44vw)!important;
  }
  .vps-global-filter{display:none!important}
  .vps-global-toggle{display:block!important}
  .vps-global-categories{
    min-height:40px!important;
    align-items:center!important;
    gap:18px!important;
    padding-bottom:0!important;
  }
  .vps-global-categories a{
    min-height:40px!important;
    font-size:13px!important;
  }

  /* Generic page */
  .page{padding:18px 0 36px!important}
  .content-card{padding:16px!important}
  .section{padding:30px 0!important}
  .section-head{align-items:flex-start!important}
  .section-head h1,.section-head h2{font-size:22px!important}

  /* Listings */
  .listing-layout{grid-template-columns:1fr!important;gap:14px!important}
  .filter-card{
    position:static!important;
    padding:14px!important;
  }
  .listing-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:10px!important;
  }
  .listing-card{border-radius:12px!important}
  .listing-body{padding:11px!important}
  .listing-body h3{font-size:14px!important}
  .price{font-size:15px!important}
  .meta{font-size:11px!important}

  /* Detail */
  .room-detail-shell{
    width:min(100% - 12px,1000px)!important;
    display:block!important;
  }
  .room-detail-ad{display:none!important}
  .room-detail-layout{grid-template-columns:1fr!important;gap:10px!important}
  .room-detail-sidebar{position:static!important}
  .room-owner-card{order:1!important}
  .room-featured-sidebar{order:2!important}
  .room-media-stage{height:min(60vw,430px)!important}
  .room-media-thumbs{padding:8px!important}
  .room-info-card,.room-section-card{padding:15px!important;margin-bottom:10px!important}
  .room-info-card h1{font-size:19px!important}
  .room-amenity-grid{grid-template-columns:repeat(3,1fr)!important}
  .room-map{height:270px!important}

  /* Post room */
  .post-room-page{display:block!important}
  .post-account-sidebar{
    position:static!important;
    height:auto!important;
    border-right:0!important;
    border-bottom:1px solid #e5e7eb!important;
  }
  .post-profile,.post-wallet,.post-support{display:none!important}
  .post-side-menu{
    display:flex!important;
    overflow-x:auto!important;
    white-space:nowrap!important;
    padding:7px 8px!important;
    -webkit-overflow-scrolling:touch;
  }
  .post-side-menu a{
    flex:0 0 auto!important;
    padding:9px 10px!important;
    border-left:0!important;
    border-bottom:2px solid transparent!important;
  }
  .post-side-menu a.active{border-bottom-color:#0b63e5!important}
  .post-workspace-head{
    top:101px!important;
    padding:11px 10px 0!important;
  }
  .post-workspace-head h1{font-size:20px!important}
  .post-step-tabs{
    gap:16px!important;
    overflow-x:auto!important;
    -webkit-overflow-scrolling:touch;
  }
  .post-step-tabs a{font-size:12px!important}
  .post-form-wrap{
    width:100%!important;
    max-width:760px!important;
    padding:0 10px!important;
    margin:12px auto 40px!important;
  }
  .post-card{
    padding:15px!important;
    margin-bottom:12px!important;
    border-radius:10px!important;
  }
  .post-grid-2,.post-price-grid{grid-template-columns:1fr!important}
  .post-field-full{grid-column:auto!important}
  .post-field-half{max-width:none!important}
  .post-amenities{grid-template-columns:repeat(2,1fr)!important;gap:9px!important}
  .post-image-preview{grid-template-columns:repeat(4,1fr)!important}
  .post-upload-zone{min-height:125px!important}
  .post-submit-bar{bottom:68px!important}

  /* Blog */
  .blog-layout,.blog-detail-layout{grid-template-columns:1fr!important}
  .blog-sidebar{position:static!important}
  .blog-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .blog-related-grid{grid-template-columns:repeat(2,1fr)!important}

  /* Auth */
  .auth-page{padding:24px 12px!important}
  .auth-card{padding:20px!important;border-radius:14px!important}

  /* Tables / dashboard */
  .dashboard-head{
    align-items:flex-start!important;
    flex-direction:column!important;
  }
  .table-responsive{
    width:100%!important;
    overflow-x:auto!important;
    -webkit-overflow-scrolling:touch;
  }

  /* Home */
  .home-page-shell{
    width:100%!important;
    display:block!important;
  }
  .home-ad{display:none!important}
  .home-content-wrap{
    width:min(100% - 14px,1000px)!important;
    margin:0 auto!important;
  }
  .home-intro-grid{grid-template-columns:1fr!important}
  .home-feed-layout{grid-template-columns:1fr!important}
  .home-sidebar{display:none!important}
  .home-photo-collage{min-height:300px!important}
  .home-support-card{grid-template-columns:1fr!important}
  .home-support-illustration{min-height:220px!important}
  .home-blog-grid{grid-template-columns:repeat(2,1fr)!important}
}

/* Phones */
@media(max-width:600px){
  body{padding-bottom:64px}

  /* Header */
  .vps-global-container{width:calc(100% - 16px)!important}
  .vps-global-header__top-inner{min-height:56px!important}
  .vps-global-logo strong{font-size:17px!important;letter-spacing:.3px!important}
  .vps-global-location{display:none!important}
  .vps-global-toggle{
    display:block!important;
    margin-left:auto!important;
    width:38px!important;
    height:38px!important;
  }
  .vps-global-actions{
    left:8px!important;
    right:8px!important;
    top:57px!important;
    border-radius:10px!important;
    z-index:3000!important;
  }
  .vps-global-actions>a{
    min-height:42px!important;
    display:flex!important;
    align-items:center!important;
  }
  .vps-global-actions .vps-global-post{
    min-height:44px!important;
    border-radius:9px!important;
  }
  .vps-global-header__nav{
    overflow:hidden!important;
  }
  .vps-global-categories{
    width:100%!important;
    padding:0 8px!important;
    gap:18px!important;
    overflow-x:auto!important;
    -webkit-overflow-scrolling:touch;
  }

  /* Home */
  .home-content-wrap{width:calc(100% - 10px)!important}
  .home-intro-main h1{font-size:22px!important;line-height:1.3!important}
  .home-intro-main p{font-size:13px!important}
  .home-hanoi-search{grid-template-columns:1fr!important;padding:9px!important}
  .home-area-pills{gap:6px!important}
  .home-area-pills a{font-size:12px!important;padding:7px 9px!important}
  .home-tabs{overflow-x:auto!important;white-space:nowrap!important}
  .home-photo-collage{
    display:block!important;
    min-height:0!important;
    height:auto!important;
  }
  .home-photo-collage img{
    display:none!important;
  }
  .home-photo-collage img.photo-1{
    display:block!important;
    width:100%!important;
    height:auto!important;
    aspect-ratio:4/3!important;
    object-fit:cover!important;
  }
  .home-featured-card{border-radius:9px!important}
  .home-featured-body{padding:12px!important}
  .home-featured-body h2{font-size:15px!important;line-height:1.4!important}
  .home-featured-meta{font-size:12px!important}
  .home-owner-row{gap:8px!important}
  .home-phone-btn{margin-left:auto!important}
  .home-small-card{grid-template-columns:110px 1fr!important}
  .home-small-image{height:100px!important}
  .home-owner-cta{padding:22px 14px!important}
  .home-owner-cta h2{font-size:20px!important}
  .home-support-card{padding:14px!important}
  .home-support-illustration{display:none!important}
  .home-support-content{padding:10px!important}
  .home-footer-top,.home-footer-mid{
    grid-template-columns:1fr 1fr!important;
    gap:18px 12px!important;
  }
  .home-blog-grid{grid-template-columns:1fr!important}

  /* Listings cards one column for readability */
  .listing-grid{
    grid-template-columns:1fr!important;
  }
  .listing-card{
    display:grid!important;
    grid-template-columns:135px minmax(0,1fr)!important;
  }
  .listing-image{
    aspect-ratio:auto!important;
    min-height:125px!important;
  }
  .listing-image img{height:100%!important}
  .listing-body h3{-webkit-line-clamp:3!important}
  .meta{display:grid!important;gap:2px!important}

  /* Detail */
  .room-detail-page{padding:6px 0 74px!important}
  .room-detail-shell{width:calc(100% - 8px)!important}
  .room-breadcrumb{font-size:10px!important;margin:0 4px 6px!important}
  .room-media-stage{height:64vw!important;min-height:220px!important}
  .room-media-nav{
    width:32px!important;
    height:38px!important;
    top:calc(32vw - 18px)!important;
  }
  .room-media-thumbs{gap:4px!important}
  .room-media-thumb{flex-basis:56px!important;height:50px!important}
  .room-info-card,.room-section-card{padding:13px!important}
  .room-info-card h1{font-size:17px!important}
  .room-price-row{gap:8px!important}
  .room-price-row strong{font-size:16px!important}
  .room-price-row em{
    width:100%!important;
    margin-left:0!important;
  }
  .room-facts>div{grid-template-columns:92px 1fr!important;gap:6px!important}
  .room-description{font-size:14px!important;line-height:1.75!important}
  .room-amenity-grid{grid-template-columns:1fr 1fr!important;gap:8px!important}
  .room-map{height:235px!important}
  .room-contact-inline__actions{
    margin-left:0!important;
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
  }
  .room-owner-card{display:none!important}
  .room-featured-sidebar{display:none!important}
  .room-mobile-contact{
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    position:fixed!important;
    bottom:0!important;
    left:0!important;
    right:0!important;
    height:62px!important;
    z-index:2600!important;
    background:#fff!important;
    border-top:1px solid #ddd!important;
    padding:7px!important;
    gap:7px!important;
  }

  /* Post room */
  .post-side-menu{display:none!important}
  .post-workspace-head{
    position:sticky!important;
    top:96px!important;
    padding:8px 8px 0!important;
  }
  .post-workspace-head h1{font-size:18px!important;margin-bottom:4px!important}
  .post-step-tabs{gap:14px!important}
  .post-step-tabs a{padding:7px 0 10px!important;font-size:11px!important}
  .post-form-wrap{padding:0 7px!important;margin-top:8px!important}
  .post-card{padding:13px!important}
  .post-card h2{font-size:16px!important;margin-bottom:14px!important}
  .post-input-addon{grid-template-columns:minmax(0,1fr) 88px!important}
  .post-input-addon span{min-width:88px!important;font-size:11px!important}
  .post-title-row{align-items:flex-start!important}
  .post-ai-helper{font-size:11px!important}
  .post-amenities{grid-template-columns:1fr 1fr!important}
  .post-amenities label{font-size:12px!important}
  .post-image-preview{grid-template-columns:repeat(3,1fr)!important}
  .post-upload-zone{min-height:115px!important}
  .post-map-card iframe{height:210px!important}
  .post-submit-bar{
    bottom:0!important;
    margin-left:-7px!important;
    margin-right:-7px!important;
    border-radius:0!important;
    padding:9px!important;
  }
  .post-submit-bar>div{display:none!important}
  .post-submit-bar button{width:100%!important;min-width:0!important}

  /* Blog */
  .blog-hero{padding:28px 0!important}
  .blog-hero h1{font-size:27px!important}
  .blog-hero p{font-size:14px!important}
  .blog-search{display:grid!important}
  .blog-grid{grid-template-columns:1fr!important}
  .blog-card h3{font-size:17px!important}
  .blog-detail-page{padding:14px 0 70px!important}
  .blog-detail-layout{grid-template-columns:1fr!important}
  .blog-article{padding:15px!important;border-radius:12px!important}
  .blog-article h1{font-size:25px!important}
  .blog-lead{font-size:16px!important}
  .blog-article-content{font-size:15px!important}
  .blog-article-content h2{font-size:22px!important}
  .blog-article-content h3{font-size:19px!important}
  .blog-related-grid{grid-template-columns:1fr 1fr!important}

  /* Auth */
  .auth-page{min-height:calc(100vh - 150px)!important}
  .auth-card{padding:18px!important}
  .auth-card h1{font-size:24px!important}

  /* Forms */
  .two-col,.three-col{grid-template-columns:1fr!important}

  /* Dashboard / tables */
  .dashboard-head .btn{width:100%!important}
  .data-table{min-width:680px!important}

  /* Footer generic */
  .footer-grid{grid-template-columns:1fr!important;gap:18px!important}
}

/* Very small phones */
@media(max-width:390px){
  .home-footer-top,.home-footer-mid{grid-template-columns:1fr!important}
  .post-amenities{grid-template-columns:1fr!important}
  .post-image-preview{grid-template-columns:repeat(2,1fr)!important}
  .room-amenity-grid{grid-template-columns:1fr!important}
  .blog-related-grid{grid-template-columns:1fr!important}
  .listing-card{grid-template-columns:120px minmax(0,1fr)!important}
}

/* Mobile bottom navigation - public pages */
.vps-mobile-bottom-nav{display:none}
@media(max-width:600px){
  .vps-mobile-bottom-nav{
    position:fixed;
    left:0;
    right:0;
    bottom:0;
    z-index:2500;
    height:64px;
    background:#fff;
    border-top:1px solid #e5e7eb;
    box-shadow:0 -6px 20px rgba(15,23,42,.08);
    display:grid;
    grid-template-columns:repeat(5,1fr);
    padding-bottom:env(safe-area-inset-bottom);
  }
  .vps-mobile-bottom-nav a{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:1px;
    color:#64748b;
    font-size:10px;
  }
  .vps-mobile-bottom-nav a i{
    font-style:normal;
    font-size:19px;
    line-height:1;
  }
  .vps-mobile-bottom-nav a.vps-mobile-bottom-nav__post{
    width:50px;
    height:50px;
    margin:-13px auto 0;
    border-radius:15px;
    background:#ff4d2e;
    color:#fff;
    box-shadow:0 8px 18px rgba(255,77,46,.28);
  }

  /* Detail already has its own call/zalo bar: hide general bottom nav there */
  .room-detail-page ~ .vps-mobile-bottom-nav,
  body:has(.room-detail-page) .vps-mobile-bottom-nav{
    display:none!important;
  }
}