:root {
    --bhs-navy: #1f3862;
    --bhs-navy-dark: #142845;
    --bhs-cyan: #09bcca;
    --bhs-cyan-dark: #069aaa;
    --bhs-ink: #172033;
    --bhs-muted: #64748b;
    --bhs-border: #d8e3ee;
    --bhs-fill: #f4f8fb;
    --bhs-soft-cyan: #e8fbfd;
    --bhs-soft-navy: #edf4fb;
    --bhs-success: #137047;
    --bhs-warning: #a86100;
    --bhs-danger: #b42318;
    --bhs-shadow: 0 22px 54px rgba(31, 56, 98, 0.12);
    --bhs-shadow-soft: 0 10px 26px rgba(31, 56, 98, 0.08);
    --lp-blue: var(--bhs-navy);
    --lp-ink: var(--bhs-ink);
    --lp-muted: var(--bhs-muted);
    --lp-border: var(--bhs-border);
    --lp-fill: var(--bhs-fill);
    --lp-green: var(--bhs-success);
}

body {
    background:
        linear-gradient(180deg, rgba(9, 188, 202, 0.07), rgba(255, 255, 255, 0) 260px),
        var(--bhs-fill) !important;
    color: var(--bhs-ink) !important;
}

a {
    color: var(--bhs-navy);
}

a:hover,
a:focus {
    color: var(--bhs-cyan-dark);
}

.bhs-brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.bhs-logo-box {
    width: 68px;
    height: 48px;
    border: 1px solid rgba(9, 188, 202, 0.28);
    border-radius: 8px;
    background: #fff;
    box-shadow: var(--bhs-shadow-soft);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex: 0 0 auto;
}

.bhs-logo-box img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 7px;
}

.bhs-logo-wordmark {
    display: block;
    width: min(260px, 70vw);
    height: auto;
}

.brand-mark {
    width: 54px !important;
    height: 42px !important;
    border: 1px solid rgba(9, 188, 202, 0.28) !important;
    border-radius: 8px !important;
    background: #fff url("../thuonghieu/logobhs.png") center / 38px auto no-repeat !important;
    color: transparent !important;
    box-shadow: var(--bhs-shadow-soft);
    overflow: hidden;
}

.topbar {
    border-bottom: 1px solid rgba(216, 227, 238, 0.95) !important;
    background: rgba(255, 255, 255, 0.94) !important;
    backdrop-filter: blur(14px);
    box-shadow: 0 8px 24px rgba(31, 56, 98, 0.06);
}

.surface,
.redirect-dialog {
    border: 1px solid var(--bhs-border) !important;
    border-radius: 8px !important;
    background: rgba(255, 255, 255, 0.96) !important;
    box-shadow: var(--bhs-shadow-soft);
}

.btn {
    border-radius: 8px;
    font-weight: 700;
    letter-spacing: 0;
}

.btn-primary {
    border-color: var(--bhs-navy) !important;
    background: var(--bhs-navy) !important;
    color: #fff !important;
    box-shadow: 0 10px 20px rgba(31, 56, 98, 0.14);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    border-color: var(--bhs-navy-dark) !important;
    background: var(--bhs-navy-dark) !important;
    color: #fff !important;
}

.btn-outline-primary {
    border-color: var(--bhs-cyan) !important;
    color: var(--bhs-navy) !important;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active {
    border-color: var(--bhs-cyan) !important;
    background: var(--bhs-cyan) !important;
    color: #fff !important;
}

.btn-outline-secondary {
    border-color: var(--bhs-border) !important;
    color: var(--bhs-navy) !important;
}

.btn-outline-secondary:hover,
.btn-outline-secondary:focus {
    border-color: var(--bhs-navy) !important;
    background: var(--bhs-soft-navy) !important;
    color: var(--bhs-navy) !important;
}

.form-control,
.form-select,
.form-check-input {
    border-color: var(--bhs-border);
}

.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    border-color: var(--bhs-cyan);
    box-shadow: 0 0 0 0.22rem rgba(9, 188, 202, 0.16) !important;
}

.form-check-input:checked {
    border-color: var(--bhs-cyan);
    background-color: var(--bhs-cyan);
}

.text-secondary {
    color: var(--bhs-muted) !important;
}

.badge.text-bg-success,
.status-pill {
    background: #e7f8ef !important;
    color: var(--bhs-success) !important;
}

.badge.text-bg-primary {
    background: var(--bhs-navy) !important;
}

.alert-info {
    border-color: rgba(9, 188, 202, 0.24);
    background: var(--bhs-soft-cyan);
    color: var(--bhs-navy);
}

.alert-success {
    border-color: rgba(19, 112, 71, 0.24);
    background: #e7f8ef;
    color: var(--bhs-success);
}

.alert-danger {
    border-color: rgba(180, 35, 24, 0.2);
    background: #fff1f0;
    color: var(--bhs-danger);
}

.nav-pills .nav-link {
    color: var(--bhs-navy) !important;
}

.nav-pills .nav-link:hover,
.nav-pills .nav-link:focus {
    background: var(--bhs-soft-cyan);
}

.nav-pills .nav-link.active {
    background: linear-gradient(90deg, var(--bhs-navy), #24527f) !important;
    color: #fff !important;
}

.table thead th {
    background: var(--bhs-soft-navy) !important;
    color: var(--bhs-navy) !important;
    border-bottom-color: var(--bhs-border) !important;
}

.pagination .page-link {
    border-color: var(--bhs-border);
    color: var(--bhs-navy);
}

/*
    TRANG ĐANG CHỌN — nền navy, chữ TRẮNG.

    ⚠️ `color` là BẮT BUỘC ở đây, không phải trang trí. Khối trên đặt
    `color: var(--bhs-navy)` cho mọi `.page-link`; khối này đổi nền sang chính
    màu đó mà không đổi chữ, nên số trang đang xem thành navy trên navy — vô
    hình hoàn toàn. Đo trên production 23/09/2026: chữ và nền cùng
    `rgb(31, 56, 98)`.
*/
.pagination .active > .page-link,
.page-link.active {
    border-color: var(--bhs-navy);
    background: var(--bhs-navy);
    color: #fff;
}

/*
    HOVER — nền nhạt, chữ giữ navy.

    Bootstrap mặc định tô `background: #e9ecef` khi rê chuột nhưng không đụng
    tới `color`. Trên nền nhạt thì chữ navy vẫn đọc được, nên chỉ cần khai
    tường minh để một lần đổi biến màu sau này không làm hai thứ trôi về cùng
    một giá trị.
*/
.pagination .page-link:hover {
    background: var(--bhs-soft-navy);
    color: var(--bhs-navy);
}

/* Trang đang chọn thì hover KHÔNG được làm mất chữ: giữ nguyên nền navy chữ
   trắng, nếu không rê vào là chữ biến mất đúng như lỗi vừa sửa. */
.pagination .active > .page-link:hover,
.page-link.active:hover {
    background: var(--bhs-navy);
    color: #fff;
}

/* Nút "Trước/Sau" khi hết trang — xám nhạt, và phải KHÁC hẳn trang đang chọn
   để không ai tưởng đó là chỗ bấm được. */
.pagination .disabled > .page-link,
.page-link.disabled {
    color: #9ca3af;
    background: #f8f9fa;
}

.count-badge,
.step-index {
    background: var(--bhs-cyan) !important;
    color: #fff !important;
}

.endpoint {
    background: var(--bhs-soft-cyan) !important;
    color: var(--bhs-navy) !important;
}

.code-block {
    background: #10243f !important;
}

@media (max-width: 575.98px) {
    .bhs-logo-box,
    .brand-mark {
        width: 48px !important;
        height: 38px !important;
    }
}

/* ─────────────────────────────────────────────────────────────────────────
   DANH SÁCH DỊCH VỤ ĐÃ KẾT NỐI
   Dùng chung cho /account (internal) và /tai-khoan (external) — cùng một
   partial `account/partials/connected-services`. Trước đây CSS chỉ khai trong
   external-show.blade.php nên trang internal hiển thị logo không đúng khung.
   ───────────────────────────────────────────────────────────────────────── */
.service-logo {
    width: 42px;
    height: 42px;
    border-radius: 8px;
    background: #f1f5f9;
    color: #475569;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    flex-shrink: 0;
    overflow: hidden;
}

.service-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Cả hàng là vùng bấm được khi dịch vụ có `home_url`. Cần dấu hiệu nhìn thấy
   được, không thì người dùng không biết bấm được: viền và nền đổi khi trỏ vào,
   mũi tên nhích sang phải. */
.dich-vu-hang {
    transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}

a.dich-vu-hang:hover,
a.dich-vu-hang:focus-visible {
    border-color: var(--bhs-cyan, #09bcca) !important;
    background: var(--bhs-soft-cyan, #e8fbfd) !important;
    box-shadow: 0 6px 18px rgba(9, 188, 202, 0.14);
}

/* Viền focus rõ cho bàn phím: đây là đích điều hướng chính của trang. */
a.dich-vu-hang:focus-visible {
    outline: 3px solid var(--bhs-cyan, #09bcca);
    outline-offset: 2px;
}

/* TRÊN MOBILE hai cột xếp dọc, và cột phụ nằm SAU cột chính — người dùng phải
   cuộn qua cả 8 dòng hồ sơ mới thấy danh sách dịch vụ. Đảo thứ tự hiển thị:
   dịch vụ trước, hồ sơ sau. Chỉ đổi thứ tự VẼ, không đổi thứ tự trong DOM nên
   Tab vẫn đi theo trình tự đọc hợp lý.

   Từ 992px trở lên là hai cột thật, thứ tự trả về bình thường. */
@media (max-width: 991.98px) {
    .account-cot > .col-lg-8 {
        order: 2;
    }

    .account-cot > .col-lg-4 {
        order: 1;
    }
}

/* CỘT PHỤ hẹp (4/12): thu gọn khoảng đệm và logo để phần chữ có chỗ.
   Nhãn "Phiên còn hiệu lực" nay nằm ở dòng riêng dưới tên (xem partial
   connected-services) nên không cần bóp nhãn hay ẩn chữ ở đây nữa.
   Chỉ áp trong .col-lg-4 nên trang external (cột rộng) không đổi. */
@media (min-width: 992px) {
    .col-lg-4 .dich-vu-hang {
        padding: .75rem !important;
        gap: .625rem !important;
    }

    .col-lg-4 .service-logo {
        width: 34px;
        height: 34px;
    }
}

/* ⚠️ `min-w-0` KHÔNG PHẢI CLASS CỦA BOOTSTRAP — phải tự định nghĩa ở đây.
   Tên đó là của Tailwind; partial connected-services đã viết nó trong HTML từ
   đầu nhưng chưa bao giờ có CSS nào ứng với, nên nó là một class CHẾT.

   Hậu quả: mọi `text-truncate` bên trong cột chữ đều VÔ TÁC DỤNG. Con của một
   flex container mặc định `min-width: auto`, tức KHÔNG co nhỏ hơn nội dung —
   nên `overflow: hidden` của text-truncate không bao giờ có gì để cắt, và chữ
   dài đẩy tràn cả hàng ra ngoài khung. Đúng lỗi Sir báo 18/09/2026 với mô tả
   dịch vụ Hoome ("Hạ tầng phát triển sự nghiệp của nhà tư vấn bất động sản").

   Hỏng IM LẶNG hoàn toàn: HTML trông đúng, không lỗi nào báo, và chỉ lộ ra khi
   gặp một chuỗi đủ dài trong một cột đủ hẹp.

   ⚠️ Đây là lý do một class tự chế phải được định nghĩa NGAY nơi nó được dùng
   tới, đừng tin là framework có sẵn chỉ vì tên nghe quen. */
.min-w-0 {
    min-width: 0;
}

/* Logo và mũi tên căn theo ĐỈNH hàng, không căn giữa: khi có nhãn phiên và mô
   tả, hàng cao lên và căn giữa đẩy logo tuột xuống ngang với nhãn — trông như
   logo thuộc về nhãn chứ không thuộc về tên dịch vụ. Căn đỉnh thì logo luôn
   nằm ngang tên, bất kể hàng cao bao nhiêu. */
.dich-vu-hang {
    align-items: flex-start !important;
}

.dich-vu-hang > .service-logo,
.dich-vu-hang > span:last-child {
    margin-top: 1px;
}

.dich-vu-mui-ten {
    color: var(--bhs-muted, #64748b);
    transition: transform .15s ease, color .15s ease;
}

a.dich-vu-hang:hover .dich-vu-mui-ten,
a.dich-vu-hang:focus-visible .dich-vu-mui-ten {
    color: var(--bhs-cyan-dark, #069aaa);
    transform: translateX(3px);
}

/* Tôn trọng người tắt hiệu ứng chuyển động trong hệ điều hành. */
@media (prefers-reduced-motion: reduce) {
    .dich-vu-hang,
    .dich-vu-mui-ten {
        transition: none;
    }

    a.dich-vu-hang:hover .dich-vu-mui-ten,
    a.dich-vu-hang:focus-visible .dich-vu-mui-ten {
        transform: none;
    }
}