/* V377 — Đồng nhất Báo giá desktop/mobile + sửa in PDF trắng */

.v373-public-toolbar,
.v372-preview-actions{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

.v377-public-actions{
  display:flex;
  gap:7px;
  align-items:center;
}
.v377-public-actions button,
.v377-mobile-actions button{
  min-height:36px;
  border-radius:7px;
  padding:0 12px;
  font-size:10px;
  font-weight:850;
}
.v377-public-actions .print,
.v377-mobile-actions .print{
  border:1px solid #0f5d39;
  background:#fff;
  color:#0f5d39;
}
.v377-public-actions .share,
.v377-mobile-actions .share{
  border:1px solid #0f5d39;
  background:#0f5d39;
  color:#fff;
}
.v377-mobile-actions{
  display:none;
}

/* Desktop: đúng khung A4 chuẩn, không kéo quá rộng */
@media(min-width:901px){
  .v373-public-page,
  .v372-preview-page{
    padding:14px 18px 28px!important;
    overflow-x:auto;
  }
  .v372-paper{
    width:1120px!important;
    max-width:100%!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }
}

/* Mobile: cùng ngôn ngữ thiết kế nhưng bố cục 1 cột, dễ đọc */
@media(max-width:900px){
  .v373-public-page,
  .v372-preview-page{
    padding:8px 8px 84px!important;
    overflow-x:hidden!important;
  }

  .v373-public-toolbar,
  .v372-preview-actions{
    position:sticky!important;
    top:0!important;
    z-index:60!important;
    margin-bottom:8px!important;
    padding:9px 10px!important;
    border-radius:8px!important;
  }

  .v373-public-toolbar>button,
  .v373-public-toolbar .v377-public-actions,
  .v372-preview-actions>div:last-child{
    display:none!important;
  }

  .v372-paper{
    width:100%!important;
    max-width:100%!important;
    margin:0!important;
    border-radius:0!important;
    border:1px solid #b8c8bf!important;
    box-shadow:none!important;
    overflow:hidden!important;
  }

  .v372-header{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:12px!important;
    padding:14px 14px 12px!important;
  }
  .v372-company{
    display:grid!important;
    grid-template-columns:92px 1fr!important;
    gap:10px!important;
    align-items:start!important;
  }
  .v372-company img,
  .v372-logo-fallback{
    width:86px!important;
    height:68px!important;
  }
  .v372-company h2{
    font-size:15px!important;
  }
  .v372-company p{
    font-size:9px!important;
    line-height:1.45!important;
  }

  .v372-title{
    display:grid!important;
    grid-template-columns:1fr auto!important;
    gap:8px 10px!important;
    align-items:center!important;
    text-align:left!important;
    padding-top:10px!important;
    border-top:1px solid #d8e3dc!important;
  }
  .v372-title h1{
    grid-column:1/-1!important;
    font-size:32px!important;
  }
  .v372-title>p{
    margin:0!important;
    font-size:11px!important;
  }
  .v372-date{
    margin:0!important;
    width:max-content!important;
  }

  .v372-qr{
    display:grid!important;
    grid-template-columns:84px 1fr!important;
    gap:4px 8px!important;
    align-items:center!important;
    justify-items:start!important;
    text-align:left!important;
    padding-top:4px!important;
  }
  .v372-qr-box{
    grid-row:1/4!important;
    width:82px!important;
    height:82px!important;
  }
  .v372-qr small{
    max-width:100%!important;
    word-break:break-all!important;
  }

  .v372-info{
    grid-template-columns:1fr!important;
  }
  .v372-info>div{
    padding:12px 13px!important;
  }
  .v372-info>div+div{
    border-left:0!important;
    border-top:1px solid #bfd4c7!important;
  }
  .v372-info h3{
    font-size:9.7px!important;
  }
  .v372-info p{
    grid-template-columns:120px 1fr!important;
    font-size:9.2px!important;
  }

  /* Mobile table: gọn hơn, vẫn cùng mẫu */
  .v372-table-wrap{
    overflow-x:auto!important;
    -webkit-overflow-scrolling:touch;
  }
  .v372-table{
    min-width:640px!important;
    font-size:9px!important;
  }
  .v372-table th{
    padding:7px 5px!important;
    font-size:8px!important;
  }
  .v372-table td{
    padding:7px 5px!important;
  }

  .v372-summary{
    grid-template-columns:1fr!important;
    gap:10px!important;
    padding:12px!important;
  }
  .v372-thankyou{
    padding:12px!important;
  }
  .v372-total .grand b{
    font-size:18px!important;
  }

  .v372-footer{
    grid-template-columns:1fr!important;
  }
  .v372-footer>div{
    min-height:auto!important;
    padding:12px 13px!important;
  }
  .v372-footer>div+div{
    border-left:0!important;
    border-top:1px solid #bfd4c7!important;
  }

  .v374-contact-strip{
    grid-template-columns:1fr!important;
    gap:6px!important;
    padding:10px 13px!important;
  }
  .v374-contact-strip span{
    text-align:left!important;
  }

  .v377-mobile-actions{
    position:fixed!important;
    left:8px!important;
    right:8px!important;
    bottom:8px!important;
    z-index:100!important;
    display:grid!important;
    grid-template-columns:1fr 1.35fr!important;
    gap:8px!important;
    padding:8px!important;
    border:1px solid #d4ded8!important;
    border-radius:10px!important;
    background:rgba(255,255,255,.96)!important;
    box-shadow:0 8px 24px rgba(15,23,42,.14)!important;
    backdrop-filter:blur(8px);
  }
  .v377-mobile-actions button{
    min-height:44px!important;
    font-size:11px!important;
  }
}

/* Important: remove old visibility print technique that caused blank pages.
   Dedicated print now opens a clean document containing only .v372-paper. */
@media print{
  body *{
    visibility:visible!important;
  }
  .v372-preview-actions,
  .v373-public-toolbar,
  .v377-mobile-actions{
    display:none!important;
  }
  .v373-public-page,
  .v372-preview-page{
    padding:0!important;
    background:#fff!important;
  }
  .v372-paper{
    width:100%!important;
    max-width:none!important;
    margin:0!important;
    border:0!important;
    box-shadow:none!important;
  }
}