body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    margin: 0;
    background-color: #f7f7f8;
    color: #1a1a1a;
    line-height: 1.35;
}

/* Reset khoảng cách mặc định của trình duyệt/Bootstrap cho heading, đoạn văn, danh sách -
   đây là nguồn gốc chính gây cảm giác "thưa dòng" dù đã giảm padding của khung bọc ngoài. */
h1, h2, h3, h4, h5, h6 {
    margin-top: 0;
    margin-bottom: 0.35rem;
    line-height: 1.3;
}

p {
    margin-top: 0;
    margin-bottom: 0.4rem;
}

ul, ol {
    margin-top: 0;
    margin-bottom: 0.4rem;
}

table {
    margin-bottom: 0 !important;
}

.table > :not(caption) > * > * {
    padding: 0.35rem 0.5rem !important;
}

.utility-link {
    color: #0d47a1;
    text-decoration: none;
    font-size: 0.82rem;
}

.utility-link:hover {
    text-decoration: underline;
}

.logo-bar {
    background-color: #fff;
    padding: 0.3rem 0;
    border-bottom: 1px solid #eee;
}

.logo-bar-inner {
    display: flex;
    align-items: center;
    gap: 0.7rem;
}

.brand-logo {
    color: #0d47a1;
    font-size: 1.4rem;
    font-weight: 800;
    text-decoration: none;
    line-height: 1;
}

.brand-logo-dot {
    color: #d32f2f;
}

.header-ticker-wrap {
    flex: 1;
    overflow: hidden;
    white-space: nowrap;
    margin: 0 1rem;
    max-width: 480px;
}

.header-ticker-text {
    display: inline-block;
    color: #d32f2f;
    font-size: 1.25rem;
    font-weight: 800;
    text-transform: uppercase;
    padding-left: 100%;
    animation: header-ticker-scroll 14s linear infinite;
}

@keyframes header-ticker-scroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-100%);
    }
}

.logo-bar-links {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.account-link {
    color: #0d47a1;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.85rem;
}

.account-link:hover {
    text-decoration: underline;
}

.main-nav {
    background-color: #f5f5f5;
    border-bottom: 1px solid #e0e0e0;
}

.main-nav-inner {
    display: flex;
    flex-wrap: wrap;
}

.main-nav-link {
    color: #0d47a1;
    text-decoration: none;
    font-weight: 600;
    font-size: 1.06rem;
    padding: 0.18rem 0.7rem;
    border-right: 1px solid #e0e0e0;
    line-height: 1.4;
    display: inline-block;
}

.main-nav-link:hover {
    background-color: #e3f2fd;
}

.container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 1rem;
}

main.container {
    background: #fff;
    margin-top: 0.25rem;
    padding: 0.6rem;
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.form-label {
    font-weight: 600;
}

.btn-primary {
    background-color: #0d47a1;
    border-color: #0d47a1;
}

.text-danger {
    color: #d32f2f;
}

.alert {
    padding: 0.45rem 0.8rem;
    border-radius: 6px;
    margin-bottom: 0.6rem;
    font-size: 0.9rem;
}

.alert-danger {
    background-color: #fde8e8;
    color: #b91c1c;
}

.alert-success {
    background-color: #e8f8ee;
    color: #14743a;
}

.listing-card {
    display: block;
    text-decoration: none;
    color: inherit;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
    transition: box-shadow 0.15s;
}

.listing-card:hover {
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.listing-thumb {
    width: 100%;
    height: 160px;
    object-fit: cover;
    background: #f0f0f0;
}

.listing-info {
    padding: 0.75rem;
}

.listing-title {
    font-weight: 600;
    font-size: 0.95rem;
    margin-bottom: 0.25rem;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.listing-price {
    color: #d32f2f;
    font-weight: 700;
}

.listing-meta {
    color: #666;
    font-size: 0.85rem;
}

/* ===== Trang chi tiết kiểu Bonbanh ===== */
.detail-breadcrumb {
    font-size: 0.85rem;
    color: #666;
    margin-bottom: 0.1rem;
    line-height: 1.2;
}

.detail-breadcrumb a {
    color: #0d47a1;
    text-decoration: none;
}

.detail-breadcrumb a:hover {
    text-decoration: underline;
}

.detail-breadcrumb span {
    margin: 0 0.3rem;
}

.detail-breadcrumb-code {
    color: #999;
}

.detail-title-bar {
    background: #e3f2fd;
    border: 1px solid #bbdefb;
    border-radius: 6px;
    padding: 0.15rem 0.7rem;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.3rem;
}

.detail-title-bar-text {
    font-size: 1.25rem;
    font-weight: 700;
    color: #1a1a1a;
    margin: 0;
    line-height: 1.5;
}

.detail-title-bar-meta {
    font-size: 0.8rem;
    color: #777;
    font-style: italic;
    white-space: nowrap;
}

.detail-2col {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}

.detail-col-left {
    flex: 1;
    min-width: 0;
}

.detail-col-right {
    width: 480px;
    flex-shrink: 0;
}

.detail-box {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    overflow: hidden;
}

.detail-box-header {
    background: #f0f0f0;
    color: #0d47a1;
    font-weight: 700;
    padding: 0.25rem 0.7rem;
    border-bottom: 1px solid #e0e0e0;
    line-height: 1.4;
}

.detail-box-body {
    padding: 0.5rem 0.7rem;
}

.detail-specs-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.spec-row {
    display: flex;
    gap: 0.4rem;
    padding: 0.2rem 0.7rem;
    border-bottom: 1px dashed #eee;
    font-size: 0.88rem;
    line-height: 1.4;
}

.spec-label {
    color: #666;
    flex-shrink: 0;
}

.spec-value {
    color: #1a1a1a;
    font-weight: 600;
}

.detail-contact-box {
    background: #fffdf5;
}

.detail-contact-body {
    padding: 0.9rem 1rem;
}

.detail-contact-name {
    font-weight: 700;
    font-size: 1.05rem;
    color: #0d47a1;
    margin-bottom: 0.4rem;
}

.detail-contact-phone {
    font-weight: 700;
    color: #d32f2f;
    font-size: 1rem;
    margin-bottom: 0.3rem;
}

.detail-contact-address {
    color: #666;
    font-size: 0.85rem;
}

.detail-action-row {
    display: flex;
    gap: 0.75rem;
    margin-top: 1.25rem;
    flex-wrap: wrap;
}

.detail-action-btn {
    background: #f5f7fa;
    border: 1px solid #ccc;
    border-radius: 6px;
    padding: 0.6rem 1.1rem;
    font-size: 0.9rem;
    color: #444;
    cursor: pointer;
}

.detail-action-btn:hover {
    background: #e3f2fd;
    border-color: #0d47a1;
    color: #0d47a1;
}

.image-gallery {
    margin-bottom: 0;
}

.detail-extra-2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 1.5rem;
    padding-top: 0.6rem;
    border-top: 1px dashed #e5e5e5;
}

.detail-extra-2col h6 {
    color: #0d47a1;
    font-weight: 700;
    margin-bottom: 0.3rem;
}

.detail-extra-2col ul {
    margin: 0;
    padding-left: 1.1rem;
}

/* ===== Lightbox xem ảnh toàn màn hình - có hiệu ứng bay lên, che kín chữ phía sau ===== */
.lightbox-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.88);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: zoom-out;
    animation: lightbox-fade-in 0.2s ease-out;
}

@keyframes lightbox-fade-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes lightbox-fly-up {
    from {
        opacity: 0;
        transform: translateY(60px) scale(0.94);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.lightbox-img {
    max-width: 92vw;
    max-height: 92vh;
    object-fit: contain;
    cursor: default;
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.5);
    animation: lightbox-fly-up 0.25s ease-out;
}

.lightbox-close {
    position: absolute;
    top: 1.2rem;
    right: 1.5rem;
    background: rgba(255, 255, 255, 0.15);
    border: none;
    color: #fff;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    font-size: 1.4rem;
    cursor: pointer;
}

.lightbox-close:hover {
    background: rgba(255, 255, 255, 0.3);
}

.lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.15);
    border: none;
    color: #fff;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    font-size: 2rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lightbox-nav:hover {
    background: rgba(255, 255, 255, 0.3);
}

.lightbox-prev {
    left: 1.5rem;
}

.lightbox-next {
    right: 1.5rem;
}

.gallery-main {
    position: relative;
    width: 100%;
    max-width: 720px;
    margin: 0 auto;
    background: #000;
    border-radius: 8px;
    overflow: hidden;
}

.gallery-main-img {
    width: 100%;
    max-height: 480px;
    object-fit: contain;
    display: block;
    margin: 0 auto;
    background: #000;
}

.gallery-nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.45);
    color: #fff;
    border: none;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.gallery-nav-btn:hover {
    background: rgba(0, 0, 0, 0.7);
}

.gallery-prev {
    left: 10px;
}

.gallery-next {
    right: 10px;
}

.gallery-counter {
    position: absolute;
    bottom: 10px;
    right: 12px;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    font-size: 0.8rem;
    padding: 0.15rem 0.6rem;
    border-radius: 12px;
}

.gallery-thumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.75rem;
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
}

.gallery-thumb {
    width: 70px;
    height: 70px;
    object-fit: cover;
    border-radius: 6px;
    cursor: pointer;
    border: 2px solid transparent;
    opacity: 0.7;
}

.gallery-thumb:hover {
    opacity: 1;
}

.gallery-thumb.active {
    border-color: #0d47a1;
    opacity: 1;
}

/* ===== Trang danh sách kiểu Bonbanh v2 - 2 cột trên cùng (Bộ lọc + Hướng dẫn) ===== */
.search-top-2col {
    display: flex;
    gap: 1rem;
    align-items: stretch;
    margin-bottom: 0.4rem;
}

.search-filter-box {
    flex: 1;
    min-width: 0;
    background: #e3f2fd;
    border: 1px solid #bbdefb;
    border-radius: 6px;
    padding: 0.5rem 0.8rem;
}

.filter-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.25rem 0;
}

.filter-label {
    color: #444;
    font-size: 0.85rem;
    font-weight: 600;
    width: 70px;
    flex-shrink: 0;
}

.filter-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.9rem;
}

.filter-tab {
    color: #0d47a1;
    font-size: 0.85rem;
    cursor: pointer;
}

.filter-tab:hover {
    text-decoration: underline;
}

.filter-tab.active {
    font-weight: 700;
    text-decoration: underline;
}

.filter-subrow {
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem;
    padding: 0.2rem 0 0.3rem 76px;
}

.filter-child-link {
    color: #5a6b85;
    font-size: 0.8rem;
    text-decoration: none;
    font-style: italic;
}

.filter-child-link:hover,
.filter-child-link.active {
    color: #0d47a1;
    text-decoration: underline;
}

.filter-select {
    border: 1px solid #bbdefb;
    border-radius: 4px;
    padding: 0.2rem 0.5rem;
    font-size: 0.85rem;
    color: #0d47a1;
    background: #fff;
}

.filter-keyword-input {
    max-width: 260px;
    padding: 0.2rem 0.55rem !important;
    font-size: 0.85rem !important;
}

.guide-box {
    width: 260px;
    flex-shrink: 0;
    background: #fff8e1;
    border: 1px solid #ffe082;
    border-radius: 6px;
    overflow: hidden;
}

.guide-box-header {
    background: #ffecb3;
    color: #7a4a00;
    font-weight: 700;
    padding: 0.3rem 0.7rem;
    font-size: 0.9rem;
}

.guide-steps {
    list-style: none;
    margin: 0;
    padding: 0.4rem 0.7rem;
}

.guide-steps li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0;
    font-size: 0.82rem;
    color: #444;
}

.guide-step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #ffb300;
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    flex-shrink: 0;
}

.admin-dashboard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}

.admin-dashboard-card {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 1.5rem 1rem;
    text-align: center;
    text-decoration: none;
    transition: box-shadow 0.15s, border-color 0.15s;
}

.admin-dashboard-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    border-color: #0d47a1;
}

.admin-dashboard-count {
    font-size: 2.2rem;
    font-weight: 800;
    color: #0d47a1;
}

.admin-dashboard-label {
    font-size: 0.9rem;
    color: #555;
    margin-top: 0.3rem;
}

@media (max-width: 768px) {
    .admin-dashboard-grid {
        grid-template-columns: 1fr 1fr;
    }
}

.dealer-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.9rem;
}

.dealer-card {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 0.8rem;
}

.dealer-card-header {
    display: flex;
    gap: 0.7rem;
    margin-bottom: 0.4rem;
}

.dealer-card-logo {
    width: 56px;
    height: 56px;
    object-fit: cover;
    border-radius: 8px;
    background: #f0f0f0;
    flex-shrink: 0;
}

.dealer-card-name {
    font-weight: 700;
    font-size: 1rem;
    color: #0d47a1;
}

.dealer-card-rating {
    font-size: 0.85rem;
    color: #f9a825;
    margin: 0.15rem 0;
}

.dealer-card-location {
    font-size: 0.85rem;
    color: #666;
    margin-bottom: 0.2rem;
}

.dealer-card-sold {
    font-size: 0.85rem;
    color: #444;
    margin-bottom: 0.4rem;
}

.dealer-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 0.6rem;
    padding-top: 0.6rem;
    border-top: 1px dashed #eee;
    font-size: 0.88rem;
}

@media (max-width: 768px) {
    .dealer-grid {
        grid-template-columns: 1fr;
    }
}

.pagination-row {
    display: flex;
    justify-content: center;
    gap: 0.35rem;
    margin-top: 0.8rem;
}

.page-num-btn {
    min-width: 32px;
    height: 32px;
    border: 1px solid #ccc;
    background: #fff;
    border-radius: 4px;
    color: #0d47a1;
    font-size: 0.85rem;
    cursor: pointer;
}

.page-num-btn:hover {
    background: #e3f2fd;
    border-color: #0d47a1;
}

.page-num-btn.active {
    background: #0d47a1;
    color: #fff;
    border-color: #0d47a1;
    font-weight: 700;
}

.page-num-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* ===== Trang danh sách kiểu Bonbanh - bố cục 3 cột (dùng cho trang Tin cần mua) ===== */
.bonbanh-layout {
    display: flex;
    gap: 1.25rem;
    align-items: flex-start;
}

/* ===== Trang Tin mua bán: 3 cột, 2 bên tạm để trống (chuẩn bị mở rộng sau, thuận tiện xem trên điện thoại) ===== */
.tin3-layout {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}

.tin3-side {
    flex: 0.7;
    min-width: 0;
}

.doitho-side-actions {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.doitho-side-actions .quick-action-cell {
    min-height: 52px;
    font-size: 0.85rem;
}

.tin3-middle {
    flex: 3;
    min-width: 0;
}

.category-filter-box {
    background: #e3f2fd;
    border: 1px solid #bbdefb;
    border-radius: 6px;
    margin-bottom: 0.4rem;
    overflow: hidden;
}

.category-filter-header {
    background: #bbdefb;
    color: #0d47a1;
    font-weight: 700;
    font-size: 0.9rem;
    padding: 0.3rem 0.8rem;
}

.category-filter-body {
    display: flex;
    flex-wrap: wrap;
    gap: 0.2rem 1.2rem;
    padding: 0.4rem 0.8rem;
}

.category-check-row {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.85rem;
    color: #0d47a1;
    cursor: pointer;
    margin: 0;
}

.category-check-row input[type="checkbox"] {
    cursor: pointer;
}

.category-check-all {
    font-weight: 700;
    width: 100%;
}

.category-check-child {
    color: #5a6b85;
    font-style: italic;
    font-size: 0.8rem;
}

.category-child-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.2rem 1.2rem;
    padding: 0.3rem 0.8rem 0.5rem 2rem;
    border-top: 1px dashed #bbdefb;
}

.sort-select-wrap {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85rem;
    color: #555;
    white-space: nowrap;
}

@media (max-width: 992px) {
    .tin3-layout {
        flex-direction: column;
    }

    .tin3-side {
        display: none;
    }

    .tin3-middle {
        width: 100%;
    }
}

.listing-sidebar {
    width: 200px;
    flex-shrink: 0;
}

.listing-sidebar-right {
    width: 280px;
    flex-shrink: 0;
}

.sidebar-box {
    background: #fdf6e3;
    border: 1px solid #eee0b8;
    border-radius: 6px;
    overflow: hidden;
}

.sidebar-title {
    background: #f5e4a1;
    font-size: 1rem;
    font-weight: 700;
    margin: 0;
    padding: 0.4rem 0.8rem;
}

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

.category-list li a {
    display: block;
    padding: 0.32rem 0.8rem;
    color: #0d47a1;
    text-decoration: none;
    font-size: 0.9rem;
    border-bottom: 1px solid #f0e6c0;
}

.category-list li a:hover {
    background: #fbeeba;
}

.category-list li.active a {
    background: #0d47a1;
    color: #fff;
    font-weight: 600;
}

.category-list li.category-child a {
    padding-left: 1.6rem;
    font-style: italic;
    font-size: 0.82rem;
    color: #5a6b85;
}

.category-list li.category-child.active a {
    background: #0d47a1;
    color: #fff;
    font-style: italic;
}

.listing-main {
    flex: 1;
    min-width: 0;
}

/* Khối tìm kiếm - gộp tab + ô tìm kiếm trên cùng 1 hàng, sát lên đầu trang */
.search-panel {
    background: #e3f2fd;
    border: 1px solid #bbdefb;
    border-radius: 6px;
    padding: 0.4rem 0.6rem;
    margin-bottom: 0.3rem;
    margin-top: 0;
}

.search-panel-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.search-tabs {
    display: flex;
    gap: 1.2rem;
    font-size: 0.9rem;
}

.search-tab {
    font-weight: 700;
    color: #0d47a1;
    border-bottom: 2px solid #0d47a1;
    padding-bottom: 0.1rem;
}

.search-tab-link {
    color: #7a8ba0;
    text-decoration: none;
}

.search-box {
    display: flex;
    gap: 0.4rem;
    max-width: 336px;
}

.search-box input {
    min-width: 0;
    padding: 0.25rem 0.55rem;
    font-size: 0.85rem;
}

.search-box button {
    white-space: nowrap;
    flex-shrink: 0;
    padding: 0.25rem 0.7rem;
    font-size: 0.85rem;
}

/* Tab lọc theo tỉnh/thành - sát lên trên, chỉ hở 1 đường kẻ */
.province-tabs {
    display: flex;
    align-items: center;
    gap: 0;
    border-bottom: 1px solid #e0e0e0;
    margin-bottom: 0.15rem;
}

.province-tab {
    padding: 0.35rem 0.75rem;
    cursor: pointer;
    color: #0d47a1;
    font-weight: 600;
    font-size: 0.85rem;
}

.province-tab.active {
    background: #0d47a1;
    color: #fff;
    border-radius: 4px 4px 0 0;
}

.province-more {
    margin-left: auto;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 0.25rem 0.5rem;
    font-size: 0.8rem;
    color: #0d47a1;
}

.result-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #f0f0f0;
    padding: 0.45rem 0.8rem;
    font-weight: 700;
    font-size: 0.88rem;
    color: #444;
    margin-bottom: 0.5rem;
    border-radius: 4px;
}

.listing-rows {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.listing-row {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    border: 1px solid #e5e5e5;
    border-radius: 6px;
    padding: 0.5rem 0.65rem;
    background: #fff;
    transition: box-shadow 0.15s, border-color 0.15s;
}

.listing-row:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    border-color: #0d47a1;
}

.listing-row.sold {
    opacity: 0.45;
    position: relative;
    pointer-events: none;
}

.listing-row.sold::after {
    content: attr(data-sold-label);
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.15);
    color: #d32f2f;
    font-size: 1.4rem;
    font-weight: 900;
    letter-spacing: 0.1rem;
    text-transform: uppercase;
    border-radius: 6px;
    pointer-events: none;
}

.listing-row-thumb-link {
    text-decoration: none;
    flex-shrink: 0;
    text-align: center;
}

.listing-row-thumb {
    width: 120px;
    height: 88px;
    object-fit: cover;
    border-radius: 4px;
    background: #f0f0f0;
    display: block;
}

.listing-row-code {
    font-size: 0.72rem;
    color: #999;
    margin-top: 0.15rem;
}

.listing-row-body {
    flex: 1;
    min-width: 0;
}

.listing-row-title {
    display: block;
    font-weight: 700;
    font-size: 0.98rem;
    line-height: 1.3;
    color: #0d47a1;
    margin-bottom: 0.1rem;
    text-decoration: none;
}

.listing-row-title:hover {
    text-decoration: underline;
}

.listing-row-desc {
    color: #555;
    font-size: 0.85rem;
    line-height: 1.35;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    margin-bottom: 0.1rem;
}

.listing-row-meta {
    color: #888;
    font-size: 0.78rem;
    line-height: 1.2;
}

.listing-row-price-col {
    width: 130px;
    flex-shrink: 0;
    text-align: right;
}

.listing-row-price {
    color: #d32f2f;
    font-weight: 800;
    font-size: 1.02rem;
    line-height: 1.3;
    margin-bottom: 0.3rem;
}

.currency-unit {
    font-size: 50%;
    font-weight: 700;
}

.listing-row-contact {
    width: 190px;
    flex-shrink: 0;
    font-size: 0.8rem;
    line-height: 1.4;
    color: #555;
    border-left: 1px dashed #ddd;
    padding-left: 0.85rem;
}

.listing-row-contact strong {
    color: #1a1a1a;
}

.listing-row-views {
    margin-top: 0.15rem;
    color: #999;
    font-size: 0.74rem;
}

/* Cột phải: đăng nhập + chức năng nhanh */
.account-box {
    background: #fff8e1;
    border: 1px solid #ffe082;
    border-radius: 6px;
    padding: 0.9rem;
    margin-bottom: 0.9rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    align-items: center;
}

.bonbanh-btn {
    display: block;
    text-align: center;
    background: #fdf3d0;
    border: 1px solid #e0b400;
    border-radius: 20px;
    padding: 0.55rem 1rem;
    color: #a06800;
    text-decoration: none;
    font-weight: 700;
    font-size: 0.9rem;
}

.bonbanh-btn:hover {
    background: #fbe9a8;
}

.quick-actions-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.6rem;
}

.quick-action-cell {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 0.7rem 0.4rem;
    color: #0d47a1;
    text-decoration: none;
    font-size: 0.8rem;
    font-weight: 600;
    min-height: 60px;
    overflow: hidden;
}

.quick-action-cell:hover {
    background: #e3f2fd;
    border-color: #0d47a1;
}

.free-badge {
    position: absolute;
    top: 6px;
    right: -22px;
    background: #e64a19;
    color: #fff;
    font-size: 0.6rem;
    font-weight: 700;
    padding: 0.1rem 1.6rem;
    transform: rotate(35deg);
}

@media (max-width: 992px) {
    .search-top-2col {
        flex-direction: column;
    }

    .guide-box {
        width: 100%;
    }

    .bonbanh-layout {
        flex-direction: column;
    }

    .detail-2col {
        flex-direction: column;
    }

    .detail-col-right {
        width: 100%;
    }

    .detail-specs-grid {
        grid-template-columns: 1fr;
    }

    .detail-extra-2col {
        grid-template-columns: 1fr;
    }

    .listing-sidebar,
    .listing-sidebar-right {
        width: 100%;
    }

    .listing-row {
        flex-direction: column;
    }

    .listing-row-thumb {
        width: 100%;
        height: 180px;
    }

    .listing-row-contact {
        border-left: none;
        border-top: 1px dashed #ddd;
        padding-left: 0;
        padding-top: 0.5rem;
        width: 100%;
    }
}

/* ===== Trang đăng tin - bố cục 2 cột kiểu Bonbanh, tông xanh SanBia ===== */
.post-page-title {
    font-size: 1.4rem;
    margin-bottom: 0.75rem;
}

.quick-paste-box {
    background: #e8f5e9;
    border: 1px solid #a5d6a7;
    border-radius: 8px;
    padding: 0.9rem 1.1rem;
    margin-bottom: 1rem;
}

.quick-paste-header {
    color: #1b5e20;
    font-weight: 700;
    margin-bottom: 0.3rem;
}

.image-dropzone {
    border: 2px dashed #90caf9;
    border-radius: 8px;
    padding: 0.8rem;
    background: #f5faff;
    transition: background 0.15s, border-color 0.15s;
}

.image-dropzone-active {
    background: #e3f2fd;
    border-color: #0d47a1;
}

.image-dropzone-text {
    color: #1565c0;
    font-size: 0.85rem;
    margin-bottom: 0.4rem;
}

.quick-paste-hint {
    color: #33691e;
    font-size: 0.82rem;
    margin-bottom: 0.5rem;
}

.form-notice {
    background: #fff8e1;
    border: 1px solid #ffca28;
    border-left: 4px solid #e65100;
    border-radius: 4px;
    padding: 0.55rem 0.9rem;
    margin-bottom: 0.8rem;
    color: #7a4a00;
    font-size: 0.9rem;
}

.form-notice ul {
    margin: 0.4rem 0 0.4rem 1.2rem;
    padding: 0;
}

.form-panels {
    display: flex;
    gap: 1.2rem;
    margin-bottom: 1.2rem;
}

.form-panel {
    flex: 1;
    min-width: 0;
    border: 1px solid #dbe4ee;
    border-radius: 6px;
    overflow: hidden;
    background: #fff;
}

/* Cột trái thu hẹp 30% (còn ~35%), cột phải giãn ra bù lại (~65%) - theo yêu cầu */
.form-panel-narrow {
    flex: 0 1 35%;
}

.form-panel-wide {
    flex: 1 1 65%;
}

.form-panel-subheader {
    margin-top: 0.4rem;
    border-top: 1px solid #dbe4ee;
}

.form-control-wide {
    width: 100%;
}

.description-textarea {
    min-height: 128px; /* giảm 20% so với 160px trước đó */
    resize: vertical;
}

.price-suggestions {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.5rem;
    flex-wrap: wrap;
}

.price-suggestion-chip {
    background: #e3f2fd;
    border: 1px solid #90caf9;
    border-radius: 16px;
    padding: 0.3rem 0.9rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: #0d47a1;
    cursor: pointer;
}

.price-suggestion-chip:hover {
    background: #bbdefb;
}

.form-panel-header {
    background: #eef3fa;
    color: #0d47a1;
    font-weight: 700;
    font-size: 1rem;
    padding: 0.4rem 0.8rem;
    border-bottom: 1px solid #dbe4ee;
    line-height: 1.3;
}

.description-hint {
    color: #d32f2f;
    font-weight: 400;
    font-size: 0.8rem;
}

.form-row {
    display: grid;
    grid-template-columns: 130px 1fr;
    align-items: center;
    gap: 0.6rem;
    padding: 0.35rem 0.8rem;
    border-bottom: 1px dashed #e5e5e5;
}

.form-row:last-child {
    border-bottom: none;
}

.form-row label {
    font-weight: 600;
    color: #333;
    font-size: 0.9rem;
    margin: 0;
}

.required-mark {
    color: #d32f2f;
}

.back-arrow-red {
    color: #d32f2f;
    font-weight: 700;
}

.form-hint {
    display: block;
    color: #999;
    font-size: 0.78rem;
    margin-top: 0.2rem;
}

.price-input-group {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.price-input {
    background: #fffde7;
    border: 1px solid #ffd54f;
    font-weight: 700;
    color: #d32f2f;
}

.price-unit {
    color: #666;
    font-size: 0.9rem;
    white-space: nowrap;
}

.description-panel {
    border: 1px solid #dbe4ee;
    border-radius: 6px;
    overflow: hidden;
    background: #fff;
    margin-bottom: 1.2rem;
}

.form-row-stacked {
    display: block;
    padding: 0.55rem 0.8rem;
    border-bottom: 1px dashed #e5e5e5;
}

.form-row-stacked:last-child {
    border-bottom: none;
}

.form-row-stacked label {
    display: block;
    font-weight: 600;
    color: #333;
    font-size: 0.9rem;
    margin-bottom: 0.25rem;
}

.description-tips {
    margin-top: 0.4rem;
    background: #f5f7fa;
    border-radius: 4px;
    padding: 0.4rem 0.8rem;
    color: #777;
    font-size: 0.82rem;
}

.description-tips ul {
    margin: 0.3rem 0 0 1.1rem;
    padding: 0;
}

.checkbox-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.35rem 1rem;
    padding: 0.5rem 0.8rem;
}

.checkbox-grid .form-check {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.checkbox-grid .form-check-label {
    font-size: 0.88rem;
    margin: 0;
}

.inline-suboption-row {
    flex-wrap: wrap;
}

.inline-suboption-select,
.inline-suboption-number {
    border: none;
    border-bottom: 2px solid #1565c0;
    background: transparent;
    color: #1565c0;
    font-weight: 700;
    font-size: 0.85rem;
    padding: 0.1rem 0.3rem;
    margin-left: 0.4rem;
    outline: none;
}

.inline-suboption-number {
    width: 80px;
}

.inline-suboption-select option {
    color: #1a1a1a;
    font-weight: 400;
}

.selected-value-display {
    color: #1565c0;
    font-weight: 700;
    font-size: 0.9rem;
    margin-top: 0.2rem;
    white-space: nowrap;
    overflow: visible;
    width: max-content;
    max-width: none;
}


.verify-banner {
    background: #fff3cd;
    border-bottom: 1px solid #ffe69c;
    color: #664d03;
    padding: 0.6rem 1rem;
    font-size: 0.9rem;
    text-align: center;
}

.verify-banner a {
    color: #0d47a1;
    font-weight: 700;
}

.verify-phone-box {
    max-width: 480px;
}

.dev-mode-notice {
    background: #fff3cd;
    border: 1px dashed #e0a800;
    border-radius: 6px;
    padding: 0.45rem 0.8rem;
    margin-top: 0.5rem;
    font-size: 0.9rem;
    color: #664d03;
}

.dev-mode-code {
    display: inline-block;
    background: #fff;
    border: 1px solid #e0a800;
    border-radius: 4px;
    padding: 0.15rem 0.6rem;
    font-weight: 800;
    font-size: 1.1rem;
    letter-spacing: 0.2rem;
    color: #0d47a1;
    margin: 0 0.3rem;
}

.otp-input-row {
    display: flex;
    gap: 0.5rem;
}

.otp-input {
    max-width: 180px;
    font-size: 1.2rem;
    letter-spacing: 0.3rem;
    text-align: center;
    font-weight: 700;
}

.price-fixed-note {
    background: #fff3cd;
    border: 1px dashed #e0a800;
    border-radius: 6px;
    padding: 0.5rem 0.9rem;
    color: #a06800;
    font-weight: 700;
    display: inline-block;
}

/* ===== Modal đăng nhập / đăng ký ===== */
.auth-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 1rem;
}

/* Modal dùng chung cho các màn hình quản trị/thao tác (Quản lý bàn, Quản lý nhân viên,
   Quản lý danh mục, cấp mật khẩu...) - khác với .auth-modal-* chỉ dành riêng cho Đăng nhập/Đăng ký */
.modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 1rem;
}

.modal-card {
    position: relative;
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 20px 60px rgba(16, 24, 40, 0.28);
    padding: 1.5rem 1.4rem;
    width: 100%;
    max-width: 500px;
    max-height: 90vh;
    overflow-y: auto;
    color: #16181d;
}

.modal-card h5 {
    font-weight: 700;
    font-size: 1.05rem;
    letter-spacing: -0.01em;
}

.modal-card hr {
    border-color: #edf0f4;
    margin: 1rem 0;
}

.modal-close {
    position: absolute;
    top: 0.9rem;
    right: 0.9rem;
    background: #f2f4f7;
    border: none;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    font-size: 1.2rem;
    line-height: 1;
    color: #667085;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, color 0.15s;
}

.modal-close:hover {
    background: #fdecec;
    color: #e0392f;
}

/* ---- Nút bấm dùng chung cho app CLB - đè lên màu Bootstrap mặc định để đồng bộ bảng màu ---- */
.cp-shell .btn,
.auth-modal-card .btn,
.modal-card .btn {
    border-radius: 12px;
    font-weight: 700;
    font-size: 0.92rem;
    padding: 0.55rem 1rem;
    letter-spacing: -0.01em;
}

.cp-shell .btn-primary,
.auth-modal-card .btn-primary,
.modal-card .btn-primary {
    background: var(--cp-blue, #2563eb);
    border-color: var(--cp-blue, #2563eb);
}

.cp-shell .btn-primary:hover,
.auth-modal-card .btn-primary:hover,
.modal-card .btn-primary:hover {
    background: var(--cp-blue-dark, #1741a6);
    border-color: var(--cp-blue-dark, #1741a6);
}

.cp-shell .btn-success,
.modal-card .btn-success {
    background: var(--cp-green, #17945b);
    border-color: var(--cp-green, #17945b);
}

.cp-shell .btn-success:hover,
.modal-card .btn-success:hover {
    background: #127a4a;
    border-color: #127a4a;
}

.cp-shell .btn-danger,
.modal-card .btn-danger {
    background: var(--cp-red, #e0392f);
    border-color: var(--cp-red, #e0392f);
}

.cp-shell .btn-danger:hover,
.modal-card .btn-danger:hover {
    background: #c22e25;
    border-color: #c22e25;
}

.cp-shell .btn-outline-primary,
.modal-card .btn-outline-primary {
    color: var(--cp-blue, #2563eb);
    border-color: var(--cp-blue, #2563eb);
    background: #fff;
}

.cp-shell .btn-outline-primary:hover,
.modal-card .btn-outline-primary:hover {
    background: var(--cp-blue-light, #eaf1ff);
    color: var(--cp-blue-dark, #1741a6);
    border-color: var(--cp-blue, #2563eb);
}

.cp-shell .btn-outline-danger,
.modal-card .btn-outline-danger {
    color: var(--cp-red, #e0392f);
    border-color: #f3c9c6;
    background: #fff;
}

.cp-shell .btn-outline-danger:hover,
.modal-card .btn-outline-danger:hover {
    background: var(--cp-red-bg, #fdecec);
    color: var(--cp-red, #e0392f);
    border-color: var(--cp-red, #e0392f);
}

.cp-shell .form-select,
.cp-shell .form-control,
.auth-modal-card .form-select,
.auth-modal-card .form-control,
.modal-card .form-select,
.modal-card .form-control {
    border-radius: 10px;
    border-color: #dde2ea;
    padding: 0.5rem 0.75rem;
    font-size: 0.92rem;
}

.cp-shell .form-select:focus,
.cp-shell .form-control:focus,
.auth-modal-card .form-select:focus,
.auth-modal-card .form-control:focus,
.modal-card .form-select:focus,
.modal-card .form-control:focus {
    border-color: var(--cp-blue, #2563eb);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

.auth-modal-card {
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 20px 60px rgba(16, 24, 40, 0.28);
    padding: 1.75rem 1.6rem;
    width: 100%;
    max-width: 400px;
    max-height: 90vh;
    overflow-y: auto;
}

.auth-modal-tabs {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    margin-bottom: 1.5rem;
    border-bottom: none;
    text-align: center;
}

.auth-modal-tab {
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--cp-text, #16181d);
    border-bottom: none;
    padding-bottom: 0;
}

.auth-modal-tab-link {
    font-weight: 600;
    font-size: 1.1rem;
    color: #999;
    text-decoration: none;
    padding-bottom: 0.5rem;
}

.auth-modal-tab-link:hover {
    color: #0d47a1;
}

.auth-modal-back-icon {
    background: #f5f7fa;
    border: 1px solid #e0e0e0;
    color: #555;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    flex-shrink: 0;
    margin-bottom: 0.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.auth-modal-back-icon:hover {
    background: #e3f2fd;
    border-color: #0d47a1;
    color: #0d47a1;
}

/* ---- Logo tròn + tiêu đề trên màn hình đăng nhập CLB ---- */
.auth-logo-badge {
    width: 56px;
    height: 56px;
    margin: 0 auto 0.9rem;
    border-radius: 16px;
    background: linear-gradient(160deg, #2563eb 0%, #1741a6 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 20px rgba(37, 99, 235, 0.3);
}

.auth-logo-badge svg {
    width: 28px;
    height: 28px;
    color: #fff;
}

.auth-modal-subtitle {
    font-size: 0.85rem;
    color: #6b7280;
    margin-top: 0.15rem;
}

.page-title-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.auth-modal-title {
    font-size: 1.3rem;
    font-weight: 700;
    color: #0d47a1;
    margin-bottom: 0.5rem;
}

.remember-forgot-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.forgot-password-link {
    font-size: 0.85rem;
    color: #0d47a1;
    text-decoration: none;
    font-weight: 600;
}

.forgot-password-link:hover {
    text-decoration: underline;
}

/* ===== Cửa sổ trượt tài khoản (kiểu màn hình điện thoại) ===== */
.account-drawer-toggle-checkbox {
    display: none;
}

.account-drawer-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 1500;
    cursor: pointer;
}

.account-drawer {
    position: fixed;
    top: 0;
    right: -380px;
    width: 340px;
    max-width: 88vw;
    height: 100vh;
    background: #fff;
    box-shadow: -6px 0 24px rgba(0, 0, 0, 0.25);
    z-index: 1600;
    transition: right 0.28s ease;
    overflow-y: auto;
    padding: 1.25rem;
}

.account-drawer-toggle-checkbox:checked ~ .account-drawer-backdrop {
    display: block;
}

.account-drawer-toggle-checkbox:checked ~ .account-drawer {
    right: 0;
}

.account-drawer-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 1.15rem;
    font-weight: 700;
    color: #0d47a1;
    border-bottom: 1px solid #eee;
    padding-bottom: 0.75rem;
    margin-bottom: 1rem;
}

.account-drawer-close {
    cursor: pointer;
    font-size: 1.3rem;
    color: #999;
}

.account-drawer-avatar {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: #e3f2fd;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    margin: 0 auto 1.25rem;
}

.account-drawer-field {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    padding: 0.35rem 0;
    border-bottom: 1px dashed #eee;
}

.account-drawer-label {
    font-size: 0.78rem;
    color: #999;
    text-transform: uppercase;
    letter-spacing: 0.03rem;
}

.account-drawer-value {
    font-size: 0.95rem;
    font-weight: 600;
    color: #1a1a1a;
}

.account-drawer-actions {
    margin-top: 1.5rem;
}

@media (max-width: 768px) {
    .form-panels {
        flex-direction: column;
    }

    .form-row {
        grid-template-columns: 1fr;
    }
}

/* ===== Footer chân trang - hiện ở mọi trang ===== */
.site-footer {
    background: #f7f7f8;
    border-top: 1px solid #e0e0e0;
    margin-top: 1.5rem;
    padding-top: 1.2rem;
}

.footer-about {
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 6px;
    padding: 1rem 1.2rem;
    margin-bottom: 1.2rem;
}

.footer-about p {
    color: #444;
    font-size: 0.85rem;
    line-height: 1.6;
    margin-bottom: 0.8rem;
    text-align: justify;
    text-indent: 2em;
}

.footer-about p:last-child {
    margin-bottom: 0;
}

.footer-bottom {
    position: relative;
    border-top: 1px solid #ddd;
    padding: 1rem 6.5rem 1.5rem 7.5rem;
    text-align: center;
}

.footer-links {
    text-align: center;
    margin-bottom: 1rem;
    font-size: 0.88rem;
}

.footer-links a {
    color: #0d47a1;
    text-decoration: none;
}

.footer-links a:hover {
    text-decoration: underline;
}

.footer-links span {
    margin: 0 0.6rem;
    color: #ccc;
}

.footer-company-row {
    display: block;
}

.footer-company-text {
    text-align: center;
    font-size: 0.85rem;
    color: #444;
    line-height: 1.6;
}

.footer-disclaimer {
    color: #d32f2f;
}

.footer-sanvi-logo {
    position: absolute;
    left: 1rem;
    bottom: 1.2rem;
    width: 56px;
    height: 56px;
    object-fit: contain;
}

.footer-badge {
    position: absolute;
    right: 1rem;
    bottom: 1.2rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    border: 2px solid #d32f2f;
    border-radius: 6px;
    padding: 0.4rem 0.8rem;
}

.footer-badge-circle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #d32f2f;
    color: #fff;
    font-weight: 800;
    font-size: 0.9rem;
    flex-shrink: 0;
}

.footer-badge-text {
    color: #d32f2f;
    font-weight: 700;
    font-size: 0.68rem;
    line-height: 1.3;
}

@media (max-width: 768px) {
    .footer-bottom {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .footer-sanvi-logo {
        position: static;
        display: block;
        margin: 0 auto 0.6rem;
    }

    .footer-badge {
        position: static;
        margin: 1rem auto 0;
        width: max-content;
    }
}

/* ===== Trang văn bản pháp lý (Quy chế, Quy định đăng tin, Bảo mật...) - đúng thể thức trình bày văn bản ===== */
.legal-doc-page {
    max-width: 100%;
    margin: 0 auto;
    background: #fff;
    padding: 1.5rem 2rem;
}

.legal-doc-title {
    text-align: center;
    font-size: 1.3rem;
    font-weight: 800;
    color: #1a1a1a;
    margin-bottom: 0.2rem;
}

.legal-doc-subtitle {
    text-align: center;
    font-size: 1rem;
    font-weight: 700;
    color: #444;
    margin-bottom: 1.2rem;
}

.legal-doc-article {
    font-weight: 700;
    color: #0d47a1;
    margin-top: 1.1rem;
    margin-bottom: 0.4rem;
}

.legal-doc-body p {
    text-align: justify;
    text-indent: 2em;
    line-height: 1.7;
    margin-bottom: 0.6rem;
    color: #222;
}

.legal-doc-body ul {
    margin: 0 0 0.6rem 3.5em;
    padding: 0;
}

.legal-doc-body ul li {
    text-align: justify;
    line-height: 1.7;
    margin-bottom: 0.2rem;
    color: #222;
}

.legal-doc-back-btn {
    margin-bottom: 1rem;
}


/* ===== SanBia POS - Quản lý CLB ===== */
.club-dashboard-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-bottom: 1rem;
}

.club-dashboard-header h1 {
    font-size: 1.4rem;
    margin: 0;
}

.club-dashboard-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.club-stats-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 0.8rem;
    margin-bottom: 1.2rem;
}

.club-stat-box {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 0.9rem;
    text-align: center;
}

.club-stat-number {
    font-size: 1.6rem;
    font-weight: 800;
    color: #0d47a1;
}

.club-stat-label {
    font-size: 0.8rem;
    color: #666;
    margin-top: 0.2rem;
}

.club-stat-playing .club-stat-number { color: #2e7d32; }
.club-stat-available .club-stat-number { color: #d32f2f; }
.club-stat-reserved .club-stat-number { color: #f9a825; }
.club-stat-revenue .club-stat-number { color: #6a1b9a; font-size: 1.3rem; }

.club-table-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 0.8rem;
}

.club-table-card {
    position: relative;
    background: var(--cp-surface);
    border: 1px solid var(--cp-border);
    border-radius: var(--cp-radius-sm);
    padding: 1rem 0.8rem 0.85rem;
    text-align: center;
    cursor: pointer;
    box-shadow: var(--cp-shadow-sm);
    transition: box-shadow 0.15s, transform 0.1s, border-color 0.15s;
    overflow: hidden;
}

.club-table-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: #c7d0d9;
}

.club-table-card:hover {
    box-shadow: var(--cp-shadow-md);
    transform: translateY(-2px);
}

.club-table-status-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    margin: 0 auto;
    display: block;
}

.club-table-code {
    font-size: 1.05rem;
    font-weight: 700;
    margin: 0.4rem 0 0.1rem;
    color: var(--cp-text);
}

.club-table-timer {
    font-size: 1.2rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    font-family: "SF Mono", "Roboto Mono", monospace;
    color: var(--cp-green);
}

.club-table-amount {
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--cp-blue-dark);
    margin-top: 0.1rem;
}

.club-table-staff {
    font-size: 0.76rem;
    color: var(--cp-text-muted);
    margin-top: 0.25rem;
}

.club-table-substatus {
    font-size: 0.82rem;
    color: var(--cp-text-muted);
    margin-top: 0.35rem;
    font-weight: 600;
}

/* Theo yêu cầu nghiệp vụ: Trống = đỏ, Đang chơi = xanh (ngược quy ước đèn giao thông thông thường) */
.club-table-available {
    border-color: var(--cp-border);
}

.club-table-available::before {
    background: var(--cp-red);
}

.club-table-available .club-table-status-dot {
    background: var(--cp-red);
}

.club-table-playing {
    border-color: #cfe8da;
    background: var(--cp-green-bg);
}

.club-table-playing::before {
    background: var(--cp-green);
}

.club-table-playing .club-table-status-dot {
    background: var(--cp-green);
}

.club-table-reserved {
    border-color: #f5e2b8;
    background: var(--cp-amber-bg);
}

.club-table-reserved::before {
    background: var(--cp-amber);
}

.club-table-reserved .club-table-status-dot {
    background: var(--cp-amber);
}

/* ===== Layout riêng cho khu vực vận hành CLB (không có menu/footer SanBia.vn) ===== */
.club-pos-shell {
    min-height: 100vh;
    background: #f4f6f8;
}

.club-pos-topbar {
    background: #0d47a1;
    color: #fff;
    padding: 0.7rem 1.2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.club-pos-brand {
    font-weight: 800;
    font-size: 1.05rem;
}

.club-pos-user {
    margin-right: 1rem;
    font-size: 0.85rem;
    opacity: 0.9;
}

.club-pos-logout {
    color: #fff;
    text-decoration: none;
    font-size: 0.85rem;
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 4px;
    padding: 0.25rem 0.6rem;
}

.club-pos-logout:hover {
    background: rgba(255, 255, 255, 0.15);
}

.club-pos-body {
    max-width: 1100px;
    margin: 0 auto;
    padding: 1.2rem;
}

/* ===== Gọi món / Menu / Nhật ký CLB ===== */
.club-order-picker {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
    gap: 0.5rem;
    margin: 0.7rem 0;
    max-height: 240px;
    overflow-y: auto;
    padding: 0.6rem;
    background: var(--cp-bg);
    border-radius: var(--cp-radius-sm);
}

.club-order-picker-item {
    background: var(--cp-surface);
    border: 1px solid var(--cp-border);
    border-radius: 10px;
    padding: 0.6rem 0.4rem;
    font-size: 0.8rem;
    font-weight: 600;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.club-order-picker-item:hover {
    border-color: var(--cp-blue);
    box-shadow: var(--cp-shadow-sm);
}

.club-order-picker-item span {
    color: var(--cp-blue-dark);
    font-weight: 700;
    display: block;
    margin-top: 0.25rem;
}

.club-menu-columns {
    display: flex;
    gap: 1.2rem;
    align-items: flex-start;
    flex-wrap: wrap;
}

.club-menu-col-narrow {
    flex: 1;
    min-width: 220px;
}

.club-menu-col-wide {
    flex: 2.5;
    min-width: 320px;
}

.club-activity-log {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    overflow: hidden;
}

.club-activity-log-item {
    display: flex;
    gap: 1rem;
    padding: 0.6rem 1rem;
    border-bottom: 1px dashed #eee;
    font-size: 0.85rem;
    align-items: baseline;
}

.club-activity-log-item:last-child {
    border-bottom: none;
}

.club-activity-log-time {
    color: #888;
    font-family: monospace;
    flex-shrink: 0;
    width: 100px;
}

.club-activity-log-staff {
    font-weight: 700;
    color: #0d47a1;
    flex-shrink: 0;
    width: 120px;
}

.club-activity-log-action {
    color: #333;
}

/* =========================================================================
   SanBia POS v2 - giao diện kiểu app bán hàng di động (tham khảo iOrder)
   Prefix "cp-" (Club POS) dùng riêng cho toàn bộ khu vực /clb/* để không
   đụng tới style của SanBia.vn ở ngoài. Quy ước màu trạng thái bàn vẫn giữ
   nguyên: Trống = đỏ, Đang chơi = xanh lá, Đặt trước = vàng.
   ========================================================================= */
.cp-shell {
    --cp-blue: #2563eb;
    --cp-blue-dark: #1741a6;
    --cp-blue-light: #eaf1ff;
    --cp-ink: #ffffff;
    --cp-bg: #eef1f6;
    --cp-surface: #ffffff;
    --cp-border: #e5e9f0;
    --cp-text: #16181d;
    --cp-text-muted: #6b7280;
    --cp-radius: 18px;
    --cp-radius-sm: 12px;
    --cp-red: #e0392f;
    --cp-red-bg: #fdecec;
    --cp-green: #17945b;
    --cp-green-bg: #e8f8ef;
    --cp-amber: #d98c0a;
    --cp-amber-bg: #fef3df;
    --cp-shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.05);
    --cp-shadow-md: 0 4px 16px rgba(16, 24, 40, 0.08);
    --cp-shadow-header: 0 8px 24px rgba(37, 99, 235, 0.22);

    min-height: 100vh;
    background: var(--cp-bg);
    display: flex;
    flex-direction: column;
    color: var(--cp-text);
}

.cp-content {
    flex: 1;
    padding: 0 0 2.5rem 0;
    max-width: 640px;
    width: 100%;
    margin: 0 auto;
}

/* ---- Header xanh dùng chung cho mọi màn hình CLB ---- */
/* Chiều cao được nén gọn (so với thiết kế cũ) để dành nhiều chỗ hơn cho lưới bàn/nội dung chính -
   đồng thời đây là bar duy nhất ở đầu màn hình (không còn 2 thanh xanh xếp chồng như trước). */
.cp-header {
    background: linear-gradient(160deg, var(--cp-blue) 0%, var(--cp-blue-dark) 100%);
    color: #fff;
    padding: 0.85rem 1.1rem 0.9rem;
    border-radius: 0 0 16px 16px;
    margin-bottom: 0.9rem;
    box-shadow: var(--cp-shadow-header);
}

/* Riêng header của trang Dashboard: tên CLB + số liệu giờ nằm gọn trên 1 dòng (xem .cp-title-inline /
   .cp-stat-pill bên dưới) nên chỉ cần 1 dòng cao bằng dòng nút bấm - giảm thêm ~50% chiều cao so với
   header 2 dòng (tiêu đề + cặp thẻ thống kê) trước đây. */
.cp-header-dashboard {
    padding: 0.45rem 0.9rem;
    margin-bottom: 0.6rem;
}

.cp-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
}

.cp-header-left {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    min-width: 0;
}

.cp-back {
    color: #fff;
    text-decoration: none;
    font-size: 1.3rem;
    line-height: 1;
    opacity: 0.95;
    background: none;
    border: none;
    padding: 0.1rem 0.2rem;
    cursor: pointer;
}

.cp-back:hover {
    opacity: 1;
}

.cp-title {
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    margin: 0;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cp-subtitle {
    font-size: 0.76rem;
    opacity: 0.85;
    margin-top: 0.1rem;
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.cp-header-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

.cp-icon-btn {
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #fff;
    border-radius: 9px;
    width: 30px;
    height: 30px;
    padding: 0;
    font-size: 0.95rem;
    line-height: 1;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    transition: background 0.15s;
}

.cp-icon-btn svg {
    width: 15px;
    height: 15px;
}

.cp-icon-btn:hover {
    background: rgba(255, 255, 255, 0.26);
    color: #fff;
}

.cp-pill-btn {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.7);
    color: #fff;
    border-radius: 20px;
    padding: 0.4rem 0.9rem;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    text-decoration: none;
    display: inline-block;
}

.cp-pill-btn:hover {
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
}

/* Tabs chữ dạng "Tất cả (8)  Trong (8)" trong header xanh */
.cp-subtabs {
    display: flex;
    gap: 1.4rem;
    margin-top: 0.9rem;
    font-size: 0.95rem;
    font-weight: 700;
}

.cp-subtabs a, .cp-subtabs span.cp-subtab {
    color: rgba(255, 255, 255, 0.75);
    text-decoration: none;
    padding-bottom: 0.3rem;
    border-bottom: 2px solid transparent;
    cursor: pointer;
}

.cp-subtabs .cp-subtab-active {
    color: #fff;
    border-bottom-color: #fff;
}

/* Hàng chip radio "○ Tất cả (8)  ○ Trống (8)" */
.cp-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 1.1rem;
    margin-top: 0.7rem;
    font-size: 0.9rem;
}

.cp-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: rgba(255, 255, 255, 0.85);
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
    font-size: 0.88rem;
}

.cp-chip-dot {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.75);
    flex-shrink: 0;
}

.cp-chip.cp-chip-active {
    color: #fff;
    font-weight: 700;
}

.cp-chip.cp-chip-active .cp-chip-dot {
    background: #fff;
    box-shadow: inset 0 0 0 3px var(--cp-blue-dark);
}

/* Chip dùng trên nền trắng (không nằm trong header xanh) */
.cp-chip-row-light {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0 1rem;
    margin-bottom: 1rem;
    font-size: 0.85rem;
}

.cp-chip-row-light .cp-chip {
    color: var(--cp-text-muted);
    background: var(--cp-surface);
    border: 1px solid var(--cp-border);
    border-radius: 999px;
    padding: 0.4rem 0.85rem;
    font-weight: 600;
    box-shadow: var(--cp-shadow-sm);
    transition: border-color 0.15s, color 0.15s, background 0.15s;
}

.cp-chip-row-light .cp-chip-dot {
    width: 8px;
    height: 8px;
    border: none;
    background: #c7d0d9;
}

.cp-chip-row-light .cp-chip.cp-chip-active {
    color: var(--cp-blue-dark);
    background: var(--cp-blue-light);
    border-color: var(--cp-blue);
}

/* Chip điều hướng (không phải bộ lọc) - VD nút "Báo cáo" cạnh các chip lọc trạng thái bàn - luôn nổi bật
   bằng màu xanh để phân biệt với các chip lọc thông thường. */
.cp-chip-row-light .cp-chip.cp-chip-link {
    color: var(--cp-blue-dark);
    background: var(--cp-blue-light);
    border-color: var(--cp-blue);
    text-decoration: none;
}

.cp-chip-row-light .cp-chip.cp-chip-active .cp-chip-dot {
    background: var(--cp-blue);
    box-shadow: none;
    border: none;
}

/* ---- Ô tìm kiếm trắng bo tròn ---- */
.cp-search-wrap {
    padding: 0 1rem;
    margin-bottom: 0.9rem;
}

.cp-search {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: #fff;
    border: 1px solid #e2e6eb;
    border-radius: 24px;
    padding: 0.55rem 0.9rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.cp-search input {
    border: none;
    outline: none;
    flex: 1;
    font-size: 0.92rem;
    background: transparent;
    min-width: 0;
}

.cp-search .cp-search-icon {
    color: #9aa4ae;
}

/* ---- Cặp thẻ thống kê (Doanh thu / Hoá đơn...) ---- */
.cp-stat-pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.6rem;
    padding: 0;
    margin-top: 0.65rem;
}

.cp-stat-box {
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: var(--cp-radius-sm);
    padding: 0.45rem 0.75rem;
    backdrop-filter: blur(2px);
}

.cp-stat-box .cp-stat-label {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.8);
    font-weight: 500;
}

.cp-stat-box .cp-stat-value {
    font-size: 1.05rem;
    font-weight: 700;
    color: #fff;
    margin-top: 0.1rem;
    letter-spacing: -0.01em;
}

/* Header siêu gọn của trang Dashboard - tên CLB + 2 số liệu nằm gọn trên 1 dòng duy nhất thay vì 2 dòng
   như trước, giúp thanh tiêu đề thấp hơn nhiều, nhường chỗ cho lưới bàn. */
.cp-header-left-scroll {
    overflow-x: auto;
    scrollbar-width: none;
}

.cp-header-left-scroll::-webkit-scrollbar {
    display: none;
}

.cp-title-inline {
    font-weight: 700;
    font-size: 0.92rem;
    color: #fff;
    white-space: nowrap;
    flex-shrink: 0;
}

.cp-stat-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    background: rgba(255, 255, 255, 0.16);
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 999px;
    padding: 0.18rem 0.55rem;
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.9);
    white-space: nowrap;
    flex-shrink: 0;
}

.cp-stat-pill strong {
    color: #fff;
    font-weight: 700;
}

/* ---- Trang Báo cáo doanh thu (3 tab Hôm nay/Tháng này/Năm nay) ---- */
.rp-tabs {
    display: flex;
    gap: 0.5rem;
    padding: 0.9rem 1rem 0;
}

.rp-tab {
    flex: 1;
    text-align: center;
    border: 1px solid var(--cp-border);
    background: #fff;
    color: var(--cp-text-muted);
    border-radius: 999px;
    padding: 0.55rem 0.6rem;
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
}

.rp-tab.rp-tab-active {
    background: var(--cp-blue);
    border-color: var(--cp-blue);
    color: #fff;
}

.rp-order-count {
    text-align: center;
    color: var(--cp-text-muted);
    font-size: 0.82rem;
    margin: 0.7rem 0 0.3rem;
}

/* Stat trên nền trắng (dùng ngoài header) */
.cp-stat-row-light {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    gap: 0.7rem;
    padding: 0 1rem;
    margin-bottom: 1rem;
}

.cp-stat-card-light {
    background: #fff;
    border: 1px solid #e6e9ee;
    border-radius: var(--cp-radius-sm);
    padding: 0.7rem;
    text-align: center;
}

.cp-stat-card-light .cp-stat-value {
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--cp-blue-dark);
}

.cp-stat-card-light.cp-stat-green .cp-stat-value { color: var(--cp-green); }
.cp-stat-card-light.cp-stat-red .cp-stat-value { color: var(--cp-red); }
.cp-stat-card-light.cp-stat-amber .cp-stat-value { color: var(--cp-amber); }

.cp-stat-card-light .cp-stat-label {
    font-size: 0.76rem;
    color: var(--cp-text-muted);
    margin-top: 0.15rem;
}

/* ---- Tiêu đề section kiểu "Trong ✏️   Còn trống: 8" ---- */
.cp-section-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1rem;
    margin: 0.4rem 0 0.7rem;
}

.cp-section-title h6 {
    margin: 0;
    font-weight: 800;
    font-size: 1rem;
    color: #1a1a1a;
}

.cp-section-title .cp-section-hint {
    font-size: 0.82rem;
    color: var(--cp-green);
    font-weight: 700;
}

/* ---- Lưới thẻ (bàn, sản phẩm dạng lưới) ---- */
.cp-card-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.8rem;
    padding: 0 1rem;
}

.cp-card {
    position: relative;
    background: #fff;
    border: 1px solid #e6e9ee;
    border-radius: var(--cp-radius-sm);
    padding: 0.9rem 0.8rem;
    min-height: 92px;
    cursor: pointer;
}

.cp-card-title {
    font-weight: 800;
    font-size: 1rem;
    color: #1a1a1a;
    margin-right: 1.6rem;
}

.cp-card-meta {
    font-size: 0.78rem;
    color: var(--cp-text-muted);
    margin-top: 0.25rem;
}

.cp-card-actions {
    position: absolute;
    top: 0.6rem;
    right: 0.6rem;
    display: flex;
    gap: 0.3rem;
}

.cp-card-icon-btn {
    background: none;
    border: none;
    padding: 0.1rem;
    font-size: 0.95rem;
    cursor: pointer;
    color: var(--cp-blue);
    line-height: 1;
}

.cp-card-icon-btn.cp-danger {
    color: var(--cp-red);
}

.cp-card-add {
    background: #fff;
    border: 2px dashed #b9c6d6;
    border-radius: var(--cp-radius-sm);
    min-height: 92px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    color: var(--cp-blue);
    font-weight: 700;
    font-size: 0.85rem;
    cursor: pointer;
}

.cp-card-add .cp-card-add-plus {
    display: inline-flex;
    line-height: 1;
}

/* ---- Danh sách dạng dòng (nhân viên, món, phiên chơi...) ---- */
.cp-list {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    padding: 0 1rem;
}

.cp-list-item {
    background: #fff;
    border: 1px solid #e6e9ee;
    border-radius: var(--cp-radius-sm);
    padding: 0.75rem 0.9rem;
    display: flex;
    align-items: center;
    gap: 0.8rem;
}

.cp-avatar {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--cp-blue-light);
    color: var(--cp-blue);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    flex-shrink: 0;
}

.cp-thumb {
    width: 46px;
    height: 46px;
    border-radius: 10px;
    background: #eef1f5;
    color: #9aa4ae;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    flex-shrink: 0;
}

.cp-list-item-body {
    flex: 1;
    min-width: 0;
}

.cp-list-item-title {
    font-weight: 700;
    font-size: 0.95rem;
    color: #1a1a1a;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cp-list-item-sub {
    font-size: 0.8rem;
    color: var(--cp-text-muted);
    margin-top: 0.15rem;
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.cp-list-item-trailing {
    text-align: right;
    flex-shrink: 0;
}

.cp-list-item-price {
    font-weight: 800;
    color: var(--cp-blue-dark);
    font-size: 0.95rem;
}

.cp-list-item-actions {
    display: flex;
    gap: 0.4rem;
    margin-top: 0.3rem;
}

.cp-badge {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 0.15rem 0.55rem;
    border-radius: 20px;
}

.cp-badge-green { background: #e6f6ea; color: var(--cp-green); }
.cp-badge-red { background: #fdeaea; color: var(--cp-red); }
.cp-badge-amber { background: #fff6e0; color: var(--cp-amber); }
.cp-badge-gray { background: #eef1f5; color: var(--cp-text-muted); }

/* Hạng khách VIP - Xếp hạng khách hàng theo tổng chi tiêu */
.cp-badge-vip-dong { background: #f3ede7; color: #8a5a34; }
.cp-badge-vip-bac { background: #eef1f5; color: #64748b; }
.cp-badge-vip-vang { background: #fff6e0; color: #b8860b; }
.cp-badge-vip-kimcuong { background: linear-gradient(135deg, #e0f7ff, #eae6ff); color: #4a3fb0; }

.cp-hello-text {
    color: #fff;
    font-size: 0.72rem;
    opacity: 0.92;
    white-space: nowrap;
    max-width: 110px;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-right: 0.1rem;
}

.cp-list-item-selected {
    background: var(--cp-blue-light);
    border: 1px solid var(--cp-blue);
    border-radius: 10px;
}

.cp-list-item-selected .cp-list-item-trailing { color: var(--cp-blue); }

/* ---- Khung giờ khuyến mãi con của 1 loại giờ chơi ---- */
.cp-promo-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem;
    font-size: 0.78rem;
    color: var(--cp-text-muted);
    background: #f7f9fc;
    border: 1px solid var(--cp-border);
    border-radius: 8px;
    padding: 0.35rem 0.5rem;
    margin-bottom: 0.35rem;
}

.cp-promo-time { font-weight: 600; color: #1a1a1a; }

.cp-promo-price { font-weight: 800; color: var(--cp-blue-dark); margin-left: auto; }

.cp-promo-add-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    border: 1px dashed var(--cp-blue);
    background: transparent;
    color: var(--cp-blue-dark);
    font-size: 0.78rem;
    font-weight: 700;
    border-radius: 8px;
    padding: 0.35rem 0.6rem;
    cursor: pointer;
}

/* ---- Chi tiết hóa đơn (modal xem lại từ Lịch sử giao dịch) ---- */
.cp-invoice-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.85rem;
    color: #1a1a1a;
    padding: 0.25rem 0;
}

.cp-invoice-row span { color: var(--cp-text-muted); }

/* Breakdown khung giờ trên hoá đơn in - thụt nhẹ + chữ nhỏ hơn dòng Tiền giờ tổng ở trên. */
.cp-invoice-subrow { padding-left: 0.8rem; font-size: 0.78rem; }
.cp-invoice-subrow span, .cp-invoice-subrow strong { color: var(--cp-text-muted); font-weight: 500; }

.cp-invoice-negative strong { color: var(--cp-red); }

.cp-invoice-total {
    font-size: 1rem;
    font-weight: 800;
}

.cp-invoice-total span { color: #1a1a1a; font-weight: 700; }
.cp-invoice-total strong { color: var(--cp-blue-dark); }

/* ---- In hoá đơn: khi bấm "In hoá đơn" chỉ in phần .invoice-print-area, ẩn hết phần còn lại của trang
   (nút bấm trong hoá đơn cũng ẩn luôn qua .no-print). Khổ giấy đặt sẵn cho máy in nhiệt 80mm (phổ biến
   nhất với máy in bill quán/CLB) - nếu dùng máy in nhiệt 58mm, đổi 80mm thành 58mm ở 2 chỗ bên dưới. ---- */
@media print {
    @page {
        size: 80mm auto;
        margin: 0;
    }

    body * { visibility: hidden; }
    .invoice-print-area, .invoice-print-area * { visibility: visible; }
    .invoice-print-area {
        position: absolute;
        left: 0;
        top: 0;
        width: 80mm;
        max-width: 80mm;
        box-shadow: none;
        border: none;
        padding: 2mm 3mm;
        font-size: 11px;
    }
    .invoice-print-area .no-print { display: none; }
    .invoice-print-area .cp-invoice-row { font-size: 11px; padding: 1mm 0; }
    .invoice-print-area .cp-invoice-total { font-size: 13px; }
    .invoice-print-area img { max-width: 100%; }
}

/* ---- Báo cáo doanh thu: thẻ tổng quan, biểu đồ, top sản phẩm, lưới báo cáo chi tiết ---- */
.rp-hero-card {
    background: #fff;
    border-radius: 14px;
    margin: 0 1rem 1rem;
    padding: 1.1rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
    text-align: center;
}

.rp-hero-label { color: var(--cp-text-muted); font-size: 0.85rem; margin-bottom: 0.3rem; }
.rp-hero-value { font-size: 1.8rem; font-weight: 800; color: var(--cp-blue-dark); }
.rp-hero-divider { border-top: 1px solid var(--cp-border); margin: 0.9rem 0; }
.rp-hero-row { display: flex; }
.rp-hero-col { flex: 1; text-align: center; }
.rp-hero-col + .rp-hero-col { border-left: 1px solid var(--cp-border); }
.rp-hero-col-value { font-weight: 700; font-size: 1rem; color: #1a1a1a; }
.rp-hero-col-label { font-size: 0.78rem; color: var(--cp-text-muted); margin-top: 0.15rem; }

.rp-section-title { font-weight: 700; font-size: 0.95rem; margin: 1rem 1rem 0.5rem; color: #1a1a1a; }

.rp-chart-card {
    background: #fff;
    border-radius: 14px;
    margin: 0 1rem 1rem;
    padding: 1.6rem 1rem;
    text-align: center;
    color: var(--cp-text-muted);
    font-size: 0.85rem;
}

.rp-chart-label { margin: 0 1rem 0.4rem; font-size: 0.85rem; color: #1a1a1a; font-weight: 600; }

/* ---- Trục tung (giá trị tiền: 500k, 1tr, 10tr...) + khung cột biểu đồ - xem ChartAxisHelper ---- */
.rp-chart-plot { display: flex; align-items: stretch; background: #fff; border-radius: 14px; margin: 0 1rem 1rem; }
.rp-chart-yaxis { flex: 0 0 auto; width: 34px; padding: 0.8rem 0.3rem 0.6rem 0.6rem; box-sizing: border-box; }
.rp-chart-yaxis-inner { position: relative; height: 140px; }
.rp-chart-yaxis-tick { position: absolute; left: 0; right: 0; bottom: 0; transform: translateY(50%); font-size: 0.62rem; line-height: 1; color: var(--cp-text-muted); text-align: right; white-space: nowrap; }

.rp-chart-bars { display: flex; align-items: flex-end; gap: 6px; overflow-x: auto; flex: 1 1 auto; padding: 0.8rem 1rem 0.6rem 0; border-left: 1.5px solid #333; }
.rp-chart-col { display: flex; flex-direction: column; align-items: center; flex: 0 0 auto; width: 20px; }
.rp-chart-bar { position: relative; width: 14px; height: 140px; border-radius: 3px 3px 0 0; overflow: hidden; background: transparent; }
.rp-chart-bar-fill { position: absolute; left: 0; right: 0; bottom: 0; background: var(--cp-blue); }
.rp-chart-col-label { font-size: 0.65rem; color: var(--cp-text-muted); margin-top: 0.3rem; white-space: nowrap; }

.rp-top-header { display: flex; align-items: center; gap: 0.5rem; margin: 0 1rem 0.5rem; font-size: 0.9rem; flex-wrap: wrap; }
.rp-top-select { border: 1px solid var(--cp-blue); color: var(--cp-blue-dark); background: var(--cp-blue-light); border-radius: 8px; padding: 0.25rem 0.5rem; font-size: 0.85rem; font-weight: 600; }

.rp-product-table { background: #fff; border-radius: 14px; margin: 0 1rem 1rem; overflow: hidden; }
.rp-product-table-head { display: flex; padding: 0.6rem 1rem; font-size: 0.78rem; color: var(--cp-text-muted); border-bottom: 1px solid var(--cp-border); }
.rp-product-row { display: flex; padding: 0.6rem 1rem; font-size: 0.85rem; border-bottom: 1px solid var(--cp-border); align-items: center; }
.rp-product-row:last-child { border-bottom: none; }
.rp-product-name { flex: 2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rp-product-qty { flex: 1; text-align: right; }
.rp-product-revenue { flex: 1.3; text-align: right; font-weight: 700; color: var(--cp-blue-dark); }

.rp-detail-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.7rem; margin: 0 1rem 1.2rem; }
.rp-detail-card {
    background: #fff;
    border-radius: 14px;
    padding: 1rem 0.5rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    color: #1a1a1a;
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    border: none;
}

.rp-detail-card svg { color: var(--cp-blue); }
.rp-detail-card.rp-detail-disabled { color: var(--cp-text-muted); opacity: 0.7; }
.rp-detail-card.rp-detail-disabled svg { color: var(--cp-text-muted); }

/* ---- Báo cáo cuối ngày (Thu/Chi, phương thức thanh toán, bán hàng...) ---- */
.eod-card { background: #fff; border-radius: 14px; margin: 0 1rem 1rem; overflow: hidden; }
.eod-row { display: flex; justify-content: space-between; align-items: center; padding: 0.6rem 1rem; font-size: 0.85rem; border-bottom: 1px solid var(--cp-border); }
.eod-row:last-child { border-bottom: none; }
.eod-row-label { color: var(--cp-text-muted); }
.eod-row-value { font-weight: 700; color: #1a1a1a; }
.eod-row-value.eod-positive { color: var(--cp-blue-dark); }
.eod-row-value.eod-negative { color: var(--cp-red); }

.eod-stat-row { display: flex; padding: 0.9rem 1rem; }
.eod-stat-col { flex: 1; text-align: center; }
.eod-stat-col + .eod-stat-col { border-left: 1px solid var(--cp-border); }
.eod-stat-value { font-weight: 700; font-size: 0.95rem; color: #1a1a1a; }
.eod-stat-label { font-size: 0.78rem; color: var(--cp-text-muted); margin-top: 0.2rem; }

/* ---- Lưới icon (shortcut trên Trang chủ) ---- */
.cp-icon-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.7rem;
    padding: 0 1rem;
    margin-bottom: 1.1rem;
}

.cp-icon-grid-item {
    background: #fff;
    border: 1px solid #eef1f5;
    border-radius: var(--cp-radius-sm);
    padding: 0.6rem 0.3rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    text-decoration: none;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.03);
}

.cp-icon-grid-icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
}

.cp-icon-grid-label {
    font-size: 0.72rem;
    color: #444;
    text-align: center;
    font-weight: 600;
    line-height: 1.15;
}

/* ---- Trạng thái trống (empty state) ---- */
.cp-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1rem;
    color: var(--cp-text-muted);
    text-align: center;
    gap: 0.7rem;
    font-size: 0.9rem;
}

.cp-empty-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #eef1f6;
    color: #9aa4ae;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cp-empty-icon svg {
    width: 26px;
    height: 26px;
}

/* ---- Nút nổi (FAB) ---- */
.cp-fab {
    position: fixed;
    right: 1.1rem;
    bottom: calc(5.4rem + env(safe-area-inset-bottom, 0px));
    background: var(--cp-blue);
    color: #fff;
    border: none;
    border-radius: 26px;
    padding: 0.7rem 1.2rem;
    font-weight: 700;
    font-size: 0.9rem;
    box-shadow: 0 6px 16px rgba(30, 136, 229, 0.45);
    cursor: pointer;
    z-index: 900;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    text-decoration: none;
}

.cp-fab:hover {
    background: var(--cp-blue-dark);
    color: #fff;
}

/* ---- Thanh điều hướng dưới cùng ---- */
.cp-bottom-nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    background: #fff;
    border-top: 1px solid #e6e9ee;
    display: flex;
    align-items: flex-end;
    justify-content: space-around;
    padding: 0.45rem 0.4rem calc(0.45rem + env(safe-area-inset-bottom, 0px));
    z-index: 950;
    max-width: 640px;
    margin: 0 auto;
}

.cp-bottom-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
    color: #9aa4ae;
    text-decoration: none;
    font-size: 0.68rem;
    font-weight: 600;
    flex: 1;
    padding-top: 0.2rem;
}

.cp-bottom-nav-item .cp-bottom-nav-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 21px;
    height: 21px;
    line-height: 1;
}

.cp-bottom-nav-item .cp-bottom-nav-icon svg {
    width: 21px;
    height: 21px;
}

.cp-bottom-nav-item.cp-active {
    color: var(--cp-blue);
}

.cp-bottom-nav-fab {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.1rem;
    text-decoration: none;
    flex: 1;
    margin-top: -1.5rem;
}

.cp-bottom-nav-fab-circle {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--cp-blue) 0%, var(--cp-blue-dark) 100%);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(30, 136, 229, 0.5);
    border: 3px solid #fff;
}

.cp-bottom-nav-fab-circle svg {
    width: 22px;
    height: 22px;
}

.cp-bottom-nav-fab-label {
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--cp-blue);
    margin-top: 0.15rem;
}

@media (max-width: 380px) {
    .cp-icon-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ===== Màn hình "Sửa đơn" toàn màn hình (mở từ bàn đang chơi) ===== */
/* Màn hình "Sửa đơn" trước đây dùng position:fixed;inset:0 để phủ toàn bộ viewport - khiến nó tách rời
   khỏi khung ứng dụng (header/nội dung/thanh điều hướng dưới) và trên màn hình rộng bị co lại thành 1 khối
   nhỏ ở giữa. Giờ đây nó là 1 trang bình thường nằm trong chính khu vực nội dung giữa (.cp-content) - giống
   hệt mọi trang khác (Dashboard, Quản lý bàn...) - không còn phủ kín màn hình theo kiểu overlay nữa. */
.ord-shell {
    display: block;
}

.ord-header {
    background: linear-gradient(160deg, var(--cp-blue, #2563eb) 0%, var(--cp-blue-dark, #1741a6) 100%);
    color: #fff;
    padding: 0.8rem 0.9rem;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    border-radius: 0 0 16px 16px;
    margin-bottom: 0.75rem;
}

.ord-header-back {
    background: rgba(255, 255, 255, 0.16);
    border: none;
    color: #fff;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    cursor: pointer;
}

.ord-header-title {
    flex: 1;
    min-width: 0;
}

.ord-header-title .ord-title-main {
    font-weight: 700;
    font-size: 1.02rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ord-header-title .ord-title-sub {
    font-size: 0.78rem;
    opacity: 0.85;
    margin-top: 0.1rem;
}

.ord-header-actions {
    display: flex;
    gap: 0.4rem;
    flex-shrink: 0;
}

.ord-body {
    padding-bottom: 1rem;
}

.ord-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    padding: 0.85rem 1rem;
    background: #fff;
    border-bottom: 1px solid var(--cp-border, #e5e9f0);
    cursor: pointer;
}

.ord-row-label {
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--cp-text, #16181d);
}

.ord-row-value {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--cp-text-muted, #6b7280);
    font-size: 0.9rem;
}

.ord-table-chip {
    margin: 0.85rem 1rem 0;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    border: 1px solid var(--cp-blue, #2563eb);
    color: var(--cp-blue-dark, #1741a6);
    background: var(--cp-blue-light, #eaf1ff);
    border-radius: 10px;
    padding: 0.5rem 0.8rem;
    font-weight: 700;
    font-size: 0.9rem;
}

.ord-timer {
    margin: 0.6rem 1rem 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.88rem;
    color: var(--cp-text-muted, #6b7280);
}

.ord-timer strong {
    font-variant-numeric: tabular-nums;
    color: var(--cp-green, #17945b);
    font-size: 1rem;
}

.ord-section-label {
    padding: 1rem 1rem 0.4rem;
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--cp-text-muted, #6b7280);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.ord-item-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: #fff;
    border-bottom: 1px solid var(--cp-border, #e5e9f0);
}

.ord-item-thumb {
    width: 52px;
    height: 52px;
    border-radius: 10px;
    background: #eef1f5;
    color: #b0b8c1;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ord-item-body {
    flex: 1;
    min-width: 0;
}

.ord-item-name {
    font-weight: 700;
    font-size: 0.92rem;
    color: var(--cp-text, #16181d);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ord-item-price {
    font-size: 0.85rem;
    color: var(--cp-blue-dark, #1741a6);
    font-weight: 700;
    margin-top: 0.15rem;
}

.ord-qty-stepper {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
    background: var(--cp-bg, #eef1f6);
    border-radius: 10px;
    padding: 0.25rem 0.4rem;
}

.ord-qty-btn {
    width: 26px;
    height: 26px;
    border-radius: 8px;
    border: none;
    background: #fff;
    box-shadow: var(--cp-shadow-sm, 0 1px 2px rgba(16,24,40,.05));
    color: var(--cp-blue, #2563eb);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-weight: 700;
}

.ord-qty-value {
    min-width: 18px;
    text-align: center;
    font-weight: 700;
    font-size: 0.9rem;
}

.ord-add-item-btn {
    margin: 0.85rem 1rem 0;
    width: calc(100% - 2rem);
    border: 1px dashed var(--cp-blue, #2563eb);
    background: var(--cp-blue-light, #eaf1ff);
    color: var(--cp-blue-dark, #1741a6);
    border-radius: 10px;
    padding: 0.65rem;
    font-weight: 700;
    font-size: 0.88rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    cursor: pointer;
}

.ord-pending-banner {
    margin: 0.6rem 1rem 0;
    background: var(--cp-amber-bg, #fef3df);
    border: 1px solid var(--cp-amber, #d98c0a);
    border-radius: 10px;
    padding: 0.6rem 0.8rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    font-size: 0.85rem;
    color: #1a1a1a;
}

.ord-pending-list { margin: 0.5rem 1rem 0; background: #fff; border-radius: 10px; overflow: hidden; border: 1px solid var(--cp-border, #e5e9f0); }
.ord-pending-item { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.5rem 0.8rem; font-size: 0.85rem; border-bottom: 1px solid var(--cp-border, #e5e9f0); }
.ord-pending-item:last-child { border-bottom: none; }
.ord-pending-item-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ord-pending-item-price { color: var(--cp-text-muted); }
.ord-pending-item-remove { border: none; background: none; color: var(--cp-red, #e0392f); font-size: 1.1rem; line-height: 1; cursor: pointer; padding: 0.1rem 0.3rem; }

.ord-total-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    font-size: 0.92rem;
}

.ord-total-row.ord-total-grand {
    background: #fff;
    border-top: 1px solid var(--cp-border, #e5e9f0);
    font-size: 1.05rem;
    font-weight: 800;
}

/* Breakdown khung giờ (VD "17:00 - 18:00: 30.000đ", "18:00 - 20:00: 40.000đ") hiện bên dưới dòng Tiền giờ
   khi phiên chơi kéo dài qua nhiều khung giá khác nhau - thụt nhẹ + chữ nhỏ hơn để phân biệt với dòng tổng. */
.ord-total-row.ord-total-subrow {
    padding: 0.3rem 1rem 0.3rem 1.6rem;
    font-size: 0.8rem;
    color: var(--cp-text-muted, #6b7684);
}

.ord-total-row.ord-total-subrow .ord-total-value {
    font-weight: 600;
    color: var(--cp-text-muted, #6b7684);
}

.ord-total-grand .ord-total-value {
    color: var(--cp-red, #e0392f);
}

.ord-total-value {
    font-weight: 700;
    color: var(--cp-text, #16181d);
}

.ord-bottom-bar {
    background: #fff;
    border-top: 1px solid var(--cp-border, #e5e9f0);
    margin-top: 0.5rem;
    padding: 0.9rem 1rem calc(0.9rem + env(safe-area-inset-bottom, 0px));
    display: flex;
    gap: 0.6rem;
}

.ord-bottom-bar .btn {
    flex: 1;
}

.ord-picker-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 0.6rem;
    padding: 1rem;
}

.ord-picker-item {
    background: #fff;
    border: 1px solid var(--cp-border, #e5e9f0);
    border-radius: 12px;
    padding: 0.7rem 0.5rem;
    text-align: center;
    cursor: pointer;
}

.ord-picker-item:hover {
    border-color: var(--cp-blue, #2563eb);
    box-shadow: var(--cp-shadow-sm, 0 1px 2px rgba(16,24,40,.05));
}

.ord-picker-item-name {
    font-weight: 700;
    font-size: 0.82rem;
    color: var(--cp-text, #16181d);
}

.ord-picker-item-price {
    font-size: 0.78rem;
    color: var(--cp-blue-dark, #1741a6);
    font-weight: 700;
    margin-top: 0.2rem;
}

.ord-picker-tabs {
    display: flex;
    gap: 0.4rem;
    padding: 0.8rem 1rem 0;
    overflow-x: auto;
}

.ord-picker-tab {
    flex-shrink: 0;
    border: 1px solid var(--cp-border, #e5e9f0);
    background: #fff;
    color: var(--cp-text-muted, #6b7280);
    border-radius: 999px;
    padding: 0.4rem 0.85rem;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
}

.ord-picker-tab.ord-picker-tab-active {
    background: var(--cp-blue-light, #eaf1ff);
    border-color: var(--cp-blue, #2563eb);
    color: var(--cp-blue-dark, #1741a6);
}

/* ===== Chế độ mất kết nối (Offline mode) - banner mất mạng + màn hình kết nối lại của Blazor Server ===== */
#offline-banner {
    display: none;
    position: fixed;
    top: 0; left: 0; right: 0;
    background: #e0392f;
    color: #fff;
    text-align: center;
    padding: 0.45rem 0.8rem;
    font-size: 0.82rem;
    font-weight: 600;
    z-index: 10000;
}

#components-reconnect-modal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    z-index: 9999;
    align-items: center;
    justify-content: center;
}
#components-reconnect-modal.components-reconnect-show,
#components-reconnect-modal.components-reconnect-failed,
#components-reconnect-modal.components-reconnect-rejected {
    display: flex;
}
#components-reconnect-modal.components-reconnect-hide { display: none; }

.cp-reconnect-box {
    background: #fff;
    border-radius: 14px;
    padding: 1.6rem 1.8rem;
    text-align: center;
    max-width: 300px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
}
.cp-reconnect-spinner {
    width: 34px; height: 34px;
    border: 3px solid #dbe4ff;
    border-top-color: #2563eb;
    border-radius: 50%;
    margin: 0 auto 0.8rem;
    animation: cp-reconnect-spin 0.8s linear infinite;
}
@keyframes cp-reconnect-spin { to { transform: rotate(360deg); } }
.cp-reconnect-text { font-weight: 600; margin-bottom: 0.8rem; color: #16181d; }
.cp-reconnect-retry { display: none; }
#components-reconnect-modal.components-reconnect-failed .cp-reconnect-retry,
#components-reconnect-modal.components-reconnect-rejected .cp-reconnect-retry {
    display: inline-block;
}
#components-reconnect-modal.components-reconnect-failed .cp-reconnect-spinner,
#components-reconnect-modal.components-reconnect-rejected .cp-reconnect-spinner {
    display: none;
}