/* WVEP.Web/wwwroot/css/wvep.css */

:root {
    --wv-nen: #f3f5f7;
    --wv-tam: #ffffff;
    --wv-vien: #dde2e7;
    --wv-chu: #1f2a33;
    --wv-chu-mo: #6b7783;
    --wv-chinh: #14624c;
    --wv-chinh-dam: #0e4838;
    --wv-canh: #123a30;
    --wv-canh-chu: #cfe0d9;
    --wv-canh-chon: #1c5d4a;
    --wv-do: #b3261e;
    --wv-vang: #8a6100;
    --wv-cao-thanh: 54px;
    --wv-rong-canh: 232px;
}

html, body {
    height: 100%;
}

body {
    margin: 0;
    background: var(--wv-nen);
    color: var(--wv-chu);
    font-family: "Segoe UI", Tahoma, Arial, sans-serif;
    font-size: 14px;
}

a {
    color: var(--wv-chinh);
    text-decoration: none;
}

a:hover {
    color: var(--wv-chinh-dam);
    text-decoration: underline;
}

/* Bố cục chung */

.wv-vo {
    min-height: 100vh;
    padding-left: var(--wv-rong-canh);
}

.wv-thanh-tren {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--wv-cao-thanh);
    z-index: 30;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 0 18px;
    background: var(--wv-chinh);
    color: #ffffff;
}

.wv-ten-he-thong {
    width: calc(var(--wv-rong-canh) - 36px);
    font-size: 19px;
    font-weight: 700;
    letter-spacing: 1px;
    color: #ffffff;
}

.wv-ten-he-thong:hover {
    color: #ffffff;
    text-decoration: none;
}

.wv-chi-nhanh {
    font-size: 13px;
    padding: 3px 10px;
    border: 1px solid rgba(255, 255, 255, .35);
    border-radius: 3px;
    white-space: nowrap;
}

.wv-day {
    flex: 1;
}

.wv-nguoi-dung {
    font-size: 13px;
    text-align: right;
    line-height: 1.25;
}

.wv-nguoi-dung strong {
    display: block;
    font-weight: 600;
}

.wv-nguoi-dung span {
    color: rgba(255, 255, 255, .75);
}

.wv-nut-thoat {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, .5);
    color: #ffffff;
    border-radius: 3px;
    padding: 5px 12px;
    font-size: 13px;
    cursor: pointer;
}

.wv-nut-thoat:hover {
    background: rgba(255, 255, 255, .14);
}

.wv-canh {
    position: fixed;
    top: var(--wv-cao-thanh);
    bottom: 0;
    left: 0;
    width: var(--wv-rong-canh);
    z-index: 20;
    overflow-y: auto;
    background: var(--wv-canh);
    padding: 12px 0 24px;
}

.wv-nhom {
    padding: 14px 18px 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.1px;
    text-transform: uppercase;
    color: rgba(207, 224, 217, .6);
}

.wv-canh a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 9px 18px;
    color: var(--wv-canh-chu);
    border-left: 3px solid transparent;
}

.wv-canh a:hover {
    background: rgba(255, 255, 255, .06);
    color: #ffffff;
    text-decoration: none;
}

.wv-canh a.wv-dang-o {
    background: var(--wv-canh-chon);
    border-left-color: #7fd0b3;
    color: #ffffff;
    font-weight: 600;
}

.wv-canh a.wv-chua-dung {
    cursor: default;
    color: rgba(207, 224, 217, .62);
}

.wv-canh a.wv-chua-dung:hover {
    background: transparent;
    color: rgba(207, 224, 217, .62);
    text-decoration: none;
}

.wv-sap-co {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .4px;
    padding: 1px 6px;
    border-radius: 8px;
    background: rgba(255, 255, 255, .12);
    color: rgba(255, 255, 255, .7);
    white-space: nowrap;
}

.wv-than {
    padding: calc(var(--wv-cao-thanh) + 20px) 24px 32px;
    max-width: 1280px;
}

.wv-tieu-de {
    margin: 0 0 4px;
    font-size: 22px;
    font-weight: 600;
}

.wv-mo-ta {
    margin: 0 0 20px;
    color: var(--wv-chu-mo);
}

/* Thẻ nội dung */

.wv-the {
    background: var(--wv-tam);
    border: 1px solid var(--wv-vien);
    border-radius: 5px;
    margin-bottom: 18px;
}

.wv-the-dau {
    padding: 12px 16px;
    border-bottom: 1px solid var(--wv-vien);
    font-weight: 600;
}

.wv-the-than {
    padding: 16px;
}

.wv-luoi {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 14px;
    margin-bottom: 18px;
}

.wv-o-tom-tat {
    background: var(--wv-tam);
    border: 1px solid var(--wv-vien);
    border-left: 4px solid var(--wv-chinh);
    border-radius: 5px;
    padding: 14px 16px;
}

.wv-o-tom-tat .wv-nhan {
    display: block;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .6px;
    color: var(--wv-chu-mo);
    margin-bottom: 5px;
}

.wv-o-tom-tat .wv-gia-tri {
    font-size: 17px;
    font-weight: 600;
}

/* Bảng */

.wv-bang {
    width: 100%;
    border-collapse: collapse;
}

.wv-bang th,
.wv-bang td {
    padding: 8px 12px;
    border-bottom: 1px solid var(--wv-vien);
    text-align: left;
    vertical-align: top;
}

.wv-bang thead th {
    background: #eef2f4;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--wv-chu-mo);
}

.wv-bang tbody tr:hover {
    background: #f7f9fa;
}

.wv-ma {
    font-family: Consolas, "Courier New", monospace;
    font-size: 13px;
    color: var(--wv-chinh-dam);
}

.wv-the-module {
    display: inline-block;
    padding: 2px 9px;
    border-radius: 10px;
    font-size: 12px;
    background: #e6efec;
    color: var(--wv-chinh-dam);
    border: 1px solid #cfe0d9;
}

.wv-the-vai {
    display: inline-block;
    padding: 2px 9px;
    margin-right: 5px;
    border-radius: 10px;
    font-size: 12px;
    background: #fff3d6;
    color: var(--wv-vang);
    border: 1px solid #f0dfb0;
}

/* Biểu mẫu */

.wv-hang {
    margin-bottom: 14px;
}

.wv-hang label {
    display: block;
    margin-bottom: 5px;
    font-weight: 600;
    font-size: 13px;
}

.wv-o-nhap {
    width: 100%;
    padding: 9px 11px;
    border: 1px solid var(--wv-vien);
    border-radius: 4px;
    font-size: 14px;
    background: #ffffff;
    color: var(--wv-chu);
}

.wv-o-nhap:focus {
    outline: none;
    border-color: var(--wv-chinh);
    box-shadow: 0 0 0 3px rgba(20, 98, 76, .12);
}

.wv-nho {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    margin-bottom: 16px;
}

.wv-nut {
    display: inline-block;
    padding: 9px 18px;
    border: 1px solid var(--wv-chinh);
    border-radius: 4px;
    background: var(--wv-chinh);
    color: #ffffff;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.wv-nut:hover {
    background: var(--wv-chinh-dam);
    border-color: var(--wv-chinh-dam);
    color: #ffffff;
    text-decoration: none;
}

.wv-nut-rong {
    width: 100%;
}

.wv-nut-phu {
    background: #ffffff;
    color: var(--wv-chinh);
}

.wv-nut-phu:hover {
    background: #eef4f2;
    color: var(--wv-chinh-dam);
}

.wv-loi {
    padding: 10px 13px;
    margin-bottom: 14px;
    border: 1px solid #f1c4c1;
    border-left: 4px solid var(--wv-do);
    border-radius: 4px;
    background: #fdf1f0;
    color: var(--wv-do);
    font-size: 13px;
}

/* Trang không có khung, dùng cho đăng nhập và báo thiếu quyền */

.wv-trong {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px 16px;
    background: linear-gradient(160deg, #123a30 0%, #14624c 55%, #1c7a5f 100%);
}

.wv-hop {
    width: 100%;
    max-width: 400px;
    background: var(--wv-tam);
    border-radius: 7px;
    padding: 30px 28px;
    box-shadow: 0 14px 40px rgba(0, 0, 0, .28);
}

.wv-hop-rong {
    max-width: 560px;
    text-align: center;
}

.wv-hop h1 {
    margin: 0 0 4px;
    font-size: 25px;
    font-weight: 700;
    letter-spacing: 1px;
    color: var(--wv-chinh);
}

.wv-hop .wv-phu-de {
    margin: 0 0 22px;
    color: var(--wv-chu-mo);
    font-size: 13px;
}

/* Nút ba gạch, chỉ hiện trên màn hẹp */
.wv-nut-menu {
    display: none;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 34px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 5px;
    background: transparent;
    color: #ffffff;
    cursor: pointer;
    flex: 0 0 auto;
}

.wv-nut-menu:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 2px;
}

.wv-nut-menu span {
    display: block;
    width: 18px;
    height: 2px;
    background: #ffffff;
    box-shadow: 0 -6px 0 #ffffff, 0 6px 0 #ffffff;
}

/* Nền mờ phía sau ngăn điều hướng khi mở trên màn hẹp */
.wv-nen-mo {
    position: fixed;
    top: var(--wv-cao-thanh);
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 15;
    background: rgba(0, 0, 0, 0.42);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}

.wv-nen-mo.wv-hien {
    opacity: 1;
    visibility: visible;
}

/* Máy tính bảng và điện thoại: ngăn điều hướng ẩn đi, trượt vào khi bấm nút ba gạch.
   Trước đây chỗ này đặt thanh bên thành position static, nên trên điện thoại nó đổ dọc
   chiếm trọn màn hình và đẩy nội dung xuống tận đáy. */
@media (max-width: 900px) {
    .wv-vo {
        padding-left: 0;
    }

    .wv-canh {
        width: 264px;
        max-width: 82vw;
        transform: translateX(-100%);
        transition: transform 0.22s ease;
        box-shadow: 0 0 24px rgba(0, 0, 0, 0.3);
    }

    .wv-canh.wv-mo {
        transform: translateX(0);
    }

    .wv-than {
        padding: calc(var(--wv-cao-thanh) + 16px) 14px 28px;
        max-width: 100%;
    }

    .wv-ten-he-thong {
        width: auto;
        font-size: 17px;
    }

    .wv-nut-menu {
        display: inline-flex;
    }

    .wv-thanh-tren {
        gap: 10px;
        padding: 0 12px;
    }

    .wv-chi-nhanh {
        max-width: 42vw;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .wv-nguoi-dung {
        display: none;
    }

    .wv-dau-trang {
        flex-direction: column;
        align-items: stretch;
    }

    .wv-luoi {
        grid-template-columns: 1fr;
    }
}

/* Điện thoại hẹp */
@media (max-width: 560px) {
    .wv-than {
        padding-left: 10px;
        padding-right: 10px;
    }

    .wv-chi-nhanh {
        display: none;
    }

    .wv-tieu-de {
        font-size: 19px;
    }

    .wv-day {
        gap: 6px;
    }

    .wv-nut-thoat,
    .wv-dau-nut > * {
        font-size: 12px;
        padding: 6px 9px;
        white-space: nowrap;
    }

    .wv-dau-nut {
        flex-wrap: wrap;
    }
}

/* Chữ trong nút không bao giờ được tràn ra ngoài */
.wv-nut-thoat,
button,
.btn {
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Màn hình nhà cung cấp */

.wv-dau-trang {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 6px;
}

.wv-dau-nut {
    display: flex;
    gap: 8px;
}

.wv-bao {
    padding: 10px 13px;
    margin-bottom: 14px;
    border: 1px solid #bfe0d3;
    border-left: 4px solid var(--wv-chinh);
    border-radius: 4px;
    background: #eef7f3;
    color: var(--wv-chinh-dam);
    font-size: 13px;
}

.wv-loc {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px;
    padding: 14px 16px;
    margin-bottom: 16px;
    background: var(--wv-tam);
    border: 1px solid var(--wv-vien);
    border-radius: 6px;
}

.wv-loc-o {
    min-width: 190px;
}

.wv-loc-rong {
    flex: 1 1 280px;
}

.wv-loc-o label {
    display: block;
    margin-bottom: 5px;
    font-weight: 600;
    font-size: 13px;
}

.wv-loc-nut {
    display: flex;
    gap: 8px;
}

.wv-the-dau-phu {
    margin-left: 8px;
    font-weight: 400;
    color: var(--wv-chu-mo);
}

.wv-phu {
    font-size: 12px;
    color: var(--wv-chu-mo);
}

.wv-cach {
    margin: 0 6px;
    color: var(--wv-vien);
}

.wv-giua {
    text-align: center;
}

.wv-trang-thai {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 12px;
    white-space: nowrap;
}

.wv-dang-chay {
    background: #e6f3ee;
    color: var(--wv-chinh-dam);
}

.wv-da-ngung {
    background: #f1f3f5;
    color: var(--wv-chu-mo);
}

.wv-nut-chu {
    padding: 0;
    border: none;
    background: none;
    color: var(--wv-chinh);
    font-size: 14px;
    cursor: pointer;
}

.wv-nut-chu:hover {
    color: var(--wv-chinh-dam);
    text-decoration: underline;
}

.wv-phan-trang {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 14px;
}

.wv-phan-trang a,
.wv-phan-trang span {
    min-width: 32px;
    padding: 5px 9px;
    border: 1px solid var(--wv-vien);
    border-radius: 4px;
    text-align: center;
    font-size: 13px;
}

.wv-phan-trang .wv-trang-dang-o {
    background: var(--wv-chinh);
    border-color: var(--wv-chinh);
    color: #ffffff;
    font-weight: 600;
}

/* Biểu mẫu nhiều khối */

.wv-luoi-nhap {
    display: grid;
    grid-template-columns: repeat(3, minmax(200px, 1fr));
    gap: 0 16px;
}

.wv-luoi-nhap .wv-rong-doi {
    grid-column: span 2;
}

.wv-luoi-nhap .wv-rong-ba {
    grid-column: 1 / -1;
}

.wv-goi-y {
    display: block;
    margin-top: 4px;
    font-size: 12px;
    color: var(--wv-chu-mo);
}

.wv-loi-o {
    display: block;
    margin-top: 4px;
    font-size: 12px;
    color: var(--wv-do);
}

.wv-o-chon {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    padding: 10px 12px;
    border: 1px solid var(--wv-vien);
    border-radius: 4px;
    background: #ffffff;
}

.wv-chon {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    font-weight: 400;
    font-size: 13px;
}

.wv-bang-nhap td {
    padding: 6px 8px;
    vertical-align: middle;
}

.wv-bang-nhap .wv-o-nhap {
    padding: 6px 9px;
}

.wv-cuoi-form {
    display: flex;
    gap: 10px;
    margin: 16px 0 30px;
}

.wv-luoi-xem {
    display: grid;
    grid-template-columns: repeat(3, minmax(200px, 1fr));
    gap: 12px 16px;
}

.wv-luoi-xem > div {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.wv-luoi-xem .wv-rong-ba {
    grid-column: 1 / -1;
}

.wv-luoi-xem .wv-nhan {
    font-size: 12px;
    color: var(--wv-chu-mo);
    text-transform: uppercase;
    letter-spacing: .3px;
}

@media (max-width: 1100px) {
    .wv-luoi-nhap,
    .wv-luoi-xem {
        grid-template-columns: repeat(2, minmax(180px, 1fr));
    }
}

/* Bảng giá và hợp đồng */

.wv-phai {
    text-align: right;
}

.wv-cong {
    text-align: right;
    font-weight: 600;
}

.wv-bang tfoot td {
    border-top: 2px solid var(--wv-vien);
    font-weight: 600;
}

.wv-so-tinh {
    text-align: right;
    font-variant-numeric: tabular-nums;
    background: #f7f9fa;
}

.wv-bang-gia tbody.wv-khoi-dong {
    border-bottom: 1px solid var(--wv-vien);
}

.wv-dong-phu-gia td {
    padding-top: 0;
    background: #fbfcfd;
}

.wv-thu-tuan {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 6px 0;
}

.wv-o-thu {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 0;
    font-size: 12px;
    font-weight: 600;
    color: var(--wv-chu-mo);
}

.wv-o-thu .wv-o-nhap {
    width: 120px;
    padding: 5px 8px;
    font-weight: 400;
}

.wv-o-ghi-chu-dong {
    margin-top: 4px;
}

.wv-canh-bao {
    margin-bottom: 16px;
    padding: 10px 14px;
    border: 1px solid #f0d6a8;
    border-left: 4px solid #d98b1f;
    border-radius: 4px;
    background: #fdf6e9;
    color: #7a4c07;
}

.wv-canh-bao a {
    color: #7a4c07;
    font-weight: 600;
}

.wv-sap-het {
    background: #fdf1dd;
    color: #8a5a09;
}

.wv-dong-canh-bao td {
    background: #fffaf1;
}


/* Tour: thẻ chuyển khối trên biểu mẫu */

.wv-the-tab {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--wv-vien);
}

.wv-tab {
    padding: 9px 18px;
    border: 1px solid transparent;
    border-bottom: none;
    border-radius: 4px 4px 0 0;
    background: transparent;
    color: var(--wv-chu-mo);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.wv-tab:hover {
    color: var(--wv-chinh-dam);
}

.wv-tab-dang-o {
    border-color: var(--wv-vien);
    background: var(--wv-tam);
    color: var(--wv-chinh-dam);
    margin-bottom: -1px;
    padding-bottom: 10px;
}

.wv-khoi-an {
    display: none;
}

/* Tour: ô chọn hình thức xếp dọc, mỗi lựa chọn kèm câu giải thích */

.wv-o-chon-doc {
    flex-direction: column;
    gap: 10px;
}

.wv-chon-rong {
    align-items: flex-start;
    gap: 10px;
    padding: 8px 10px;
    border: 1px solid var(--wv-vien);
    border-radius: 4px;
    cursor: pointer;
}

.wv-chon-rong:hover {
    border-color: var(--wv-chinh);
}

.wv-chon-rong > span {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.wv-chon-rong .wv-goi-y {
    margin-top: 0;
}

/* Tour: nhãn hình thức trên bảng danh sách */

.wv-hinh-thuc {
    display: inline-block;
    padding: 2px 9px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 600;
    background: #eef2f5;
    color: var(--wv-chu-mo);
}

.wv-hinh-thuc-1 {
    background: #e6f0fb;
    color: #17457c;
}

.wv-hinh-thuc-2 {
    background: #fdf1dd;
    color: #8a5a09;
}

.wv-hinh-thuc-3 {
    background: #e4f1ec;
    color: var(--wv-chinh-dam);
}

.wv-nhac {
    color: var(--wv-vang);
}

.wv-o-noi-dung {
    margin-top: 6px;
}

.wv-bang-nhap .wv-nho {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 400;
}


/* Khung cuộn ngang dùng chung cho MỌI bảng trên màn hình.
   Bảng nhiều cột trên màn hẹp phải tự cuộn trong khung của nó, chứ để bảng đẩy
   rộng cả trang thì thanh cuộn nhảy ra ngoài cùng, người dùng kéo ngang là mất
   luôn thực đơn bên trái và không biết đường quay lại. Trang in KHÔNG bọc khung
   này vì tờ giấy có khổ cố định, không có chỗ nào để cuộn. */

.wv-bang-cuon {
    overflow-x: auto;
    max-width: 100%;
    margin-bottom: 12px;
}

.wv-bang-cuon > .wv-bang {
    margin-bottom: 0;
}

.wv-bang-chi {
    min-width: 1600px;
}

.wv-o-so {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.wv-o-tinh {
    padding: 8px 10px;
    border: 1px solid var(--wv-vien);
    border-radius: 4px;
    background: #f7f9fa;
    font-weight: 600;
}

.wv-o-doi {
    display: flex;
    gap: 6px;
}

.wv-o-doi .wv-o-nhap:first-child {
    flex: 1 1 auto;
    min-width: 90px;
}

.wv-o-doi select {
    flex: 0 0 auto;
    width: 96px;
}

/* Chiết tính: dòng chi phí ngoài lãnh thổ */

.wv-dong-ngoai-nuoc td {
    background: #f4f8fb;
}

.wv-nhan-ngoai-nuoc {
    color: #17457c;
    font-weight: 600;
}

/* Chiết tính: bốn mốc duyệt */

.wv-moc-duyet {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 14px;
    padding: 0;
    list-style: none;
    counter-reset: moc;
}

.wv-moc-duyet li {
    display: flex;
    flex: 1 1 200px;
    flex-direction: column;
    gap: 2px;
    padding: 10px 12px;
    border: 1px solid var(--wv-vien);
    border-radius: 4px;
    background: var(--wv-tam);
    color: var(--wv-chu-mo);
}

.wv-moc-duyet li::before {
    counter-increment: moc;
    content: "Mốc " counter(moc);
    font-size: 12px;
    font-weight: 600;
}

.wv-moc-duyet li.wv-moc-da-qua {
    border-color: #b9d8cc;
    background: #eef6f2;
    color: var(--wv-chinh-dam);
}

.wv-moc-duyet li.wv-moc-dang-o {
    border-color: var(--wv-chinh);
    border-left-width: 4px;
    background: #e4f1ec;
    color: var(--wv-chinh-dam);
}

.wv-trang-thai.wv-moc-1 {
    background: #eef2f5;
    color: var(--wv-chu-mo);
}

.wv-trang-thai.wv-moc-2 {
    background: #e6f0fb;
    color: #17457c;
}

.wv-trang-thai.wv-moc-3 {
    background: #fdf1dd;
    color: #8a5a09;
}

.wv-trang-thai.wv-moc-4 {
    background: #e4f1ec;
    color: var(--wv-chinh-dam);
}

/* Chiết tính: khối lãi gộp, chỉ hiện với người có quyền xem lãi */

.wv-the-lai {
    border-color: #b9d8cc;
}

.wv-the-lai .wv-the-dau {
    background: #eef6f2;
    color: var(--wv-chinh-dam);
}

.wv-the-lai .wv-gia-tri {
    font-size: 18px;
    font-weight: 700;
    color: var(--wv-chinh-dam);
}

/* Ô chuyển chi nhánh trên thanh trên cùng. Chỉ hiện với người thuộc nhiều chi nhánh. */
.wv-doi-chi-nhanh {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
}

.wv-doi-chi-nhanh label {
    margin: 0;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.75);
}

.wv-doi-chi-nhanh .wv-o-nhap {
    height: 32px;
    padding: 2px 8px;
    font-size: 13px;
    min-width: 180px;
}

/* Bảng xem trước của màn nhập từ tệp */
.wv-dong-loi > td {
    background: #fdecec;
}

.wv-dong-canh-bao-nhe > td {
    background: #fff8e1;
}

.wv-loi-dong {
    color: #b3261e;
    font-size: 12px;
    display: block;
}

.wv-canh-bao-dong {
    color: #8a6d3b;
    font-size: 12px;
    display: block;
}

.wv-the-tep {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid #e3e6ea;
    border-radius: 6px;
    background: #fafbfc;
}

/* Báo giá: bảy mốc vòng đời, mỗi mốc một sắc riêng để đọc bảng bằng mắt cho nhanh */

.wv-trang-thai.wv-moc-bg-1 {
    background: #eef2f5;
    color: var(--wv-chu-mo);
}

.wv-trang-thai.wv-moc-bg-2 {
    background: #e6f0fb;
    color: #17457c;
}

.wv-trang-thai.wv-moc-bg-3 {
    background: #e4f1ec;
    color: var(--wv-chinh-dam);
}

.wv-trang-thai.wv-moc-bg-4 {
    background: #fbe9e7;
    color: #8c2f21;
}

.wv-trang-thai.wv-moc-bg-5 {
    background: #fdf1dd;
    color: #8a5a09;
}

.wv-trang-thai.wv-moc-bg-6 {
    background: #d9ece4;
    color: var(--wv-chinh-dam);
}

.wv-trang-thai.wv-moc-bg-7 {
    background: #f1f3f5;
    color: var(--wv-chu-mo);
}

/* Nút thao tác nặng tay, ví dụ hủy đơn: đỏ để người bấm nhìn thấy trước khi bấm */

.wv-nut-canh-bao {
    background: #8c2f21;
    border-color: #8c2f21;
}

.wv-nut-canh-bao:hover {
    background: #74271b;
    border-color: #74271b;
}

/* Một hàng thao tác nằm ngang: nút đứng cạnh câu giải thích của nó */

.wv-hang-ngang {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

/* Đơn hàng: năm mốc vòng đời, dùng lại đúng bảng sắc của báo giá cho mắt quen */

.wv-trang-thai.wv-moc-dh-1 {
    background: #eef2f5;
    color: var(--wv-chu-mo);
}

.wv-trang-thai.wv-moc-dh-2 {
    background: #e6f0fb;
    color: #17457c;
}

.wv-trang-thai.wv-moc-dh-3 {
    background: #fdf1dd;
    color: #8a5a09;
}

.wv-trang-thai.wv-moc-dh-4 {
    background: #d9ece4;
    color: var(--wv-chinh-dam);
}

.wv-trang-thai.wv-moc-dh-5 {
    background: #fbe9e7;
    color: #8c2f21;
}

/* Bảng nhập của báo giá: cột thành tiền do máy chủ tính, ô này chỉ hiện số xem trước */

.wv-bang-nhap td.wv-o-tinh {
    font-variant-numeric: tabular-nums;
    color: var(--wv-chu-mo);
}

.wv-bang-nhap td.wv-so-dong {
    color: var(--wv-chu-mo);
}

/* Tài chính: ba mốc duyệt của phiếu thu, dùng lại đúng bảng sắc của đơn hàng cho mắt quen */

.wv-trang-thai.wv-moc-pt-1 {
    background: #eef2f5;
    color: var(--wv-chu-mo);
}

.wv-trang-thai.wv-moc-pt-2 {
    background: #d9ece4;
    color: var(--wv-chinh-dam);
}

.wv-trang-thai.wv-moc-pt-3 {
    background: #fbe9e7;
    color: #8c2f21;
}

/* Bốn mốc thu tiền của một đơn, dùng ở màn lịch sử thanh toán */

.wv-trang-thai.wv-moc-tt-1 {
    background: #eef2f5;
    color: var(--wv-chu-mo);
}

.wv-trang-thai.wv-moc-tt-2 {
    background: #fdf1dd;
    color: #8a5a09;
}

.wv-trang-thai.wv-moc-tt-3 {
    background: #d9ece4;
    color: var(--wv-chinh-dam);
}

.wv-trang-thai.wv-moc-tt-4 {
    background: #fbe9e7;
    color: #8c2f21;
}

/* Bốn tình trạng công nợ của một khách */

.wv-trang-thai.wv-no-da-thu-du {
    background: #d9ece4;
    color: var(--wv-chinh-dam);
}

.wv-trang-thai.wv-no-trong-han {
    background: #e6f0fb;
    color: #17457c;
}

.wv-trang-thai.wv-no-qua-han {
    background: #fdf1dd;
    color: #8a5a09;
}

.wv-trang-thai.wv-no-vuot-han-muc {
    background: #fbe9e7;
    color: #8c2f21;
}

/* Ô bắt buộc do màn hình bật lên, ví dụ tài khoản nhận khi chọn chuyển khoản */

.wv-luoi-nhap .wv-hang.wv-bat-buoc > label::after {
    content: " (bắt buộc)";
    color: #8c2f21;
    font-weight: 600;
}

/* Báo cáo: bốn khoảng tuổi nợ, tô theo mức nặng dần để mắt bắt được ngay dòng xấu nhất */

.wv-tuoi-no {
    display: grid;
    grid-template-columns: repeat(4, minmax(180px, 1fr));
    gap: 12px;
}

.wv-tuoi-o {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 12px 14px 16px;
    border: 1px solid var(--wv-vien);
    border-radius: 6px;
    background: #fbfcfd;
    overflow: hidden;
}

.wv-tuoi-o .wv-nhan {
    font-size: 12px;
    color: var(--wv-chu-mo);
    text-transform: uppercase;
    letter-spacing: .3px;
}

.wv-tuoi-o .wv-gia-tri {
    font-size: 20px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* Thanh nằm sát đáy ô, dài theo tỷ trọng của khoảng đó trên tổng còn nợ */
.wv-tuoi-o .wv-thanh {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 4px;
    background: currentColor;
    opacity: .55;
}

.wv-tuoi-1 { color: #17457c; }
.wv-tuoi-2 { color: #8a5a09; }
.wv-tuoi-3 { color: #a2461f; }
.wv-tuoi-4 { color: #8c2f21; }

.wv-bang td.wv-tuoi-2,
.wv-bang td.wv-tuoi-3,
.wv-bang td.wv-tuoi-4 {
    font-variant-numeric: tabular-nums;
}

@media (max-width: 1100px) {
    .wv-tuoi-no {
        grid-template-columns: repeat(2, minmax(160px, 1fr));
    }
}

/* Báo cáo: biểu đồ cột dựng sẵn phía máy chủ, không tải thư viện nào từ mạng */

.wv-bieu-do {
    width: 100%;
    overflow-x: auto;
}

.wv-bieu-do svg {
    width: 100%;
    height: 300px;
    display: block;
}

.wv-bieu-do .wv-truc {
    stroke: var(--wv-vien);
    stroke-width: 1;
}

.wv-bieu-do .wv-cot rect {
    fill: var(--wv-chinh);
}

.wv-bieu-do .wv-cot:hover rect {
    fill: var(--wv-chinh-dam);
}

.wv-bieu-do .wv-cot-rong rect {
    fill: var(--wv-vien);
}

.wv-bieu-do .wv-nhan-cot {
    font-size: 11px;
    fill: var(--wv-chu-mo);
}

.wv-bieu-do .wv-so-cot {
    font-size: 10px;
    fill: var(--wv-chu-mo);
}

/* Câu giải thích khoản khách trả thừa trên màn công nợ.
   Con số vẫn đúng như trước, chỗ này chỉ thêm lời cho con số. */

.wv-luu-y-tra-thua {
    margin: 10px 0 0;
    padding: 8px 10px;
    border-left: 3px solid #b58900;
    background: #fdf6e3;
    font-size: 13px;
}