/* ============================================================
   Cổng đối tác — LOCALMATE
   Dùng lại design tokens của styles.css
   ============================================================ */

.partner-benefits {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
    gap: 18px;
}
.benefit-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 26px;
}
.benefit-icon {
    width: 46px; height: 46px;
    border-radius: var(--r-pill);
    background: var(--peach-bg);
    color: var(--brand-dark);
    display: grid; place-items: center;
    margin-bottom: 16px;
}
.benefit-icon i, .benefit-icon svg { width: 21px; height: 21px; }
.benefit-card h3 { font-size: 20px; }
.benefit-card p { margin-top: 8px; font-size: 14.5px; line-height: 1.6; color: var(--muted); }

/* ── Đăng ký / đăng nhập ── */
.auth-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: 20px;
    align-items: start;
}
.auth-card { padding: clamp(24px, 3.4vw, 36px); }
.auth-error {
    margin-bottom: 14px;
    padding: 12px 15px;
    border-radius: var(--r-sm);
    background: #fbe9e6;
    border: 1px solid #e8b4ab;
    color: #9a3d2c;
    font-size: 14px;
}

/* Ô chọn mảng hợp tác.
   Truoc day dung luoi chia deu 4 cot, nen "Khach san / Nha nghi" — nhan dai
   nhat — bi be xuong hai dong trong khi ba o kia con thua cho. Nhan gay giua
   chung nhin nhu bi loi. Nay xep hang ngang, o nao chu dai thi o do rong ra. */
.type-picker { display: flex; flex-wrap: wrap; gap: 9px; }
/* 0 1 auto: o rong dung bang chu ben trong. De 1 1 auto thi o cuoi hang
   nuot het cho trong con lai, ra mot o dai gap bon lan may o kia. */
.type-option { cursor: pointer; flex: 0 1 auto; }
.type-option input { position: absolute; opacity: 0; pointer-events: none; }
.type-option span {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    padding: 14px 16px;
    white-space: nowrap;
    border-radius: var(--r-sm);
    border: 1.5px solid var(--line-2);
    background: var(--surface-2);
    font-size: 14px; font-weight: 600; color: var(--body-ink);
    text-align: center;
    transition: border-color .2s, background .2s, color .2s;
}
.type-option span i, .type-option span svg { width: 17px; height: 17px; }
.type-option:hover span { border-color: var(--brand); }
.type-option input:checked + span {
    border-color: var(--brand);
    background: var(--peach-bg);
    color: var(--brand-dark);
}
/* Man hinh hep: thu chu lai thay vi be dong */
@media (max-width: 400px) {
    .type-option span { font-size: 13px; padding: 13px 11px; gap: 6px; }
}

/* ── Đầu trang khi đã đăng nhập ── */
.partner-head {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 20px; flex-wrap: wrap;
}
.status-pill {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 9px 16px;
    border-radius: var(--r-pill);
    font-size: 13.5px; font-weight: 700;
    white-space: nowrap;
}
.status-pill i, .status-pill svg { width: 15px; height: 15px; }
.status-pill.ok { background: var(--leaf); color: var(--moss); }
.status-pill.wait { background: var(--peach-bg); color: var(--brand-dark); }

.notice {
    margin-top: 18px;
    padding: 14px 18px;
    border-radius: var(--r-sm);
    background: var(--peach-bg);
    border: 1px solid rgba(198, 113, 57, .3);
    font-size: 14.5px;
    color: var(--brand-dark);
}

/* ── Bảng điều khiển tài xế ── */
.driver-panel {
    margin-top: 26px;
    border-radius: var(--r-xl);
    background: linear-gradient(150deg, var(--forest), var(--forest-deep));
    padding: clamp(22px, 3vw, 32px);
    color: var(--leaf);
}
.driver-panel.online { box-shadow: 0 0 0 3px rgba(143, 160, 115, .35); }
.driver-toggle-row {
    display: flex; align-items: center; justify-content: space-between;
    gap: 20px; flex-wrap: wrap;
}
.driver-toggle-row h3 { font-size: clamp(20px, 2.4vw, 26px); color: var(--cream); }
.driver-toggle-row p { margin-top: 6px; font-size: 14.5px; color: rgba(240, 250, 225, .72); max-width: 480px; }

/* Chọn khu vực nhận đơn */
.driver-area { margin-top: 20px; padding-top: 18px; border-top: 1px solid rgba(240, 250, 225, .14); }
.driver-area-label {
    display: block; font-size: 13px; font-weight: 600; letter-spacing: .04em;
    text-transform: uppercase; color: rgba(240, 250, 225, .78);
}
.area-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.area-chip {
    border: 1px solid rgba(240, 250, 225, .22);
    background: rgba(249, 244, 237, .08);
    color: rgba(240, 250, 225, .84);
    border-radius: 999px;
    padding: 8px 16px;
    font: inherit; font-size: 14px;
    cursor: pointer;
    transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.area-chip:hover { background: rgba(249, 244, 237, .16); }
.area-chip.active {
    background: var(--peach);
    border-color: var(--peach);
    color: var(--forest-deep);
    font-weight: 600;
}
.driver-area-note { margin-top: 12px; font-size: 13.5px; color: rgba(240, 250, 225, .62); }
.driver-panel > .driver-area-note { margin-top: 16px; }

.offer-list { display: flex; flex-direction: column; gap: 14px; margin-top: 22px; }
.offer-empty { color: rgba(240, 250, 225, .6); font-size: 14.5px; }
#partner-orders .offer-empty { color: var(--muted); padding: 40px 0; text-align: center; }

.offer-card {
    background: rgba(249, 244, 237, .07);
    border: 1px solid rgba(246, 160, 107, .4);
    border-radius: var(--r-md);
    padding: 18px;
    animation: bnRise .3s ease both;
}
.offer-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.offer-distance { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 700; color: var(--peach); }
.offer-distance i, .offer-distance svg { width: 15px; height: 15px; }
.offer-timer {
    padding: 4px 12px;
    border-radius: var(--r-pill);
    background: var(--peach);
    color: var(--brand-deep);
    font-size: 13px; font-weight: 700;
}
.offer-route { display: flex; flex-direction: column; gap: 7px; font-size: 15px; color: var(--cream); }
.offer-route div { display: flex; align-items: center; gap: 10px; }
.dot { width: 9px; height: 9px; border-radius: var(--r-pill); flex-shrink: 0; }
.dot.from { background: var(--sage-light); }
.dot.to { background: var(--peach); }
.offer-meta { margin-top: 10px; font-size: 13.5px; color: rgba(240, 250, 225, .68); }
.offer-actions { display: flex; align-items: center; gap: 10px; margin-top: 16px; flex-wrap: wrap; }
.offer-price { font-family: var(--font-display); font-size: 22px; font-weight: 600; color: var(--peach-light); margin-right: auto; }
.offer-actions .btn-outline { border-color: rgba(240, 250, 225, .35); color: var(--leaf-2); }
.offer-actions .btn-outline:hover { background: rgba(240, 250, 225, .12); color: var(--cream); }

/* ── Thống kê ── */
.partner-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
    gap: 14px;
    margin-top: 26px;
}
.pstat {
    display: flex; align-items: center; gap: 14px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    padding: 18px;
}
.pstat-icon {
    width: 42px; height: 42px;
    border-radius: var(--r-pill);
    background: var(--leaf);
    color: var(--moss-2);
    display: grid; place-items: center;
    flex-shrink: 0;
}
.pstat-icon i, .pstat-icon svg { width: 19px; height: 19px; }
.pstat-label { display: block; font-size: 12.5px; color: var(--muted); }
.pstat b { font-family: var(--font-display); font-size: 22px; color: var(--ink); }

/* ── Danh sách đơn ── */
.order-card {
    display: flex; gap: 20px; flex-wrap: wrap;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 20px;
    margin-bottom: 14px;
}
.order-main { flex: 1; min-width: 240px; }
.order-top { display: flex; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
.kind-chip, .status-chip {
    padding: 5px 12px;
    border-radius: var(--r-pill);
    font-size: 12px; font-weight: 700;
}
.kind-chip.hotel { background: var(--leaf); color: var(--moss); }
.kind-chip.transport { background: #e6eef8; color: #1a4d8f; }
.kind-chip.tour { background: var(--peach-bg); color: var(--brand-dark); }
.status-chip.pending { background: #fdf0dc; color: #8a6116; }
.status-chip.confirmed { background: var(--leaf); color: var(--moss); }
.status-chip.completed { background: #e6eef8; color: #1a4d8f; }
.status-chip.cancelled { background: #fbe9e6; color: #9a3d2c; }

.order-main h4 { font-size: 19px; }
.order-meta { margin-top: 6px; font-size: 14px; color: var(--muted); }
.order-guest { display: flex; align-items: center; gap: 7px; margin-top: 8px; font-size: 14px; color: var(--body-ink); }
.order-guest i, .order-guest svg { width: 15px; height: 15px; color: var(--subtle); }
.order-note { margin-top: 8px; font-size: 13.5px; font-style: italic; color: var(--muted); }
.order-side {
    display: flex; flex-direction: column; gap: 9px; align-items: stretch;
    min-width: 170px;
}
.order-price {
    font-family: var(--font-display);
    font-size: 24px; font-weight: 600;
    color: var(--brand-dark);
    text-align: right;
    margin-bottom: 4px;
}

@media (max-width: 900px) {
    .auth-grid { grid-template-columns: 1fr; }
    .order-side { min-width: 100%; }
    .order-price { text-align: left; }
}

/* ── Dịch vụ đối tác tự đăng ── */
.listing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(272px, 100%), 1fr));
    gap: 18px;
    margin-top: 18px;
}
.listing-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 20px;
}
.listing-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.listing-card-head b { display: block; font-size: 16.5px; }
.listing-sub { display: block; margin-top: 4px; font-size: 13px; color: var(--muted); }
.listing-desc { margin-top: 12px; font-size: 14px; line-height: 1.6; color: var(--body-ink); }
.listing-reject {
    margin-top: 10px; padding: 10px 12px;
    border-radius: var(--r-sm);
    background: #fbe9e6; color: #9a3d2c; font-size: 13.5px;
}
.listing-card-foot {
    display: flex; justify-content: space-between; align-items: center;
    gap: 12px; flex-wrap: wrap;
    margin-top: 16px; padding-top: 14px;
    border-top: 1px solid var(--line);
}
.listing-card-foot strong { font-family: var(--font-display); font-size: 19px; color: var(--brand-dark); }
.listing-actions { display: flex; gap: 7px; flex-wrap: wrap; }
.btn-sm-outline {
    border: 1px solid var(--line-2);
    background: transparent; color: var(--body-ink);
    border-radius: var(--r-pill); padding: 6px 14px;
    font: inherit; font-size: 13px; cursor: pointer;
    transition: border-color .15s, background .15s, color .15s;
}
.btn-sm-outline:hover { border-color: var(--brand); background: var(--peach-bg); color: var(--brand-dark); }
.btn-sm-outline.danger:hover { border-color: #c0503a; background: #fbe9e6; color: #9a3d2c; }

.listing-form {
    margin-top: 22px;
    padding: clamp(22px, 3vw, 32px);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
}
.listing-form h3 { font-size: clamp(20px, 2.4vw, 25px); }
.listing-form-hint { margin-top: 8px; margin-bottom: 18px; font-size: 14px; color: var(--muted); line-height: 1.6; }
.form-hint { display: block; margin-top: 5px; font-size: 12.5px; color: var(--muted); }

/* Chọn & xem trước ảnh khi đăng dịch vụ */
.listing-photo { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.listing-photo img {
    width: 132px; height: 92px; object-fit: cover;
    border-radius: var(--r-sm); border: 1px solid var(--line);
}
.listing-photo-actions { display: flex; flex-direction: column; gap: 8px; }
.listing-photo-actions .btn-outline { align-self: flex-start; }

/* ── Thẻ tin đăng ─────────────────────────────────────────
   Ảnh NẰM TRÊN, chữ nằm dưới.

   Trước đây thẻ là lưới hai cột "260px 1fr" và ô ảnh đặt aspect-ratio 4/3.
   Chiều cao hàng do phần chữ quyết định, mà có aspect-ratio thì trình duyệt
   lấy chiều cao nhân 4/3 ra chiều rộng — ngược với ý định. Thẻ rộng 350px mà
   ô ảnh ra 922px, tràn ra ngoài gần gấp ba. Xếp dọc thì ô ảnh rộng đúng bằng
   cột và tự tính chiều cao, bao nhiêu cột cũng không vỡ. */
.listing-card.has-cover {
    display: flex; flex-direction: column;
    padding: 0; overflow: hidden;
}
.listing-cover {
    position: relative; width: 100%; min-width: 0;
    background: var(--surface-2);
    aspect-ratio: 16 / 10;
}
.listing-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.listing-cover--empty {
    display: grid; place-items: center; min-height: 120px;
    border-right: 1px solid var(--line);
    color: var(--muted); font-size: .84rem;
}
.listing-count {
    position: absolute; right: 8px; bottom: 8px;
    padding: 3px 9px; border-radius: 20px;
    background: rgba(0, 0, 0, .62); color: #fff; font-size: .74rem; font-weight: 600;
}
.listing-card.has-cover .listing-card-body { padding: 15px 17px 17px; }
.listing-card-body { display: flex; flex-direction: column; gap: 0; flex: 1; }

/* Nhãn trạng thái đè lên ảnh */
.listing-tags {
    position: absolute; left: 10px; top: 10px;
    display: flex; flex-wrap: wrap; gap: 6px;
}
.listing-tags .status-pill { box-shadow: 0 2px 8px rgba(0, 0, 0, .18); }
/* Nhan "tam het" von co nen mo (16% duc), dat tren anh chup thi gan nhu
   trong suot — chu cam noi giua tam anh, nhin nhu chu bi loi ra ngoai chu
   khong ra mot cai nhan. Tren anh thi cho nen trang duc. */
.listing-tags .status-pill.soldout { background: #fff; margin-left: 0; }

/* Ten va dong phu CHUA SAN hai dong, du chu ngan hay dai.
   Truoc day mon nao dia chi dai thi dong phu xuong hai dong, mon nao ngan
   thi mot dong — the ben canh nhau lech nhau 21px, gia va hang nut khong
   thang hang. Chua san hai dong thi moi thu ben duoi luon bat dau cung mot
   cho, ma chu dai cung khong bi cat cut. */
.listing-name {
    font-size: 16px; line-height: 1.35; color: var(--ink);
    min-height: 43px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
}
.listing-card-body .listing-sub {
    margin-top: 3px; line-height: 1.45;
    min-height: 38px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
}
.listing-ma {
    display: block; margin-top: 5px;
    font-size: 11.5px; font-weight: 600; letter-spacing: .04em;
    color: var(--subtle); user-select: all;
}
.listing-price { display: flex; align-items: baseline; gap: 4px; margin-top: 8px; }
.listing-price strong { font-family: var(--font-display); font-size: 20px; color: var(--brand-dark); }
.listing-price small { font-size: 12.5px; color: var(--muted); }
/* Mô tả gọn hai dòng: dài ngắn khác nhau thì thẻ so le, nhìn danh sách rất rối */
.listing-card-body .listing-desc {
    margin-top: 8px; font-size: 13.5px; line-height: 1.55;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
}
.listing-where {
    /* align-self: phan than the la mot cot flex, con nao cung bi keo rong
       het cot — duong dan tro thanh mot dai rong bang ca the du chu ngan. */
    align-self: flex-start;
    margin-top: 10px;
    font-size: 13px; font-weight: 600; color: var(--brand-dark);
}
.listing-where:hover { text-decoration: underline; }
/* Hang nut luon nam sat day the, va CHIA DEU mot hang chu khong xuong dong.
   Bon nut co chu dai ngan khac nhau, de tu dan thi cai "Xoa" roi xuong dong
   thu hai — hang nut cao gap doi, thay ngay la thieu chin chu. */
.listing-card-body .listing-actions {
    margin-top: auto; padding-top: 14px;
    display: flex; flex-wrap: nowrap; gap: 6px;
}
.listing-card-body .listing-actions .btn-sm-outline {
    flex: 1 1 0; min-width: 0;
    padding: 7px 6px;
    font-size: 12.5px; text-align: center;
    /* Chu dai hon o thi CAT bot bang dau ba cham, khong cho tran ra de len
       nut ben canh. Truoc day chi co white-space:nowrap nen chu "Con hang
       lai" chay thang qua nut "Tam an". */
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ── Đầu mục danh sách tin ── */
.lst-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; flex-wrap: wrap;
    margin-top: 30px;
}
.lst-head h2 { margin: 0; font-size: clamp(21px, 2.6vw, 28px); }
.lst-head p { margin: 5px 0 0; font-size: 13.5px; color: var(--muted); }
.lst-head .btn-primary { flex: none; }

/* O tim + o loc trang thai. Nam giua tieu de va nut Dang, co gian theo cho
   con lai; man hinh hep thi tut xuong hang duoi nguyen chieu ngang. */
.lst-tools { display: flex; gap: 8px; flex: 1 1 280px; justify-content: flex-end; }
.lst-search {
    display: flex; align-items: center; gap: 8px;
    flex: 1 1 200px; max-width: 320px; min-width: 0;
    padding: 8px 14px;
    border: 1px solid var(--line-2); border-radius: var(--r-pill);
    background: var(--surface);
}
.lst-search:focus-within { border-color: var(--brand); }
.lst-search i, .lst-search svg { width: 16px; height: 16px; flex: none; color: var(--muted); }
.lst-search input {
    flex: 1; min-width: 0;
    border: 0; outline: 0; background: transparent;
    font: inherit; font-size: 14px; color: var(--ink);
}
.lst-search input::-webkit-search-cancel-button { display: none; }
.lst-filter {
    flex: none;
    padding: 8px 12px;
    border: 1px solid var(--line-2); border-radius: var(--r-pill);
    background: var(--surface);
    font: inherit; font-size: 13.5px; color: var(--body-ink);
    cursor: pointer;
}
@media (max-width: 720px) {
    .lst-tools { flex: 1 1 100%; order: 3; }
    .lst-search { max-width: none; }
}

/* ── Tra địa chỉ ra toạ độ ────────────────────────────────
   Danh sách kết quả cho đối tác tự chọn. Ở miền Tây rất nhiều nơi trùng
   tên, chọn giùm họ là dễ gắn nhầm cơ sở sang xã khác. */
.addr-results { display: grid; gap: 6px; margin-top: 8px; }
.addr-results:empty { display: none; }
.addr-item {
    display: block; width: 100%; text-align: left; cursor: pointer;
    padding: 10px 13px; border-radius: 10px;
    background: var(--surface-2); border: 1.5px solid var(--line);
    font: inherit;
}
.addr-item:hover { border-color: var(--terracotta); background: var(--leaf); }
.addr-item b { display: block; font-size: 14.5px; }
.addr-item span { display: block; font-size: 12.5px; color: var(--muted); line-height: 1.45; margin-top: 2px; }
.addr-note { margin: 8px 0 0; font-size: 13px; color: var(--muted); }

/* Tạm hết phòng — khác tạm ẩn: tin vẫn hiện, chỉ là không đặt được */
.status-pill.soldout { background: rgba(198,113,57,.16); color: var(--terracotta); margin-left: 6px; }
.btn-sm-outline.warn { border-color: var(--terracotta); color: var(--terracotta); font-weight: 700; }

/* ══════════════════════════════════════════════
   XÁC MINH DANH TÍNH
   ══════════════════════════════════════════════
   Khối này cố tình trông khác hẳn phần còn lại của biểu mẫu: người ta đang
   giao ảnh CCCD cho một trang web lạ, phải thấy rõ đây là một chuyện riêng,
   có rào quanh, chứ không phải một ô nhập nữa cho đủ. */
.kyc-block {
    margin: 22px 0 18px;
    padding: 18px;
    border: 1.5px solid var(--line-2);
    border-radius: var(--r-sm);
    background: var(--surface-2);
}
.kyc-head { display: flex; align-items: flex-start; gap: 11px; margin-bottom: 15px; }
.kyc-head i, .kyc-head svg { width: 21px; height: 21px; color: var(--brand); flex: none; margin-top: 1px; }
.kyc-head b { display: block; font-size: 15px; color: var(--head-ink); }
.kyc-head span { display: block; font-size: 13px; color: var(--muted-ink); margin-top: 2px; }

/* Xem trước ảnh vừa chọn: chụp CCCD hay bị ngược, mờ hoặc thiếu góc — không
   nhìn thấy thì người ta bấm gửi rồi mới bị trả hồ sơ về. */
.kyc-preview { margin-top: 9px; }
.kyc-preview:empty { display: none; }
.kyc-preview img {
    width: 100%; max-height: 190px; object-fit: contain;
    border-radius: var(--r-sm);
    border: 1px solid var(--line-2);
    background: #0d1117;
}

/* KHONG dung display:flex o day.
   Flex bien MOI manh chu, moi the <b> va <a> ben trong thanh mot cot rieng
   bi nen lai — ca doan vo ra thanh may cot chu doc, khong doc noi. Muon co
   bieu tuong nam canh chu thi cho no noi len bang float, con chu van la mot
   doan van binh thuong. */
.kyc-note {
    margin: 14px 0 0;
    font-size: 12.5px; line-height: 1.65; color: var(--muted-ink);
}
.kyc-note i, .kyc-note svg {
    width: 15px; height: 15px;
    float: left; margin: 2px 8px 0 0;
}
.kyc-note b { color: var(--body-ink); }

/* Thẻ nhắc nộp giấy, hiện trong kênh đối tác khi hồ sơ còn thiếu */
.kyc-status { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; }
.kyc-status.done { color: #1a7f4b; }
.kyc-status.wait { color: #9a6b00; }
.kyc-status i, .kyc-status svg { width: 16px; height: 16px; }