/* WVEP.Web/wwwroot/css/wvep-nha-cung-cap.css */

/*
   HỒ SƠ NHÀ CUNG CẤP.

   Dựng theo hồ sơ đối tác mà công ty đang dùng: tên đối tác, ngay dưới là hạng sao và
   địa chỉ, rồi tới sức chứa, bộ ảnh, bảng giá và hợp đồng.

   Bốn khối của hệ thống cũ BỎ HẲN khỏi màn này: bốn biểu đồ kế toán, bảng phiếu chi,
   bảng công nợ và bộ lọc theo ngày. Chúng thuộc mục Tài chính và đã có màn riêng.

   Mọi màu ở đây gọi tên biến của bảng nhận diện, không một mã màu nào viết thẳng.
*/

/* ---------- Dòng danh tính dưới tên đối tác ---------- */

.ncc-danh-tinh {
    display: flex;
    flex-wrap: wrap;
    gap: var(--wv-k2) var(--wv-k4);
    align-items: center;
    margin: var(--wv-k1) 0 0;
    color: var(--wv-chu-mo);
    font-size: var(--wv-cd-13);
}

.ncc-sao {
    display: inline-flex;
    gap: 1px;
    align-items: center;
}

/*
   Ngôi sao lấy từ bộ biểu tượng tự vẽ nằm ngay trong trang, KHÔNG tải thư viện biểu
   tượng nào từ mạng.

   Cả bộ biểu tượng vẽ bằng nét chứ không tô ruột, để đổi màu chỉ cần đổi color. Riêng
   ngôi sao xếp hạng thì tô đầy, vì một ngôi sao rỗng ruột đọc ra là sao CHƯA đạt, đúng
   ngược nghĩa với điều nó đang nói.
*/
.ncc-sao-mot {
    width: .95rem;
    height: .95rem;
    color: var(--wv-nhan-dam);
    fill: currentColor;
}

/*
   HẠNG SAO Ở DANH SÁCH cũng phải tô đầy như ở hồ sơ.

   Khối này trước đây chỉ có tên lớp mà không có luật nào, nên ngôi sao rơi về nét mặc
   định của cả bộ biểu tượng: rỗng ruột, nét mảnh một phẩy sáu, và lấy màu theo chữ trong
   ô bảng tức là màu xám. Ba thứ ấy cộng lại thành một hình gần như không thấy, hồ sơ mở
   ra thì năm sao vàng chóe còn ngoài danh sách thì trông như trống trơn.

   Nhỏ hơn ở hồ sơ một chút vì nó nằm dưới tên trong ô bảng, nhưng cùng màu cùng cách tô.
*/
.ncc-sao-nho .wv-bt {
    width: .8125rem;
    height: .8125rem;
    color: var(--wv-nhan-dam);
    fill: currentColor;
    stroke-width: 1;
}

.ncc-ma {
    font-variant-numeric: tabular-nums;
}

/* Tên đầy đủ, mã số thuế, tài khoản nhận tiền ngay dưới dòng danh tính (FIX PPM, 08/10/2026). */
.ncc-ten-day-du,
.ncc-thanh-toan {
    margin: var(--wv-k1) 0 0;
    color: var(--wv-chu-mo);
    font-size: var(--wv-cd-14);
}

.ncc-thanh-toan {
    display: flex;
    flex-wrap: wrap;
    gap: var(--wv-k1) var(--wv-k4);
}

.ncc-ten-day-du b,
.ncc-thanh-toan b {
    color: var(--wv-chu);
    font-weight: 600;
}

.ncc-thanh-toan em {
    color: var(--wv-xam-700);
    font-style: italic;
}

.ncc-con-chay,
.ncc-da-ngung {
    padding: .125rem var(--wv-k2);
    border: 1px solid transparent;
    border-radius: var(--wv-bo-tron);
    font-size: var(--wv-cd-12);
    font-weight: 600;
    white-space: nowrap;
}

.ncc-con-chay {
    background: var(--wv-tot-nen);
    border-color: var(--wv-tot-vien);
    color: var(--wv-tot-chu);
}

.ncc-da-ngung {
    background: var(--wv-xam-100);
    border-color: var(--wv-vien);
    color: var(--wv-xam-700);
}

.ncc-dia-chi {
    display: flex;
    gap: var(--wv-k2);
    align-items: baseline;
    margin: var(--wv-k1) 0 0;
    color: var(--wv-chu-mo);
    font-size: var(--wv-cd-14);
}

.ncc-dia-chi .wv-bt {
    flex: 0 0 auto;
    color: var(--wv-chinh);
}

/* ---------- Bộ ảnh ----------
   Lưới ảnh cũ đã thay bằng dải ảnh trượt ở khối cuối tệp này: lưới bày mười tấm cùng
   lúc, mỗi tấm bé bằng con tem, mà người mở hồ sơ khách sạn ra là để NHÌN chỗ đó chứ
   không phải để đếm xem có bao nhiêu tấm. */

/* ---------- Ghi chú nội bộ ---------- */

.ncc-ghi-chu {
    margin: var(--wv-k1) 0 0;
    padding: var(--wv-k2) var(--wv-k3);
    background: var(--wv-cam-50);
    border-left: 3px solid var(--wv-nhan);
    border-radius: var(--wv-bo-1);
    white-space: pre-wrap;
}

/* ---------- Ảnh đại diện ngoài danh sách ---------- */

/*
   Cột ảnh rộng bằng đúng ô ảnh cộng hai bên đệm của ô bảng, không hơn. Trước để 4,5rem
   trong khi ô ảnh chỉ 3,5rem, nên ảnh nằm lọt thỏm giữa một cột rộng hơn nó và trông
   như bị thu nhỏ. Nay ảnh nở ra bằng chiều cao một hàng có hai dòng chữ, tức là cao
   ngang khối tên cộng hạng sao bên cạnh, để hàng nhìn thẳng hàng.
*/
.ncc-c-anh {
    width: 5.5rem;
    padding-right: 0;
}

/*
   Ô ảnh khai cứng cả rộng lẫn cao và cắt ảnh theo kiểu phủ kín, nên ảnh ngang ảnh dọc
   ảnh vuông vào đây đều ra một cỡ. Không khai cứng thì mỗi dòng một chiều cao và cả
   bảng nhấp nhô.
*/
.ncc-o-anh {
    display: block;
    width: 4.75rem;
    height: 4.75rem;
    overflow: hidden;
    border: 1px solid var(--wv-vien);
    border-radius: var(--wv-bo-2);
    background: var(--wv-xam-50);
}

.ncc-o-anh img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Chưa có ảnh thì một ô xám mang chữ cái đầu, để hàng không bị so le. */
.ncc-o-anh-trong {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--wv-chu-nhat);
    font-size: var(--wv-cd-16);
    font-weight: 700;
}

/* ---------- Dải ảnh trong hồ sơ ---------- */

.ncc-dai-anh {
    display: flex;
    flex-direction: column;
    gap: var(--wv-k3);
}

.ncc-anh-lon {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border: 1px solid var(--wv-vien);
    border-radius: var(--wv-bo-3);
    background: var(--wv-xam-100);
}

/*
   Mọi khung ảnh nằm chồng đúng một chỗ, chỉ khung đang xem là hiện. Xếp chồng chứ không
   trượt ngang, vì trượt ngang thì phải tính toạ độ theo bề rộng thật, mà bề rộng ấy đổi
   theo màn hình và đổi cả khi thanh dọc gập lại.
*/
.ncc-anh-khung {
    position: absolute;
    inset: 0;
    margin: 0;
    opacity: 0;
    transition: opacity .18s ease;
    pointer-events: none;
}

.ncc-anh-khung.ncc-anh-dang-xem {
    opacity: 1;
    pointer-events: auto;
}

.ncc-anh-khung img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ncc-anh-khung figcaption {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    padding: var(--wv-k4) var(--wv-k3) var(--wv-k2);
    background: linear-gradient(to top, rgba(0, 0, 0, .62), transparent);
    color: #ffffff;
    font-size: var(--wv-cd-12);
}

.ncc-anh-nut {
    position: absolute;
    top: 50%;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    transform: translateY(-50%);
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .88);
    color: var(--wv-chu);
    cursor: pointer;
}

.ncc-anh-nut:hover {
    background: #ffffff;
}

.ncc-anh-lui { left: var(--wv-k3); }
.ncc-anh-toi { right: var(--wv-k3); }

.ncc-anh-dem {
    position: absolute;
    top: var(--wv-k3);
    right: var(--wv-k3);
    z-index: 2;
    padding: .125rem var(--wv-k2);
    border-radius: var(--wv-bo-1);
    background: rgba(0, 0, 0, .55);
    color: #ffffff;
    font-size: var(--wv-cd-11);
}

/* Dải ảnh nhỏ cuộn ngang, không xuống dòng: xuống dòng thì bộ mười ảnh đẩy phần dưới
   trang đi mất một khúc, mà dải ảnh nhỏ chỉ là chỗ chọn chứ không phải chỗ xem. */
.ncc-anh-nho {
    display: flex;
    gap: var(--wv-k2);
    overflow-x: auto;
    padding-bottom: var(--wv-k1);
}

.ncc-anh-nho-mot {
    flex: 0 0 auto;
    width: 4.5rem;
    height: 3.25rem;
    padding: 0;
    overflow: hidden;
    border: 2px solid transparent;
    border-radius: var(--wv-bo-2);
    background: none;
    cursor: pointer;
}

.ncc-anh-nho-mot img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ncc-anh-nho-dang {
    border-color: var(--wv-chinh);
}

/* ---------- Ảnh trong biểu mẫu sửa ---------- */

.ncc-anh-sua {
    display: flex;
    flex-wrap: wrap;
    gap: var(--wv-k3);
    margin-bottom: var(--wv-k4);
}

.ncc-anh-mot {
    position: relative;
    width: 10rem;
    margin: 0;
}

.ncc-anh-mot img {
    display: block;
    width: 100%;
    height: 7rem;
    object-fit: cover;
    border: 1px solid var(--wv-vien);
    border-radius: var(--wv-bo-2);
}

.ncc-anh-dai-dien img {
    border-color: var(--wv-chinh);
    border-width: 2px;
}

.ncc-nhan-dai-dien {
    position: absolute;
    top: var(--wv-k1);
    left: var(--wv-k1);
    padding: .0625rem var(--wv-k2);
    border-radius: var(--wv-bo-1);
    background: var(--wv-chinh);
    color: #ffffff;
    font-size: var(--wv-cd-11);
}

.ncc-anh-mot figcaption {
    margin-top: var(--wv-k1);
    font-size: var(--wv-cd-12);
}

@media (max-width: 760px) {
    /* Màn hẹp thì ảnh nhỏ lại, vì bảng này đã phải cuộn ngang rồi. */
    .ncc-c-anh {
        width: 4rem;
    }

    .ncc-o-anh {
        width: 3.5rem;
        height: 3.5rem;
    }

    .ncc-anh-nut {
        width: 2rem;
        height: 2rem;
    }

    .ncc-anh-mot {
        width: calc(50% - var(--wv-k2));
    }
}

/* ---------- Ưu tiên và phạm vi, lượt PPM ---------- */

/*
   Viết HAI LỚP LIỀN NHAU để độ nặng thành hai, đúng cách quy tắc 11 đã chốt sau lần nút
   Sửa trong bảng mang hai lớp cùng độ nặng và cái khai sau thắng. Như vậy kết quả không
   còn phụ thuộc thứ tự nạp tệp nữa.

   Khai ở ĐÚNG MỘT tệp, là tệp này. Quy tắc 30 nhắc thêm: bộ chọn ghép KHÔNG tự miễn nhiễm
   với bẫy thứ tự nạp, hai tệp khai cùng một bộ chọn ghép thì vẫn cùng độ nặng.

   Ba mức ưu tiên dùng ba mức đậm nhạt của cùng một dải màu chứ không ba màu khác nhau: đây
   là một thang bậc, ba màu rời rạc thì mắt phải học thuộc chứ không đọc ra được thứ tự.
*/

.wv-trang-thai.wv-uu-tien-1 {
    background: var(--wv-tot-nen);
    border-color: var(--wv-tot-vien);
    color: var(--wv-tot-chu);
}

.wv-trang-thai.wv-uu-tien-2 {
    background: var(--wv-tin-nen);
    border-color: var(--wv-tin-vien);
    color: var(--wv-tin-chu);
}

.wv-trang-thai.wv-uu-tien-3 {
    background: var(--wv-xam-100);
    border-color: var(--wv-vien);
    color: var(--wv-xam-700);
}

/* Hai nhãn phạm vi trên hồ sơ. Ngoài danh sách thì phạm vi đi bằng lớp chữ phụ chứ không
   bằng chip, vì một ô bảng hai chip là hai khối màu cạnh nhau trong một cột 130 điểm ảnh. */

.wv-trang-thai.wv-pham-vi-1 {
    background: var(--wv-xam-100);
    border-color: var(--wv-vien);
    color: var(--wv-chu-mo);
}

.wv-trang-thai.wv-pham-vi-2 {
    background: var(--wv-nhac-nen);
    border-color: var(--wv-nhac-vien);
    color: var(--wv-nhac-chu);
}

/* Nhãn phạm vi trong ô Địa bàn của bảng danh sách, nằm dưới tên tỉnh. */
.wv-phu.ncc-pham-vi {
    white-space: nowrap;
}

/*
   Câu nhắc lệch phạm vi trên biểu mẫu. Đè màu của dòng gợi ý thường sang màu nhắc, giữ
   nguyên cỡ chữ và khoảng cách để nó vẫn đọc như một dòng gợi ý chứ không như một lỗi:
   hồ sơ vẫn lưu được, đây chỉ là lời mời soát lại.
*/
.wv-goi-y.ncc-nhac-lech {
    color: var(--wv-nhac-chu);
    font-weight: 600;
}

/* Danh sách ảnh không vào được trên hồ sơ. Mỗi lỗi một dòng, thụt vào cho dễ đếm. */
.ncc-loi-anh {
    margin: var(--wv-k1) 0 0;
    padding-left: var(--wv-k4);
}

.ncc-loi-anh li {
    margin-top: var(--wv-k1);
}

/* ==================================================================
   DANH SÁCH LINK LIÊN QUAN trên màn hồ sơ

   Lớp riêng chứ không mượn .ncc-loi-anh dù hai thứ cùng là một danh sách thụt lề. Lớp kia
   nằm trong khung lỗi và sẽ đổi theo khung lỗi; danh sách này nằm trong một thẻ nội dung
   bình thường, và ngày ai đó sửa lề của khung lỗi thì nó không có lý do gì đổi theo.

   Ghi chú xuống dòng riêng dưới đường link, không nằm cùng hàng: tên gọi của một đường link
   đã dài sẵn, và ở màn hẹp thì hai thứ trên một hàng đẩy nhau vỡ dòng ở chỗ không ai chọn.
   ================================================================== */
.ncc-ds-link {
    margin: 0 0 var(--wv-k2);
    padding-left: var(--wv-k4);
}

.ncc-ds-link li {
    margin-top: var(--wv-k1);
}

.ncc-ds-link .wv-goi-y {
    display: block;
}

/* Nut them dong link.
   
   Lop rieng chu KHONG mang wv-cach: lop ay la dau phan cach giua hai duong dan va no dat
   color: var(--wv-xam-300), tuc mot mau xam nhat co y de lam dau ngan. Dat no len mot NUT
   thi chu nut thanh xam nhat tren nen nhat, va bo do tuong phan bat duoc ty le 1.67 tren
   nguong 3 ngay trong luot nghiem thu dau tien.
   
   Chi can day nut ve mep trai, dung keo dai het hang, y het .ncc-link-them ben tren. */
.ncc-lien-ket-them {
    align-self: flex-start;
    margin-top: var(--wv-k2);
}

/* ==================================================================
   Ô DÁN ĐƯỜNG LINK ẢNH, dạng thêm từng ô có xem trước
   ==================================================================

   Mỗi ô là một hàng: khung xem trước vuông ở trái, ô nhập link co giãn ở giữa, nút bỏ ở
   phải. Khung xem trước giữ đúng một hình vuông để hàng nào cũng cao bằng nhau, ảnh dán
   vào cắt theo tâm cho khỏi méo. Cả khối chạy được ở khổ hẹp nhờ ô nhập tự co.
*/

.ncc-link-anh {
    display: flex;
    flex-direction: column;
    gap: var(--wv-k3);
}

.ncc-link-ds {
    display: flex;
    flex-direction: column;
    gap: var(--wv-k2);
}

.ncc-link-o {
    display: flex;
    align-items: center;
    gap: var(--wv-k3);
}

/* Khung xem trước vuông, cạnh 3rem. Nền xám nhạt để lúc chưa có ảnh vẫn thấy khung. */
.ncc-link-xem {
    flex: 0 0 auto;
    width: 3rem;
    height: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 1px solid var(--wv-vien);
    border-radius: var(--wv-bo-2);
    background: var(--wv-xam-100);
}

.ncc-link-xem img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Dòng chữ chờ trong khung, cỡ nhỏ, canh giữa, xuống dòng được để câu dài không tràn. */
.ncc-link-cho {
    font-size: var(--wv-cd-11);
    color: var(--wv-chu-mo);
    text-align: center;
    padding: 0 2px;
    line-height: 1.2;
}

.ncc-link-nhap {
    flex: 1 1 auto;
    min-width: 0;
}

/* Nút bỏ một ô: chỉ là biểu tượng, nền trong, đỏ nhạt khi rê để người dùng biết nó xóa. */
.ncc-link-xoa {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: 0;
    border-radius: var(--wv-bo-2);
    background: transparent;
    color: var(--wv-chu-mo);
    cursor: pointer;
}

.ncc-link-xoa:hover {
    background: var(--wv-tin-nen);
    color: var(--wv-tin);
}

.ncc-link-xoa svg {
    width: 1.1rem;
    height: 1.1rem;
}

/* Ô đang có link không xem trước được: viền và chữ chờ chuyển màu nhắc, nhưng KHÔNG chặn
   người dùng bấm Lưu, vì máy chủ mới là chỗ phán một link có tải được hay không. Xem
   trước hỏng chỉ nghĩa là trình duyệt người nhập không tải nổi để nhìn, có khi do trang
   ảnh chặn nhúng chéo, chứ máy chủ vẫn tải được. */
.ncc-link-loi .ncc-link-xem {
    border-color: var(--wv-tin-vien);
    background: var(--wv-tin-nen);
}

.ncc-link-loi .ncc-link-cho {
    color: var(--wv-tin);
}

.ncc-link-them {
    align-self: flex-start;
}

.ncc-link-them:disabled {
    opacity: .5;
    cursor: not-allowed;
}


/* ---------- Thanh thẻ loại dịch vụ và khoảng ngày có giá, 9 tháng 9 năm 2026 ---------- */

/*
   Thanh thẻ đứng NGAY TRÊN biểu mẫu lọc và dính liền với nó về mặt thị giác: hai khối là
   một bộ điều khiển duy nhất, chỉ khác nhau ở chỗ thẻ đổi ngay còn ô lọc chờ bấm Lọc.
   Tách chúng ra bằng một khoảng trắng lớn là mời người đọc hiểu thành hai việc rời nhau.
*/
.ncc-thanh-the {
    margin-bottom: 0;
    border-bottom: 0;
    flex-wrap: wrap;
}

/*
   Con số trên thẻ mờ hơn tên loại, và đó là chủ ý: người ta quét mắt tìm CHỮ "Khách sạn",
   con số chỉ để cân nhắc sau khi đã thấy tên. Cùng cỡ cùng đậm thì hai thứ tranh nhau.
*/
.ncc-so-the {
    margin-left: var(--wv-k1);
    padding: 0 var(--wv-k1);
    border-radius: 999px;
    background: var(--wv-xam-100);
    color: var(--wv-chu-mo);
    font-size: var(--wv-cd-11);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}

.wv-tab-dang-o .ncc-so-the {
    background: var(--wv-chinh-nen);
    color: var(--wv-chinh-dam);
}

/* Hai ô ngày đứng cạnh nhau trong một ô lọc, nên ô lọc ấy cần gấp đôi bề ngang. */
.wv-loc-doi {
    flex: 1 1 22rem;
}

.ncc-khoang-ngay {
    display: flex;
    align-items: center;
    gap: var(--wv-k2);
}

.ncc-khoang-ngay .wv-o-nhap {
    min-width: 0;
    flex: 1 1 0;
}

.ncc-den {
    flex: 0 0 auto;
    color: var(--wv-chu-mo);
    font-size: var(--wv-cd-12);
}


/* ---------- Công bố hồ sơ: chip, ô tích chọn, thanh việc, 10 tháng 9 năm 2026 ---------- */

/*
   CHIP BẢN NHÁP dùng màu NHẮC chứ không dùng màu lỗi. Một hồ sơ chưa công bố không sai, nó
   là việc còn phải làm; tô đỏ là biến cả một danh sách đang chờ duyệt thành một màn hình
   báo động.
*/
.ncc-chip-nhap {
    background: var(--wv-nhac-nen);
    border-color: var(--wv-nhac-vien);
    color: var(--wv-nhac-chu);
}

.ncc-c-tich {
    width: 2.5rem;
    text-align: center;
}

/*
   Thanh việc DÍNH ĐỈNH khi cuộn: người vận hành tích chọn dòng thứ mười tám của trang rồi
   phải cuộn ngược lên đầu bảng mới thấy nút, mà lúc ấy họ không còn nhìn thấy thứ mình vừa
   chọn nữa.
*/
.ncc-thanh-viec {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--wv-k3);
    margin-bottom: var(--wv-k3);
    padding: var(--wv-k2) var(--wv-k3);
    border: 1px solid var(--wv-vien-nhat);
    border-radius: var(--wv-bo-2);
    background: var(--wv-nen-mo);
}

.ncc-chon-het {
    display: inline-flex;
    align-items: center;
    gap: var(--wv-k2);
    cursor: pointer;
    font-size: var(--wv-cd-13);
}

.ncc-da-chon {
    color: var(--wv-chu-mo);
    font-size: var(--wv-cd-12);
    font-variant-numeric: tabular-nums;
}

/* Dấu người công bố nằm ngay dưới tên đối tác, chữ nhỏ và mờ: nó là thứ để tra khi cần,
   không phải thứ tranh chỗ với tên và địa chỉ. */
.ncc-dau-cong-bo {
    margin: var(--wv-k1) 0 0;
    color: var(--wv-chu-mo);
    font-size: var(--wv-cd-12);
}

/* Biểu mẫu một nút nằm lẫn trong hàng nút: bỏ mọi thứ làm nó chiếm chỗ như một khối riêng. */
.wv-nut-lien {
    display: inline;
    margin: 0;
}


/* Danh sách tài liệu đính kèm của hồ sơ đối tác (10/09/2026) đã dời sang wvep-thanh-phan.css thành
   bộ lớp wv-tep-* ngày 14/10/2026, dùng chung với hồ sơ tour. */