/* ============================================================
   Trang "Thông tin đơn hàng" (/thong-tin-don-hang/<mã đơn>)
   Nạp SAU css/style.css. Chỉ tác động trong #don-hang-content.
   Chế độ sáng, không có dark mode (giống phần còn lại của trang khách).

   Là LỚP PHỦ toàn màn hình (như #saved-content) chứ không phải một view
   inline như #checkout-content — nhờ vậy không phải chèn .hide() vào ~23
   nhánh router trong index.html.
   ============================================================ */

#don-hang-content {
    position: fixed;
    inset: 0;
    z-index: 100000;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: #fff;
    color: var(--text-normal, #522546);
    font-family: 'Be Vietnam Pro', system-ui, sans-serif;
    /* chừa chỗ cho thanh dưới cố định */
    padding: env(safe-area-inset-top, 0px) 0 calc(96px + env(safe-area-inset-bottom, 0px));
}

#don-hang-content button { font-family: inherit; }
#don-hang-content [hidden] { display: none !important; }

.dh-wrap { max-width: 720px; margin: 0 auto; padding: .25rem .75rem 1.5rem; }

/* --- Header ← Tiêu đề (dùng lại .ck-head / .ck-back / .ck-title của checkout.css) --- */
#don-hang-content .ck-head {
    position: sticky;
    top: 0;
    z-index: 3;
    background: #fff;
}

/* --- Banner trạng thái --- */
.dh-banner {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: 1rem;
    border-radius: 18px;
    margin-bottom: .9rem;
    font-weight: 600;
}
.dh-banner i { font-size: 1.4rem; flex: 0 0 auto; }
.dh-banner-label {
    display: block;
    font-weight: 400;
    font-size: .82rem;
    color: var(--text-normal-muted, #977c90);
}
.dh-banner[data-status="0"],
.dh-banner[data-status="1"] { background: rgba(184, 120, 45, .12); color: var(--lux-gold-deep, #b8782d); }
.dh-banner[data-status="2"] { background: rgba(41, 98, 255, .10);  color: #1d4ed8; }
.dh-banner[data-status="3"] { background: rgba(46, 125, 91, .12);  color: #2e7d5b; }
.dh-banner[data-status="4"] { background: rgba(120, 120, 120, .14); color: #c0392b; }

/* --- Nội dung thẻ (dùng lại .ck-card / .ck-card-title) --- */
.dh-lines { display: flex; flex-direction: column; gap: .25rem; }
.dh-lines strong { color: var(--text-header, #901E3E); }
.dh-note { font-style: italic; color: var(--text-normal-muted, #977c90); }

.dh-pay-chip {
    display: inline-block;
    margin-left: .5rem;
    padding: .15rem .55rem;
    border-radius: 999px;
    font-size: .76rem;
    font-weight: 600;
    vertical-align: middle;
}
.dh-pay-chip--paid   { background: rgba(46, 125, 91, .14); color: #2e7d5b; }
.dh-pay-chip--unpaid { background: rgba(184, 120, 45, .14); color: var(--lux-gold-deep, #b8782d); }

/* --- Món trong đơn --- */
.dh-item {
    display: flex;
    gap: .7rem;
    padding: .6rem 0;
    border-bottom: 1px solid var(--lux-hairline, rgba(212, 162, 77, .18));
}
.dh-item:last-child { border-bottom: 0; }
.dh-item-main { flex: 1 1 auto; min-width: 0; }
.dh-item-name {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.dh-item-size,
.dh-item-qty { font-size: .82rem; color: var(--text-normal-muted, #977c90); }
.dh-item-price { text-align: right; white-space: nowrap; flex: 0 0 auto; }
.dh-item-unit { font-size: .82rem; color: var(--text-normal-muted, #977c90); }
.dh-item-total { display: block; font-weight: 600; color: var(--lux-gold-deep, #b8782d); }

/* --- Tổng tiền --- */
.dh-totals-row {
    display: flex;
    justify-content: space-between;
    padding: .3rem 0;
    color: var(--text-normal-muted, #977c90);
}
.dh-grand {
    display: flex;
    justify-content: space-between;
    margin-top: .4rem;
    padding-top: .6rem;
    border-top: 1px solid var(--lux-hairline, rgba(212, 162, 77, .25));
    color: var(--lux-gold-deep, #b8782d);
    font-weight: 700;
    font-size: 1.15rem;
}

/* --- Dòng mã đơn --- */
.dh-code { display: flex; align-items: center; justify-content: space-between; gap: .6rem; }
.dh-code-value {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-weight: 700;
    letter-spacing: .04em;
    color: var(--text-header, #901E3E);
    word-break: break-all;
}
.dh-code-copy {
    flex: 0 0 auto;
    border: 1px solid rgba(212, 162, 77, .4);
    border-radius: 10px;
    background: #fff;
    padding: .35rem .6rem;
    color: var(--lux-gold-deep, #b8782d);
    cursor: pointer;
}
.dh-code-copy:hover { background: rgba(212, 162, 77, .12); }

/* --- Danh sách "Thông báo" (tình trạng đơn hàng) ---

   Bố cục theo trang "Đơn đã mua" của Shopee: nền xám nhạt, thẻ trắng tràn gần hết bề ngang,
   các khối trong thẻ ngăn nhau bằng đường kẻ mảnh. MÀU thì giữ nguyên bảng màu vàng–mận của
   trang này; mượn cả sắc cam đỏ của Shopee vào đây sẽ chọi với mọi màn hình còn lại. */

.dh-ds-tabs {
    position: sticky;
    top: 56px;                     /* ngay dưới .ck-head đang dính trên cùng */
    z-index: 2;
    display: flex;
    gap: .15rem;
    margin: 0 -.75rem .6rem;
    padding: 0 .5rem;
    background: #fff;
    border-bottom: 1px solid var(--lux-hairline, rgba(212, 162, 77, .25));
    overflow-x: auto;
    scrollbar-width: none;
}
.dh-ds-tabs::-webkit-scrollbar { display: none; }

.dh-ds-tab {
    flex: 0 0 auto;
    border: 0;
    background: none;
    padding: .7rem .6rem;
    font-size: .9rem;
    font-weight: 500;
    color: var(--text-normal-muted, #977c90);
    border-bottom: 2px solid transparent;
    cursor: pointer;
    white-space: nowrap;
}
.dh-ds-tab.is-active {
    color: var(--lux-gold-deep, #b8782d);
    font-weight: 700;
    border-bottom-color: var(--lux-gold-deep, #b8782d);
}

/* Nền xám để các thẻ trắng nổi lên, tràn hết bề ngang như Shopee. */
.dh-ds {
    display: flex;
    flex-direction: column;
    gap: .6rem;
    margin: 0 -.75rem;
    padding: .6rem .55rem 1rem;
    background: #f5f5f5;
}

.dh-ds-trong {
    margin: 0;
    padding: 2.5rem 1rem;
    text-align: center;
    color: var(--text-normal-muted, #977c90);
}

.dh-ds-card {
    display: block;
    width: 100%;
    text-align: left;
    background: #fff;
    border-radius: 12px;
    padding: .1rem .8rem;
    cursor: pointer;
}
.dh-ds-card:hover { background: rgba(212, 162, 77, .05); }

/* Hàng đầu: tên cửa hàng bên trái, trạng thái bên phải. */
.dh-ds-shop {
    display: flex;
    align-items: center;
    gap: .4rem;
    padding: .7rem 0;
    border-bottom: 1px solid rgba(0, 0, 0, .06);
}
.dh-ds-shop i { color: var(--lux-gold-deep, #b8782d); font-size: .95rem; }
.dh-ds-shop-ten {
    font-weight: 700;
    color: var(--text-header, #901E3E);
}
.dh-ds-tt {
    margin-left: auto;
    font-size: .85rem;
    font-weight: 600;
}
.dh-ds-tt[data-status="0"],
.dh-ds-tt[data-status="1"] { color: var(--lux-gold-deep, #b8782d); }
.dh-ds-tt[data-status="2"] { color: #1d4ed8; }
.dh-ds-tt[data-status="3"] { color: #2e7d5b; }
.dh-ds-tt[data-status="4"] { color: #c0392b; }

/* Dòng sản phẩm: ảnh vuông — tên + phân loại — số lượng + giá. */
.dh-ds-mon {
    display: flex;
    gap: .65rem;
    padding: .7rem 0;
    border-bottom: 1px solid rgba(0, 0, 0, .06);
}
.dh-ds-mon-anh {
    flex: 0 0 auto;
    width: 76px;
    height: 76px;
    object-fit: cover;
    border-radius: 6px;
    background: #f2f2f2;
}
.dh-ds-mon-main {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: .18rem;
}
.dh-ds-mon-ten {
    /* Hai dòng rồi cắt bằng dấu ba chấm, như Shopee: tên mỹ phẩm rất dài, để tràn tự do
       thì thẻ cao gấp đôi và cả danh sách mất nhịp. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: .92rem;
    line-height: 1.35;
    color: var(--text-normal, #522546);
}
/* Phân loại bên trái, số lượng dạt hẳn sang phải — cùng một hàng. */
.dh-ds-mon-hang {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .6rem;
}
.dh-ds-mon-pl,
.dh-ds-mon-sl {
    font-size: .82rem;
    color: var(--text-normal-muted, #977c90);
}
/* Khối giá nằm HẲN một tầng dưới, canh phải: giá gốc gạch ngang rồi tới giá đã trả. */
.dh-ds-mon-gia {
    display: flex;
    align-items: baseline;
    justify-content: flex-end;
    gap: .4rem;
    margin-top: .1rem;
}
.dh-ds-mon-goc {
    font-size: .82rem;
    color: var(--text-normal-muted, #977c90);
    text-decoration: line-through;
}
.dh-ds-mon-tra {
    font-weight: 600;
    color: var(--lux-gold-deep, #b8782d);
}

.dh-ds-tong {
    display: flex;
    align-items: baseline;
    justify-content: flex-end;
    gap: .4rem;
    padding: .7rem 0;
    font-size: .9rem;
    color: var(--text-normal-muted, #977c90);
    border-bottom: 1px solid rgba(0, 0, 0, .06);
}
.dh-ds-tong b {
    font-size: 1.05rem;
    color: var(--lux-gold-deep, #b8782d);
}

/* Dải thông tin — chỗ Shopee để "Ngày giao hàng dự kiến". Ở đây là câu mô tả trạng thái,
   ngày đặt và mã đơn: những thứ hệ thống thật sự biết. */
.dh-ds-dai {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin: .6rem 0;
    padding: .6rem .7rem;
    border-radius: 8px;
    background: rgba(212, 162, 77, .1);
}
.dh-ds-dai-main { flex: 1 1 auto; min-width: 0; }
.dh-ds-dai i { flex: 0 0 auto; color: var(--text-normal-muted, #977c90); font-size: .8rem; }
.dh-ds-dai-tieu {
    display: block;
    font-weight: 600;
    color: var(--lux-gold-deep, #b8782d);
}
.dh-ds-dai-phu {
    display: block;
    margin-top: .1rem;
    font-size: .8rem;
    color: var(--text-normal-muted, #977c90);
}
.dh-ds-ma {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    letter-spacing: .02em;
}

.dh-ds-act {
    display: flex;
    justify-content: flex-end;
    padding: 0 0 .8rem;
}
.dh-ds-btn {
    border: 1px solid var(--lux-gold-deep, #b8782d);
    border-radius: 6px;
    background: #fff;
    padding: .5rem 1.2rem;
    font-size: .9rem;
    font-weight: 600;
    color: var(--lux-gold-deep, #b8782d);
    cursor: pointer;
}
.dh-ds-btn:hover { background: rgba(212, 162, 77, .12); }

/* --- "Có thể bạn cũng thích" --- */
.dh-goiy {
    margin: 0 -.75rem;
    padding: 1rem .55rem 1.5rem;
    background: #f5f5f5;
}
.dh-goiy-tieu {
    display: flex;
    align-items: center;
    gap: .8rem;
    margin: 0 0 .8rem;
    font-size: .95rem;
    font-weight: 600;
    color: var(--text-normal-muted, #977c90);
}
/* Hai vạch kẻ hai bên chữ, như Shopee. */
.dh-goiy-tieu::before,
.dh-goiy-tieu::after {
    content: '';
    flex: 1 1 auto;
    height: 1px;
    background: rgba(0, 0, 0, .12);
}
.dh-goiy-luoi {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .5rem;
}
.dh-goiy-the {
    display: flex;
    flex-direction: column;
    border: 0;
    border-radius: 10px;
    background: #fff;
    padding: 0 0 .6rem;
    text-align: left;
    cursor: pointer;
    overflow: hidden;
}
.dh-goiy-anh {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    background: #f2f2f2;
}
.dh-goiy-ten {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: .5rem .6rem .3rem;
    font-size: .85rem;
    line-height: 1.35;
    color: var(--text-normal, #522546);
}
.dh-goiy-gia {
    margin: 0 .6rem;
    font-weight: 700;
    color: var(--lux-gold-deep, #b8782d);
}

/* Từ tablet trở lên khung đã có max-width 720px nên không cần tràn mép nữa; lưới gợi ý
   giãn thành ba cột cho đỡ trống. */
@media (min-width: 640px) {
    .dh-ds, .dh-goiy { margin-inline: 0; border-radius: 14px; }
    .dh-goiy-luoi { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* --- Thẻ tối giản khi mở URL trực tiếp, không có dữ liệu --- */
.dh-state {
    max-width: 420px;
    margin: 14vh auto 0;
    text-align: center;
    color: var(--text-normal-muted, #977c90);
    padding: 0 1rem;
    line-height: 1.6;
}
.dh-state b { color: var(--text-header, #901E3E); }
.dh-state a { color: var(--lux-gold-deep, #b8782d); font-weight: 600; }
.dh-state .btn,
.dh-state .btn-gold3d { margin-top: 1rem; }

/* --- Thanh dưới cố định (clone .ck-bar của checkout.css) --- */
.dh-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 100001;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: .7rem .9rem calc(.7rem + env(safe-area-inset-bottom, 0px));
    background: rgba(255, 253, 246, .96);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border-top: 1px solid rgba(212, 162, 77, .3);
    box-shadow: 0 -8px 24px -18px rgba(120, 78, 20, .7);
}
.dh-bar .ck-bar-sum { flex: 1 1 auto; min-width: 0; }
.dh-cancel-wrap { flex: 0 0 auto; text-align: right; }
.dh-cancel {
    min-width: 150px;
    padding: .75rem 1.5rem;
    border-radius: 12px;
    font-weight: 600;
    background: #fff;
    border: 1px solid #c0392b;
    color: #c0392b;
    cursor: pointer;
}
.dh-cancel:disabled {
    opacity: .5;
    cursor: not-allowed;
    border-color: #bbb;
    color: #999;
}
.dh-cancel-note {
    display: block;
    margin-top: .25rem;
    font-size: .74rem;
    color: var(--text-normal-muted, #977c90);
    max-width: 220px;
}

@media (min-width: 768px) {
    .dh-bar { justify-content: center; }
    .dh-bar .ck-bar-sum { flex: 0 0 auto; min-width: 220px; }
}