/* =========================================================
   V382 — Reference-locked quotation layout
   Same design for public link / preview / print / PDF
   ========================================================= */

:root{
  --v382-green:#075b34;
  --v382-green-2:#0b6b3d;
  --v382-border:#cfdad4;
  --v382-grid:#dce5e0;
  --v382-text:#172219;
  --v382-muted:#5f6e65;
  --v382-red:#d02222;
}

.v379-a4-paper{
  width:1120px!important;
  max-width:calc(100vw - 28px)!important;
  margin:0 auto!important;
  background:#fff!important;
  color:var(--v382-text)!important;
  border:1px solid #a9beb1!important;
  border-top:4px solid var(--v382-green)!important;
  border-radius:0!important;
  box-shadow:0 10px 30px rgba(17,43,29,.08)!important;
  overflow:hidden!important;
  font-family:Arial,"Helvetica Neue",Helvetica,sans-serif!important;
  -webkit-font-smoothing:antialiased!important;
  text-rendering:geometricPrecision!important;
}

/* ---------- HEADER ---------- */
.v379-a4-paper .v372-header{
  display:grid!important;
  grid-template-columns:1.15fr .92fr .45fr!important;
  gap:22px!important;
  align-items:start!important;
  padding:24px 28px 20px!important;
  border-top:0!important;
  border-bottom:1px solid #c8d6ce!important;
  background:#fff!important;
}

/* Company */
.v379-a4-paper .v372-company{
  display:grid!important;
  grid-template-columns:125px minmax(0,1fr)!important;
  gap:18px!important;
  align-items:start!important;
}
.v379-a4-paper .v372-company img,
.v379-a4-paper .v372-logo-fallback{
  width:118px!important;
  height:92px!important;
  object-fit:contain!important;
}
.v379-a4-paper .v372-company h2{
  margin:0 0 7px!important;
  font-size:20px!important;
  line-height:1.15!important;
  font-weight:950!important;
  color:var(--v382-green)!important;
  white-space:nowrap!important;
}
.v379-a4-paper .v372-company p{
  margin:5px 0 0!important;
  font-size:10.2px!important;
  line-height:1.45!important;
  font-weight:650!important;
  color:#243229!important;
}

/* Center quotation title */
.v379-a4-paper .v372-title{
  display:grid!important;
  justify-items:center!important;
  align-content:start!important;
  text-align:center!important;
  padding-top:3px!important;
  min-width:0!important;
}
.v379-a4-paper .v372-title h1{
  margin:0!important;
  font-size:50px!important;
  line-height:.96!important;
  font-weight:950!important;
  letter-spacing:.025em!important;
  color:var(--v382-green)!important;
  white-space:nowrap!important;
}
.v379-a4-paper .v372-title:after{
  content:"◆"!important;
  display:block!important;
  width:210px!important;
  margin:12px 0 13px!important;
  border-top:1.4px solid #9bb3a5!important;
  color:var(--v382-green)!important;
  font-size:10px!important;
  line-height:0!important;
  text-align:center!important;
  background:#fff!important;
}
.v379-a4-paper .v372-title>p{
  margin:0 0 11px!important;
  font-size:15px!important;
  font-weight:800!important;
  white-space:nowrap!important;
}
.v379-a4-paper .v372-title>p strong{
  color:var(--v382-red)!important;
  font-size:18px!important;
  font-weight:950!important;
}
.v379-a4-paper .v372-date{
  margin:4px auto 8px!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  color:#1c2b21!important;
  font-size:11px!important;
  line-height:1.4!important;
  font-weight:800!important;
  white-space:nowrap!important;
}
.v379-a4-paper .v372-title small{
  display:block!important;
  font-size:10.8px!important;
  line-height:1.4!important;
  font-weight:800!important;
  color:#26362d!important;
  white-space:nowrap!important;
}

/* QR */
.v379-a4-paper .v372-qr{
  display:grid!important;
  justify-items:center!important;
  align-content:start!important;
  gap:7px!important;
  padding-top:0!important;
  text-align:center!important;
}
.v379-a4-paper .v372-qr:before{
  content:"QUÉT MÃ XEM BÁO GIÁ"!important;
  display:block!important;
  margin-bottom:2px!important;
  font-size:10px!important;
  line-height:1.2!important;
  font-weight:950!important;
  color:#183027!important;
  white-space:nowrap!important;
}
.v379-a4-paper .v372-qr strong{
  display:none!important;
}
.v379-a4-paper .v378-real-qr{
  width:112px!important;
  height:112px!important;
  padding:4px!important;
  border:1.5px solid #71957f!important;
  border-radius:7px!important;
  background:#fff!important;
}
.v379-a4-paper .v372-qr small{
  display:block!important;
  max-width:180px!important;
  padding:5px 8px!important;
  border-radius:999px!important;
  background:var(--v382-green)!important;
  color:#fff!important;
  font-size:7.8px!important;
  font-weight:850!important;
  line-height:1.2!important;
  word-break:break-all!important;
}
.v379-a4-paper .v372-qr:after{
  content:"Quét mã hoặc truy cập link để xem báo giá mới nhất"!important;
  display:block!important;
  max-width:190px!important;
  font-size:8.4px!important;
  line-height:1.45!important;
  color:#45554c!important;
}

/* ---------- CUSTOMER + NOTE ---------- */
.v379-a4-paper .v372-info{
  display:grid!important;
  grid-template-columns:1fr 1.05fr!important;
  gap:22px!important;
  padding:18px 22px!important;
  border-bottom:0!important;
  background:#fff!important;
}
.v379-a4-paper .v372-info>div{
  min-height:235px!important;
  padding:0 16px 15px!important;
  border:1px solid #cfd9d3!important;
  border-radius:8px!important;
  background:#fff!important;
  overflow:visible!important;
}
.v379-a4-paper .v372-info>div+div{
  border-left:1px solid #cfd9d3!important;
}
.v379-a4-paper .v372-info h3{
  display:inline-flex!important;
  align-items:center!important;
  margin:-1px 0 14px -17px!important;
  padding:8px 14px!important;
  border-radius:7px 7px 6px 6px!important;
  background:linear-gradient(180deg,#0b6a3c 0%,#075631 100%)!important;
  color:#fff!important;
  font-size:12.5px!important;
  line-height:1!important;
  font-weight:950!important;
  letter-spacing:.01em!important;
}
.v379-a4-paper .v372-info p{
  display:grid!important;
  grid-template-columns:170px minmax(0,1fr)!important;
  gap:10px!important;
  margin:10px 0 0!important;
  font-size:12.6px!important;
  line-height:1.45!important;
  font-weight:650!important;
  color:#1f2c24!important;
}
.v379-a4-paper .v372-info p b{
  font-weight:950!important;
  color:#172219!important;
}
.v379-a4-paper .v372-info>div:nth-child(1) p{
  font-size:14.2px!important;
  line-height:1.5!important;
}
.v379-a4-paper .v372-info>div:nth-child(1) p b{
  font-size:13.4px!important;
}
.v379-a4-paper .v372-info>div:nth-child(2) p{
  grid-template-columns:1fr!important;
  position:relative!important;
  padding-left:22px!important;
}
.v379-a4-paper .v372-info>div:nth-child(2) p:before{
  content:"✓"!important;
  position:absolute!important;
  left:0!important;
  top:0!important;
  width:16px!important;
  height:16px!important;
  border-radius:50%!important;
  background:var(--v382-green)!important;
  color:#fff!important;
  font-size:10px!important;
  line-height:16px!important;
  text-align:center!important;
  font-weight:950!important;
}

/* ---------- PRODUCT TABLE ---------- */
.v379-a4-paper .v372-table-wrap{
  padding:0 22px!important;
  overflow:visible!important;
}
.v379-a4-paper .v372-table{
  width:100%!important;
  min-width:0!important;
  table-layout:fixed!important;
  border-collapse:separate!important;
  border-spacing:0!important;
  border:1px solid #c6d3cc!important;
  border-radius:8px!important;
  overflow:hidden!important;
  font-size:11.5px!important;
}
.v379-a4-paper .v372-table th{
  padding:12px 8px!important;
  background:linear-gradient(180deg,#0b6a3c 0%,#075631 100%)!important;
  color:#fff!important;
  border-right:1px solid rgba(255,255,255,.28)!important;
  text-align:center!important;
  font-size:10.5px!important;
  line-height:1.15!important;
  font-weight:950!important;
  letter-spacing:.015em!important;
  white-space:nowrap!important;
}
.v379-a4-paper .v372-table th:nth-child(1){width:7%!important}
.v379-a4-paper .v372-table th:nth-child(2){width:13%!important}
.v379-a4-paper .v372-table th:nth-child(3){width:22%!important}
.v379-a4-paper .v372-table th:nth-child(4){width:9%!important}
.v379-a4-paper .v372-table th:nth-child(5){width:15%!important}
.v379-a4-paper .v372-table th:nth-child(6){width:17%!important}
.v379-a4-paper .v372-table th:nth-child(7){width:17%!important}
.v379-a4-paper .v372-table td{
  height:54px!important;
  padding:10px 10px!important;
  border-right:1px solid var(--v382-grid)!important;
  border-bottom:1px solid var(--v382-grid)!important;
  background:#fff!important;
  color:#172219!important;
  font-size:11.8px!important;
  line-height:1.25!important;
  font-weight:650!important;
  vertical-align:middle!important;
}
.v379-a4-paper .v372-table td:nth-child(1),
.v379-a4-paper .v372-table td:nth-child(4),
.v379-a4-paper .v372-table td:nth-child(5){
  text-align:center!important;
}
.v379-a4-paper .v372-table td:nth-child(6),
.v379-a4-paper .v372-table td:nth-child(7){
  text-align:right!important;
  white-space:nowrap!important;
  font-variant-numeric:tabular-nums!important;
}
.v379-a4-paper .v372-table td:nth-child(7){
  color:var(--v382-green)!important;
  font-weight:950!important;
}

/* ---------- TOTALS ---------- */
.v379-a4-paper .v372-summary{
  display:grid!important;
  grid-template-columns:1fr 49%!important;
  gap:20px!important;
  padding:16px 22px 18px!important;
}
.v379-a4-paper .v372-thankyou{
  align-self:start!important;
  padding:0!important;
  border:0!important;
  background:transparent!important;
}
.v379-a4-paper .v372-thankyou strong{
  display:none!important;
}
.v379-a4-paper .v372-thankyou p{
  margin:8px 0 0!important;
  font-size:11px!important;
  line-height:1.45!important;
  font-style:italic!important;
  font-weight:650!important;
  color:#222e26!important;
}
.v379-a4-paper .v372-total{
  border:1px solid #bfcfc6!important;
  border-radius:8px!important;
  overflow:hidden!important;
  background:#fff!important;
}
.v379-a4-paper .v372-total>div{
  display:flex!important;
  justify-content:space-between!important;
  align-items:center!important;
  gap:15px!important;
  padding:11px 14px!important;
  border-bottom:1px solid #dce5e0!important;
  background:#fff!important;
  font-size:11.5px!important;
  font-weight:800!important;
}
.v379-a4-paper .v372-total>div b{
  font-size:12.8px!important;
  font-weight:950!important;
}
.v379-a4-paper .v372-total .grand{
  padding:11px 14px!important;
  background:linear-gradient(180deg,#0b6a3c 0%,#075631 100%)!important;
  color:#fff!important;
  font-size:14px!important;
  font-weight:950!important;
}
.v379-a4-paper .v372-total .grand b{
  color:#fff!important;
  font-size:22px!important;
  font-weight:950!important;
}

/* ---------- PAYMENT + CONFIRM ---------- */
.v379-a4-paper .v372-footer{
  display:grid!important;
  grid-template-columns:1fr 1.04fr!important;
  gap:18px!important;
  padding:0 22px 18px!important;
  border-top:0!important;
}
.v379-a4-paper .v372-footer>div{
  min-height:300px!important;
  padding:14px 16px!important;
  border:1px solid #cfd9d3!important;
  border-radius:8px!important;
  background:#fff!important;
}
.v379-a4-paper .v372-footer>div+div{
  border-left:1px solid #cfd9d3!important;
}
.v379-a4-paper .v372-footer>div:nth-child(1){
  display:none!important;
}
.v379-a4-paper .v372-footer>div:nth-child(2){
  grid-column:1!important;
}
.v379-a4-paper .v372-footer>div:nth-child(3){
  grid-column:2!important;
}
.v379-a4-paper .v372-footer h4{
  margin:0 0 12px!important;
  color:var(--v382-green)!important;
  font-size:12px!important;
  line-height:1!important;
  font-weight:950!important;
}
.v379-a4-paper .v372-footer p{
  margin:8px 0 0!important;
  font-size:11.6px!important;
  line-height:1.5!important;
  font-weight:650!important;
  color:#1f2c24!important;
}
.v379-a4-paper .v372-footer>div:nth-child(2):after{
  content:"ĐIỀU KHOẢN THANH TOÁN\A ✓ Thanh toán: Chuyển khoản hoặc tiền mặt.\A ✓ Đặt cọc: 30% giá trị đơn hàng.\A ✓ Thanh toán nốt: Trước khi giao hàng.\A ✓ Thời gian giao hàng: 24 - 48h sau khi xác nhận đơn.\A ✓ Miễn phí giao hàng với đơn hàng từ 5.000.000đ trong phạm vi TP. HCM."!important;
  display:block!important;
  margin-top:18px!important;
  white-space:pre-line!important;
  font-size:11px!important;
  line-height:1.65!important;
  font-weight:700!important;
  color:#1f2c24!important;
}
.v379-a4-paper .v372-sign{
  text-align:center!important;
}
.v379-a4-paper .v372-sign h4{
  text-align:left!important;
}
.v379-a4-paper .v372-sign strong{
  font-size:11.8px!important;
  font-weight:900!important;
}
.v379-a4-paper .v372-sign p{
  margin-top:12px!important;
}

/* ---------- CONTACT STRIP ---------- */
.v379-a4-paper .v374-contact-strip{
  display:grid!important;
  grid-template-columns:repeat(3,1fr)!important;
  gap:0!important;
  margin:0 28px 12px!important;
  padding:10px 0!important;
  border:1px solid #92ad9d!important;
  border-radius:18px!important;
  background:#fff!important;
  font-size:10.5px!important;
  font-weight:750!important;
}
.v379-a4-paper .v374-contact-strip span{
  padding:0 18px!important;
}
.v379-a4-paper .v374-contact-strip span+span{
  border-left:1px solid #b8c8bf!important;
}
.v379-a4-paper .v374-contact-strip span:nth-child(2){text-align:center!important}
.v379-a4-paper .v374-contact-strip span:nth-child(3){text-align:right!important}

.v379-a4-paper .v374-brand-footer{
  margin:0!important;
  padding:8px 16px!important;
  background:var(--v382-green)!important;
  color:#fff!important;
  text-align:center!important;
  font-size:10px!important;
  font-weight:850!important;
}

/* ---------- MOBILE ---------- */
@media(max-width:900px){
  .v379-public-quote-page{
    padding:8px 8px 84px!important;
  }
  .v379-a4-paper{
    width:100%!important;
    max-width:100%!important;
    border-radius:0!important;
    box-shadow:none!important;
  }

  .v379-a4-paper .v372-header{
    grid-template-columns:1fr!important;
    gap:14px!important;
    padding:14px 14px 12px!important;
  }
  .v379-a4-paper .v372-company{
    grid-template-columns:88px minmax(0,1fr)!important;
    gap:10px!important;
  }
  .v379-a4-paper .v372-company img,
  .v379-a4-paper .v372-logo-fallback{
    width:82px!important;
    height:68px!important;
  }
  .v379-a4-paper .v372-company h2{
    font-size:15px!important;
    white-space:normal!important;
  }
  .v379-a4-paper .v372-company p{
    font-size:9.2px!important;
  }

  .v379-a4-paper .v372-title{
    justify-items:start!important;
    text-align:left!important;
    padding-top:10px!important;
    border-top:1px solid #d7e2db!important;
  }
  .v379-a4-paper .v372-title h1{
    font-size:34px!important;
  }
  .v379-a4-paper .v372-title:after{
    width:150px!important;
    margin:8px 0 10px!important;
  }
  .v379-a4-paper .v372-date,
  .v379-a4-paper .v372-title small{
    white-space:normal!important;
  }

  .v379-a4-paper .v372-qr{
    grid-template-columns:86px minmax(0,1fr)!important;
    justify-items:start!important;
    text-align:left!important;
  }
  .v379-a4-paper .v372-qr:before{
    grid-column:1/-1!important;
  }
  .v379-a4-paper .v378-real-qr{
    width:84px!important;
    height:84px!important;
    grid-row:2/5!important;
  }
  .v379-a4-paper .v372-qr small,
  .v379-a4-paper .v372-qr:after{
    max-width:100%!important;
  }

  .v379-a4-paper .v372-info{
    grid-template-columns:1fr!important;
    gap:10px!important;
    padding:10px!important;
  }
  .v379-a4-paper .v372-info>div{
    min-height:0!important;
  }
  .v379-a4-paper .v372-info p{
    grid-template-columns:120px minmax(0,1fr)!important;
    font-size:10.5px!important;
  }
  .v379-a4-paper .v372-info>div:nth-child(1) p{
    font-size:11.2px!important;
  }

  .v379-a4-paper .v372-table-wrap{
    padding:0 10px!important;
    overflow-x:auto!important;
    -webkit-overflow-scrolling:touch!important;
  }
  .v379-a4-paper .v372-table{
    min-width:720px!important;
    table-layout:auto!important;
  }

  .v379-a4-paper .v372-summary{
    grid-template-columns:1fr!important;
    padding:10px!important;
  }

  .v379-a4-paper .v372-footer{
    grid-template-columns:1fr!important;
    padding:0 10px 10px!important;
  }
  .v379-a4-paper .v372-footer>div:nth-child(2),
  .v379-a4-paper .v372-footer>div:nth-child(3){
    grid-column:1!important;
    min-height:0!important;
  }

  .v379-a4-paper .v374-contact-strip{
    grid-template-columns:1fr!important;
    margin:0 10px 8px!important;
    border-radius:12px!important;
    padding:8px 0!important;
  }
  .v379-a4-paper .v374-contact-strip span{
    text-align:left!important;
    padding:5px 12px!important;
  }
  .v379-a4-paper .v374-contact-strip span+span{
    border-left:0!important;
    border-top:1px solid #d7e1db!important;
  }
}

/* ---------- TRUE A4 PRINT ---------- */
@media print{
  @page{size:A4 portrait;margin:0!important}
  html,body{
    width:210mm!important;
    margin:0!important;
    padding:0!important;
    background:#fff!important;
  }
  .v373-public-toolbar,
  .v372-preview-actions,
  .v377-mobile-actions{
    display:none!important;
  }
  .v379-public-quote-page{
    padding:0!important;
    background:#fff!important;
  }
  .v379-a4-paper{
    width:196mm!important;
    max-width:196mm!important;
    margin:7mm auto 0!important;
    border:0!important;
    box-shadow:none!important;
  }

  .v379-a4-paper .v372-header{
    grid-template-columns:76mm 66mm 46mm!important;
    gap:4mm!important;
    padding:6mm 4mm 4mm!important;
  }
  .v379-a4-paper .v372-company{
    grid-template-columns:24mm 1fr!important;
    gap:3mm!important;
  }
  .v379-a4-paper .v372-company img,
  .v379-a4-paper .v372-logo-fallback{
    width:23mm!important;
    height:18mm!important;
  }
  .v379-a4-paper .v372-company h2{
    font-size:10.5pt!important;
  }
  .v379-a4-paper .v372-company p{
    font-size:6.2pt!important;
    line-height:1.35!important;
  }

  .v379-a4-paper .v372-title h1{
    font-size:24pt!important;
  }
  .v379-a4-paper .v372-title:after{
    width:42mm!important;
    margin:2mm 0 2.5mm!important;
  }
  .v379-a4-paper .v372-title>p{
    font-size:8pt!important;
  }
  .v379-a4-paper .v372-title>p strong{
    font-size:9pt!important;
  }
  .v379-a4-paper .v372-date,
  .v379-a4-paper .v372-title small{
    font-size:6.3pt!important;
    white-space:nowrap!important;
  }

  .v379-a4-paper .v378-real-qr{
    width:20mm!important;
    height:20mm!important;
  }
  .v379-a4-paper .v372-qr:before{
    font-size:5.8pt!important;
  }
  .v379-a4-paper .v372-qr small{
    font-size:4.8pt!important;
  }
  .v379-a4-paper .v372-qr:after{
    font-size:5pt!important;
  }

  .v379-a4-paper .v372-info{
    gap:4mm!important;
    padding:3mm 4mm!important;
  }
  .v379-a4-paper .v372-info>div{
    min-height:38mm!important;
    padding:0 3mm 3mm!important;
  }
  .v379-a4-paper .v372-info h3{
    margin-left:-3.2mm!important;
    font-size:6.6pt!important;
    padding:1.7mm 3mm!important;
  }
  .v379-a4-paper .v372-info p{
    grid-template-columns:30mm 1fr!important;
    gap:2mm!important;
    margin-top:1.8mm!important;
    font-size:6.4pt!important;
    line-height:1.35!important;
  }
  .v379-a4-paper .v372-info>div:nth-child(1) p{
    font-size:7pt!important;
  }
  .v379-a4-paper .v372-info>div:nth-child(2) p{
    font-size:6.2pt!important;
    padding-left:4mm!important;
  }

  .v379-a4-paper .v372-table-wrap{
    padding:0 4mm!important;
  }
  .v379-a4-paper .v372-table{
    font-size:6.4pt!important;
  }
  .v379-a4-paper .v372-table th{
    padding:2mm 1mm!important;
    font-size:5.7pt!important;
  }
  .v379-a4-paper .v372-table td{
    height:9mm!important;
    padding:1.8mm 1.2mm!important;
    font-size:6.3pt!important;
  }

  .v379-a4-paper .v372-summary{
    grid-template-columns:1fr 92mm!important;
    gap:4mm!important;
    padding:3mm 4mm!important;
  }
  .v379-a4-paper .v372-thankyou p{
    font-size:6pt!important;
  }
  .v379-a4-paper .v372-total>div{
    padding:2.1mm 3mm!important;
    font-size:6.4pt!important;
  }
  .v379-a4-paper .v372-total>div b{
    font-size:7pt!important;
  }
  .v379-a4-paper .v372-total .grand{
    font-size:8pt!important;
  }
  .v379-a4-paper .v372-total .grand b{
    font-size:12pt!important;
  }

  .v379-a4-paper .v372-footer{
    grid-template-columns:1fr 1.04fr!important;
    gap:3mm!important;
    padding:0 4mm 3mm!important;
  }
  .v379-a4-paper .v372-footer>div{
    min-height:47mm!important;
    padding:3mm!important;
  }
  .v379-a4-paper .v372-footer h4{
    font-size:6.5pt!important;
  }
  .v379-a4-paper .v372-footer p{
    font-size:6pt!important;
    margin-top:1.4mm!important;
  }
  .v379-a4-paper .v372-footer>div:nth-child(2):after{
    margin-top:3mm!important;
    font-size:5.9pt!important;
    line-height:1.5!important;
  }
  .v379-a4-paper .v372-sign strong{
    font-size:6.2pt!important;
  }

  .v379-a4-paper .v374-contact-strip{
    margin:0 4mm 2mm!important;
    padding:2mm 0!important;
    font-size:5.8pt!important;
  }
  .v379-a4-paper .v374-contact-strip span{
    padding:0 3mm!important;
  }
  .v379-a4-paper .v374-brand-footer{
    padding:1.8mm 4mm!important;
    font-size:6pt!important;
  }

  /* Prevent awkward page breaks */
  .v379-a4-paper .v372-header,
  .v379-a4-paper .v372-info,
  .v379-a4-paper .v372-summary,
  .v379-a4-paper .v372-footer,
  .v379-a4-paper .v374-contact-strip,
  .v379-a4-paper .v374-brand-footer{
    break-inside:avoid!important;
    page-break-inside:avoid!important;
  }
  .v379-a4-paper .v372-table tr{
    break-inside:avoid!important;
    page-break-inside:avoid!important;
  }
}