.checkout-wrap{max-width:1180px; margin:0 auto; padding:40px 28px 100px;}
.checkout-top{margin-bottom:32px;}
.checkout-top a{font-size:13.5px; color:var(--text-soft); display:inline-flex; align-items:center; gap:6px;}
.checkout-top a:hover{color:var(--ink);}
.checkout-title{font-size:28px; margin-top:14px;}

.checkout-grid{display:grid; grid-template-columns:1.3fr 1fr; gap:48px; align-items:start;}
@media(max-width:900px){ .checkout-grid{grid-template-columns:1fr;} }

/* ---- Form ---- */
.co-section{margin-bottom:36px;}
.co-section-head{display:flex; align-items:center; gap:10px; margin-bottom:16px;}
.co-section-num{
  width:26px; height:26px; border-radius:50%; background:var(--ink); color:#fff;
  font-size:12.5px; font-weight:700; display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.co-section-head h2{font-size:17px;}
.co-section-desc{font-size:12.5px; color:var(--text-soft); margin:-8px 0 16px 36px;}

.co-row{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:14px;}
.co-row.single{grid-template-columns:1fr;}
@media(max-width:560px){ .co-row{grid-template-columns:1fr;} }

.co-field label{
  display:flex; justify-content:space-between; font-size:12.5px; font-weight:600; color:var(--ink); margin-bottom:6px;
}
.co-field label .optional{font-weight:500; color:var(--text-soft); text-transform:none; letter-spacing:0;}
.co-field input, .co-field select{
  width:100%; padding:12px 14px; border:1.5px solid var(--line); border-radius:10px;
  font-family:'Inter',sans-serif; font-size:14px; color:var(--text); background:#fff;
  transition:border-color .15s ease;
}
.co-field input:focus, .co-field select:focus{outline:none; border-color:var(--shield);}
.co-field input.invalid, .co-field select.invalid{border-color:#C0392B;}
.co-error{font-size:11.5px; color:#C0392B; margin-top:5px; display:none;}
.co-field.has-error .co-error{display:block;}

.card-field-wrap{position:relative;}
.card-field-wrap input{padding-right:52px;}
.card-brand-icon{
  position:absolute; right:10px; top:50%; transform:translateY(-50%);
  display:flex; align-items:center; justify-content:center;
  height:22px; transition:opacity .15s ease;
}
.card-brand-icon:empty{opacity:0;}
.co-card-brand-label{font-size:11.5px; color:var(--text-soft); margin-top:5px; min-height:14px;}

.co-secure-note{
  display:flex; align-items:center; gap:8px; font-size:12px; color:var(--text-soft); margin-top:14px;
}

.btn-place-order{
  width:100%; background:var(--amber); color:var(--ink); border:none; border-radius:12px;
  padding:16px; font-size:15.5px; font-weight:700; transition:.15s ease; margin-top:6px;
}
.btn-place-order:hover{background:var(--amber-deep); color:#fff;}

/* ---- Order summary sidebar ---- */
.co-summary{
  background:#fff; border:1px solid var(--line); border-radius:20px; padding:24px;
  position:sticky; top:100px;
}
.co-summary h3{font-size:15px; margin-bottom:16px;}
.co-summary-items{display:flex; flex-direction:column; gap:14px; margin-bottom:18px;}
.co-summary-item{display:flex; gap:12px;}
.co-summary-thumb{width:56px; height:56px; border-radius:10px; overflow:hidden; flex-shrink:0; background:var(--mist);}
.co-summary-thumb img{width:100%; height:100%; object-fit:cover;}
.co-summary-info{flex:1; min-width:0;}
.co-summary-title{font-weight:700; font-size:13.5px; color:var(--ink);}
.co-summary-sub{font-size:11.5px; color:var(--text-soft); margin-top:3px; line-height:1.5;}
.co-summary-price{font-weight:700; font-size:13px; color:var(--ink); white-space:nowrap; flex-shrink:0;}
.co-summary-empty{font-size:13px; color:var(--text-soft); padding:12px 0;}

.co-summary-divider{border-top:1px solid var(--line); margin:16px 0;}
.co-summary-row{display:flex; justify-content:space-between; font-size:13.5px; color:var(--text-soft); margin-bottom:8px;}
.co-summary-row.total{font-size:16px; font-weight:800; color:var(--ink); margin-top:4px;}
.co-summary-row.total .amt{font-family:'Inter',sans-serif; font-weight:900;}

/* ---- Modal (thông báo đặt hàng thành công) — trượt lên từ dưới màn hình ---- */
.modal-overlay{
  position:fixed; inset:0; z-index:400;
  background:rgba(20,33,61,0.45);
  display:flex; align-items:flex-end; justify-content:center;
  padding:0;
  opacity:0; pointer-events:none;
  transition:opacity .25s ease;
}
.modal-overlay.open{opacity:1; pointer-events:auto;}
.modal-box{
  background:#fff; border-radius:24px 24px 0 0; max-width:520px; width:100%;
  box-shadow:0 -12px 40px rgba(20,33,61,0.25);
  transform:translateY(100%);
  transition:transform .35s cubic-bezier(.22,1,.36,1);
}
.modal-overlay.open .modal-box{transform:translateY(0);}
@media(min-width:560px){
  .modal-overlay{ align-items:center; }
  .modal-box{ border-radius:24px; transform:translateY(40px) scale(0.96); opacity:0; }
  .modal-overlay.open .modal-box{ transform:translateY(0) scale(1); opacity:1; }
}

.co-success{text-align:center; padding:44px 32px;}
.co-success .check-circle{
  width:64px; height:64px; border-radius:50%; background:#ec1f2a; color:#f3f3f3;
  display:flex; align-items:center; justify-content:center; margin:0 auto 18px; font-size:28px;
}
.co-success h2{font-size:22px; margin-bottom:10px;}
.co-success p{color:var(--text-soft); font-size:14px; margin:0 auto 24px;}