/* TT_ORDER_DETAIL_MOBILE_SOURCE_FIX_V3 */
/* Chỉ sửa popup xem lại đơn hàng trên mobile. Không dùng JS runtime. */

@media (max-width:899px){

  html body #app .tt-order-detail-v1,
  html body #app .tt-order-detail-v1 *{
    box-sizing:border-box!important;
  }

  html body #app .tt-order-detail-v1{
    width:100%!important;
    max-width:100%!important;
    overflow-x:hidden!important;
  }

  /* Danh sách sản phẩm trong popup */
  html body #app .tt-order-detail-v1 .tt-order-detail-table-v1{
    width:100%!important;
    max-width:100%!important;
    overflow:hidden!important;
    border-radius:16px!important;
  }

  html body #app .tt-order-detail-v1 .tt-order-detail-head-v1{
    display:none!important;
  }

  html body #app .tt-order-detail-v1 .tt-order-detail-row-v1{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto!important;
    grid-template-areas:
      "name total"
      "qty total"!important;
    gap:6px 10px!important;

    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    padding:12px 10px!important;
    border-bottom:1px solid #e8eef5!important;
    overflow:hidden!important;
  }

  html body #app .tt-order-detail-v1 .tt-order-detail-row-v1:last-child{
    border-bottom:0!important;
  }

  html body #app .tt-order-detail-v1 .tt-order-detail-row-v1 > span{
    min-width:0!important;
    max-width:100%!important;
    overflow:hidden!important;
  }

  /* Tên + mã hàng */
  html body #app .tt-order-detail-v1 .tt-order-detail-row-v1 > span:nth-child(1){
    grid-area:name!important;
    display:block!important;
  }

  html body #app .tt-order-detail-v1 .tt-order-detail-row-v1 > span:nth-child(1) b{
    display:block!important;
    width:100%!important;
    max-width:100%!important;
    font-size:14px!important;
    line-height:1.25!important;
    font-weight:850!important;
    color:#0f172a!important;
    white-space:normal!important;
    overflow:visible!important;
    text-overflow:clip!important;
  }

  html body #app .tt-order-detail-v1 .tt-order-detail-row-v1 > span:nth-child(1) em{
    display:block!important;
    margin-top:4px!important;
    font-size:12px!important;
    line-height:1.2!important;
    color:#64748b!important;
    font-style:normal!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }

  /* Số lượng: hiện rõ */
  html body #app .tt-order-detail-v1 .tt-order-detail-row-v1 > span:nth-child(2){
    grid-area:qty!important;
    display:flex!important;
    align-items:center!important;
    justify-content:flex-start!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    margin-top:2px!important;
    font-size:13px!important;
    line-height:1.2!important;
    color:#475569!important;
    font-weight:800!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }

  html body #app .tt-order-detail-v1 .tt-order-detail-row-v1 > span:nth-child(2)::before{
    content:"Số lượng: ";
    margin-right:4px!important;
    color:#64748b!important;
    font-weight:800!important;
  }

  html body #app .tt-order-detail-v1 .tt-order-qty-cell-v1,
  html body #app .tt-order-detail-v1 .tt-order-qty-cell-v1 strong{
    display:inline!important;
    font-size:13px!important;
    line-height:1.2!important;
    color:#0f172a!important;
    font-weight:950!important;
  }

  /* Ẩn giá gốc / giá CT / giảm ở mobile cho khỏi rối, tổng vẫn giữ bên phải */
  html body #app .tt-order-detail-v1 .tt-order-detail-row-v1 > span:nth-child(3),
  html body #app .tt-order-detail-v1 .tt-order-detail-row-v1 > span:nth-child(4),
  html body #app .tt-order-detail-v1 .tt-order-detail-row-v1 > span:nth-child(5){
    display:none!important;
  }

  html body #app .tt-order-detail-v1 .tt-order-detail-row-v1 > span:nth-child(6){
    grid-area:total!important;
    display:flex!important;
    align-items:center!important;
    justify-content:flex-end!important;
    min-width:86px!important;
    max-width:120px!important;
    text-align:right!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }

  html body #app .tt-order-detail-v1 .tt-order-detail-row-v1 > span:nth-child(6) b{
    font-size:14px!important;
    line-height:1.2!important;
    font-weight:950!important;
    color:#0f172a!important;
  }

  /* Ghi chú in phiếu: ép xuống 1 cột, không tràn */
  html body #app .tt-order-detail-v1 .tt-order-print-note-box-v1,
  html body #app .tt-order-detail-v1 .tt-order-print-note-box-v2,
  html body #app .tt-order-detail-v1 .tt-order-payment-box-v1{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:10px!important;

    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    padding:14px!important;
    overflow:hidden!important;
  }

  html body #app .tt-order-detail-v1 .tt-order-print-note-box-v1 > *,
  html body #app .tt-order-detail-v1 .tt-order-print-note-box-v2 > *,
  html body #app .tt-order-detail-v1 .tt-order-payment-box-v1 > *{
    grid-column:1 / -1!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    overflow:hidden!important;
  }

  html body #app .tt-order-detail-v1 .tt-order-print-note-box-v1 label,
  html body #app .tt-order-detail-v1 .tt-order-print-note-box-v2 label,
  html body #app .tt-order-detail-v1 .tt-order-payment-box-v1 label{
    display:block!important;
    width:100%!important;
    max-width:100%!important;
    margin:0 0 6px!important;
    font-size:13px!important;
    line-height:1.25!important;
    font-weight:850!important;
    color:#475569!important;
    white-space:normal!important;
  }

  html body #app .tt-order-detail-v1 .tt-order-print-note-box-v1 input,
  html body #app .tt-order-detail-v1 .tt-order-print-note-box-v2 input,
  html body #app .tt-order-detail-v1 .tt-order-payment-box-v1 input{
    display:block!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    height:48px!important;
    border-radius:14px!important;
  }

  html body #app .tt-order-detail-v1 .tt-order-auto-print-note-v1 p{
    width:100%!important;
    max-width:100%!important;
    white-space:normal!important;
    overflow:visible!important;
    text-overflow:clip!important;
    line-height:1.35!important;
  }

  html body #app .tt-order-detail-v1 .tt-order-print-note-box-v1 button,
  html body #app .tt-order-detail-v1 .tt-order-print-note-box-v2 button,
  html body #app .tt-order-detail-v1 .tt-order-payment-box-v1 button{
    width:100%!important;
    max-width:100%!important;
    height:46px!important;
    border-radius:14px!important;
  }
}