/* Source: bản thiết kế đã duyệt "Tạo đơn hàng — Hướng 2: Xem trước song song" (huashu-design, 2026-09-21).
   Nhập nguyên giá trị thuộc tính từ mockup theo DDR-003; chỉ đổi tên class sang tiền tố .ofs- và bọc trong
   #orderFormFields để không đè lên CSS của phần còn lại trong app. Không thuộc protected core cascade. */

#orderFormFields .ofs-layout{display:grid;grid-template-columns:1fr 340px;gap:20px;align-items:start}

#orderFormFields .ofs-card{background:#FFFFFF;border:1px solid #E0E0E0;border-radius:16px;box-shadow:0 1px 2px rgba(16,16,16,.05);padding:24px}

#orderFormFields .ofs-group{margin-bottom:26px;padding-bottom:22px;border-bottom:1px solid #E0E0E0}
#orderFormFields .ofs-group:last-child{margin-bottom:0;padding-bottom:0;border-bottom:none}

#orderFormFields .ofs-section-head{display:flex;align-items:center;gap:10px;margin:0 0 16px}
#orderFormFields .ofs-section-head i{width:26px;height:26px;flex:0 0 auto;border-radius:8px;background:#EDF4FF;color:#2F6FE8;display:flex;align-items:center;justify-content:center;font-style:normal;font-weight:750;font-size:12px}
#orderFormFields .ofs-section-head h3{font-size:17px;margin:0;color:#101010;font-weight:700}

#orderFormFields .ofs-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
#orderFormFields .ofs-grid label{display:flex;flex-direction:column;gap:5px;font-size:12px;color:#6F6F6F;font-weight:600}
#orderFormFields .ofs-grid label.ofs-wide{grid-column:span 2}
#orderFormFields .ofs-grid input,
#orderFormFields .ofs-grid select{height:40px;min-height:40px;width:100%;border:1.2px solid #E0E0E0;border-radius:9px;padding:0 12px;font:500 13px "Roboto",Arial,sans-serif;color:#101010;outline:none;background:#fff;box-sizing:border-box}
#orderFormFields .ofs-grid input:focus,
#orderFormFields .ofs-grid select:focus{border-color:#4080FF;box-shadow:0 0 0 3px #EDF4FF}
#orderFormFields .ofs-grid input::placeholder{color:#8A8A8A}

#orderFormFields .ofs-preview{position:sticky;top:24px;background:#101010;color:#fff;border-radius:16px;padding:24px;box-shadow:0 14px 40px rgba(16,16,16,.18)}
#orderFormFields .ofs-preview h3{margin:0 0 4px;font-size:12px;color:#9AA5B4;font-weight:700;text-transform:uppercase;letter-spacing:.06em}
#orderFormFields .ofs-preview .ofs-prod{font-size:19px;font-weight:700;margin:0 0 18px;color:#fff}
#orderFormFields .ofs-preview .ofs-row{display:flex;justify-content:space-between;padding:9px 0;border-bottom:1px solid rgba(255,255,255,.12);font-size:13px}
#orderFormFields .ofs-preview .ofs-row span{color:#9AA5B4}
#orderFormFields .ofs-preview .ofs-row b{font-weight:600;color:#fff}
#orderFormFields .ofs-preview .ofs-total{margin-top:16px;padding-top:14px;border-top:1px solid rgba(255,255,255,.2);display:flex;justify-content:space-between;align-items:baseline}
#orderFormFields .ofs-preview .ofs-total span{color:#9AA5B4;font-size:12px}
#orderFormFields .ofs-preview .ofs-total strong{font-size:24px;font-weight:750;color:#fff}
#orderFormFields .ofs-preview .ofs-hint{margin-top:16px;font-size:11px;color:#7C8798;line-height:1.5}

@media (max-width: 900px){
  #orderFormFields .ofs-layout{grid-template-columns:minmax(0,1fr)}
  #orderFormFields .ofs-preview{position:static}
}
@media (max-width: 560px){
  #orderFormFields .ofs-grid{grid-template-columns:minmax(0,1fr)}
  #orderFormFields .ofs-grid label.ofs-wide{grid-column:auto}
}