/* =========================================================================
 *  rbnd-app.css — Thành phần giao diện dùng chung
 *  Nạp ở layout nên có mặt trên mọi trang.
 * ========================================================================= */

:root {
    --rbnd-primary: #0d6efd;
    --rbnd-success: #198754;
    --rbnd-warn:    #ffc107;
    --rbnd-danger:  #dc3545;
    --rbnd-border:  #e3e6ea;
    --rbnd-muted:   #6c757d;
    --rbnd-radius:  12px;
}

/* =========================================================================
 *  FORM DÙNG CHUNG
 *
 *  Khối này BẮT BUỘC nằm ở rbnd-app.css chứ không phải listing-form.css:
 *  markup .form-row / .form-grid / .form-section được dùng ở khắp nơi —
 *  admin, CRM, tài khoản, định giá, liên hệ. Để trong file riêng của trang
 *  đăng tin thì mọi form khác sẽ hiện ra không có định dạng.
 * ========================================================================= */

.form-section {
    border: 1px solid var(--rbnd-border);
    border-radius: var(--rbnd-radius);
    padding: 20px 24px 24px;
    margin-bottom: 24px;
    background: #fff;
}
.form-section > legend {
    font-weight: 600; font-size: 1.05rem; padding: 0 8px;
    display: flex; align-items: center; gap: 8px; width: auto;
}
.form-section .step {
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; border-radius: 50%;
    background: var(--rbnd-primary); color: #fff; font-size: .9rem;
}
.form-section h3, .form-section h4 { font-size: .95rem; color: #495057; margin: 16px 0 6px; }

.form-row { margin-bottom: 18px; }
.form-row > label { display: block; font-weight: 500; margin-bottom: 6px; }

/* Áp cho mọi ô nhập trong form, kể cả ô nằm ngoài .form-row (bảng admin) */
.form-row input[type=text],
.form-row input[type=url],
.form-row input[type=tel],
.form-row input[type=date],
.form-row input[type=time],
.form-row input[type=datetime-local],
.form-row input[type=number],
.form-row input[type=email],
.form-row input[type=password],
.form-row input[type=search],
.form-row input[type=file],
.form-row select,
.form-row textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #ced4da;
    border-radius: 8px;
    font: inherit;
    background: #fff;
    color: #212529;
}
.form-row input:focus, .form-row select:focus, .form-row textarea:focus {
    outline: none;
    border-color: var(--rbnd-primary);
    box-shadow: 0 0 0 3px rgba(13, 110, 253, .15);
}
.form-row input[type=checkbox], .form-row input[type=radio] { width: auto; }
.form-row textarea { resize: vertical; min-height: 120px; }
.form-row .hint { margin: 6px 0 0; }

.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0 20px; }

.input-group { display: flex; gap: 8px; }
.input-group input { flex: 1 1 auto; }
.input-group select { flex: 0 0 110px; }

/* Ô nhập rời nằm trong bảng dữ liệu hoặc thanh thao tác */
.data-table input[type=text],
.data-table input[type=number],
.data-table select,
.inline-form input[type=text],
.inline-form input[type=number],
.inline-form input[type=tel],
.inline-form input[type=datetime-local],
.inline-form select {
    padding: 6px 9px; border: 1px solid #ced4da; border-radius: 6px; font: inherit;
}

.avatar-preview, .form-row img { max-width: 100%; }

/* =========================================================================
 *  SELECT2 — chỉnh cho khớp với ô nhập thường của dự án
 *  (kích thước, bo góc, viền focus giống input)
 * ========================================================================= */
.select2-container { width: 100% !important; }

.select2-container--default .select2-selection--single {
    height: auto;
    min-height: 42px;
    padding: 5px 4px;
    border: 1px solid #ced4da;
    border-radius: 8px;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 30px; padding-left: 8px; color: #212529;
}
.select2-container--default .select2-selection--single .select2-selection__arrow { height: 40px; }
.select2-container--default .select2-selection--single .select2-selection__placeholder { color: #adb5bd; }

.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open  .select2-selection--single {
    border-color: var(--rbnd-primary);
    box-shadow: 0 0 0 3px rgba(13, 110, 253, .15);
}

.select2-dropdown {
    border-color: #ced4da; border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
}
.select2-container--default .select2-search--dropdown .select2-search__field {
    padding: 8px 10px; border: 1px solid #ced4da; border-radius: 6px;
}
.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background: var(--rbnd-primary);
}

/* Trong thanh lọc, ô Select2 co giãn như các ô khác */
.list-filters .select2-container { width: auto !important; min-width: 190px; flex: 1 1 190px; }

/* Dòng kết quả tùy biến — nhãn "đường đã học được đi qua phường này" (đặc tả 4.3) */
.s2-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.s2-learned {
    flex: 0 0 auto; font-size: .74rem; white-space: nowrap;
    color: #0f5132; background: #d1e7dd; padding: 2px 8px; border-radius: 999px;
}
.select2-container--default .select2-results__option--highlighted .s2-learned {
    color: #0f5132; background: #fff;
}
.s2-new { color: var(--rbnd-primary); font-weight: 600; }
.select2-container--default .select2-results__option--highlighted .s2-new { color: #fff; }

/* ===================== Nút & form dùng chung ===================== */
.btn { display: inline-flex; align-items: center; gap: 6px; padding: 9px 16px;
       border: 1px solid transparent; border-radius: 8px; font: inherit;
       cursor: pointer; text-decoration: none; }
.btn-primary { background: var(--rbnd-primary); color: #fff; }
.btn-primary:hover { background: #0b5ed7; color: #fff; }
.btn-outline { background: #fff; border-color: #ced4da; color: #212529; }
.btn-outline:hover { border-color: var(--rbnd-primary); color: var(--rbnd-primary); }
.btn-link { background: none; border: 0; color: var(--rbnd-primary); text-decoration: underline; }
.btn-block { width: 100%; justify-content: center; margin-bottom: 8px; }
.btn-lg { padding: 12px 24px; font-size: 1.05rem; }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn-row { display: flex; gap: 10px; flex-wrap: wrap; margin: 16px 0; }

.check-inline { display: inline-flex; align-items: center; gap: 6px; margin-right: 14px; }
.inline-form { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.req { color: var(--rbnd-danger); }
.hint { font-size: .85rem; color: var(--rbnd-muted); }
.muted { color: var(--rbnd-muted); }
.field-error { color: var(--rbnd-danger); font-size: .875rem; margin: 6px 0 0; }

/* ===================== Huy hiệu VIP =====================
   BẮT BUỘC ba cấp dùng ba MÀU và ba ICON khác nhau (đặc tả 12.4). */
.vip-badge, .badge-vip {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px 9px; border-radius: 999px;
    font-size: .75rem; font-weight: 600; color: #fff; white-space: nowrap;
}
.badge-vip--1 { background: #8e9aaf; }   /* Bạc      — huy chương */
.badge-vip--2 { background: #f0a500; }   /* Vàng     — vương miện */
.badge-vip--3 { background: #e63946; }   /* Kim Cương— kim cương  */

/* ===================== Thẻ tin đăng ===================== */
.listing-grid { display: grid; gap: 18px; }
.listing-grid--grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.listing-grid--list { grid-template-columns: 1fr; }

.listing-card { background: #fff; border: 1px solid var(--rbnd-border);
                border-radius: var(--rbnd-radius); overflow: hidden; display: flex; flex-direction: column; }
.listing-card--row { flex-direction: row; }
.listing-card--row .listing-card__media { flex: 0 0 260px; }
.listing-card--vip { border-width: 2px; }
.listing-card--vip.vip-1 { border-color: #8e9aaf; }
.listing-card--vip.vip-2 { border-color: #f0a500; }
.listing-card--vip.vip-3 { border-color: #e63946; }

.listing-card__media { position: relative; display: block; }
.listing-card__media img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; }

.badge-verified { position: absolute; left: 8px; top: 8px; background: rgba(25,135,84,.95);
                  color: #fff; font-size: .72rem; padding: 3px 9px; border-radius: 999px; }
.badge-vip[class*="badge-vip--"] { position: absolute; right: 8px; top: 8px; }
.badge-type { position: absolute; left: 8px; bottom: 8px; background: rgba(0,0,0,.65);
              color: #fff; font-size: .72rem; padding: 3px 9px; border-radius: 999px; }
.badge-type--thue { background: rgba(13,110,253,.85); }

.listing-card__body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.listing-card__title { font-size: 1rem; margin: 0; line-height: 1.4; }
.listing-card__title a { color: #212529; text-decoration: none; }
.listing-card__title a:hover { color: var(--rbnd-primary); }
.listing-card__meta { display: flex; gap: 10px; flex-wrap: wrap; font-size: .9rem; }
.listing-card__meta .price { color: var(--rbnd-danger); font-weight: 700; }
.listing-card__meta .ppm { color: var(--rbnd-muted); }
.listing-card__rooms { display: flex; gap: 12px; font-size: .85rem; color: var(--rbnd-muted); }
.listing-card__addr { font-size: .85rem; color: var(--rbnd-muted); margin: 0; }
.listing-card__foot { display: flex; justify-content: space-between; align-items: center;
                      margin-top: auto; padding-top: 8px; font-size: .8rem; color: var(--rbnd-muted); }
.btn-save { background: none; border: 0; cursor: pointer; font-size: 1rem; color: var(--rbnd-muted); }
.btn-save:hover { color: var(--rbnd-primary); }

/* ===================== Sidebar lọc ===================== */
.filter-sidebar .filter-block { background: #fff; border: 1px solid var(--rbnd-border);
                                border-radius: var(--rbnd-radius); padding: 14px 16px; margin-bottom: 16px; }
.filter-sidebar h3 { font-size: .95rem; margin: 0 0 10px; }
.filter-sidebar ul { list-style: none; margin: 0; padding: 0; }
.filter-sidebar li a { display: flex; justify-content: space-between; gap: 8px;
                       padding: 5px 0; color: #212529; text-decoration: none; font-size: .9rem; }
.filter-sidebar li a:hover { color: var(--rbnd-primary); }
.filter-sidebar li.is-active a { color: var(--rbnd-primary); font-weight: 600; }
.filter-sidebar .count { color: var(--rbnd-muted); font-size: .82rem; }

/* ===================== Bộ lọc dạng thanh ===================== */
.list-filters { display: flex; gap: 10px; flex-wrap: wrap; align-items: center;
                background: #fff; border: 1px solid var(--rbnd-border);
                border-radius: var(--rbnd-radius); padding: 12px 14px; margin-bottom: 16px; }
.list-filters input, .list-filters select {
    padding: 8px 10px; border: 1px solid #ced4da; border-radius: 8px; font: inherit;
}
.list-filters input[type=search] { flex: 1 1 240px; }

.view-toggle { display: flex; gap: 8px; margin-bottom: 14px; }
.view-toggle a { padding: 6px 12px; border: 1px solid #ced4da; border-radius: 8px;
                 color: #212529; text-decoration: none; font-size: .88rem; }
.view-toggle a.is-active { background: var(--rbnd-primary); color: #fff; border-color: var(--rbnd-primary); }

.tab-filter { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 16px; }
.tab-filter a { padding: 7px 14px; border-radius: 999px; background: #f1f3f5;
                color: #495057; text-decoration: none; font-size: .88rem; }
.tab-filter a.is-active { background: var(--rbnd-primary); color: #fff; }

/* =========================================================================
 *  KHUNG TRANG — lớp bọc ngoài cùng của từng trang
 * ========================================================================= */
.listing-list-page,
.listing-detail,
.project-detail,
.profile-page,
.valuation-page,
.contact-page,
.post-detail,
.account-page { padding: 24px 0 60px; }

.listing-list-page h1,
.contact-page h1,
.valuation-page h1,
.account-page h1 { font-size: 1.5rem; margin-bottom: 6px; }

.list-head { margin-bottom: 14px; }
.list-head h1 { margin-bottom: 4px; }
.list-head__count { color: var(--rbnd-muted); font-size: .9rem; margin: 0; }

.contact-form, .valuation-form, .upgrade-form { max-width: 640px; }
.rating-summary { font-size: 1rem; margin-bottom: 12px; }
.rating-summary strong { font-size: 1.4rem; color: var(--rbnd-warn); }

.post-detail h1 { font-size: 1.6rem; margin-bottom: 8px; }
.post-detail .meta { color: var(--rbnd-muted); font-size: .88rem; margin-bottom: 16px; }

.topup-result__info { min-width: 0; }

.listing-card__meta .area { color: var(--rbnd-muted); }
.listing-card__foot .time { font-size: .78rem; }

/* Nhãn "Đã xem" — chữ nhỏ, nhạt, cạnh thời gian đăng. Đủ để nhận ra tin đã
   mở mà không tranh chỗ với giá hay nhãn VIP. */
.listing-card__seen {
    display: inline-block; margin-left: 4px; padding: 0 6px;
    font-size: .7rem; line-height: 1.5; font-weight: 500; white-space: nowrap;
    color: #6c757d; background: #eef0f3; border-radius: 999px;
}

/* ===================== Trang 404 ===================== */
.error-page { text-align: center; padding: 80px 16px 100px; }
.error-page__code { font-size: 5rem; font-weight: 700; color: var(--rbnd-primary); line-height: 1; }
.error-page__title { font-size: 1.4rem; margin: 12px 0 8px; }
.error-page__desc { color: var(--rbnd-muted); margin-bottom: 24px; }
.error-page__actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* ===================== Breadcrumb ===================== */
.breadcrumb-bar { background: #f8f9fa; border-bottom: 1px solid var(--rbnd-border); padding: 10px 0; }
.breadcrumbs { list-style: none; display: flex; flex-wrap: wrap; align-items: center;
               gap: 6px; margin: 0; padding: 0; font-size: .875rem; }
.breadcrumbs li { display: flex; align-items: center; gap: 6px; }
.breadcrumbs li + li::before { content: "/"; color: #adb5bd; }
.breadcrumbs a { color: var(--rbnd-muted); text-decoration: none; }
.breadcrumbs a:hover { color: var(--rbnd-primary); }
.breadcrumbs li:last-child span { color: #212529; font-weight: 500; }

/* ===================== Phân trang ===================== */
.pager { margin: 24px 0; }
.pager ul { list-style: none; display: flex; gap: 6px; padding: 0; margin: 0 0 8px; flex-wrap: wrap; }
.pager a, .pager span { display: block; padding: 7px 13px; border: 1px solid #ced4da;
                        border-radius: 8px; text-decoration: none; color: #212529; }
.pager .is-current span { background: var(--rbnd-primary); color: #fff; border-color: var(--rbnd-primary); }
.pager__info { font-size: .85rem; color: var(--rbnd-muted); margin: 0; }

/* ===================== Bảng dữ liệu ===================== */
.data-table { width: 100%; border-collapse: collapse; background: #fff; font-size: .9rem; }
.data-table th, .data-table td { padding: 10px 12px; border-bottom: 1px solid var(--rbnd-border);
                                 text-align: left; vertical-align: top; }
.data-table thead th { background: #f8f9fa; font-weight: 600; white-space: nowrap; }
.data-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.data-table tr.is-unread { background: #fff9e6; }
.data-table tr.is-root td { background: #f1f3f5; }
.data-table .actions { white-space: nowrap; }
.data-table .actions a, .data-table .actions button {
    background: none; border: 0; cursor: pointer; color: var(--rbnd-muted); padding: 3px 5px;
}
.data-table .actions a:hover, .data-table .actions button:hover { color: var(--rbnd-primary); }
.xu-table .is-in  { color: var(--rbnd-success); font-weight: 600; }
.xu-table .is-out { color: var(--rbnd-danger); font-weight: 600; }
.thumb-sm { width: 70px; height: 44px; object-fit: cover; border-radius: 6px; }

.bulk-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 14px 0; }
.bulk-actions select, .bulk-actions input { padding: 8px 10px; border: 1px solid #ced4da; border-radius: 8px; font: inherit; }
.bulk-actions input[type=text] { flex: 1 1 260px; }

/* ===================== Trạng thái & nhãn ===================== */
.status { display: inline-block; padding: 2px 9px; border-radius: 999px;
          font-size: .75rem; font-weight: 600; white-space: nowrap; }
.status--approved, .status--paid, .status--active, .status--done,
.status--resolved, .status--published, .status--thang   { background: #d1e7dd; color: #0f5132; }
.status--pending, .status--processing, .status--nhap,
.status--dang_gui, .status--moi, .status--dang_mo        { background: #fff3cd; color: #664d03; }
.status--rejected, .status--expired, .status--cancelled,
.status--locked, .status--failed, .status--thua          { background: #f8d7da; color: #842029; }
.status--hidden, .status--draft, .status--inactive       { background: #e2e3e5; color: #41464b; }

.tag-ok   { background: #d1e7dd; color: #0f5132; padding: 1px 8px; border-radius: 999px; font-size: .72rem; }
.tag-warn { background: #fff3cd; color: #664d03; padding: 1px 8px; border-radius: 999px; font-size: .72rem; }
.nav-badge { background: var(--rbnd-danger); color: #fff; border-radius: 999px;
             padding: 0 7px; font-size: .72rem; margin-left: auto; }

/* ===================== Thẻ & khối ===================== */
.side-card, .admin-card, .crm-card {
    background: #fff; border: 1px solid var(--rbnd-border);
    border-radius: var(--rbnd-radius); padding: 16px 18px; margin-bottom: 18px;
}
.side-card h3, .admin-card h2, .crm-card h2 { font-size: 1rem; margin: 0 0 12px; }
.listing-block { margin: 28px 0; }
.listing-block h2 { font-size: 1.15rem; margin: 0 0 14px;
                    display: flex; justify-content: space-between; align-items: baseline; }
.see-all { font-size: .85rem; font-weight: 400; }

.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; margin-bottom: 22px; }
.stat-grid--admin { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.stat-card { background: #fff; border: 1px solid var(--rbnd-border); border-radius: var(--rbnd-radius);
             padding: 16px; display: flex; flex-direction: column; gap: 4px;
             text-decoration: none; color: #212529; }
.stat-card i { font-size: 1.2rem; color: var(--rbnd-primary); }
.stat-card strong { font-size: 1.5rem; font-variant-numeric: tabular-nums; }
.stat-card span { font-size: .85rem; color: var(--rbnd-muted); }

.spec-table { width: 100%; border-collapse: collapse; }
.spec-table th, .spec-table td { padding: 9px 12px; border-bottom: 1px solid var(--rbnd-border); text-align: left; }
.spec-table th { width: 40%; color: var(--rbnd-muted); font-weight: 500; }

.empty-state { text-align: center; padding: 48px 16px; color: var(--rbnd-muted); }
.empty-state i { font-size: 2.4rem; display: block; margin-bottom: 12px; }

.alert { padding: 12px 16px; border-radius: 8px; margin-bottom: 16px; }
.alert-danger  { background: #f8d7da; color: #842029; }
.alert-success { background: #d1e7dd; color: #0f5132; }
.alert-warning { background: #fff3cd; color: #664d03; }
.alert-info    { background: #cff4fc; color: #055160; }

.code-block { background: #212529; color: #e9ecef; padding: 12px 14px;
              border-radius: 8px; overflow-x: auto; font-size: .85rem; }
.big-code { font-size: 1.15rem; font-weight: 700; letter-spacing: .5px; }
.big-price { font-size: 1.8rem; font-weight: 700; color: var(--rbnd-danger); margin: 4px 0; }

/* ===================== Khu vực quản trị / CRM ===================== */
.admin-shell, .crm-shell { display: flex; min-height: 100vh; }
.admin-sidebar, .crm-sidebar { flex: 0 0 240px; background: #1b1f24; color: #ced4da;
                               padding: 16px 0 40px; overflow-y: auto; }
.admin-logo, .crm-logo { display: block; padding: 10px 20px 18px; color: #fff;
                         font-size: 1.15rem; font-weight: 700; text-decoration: none; }
.admin-sidebar h4, .crm-sidebar h4 { font-size: .72rem; text-transform: uppercase;
                                     letter-spacing: .06em; color: #6c757d; padding: 14px 20px 6px; margin: 0; }
.admin-sidebar ul, .crm-sidebar ul { list-style: none; margin: 0; padding: 0; }
.admin-sidebar li a, .crm-sidebar li a { display: flex; align-items: center; gap: 10px;
                                         padding: 8px 20px; color: #ced4da; text-decoration: none; font-size: .9rem; }
.admin-sidebar li a:hover, .crm-sidebar li a:hover { background: #272c33; color: #fff; }
.admin-sidebar li.is-active a, .crm-sidebar li.is-active a { background: var(--rbnd-primary); color: #fff; }
.admin-logout, .crm-logout { display: block; margin: 20px; padding: 8px 12px;
                             border: 1px solid #495057; border-radius: 8px;
                             color: #ced4da; text-decoration: none; text-align: center; font-size: .85rem; }

.admin-main, .crm-main { flex: 1; padding: 20px 26px 60px; background: #f5f6f8; overflow-x: auto; }
.admin-topbar, .crm-topbar { display: flex; justify-content: space-between; align-items: center;
                             margin-bottom: 20px; gap: 16px; flex-wrap: wrap; }
.admin-topbar h1, .crm-topbar h1 { font-size: 1.35rem; margin: 0; }
.crm-topbar__right { display: flex; align-items: center; gap: 12px; }

.crm-readonly-badge { background: var(--rbnd-warn); color: #212529; padding: 4px 12px;
                      border-radius: 999px; font-size: .8rem; font-weight: 600; }
.crm-role-badge { background: #e7f1ff; color: #084298; padding: 4px 12px;
                  border-radius: 999px; font-size: .8rem; font-weight: 600; }
.crm-upsell { display: flex; justify-content: space-between; align-items: center; gap: 20px;
              background: #e7f1ff; border: 1px solid #9ec5fe; border-radius: var(--rbnd-radius);
              padding: 16px 20px; margin-bottom: 20px; flex-wrap: wrap; }
.crm-upsell p { margin: 4px 0 0; font-size: .9rem; }

.admin-login, .crm-login { max-width: 400px; margin: 80px auto; }
.admin-login form, .crm-login form { background: #fff; border: 1px solid var(--rbnd-border);
                                     border-radius: var(--rbnd-radius); padding: 28px; }

/* ===================== Kanban ===================== */
.kanban { display: flex; gap: 14px; overflow-x: auto; padding-bottom: 16px; }
.kanban__col { flex: 0 0 260px; background: #eef0f3; border-radius: var(--rbnd-radius); padding: 10px; }
.kanban__col header { border-top: 3px solid; padding: 8px 4px; margin-bottom: 8px; }
.kanban__col header small { display: block; color: var(--rbnd-muted); font-size: .78rem; }
.kanban__list { list-style: none; margin: 0; padding: 0; min-height: 60px; display: flex; flex-direction: column; gap: 8px; }
.kanban__card { background: #fff; border-radius: 8px; padding: 10px 12px; cursor: grab;
                box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.kanban__card.is-dragging { opacity: .5; }
.kanban__card a { display: block; color: #212529; text-decoration: none; font-weight: 500; }
.kanban__card small { display: block; color: var(--rbnd-muted); font-size: .8rem; }
.kanban__card strong { display: block; margin-top: 4px; color: var(--rbnd-success); font-size: .88rem; }
.stage-tag { color: #fff; padding: 2px 9px; border-radius: 999px; font-size: .75rem; }

/* ===================== Khu tài khoản ===================== */
.account-page { padding: 24px 0 60px; }
.account-nav { background: #fff; border: 1px solid var(--rbnd-border);
               border-radius: var(--rbnd-radius); padding: 12px 0; position: sticky; top: 80px; }
.account-nav h4 { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em;
                  color: var(--rbnd-muted); padding: 12px 16px 4px; margin: 0; }
.account-nav ul { list-style: none; margin: 0; padding: 0; }
.account-nav li a { display: flex; align-items: center; gap: 9px; padding: 8px 16px;
                    color: #212529; text-decoration: none; font-size: .9rem; }
.account-nav li a:hover { background: #f1f3f5; }
.account-nav li.is-active a { background: #e7f1ff; color: var(--rbnd-primary); font-weight: 600; }

.avatar-preview { width: 90px; height: 90px; object-fit: cover; border-radius: 50%; margin-top: 10px; }
.copy-box { display: flex; gap: 8px; }
.copy-box input { flex: 1; padding: 9px 12px; border: 1px solid #ced4da; border-radius: 8px; }

/* ===================== Gói & dịch vụ ===================== */
.package-grid, .service-grid { display: grid; gap: 14px;
                               grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); margin: 14px 0; }
.package-card, .service-card { position: relative; }
.package-card > input, .service-card > input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.package-card__body, .service-card__body {
    display: flex; flex-direction: column; gap: 6px; height: 100%;
    background: #fff; border: 2px solid var(--rbnd-border);
    border-radius: var(--rbnd-radius); padding: 16px; cursor: pointer;
}
.package-card > input:checked + .package-card__body,
.service-card > input:checked + .service-card__body {
    border-color: var(--rbnd-primary); background: #e7f1ff;
    box-shadow: inset 0 0 0 1px var(--rbnd-primary);
}
.package-card .price { font-size: 1.25rem; font-weight: 700; color: var(--rbnd-danger); }
.package-card .xu b { color: var(--rbnd-success); }
.badge-ribbon { position: absolute; right: 10px; top: 10px; background: var(--rbnd-warn);
                color: #212529; font-size: .7rem; padding: 2px 8px; border-radius: 999px; font-style: normal; }
.benefit-list { list-style: none; margin: 8px 0; padding: 0; font-size: .85rem; }
.benefit-list li { display: flex; gap: 6px; padding: 2px 0; }
.benefit-list i { color: var(--rbnd-success); }

/* ===================== Điểm danh & nhiệm vụ ===================== */
.checkin-strip { display: flex; gap: 8px; list-style: none; padding: 0; margin: 14px 0; flex-wrap: wrap; }
.checkin-strip li { flex: 1 1 90px; background: #fff; border: 2px solid var(--rbnd-border);
                    border-radius: 10px; padding: 12px 8px; text-align: center; }
.checkin-strip li.is-done { border-color: var(--rbnd-success); background: #d1e7dd; }
.checkin-strip li.is-bonus { border-style: dashed; }
.checkin-strip .day { display: block; font-size: .75rem; color: var(--rbnd-muted); }

.mission-list { list-style: none; padding: 0; margin: 0; }
.mission-list li { display: flex; align-items: center; gap: 14px; padding: 14px 0;
                   border-bottom: 1px solid var(--rbnd-border); flex-wrap: wrap; }
.mission-list li > i { font-size: 1.3rem; color: var(--rbnd-primary); width: 32px; text-align: center; }
.mission-list li > div { flex: 1 1 240px; }
.mission-list p { margin: 2px 0; font-size: .85rem; color: var(--rbnd-muted); }
.mission-list .reward { font-weight: 700; color: var(--rbnd-success); }

/* ===================== Chi tiết tin ===================== */
.verified-banner { display: flex; gap: 14px; align-items: flex-start;
                   background: #d1e7dd; border-left: 4px solid var(--rbnd-success);
                   border-radius: 8px; padding: 14px 18px; margin: 18px 0; }
.verified-banner i { font-size: 1.4rem; color: var(--rbnd-success); }
.verified-banner p { margin: 2px 0 0; font-size: .9rem; }

.gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 18px; }
.gallery__item { display: block; }
.gallery__item img { width: 100%; height: 100%; object-fit: cover; border-radius: 6px; }
.gallery__item.is-main { grid-column: span 4; }
.gallery__item.is-main img { aspect-ratio: 16/9; }
.gallery__item:not(.is-main) img { aspect-ratio: 4/3; }

.video-embed { position: relative; padding-top: 56.25%; margin-bottom: 18px; }
.video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: 8px; }

.listing-title { font-size: 1.5rem; margin: 0 0 8px; }
.listing-address { color: var(--rbnd-muted); margin-bottom: 16px; }
.listing-highlight { display: flex; gap: 24px; flex-wrap: wrap; padding: 14px 0;
                     border-top: 1px solid var(--rbnd-border); border-bottom: 1px solid var(--rbnd-border); }
.listing-highlight span { display: block; font-size: .8rem; color: var(--rbnd-muted); }
.listing-highlight strong { font-size: 1.1rem; }

.feature-list { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
                gap: 8px; padding: 0; margin: 8px 0 18px; }
.feature-list li { display: flex; gap: 8px; align-items: center; font-size: .9rem; }
.feature-list i { color: var(--rbnd-success); }
.file-list { list-style: none; padding: 0; }

.seller-card { text-align: center; }
.seller-card__avatar { width: 76px; height: 76px; object-fit: cover; border-radius: 50%; margin-bottom: 8px; }
.seller-card__meta { font-size: .85rem; color: var(--rbnd-muted); margin-bottom: 12px; }
.share-row { display: flex; justify-content: center; gap: 10px; margin-top: 12px; }
.share-row button { width: 36px; height: 36px; border-radius: 50%; border: 1px solid #ced4da;
                    background: #fff; cursor: pointer; }
.share-row button:hover { border-color: var(--rbnd-primary); color: var(--rbnd-primary); }

.mini-list { list-style: none; padding: 0; margin: 0; }
.mini-list li { padding: 8px 0; border-bottom: 1px solid var(--rbnd-border); font-size: .88rem; }
.mini-list li a { display: block; color: #212529; text-decoration: none; }
.mini-list li span { color: var(--rbnd-danger); font-weight: 600; font-size: .85rem; }

.comment-list, .comment-replies, .review-list, .follow-list,
.task-list, .notification-list { list-style: none; padding: 0; }
.comment { padding: 12px 0; border-bottom: 1px solid var(--rbnd-border); }
.comment time { color: var(--rbnd-muted); font-size: .8rem; margin-left: 8px; }
.comment-replies { margin-left: 28px; border-left: 2px solid var(--rbnd-border); padding-left: 14px; }
.btn-like { background: none; border: 0; cursor: pointer; color: var(--rbnd-muted); font-size: .85rem; }

.rating-form fieldset { border: 0; padding: 0; margin: 0 0 10px; display: flex; flex-direction: row-reverse;
                        justify-content: flex-end; gap: 4px; }
.rating-form legend { float: left; width: 100%; font-size: .9rem; margin-bottom: 6px; }
.rating-form fieldset input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.rating-form fieldset label { font-size: 1.3rem; color: #ced4da; cursor: pointer; }
.rating-form fieldset input:checked ~ label,
.rating-form fieldset label:hover, .rating-form fieldset label:hover ~ label { color: var(--rbnd-warn); }
.rating-form textarea, .comment-form textarea {
    width: 100%; padding: 10px 12px; border: 1px solid #ced4da; border-radius: 8px; font: inherit; margin-bottom: 8px;
}

.notification-list li { border-bottom: 1px solid var(--rbnd-border); }
.notification-list li.is-unread { background: #fff9e6; }
.notification-list li a { display: block; padding: 12px 14px; color: #212529; text-decoration: none; }
.notification-list p { margin: 2px 0; font-size: .88rem; color: var(--rbnd-muted); }
.notification-list time { font-size: .78rem; color: var(--rbnd-muted); }

.task-list li { padding: 10px 0; border-bottom: 1px solid var(--rbnd-border); font-size: .9rem; }
.task-list time { float: right; color: var(--rbnd-muted); font-size: .8rem; }
tr.prio-cao, .task-list li.prio-cao { border-left: 3px solid var(--rbnd-danger); padding-left: 8px; }

.follow-list li { display: flex; align-items: center; gap: 12px; padding: 10px 0;
                  border-bottom: 1px solid var(--rbnd-border); }
.follow-list img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.follow-list a { flex: 1; color: #212529; text-decoration: none; }

/* ===================== Trang chủ — khối tìm kiếm ===================== */

.hero {
    position: relative;
    padding: 64px 0 72px;
    color: #fff;
    text-align: center;

    /* Ảnh nền phủ lớp xanh đậm cho chữ trắng đọc được.
       Lớp phủ đặt TRƯỚC ảnh trong background nên nằm đè lên trên. */
    background:
        linear-gradient(rgba(13, 42, 84, .78), rgba(13, 42, 84, .62)),
        url('../images/bg-hero.jpg') center / cover no-repeat,
        #0d2a54;
}

.hero__title {
    margin: 0 0 22px;
    font-size: clamp(1.5rem, 4vw, 2.6rem);
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -.5px;
    text-shadow: 0 2px 12px rgba(0, 0, 0, .35);
}

/* ---------------- Hai thẻ Mua bán / Cho thuê ---------------- */

.hero-tabs {
    display: inline-flex;
    margin-bottom: 18px;
    border-radius: 999px;
    overflow: hidden;
    background: rgba(255, 255, 255, .16);
    backdrop-filter: blur(4px);
}

/* Ẩn radio nhưng VẪN nhận được tiêu điểm bàn phím — dùng opacity chứ
   không dùng display:none, vì display:none làm phần tử biến mất khỏi
   thứ tự Tab và không bấm được bằng bàn phím. */
.hero-tabs input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    pointer-events: none;
}

.hero-tabs label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 26px;
    font-size: .93rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .3px;
    color: #fff;
    cursor: pointer;
    transition: background .18s, color .18s;
}

.hero-tabs label:hover { background: rgba(255, 255, 255, .12); }

.hero-tabs input:checked + label {
    background: var(--rbnd-primary, #fd7e14);
    color: #fff;
}

/* Viền tiêu điểm cho người dùng bàn phím */
.hero-tabs input:focus-visible + label {
    outline: 3px solid #ffc107;
    outline-offset: -3px;
}

/* ---------------- Khung trắng chứa các ô ---------------- */

.hero-box {
    position: relative;          /* mốc định vị cho bảng gợi ý */
    display: flex;
    gap: 12px;
    align-items: stretch;
    max-width: 1000px;
    margin: 0 auto;
    padding: 14px;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 12px 36px rgba(0, 0, 0, .22);
    text-align: left;
}

.hero-field {
    position: relative;
    flex: 0 0 auto;
    min-width: 0;                /* cho phép co lại, tránh tràn khung */
    width: 210px;
}

.hero-field--grow { flex: 1 1 auto; width: auto; }

.hero-field__icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #6c757d;
    font-size: .95rem;
    pointer-events: none;        /* bấm xuyên qua biểu tượng vào ô nhập */
}

.hero-field__caret {
    position: absolute;
    right: 13px;
    top: 50%;
    transform: translateY(-50%);
    color: #adb5bd;
    font-size: .78rem;
    pointer-events: none;
}

.hero-field select,
.hero-field input {
    width: 100%;
    height: 48px;
    padding: 0 34px 0 40px;      /* chừa chỗ hai bên cho biểu tượng */
    border: 1px solid #e9ecef;
    border-radius: 10px;
    background: #f8f9fa;
    font: inherit;
    font-size: .95rem;
    color: #212529;

    /* Bỏ mũi tên mặc định của trình duyệt, dùng mũi tên tự vẽ cho đồng bộ */
    appearance: none;
    -webkit-appearance: none;
}

.hero-field input { padding-right: 14px; }

.hero-field select:focus,
.hero-field input:focus {
    outline: 0;
    border-color: var(--rbnd-primary, #fd7e14);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(253, 126, 20, .18);
}

.hero-field input::placeholder { color: #868e96; }

/* Ô tìm kiếm mặc định của WebKit có nút xóa riêng, bỏ đi cho gọn */
.hero-field input[type=search]::-webkit-search-decoration,
.hero-field input[type=search]::-webkit-search-cancel-button { -webkit-appearance: none; }

.hero-submit {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 48px;
    padding: 0 30px;
    border: 0;
    border-radius: 10px;
    background: var(--rbnd-primary, #fd7e14);
    color: #fff;
    font: inherit;
    font-size: .95rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .4px;
    cursor: pointer;
    transition: background .18s;
}

.hero-submit:hover  { background: #e8710f; }
.hero-submit:active { background: #d96a0e; }
.hero-submit:focus-visible { outline: 3px solid #ffc107; outline-offset: 2px; }

/* ---------------- Ô Tỉnh/Thành dùng Select2 ----------------
   Select2 KHÔNG dùng thẻ <select> gốc mà dựng lại bằng markup riêng, nên
   mọi quy tắc viết cho `.hero-field select` ở trên không chạm tới nó.
   Phải viết riêng cho .select2-* thì ô mới trông giống hai ô còn lại.

   Dùng !important vì file select2.min.css nạp sau và có độ ưu tiên cao hơn. */

.hero-field--select2 .select2-container { width: 100% !important; }

.hero-field--select2 .select2-container--default .select2-selection--single {
    display: flex;
    align-items: center;
    height: 48px !important;
    padding: 0 34px 0 40px;      /* chừa chỗ cho biểu tượng và mũi tên */
    border: 1px solid #e9ecef !important;
    border-radius: 10px !important;
    background: #f8f9fa !important;
}

.hero-field--select2 .select2-selection__rendered {
    padding: 0 !important;
    line-height: 1.4 !important;
    font-size: .95rem;
    color: #212529 !important;
}

.hero-field--select2 .select2-selection__placeholder { color: #868e96 !important; }

/* Mũi tên riêng của Select2 — đặt đúng chỗ mũi tên của hai ô kia */
.hero-field--select2 .select2-selection__arrow {
    height: 46px !important;
    right: 10px !important;
}

.hero-field--select2 .select2-container--focus .select2-selection--single,
.hero-field--select2 .select2-container--open  .select2-selection--single {
    border-color: var(--rbnd-primary, #fd7e14) !important;
    background: #fff !important;
    box-shadow: 0 0 0 3px rgba(253, 126, 20, .18);
}

/* Ô này không cần biểu tượng mũi tên tự vẽ — Select2 đã có sẵn */
.hero-field--select2 .hero-field__caret { display: none; }

/* Biểu tượng bản đồ phải nổi lên trên lớp phủ của Select2 */
.hero-field--select2 .hero-field__icon { z-index: 2; }

/* ---------------- Màn hình nhỏ ---------------- */

@media (max-width: 991px) {
    .hero-box { flex-wrap: wrap; }
    .hero-field { width: calc(50% - 6px); }
    .hero-field--grow { width: 100%; }
    .hero-submit { width: 100%; }
}

@media (max-width: 575px) {
    .hero { padding: 40px 0 44px; }
    .hero-field { width: 100%; }
    .hero-tabs label { padding: 10px 18px; font-size: .85rem; }
}

@media (prefers-reduced-motion: reduce) {
    .hero-tabs label, .hero-submit { transition: none; }
}
/* ---------------- Ô tìm kiếm ngoài trang chủ ----------------
   rbnd-search.js bọc mỗi ô có data-rbnd-search vào .rbnd-search-host để
   bảng gợi ý neo đúng vào ô đó. Thẻ bọc phải NHẬN LẠI thuộc tính flex mà
   ô nhập vốn có, nếu không thanh lọc sẽ vỡ bố cục. */

.rbnd-search-host { position: relative; }

.list-filters .rbnd-search-host { flex: 1 1 240px; min-width: 0; }
.list-filters .rbnd-search-host input[type=search] { width: 100%; flex: none; }

/* ---------------- Bảng gợi ý tìm kiếm ----------------
   Neo theo .hero-box (phần tử có position:relative). Trước đây neo theo
   .hero-search với lề 16px cho khớp padding của khung cũ; khung mới có
   padding 14px và bo góc cả bốn phía nên bảng phải bo góc đủ bốn góc và
   tách khỏi khung một chút. */
.hero-suggest {
    position: absolute;
    left: 0; right: 0;
    top: calc(100% + 8px);
    z-index: 60;

    background: #fff;
    border: 1px solid var(--rbnd-border);
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, .18);
    max-height: min(70vh, 520px);
    overflow: hidden auto;
    text-align: left;
    color: #212529;
}

/* rbnd-search.js đóng/mở bảng bằng thuộc tính `hidden`, dựa vào quy tắc
   mặc định [hidden]{display:none} của trình duyệt. Quy tắc đó rất yếu —
   BẤT KỲ rule nào đặt `display` cho .hero-suggest cũng vô hiệu hóa nó và
   bảng sẽ hiện thường trực. Viết hẳn ra đây cho chắc. */
.hero-suggest[hidden] { display: none !important; }

/* Khung tìm kiếm phải nằm trên các khối phía dưới, nếu không bảng gợi ý
   bị banner hoặc danh sách tin che mất một phần. */
.hero .container { position: relative; z-index: 5; }

/* Tiêu đề nhóm: dính lại khi cuộn để luôn biết đang xem nhóm nào */
.hs-section {
    position: sticky; top: 0; z-index: 1;
    display: flex; justify-content: space-between; align-items: center;
    padding: 9px 14px 5px; background: #f8f9fa;
    font-size: .74rem; font-weight: 600; text-transform: uppercase;
    letter-spacing: .05em; color: var(--rbnd-muted);
}
.hs-section:empty, .hs-section span:empty { min-height: 0; }

.hs-clear {
    border: 0; background: none; cursor: pointer; padding: 0;
    font-size: .74rem; color: var(--rbnd-primary); text-transform: none; letter-spacing: 0;
}
.hs-clear:hover { text-decoration: underline; }

.hs-row {
    display: flex; align-items: center; gap: 11px;
    padding: 10px 14px; color: #212529; text-decoration: none;
    border-bottom: 1px solid #f1f3f5;
}
.hs-row > i { width: 18px; text-align: center; color: var(--rbnd-muted); flex: 0 0 auto; }
.hs-row > img { width: 44px; height: 34px; object-fit: cover; border-radius: 5px; flex: 0 0 auto; }

.hs-label { flex: 1 1 auto; min-width: 0; overflow: hidden;
            text-overflow: ellipsis; white-space: nowrap; }
.hs-note  { flex: 0 0 auto; font-size: .8rem; color: var(--rbnd-muted); white-space: nowrap; }

/* Phần khớp với từ khóa — nền vàng nhạt, KHÔNG đổi màu chữ để giữ tương phản */
.hs-row mark { background: #fff3cd; color: inherit; padding: 0 1px; border-radius: 2px; }

/* Dòng đang chọn bằng bàn phím và di chuột dùng CHUNG một kiểu, để mắt
   không phải phân biệt hai trạng thái làm cùng một việc */
.hs-row:hover, .hs-row.is-active { background: #e7f1ff; }
.hs-row.is-active .hs-note { color: #084298; }

.hs-remove {
    flex: 0 0 auto; border: 0; background: none; cursor: pointer;
    color: #adb5bd; padding: 3px 5px; border-radius: 4px; line-height: 1;
}
.hs-remove:hover { color: var(--rbnd-danger); background: #f8d7da; }

.hs-empty { padding: 18px 14px; color: var(--rbnd-muted); font-size: .9rem; text-align: center; }
.hero-hot { margin-top: 12px; font-size: .88rem; }
.hero-hot a { color: #fff; text-decoration: underline; margin-right: 10px; }

.home-block { margin: 36px 0; }
.home-block h2 { font-size: 1.2rem; margin-bottom: 16px;
                 display: flex; justify-content: space-between; align-items: baseline; }
.banner-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; margin: 24px auto; }
.banner-row img { width: 100%; border-radius: var(--rbnd-radius); }

.cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
.cat-tile { display: flex; flex-direction: column; align-items: center; gap: 6px;
            background: #fff; border: 1px solid var(--rbnd-border); border-radius: var(--rbnd-radius);
            padding: 18px 10px; text-decoration: none; color: #212529; text-align: center; }
.cat-tile:hover { border-color: var(--rbnd-primary); color: var(--rbnd-primary); }
.cat-tile i { font-size: 1.5rem; color: var(--rbnd-primary); }
.cat-tile small { color: var(--rbnd-muted); font-size: .78rem; }

.project-grid, .post-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; }
.project-card, .post-card { background: #fff; border: 1px solid var(--rbnd-border);
                            border-radius: var(--rbnd-radius); overflow: hidden;
                            text-decoration: none; color: #212529; display: block; }
.project-card img, .post-card img { width: 100%; aspect-ratio: 16/10; object-fit: cover; }
.project-card h3, .post-card h3 { font-size: .98rem; margin: 10px 14px 4px; line-height: 1.4; }
.project-card p, .post-card p { margin: 0 14px 12px; font-size: .85rem; color: var(--rbnd-muted); }
.post-card small { display: block; margin: 0 14px 12px; color: var(--rbnd-muted); font-size: .78rem; }
.status-tag { background: #e7f1ff; color: #084298; padding: 1px 8px; border-radius: 999px; font-size: .75rem; }

.broker-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 16px; }
.broker-grid--wide { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
.broker-card { background: #fff; border: 1px solid var(--rbnd-border); border-radius: var(--rbnd-radius);
               padding: 18px; text-align: center; text-decoration: none; color: #212529;
               display: flex; flex-direction: column; align-items: center; gap: 6px; }
.broker-card--wide { flex-direction: row; text-align: left; align-items: flex-start; gap: 14px; }
.broker-card img { width: 62px; height: 62px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.broker-card h3 { font-size: 1rem; margin: 0 0 4px; }
.broker-card .meta { font-size: .84rem; color: var(--rbnd-muted); margin: 2px 0; }

.province-cloud { display: flex; flex-wrap: wrap; gap: 10px; }
.province-cloud a { background: #fff; border: 1px solid var(--rbnd-border); border-radius: 999px;
                    padding: 7px 16px; text-decoration: none; color: #212529; font-size: .88rem; }
.province-cloud a span { color: var(--rbnd-muted); }

/* ===================== Trang xác thực & liên hệ ===================== */
.auth-page { max-width: 460px; margin: 40px auto 80px; }
.auth-card { background: #fff; border: 1px solid var(--rbnd-border);
             border-radius: var(--rbnd-radius); padding: 28px; }
.auth-card h1 { font-size: 1.4rem; margin-bottom: 18px; }
.auth-oauth { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--rbnd-border); }
.auth-links { margin-top: 16px; text-align: center; font-size: .9rem; }
.contact-info { list-style: none; padding: 0; }
.contact-info li { padding: 6px 0; font-size: .9rem; }
.contact-info i { width: 20px; color: var(--rbnd-primary); }

/* ===================== Định giá ===================== */
.valuation-result { background: #fff; border: 2px solid var(--rbnd-primary);
                    border-radius: var(--rbnd-radius); padding: 20px; }
.valuation-result .range { color: var(--rbnd-muted); margin-bottom: 14px; }
.confidence { padding: 2px 10px; border-radius: 999px; font-size: .78rem; font-weight: 600; }
.confidence--cao        { background: #d1e7dd; color: #0f5132; }
.confidence--trung_binh { background: #fff3cd; color: #664d03; }
.confidence--thap       { background: #f8d7da; color: #842029; }

/* ===================== Hồ sơ & bài viết ===================== */
.profile-cover img { width: 100%; height: 200px; object-fit: cover; border-radius: var(--rbnd-radius); }
.profile-head, .seller-head { display: flex; gap: 20px; align-items: flex-start;
                              margin: 18px 0 26px; flex-wrap: wrap; }
.profile-head img, .seller-head img { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; }
.profile-head h1, .seller-head h1 { font-size: 1.4rem; margin: 0 0 6px;
                                    display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.post-detail__thumb { width: 100%; border-radius: var(--rbnd-radius); margin: 16px 0; }
.post-detail__body { line-height: 1.75; }
.post-detail__body img { max-width: 100%; height: auto; }

.file-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }
.file-grid a { display: block; text-align: center; text-decoration: none; color: #212529; font-size: .8rem; }
.file-grid img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; }
.file-grid i { font-size: 2rem; display: block; margin: 16px 0 8px; color: var(--rbnd-muted); }

.inline-details summary { cursor: pointer; list-style: none; display: inline-block; padding: 3px 5px; }
.inline-details[open] > form { display: flex; gap: 6px; flex-wrap: wrap;
                               background: #f8f9fa; padding: 8px; border-radius: 8px; margin-top: 6px; }
.inline-details input, .inline-details select { padding: 5px 8px; border: 1px solid #ced4da; border-radius: 6px; }

.topup-result { display: grid; grid-template-columns: 1fr auto; gap: 26px; align-items: start; }
.topup-result__qr { text-align: center; }
.topup-result__qr img { width: 230px; border: 1px solid var(--rbnd-border); border-radius: 8px; }

@media (max-width: 991px) {
    .admin-shell, .crm-shell { flex-direction: column; }
    .admin-sidebar, .crm-sidebar { flex: 0 0 auto; }
    .account-nav { position: static; }
    .topup-result { grid-template-columns: 1fr; }
    .gallery { grid-template-columns: repeat(2, 1fr); }
    .gallery__item.is-main { grid-column: span 2; }
}

/* =========================================================================
 *  TRUNG TÂM QUẢN LÝ LỖI — nút báo lỗi phía người dùng
 * =========================================================================
 *  Đặt cuối file để không bị quy tắc nào phía trên ghi đè.
 *  z-index cố ý rất cao: nút này phải bấm được KỂ CẢ khi giao diện đang
 *  hỏng và có lớp phủ nào đó che mất — đó chính là lúc cần nó nhất.
 */

.errc-fab {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 2147483000;

    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 50%;

    background: #6c757d;
    color: #fff;
    font-size: 22px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;

    box-shadow: 0 2px 10px rgba(0, 0, 0, .28);
    opacity: .45;
    transition: opacity .18s, transform .18s, background .18s;
}

.errc-fab:hover,
.errc-fab:focus-visible {
    opacity: 1;
    background: #dc3545;
    transform: scale(1.06);
}

.errc-fab:focus-visible { outline: 3px solid #ffc107; outline-offset: 2px; }

/* Màn hình nhỏ: né chỗ thanh điều hướng dưới cùng */
@media (max-width: 576px) {
    .errc-fab { right: 12px; bottom: 72px; width: 40px; height: 40px; font-size: 19px; }
}

/* Người dùng đặt chế độ giảm chuyển động thì bỏ hiệu ứng phóng to */
@media (prefers-reduced-motion: reduce) {
    .errc-fab { transition: none; }
    .errc-fab:hover, .errc-fab:focus-visible { transform: none; }
}

/* ---------- Hộp thoại ---------- */

.errc-modal { display: none; }
.errc-modal.is-open { display: block; }

.errc-backdrop {
    position: fixed;
    inset: 0;
    z-index: 2147483100;
    background: rgba(0, 0, 0, .5);
}

.errc-box {
    position: fixed;
    z-index: 2147483200;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);

    width: min(520px, calc(100vw - 32px));
    max-height: calc(100vh - 48px);
    overflow-y: auto;

    padding: 22px;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 12px 40px rgba(0, 0, 0, .3);
}

.errc-h {
    margin: 0 0 6px;
    font-size: 18px;
    font-weight: 700;
    color: #212529;
}

.errc-sub {
    margin: 0 0 16px;
    font-size: 14px;
    line-height: 1.5;
    color: #6c757d;
}

.errc-label {
    display: block;
    margin: 12px 0 5px;
    font-size: 13px;
    font-weight: 600;
    color: #343a40;
}

.errc-input {
    width: 100%;
    padding: 9px 11px;
    border: 1px solid #ced4da;
    border-radius: 7px;
    font-size: 14px;
    font-family: inherit;
    color: #212529;
    background: #fff;
}

.errc-input:focus {
    outline: 0;
    border-color: #86b7fe;
    box-shadow: 0 0 0 3px rgba(13, 110, 253, .2);
}

textarea.errc-input { resize: vertical; min-height: 92px; }

.errc-note {
    margin-top: 12px;
    padding: 9px 11px;
    border-radius: 7px;
    background: #f1f3f5;
    font-size: 12.5px;
    line-height: 1.5;
    color: #495057;
}

.errc-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    margin-top: 18px;
}

.errc-btn {
    padding: 9px 18px;
    border: 1px solid transparent;
    border-radius: 7px;
    font-size: 14px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
}

.errc-btn-main  { background: #0d6efd; color: #fff; }
.errc-btn-main:hover:not(:disabled) { background: #0b5ed7; }
.errc-btn-main:disabled { opacity: .6; cursor: default; }

.errc-btn-ghost { background: #fff; border-color: #ced4da; color: #495057; }
.errc-btn-ghost:hover { background: #f8f9fa; }

.errc-msg { margin-top: 12px; font-size: 14px; min-height: 20px; }
.errc-msg.is-ok    { color: #198754; }
.errc-msg.is-error { color: #dc3545; }

/* =========================================================================
 *  HỘP THOẠI — thẻ <dialog>
 * =========================================================================
 *  Trình duyệt vẽ <dialog> theo kiểu mặc định rất thô: viền đen, không bo
 *  góc, các ô nhập nằm ngang hàng với nhãn. Không có khối này thì hộp
 *  "Báo cáo tin đăng" trông như trang web chưa có CSS.
 */

dialog {
    width: min(460px, calc(100vw - 32px));
    padding: 0;
    border: 0;
    border-radius: 12px;
    background: #fff;
    color: #212529;
    box-shadow: 0 16px 48px rgba(0, 0, 0, .28);
}

/* Lớp phủ phía sau. ::backdrop chỉ hoạt động khi mở bằng showModal(),
   mở bằng show() thì không có lớp này. */
dialog::backdrop { background: rgba(0, 0, 0, .5); }

dialog form {
    display: block;
    padding: 22px;
}

dialog h3 {
    margin: 0 0 16px;
    font-size: 1.15rem;
    font-weight: 700;
}

/* Nhãn xuống dòng riêng. Mặc định label và select nằm cùng dòng nên ô
   chọn bị bóp lại chỉ còn bằng mũi tên — đúng lỗi trong ảnh chụp. */
dialog label {
    display: block;
    margin: 14px 0 6px;
    font-size: .88rem;
    font-weight: 600;
    color: #343a40;
}

dialog label:first-of-type { margin-top: 0; }

dialog select,
dialog input,
dialog textarea {
    display: block;
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #ced4da;
    border-radius: 8px;
    font: inherit;
    font-size: .95rem;
    color: #212529;
    background: #fff;
}

dialog textarea { resize: vertical; min-height: 84px; }

dialog select:focus,
dialog input:focus,
dialog textarea:focus {
    outline: 0;
    border-color: #86b7fe;
    box-shadow: 0 0 0 3px rgba(13, 110, 253, .2);
}

/* <menu> trong dialog vẫn mang padding và dấu chấm đầu dòng của danh sách */
dialog menu {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin: 20px 0 0;
    padding: 0;
    list-style: none;
}

dialog menu button {
    padding: 9px 20px;
    border: 1px solid #ced4da;
    border-radius: 8px;
    background: #fff;
    color: #495057;
    font: inherit;
    font-size: .93rem;
    font-weight: 600;
    cursor: pointer;
}

dialog menu button:hover { background: #f8f9fa; }

dialog menu button.btn-primary {
    border-color: var(--rbnd-primary, #0d6efd);
    background: var(--rbnd-primary, #0d6efd);
    color: #fff;
}

dialog menu button.btn-primary:hover { filter: brightness(.94); }

/* Không còn lý do nào để chọn */
dialog .dialog-empty {
    padding: 12px;
    border-radius: 8px;
    background: #fff3cd;
    color: #664d03;
    font-size: .9rem;
}

/* =========================================================================
 *  THANH CẢNH BÁO "ĐANG MƯỢN PHIÊN"
 * =========================================================================
 *  Cố tình chói mắt. Quản trị viên quên mình đang ở trong tài khoản người
 *  khác rồi thao tác tiếp là rủi ro lớn nhất của chức năng này, nên thanh
 *  báo phải khó bỏ qua và luôn nằm trên cùng ở mọi trang.
 */

.impersonate-bar {
    position: sticky;
    top: 0;
    z-index: 1080;              /* trên cả thanh điều hướng cố định */
    background: #b02a37;
    color: #fff;
    font-size: .875rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
}

.impersonate-bar__inner {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    max-width: 1320px;
    margin: 0 auto;
    padding: 8px 16px;
}

.impersonate-bar strong { font-weight: 700; }
.impersonate-bar__id    { opacity: .8; }

.impersonate-bar__exit {
    margin-left: auto;
    flex: 0 0 auto;
    padding: 5px 14px;
    border-radius: 6px;
    background: #fff;
    color: #b02a37;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

.impersonate-bar__exit:hover { background: #f8f9fa; color: #842029; }

/* =========================================================================
 *  BẢNG QUẢN TRỊ — sắp xếp theo cột
 * ========================================================================= */

.th-sort {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: inherit;
    text-decoration: none;
    white-space: nowrap;
}

.th-sort:hover { color: var(--rbnd-primary); }

/* Cột chưa sắp: mũi tên mờ để thấy là bấm được nhưng không gây nhiễu */
.sort-idle { opacity: .3; }

.data-table td.num,
.data-table th.num { text-align: right; }

.data-table--users td.num a { text-decoration: none; font-weight: 600; }

/* Cột "Đăng nhập cuối": ngày giờ không được xuống dòng giữa chừng, dòng
   "x giờ trước" bên dưới mới là phần được phép co lại. */
.data-table--users td.col-lastlogin { white-space: nowrap; }
.data-table--users td.col-lastlogin small { font-weight: 400; }

/* Tên người đăng ở trang duyệt tin — là <button> nên phải gỡ kiểu mặc định */
.link-user {
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    color: var(--rbnd-primary);
    text-align: left;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.link-user:hover { color: #0a58ca; }

.filter-note {
    margin: 0 0 14px;
    padding: 9px 14px;
    border-radius: 8px;
    background: #cff4fc;
    color: #055160;
    font-size: .9rem;
}

/* =========================================================================
 *  HỘP THOẠI THÔNG TIN NGƯỜI ĐĂNG
 * ========================================================================= */

.user-card-dialog { width: min(430px, calc(100vw - 32px)); padding: 22px; }

.uc-head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--rbnd-border);
}

.uc-head img   { border-radius: 50%; object-fit: cover; flex: 0 0 auto; }
.uc-name       { display: block; font-size: 1.05rem; }

.uc-row {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    padding: 6px 0;
    font-size: .9rem;
}

.uc-row span   { color: var(--rbnd-muted); flex: 0 0 auto; }
.uc-row strong { text-align: right; word-break: break-word; }

.uc-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    margin: 16px 0 0;
    padding: 12px;
    border-radius: 8px;
    background: #f8f9fa;
    font-size: .85rem;
}

.uc-stats span   { display: flex; justify-content: space-between; gap: 8px; }
.uc-stats strong { color: #212529; }

.uc-links { margin: 14px 0 0; font-size: .9rem; }

#user-card-loginas { margin-top: 16px; }

/* Số báo cáo chờ xử lý trên tab */
.tab-count{display:inline-block;min-width:20px;padding:1px 6px;margin-left:4px;border-radius:999px;background:var(--rbnd-danger);color:#fff;font-size:.72rem;font-weight:700;text-align:center;}

/* =========================================================================
 *  SO SÁNH BẤT ĐỘNG SẢN
 * ========================================================================= */

/* --- Nút trên thẻ tin --- */
.btn-cmp {
    padding: 4px 8px;
    border: 0;
    background: none;
    color: var(--rbnd-muted);
    font-size: .95rem;
    cursor: pointer;
    line-height: 1;
}

.btn-cmp:hover        { color: var(--rbnd-primary); }
.btn-cmp.is-on        { color: var(--rbnd-primary); }
.btn-cmp:disabled     { opacity: .5; cursor: wait; }

/* Nút ở trang chi tiết đổi hẳn nền khi đang chọn — nút to, đổi mỗi màu
   chữ thì khó nhận ra là đã bật. */
.btn.js-cmp-add.is-on {
    border-color: var(--rbnd-primary);
    background: var(--rbnd-primary);
    color: #fff;
}

/* --- Thanh nổi --- */
.cmp-bar {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 1040;
    background: #fff;
    border-top: 1px solid var(--rbnd-border);
    box-shadow: 0 -4px 20px rgba(0, 0, 0, .12);
}

.cmp-bar[hidden] { display: none !important; }

.cmp-bar__inner {
    display: flex;
    align-items: center;
    gap: 14px;
    max-width: 1320px;
    margin: 0 auto;
    padding: 10px 16px;
}

.cmp-bar__label {
    flex: 0 0 auto;
    font-size: .88rem;
    color: var(--rbnd-muted);
    white-space: nowrap;
}

.cmp-bar__label strong { color: var(--rbnd-primary); font-size: 1rem; }

.cmp-bar__items {
    display: flex;
    gap: 10px;
    flex: 1 1 auto;
    overflow-x: auto;
    padding-bottom: 2px;
}

.cmp-bar__actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 0 0 auto;
}

/* Chừa chỗ để thanh nổi không che nút phân trang ở cuối trang */
body.has-cmp-bar { padding-bottom: 92px; }

.cmp-chip {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    max-width: 260px;
    padding: 5px 8px 5px 5px;
    border: 1px solid var(--rbnd-border);
    border-radius: 8px;
    background: #f8f9fa;
}

.cmp-chip img { border-radius: 5px; object-fit: cover; flex: 0 0 auto; }

.cmp-chip__txt { min-width: 0; font-size: .78rem; line-height: 1.3; }

.cmp-chip__txt a {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #212529;
    text-decoration: none;
    font-weight: 600;
}

.cmp-chip__txt a:hover { color: var(--rbnd-primary); }
.cmp-chip__txt span    { color: var(--rbnd-danger); font-weight: 600; }

.cmp-chip__x {
    flex: 0 0 auto;
    width: 22px; height: 22px;
    border: 0; border-radius: 50%;
    background: #e9ecef;
    color: #495057;
    font-size: 1rem; line-height: 1;
    cursor: pointer;
}

.cmp-chip__x:hover { background: var(--rbnd-danger); color: #fff; }

/* --- Trang so sánh --- */
.cmp-page h1   { margin-bottom: 8px; }
.cmp-intro     { color: var(--rbnd-muted); margin-bottom: 18px; }

.cmp-empty {
    text-align: center;
    padding: 60px 20px;
    border: 1px dashed var(--rbnd-border);
    border-radius: var(--rbnd-radius);
}

.cmp-empty > i    { font-size: 2.6rem; color: #ced4da; margin-bottom: 14px; display: block; }
.cmp-empty h2     { font-size: 1.2rem; margin-bottom: 8px; }
.cmp-empty p      { color: var(--rbnd-muted); margin-bottom: 20px; }

/* Trên điện thoại bảng phải cuộn ngang được, nếu không các cột bị bóp
   đến mức không đọc nổi. */
.cmp-scroll { overflow-x: auto; }

.cmp-table {
    width: 100%;
    min-width: 640px;
    border-collapse: collapse;
    background: #fff;
}

.cmp-table th,
.cmp-table td {
    padding: 11px 14px;
    border: 1px solid var(--rbnd-border);
    vertical-align: middle;
    font-size: .92rem;
}

/* Cột tiêu chí dính bên trái khi cuộn ngang — không có thì cuộn sang cột
   thứ ba là không còn biết đang xem tiêu chí nào. */
.cmp-label-col {
    position: sticky;
    left: 0;
    z-index: 2;
    background: #f8f9fa;
    font-weight: 600;
    text-align: left;
    white-space: nowrap;
}

.cmp-table thead th { background: #fff; text-align: center; }
.cmp-table thead .cmp-label-col { background: #f8f9fa; }

.cmp-table tbody td { text-align: center; }

.cmp-head { position: relative; }

.cmp-head a       { color: #212529; text-decoration: none; display: block; }
.cmp-head a:hover { color: var(--rbnd-primary); }

.cmp-head img {
    width: 100%;
    max-width: 180px;
    height: 120px;
    object-fit: cover;
    border-radius: 8px;
    margin-bottom: 8px;
}

.cmp-head strong {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: .88rem;
    line-height: 1.35;
}

.cmp-remove {
    position: absolute;
    top: 4px; right: 4px;
    z-index: 1;
    width: 26px; height: 26px;
    border: 0; border-radius: 50%;
    background: rgba(0, 0, 0, .55);
    color: #fff;
    font-size: 1.1rem; line-height: 1;
    cursor: pointer;
}

.cmp-remove:hover { background: var(--rbnd-danger); }

/* Ô có giá trị tốt nhất */
.cmp-table td.is-best {
    background: #d1e7dd;
    font-weight: 700;
    color: #0f5132;
}

.cmp-table td.is-best i { margin-left: 4px; font-size: .8rem; }

/* Cột trống chờ thêm tin */
.cmp-slot { background: #fcfcfd; }

.cmp-slot-add {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 150px;
    color: var(--rbnd-muted);
    text-decoration: none;
    font-size: .85rem;
}

.cmp-slot-add:hover  { color: var(--rbnd-primary); }
.cmp-slot-add i      { font-size: 1.5rem; }

.cmp-note {
    margin-top: 16px;
    font-size: .85rem;
    color: var(--rbnd-muted);
}

@media (max-width: 767px) {
    .cmp-bar__inner   { flex-wrap: wrap; gap: 8px; padding: 8px 12px; }
    .cmp-bar__actions { width: 100%; justify-content: space-between; }
    body.has-cmp-bar  { padding-bottom: 150px; }
}

/* =========================================================================
 *  CHÂN TRANG CÔNG KHAI (.site-footer)
 *
 *  Đặt ở rbnd-app.css chứ không ở themes.css vì file này được nạp kèm
 *  ?v=_version — sửa chân trang xong là trình duyệt người dùng thấy ngay,
 *  không phải chờ hết vòng đời bộ nhớ đệm.
 *
 *  Tông nền nối tiếp thanh trên cùng (#16213e): đầu và cuối trang cùng một
 *  màu thì phần nội dung sáng ở giữa được đóng khung gọn gàng.
 * ========================================================================= */

.site-footer {
    --ft-bg-top:    #16213e;
    --ft-bg-bottom: #0f1729;
    --ft-text:      #b9c3d6;   /* 7.4:1 trên nền đậm — đọc thoải mái */
    --ft-strong:    #ffffff;
    --ft-line:      rgba(255, 255, 255, .10);
    --ft-accent:    #4d94ff;

    margin-top: 64px;
    background: linear-gradient(180deg, var(--ft-bg-top) 0%, var(--ft-bg-bottom) 100%);
    color: var(--ft-text);
    font-size: .9rem;
    line-height: 1.6;
    position: relative;
}

/* Vạch màu mảnh chạy hết chiều ngang: ranh giới giữa nội dung và chân
   trang, đồng thời nhắc lại hai màu thương hiệu (xanh và cam CTA). */
.site-footer::before {
    content: "";
    display: block;
    height: 3px;
    background: linear-gradient(90deg, var(--primary-color, #0F52BA), var(--secondary-color, #FF5722));
}

/* ---------- Dải kêu gọi đăng tin ---------- */

.site-footer__cta { padding: 28px 0 4px; }

.footer-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    padding: 20px 28px;
    border: 1px solid var(--ft-line);
    border-radius: 14px;
    background: rgba(255, 255, 255, .04);
}

.footer-cta__text strong {
    display: block;
    color: var(--ft-strong);
    font-size: 1.05rem;
    font-weight: 600;
}

.footer-cta__text span { font-size: .88rem; }

/* Cam #E64A19 chứ không phải #FF5722 như các nút khác, và chữ 1.2rem đậm.
   Lý do là tương phản: trắng trên #FF5722 chỉ đạt 3,2:1 — dưới mức 4,5:1
   mà WCAG AA đòi cho chữ thường. Sắc cam đậm hơn (vốn đã có sẵn trong bảng
   màu, dùng làm trạng thái hover) cùng cỡ chữ từ 18,66px đổ lên đưa nút vào
   nhóm "chữ lớn", chỉ cần 3:1 — và đạt 3,9:1. Vẫn đúng màu thương hiệu. */
.footer-cta__btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 12px 28px;
    border-radius: 999px;
    background: #e64a19;
    color: #fff;
    font-size: 1.2rem;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color .18s ease, transform .18s ease;
}

.footer-cta__btn:hover,
.footer-cta__btn:focus-visible {
    background: #c53d0f;
    color: #fff;
    transform: translateY(-1px);
}

/* ---------- Khối cột chính ---------- */

.site-footer__main { padding: 36px 0 40px; }

.footer-brand {
    display: inline-block;
    padding: 10px 16px;
    border-radius: 10px;
    background: #fff;          /* logo có chữ màu tối — nền trắng mới đọc được */
    line-height: 0;
}

.footer-brand img {
    height: 38px;
    width: auto;
    display: block;
}

.footer-about {
    margin: 16px 0 18px;
    max-width: 40ch;
    font-size: .88rem;
}

/* ---------- Mạng xã hội ---------- */

.footer-social {
    display: flex;
    gap: 10px;
    padding: 0;
    margin: 0;
    list-style: none;
}

.footer-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid var(--ft-line);
    background: rgba(255, 255, 255, .05);
    color: var(--ft-text);
    text-decoration: none;
    transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}

.footer-social a:hover,
.footer-social a:focus-visible {
    background: var(--primary-color, #0F52BA);
    border-color: transparent;
    color: #fff;
}

/* ---------- Tiêu đề cột ---------- */

.footer-title {
    margin: 0 0 16px;
    color: var(--ft-strong);
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

/* Gạch chân ngắn dưới tiêu đề — đủ để mắt tách được các cột mà không cần
   thêm đường kẻ dọc gây rối. */
.footer-title::after {
    content: "";
    display: block;
    width: 28px;
    height: 2px;
    margin-top: 8px;
    border-radius: 2px;
    background: var(--secondary-color, #FF5722);
}

/* ---------- Danh sách liên kết ---------- */

.footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-links li { margin-bottom: 9px; }

.footer-links a {
    color: var(--ft-text);
    text-decoration: none;
    transition: color .15s ease, padding-left .15s ease;
}

.footer-links a:hover,
.footer-links a:focus-visible {
    color: var(--ft-strong);
    padding-left: 4px;
}

.footer-links__more {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
    color: var(--ft-accent) !important;
    font-weight: 600;
}

.footer-links__more i { font-size: .75rem; }

/* ---------- Danh sách liên hệ ---------- */

.footer-contact {
    list-style: none;
    padding: 0;
    margin: 0 0 16px;
}

.footer-contact li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 14px;
}

.footer-contact li > i {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: rgba(255, 255, 255, .07);
    color: var(--ft-accent);
    font-size: .82rem;
}

.footer-contact li > span { min-width: 0; }

/* Nhãn nhỏ phía trên giá trị: người đọc quét chân trang rất nhanh, có nhãn
   thì không phải đoán dãy số kia là hotline hay mã số thuế. */
.footer-contact small {
    display: block;
    font-size: .72rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #8895ad;
}

.footer-contact a {
    color: var(--ft-text);
    text-decoration: none;
    word-break: break-word;
}

.footer-contact a:hover,
.footer-contact a:focus-visible { color: var(--ft-strong); }

.footer-contact__strong {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--ft-strong) !important;
    letter-spacing: .02em;
}

.footer-contact__cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--ft-accent);
    font-weight: 600;
    text-decoration: none;
}

.footer-contact__cta:hover,
.footer-contact__cta:focus-visible { color: #fff; }

.footer-contact__cta i { font-size: .75rem; }

/* ---------- Dòng bản quyền ---------- */

.site-footer__bottom {
    border-top: 1px solid var(--ft-line);
    background: rgba(0, 0, 0, .18);
}

.footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px 24px;
    flex-wrap: wrap;
    padding-top: 16px;
    padding-bottom: 16px;
    font-size: .82rem;
}

.footer-bottom p { margin: 0; }

.footer-bottom__license { color: #8895ad; margin-top: 2px !important; }

.footer-bottom__links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-bottom__links a {
    color: var(--ft-text);
    text-decoration: none;
}

.footer-bottom__links a:hover,
.footer-bottom__links a:focus-visible {
    color: var(--ft-strong);
    text-decoration: underline;
}

/* Viền focus BẮT BUỘC hiện rõ trên nền đậm: viền mặc định của trình duyệt
   là màu tối, đặt lên chân trang xanh đậm coi như không có. */
.site-footer a:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 3px;
    border-radius: 4px;
}

/* ---------- Màn hình nhỏ ---------- */

@media (max-width: 991.98px) {
    .site-footer__main { padding: 28px 0 32px; }
    .footer-about      { max-width: none; }
}

@media (max-width: 575.98px) {
    .site-footer   { margin-top: 40px; }

    /* Lề hai bên trên điện thoại. Cần khai báo rõ vì lề âm của .row (do
       gutter g-4) triệt tiêu đúng bằng padding mặc định của .container,
       khiến chữ dính sát mép màn hình. */
    .site-footer .container { padding-left: 24px; padding-right: 24px; }

    .footer-cta    { padding: 16px 18px; text-align: center; justify-content: center; }
    .footer-cta__btn { width: 100%; justify-content: center; }
    .footer-bottom { justify-content: center; text-align: center; }
    .footer-bottom__links { justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
    .site-footer a,
    .footer-cta__btn { transition: none; }
    .footer-cta__btn:hover { transform: none; }
}