/* V486 - order print note + white table header text */
.invoice-print-document .inv-table thead th,
.print-area .inv-table thead th{
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
}
.invoice-print-document .inv-order-note,
.print-area .inv-order-note{
  margin:8px 0 6px!important;
  padding:8px 10px!important;
  border:1px solid rgba(15,23,42,.18)!important;
  border-left:3px solid currentColor!important;
  font-size:12px!important;
  line-height:1.55!important;
  white-space:pre-wrap!important;
  word-break:break-word!important;
}
.invoice-print-document .inv-order-note b,
.print-area .inv-order-note b{font-weight:800!important;}
@media print{
  .invoice-print-document .inv-table thead th,
  .print-area .inv-table thead th{
    color:#fff!important;
    -webkit-text-fill-color:#fff!important;
    print-color-adjust:exact!important;
    -webkit-print-color-adjust:exact!important;
  }
  .invoice-print-document .inv-order-note,
  .print-area .inv-order-note{
    color:#111!important;
    border-color:#777!important;
  }
}


/* V531 - Employee signature on purchase-order preview/print */
.invoice-print-document .inv-signature-asset,
.print-area .inv-signature-asset{
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:flex-start!important;
}
.invoice-print-document .inv-signature-image,
.print-area .inv-signature-image{
  display:block!important;
  max-width:42mm!important;
  max-height:22mm!important;
  object-fit:contain!important;
  margin:0 auto 1mm!important;
}
.invoice-print-document .v243-order-seller-name,
.print-area .v243-order-seller-name{
  text-align:center!important;
  font-weight:700!important;
  line-height:1.2!important;
}


/* V532 - force employee signature to remain visible in preview + browser print */
.invoice-print-document .inv-signature-image,
.print-area .inv-signature-image{
  width:auto!important;
  height:auto!important;
  min-height:12mm!important;
  max-width:44mm!important;
  max-height:24mm!important;
  opacity:1!important;
  visibility:visible!important;
}
@media print{
  .invoice-print-document .inv-signature-image,
  .print-area .inv-signature-image{
    display:block!important;
    opacity:1!important;
    visibility:visible!important;
    -webkit-print-color-adjust:exact!important;
    print-color-adjust:exact!important;
  }
}


/* V533 - Company stamp overlaps about one third of the left side of employee signature */
.v533-stamped-signature{
  position:relative!important;
}
.v533-stamped-signature .v533-company-stamp{
  position:absolute!important;
  width:25mm!important;
  height:25mm!important;
  object-fit:contain!important;
  left:calc(50% - 26mm)!important;
  top:50%!important;
  transform:translateY(-52%)!important;
  z-index:3!important;
  opacity:.92!important;
  pointer-events:none!important;
}
.v533-stamped-signature .inv-signature-image,
.v533-stamped-signature .v524-quote-signature{
  position:relative!important;
  z-index:2!important;
}
@media print{
  .v533-company-stamp{
    display:block!important;
    visibility:visible!important;
    opacity:.92!important;
    -webkit-print-color-adjust:exact!important;
    print-color-adjust:exact!important;
  }
}


/* =========================
   V534 APPROVED STAMP DESIGN
   ========================= */

/* Settings card */
.v534-stamp-settings{
  border:1px solid rgba(15,96,53,.22);
  border-radius:10px;
  background:#fff;
  overflow:hidden;
  box-shadow:0 1px 3px rgba(15,23,42,.05);
}
.v534-stamp-heading{
  padding:14px 18px;
  border-bottom:1px solid rgba(15,96,53,.16);
  color:#0b6338;
  font-size:14px;
  font-weight:800;
  letter-spacing:.02em;
}
.v534-stamp-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
}
.v534-stamp-upload-col,
.v534-stamp-toggle-col{
  padding:18px;
  min-width:0;
}
.v534-stamp-upload-col{
  border-right:1px solid rgba(15,96,53,.14);
}
.v534-stamp-settings h5{
  margin:0 0 7px;
  color:#0b6338;
  font-size:13px;
  font-weight:800;
}
.v534-stamp-help,
.v534-stamp-note,
.v534-toggle-row p,
.v534-stamp-position-box p{
  margin:0;
  font-size:11.5px;
  line-height:1.5;
  color:#52606d;
}
.v534-stamp-upload-row{
  display:grid;
  grid-template-columns:minmax(0,1.35fr) minmax(150px,.8fr);
  gap:16px;
  margin-top:12px;
  align-items:start;
}
.v534-stamp-dropzone{
  min-height:138px;
  border:1.5px dashed #aacabb;
  border-radius:8px;
  background:#fbfdfc;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:7px;
  padding:16px;
  cursor:pointer;
  text-align:center;
}
.v534-stamp-dropzone input{display:none}
.v534-upload-icon{
  font-size:30px;
  line-height:1;
  color:#8baaa0;
}
.v534-stamp-dropzone b{
  font-size:11.5px;
  color:#66766f;
}
.v534-upload-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:32px;
  padding:0 15px;
  border-radius:4px;
  background:#0b6338;
  color:#fff;
  font-size:11.5px;
  font-weight:800;
}
.v534-stamp-current{
  display:flex;
  flex-direction:column;
  gap:7px;
  font-size:11.5px;
}
.v534-stamp-preview-box{
  min-height:118px;
  border:1px solid #d9e2dd;
  border-radius:7px;
  background:
    linear-gradient(45deg,#f4f6f5 25%,transparent 25%) 0 0/16px 16px,
    linear-gradient(45deg,transparent 75%,#f4f6f5 75%) 0 0/16px 16px,
    linear-gradient(45deg,transparent 75%,#f4f6f5 75%) 8px -8px/16px 16px,
    linear-gradient(45deg,#f4f6f5 25%,#fff 25%) 8px -8px/16px 16px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.v534-stamp-preview-box img{
  display:block;
  max-width:112px;
  max-height:112px;
  object-fit:contain;
}
.v534-stamp-preview-box span{
  font-size:11px;
  color:#88968f;
}
.v534-stamp-delete{
  min-height:30px;
  border:1px solid #ef8d8d;
  border-radius:4px;
  background:#fff7f7;
  color:#c73535;
  font-size:11.5px;
  font-weight:700;
}
.v534-stamp-note{margin-top:12px}
.v534-toggle-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  margin-top:10px;
}
.v534-toggle-row>p{max-width:72%}
.v534-switch{
  display:flex;
  align-items:center;
  gap:8px;
  cursor:pointer;
  user-select:none;
}
.v534-switch input{
  position:absolute;
  opacity:0;
  pointer-events:none;
}
.v534-switch-slider{
  position:relative;
  width:49px;
  height:27px;
  flex:0 0 auto;
  border-radius:999px;
  background:#c7d0cc;
  transition:.18s ease;
}
.v534-switch-slider:after{
  content:"";
  position:absolute;
  top:3px;
  left:3px;
  width:21px;
  height:21px;
  border-radius:50%;
  background:#fff;
  box-shadow:0 1px 3px rgba(0,0,0,.22);
  transition:.18s ease;
}
.v534-switch input:checked + .v534-switch-slider{
  background:#0b7b42;
}
.v534-switch input:checked + .v534-switch-slider:after{
  transform:translateX(22px);
}
.v534-switch b{
  color:#0b6338;
  font-size:12px;
  min-width:28px;
}
.v534-stamp-position-box{
  margin-top:22px;
  padding:14px 16px;
  border:1px solid #dbe6e0;
  border-radius:7px;
  background:#f8fbf9;
}
.v534-stamp-position-box>b{
  display:block;
  margin-bottom:6px;
  font-size:11.5px;
  color:#40544a;
}

/* Document stamp overlay — tuned to match the approved mockup */
.v533-stamped-signature{
  position:relative!important;
  min-height:24mm!important;
}
.v533-stamped-signature .v533-company-stamp{
  position:absolute!important;
  width:27mm!important;
  height:27mm!important;
  object-fit:contain!important;
  left:calc(50% - 24mm)!important;
  top:50%!important;
  transform:translateY(-49%) rotate(-2deg)!important;
  z-index:4!important;
  opacity:.95!important;
  pointer-events:none!important;
}
.v533-stamped-signature .inv-signature-image,
.v533-stamped-signature .v524-quote-signature{
  position:relative!important;
  z-index:3!important;
}
.invoice-print-document .v533-stamped-signature .inv-signature-image,
.print-area .v533-stamped-signature .inv-signature-image{
  max-width:45mm!important;
  max-height:23mm!important;
}
.v379-public-quote-page .v533-stamped-signature .v524-quote-signature,
.v371-preview-overlay .v533-stamped-signature .v524-quote-signature{
  max-width:42mm!important;
  max-height:22mm!important;
  object-fit:contain!important;
}

/* Order signature keeps name safely below stamp/signature */
.invoice-print-document .v243-order-seller-name,
.print-area .v243-order-seller-name{
  position:relative!important;
  z-index:5!important;
  margin-top:1mm!important;
}

/* Print/PDF consistency */
@media print{
  .v533-stamped-signature .v533-company-stamp{
    display:block!important;
    visibility:visible!important;
    opacity:.95!important;
    -webkit-print-color-adjust:exact!important;
    print-color-adjust:exact!important;
  }
}

@media(max-width:900px){
  .v534-stamp-grid{
    grid-template-columns:1fr;
  }
  .v534-stamp-upload-col{
    border-right:0;
    border-bottom:1px solid rgba(15,96,53,.14);
  }
  .v534-stamp-upload-row{
    grid-template-columns:1fr;
  }
  .v534-toggle-row{
    align-items:flex-start;
  }
  .v534-toggle-row>p{
    max-width:none;
  }
}


/* V535 - force company stamp to render in all document views */
.v533-stamped-signature .v533-company-stamp{
  display:block!important;
  visibility:visible!important;
  opacity:.96!important;
}
.v379-public-quote-page .v533-company-stamp,
.v372-preview-page .v533-company-stamp,
.invoice-print-document .v533-company-stamp,
.print-area .v533-company-stamp{
  display:block!important;
  visibility:visible!important;
  opacity:.96!important;
  z-index:20!important;
}


/* =========================================================
   V536 - LARGE COMPANY STAMP, MATCH APPROVED VISUAL DESIGN
   ========================================================= */

/* Larger red stamp for both purchase orders and quotations */
.v533-stamped-signature .v533-company-stamp{
  width:34mm!important;
  height:34mm!important;
  left:calc(50% - 29mm)!important;
  top:50%!important;
  transform:translateY(-49%) rotate(-2deg)!important;
  object-fit:contain!important;
  z-index:22!important;
  opacity:.97!important;
  display:block!important;
  visibility:visible!important;
  pointer-events:none!important;
}

/* Give the signature area enough room so the larger stamp never clips */
.invoice-print-document .v533-stamped-signature,
.print-area .v533-stamped-signature,
.v379-public-quote-page .v533-stamped-signature,
.v372-preview-page .v533-stamped-signature{
  min-height:30mm!important;
  overflow:visible!important;
}

/* Keep employee signature above/inside the stamped composition */
.invoice-print-document .v533-stamped-signature .inv-signature-image,
.print-area .v533-stamped-signature .inv-signature-image{
  max-width:46mm!important;
  max-height:24mm!important;
  position:relative!important;
  z-index:18!important;
}

.v379-public-quote-page .v533-stamped-signature .v524-quote-signature,
.v372-preview-page .v533-stamped-signature .v524-quote-signature{
  max-width:44mm!important;
  max-height:23mm!important;
  object-fit:contain!important;
  position:relative!important;
  z-index:18!important;
}

/* Keep staff name readable below the larger stamp */
.invoice-print-document .v243-order-seller-name,
.print-area .v243-order-seller-name,
.v379-public-quote-page .v519-signer-name,
.v372-preview-page .v519-signer-name{
  position:relative!important;
  z-index:25!important;
}

/* Print / PDF visibility */
@media print{
  .v533-stamped-signature .v533-company-stamp{
    width:34mm!important;
    height:34mm!important;
    left:calc(50% - 29mm)!important;
    display:block!important;
    visibility:visible!important;
    opacity:.97!important;
    -webkit-print-color-adjust:exact!important;
    print-color-adjust:exact!important;
  }
}

/* Keep the settings preview visually close to the real document stamp */
.v534-stamp-preview-box img{
  max-width:126px!important;
  max-height:126px!important;
}


/* V537 - edit customer name directly while creating/editing an order */
.v537-customer-edit-name{
  padding:9px 10px;
  border:1px solid rgba(15,96,53,.20);
  border-radius:4px;
  background:rgba(15,96,53,.035);
}
.v537-customer-name-changed{
  display:inline-flex;
  align-items:center;
  border-radius:999px;
  padding:2px 7px;
  background:rgba(15,96,53,.10);
  color:#0b6338;
  font-size:10px;
  font-weight:700;
}


/* =========================================================
   V540 - COMPANY STAMP OVER SIGNATURE + EMPLOYEE NAME
   ========================================================= */

/* Entire employee signer block becomes one stacking context */
.invoice-print-document .inv-signature-block,
.print-area .inv-signature-block,
.invoice-print-document .inv-signature-asset,
.print-area .inv-signature-asset,
.v379-public-quote-page .v519-sign-col,
.v372-preview-page .v519-sign-col{
  position:relative!important;
  overflow:visible!important;
}

/* Stamp is always the top-most layer */
.v533-stamped-signature .v533-company-stamp{
  position:absolute!important;
  width:36mm!important;
  height:36mm!important;
  object-fit:contain!important;
  left:calc(50% - 22mm)!important;
  top:68%!important;
  transform:translate(-6%,-50%) rotate(-2deg)!important;
  z-index:100!important;
  opacity:.97!important;
  display:block!important;
  visibility:visible!important;
  pointer-events:none!important;
}

/* Signature stays below the stamp */
.v533-stamped-signature .inv-signature-image,
.v533-stamped-signature .v524-quote-signature{
  position:relative!important;
  z-index:20!important;
}

/* Employee name must also sit below the stamp so the stamp overlaps it */
.invoice-print-document .v243-order-seller-name,
.print-area .v243-order-seller-name,
.v379-public-quote-page .v519-signer-name,
.v372-preview-page .v519-signer-name{
  position:relative!important;
  z-index:15!important;
}

/* Pull the stamp lower so it visibly covers both signature and name */
.invoice-print-document .v533-stamped-signature,
.print-area .v533-stamped-signature,
.v379-public-quote-page .v533-stamped-signature,
.v372-preview-page .v533-stamped-signature{
  min-height:31mm!important;
  overflow:visible!important;
}

/* Ensure parent signer column never clips the stamp */
.v379-public-quote-page .v519-sign-grid,
.v372-preview-page .v519-sign-grid,
.v379-public-quote-page .v519-sign-col,
.v372-preview-page .v519-sign-col,
.invoice-print-document .inv-signature-grid,
.print-area .inv-signature-grid{
  overflow:visible!important;
}

/* Print / PDF parity */
@media print{
  .v533-stamped-signature .v533-company-stamp{
    width:36mm!important;
    height:36mm!important;
    left:calc(50% - 22mm)!important;
    top:68%!important;
    z-index:100!important;
    opacity:.97!important;
    display:block!important;
    visibility:visible!important;
    -webkit-print-color-adjust:exact!important;
    print-color-adjust:exact!important;
  }
}


/* =========================================================
   V541 - REPOSITION STAMP / SIGNATURE / STAFF NAME
   Based on user screenshot: move stamp up + right, keep name readable
   ========================================================= */

/* Order + quote signer area: center and keep enough breathing room */
.invoice-print-document .v533-stamped-signature,
.print-area .v533-stamped-signature,
.v379-public-quote-page .v533-stamped-signature,
.v372-preview-page .v533-stamped-signature{
  min-height:30mm!important;
  display:flex!important;
  align-items:flex-start!important;
  justify-content:center!important;
  overflow:visible!important;
}

/* Move stamp upward and slightly to the right.
   Keep current size but reduce excessive overlap with staff name. */
.v533-stamped-signature .v533-company-stamp{
  width:36mm!important;
  height:36mm!important;
  left:calc(50% - 15mm)!important;
  top:44%!important;
  transform:translate(-8%,-50%) rotate(-2deg)!important;
  z-index:100!important;
  opacity:.96!important;
}

/* Shift employee signature slightly right so composition looks intentional */
.invoice-print-document .v533-stamped-signature .inv-signature-image,
.print-area .v533-stamped-signature .inv-signature-image{
  transform:translateX(8mm)!important;
  max-width:46mm!important;
  max-height:23mm!important;
  margin-top:2mm!important;
  z-index:25!important;
}

.v379-public-quote-page .v533-stamped-signature .v524-quote-signature,
.v372-preview-page .v533-stamped-signature .v524-quote-signature{
  transform:translateX(7mm)!important;
  max-width:44mm!important;
  max-height:22mm!important;
  margin-top:2mm!important;
  z-index:25!important;
}

/* Keep staff name clearly visible below.
   Name stays centered and above clipping but below stamp in stack. */
.invoice-print-document .v243-order-seller-name,
.print-area .v243-order-seller-name{
  margin-top:1.5mm!important;
  text-align:center!important;
  font-weight:700!important;
  position:relative!important;
  z-index:15!important;
}

.v379-public-quote-page .v519-signer-name,
.v372-preview-page .v519-signer-name{
  margin-top:1.5mm!important;
  text-align:center!important;
  font-weight:700!important;
  position:relative!important;
  z-index:15!important;
}

/* Give name line its own clear vertical space */
.invoice-print-document .inv-signature-block,
.print-area .inv-signature-block,
.v379-public-quote-page .v519-sign-col,
.v372-preview-page .v519-sign-col{
  padding-bottom:2mm!important;
}

/* Print/PDF parity */
@media print{
  .v533-stamped-signature .v533-company-stamp{
    width:36mm!important;
    height:36mm!important;
    left:calc(50% - 15mm)!important;
    top:44%!important;
    transform:translate(-8%,-50%) rotate(-2deg)!important;
    opacity:.96!important;
  }
  .invoice-print-document .v533-stamped-signature .inv-signature-image,
  .print-area .v533-stamped-signature .inv-signature-image{
    transform:translateX(8mm)!important;
  }
  .v379-public-quote-page .v533-stamped-signature .v524-quote-signature,
  .v372-preview-page .v533-stamped-signature .v524-quote-signature{
    transform:translateX(7mm)!important;
  }
}


/* =========================================================
   V542 - ALIGN EMPLOYEE NAME + TITLE UNDER SIGNATURE/STAMP
   ========================================================= */

/* Keep the whole seller/signature block compact and centered */
.invoice-print-document .inv-signature-block,
.print-area .inv-signature-block,
.v379-public-quote-page .v519-sign-col,
.v372-preview-page .v519-sign-col{
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:flex-start!important;
  text-align:center!important;
  padding-bottom:0!important;
  overflow:visible!important;
}

/* Pull employee name directly under signature/stamp */
.invoice-print-document .v243-order-seller-name,
.print-area .v243-order-seller-name,
.v379-public-quote-page .v519-signer-name,
.v372-preview-page .v519-signer-name{
  width:100%!important;
  margin:0!important;
  margin-top:-1.5mm!important;
  padding:0!important;
  text-align:center!important;
  font-weight:700!important;
  line-height:1.08!important;
  position:relative!important;
  z-index:16!important;
}

/* Title/role stays immediately below the name */
.invoice-print-document .v243-order-seller-title,
.print-area .v243-order-seller-title,
.invoice-print-document .v243-order-seller-role,
.print-area .v243-order-seller-role,
.v379-public-quote-page .v519-sign-role,
.v372-preview-page .v519-sign-role,
.v379-public-quote-page .v519-sign-sub,
.v372-preview-page .v519-sign-sub{
  width:100%!important;
  margin:0!important;
  margin-top:.4mm!important;
  padding:0!important;
  text-align:center!important;
  line-height:1.05!important;
  position:relative!important;
  z-index:16!important;
}

/* Reduce excessive vertical gap below the signature block */
.invoice-print-document .inv-signature-grid,
.print-area .inv-signature-grid,
.v379-public-quote-page .v519-sign-grid,
.v372-preview-page .v519-sign-grid{
  align-items:start!important;
  padding-bottom:0!important;
}

/* Prevent extra inherited margins from pushing name/title down */
.invoice-print-document .inv-signature-block p,
.print-area .inv-signature-block p,
.v379-public-quote-page .v519-sign-col p,
.v372-preview-page .v519-sign-col p{
  margin-bottom:0!important;
}

/* Print/PDF parity */
@media print{
  .invoice-print-document .v243-order-seller-name,
  .print-area .v243-order-seller-name,
  .v379-public-quote-page .v519-signer-name,
  .v372-preview-page .v519-signer-name{
    margin-top:-1.5mm!important;
  }
}


/* =========================================================
   V543 - FORCE ROLE/TITLE DIRECTLY UNDER EMPLOYEE NAME
   ========================================================= */

/* Make the employee signing column the positioning reference */
.invoice-print-document .inv-signature-block,
.print-area .inv-signature-block,
.v379-public-quote-page .v519-sign-col,
.v372-preview-page .v519-sign-col{
  position:relative!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:flex-start!important;
  text-align:center!important;
  overflow:visible!important;
}

/* Signature composition stays first */
.invoice-print-document .v533-stamped-signature,
.print-area .v533-stamped-signature,
.v379-public-quote-page .v533-stamped-signature,
.v372-preview-page .v533-stamped-signature{
  order:1!important;
}

/* Employee name directly below the signature */
.invoice-print-document .v243-order-seller-name,
.print-area .v243-order-seller-name,
.v379-public-quote-page .v519-signer-name,
.v372-preview-page .v519-signer-name{
  order:2!important;
  position:relative!important;
  left:auto!important;
  right:auto!important;
  top:auto!important;
  bottom:auto!important;
  transform:none!important;
  width:100%!important;
  max-width:100%!important;
  margin:-1.2mm 0 0!important;
  padding:0!important;
  display:block!important;
  text-align:center!important;
  line-height:1.05!important;
}

/* All role/title variants are forced immediately below the name */
.invoice-print-document .v243-order-seller-title,
.print-area .v243-order-seller-title,
.invoice-print-document .v243-order-seller-role,
.print-area .v243-order-seller-role,
.invoice-print-document .inv-signature-role,
.print-area .inv-signature-role,
.v379-public-quote-page .v519-sign-role,
.v372-preview-page .v519-sign-role,
.v379-public-quote-page .v519-sign-sub,
.v372-preview-page .v519-sign-sub{
  order:3!important;
  position:relative!important;
  left:auto!important;
  right:auto!important;
  top:auto!important;
  bottom:auto!important;
  transform:none!important;
  float:none!important;
  clear:both!important;
  width:100%!important;
  max-width:100%!important;
  margin:.25mm 0 0!important;
  padding:0!important;
  display:block!important;
  text-align:center!important;
  line-height:1.05!important;
}

/* Remove any absolute positioning inherited by nested role text */
.invoice-print-document .inv-signature-block [class*="seller-title"],
.invoice-print-document .inv-signature-block [class*="seller-role"],
.print-area .inv-signature-block [class*="seller-title"],
.print-area .inv-signature-block [class*="seller-role"]{
  position:relative!important;
  inset:auto!important;
  transform:none!important;
  text-align:center!important;
}

/* Print/PDF parity */
@media print{
  .invoice-print-document .v243-order-seller-name,
  .print-area .v243-order-seller-name{
    margin-top:-1.2mm!important;
  }
  .invoice-print-document .v243-order-seller-title,
  .print-area .v243-order-seller-title,
  .invoice-print-document .v243-order-seller-role,
  .print-area .v243-order-seller-role{
    margin-top:.25mm!important;
    text-align:center!important;
  }
}


/* V544 - Remove company representative line from employee signature block */
.invoice-print-document .v243-order-seller-title,
.print-area .v243-order-seller-title,
.invoice-print-document .v243-order-seller-role,
.print-area .v243-order-seller-role,
.invoice-print-document .inv-signature-role,
.print-area .inv-signature-role,
.v379-public-quote-page .v519-sign-role,
.v372-preview-page .v519-sign-role,
.v379-public-quote-page .v519-sign-sub,
.v372-preview-page .v519-sign-sub{
  display:none!important;
}

/* Keep employee name directly under signature/stamp */
.invoice-print-document .v243-order-seller-name,
.print-area .v243-order-seller-name,
.v379-public-quote-page .v519-signer-name,
.v372-preview-page .v519-signer-name{
  margin-top:-1.2mm!important;
  margin-bottom:0!important;
  text-align:center!important;
}


/* V545 - company representative title removed from document output */
.invoice-print-document [class*="seller-title"],
.invoice-print-document [class*="seller-role"],
.print-area [class*="seller-title"],
.print-area [class*="seller-role"],
.v379-public-quote-page .v519-sign-role,
.v379-public-quote-page .v519-sign-sub,
.v372-preview-page .v519-sign-role,
.v372-preview-page .v519-sign-sub{
  display:none!important;
}
.invoice-print-document .v243-order-seller-name,
.print-area .v243-order-seller-name,
.v379-public-quote-page .v519-signer-name,
.v372-preview-page .v519-signer-name{
  margin-top:-1mm!important;
  margin-bottom:0!important;
  text-align:center!important;
}


/* V546: only Order Form hides company representative title.
   Quote keeps its original representative/title area. */
.v379-public-quote-page .v519-sign-role,
.v379-public-quote-page .v519-sign-sub,
.v372-preview-page .v519-sign-role,
.v372-preview-page .v519-sign-sub{
  display:block!important;
}

/* Order form remains hidden */
.invoice-print-document .inv-signature-title,
.print-area .inv-signature-title,
.invoice-print-document [class*="seller-title"],
.invoice-print-document [class*="seller-role"],
.print-area [class*="seller-title"],
.print-area [class*="seller-role"]{
  display:none!important;
}


/* =========================================================
   V547 - KEEP ORDER SIGNATURE BLOCK ON PAGE 1
   Scope: Phiếu đặt hàng only. Quote is untouched.
   ========================================================= */

/* Notes area should not reserve excessive blank space before signatures */
.invoice-print-document .inv-notes,
.print-area .inv-notes,
.invoice-print-document .invoice-notes,
.print-area .invoice-notes{
  margin-bottom:2mm!important;
  padding-bottom:0!important;
  min-height:0!important;
}

/* Signature grid must follow notes naturally, not be pushed to a new sheet */
.invoice-print-document .inv-signature-grid,
.print-area .inv-signature-grid{
  margin-top:2mm!important;
  padding-top:0!important;
  padding-bottom:0!important;
  min-height:0!important;
  break-before:avoid-page!important;
  page-break-before:avoid!important;
  break-inside:avoid-page!important;
  page-break-inside:avoid!important;
}

/* Individual signature blocks must stay together */
.invoice-print-document .inv-signature-block,
.print-area .inv-signature-block{
  break-inside:avoid-page!important;
  page-break-inside:avoid!important;
  min-height:0!important;
  margin-top:0!important;
  margin-bottom:0!important;
  padding-bottom:0!important;
}

/* Do not let the stamp/signature composition itself force a second page */
.invoice-print-document .v533-stamped-signature,
.print-area .v533-stamped-signature{
  min-height:26mm!important;
  height:auto!important;
  margin-top:0!important;
  margin-bottom:0!important;
  break-inside:avoid-page!important;
  page-break-inside:avoid!important;
}

/* Compact buyer/sales headings and keep same two-column layout */
.invoice-print-document .inv-signature-title,
.print-area .inv-signature-title{
  margin-bottom:1mm!important;
}

/* Remove accidental bottom spacer after signature region */
.invoice-print-document .inv-signature-grid + *,
.print-area .inv-signature-grid + *{
  margin-top:0!important;
}

/* Main document should not reserve a full-page minimum height that pushes signatures down */
.invoice-print-document .inv-body,
.print-area .inv-body,
.invoice-print-document .invoice-body,
.print-area .invoice-body{
  min-height:0!important;
}

/* Order document only: allow natural content flow and avoid forced page breaks near footer/signature */
@media print{
  .invoice-print-document,
  .print-area{
    page-break-after:auto!important;
    break-after:auto!important;
  }

  .invoice-print-document .inv-notes,
  .print-area .inv-notes,
  .invoice-print-document .invoice-notes,
  .print-area .invoice-notes{
    margin-bottom:1.5mm!important;
  }

  .invoice-print-document .inv-signature-grid,
  .print-area .inv-signature-grid{
    margin-top:1.5mm!important;
    break-before:avoid-page!important;
    page-break-before:avoid!important;
    break-inside:avoid-page!important;
    page-break-inside:avoid!important;
  }

  .invoice-print-document .inv-signature-block,
  .print-area .inv-signature-block,
  .invoice-print-document .v533-stamped-signature,
  .print-area .v533-stamped-signature{
    break-inside:avoid-page!important;
    page-break-inside:avoid!important;
  }

  /* If browser previously inherited a fixed/min page height, neutralize it */
  .invoice-print-document .inv-content,
  .print-area .inv-content,
  .invoice-print-document .invoice-content,
  .print-area .invoice-content{
    min-height:0!important;
    height:auto!important;
  }
}


/* =========================================================
   V548 - EXACT PRINT FIX FOR REAL .inv-sign STRUCTURE
   ========================================================= */
@media print{
  /* The actual signature wrapper in InvoiceVIFOOD is .inv-sign */
  .print-area .inv-note{
    margin:1.5mm 0 1mm!important;
    padding:0!important;
    min-height:0!important;
    height:auto!important;
    break-after:avoid-page!important;
    page-break-after:avoid!important;
  }

  .print-area .inv-sign{
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    align-items:start!important;
    gap:8mm!important;
    margin:1mm 0 0!important;
    padding:0!important;
    min-height:30mm!important;
    height:30mm!important;
    max-height:30mm!important;
    break-before:avoid-page!important;
    page-break-before:avoid!important;
    break-inside:avoid-page!important;
    page-break-inside:avoid!important;
    overflow:visible!important;
  }

  .print-area .inv-sign > .text-center{
    min-height:30mm!important;
    height:30mm!important;
    margin:0!important;
    padding:0!important;
    break-inside:avoid-page!important;
    page-break-inside:avoid!important;
    overflow:visible!important;
  }

  .print-area .inv-sign-title{
    margin:0 0 1mm!important;
    padding:0!important;
    line-height:1.1!important;
  }

  .print-area .inv-sign-line{
    display:none!important;
    height:0!important;
    min-height:0!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
  }

  .print-area .inv-signature-asset{
    min-height:24mm!important;
    height:24mm!important;
    max-height:24mm!important;
    margin:0 auto!important;
    padding:0!important;
    overflow:visible!important;
  }

  /* Prevent outer paper/body from creating a blank continuation page */
  .print-area,
  .print-area > *{
    break-after:auto!important;
    page-break-after:auto!important;
  }
}

/* Screen preview is intentionally not changed by V548. */


/* =========================================================
   V550 - READABILITY 13PX + MORE SPACE FOR SALES NAME
   ========================================================= */

/* Quote: information text at 13px, headings keep their larger sizes */
.v379-public-quote-page .v372-company p,
.v372-preview-page .v372-company p,
.v379-public-quote-page .v520-quote-meta,
.v372-preview-page .v520-quote-meta,
.v379-public-quote-page .v519-card,
.v372-preview-page .v519-card,
.v379-public-quote-page .v519-card p,
.v372-preview-page .v519-card p,
.v379-public-quote-page .v519-card small,
.v372-preview-page .v519-card small,
.v379-public-quote-page .v519-card em,
.v372-preview-page .v519-card em,
.v379-public-quote-page table,
.v372-preview-page table{
  font-size:13px!important;
}

/* Give the quote signature area enough height for stamp/signature + full employee name */
.v379-public-quote-page .v519-confirm,
.v372-preview-page .v519-confirm{
  min-height:205px!important;
  overflow:visible!important;
}
.v379-public-quote-page .v519-sign-grid,
.v372-preview-page .v519-sign-grid{
  min-height:160px!important;
  overflow:visible!important;
}
.v379-public-quote-page .v519-sign-col,
.v372-preview-page .v519-sign-col{
  min-height:150px!important;
  overflow:visible!important;
  padding-bottom:8px!important;
}
.v379-public-quote-page .v519-sign-space,
.v372-preview-page .v519-sign-space{
  min-height:82px!important;
  overflow:visible!important;
}
.v379-public-quote-page .v519-signer-name,
.v372-preview-page .v519-signer-name{
  display:block!important;
  position:relative!important;
  z-index:120!important;
  width:100%!important;
  min-height:18px!important;
  margin:4px 0 0!important;
  padding:0 4px!important;
  font-size:13px!important;
  line-height:18px!important;
  font-weight:700!important;
  text-align:center!important;
  white-space:normal!important;
  overflow:visible!important;
}

/* Footer contact text clearer */
.v379-public-quote-page .v374-contact-strip,
.v372-preview-page .v374-contact-strip{
  font-size:13px!important;
}

/* Order print: keep 13px readable but preserve V548 page-break behavior */
@media print{
  .print-area .inv-note,
  .print-area .inv-sign,
  .print-area .inv-sign-title,
  .print-area .v243-order-seller-name{
    font-size:13px!important;
  }
  .print-area .v243-order-seller-name{
    line-height:18px!important;
    min-height:18px!important;
    overflow:visible!important;
    white-space:normal!important;
  }
}


/* V551 - show sale creator in quotation history */
.v551-quote-sale-created{
  display:flex!important;
  align-items:center!important;
  gap:6px!important;
  margin-top:4px!important;
  font-size:12px!important;
  line-height:1.3!important;
  color:var(--muted-foreground)!important;
}
.v551-quote-sale-created span{
  font-size:10.5px!important;
  font-weight:800!important;
  letter-spacing:.04em!important;
  color:#0b6338!important;
}
.v551-quote-sale-created strong{
  font-size:12px!important;
  font-weight:800!important;
  color:var(--foreground)!important;
}
.v551-last-quote-sale{
  display:block!important;
  margin-top:4px!important;
  font-size:12px!important;
  color:var(--muted-foreground)!important;
}
.v551-last-quote-sale strong{
  color:var(--foreground)!important;
  font-weight:800!important;
}
@media(max-width:700px){
  .v551-quote-sale-created{
    flex-wrap:wrap!important;
  }
}


/* =========================================================
   V554 - PROFESSIONAL FULL-SCREEN LOGIN
   ========================================================= */
.v554-login-page{
  position:relative!important;
  isolation:isolate!important;
  width:100%!important;
  min-height:100dvh!important;
  display:grid!important;
  grid-template-columns:minmax(0,1.12fr) minmax(420px,.88fr)!important;
  align-items:stretch!important;
  justify-content:stretch!important;
  gap:0!important;
  padding:0!important;
  overflow:hidden!important;
  background:
    radial-gradient(circle at 12% 12%,rgba(255,184,45,.18),transparent 24%),
    radial-gradient(circle at 86% 18%,rgba(34,197,94,.10),transparent 24%),
    linear-gradient(135deg,#073824 0%,#0b5b39 46%,#f6f8f5 46.2%,#fff 100%)!important;
  font-family:"Times New Roman",Times,serif!important;
}
.v554-login-page::before{
  content:"VIFOOD\A QUẢN TRỊ KINH DOANH TẬP TRUNG\A\A Lấy chữ Tín làm nền tảng\A Lấy chất lượng làm giá trị\A Lấy khách hàng làm trung tâm\A Lấy uy tín để phát triển bền vững.";
  white-space:pre-line;
  grid-column:1;
  grid-row:1;
  align-self:center;
  justify-self:center;
  width:min(72%,700px);
  padding:56px 54px;
  color:#fff;
  font-size:17px;
  line-height:1.75;
  letter-spacing:.01em;
  border:1px solid rgba(255,255,255,.18);
  border-radius:24px;
  background:linear-gradient(145deg,rgba(255,255,255,.10),rgba(255,255,255,.035));
  box-shadow:0 28px 70px rgba(0,0,0,.17);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
.v554-login-page::first-line{
  font-size:44px;
  line-height:1.05;
  font-weight:800;
  letter-spacing:.08em;
}
.v554-login-card{
  grid-column:2!important;
  grid-row:1!important;
  align-self:center!important;
  justify-self:center!important;
  width:min(82%,520px)!important;
  max-width:520px!important;
  margin:0!important;
  padding:42px 44px 34px!important;
  border:1px solid rgba(15,96,53,.13)!important;
  border-top:5px solid #f4b228!important;
  border-radius:22px!important;
  background:rgba(255,255,255,.96)!important;
  box-shadow:0 28px 80px rgba(15,23,42,.16)!important;
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}
.v554-login-header{
  border-bottom:1px solid #e1e8e3!important;
  padding-bottom:24px!important;
}
.v554-login-mark{
  width:52px!important;
  height:52px!important;
  border-radius:14px!important;
  background:linear-gradient(145deg,#f9c43e,#f4a910)!important;
  color:#17422d!important;
  font-size:25px!important;
  box-shadow:0 8px 22px rgba(244,178,40,.28)!important;
}
.v554-login-header h1{
  margin-top:28px!important;
  color:#173c2a!important;
  font-size:31px!important;
  line-height:1.1!important;
  letter-spacing:-.02em!important;
}
.v554-login-header p{
  margin-top:9px!important;
  color:#6a756e!important;
  font-family:Arial,Helvetica,sans-serif!important;
  font-size:13px!important;
}
.v554-login-form{
  padding-top:26px!important;
}
.v554-login-form label{
  color:#506158!important;
  font-family:Arial,Helvetica,sans-serif!important;
  font-size:11px!important;
  letter-spacing:.09em!important;
}
.v554-login-form input{
  height:48px!important;
  border:1px solid #d9e2dc!important;
  border-radius:10px!important;
  background:#fbfcfb!important;
  padding-left:42px!important;
  font-size:14px!important;
  box-shadow:none!important;
}
.v554-login-form input:focus{
  border-color:#0e7146!important;
  background:#fff!important;
  box-shadow:0 0 0 3px rgba(14,113,70,.10)!important;
}
.v554-login-form button[type="submit"]{
  height:49px!important;
  margin-top:6px!important;
  border:0!important;
  border-radius:10px!important;
  background:linear-gradient(135deg,#0b623c,#0a4f32)!important;
  color:#fff!important;
  font-family:Arial,Helvetica,sans-serif!important;
  font-size:12px!important;
  font-weight:800!important;
  letter-spacing:.12em!important;
  box-shadow:0 11px 26px rgba(11,98,60,.20)!important;
}
.v554-login-form button[type="submit"]:hover{
  transform:translateY(-1px);
  box-shadow:0 14px 30px rgba(11,98,60,.26)!important;
}
.v554-login-footer{
  margin-top:30px!important;
  padding-top:17px!important;
  border-top:1px solid #e4ebe6!important;
  color:#78827c!important;
  font-family:Arial,Helvetica,sans-serif!important;
  font-size:10.5px!important;
  text-align:center!important;
}
.v554-login-card aside[role="alert"]{
  border-left:4px solid #d99a17!important;
  border-radius:8px!important;
  background:#fff8e8!important;
  font-family:Arial,Helvetica,sans-serif!important;
}

@media(max-width:980px){
  .v554-login-page{
    grid-template-columns:1fr!important;
    align-items:center!important;
    padding:28px 18px!important;
    background:
      radial-gradient(circle at 18% 8%,rgba(255,184,45,.18),transparent 28%),
      linear-gradient(145deg,#073824 0%,#0b5b39 38%,#eef4f0 38.2%,#fff 100%)!important;
  }
  .v554-login-page::before{
    display:none!important;
  }
  .v554-login-card{
    grid-column:1!important;
    width:min(100%,520px)!important;
    padding:36px 30px 30px!important;
  }
}
@media(max-width:560px){
  .v554-login-page{
    padding:0!important;
    align-items:stretch!important;
    background:#fff!important;
  }
  .v554-login-card{
    width:100%!important;
    min-height:100dvh!important;
    max-width:none!important;
    border:0!important;
    border-top:5px solid #f4b228!important;
    border-radius:0!important;
    padding:34px 22px 24px!important;
    box-shadow:none!important;
    display:flex!important;
    flex-direction:column!important;
    justify-content:center!important;
  }
  .v554-login-header h1{
    font-size:28px!important;
  }
  .v554-login-footer{
    margin-top:26px!important;
  }
}


/* =========================================================
   V555 - VIFOOD BACKGROUND WATERMARK ON LOGIN
   ========================================================= */
.v554-login-card::before{
  content:"VIFOOD";
  position:absolute;
  z-index:0;
  right:-28px;
  bottom:22px;
  font-family:"Times New Roman",Times,serif;
  font-size:clamp(72px,9vw,150px);
  line-height:1;
  font-weight:800;
  letter-spacing:.04em;
  color:rgba(8,91,54,.035);
  transform:rotate(-8deg);
  pointer-events:none;
}
.v554-login-card > *{position:relative;z-index:1}


/* =========================================================
   V556 - USER PHOTO AS LEFT LOGIN BACKGROUND
   ========================================================= */

.v554-login-page{
  background:#f4f6f5!important;
  grid-template-columns:minmax(0,1.18fr) minmax(430px,.82fr)!important;
}

/* Left visual panel uses the real VIFOOD team photo */
.v554-login-page::after{
  content:""!important;
  position:absolute!important;
  z-index:-2!important;
  left:0!important;
  top:0!important;
  width:58.7%!important;
  height:100%!important;
  transform:none!important;
  background:
    linear-gradient(90deg,rgba(3,54,34,.82) 0%,rgba(3,67,41,.70) 46%,rgba(3,67,41,.42) 76%,rgba(3,67,41,.16) 100%),
    linear-gradient(180deg,rgba(3,48,31,.12),rgba(3,48,31,.30)),
    url("/assets/v556-login-team-background.jpg") center center/cover no-repeat!important;
  opacity:1!important;
  filter:none!important;
  pointer-events:none!important;
}

/* Soft gold divider between photo and login panel */
.v554-login-page > .v554-login-card::before{
  content:"";
  position:fixed;
  z-index:-1;
  left:58.25%;
  top:0;
  width:6px;
  height:100dvh;
  background:linear-gradient(180deg,#f7d46b 0%,#d7a932 50%,#f7d46b 100%);
  opacity:.72;
  box-shadow:0 0 24px rgba(215,169,50,.16);
  pointer-events:none;
}

/* Left slogan card now overlays the photo */
.v554-login-page::before{
  content:"VIFOOD\A HỆ THỐNG QUẢN TRỊ DOANH THU\A\A Lấy chữ Tín làm nền tảng\A Lấy chất lượng làm giá trị\A Lấy khách hàng làm trung tâm\A Lấy uy tín để phát triển bền vững."!important;
  white-space:pre-line!important;
  position:relative!important;
  z-index:1!important;
  grid-column:1!important;
  grid-row:1!important;
  align-self:center!important;
  justify-self:start!important;
  width:min(68%,680px)!important;
  margin-left:7vw!important;
  padding:42px 44px!important;
  color:#fff!important;
  font-family:"Times New Roman",Times,serif!important;
  font-size:17px!important;
  line-height:1.72!important;
  letter-spacing:.01em!important;
  border:1px solid rgba(255,255,255,.20)!important;
  border-radius:22px!important;
  background:linear-gradient(145deg,rgba(0,47,29,.56),rgba(0,47,29,.26))!important;
  box-shadow:0 28px 70px rgba(0,0,0,.18)!important;
  backdrop-filter:blur(6px)!important;
  -webkit-backdrop-filter:blur(6px)!important;
  text-shadow:0 2px 8px rgba(0,0,0,.20)!important;
}
.v554-login-page::first-line{
  color:#fff!important;
  font-size:46px!important;
  line-height:1!important;
  font-weight:800!important;
  letter-spacing:.07em!important;
}

/* Right side remains bright, simple and professional */
.v554-login-card{
  grid-column:2!important;
  width:min(80%,520px)!important;
  background:rgba(255,255,255,.985)!important;
  border:1px solid rgba(12,92,55,.12)!important;
  border-top:5px solid #e8b438!important;
  border-radius:22px!important;
  box-shadow:0 30px 85px rgba(15,23,42,.15)!important;
}

/* Keep all content above decorative layers */
.v554-login-card > *{
  position:relative!important;
  z-index:2!important;
}

/* Tablet */
@media(max-width:1100px){
  .v554-login-page{
    grid-template-columns:minmax(0,1fr) minmax(390px,.84fr)!important;
  }
  .v554-login-page::after{
    width:54%!important;
    background:
      linear-gradient(90deg,rgba(3,54,34,.82) 0%,rgba(3,67,41,.64) 70%,rgba(3,67,41,.18) 100%),
      url("/assets/v556-login-team-background.jpg") 55% center/cover no-repeat!important;
  }
  .v554-login-page::before{
    width:72%!important;
    margin-left:5vw!important;
    padding:34px 32px!important;
    font-size:15px!important;
  }
  .v554-login-page > .v554-login-card::before{
    left:53.6%!important;
  }
}

/* Mobile/tablet collapse: use photo as subtle full-screen hero behind the card */
@media(max-width:980px){
  .v554-login-page{
    grid-template-columns:1fr!important;
    padding:28px 18px!important;
    background:#eef3f0!important;
  }
  .v554-login-page::after{
    display:block!important;
    z-index:-2!important;
    width:100%!important;
    height:100%!important;
    background:
      linear-gradient(rgba(3,58,37,.76),rgba(3,58,37,.76)),
      url("/assets/v556-login-team-background.jpg") center/cover no-repeat!important;
  }
  .v554-login-page::before{
    display:none!important;
  }
  .v554-login-card{
    grid-column:1!important;
    width:min(100%,520px)!important;
    background:rgba(255,255,255,.965)!important;
  }
  .v554-login-page > .v554-login-card::before{
    display:none!important;
  }
}

/* Phone: keep maximum readability */
@media(max-width:560px){
  .v554-login-page{
    padding:0!important;
    background:#fff!important;
  }
  .v554-login-page::after{
    display:none!important;
  }
  .v554-login-card{
    width:100%!important;
    min-height:100dvh!important;
    border-radius:0!important;
    background:#fff!important;
  }
}


/* =========================================================
   V557 - LOGIN REDESIGN CLOSE TO APPROVED MOCKUP
   ========================================================= */

.v554-login-page{
  position:relative!important;
  width:100%!important;
  min-height:100dvh!important;
  display:grid!important;
  grid-template-columns:minmax(0,63%) minmax(420px,37%)!important;
  align-items:stretch!important;
  padding:0!important;
  margin:0!important;
  overflow:hidden!important;
  background:#f7f8f7!important;
  font-family:Arial,Helvetica,sans-serif!important;
}

/* LEFT PHOTO PANEL */
.v554-login-page::after{
  content:""!important;
  position:absolute!important;
  inset:0 auto 0 0!important;
  z-index:-3!important;
  width:63%!important;
  height:100%!important;
  transform:none!important;
  background:
    linear-gradient(90deg,rgba(0,65,39,.92) 0%,rgba(0,77,45,.76) 34%,rgba(0,78,46,.43) 72%,rgba(0,78,46,.20) 100%),
    linear-gradient(180deg,rgba(0,46,29,.05),rgba(0,46,29,.42)),
    url("/assets/v556-login-team-background.jpg") center center/cover no-repeat!important;
  opacity:1!important;
  filter:none!important;
}

/* Gold curved separator, visually similar to mockup */
.v554-login-page .v554-login-card::before{
  content:""!important;
  position:fixed!important;
  z-index:-2!important;
  left:61.6%!important;
  top:-8vh!important;
  width:44px!important;
  height:116vh!important;
  border-radius:50%!important;
  background:linear-gradient(180deg,#f5d77a 0%,#c99d2d 48%,#f2d06a 100%)!important;
  box-shadow:0 0 30px rgba(197,151,38,.20)!important;
  transform:rotate(2.5deg)!important;
  opacity:.95!important;
}

/* LEFT COPY DIRECTLY ON IMAGE, NO FLOATING GLASS CARD */
.v554-login-page::before{
  content:
  "VIFOOD\A"
  "NỀN TẢNG QUẢN TRỊ\A"
  "DOANH THU TOÀN DIỆN\A\A"
  "✓  Lấy chữ Tín làm nền tảng\A\A"
  "✓  Lấy chất lượng làm giá trị\A\A"
  "✓  Lấy khách hàng làm trung tâm\A\A"
  "✓  Lấy uy tín để phát triển bền vững."!important;
  white-space:pre-line!important;
  grid-column:1!important;
  grid-row:1!important;
  align-self:center!important;
  justify-self:start!important;
  width:54%!important;
  max-width:570px!important;
  margin:0 0 0 4vw!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  color:#fff!important;
  font-family:Arial,Helvetica,sans-serif!important;
  font-size:17px!important;
  font-weight:500!important;
  line-height:1.55!important;
  letter-spacing:0!important;
  text-shadow:0 2px 12px rgba(0,0,0,.26)!important;
  z-index:2!important;
}
.v554-login-page::first-line{
  color:#fff!important;
  font-family:Arial,Helvetica,sans-serif!important;
  font-size:54px!important;
  line-height:1!important;
  font-weight:900!important;
  letter-spacing:.035em!important;
}

/* RIGHT WHITE PANEL */
.v554-login-card{
  grid-column:2!important;
  grid-row:1!important;
  align-self:center!important;
  justify-self:center!important;
  width:min(82%,500px)!important;
  max-width:500px!important;
  min-height:auto!important;
  margin:0!important;
  padding:40px 40px 34px!important;
  border:1px solid #e3e8e5!important;
  border-top:1px solid #e3e8e5!important;
  border-radius:24px!important;
  background:#fff!important;
  box-shadow:0 26px 65px rgba(15,23,42,.13)!important;
  position:relative!important;
  z-index:4!important;
}

/* Card top = centered welcome + brand, like mockup */
.v554-login-header{
  border:0!important;
  padding:0 0 22px!important;
  text-align:center!important;
}
.v554-login-header > div:first-child{
  justify-content:center!important;
  gap:11px!important;
}
.v554-login-mark{
  width:48px!important;
  height:48px!important;
  border-radius:14px!important;
  background:linear-gradient(145deg,#0a7444,#095c38)!important;
  color:#f7c649!important;
  font-size:24px!important;
  box-shadow:none!important;
}
.v554-login-header > div:first-child > div:last-child > div:first-child{
  color:#0b6a40!important;
  font-size:31px!important;
  font-weight:900!important;
  letter-spacing:.025em!important;
}
.v554-login-header > div:first-child > div:last-child > div:last-child{
  color:#4f6c5d!important;
  font-size:10px!important;
  letter-spacing:.13em!important;
}
.v554-login-header h1{
  margin:27px 0 0!important;
  color:#124c31!important;
  font-size:18px!important;
  font-weight:800!important;
  line-height:1.25!important;
  letter-spacing:0!important;
}
.v554-login-header h1::before{
  content:"Chào mừng bạn đến với";
  display:block;
  margin-bottom:8px;
  color:#285f44;
  font-size:14px;
  font-weight:700;
}
.v554-login-header p{
  margin:9px 0 0!important;
  color:#76817b!important;
  font-size:12.5px!important;
  line-height:1.55!important;
}

/* Form fields */
.v554-login-form{
  padding-top:6px!important;
}
.v554-login-form > div{
  gap:15px!important;
}
.v554-login-form label{
  text-align:left!important;
  color:#65736b!important;
  font-size:10px!important;
  font-weight:800!important;
  letter-spacing:.09em!important;
}
.v554-login-form input{
  height:50px!important;
  border:1px solid #dfe5e1!important;
  border-radius:10px!important;
  background:#fff!important;
  padding-left:42px!important;
  font-size:14px!important;
  color:#1f2d26!important;
}
.v554-login-form input::placeholder{
  color:#9aa39e!important;
}
.v554-login-form input:focus{
  border-color:#0c7546!important;
  box-shadow:0 0 0 3px rgba(12,117,70,.09)!important;
}
.v554-login-form button[type="submit"]{
  height:51px!important;
  margin-top:7px!important;
  border-radius:10px!important;
  background:linear-gradient(90deg,#096c41 0%,#0a8c51 100%)!important;
  color:#fff!important;
  font-size:12px!important;
  font-weight:800!important;
  letter-spacing:.10em!important;
  box-shadow:0 10px 24px rgba(9,108,65,.20)!important;
}
.v554-login-form button[type="submit"]:hover{
  background:linear-gradient(90deg,#085c38 0%,#087b47 100%)!important;
  transform:translateY(-1px)!important;
}

/* Small security line before footer */
.v554-login-footer{
  position:relative!important;
  margin-top:25px!important;
  padding-top:42px!important;
  border-top:1px solid #edf0ee!important;
  color:#8b948f!important;
  text-align:center!important;
  font-size:10px!important;
  line-height:1.5!important;
}
.v554-login-footer::before{
  content:"◉  Bảo mật · An toàn · Hiệu quả";
  position:absolute;
  left:0;
  right:0;
  top:15px;
  color:#197248;
  font-size:11.5px;
  font-weight:700;
}

/* Remove V555 watermark text if inherited */
.v554-login-card::after{
  display:none!important;
}

/* LARGE SCREENS */
@media(min-width:1500px){
  .v554-login-page::before{
    margin-left:5vw!important;
    width:52%!important;
    max-width:620px!important;
    font-size:18px!important;
  }
  .v554-login-page::first-line{
    font-size:62px!important;
  }
  .v554-login-card{
    width:min(78%,530px)!important;
    max-width:530px!important;
    padding:44px 44px 36px!important;
  }
}

/* TABLET */
@media(max-width:1100px){
  .v554-login-page{
    grid-template-columns:minmax(0,55%) minmax(400px,45%)!important;
  }
  .v554-login-page::after{
    width:55%!important;
    background:
      linear-gradient(90deg,rgba(0,65,39,.90) 0%,rgba(0,76,45,.68) 60%,rgba(0,76,45,.22) 100%),
      url("/assets/v556-login-team-background.jpg") 54% center/cover no-repeat!important;
  }
  .v554-login-page .v554-login-card::before{
    left:53.8%!important;
  }
  .v554-login-page::before{
    width:72%!important;
    margin-left:4vw!important;
    font-size:15px!important;
  }
  .v554-login-page::first-line{
    font-size:42px!important;
  }
  .v554-login-card{
    width:86%!important;
    padding:34px 28px 28px!important;
  }
}

/* MOBILE: preserve brand image as top hero instead of removing it */
@media(max-width:1100px){
  .v554-login-page{
    display:flex!important;
    flex-direction:column!important;
    min-height:100dvh!important;
    overflow:auto!important;
    background:#fff!important;
  }
  .v554-login-page::after{
    position:relative!important;
    display:block!important;
    width:100%!important;
    height:230px!important;
    min-height:230px!important;
    flex:0 0 230px!important;
    background:
      linear-gradient(90deg,rgba(0,65,39,.76),rgba(0,65,39,.30)),
      url("/assets/v556-login-team-background.jpg") center 34%/cover no-repeat!important;
  }
  .v554-login-page::before{
    content:"VIFOOD\A QUẢN TRỊ DOANH THU TOÀN DIỆN"!important;
    display:block!important;
    position:absolute!important;
    top:56px!important;
    left:24px!important;
    width:65%!important;
    margin:0!important;
    color:#fff!important;
    font-size:15px!important;
    line-height:1.45!important;
    font-weight:700!important;
    z-index:2!important;
  }
  .v554-login-page::first-line{
    font-size:34px!important;
  }
  .v554-login-page .v554-login-card::before{
    display:none!important;
  }
  .v554-login-card{
    width:min(100% - 28px,520px)!important;
    max-width:520px!important;
    min-height:0!important;
    margin:-26px auto 24px!important;
    padding:30px 24px 26px!important;
    border-radius:20px!important;
    box-shadow:0 18px 45px rgba(15,23,42,.15)!important;
    z-index:5!important;
  }
}

/* SMALL PHONE */
@media(max-width:520px){
  .v554-login-page::after{
    height:190px!important;
    min-height:190px!important;
    flex-basis:190px!important;
  }
  .v554-login-page::before{
    top:43px!important;
    left:20px!important;
    width:72%!important;
  }
  .v554-login-card{
    width:calc(100% - 20px)!important;
    margin:-22px 10px 18px!important;
    padding:28px 20px 24px!important;
  }
  .v554-login-header > div:first-child > div:last-child > div:first-child{
    font-size:27px!important;
  }
}


/* =========================================================
   V557 REBUILT — MATCH USER APPROVED LOGIN DESIGN
   ========================================================= */

html,body,#root{min-height:100%}
.v554-login-page{
  position:relative!important; isolation:isolate!important;
  width:100vw!important; min-height:100dvh!important; height:100dvh!important;
  margin:0!important; padding:0!important; overflow:hidden!important;
  display:grid!important; grid-template-columns:63.5% 36.5%!important; gap:0!important;
  background:#f7f8f7!important; font-family:Arial,Helvetica,sans-serif!important;
}
.v554-login-page::after{
  content:""!important; position:absolute!important; inset:0 auto 0 0!important;
  z-index:-3!important; width:63.5%!important; height:100%!important;
  transform:none!important; opacity:1!important; filter:none!important;
  background:
    linear-gradient(90deg,rgba(0,68,41,.95) 0%,rgba(0,73,43,.88) 24%,rgba(0,76,45,.67) 57%,rgba(0,76,45,.37) 82%,rgba(0,76,45,.16) 100%),
    linear-gradient(180deg,rgba(0,44,28,.05),rgba(0,44,28,.32)),
    url("/assets/v557-team-login-bg.jpg") 52% center/cover no-repeat!important;
  pointer-events:none!important;
}
.v554-login-page .v554-login-card::before{
  content:""!important; display:block!important; position:fixed!important; z-index:-2!important;
  left:61.8%!important; top:-8vh!important; width:26px!important; height:116vh!important;
  border-radius:50% 0 0 50%!important;
  background:linear-gradient(180deg,#f6dc7a,#d8aa34 48%,#f4d36a)!important;
  box-shadow:0 0 18px rgba(214,168,50,.24)!important;
  transform:rotate(2.2deg)!important; pointer-events:none!important;
}
.v554-login-page::before{
  content:"VIFOOD\A NỀN TẢNG QUẢN TRỊ\A DOANH THU TOÀN DIỆN\A\A ●  Lấy chữ Tín làm nền tảng\A\A ●  Lấy chất lượng làm giá trị\A\A ●  Lấy khách hàng làm trung tâm\A\A ●  Lấy uy tín để phát triển bền vững."!important;
  white-space:pre-line!important; grid-column:1!important; grid-row:1!important;
  align-self:center!important; justify-self:start!important; z-index:2!important;
  width:46%!important; max-width:560px!important; margin-left:3.7vw!important;
  padding:0!important; border:0!important; background:transparent!important; box-shadow:none!important;
  color:#fff!important; font-family:Arial,Helvetica,sans-serif!important;
  font-size:16px!important; line-height:1.48!important; font-weight:600!important;
  text-shadow:0 2px 9px rgba(0,0,0,.24)!important;
}
.v554-login-page::first-line{
  font-size:54px!important; line-height:1!important; font-weight:900!important;
  letter-spacing:.035em!important; color:#fff!important;
}
.v554-login-card{
  grid-column:2!important; grid-row:1!important; align-self:center!important; justify-self:center!important;
  width:min(79%,490px)!important; max-width:490px!important; margin:0!important;
  padding:40px 39px 34px!important; border:1px solid #e4e8e5!important;
  border-top:1px solid #e4e8e5!important; border-radius:22px!important;
  background:rgba(255,255,255,.985)!important; box-shadow:0 24px 58px rgba(15,23,42,.14)!important;
  overflow:hidden!important; z-index:4!important;
}
.v554-login-header{padding:0 0 22px!important; border:0!important; text-align:center!important}
.v554-login-header > div:first-child{
  display:flex!important; align-items:center!important; justify-content:center!important; gap:10px!important; margin-bottom:22px!important;
}
.v554-login-mark{
  flex:0 0 46px!important; width:46px!important; height:46px!important; display:flex!important;
  align-items:center!important; justify-content:center!important; border-radius:13px!important;
  background:#087145!important; color:#f0bc36!important; font-size:23px!important; font-weight:900!important; box-shadow:none!important;
}
.v554-login-header > div:first-child > div:last-child{text-align:left!important}
.v554-login-header > div:first-child > div:last-child > div:first-child{
  color:#087044!important; font-size:30px!important; line-height:1!important; font-weight:900!important; white-space:nowrap!important;
}
.v554-login-header > div:first-child > div:last-child > div:last-child{
  margin-top:4px!important; color:#6c7a72!important; font-size:9.5px!important; font-weight:700!important;
  letter-spacing:.11em!important; white-space:nowrap!important;
}
.v554-login-header h1{
  margin:0!important; padding:0!important; color:#0d5d39!important; font-size:20px!important;
  line-height:1.18!important; font-weight:900!important; text-align:center!important;
}
.v554-login-header h1::before{
  content:"Chào mừng bạn đến với"!important; display:block!important; margin-bottom:7px!important;
  color:#2b684a!important; font-size:13.5px!important; font-weight:700!important;
}
.v554-login-header p{
  max-width:330px!important; margin:8px auto 0!important; color:#7f8984!important;
  font-size:12px!important; line-height:1.45!important; text-align:center!important;
}
.v554-login-form{padding-top:8px!important}
.v554-login-form > div{gap:14px!important}
.v554-login-form label{
  display:grid!important; gap:6px!important; color:#58665e!important; font-size:10px!important;
  font-weight:800!important; letter-spacing:.08em!important;
}
.v554-login-form input{
  width:100%!important; height:49px!important; min-height:49px!important; padding:0 14px 0 41px!important;
  border:1px solid #dde4df!important; border-radius:9px!important; background:#fff!important;
  color:#202a25!important; font-size:14px!important; box-shadow:none!important;
}
.v554-login-form input:focus{border-color:#0a7b49!important; box-shadow:0 0 0 3px rgba(10,123,73,.09)!important}
.v554-login-form button[type="submit"]{
  height:50px!important; min-height:50px!important; margin-top:5px!important; border:0!important; border-radius:9px!important;
  background:linear-gradient(90deg,#076b40,#0b8d53)!important; color:#fff!important;
  font-size:12px!important; font-weight:900!important; letter-spacing:.10em!important;
  box-shadow:0 10px 23px rgba(7,107,64,.20)!important;
}
.v554-login-form button[type="submit"]:hover{
  background:linear-gradient(90deg,#065d38,#087d49)!important; transform:translateY(-1px)!important;
}
.v554-login-footer{
  position:relative!important; margin-top:24px!important; padding-top:43px!important;
  border-top:1px solid #edf0ee!important; color:#8c9590!important; font-size:9.5px!important;
  line-height:1.45!important; text-align:center!important;
}
.v554-login-footer::before{
  content:"◉  Bảo mật · An toàn · Hiệu quả"!important;
  position:absolute!important; left:0!important; right:0!important; top:14px!important;
  color:#147246!important; font-size:11.5px!important; font-weight:700!important;
}
.v554-login-card::after{
  content:""!important; position:fixed!important; z-index:-1!important; right:2.5vw!important; top:2.4vh!important;
  width:125px!important; height:125px!important;
  background-image:radial-gradient(circle,#dfe5e1 1.2px,transparent 1.4px)!important;
  background-size:14px 14px!important; opacity:.75!important; pointer-events:none!important;
}
@media(min-width:1500px){
  .v554-login-page::before{margin-left:4.2vw!important; max-width:610px!important; font-size:17px!important}
  .v554-login-page::first-line{font-size:60px!important}
  .v554-login-card{width:min(76%,515px)!important; max-width:515px!important; padding:42px 42px 35px!important}
}
@media(max-width:1180px){
  .v554-login-page{grid-template-columns:58% 42%!important}
  .v554-login-page::after{width:58%!important}
  .v554-login-page .v554-login-card::before{left:56.6%!important}
  .v554-login-page::before{width:66%!important; margin-left:4vw!important; font-size:14.5px!important}
  .v554-login-page::first-line{font-size:40px!important}
  .v554-login-card{width:85%!important; padding:32px 28px 27px!important}
}
@media(max-width:1100px){
  .v554-login-page{
    display:flex!important; flex-direction:column!important; min-height:100dvh!important;
    height:auto!important; overflow:auto!important; background:#fff!important;
  }
  .v554-login-page::after{
    position:relative!important; width:100%!important; height:220px!important; min-height:220px!important; flex:0 0 220px!important;
    background:linear-gradient(90deg,rgba(0,68,41,.80),rgba(0,68,41,.32)),
      url("/assets/v557-team-login-bg.jpg") center 34%/cover no-repeat!important;
  }
  .v554-login-page .v554-login-card::before{display:none!important}
  .v554-login-page::before{
    content:"VIFOOD\A QUẢN TRỊ DOANH THU TOÀN DIỆN"!important;
    display:block!important; position:absolute!important; top:50px!important; left:22px!important;
    width:68%!important; margin:0!important; color:#fff!important; font-size:14px!important; line-height:1.45!important; z-index:2!important;
  }
  .v554-login-page::first-line{font-size:34px!important}
  .v554-login-card{
    width:min(calc(100% - 26px),520px)!important; max-width:520px!important; margin:-24px auto 22px!important;
    padding:29px 24px 25px!important; border-radius:18px!important; box-shadow:0 18px 42px rgba(15,23,42,.15)!important;
  }
  .v554-login-card::after{display:none!important}
}


/* =========================================================
   V558 HQ LOGIN — SHARP TEXT + REALISTIC HERO
   ========================================================= */

/* Use the high-resolution design visual only as the left-side photographic hero.
   All important UI text/form remains live HTML/CSS for maximum sharpness. */
.v554-login-page{
  position:relative!important;
  min-height:100dvh!important;
  height:100dvh!important;
  display:grid!important;
  grid-template-columns:63% 37%!important;
  overflow:hidden!important;
  background:#f7f8f7!important;
  font-family:Arial,Helvetica,sans-serif!important;
}
.v554-login-page::after{
  content:""!important;
  position:absolute!important;
  inset:0 auto 0 0!important;
  width:63%!important;
  height:100%!important;
  z-index:-3!important;
  opacity:1!important;
  filter:none!important;
  transform:none!important;
  background:
    linear-gradient(90deg,rgba(0,66,39,.22),rgba(0,66,39,.05)),
    url("/assets/v558-login-hero-hq.png") left center/cover no-repeat!important;
}

/* Suppress old duplicated left-side pseudo text because the HQ visual already
   contains the approved hero composition. */
.v554-login-page::before{
  content:""!important;
  display:none!important;
}

/* Keep live form on top of the reference visual's right side. */
.v554-login-card{
  grid-column:2!important;
  align-self:center!important;
  justify-self:center!important;
  position:relative!important;
  z-index:10!important;
  width:min(82%,500px)!important;
  max-width:500px!important;
  padding:40px 40px 34px!important;
  border:1px solid #e2e7e4!important;
  border-radius:22px!important;
  background:rgba(255,255,255,.985)!important;
  box-shadow:0 24px 60px rgba(15,23,42,.15)!important;
  overflow:hidden!important;
}

/* Remove any old stripe crossing the form. */
.v554-login-card::before,
.v554-login-card::after{
  display:none!important;
  content:none!important;
}

/* Crisp typography */
.v554-login-card,
.v554-login-card *{
  text-rendering:geometricPrecision!important;
  -webkit-font-smoothing:antialiased!important;
  -moz-osx-font-smoothing:grayscale!important;
}
.v554-login-header h1{
  color:#075f39!important;
  font-size:21px!important;
  line-height:1.22!important;
  font-weight:800!important;
}
.v554-login-header h1::before{
  content:"Chào mừng bạn đến với"!important;
  display:block!important;
  margin-bottom:8px!important;
  color:#225f43!important;
  font-size:14px!important;
  font-weight:700!important;
}
.v554-login-header p{
  color:#66766d!important;
  font-size:12px!important;
  line-height:1.45!important;
}
.v554-login-form label{
  color:#4f5e56!important;
  font-size:10px!important;
  font-weight:800!important;
  letter-spacing:.07em!important;
}
.v554-login-form input{
  height:52px!important;
  min-height:52px!important;
  border:1px solid #dce3df!important;
  border-radius:10px!important;
  background:#fff!important;
  color:#17231c!important;
  font-size:14px!important;
  font-weight:500!important;
}
.v554-login-form input:focus{
  border-color:#087546!important;
  box-shadow:0 0 0 3px rgba(8,117,70,.09)!important;
}
.v554-login-form button[type="submit"]{
  height:52px!important;
  min-height:52px!important;
  border-radius:10px!important;
  background:linear-gradient(90deg,#056b3e,#09ad69)!important;
  color:#fff!important;
  font-size:13px!important;
  font-weight:800!important;
  letter-spacing:.05em!important;
  box-shadow:0 10px 22px rgba(5,107,62,.18)!important;
}
.v554-login-footer{
  color:#77847d!important;
  font-size:10px!important;
}
.v554-login-footer::before{
  content:"◉  Bảo mật - An toàn - Hiệu quả"!important;
  color:#087044!important;
  font-size:11.5px!important;
  font-weight:700!important;
}

/* Mobile uses the same high-resolution visual as a compact hero. */
@media(max-width:1100px){
  .v554-login-page{
    display:flex!important;
    flex-direction:column!important;
    height:auto!important;
    min-height:100dvh!important;
    overflow:auto!important;
    background:#fff!important;
  }
  .v554-login-page::after{
    position:relative!important;
    width:100%!important;
    height:245px!important;
    min-height:245px!important;
    flex:0 0 245px!important;
    background:url("/assets/v558-login-hero-hq.png") 24% center/cover no-repeat!important;
  }
  .v554-login-card{
    width:min(calc(100% - 24px),520px)!important;
    margin:-26px auto 20px!important;
    padding:30px 24px 25px!important;
    border-radius:18px!important;
  }
}