/* =============================================================================
   SMO CARD — GIỎ HÀNG · THANH TOÁN · ĐẶT HÀNG THÀNH CÔNG
   -----------------------------------------------------------------------------
   Nạp SAU home-v2.css và auth.css (dùng lại .authform__field cho các ô nhập).

   Ba trang này là luồng tiền nhưng trước đây toàn bộ trình bày viết bằng
   inline style trong Razor: bảng UIkit, nút màu đỏ #D9534F, khung bo góc khai
   báo lặp ở từng thẻ. Sửa một chi tiết phải sửa ở nhiều chỗ, và trên điện
   thoại bảng 5 cột bị bóp lại rất khó đọc.
   ========================================================================== */
#page-cart {
    --c-smoke: #FCFAF8;
    --c-smoke-deep: #ECE6DF;
    --c-gold: #B88028;
    --c-gold-wash: #FDF7EF;
    --c-ink: #101830;
    --g-metal: linear-gradient(135deg, #F0D79A 0%, #D9A83F 34%, #B88028 62%, #8F621C 100%);
}

.shop {
    padding-block: clamp(2rem, 1.2rem + 2.5vw, 3.5rem) clamp(3rem, 2rem + 3vw, 5rem);
    background: var(--c-smoke);
    min-height: 60vh;
}
.shop--center { text-align: center; }

.shop__crumb { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-bottom: var(--s-4); font-size: var(--fs-label); color: var(--c-text-muted); }
.shop__crumb a { color: var(--c-text-muted); }
.shop__crumb a:hover { color: var(--c-gold); }
.shop__title { margin: 0 0 var(--s-8); font-size: var(--fs-h2); line-height: var(--lh-h2); }

.shop__alert {
    display: flex;
    align-items: flex-start;
    gap: var(--s-2);
    margin: 0 0 var(--s-5);
    padding: var(--s-3) var(--s-4);
    border-radius: var(--r-sm);
    font-size: var(--fs-sm);
    line-height: var(--lh-body);
}
.shop__alert svg { flex: none; margin-top: 2px; }
.shop__alert--bad  { background: var(--c-danger-wash);  color: var(--c-danger); }
.shop__alert--good { background: var(--c-success-wash); color: var(--c-success); }

/* =============================================================================
   Giỏ trống
   ========================================================================== */
.shop-empty {
    max-width: 38rem;
    margin-inline: auto;
    padding: var(--s-12) var(--s-8);
    text-align: center;
    background: var(--c-paper);
    border: 1px dashed var(--c-smoke-deep);
    border-radius: var(--r-lg);
}
.shop-empty__icon {
    display: grid; place-items: center;
    width: 58px; height: 58px;
    margin: 0 auto var(--s-5);
    border-radius: 16px;
    background: linear-gradient(145deg, #1B2A4A, #101830);
    color: #E0BC6A;
}
.shop-empty h2 { margin: 0 0 var(--s-3); font-size: var(--fs-h3); }
.shop-empty p { margin: 0 0 var(--s-6); font-size: var(--fs-sm); color: var(--c-text-muted); }
.shop-empty__ctas { display: flex; flex-wrap: wrap; gap: var(--s-3); justify-content: center; }

/* =============================================================================
   Giỏ hàng
   ========================================================================== */
.cart { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 20rem); gap: var(--s-6); align-items: start; }
.cart__list { display: grid; gap: var(--s-3); }

/* Mỗi dòng là một THẺ chứ không phải một hàng bảng: bảng 5 cột trên điện thoại
   bị bóp đến mức không đọc nổi. */
.cartline {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr) auto;
    gap: var(--s-4);
    align-items: center;
    padding: var(--s-4);
    background: var(--c-paper);
    border: 1px solid var(--c-smoke-deep);
    border-radius: var(--r-md);
}
.cartline__media img, .cartline__ph {
    display: block;
    width: 72px; height: 72px;
    border-radius: var(--r-sm);
    object-fit: cover;
    background: var(--c-smoke);
}
.cartline__ph { background: linear-gradient(145deg, #1B2A4A, #101830); }
.cartline__name { margin: 0 0 2px; font-size: var(--fs-body); line-height: 1.35; }
.cartline__kind { margin: 0; font-size: var(--fs-label); color: var(--c-text-muted); }
.cartline__attach {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: var(--s-2) 0 0;
    padding: 4px var(--s-3);
    border-radius: var(--r-pill);
    background: var(--c-gold-wash);
    font-size: var(--fs-label);
    color: var(--c-gold-deep, #8F621C);
}
.cartline__attach code { font-size: 11px; }
.cartline__unit { margin: var(--s-2) 0 0; font-size: var(--fs-label); color: var(--c-text-muted); }

.cartline__actions { display: grid; gap: var(--s-2); justify-items: end; }
.cartqty { display: flex; gap: var(--s-2); align-items: center; }
.cartqty input {
    width: 68px;
    min-height: 40px;
    padding: 6px var(--s-2);
    text-align: center;
    border: 1px solid var(--c-smoke-deep);
    border-radius: var(--r-sm);
    font-family: inherit;
    font-size: var(--fs-sm);
}
.cartqty__go, .cartline__rm button {
    min-height: 40px;
    padding: 0 var(--s-3);
    border: 1px solid var(--c-smoke-deep);
    border-radius: var(--r-sm);
    background: #fff;
    font-family: inherit;
    font-size: var(--fs-label);
    color: var(--c-text-muted);
    cursor: pointer;
    transition: border-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);
}
.cartqty__go:hover { border-color: var(--c-gold); color: var(--c-gold); }
.cartline__rm button:hover { border-color: var(--c-danger); color: var(--c-danger); }
.cartline__total { margin: 0; font-family: var(--ff-display); font-size: var(--fs-body-lg); font-weight: 800; }

/* --- Tóm tắt --- */
.cart__sum, .checkout__sum {
    position: sticky;
    top: var(--s-6);
    padding: var(--s-6);
    background: var(--c-paper);
    border: 1px solid var(--c-smoke-deep);
    border-radius: var(--r-lg);
}
.cart__sumhead { margin: 0 0 var(--s-5); font-size: var(--fs-body-lg); }
.cart__sumrow { display: flex; justify-content: space-between; gap: var(--s-4); margin: 0 0 var(--s-3); font-size: var(--fs-sm); color: var(--c-text-muted); }
.cart__sumrow--total {
    margin-top: var(--s-4);
    padding-top: var(--s-4);
    border-top: 1px solid var(--c-smoke-deep);
    font-family: var(--ff-display);
    font-size: var(--fs-body-lg);
    font-weight: 800;
    color: var(--c-text);
}
.cart__pay { width: 100%; margin-top: var(--s-4); }
.cart__back { margin-top: var(--s-3); }

/* =============================================================================
   Thanh toán
   ========================================================================== */
.checkout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 22rem); gap: var(--s-6); align-items: start; }
.checkout__form {
    display: grid;
    gap: var(--s-5);
    padding: var(--s-6);
    background: var(--c-paper);
    border: 1px solid var(--c-smoke-deep);
    border-radius: var(--r-lg);
}
.checkout__head { margin: 0; font-size: var(--fs-body-lg); }
.checkout__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5); }
.authform__opt { font-weight: 400; color: var(--c-text-muted); }
.checkout__form textarea {
    width: 100%;
    padding: var(--s-3) var(--s-4);
    border: 1px solid var(--c-smoke-deep);
    border-radius: var(--r-sm);
    background: #fff;
    font-family: inherit;
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    resize: vertical;
}
.checkout__form textarea:focus {
    outline: none;
    border-color: var(--c-gold);
    box-shadow: 0 0 0 3px rgba(184, 128, 40, .14);
}

.checkout__items { display: grid; gap: var(--s-2); margin: 0 0 var(--s-5); padding: 0 0 var(--s-4); border-bottom: 1px solid var(--c-smoke-deep); list-style: none; }
.checkout__items li { display: flex; justify-content: space-between; gap: var(--s-3); font-size: var(--fs-sm); }
.checkout__iname em { font-style: normal; color: var(--c-text-muted); }
.checkout__iprice { white-space: nowrap; }
.checkout__note { margin: var(--s-4) 0 0; font-size: var(--fs-label); line-height: var(--lh-label); color: var(--c-text-muted); }
.checkout__note a { color: var(--c-indigo); }

/* =============================================================================
   Đặt hàng thành công
   ========================================================================== */
.done { max-width: 46rem; margin-inline: auto; text-align: left; }
.done__tick {
    display: grid; place-items: center;
    width: 64px; height: 64px;
    margin: 0 auto var(--s-5);
    border-radius: 999px;
    background: var(--c-success-wash);
    color: var(--c-success);
}
.done__title { margin: 0 0 var(--s-3); font-size: var(--fs-h2); line-height: var(--lh-h2); text-align: center; }
.done__lede { margin: 0 0 var(--s-8); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--c-text-muted); text-align: center; }
.done__ctas { display: flex; flex-wrap: wrap; gap: var(--s-3); justify-content: center; margin-top: var(--s-8); }

.pay, .orderinfo {
    padding: var(--s-6);
    background: var(--c-paper);
    border: 1px solid var(--c-smoke-deep);
    border-radius: var(--r-lg);
}
.pay { margin-bottom: var(--s-5); border-color: var(--c-gold); box-shadow: 0 0 0 4px var(--c-gold-wash); }
.pay__head, .orderinfo__head {
    display: flex; align-items: center; gap: var(--s-2);
    margin: 0 0 var(--s-5);
    padding-bottom: var(--s-4);
    border-bottom: 1px solid var(--c-smoke-deep);
    font-size: var(--fs-body-lg);
}
.pay__head svg { color: var(--c-gold); }
.pay__body { display: flex; flex-wrap: wrap; gap: var(--s-6); align-items: flex-start; }
.pay__qr { margin: 0; text-align: center; }
.pay__qr img { display: block; width: 200px; height: 200px; border-radius: var(--r-sm); image-rendering: pixelated; }
.pay__qr figcaption { margin-top: var(--s-2); font-size: var(--fs-label); color: var(--c-text-muted); }

.pay__rows { flex: 1; min-width: 15rem; margin: 0; display: grid; gap: var(--s-3); }
.pay__rows > div { display: grid; grid-template-columns: minmax(0, 9rem) minmax(0, 1fr); gap: var(--s-3); font-size: var(--fs-sm); }
.pay__rows dt { margin: 0; color: var(--c-text-muted); }
.pay__rows dd { margin: 0; }
.pay__rows code { padding: 2px 6px; border-radius: 4px; background: var(--c-smoke); font-size: var(--fs-sm); }
.pay__ref { background: var(--c-gold-wash); color: var(--c-gold-deep, #8F621C); font-weight: 700; }
.pay__amount { font-family: var(--ff-display); font-weight: 800; }

.pay__warn {
    display: flex; align-items: flex-start; gap: var(--s-2);
    margin: var(--s-5) 0 0;
    padding: var(--s-3) var(--s-4);
    border-radius: var(--r-sm);
    background: var(--c-gold-wash);
    font-size: var(--fs-label);
    line-height: var(--lh-body);
    color: var(--c-text-muted);
}
.pay__warn svg { flex: none; margin-top: 2px; color: var(--c-gold); }
.pay__none { margin: 0; font-size: var(--fs-sm); line-height: var(--lh-body); color: var(--c-text-muted); }
.pay__none a { color: var(--c-indigo); font-weight: 600; }

.orderinfo__badge {
    display: inline-block;
    padding: 3px var(--s-3);
    border-radius: var(--r-pill);
    background: var(--c-gold-wash);
    font-size: 11px;
    font-weight: 700;
    color: var(--c-gold-deep, #8F621C);
}
.orderinfo__items { display: grid; gap: var(--s-2); margin: var(--s-5) 0 0; padding: var(--s-4) 0 0; border-top: 1px solid var(--c-smoke-deep); list-style: none; }
.orderinfo__items li { display: flex; justify-content: space-between; gap: var(--s-3); font-size: var(--fs-sm); }
.orderinfo__items em { font-style: normal; color: var(--c-text-muted); }

/* =============================================================================
   Màn hẹp
   ========================================================================== */
@media (max-width: 900px) {
    .cart, .checkout { grid-template-columns: 1fr; }
    .cart__sum, .checkout__sum { position: static; }
    .checkout__row { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
    /* Ảnh + chữ trên một hàng, hàng thao tác xuống dưới và trải hết bề ngang. */
    .cartline { grid-template-columns: 56px minmax(0, 1fr); }
    .cartline__media img, .cartline__ph { width: 56px; height: 56px; }
    .cartline__actions {
        grid-column: 1 / -1;
        grid-template-columns: 1fr auto auto;
        align-items: center;
        justify-items: stretch;
        gap: var(--s-3);
        padding-top: var(--s-3);
        border-top: 1px solid var(--c-smoke-deep);
    }
    .pay__rows > div { grid-template-columns: 1fr; gap: 2px; }
    .pay__qr, .pay__qr img { width: 100%; max-width: 220px; margin-inline: auto; height: auto; }
}
@media (prefers-reduced-motion: reduce) {
    .cartqty__go, .cartline__rm button { transition: none; }
}