.order {   --border-radius: 0.5rem;   --spacing-sm: 0.5rem;   --spacing-md: 1rem;   --font-sm: 0.875rem;    font-family: 'Inter', sans-serif;   border-radius: var(--border-radius);   padding: var(--spacing-md); }  .order__header {   display: flex;   justify-content: space-between;   align-items: center;   margin-bottom: var(--spacing-md); }  .order__title-group {   display: flex;   align-items: center;   gap: var(--spacing-sm); }  .order__title {   font-weight: 600;   color: #111827;   margin: 0;   font-size: 1rem; }  .order__status {   display: flex;   align-items: center;   gap: 0.25rem;   padding: 0.25rem var(--spacing-sm);   border-radius: 9999px;   font-size: var(--font-sm);   font-weight: 500; }  .order__content {   display: flex;   flex-direction: column;   gap: var(--spacing-md); }  .order__item {   display: flex;   justify-content: space-between;   padding: var(--spacing-sm) 0;   border-bottom: 1px solid #e5e7eb; }  .order__item-name {   font-weight: 500;   color: #111827;   margin: 0; }  .order__item-type {   color: #6b7280;   font-size: var(--font-sm);   margin: 0.25rem 0 0 0; }  .order__price-group {   text-align: right; }  .order__price {   font-weight: 500;   color: #111827;   margin: 0; }  .order__discount {   color: #dc2626;   font-size: var(--font-sm);   margin: 0.25rem 0 0 0; }  .order__details {   display: grid;   grid-template-columns: 1fr 1fr;   gap: var(--spacing-md);   font-size: var(--font-sm); }  .order__details-col {   display: flex;   flex-direction: column;   gap: var(--spacing-sm); }  .order__detail-item {   display: flex;   align-items: center;   gap: var(--spacing-sm);   color: #4b5563; }  .order__icon {   width: 1rem;   height: 1rem;   color: currentColor; }  .order__note {   display: flex;   align-items: flex-start;   gap: var(--spacing-sm);   padding: 0.75rem;   border-radius: 0.375rem;   font-size: var(--font-sm); }  .order__note p {   margin: 0; }  .order__total {   display: flex;   justify-content: space-between;   align-items: center;   padding-top: var(--spacing-sm);   border-top: 1px solid #e5e7eb; }  .order__total-label {   font-weight: 500; }  .order__total-amount {   font-weight: 700;   font-size: 1.125rem; }  .order__button {   width: 100%;   padding: var(--spacing-sm) var(--spacing-md);   border-radius: 0.375rem;   font-weight: 500;   transition: background-color 0.2s;   border: none;   cursor: pointer; }  /* Theme đơn hàng thành công */ .order--success {   background: #f0fdf4; }  .order--success .order__status {   background: #dcfce7;   color: #15803d; }  .order--success .order__note {   background: #f3f4f6;   color: #4b5563; }  .order--success .order__total-amount {   color: #16a34a; }  .order--success .order__button {   background: #16a34a;   color: white; }  .order--success .order__button:hover {   background: #15803d; }  /* Theme đơn hàng chưa thanh toán */ .order--pending {   background: #fff1f2; }  .order--pending .order__status {   background: #fee2e2;   color: #dc2626; }  .order--pending .order__note {   background: #f3f4f6;   color: #4b5563; }  .order--pending .order__total-amount {   color: #dc2626; }  .order--pending .order__button {   background: #dc2626;   color: white; }  .order--pending .order__button:hover {   background: #b91c1c; }