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

/*
   BẢNG NHẬN DIỆN CỦA WVEP.

   Toàn bộ màu, kiểu chữ, thang cỡ chữ và thang khoảng cách của hệ thống khai đúng
   một lần ở khối :root ngay dưới đây. Tám mươi màn nghiệp vụ chỉ được gọi tên biến
   chứ không được viết thẳng một mã màu, để đổi nhận diện là sửa một chỗ.

   MÀU LẤY TỪ CHÍNH LOGO CÔNG TY, không phải chọn theo cảm tính:
     xanh đậm  #004775  chiếm bảy mươi bảy phần trăm mặt logo, đây là màu chính
     cam vàng  #ffab0b  chiếm mười ba phần trăm, đây là màu nhấn
   Trang công ty còn dùng nền kem #efeadf #f4eee0 #f7f3ea, nên nền của vùng nội dung
   ở đây là màu ngà ấm chứ không phải trắng gắt.

   VÌ SAO KHÔNG DÙNG NỀN TỐI TOÀN BỘ. Đây là phần mềm nhân viên mở suốt tám tiếng
   một ngày để đọc bảng số. Nền tối làm con số mảnh đi và làm mắt mỏi nhanh hơn hẳn.
   Nên chỉ khung điều hướng dọc mang nền xanh đậm của thương hiệu, còn vùng nội dung
   giữ nền ngà sáng. Cam vàng chỉ làm điểm nhấn: gạch chỉ mục đang mở, viền tiêu điểm,
   nhãn cần chú ý. Chữ đặt trên nền cam vàng luôn là chữ tối, vì chữ trắng trên
   #ffab0b chỉ đạt độ tương phản 1,9 lần, dưới xa mức đọc được.

   PHÔNG CHỮ. Không tải phông nào từ mạng. Tiêu đề dùng phông có chân sẵn của hệ điều
   hành cho hợp chữ Journeys trong logo, nội dung và bảng số dùng phông không chân.
   Số tiền bật chữ số đều bề ngang để các hàng số thẳng cột khi đọc dọc.
*/

:root {
    /* ---------- Bậc màu xanh thương hiệu ---------- */
    --wv-xanh-950: #001f34;
    --wv-xanh-900: #002a45;
    --wv-xanh-800: #003557;
    --wv-xanh-700: #003f69;
    --wv-xanh-600: #004775;
    --wv-xanh-500: #0a5c90;
    --wv-xanh-400: #1f75ad;
    --wv-xanh-300: #6ba6ca;
    --wv-xanh-200: #a8cde3;
    --wv-xanh-100: #d5e7f2;
    --wv-xanh-50:  #e9f2f8;

    /* ---------- Bậc màu cam vàng nhấn ---------- */
    --wv-cam-800: #6b4400;
    --wv-cam-700: #7d5300;
    --wv-cam-600: #a06a00;
    --wv-cam-500: #d18d00;
    --wv-cam-400: #ffab0b;
    --wv-cam-300: #ffc352;
    --wv-cam-200: #ffdd9c;
    --wv-cam-100: #fff1d4;
    --wv-cam-50:  #fdf8ec;

    /* ---------- Thang xám ngả ấm, hợp với nền ngà ---------- */
    --wv-xam-900: #1d2630;
    --wv-xam-800: #2c3843;
    --wv-xam-700: #3d4954;
    --wv-xam-600: #5c6873;
    --wv-xam-500: #7b868f;
    --wv-xam-400: #a0a8ae;
    --wv-xam-300: #c6c9c4;
    --wv-xam-200: #dcd8cc;
    --wv-xam-100: #ece9e0;
    --wv-xam-50:  #f7f5ef;

    /* ---------- Nền và mặt ---------- */
    --wv-nen: #f2eee4;
    --wv-nen-sau: #eae5d8;
    --wv-tam: #ffffff;
    --wv-tam-mo: #faf8f3;
    --wv-vien: var(--wv-xam-200);
    --wv-vien-nhat: #e8e4da;

    /* ---------- Chữ ---------- */
    --wv-chu: var(--wv-xam-900);
    --wv-chu-mo: var(--wv-xam-600);
    --wv-chu-nhat: var(--wv-xam-500);
    --wv-chu-nghich: #ffffff;

    /* ---------- Vai trò màu ---------- */
    --wv-chinh: var(--wv-xanh-600);
    --wv-chinh-dam: var(--wv-xanh-800);
    --wv-chinh-sang: var(--wv-xanh-500);
    --wv-chinh-nen: var(--wv-xanh-50);
    --wv-chinh-nen-dam: var(--wv-xanh-100);
    --wv-chinh-vien: #bcd8ea;

    --wv-nhan: var(--wv-cam-400);
    --wv-nhan-dam: var(--wv-cam-500);
    --wv-nhan-chu: var(--wv-cam-800);
    --wv-nhan-nen: var(--wv-cam-100);
    --wv-nhan-vien: var(--wv-cam-200);

    /* ---------- Khung điều hướng dọc ---------- */
    --wv-canh: var(--wv-xanh-900);
    --wv-canh-dinh: var(--wv-xanh-950);
    --wv-canh-chu: #c3d7e6;
    --wv-canh-chu-mo: rgba(195, 215, 230, .62);
    --wv-canh-chon: var(--wv-xanh-700);
    --wv-canh-luot: rgba(255, 255, 255, .07);
    --wv-canh-vien: rgba(255, 255, 255, .12);

    /* ---------- Bốn màu trạng thái ---------- */
    --wv-tot: #1d7a4c;
    --wv-tot-chu: #14603a;
    --wv-tot-nen: #e4f2ea;
    --wv-tot-vien: #b7ddc9;

    --wv-nhac: var(--wv-cam-600);
    --wv-nhac-chu: var(--wv-cam-700);
    --wv-nhac-nen: #fff3d9;
    --wv-nhac-vien: #f2ddb0;

    /*
       BA BIEN NAY TUNG TU TRO VAO CHINH NO, vi du --wv-xau: var(--wv-xau). Trinh duyet
       coi mot vong tron nhu the la khong hop le, nen moi cho goi ba bien ay deu ra mau
       rong: chu bao loi, nut xoa va nhan qua han mat mau. Nay chung mang ma mau that,
       lay tu dung sac do gach cua bang nhan dien.
    */
    --wv-xau: #b3392a;
    --wv-xau-chu: #8f2c20;
    --wv-xau-nen: #fbeae8;
    --wv-xau-vien: #eec4bf;
    --wv-xau-dam: #7a251b;

    --wv-tin: #0f6d8f;
    --wv-tin-chu: #0b5570;
    --wv-tin-nen: #e2f1f7;
    --wv-tin-vien: #b6dbe8;

    /* Hai tên cũ còn nằm rải rác trong tám mươi màn, giữ lại để không phải sửa
       một lượt cả nghìn dòng. Chúng chỉ là lối gọi khác của hai vai trò trên. */
    --wv-do: var(--wv-xau);
    --wv-vang: var(--wv-nhac-chu);

    /* ---------- Phông chữ ---------- */
    /*
       ĐÃ ĐO TRÊN MÁY THẬT: Georgia KHÔNG có chữ Việt. Đặt Georgia lên đầu thì chữ
       "chiết" hiện ra thành "chiê´t", dấu sắc rơi ra ngoài chữ ê vì phông thiếu hẳn
       glyph ghép sẵn và trình duyệt phải chắp vá bằng dấu rời. Cambria, Constantia và
       Palatino Linotype đều có đủ chữ Việt và đều là phông ghép sẵn của Windows;
       Palatino và Times New Roman đỡ phần máy Mac và máy Linux. Georgia bị loại hẳn
       khỏi danh sách chứ không để cuối, vì để cuối thì máy nào chỉ có mỗi Georgia lại
       rơi đúng vào lỗi ấy, mà serif chung của hệ thống thì không bao giờ thiếu chữ.
    */
    --wv-phong-tieu-de: Cambria, Constantia, "Palatino Linotype", Palatino,
                        "Times New Roman", serif;
    --wv-phong: "Segoe UI", "Segoe UI Variable Text", system-ui, -apple-system,
                "Helvetica Neue", Arial, "Noto Sans", sans-serif;
    --wv-phong-so: "Segoe UI", "Segoe UI Variable Text", system-ui, -apple-system,
                   "Helvetica Neue", Arial, sans-serif;
    --wv-phong-ma: Consolas, "Cascadia Mono", "SF Mono", "Courier New", monospace;

    /* ---------- Thang cỡ chữ ---------- */
    --wv-cd-11: .6875rem;
    --wv-cd-12: .75rem;
    --wv-cd-13: .8125rem;
    --wv-cd-14: .875rem;
    --wv-cd-15: .9375rem;
    --wv-cd-16: 1rem;
    --wv-cd-18: 1.125rem;
    --wv-cd-20: 1.25rem;
    --wv-cd-24: 1.5rem;
    --wv-cd-28: 1.75rem;
    --wv-cd-34: 2.125rem;

    /* ---------- Thang khoảng cách ---------- */
    --wv-k1: .25rem;
    --wv-k2: .5rem;
    --wv-k3: .75rem;
    --wv-k4: 1rem;
    --wv-k5: 1.25rem;
    --wv-k6: 1.5rem;
    --wv-k8: 2rem;
    --wv-k10: 2.5rem;
    --wv-k12: 3rem;

    /* ---------- Bo góc và đổ bóng ---------- */
    --wv-bo-1: 3px;
    --wv-bo-2: 5px;
    --wv-bo-3: 8px;
    --wv-bo-4: 12px;
    --wv-bo-tron: 999px;

    --wv-bong-1: 0 1px 2px rgba(0, 33, 56, .07);
    --wv-bong-2: 0 2px 6px rgba(0, 33, 56, .10);
    --wv-bong-3: 0 8px 24px rgba(0, 33, 56, .14);
    --wv-bong-4: 0 18px 48px rgba(0, 33, 56, .24);

    /* ---------- Số đo của cái vỏ ---------- */
    --wv-cao-thanh: 3.5rem;
    --wv-rong-canh: 15.5rem;
    --wv-rong-canh-gon: 4rem;
    --wv-bt: 1.125rem;
}

/* Khung điều hướng thu gọn: chỉ còn dải biểu tượng. Đổi đúng một biến là cả thanh
   trên, cái vỏ, phần chân và chính khung cùng dịch theo, không chỗ nào lệch. */
html.wv-canh-gon {
    --wv-rong-canh: var(--wv-rong-canh-gon);
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

/*
   THUỘC TÍNH hidden PHẢI THẮNG MỌI LUẬT display CỦA TẤM KIỂU NÀY.

   Luật [hidden] { display: none } nằm ở tấm kiểu của TRÌNH DUYỆT, tức tầng thấp nhất.
   Bất kỳ khai báo display nào của mình cũng nặng hơn nó, không cần bộ chọn mạnh: chỉ cần
   .wv-luoi-xem > div { display: flex } là mọi con của lưới ấy mang hidden vẫn hiện nguyên.

   Đã trả giá đúng như vậy ngày 26 tháng 8 năm 2026, và trả ở màn tiền. Dòng "Trừ chi phí
   ngoài lãnh thổ" của tờ chiết tính chỉ thuộc về bản NƯỚC NGOÀI, chiet-tinh.js tắt nó bằng
   o.hidden = true khi mở bản nội địa, mà đo ra thì nó vẫn là flex và vẫn chiếm hộp 352x42
   ở cả ba trạng thái. Người lập tờ nội địa đọc thấy một dòng không có trong công thức của
   mình.

   Dự án đã biết cái bẫy này và đã vá TỪNG CHỖ một: năm luật .wv-canh-bao[hidden],
   .ct-lop-phu[hidden], .wv-chu-thich[hidden], .wv-tim-ket-qua[hidden], .wv-chuong-so[hidden]
   nằm rải ở ba tệp, mỗi luật một lần ai đó phát hiện ra. Vá từng chỗ thì chỗ thứ sáu luôn
   còn ở phía trước. Khai một lần ở đây, ngay cạnh bộ đặt lại, thì mọi thẻ mang hidden của
   cả hệ thống đều ẩn thật, kể cả thẻ chưa ai viết.

   Dùng !important có lý do đo được chứ không phải cho chắc: hidden là câu nói "thứ này
   không có mặt", và không một luật bố cục nào được phép cãi lại nó. Quét toàn bộ 11 tấm
   kiểu ngày 26 tháng 8 năm 2026: không luật nào đặt display cho một bộ chọn mang [hidden]
   ra giá trị khác none, nên luật này không cướp chỗ của ai. Muốn một thẻ hiện lại thì gỡ
   thuộc tính hidden đi, đó mới là cách nói đúng.
*/
[hidden] {
    display: none !important;
}

html, body {
    height: 100%;
}

body {
    margin: 0;
    background: var(--wv-nen);
    color: var(--wv-chu);
    font-family: var(--wv-phong);
    font-size: var(--wv-cd-14);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
    font-family: var(--wv-phong-tieu-de);
    font-weight: 700;
    color: var(--wv-xam-900);
    letter-spacing: -.01em;
}

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

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

/* Viền tiêu điểm dùng chung cho cả hệ thống, màu cam nhấn để nhìn thấy được cả trên
   nền ngà lẫn nền trắng. Bỏ viền tiêu điểm đi là bỏ luôn người dùng bàn phím. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 2px solid var(--wv-nhan);
    outline-offset: 2px;
    border-radius: var(--wv-bo-1);
}

/* Số tiền, số lượng và ngày tháng dùng chữ số đều bề ngang, để các hàng số thẳng
   cột khi mắt chạy dọc một cột tiền. */
.wv-so-tinh,
.wv-o-so,
.wv-so,
.wv-phai,
.wv-cong,
.wv-gia-tri,
.wv-o-ngay {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

/* Biểu mẫu */

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

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

.wv-loc-o {
    min-width: min(11.875rem, 100%);
}

.wv-loc-rong {
    flex: 1 1 min(17.5rem, 100%);
    min-width: 0;
}

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

.wv-dang-chay {
    background: var(--wv-tot-nen);
    color: var(--wv-tot-chu);
}

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

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

.wv-luoi-nhap {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 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-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;
}

/* Khung bọc một dãy nhiều mục xếp thành LƯỚI, mỗi mục một ô.

   Vì sao có lớp riêng chứ không dùng lại .wv-o-chon ngay trên: .wv-o-chon là một hộp có
   viền, dựng cho một dãy NGẮN nằm trong một hàng biểu mẫu đã có nhãn riêng, và nó xếp
   theo dòng chảy nên bề rộng mỗi mục lệch nhau theo độ dài chữ. Dãy ở đây thì dài, nằm
   thẳng trong thân thẻ vốn đã có viền của chính cái thẻ, và cần các mục thẳng cột với
   nhau để mắt lướt dọc. Chín mươi lăm quyền xếp thành một cột dài là không đọc nổi.

   Số cột KHÔNG khai theo mốc bề rộng mà để auto-fill tự đếm, nên nó đúng ở mọi bề rộng
   chứ không riêng những bề rộng đã nghĩ tới. Bề rộng tối thiểu bọc trong min() để khung
   hẹp hơn 17rem vẫn còn đúng một cột thay vì chòi ra ngoài mép. */
/* Lưới đứng ngay sau một câu giải thích thì chừa khoảng, còn lưới đứng đầu thân thẻ thì
   không, nên khoảng ấy khai theo BỘ CHỌN ANH EM chứ không khai thẳng vào lưới. */
.wv-mo-ta + .wv-luoi-muc {
    margin-top: var(--wv-k3);
}

.wv-luoi-muc {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(17rem, 100%), 1fr));
    gap: var(--wv-k1) var(--wv-k4);
    align-items: start;
}

/* Mục đứng thẳng trong lưới: nới vùng bấm ra cho ngón tay, và cho chữ dài xuống dòng
   thay vì đẩy ngang. Căn theo MÉP TRÊN chứ không theo tâm, vì ở đây phần chữ có thể
   chiếm hai dòng còn ô tích thì luôn một dòng. */
.wv-luoi-muc > .wv-chon,
.wv-luoi-muc > .wv-quyen-mot {
    align-items: flex-start;
    gap: var(--wv-k2);
    padding: var(--wv-k1) var(--wv-k2);
    border-radius: 4px;
    min-width: 0;
    overflow-wrap: anywhere;
}

/* display với font-weight khai lại ở BỘ CHỌN HAI LỚP chứ không trông vào .wv-chon:
   luật .wv-hang label ở wvep-thanh-phan.css nặng hơn một lớp trơn, nên nếu có ngày lưới
   này nằm trong một hàng biểu mẫu thì mọi nhãn ô tích hóa đậm và tách dòng. Khai ở đây
   thì kết quả không phụ thuộc chỗ đặt nữa. */
.wv-luoi-muc > label.wv-chon {
    display: flex;
    font-weight: 400;
    cursor: pointer;
}

.wv-luoi-muc > label.wv-chon:hover {
    background: var(--wv-chinh-nen);
}

/* Ô tích không co lại khi tên bên cạnh dài, và hạ xuống một chút cho thẳng dòng chữ đầu. */
.wv-luoi-muc input[type="checkbox"] {
    flex: 0 0 auto;
    margin-top: 3px;
}

/* Một quyền: tên đứng trên, mã quyền đứng dưới và LÙI lại bằng cỡ chữ nhỏ với màu nhạt.
   Dùng ở hai chỗ: đứng thẳng trong lưới ở màn Quyền hiệu lực, và nằm trong nhãn ô tích
   ở màn Phân quyền. */
.wv-quyen-mot {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
    overflow-wrap: anywhere;
}

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

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

.wv-luoi-xem {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 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(0, 1fr));
    }
}

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

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

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

.wv-so-tinh {
    text-align: right;
    font-variant-numeric: tabular-nums;
    background: var(--wv-xam-50);
}

/* Dòng cộng dành riêng cho màn hẹp, chỉ hiện khi bốn cột số tính sẵn bị ẩn đi */
.wv-dong-cong-hep {
    display: none;
}

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

.wv-dong-phu-gia td {
    padding-top: 0;
    background: var(--wv-tam-mo);
}

.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: 7.5rem;
    max-width: 100%;
    padding: 5px 8px;
    font-weight: 400;
}

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

.wv-sap-het {
    background: var(--wv-nhac-nen);
    color: var(--wv-nhac-chu);
}

/* Chip bảng chiết tính đã từng bị bác, đứng ngay dưới tên bảng trên màn danh sách.

   Mang màu xấu chứ không phải màu nhắc, vì đây là việc đang chờ người lập chữa, không
   phải một lời nhắc để đó.

   VIẾT HAI LỚP LIỀN NHAU, đúng quy tắc 11. Bản đầu viết một lớp trơn và đã đo được là
   thua: .wv-trang-thai cũng nặng đúng một lớp, nó khai ở wvep-thanh-phan.css tức tệp nạp
   SAU, nên chip ra nền xám rgb(236,233,224) chứ không phải nền đỏ nhạt. Hai lớp liền nhau
   thì kết quả không còn phụ thuộc thứ tự nạp nữa. */
.wv-trang-thai.wv-bi-bac {
    margin-top: var(--wv-k1);
    background: var(--wv-xau-nen);
    color: var(--wv-xau-chu);
}

/* Chip tờ chiết tính ĐÃ HỦY, thêm ngày 18 tháng 9 năm 2026.

   Nền đậm hơn chip bị bác, vì hai chuyện khác hẳn nhau: bị bác là việc đang chờ người lập
   chữa, còn đã hủy là tờ hết hiệu lực hẳn. Hai chip ấy đứng cạnh nhau được trên cùng một
   dòng nên chúng phải khác nhau ngay từ cái nhìn đầu.

   VIẾT HAI LỚP LIỀN NHAU, đúng quy tắc 11 và đúng lý do đã đo ở chip ngay trên. */
.wv-trang-thai.wv-da-huy {
    margin-top: var(--wv-k1);
    background: var(--wv-xau-chu);
    color: #ffffff;
}

.wv-dong-canh-bao td {
    background: var(--wv-cam-50);
}

/* 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: var(--wv-xam-100);
    color: var(--wv-chu-mo);
}

.wv-hinh-thuc-1 {
    background: var(--wv-tin-nen);
    color: var(--wv-tin-chu);
}

.wv-hinh-thuc-2 {
    background: var(--wv-nhac-nen);
    color: var(--wv-nhac-chu);
}

.wv-hinh-thuc-3 {
    background: var(--wv-tot-nen);
    color: var(--wv-tot-chu);
}

.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;
}

/* Bề rộng tối thiểu của bảng chi phí chuyển sang tệp wvep-cogian.css, viết bằng đơn vị
   theo cỡ chữ. Ép cứng một nghìn sáu trăm pixel ở đây là chỗ duy nhất trong tệp này bắt
   một con số pixel gánh việc của bố cục. */

.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: var(--wv-xam-50);
    font-weight: 600;
}

/*
   Ô nhập CHỈ ĐỌC, mang một con số do luật ấn định chứ không do người dùng gõ, ví dụ
   phần trăm giá của nhóm người lớn luôn bằng 100.

   Vì sao vẫn là thẻ input chứ không phải một mẩu chữ: nó đứng cùng cột với những ô nhập
   thật, mà một mẩu chữ thì co theo nội dung nên thành một viên nhỏ lệch hẳn khỏi mấy ô
   bên dưới. Dùng đúng thẻ input là nó tự nhận trọn bộ bề rộng, chiều cao và đường viền
   của ô nhập, không phải canh tay.

   Nền xám và con trỏ mặc định để mắt biết ngay là gõ không được, khỏi phải bấm thử.
*/
.wv-o-khoa {
    background: var(--wv-xam-50);
    color: var(--wv-chu-mo);
    font-weight: 600;
    cursor: default;
}

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

/*
   Ô đôi nằm trong bảng nhập phải bọc bằng một DIV bên trong ô, không đặt lớp lên chính
   thẻ td. Một td mang display flex thì thôi làm ô bảng: nó rơi khỏi cấu trúc cột của
   hàng, hai ô đôi cạnh nhau chồng lên nhau theo chiều dọc, và những cột phía sau trống
   hoác. Luật dưới đây chỉ để chặn lỗi ấy tái phát nếu ai đó lại đặt nhầm.
*/
td.wv-o-doi {
    display: table-cell;
}

/*
   Ô nhập tiền trong cặp tiền cộng loại tiền KHÔNG có sàn bề rộng.

   Sàn 90 điểm ảnh ở đây từng bị wvep-cogian.css đặt lại về 0, mà tấm ấy nạp SAU nên giá
   trị đang chạy thật vẫn là 0. Hai tệp khai cùng một bộ chọn với hai giá trị khác nhau
   thì kết quả phụ thuộc thứ tự nạp, và phụ thuộc cả việc trình duyệt có giữ lại một tệp
   cũ hay không: đảo thứ tự hai thẻ nạp là ô nhận lại sàn 90 điểm ảnh và hàng lọc tràn ở
   khổ hẹp. Gộp về đúng một chỗ, giữ nguyên giá trị đang chạy.
*/
.wv-o-doi .wv-o-nhap:first-child {
    flex: 1 1 auto;
    min-width: 0;
}

.wv-o-doi select {
    flex: 0 0 auto;
    width: 6rem;
    min-width: 0;
}

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

.wv-dong-ngoai-nuoc td {
    background: var(--wv-tin-nen);
}

.wv-nhan-ngoai-nuoc {
    color: var(--wv-tin-chu);
    font-weight: 600;
}

/* Bốn luật của dãy mốc duyệt đã dọn hẳn sang wvep-thanh-phan.css ngày 26 tháng 8 năm
   2026, cùng lượt với hai mươi hai khối khác cũng khai trùng ở hai tệp. Chúng khai đúng
   CÙNG một bộ chọn ở cả hai tệp, tức cùng độ nặng, nên tệp nạp sau thắng và khối ở đây
   là mã chết. Đảo thứ tự hai thẻ nạp trên trang đang chạy là đệm trái của mỗi ô mốc tụt
   từ 40 xuống 12 điểm ảnh và vòng tròn số đè lên tên mốc, cả năm tên không đọc được.

   Trước khi xóa đã đối chiếu từng thuộc tính của cả hai mươi sáu khối: chỉ đúng một
   thuộc tính không bị tệp kia đè, là border-left-width của mốc đang đứng, và nó đã theo
   sang wvep-thanh-phan.css chứ không mất. */

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

.wv-trang-thai.wv-moc-2 {
    background: var(--wv-tin-nen);
    color: var(--wv-tin-chu);
}

/* Ba mốc giữa là ba chặng đang soát dở nên cùng dùng màu nhắc. Chỉ mốc 5 mới là mốc
   duyệt xong và mới được mang màu tốt.

   Đợt chèn mốc điều hành đã DỜI màu tốt từ số 4 sang số 5. Giữ nguyên là bảng mới qua
   tay kế toán hiện màu xanh của bảng đã duyệt trên màn danh sách, mà đó đúng là màn
   người ta liếc qua chứ không đọc chữ. */

.wv-trang-thai.wv-moc-3 {
    background: var(--wv-nhac-nen);
    color: var(--wv-nhac-chu);
}

.wv-trang-thai.wv-moc-4 {
    background: var(--wv-nhac-nen);
    color: var(--wv-nhac-chu);
}

.wv-trang-thai.wv-moc-5 {
    background: var(--wv-tot-nen);
    color: var(--wv-tot-chu);
}

/* 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: var(--wv-tot-vien);
}

.wv-the-lai .wv-the-dau {
    background: var(--wv-tot-nen);
    color: var(--wv-tot-chu);
}

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

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

.wv-dong-canh-bao-nhe > td {
    background: var(--wv-cam-50);
}

.wv-loi-dong {
    color: var(--wv-xau);
    font-size: 12px;
    display: block;
}

.wv-canh-bao-dong {
    color: var(--wv-nhac-chu);
    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 var(--wv-vien);
    border-radius: 6px;
    background: var(--wv-xam-50);
}

/* 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: var(--wv-xam-100);
    color: var(--wv-chu-mo);
}

.wv-trang-thai.wv-moc-bg-2 {
    background: var(--wv-tin-nen);
    color: var(--wv-tin-chu);
}

.wv-trang-thai.wv-moc-bg-3 {
    background: var(--wv-tot-nen);
    color: var(--wv-tot-chu);
}

.wv-trang-thai.wv-moc-bg-4 {
    background: var(--wv-xau-nen);
    color: var(--wv-xau-chu);
}

.wv-trang-thai.wv-moc-bg-5 {
    background: var(--wv-nhac-nen);
    color: var(--wv-nhac-chu);
}

.wv-trang-thai.wv-moc-bg-6 {
    background: var(--wv-tot-nen);
    color: var(--wv-tot-chu);
}

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

/* Đơ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: var(--wv-xam-100);
    color: var(--wv-chu-mo);
}

.wv-trang-thai.wv-moc-dh-2 {
    background: var(--wv-tin-nen);
    color: var(--wv-tin-chu);
}

.wv-trang-thai.wv-moc-dh-3 {
    background: var(--wv-nhac-nen);
    color: var(--wv-nhac-chu);
}

.wv-trang-thai.wv-moc-dh-4 {
    background: var(--wv-tot-nen);
    color: var(--wv-tot-chu);
}

.wv-trang-thai.wv-moc-dh-5 {
    background: var(--wv-xau-nen);
    color: var(--wv-xau-chu);
}

/* 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: var(--wv-xam-100);
    color: var(--wv-chu-mo);
}

.wv-trang-thai.wv-moc-pt-2 {
    background: var(--wv-tot-nen);
    color: var(--wv-tot-chu);
}

.wv-trang-thai.wv-moc-pt-3 {
    background: var(--wv-xau-nen);
    color: var(--wv-xau-chu);
}

/* 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: var(--wv-xam-100);
    color: var(--wv-chu-mo);
}

.wv-trang-thai.wv-moc-tt-2 {
    background: var(--wv-nhac-nen);
    color: var(--wv-nhac-chu);
}

.wv-trang-thai.wv-moc-tt-3 {
    background: var(--wv-tot-nen);
    color: var(--wv-tot-chu);
}

.wv-trang-thai.wv-moc-tt-4 {
    background: var(--wv-xau-nen);
    color: var(--wv-xau-chu);
}

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

.wv-trang-thai.wv-no-da-thu-du {
    background: var(--wv-tot-nen);
    color: var(--wv-tot-chu);
}

.wv-trang-thai.wv-no-trong-han {
    background: var(--wv-tin-nen);
    color: var(--wv-tin-chu);
}

.wv-trang-thai.wv-no-qua-han {
    background: var(--wv-nhac-nen);
    color: var(--wv-nhac-chu);
}

.wv-trang-thai.wv-no-vuot-han-muc {
    background: var(--wv-xau-nen);
    color: var(--wv-xau-chu);
}

/* Ô 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: var(--wv-xau-chu);
    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(0, 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: var(--wv-tam-mo);
    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: var(--wv-tin-chu); }
.wv-tuoi-2 { color: var(--wv-nhac-chu); }
.wv-tuoi-3 { color: #a2461f; }
.wv-tuoi-4 { color: var(--wv-xau-chu); }

.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(0, 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 var(--wv-nhac);
    background: var(--wv-cam-50);
    font-size: 13px;
}

/* Dòng bút toán đảo trên sổ cái.
   Làm nhạt đi và gạch một vệt bên trái, chứ KHÔNG gạch ngang chữ và không giấu đi.
   Bút toán đảo là một dòng có thật của quyển sổ, và người soát sổ cần đọc được nó
   nguyên vẹn; điều họ cần là nhận ra ngay đây là lần rút chứ không phải lần ghi. */
.wv-dong-dao > td {
    background: var(--wv-nen-mo, #f7f7f9);
    color: var(--wv-chu-phu, #5a5f6a);
}

.wv-dong-dao > td:first-child {
    box-shadow: inset 3px 0 0 0 var(--wv-vien-manh, #c9ccd4);
}

/* Dòng vừa được tạo xong, sau khi biểu mẫu đẩy người dùng về danh sách.
   Tô nhạt và gạch một vệt bên trái, KHÔNG nhấp nháy và không tự cuộn: bản ghi vừa tạo là
   một tin vui chứ không phải một cảnh báo, nó chỉ cần dễ tìm bằng mắt trong một giây. */
.wv-dong-vua-tao > td {
    background: var(--wv-xanh-50, #eef5ff);
}

.wv-dong-vua-tao > td:first-child {
    box-shadow: inset 3px 0 0 0 var(--wv-chinh, #2d6cdf);
}

/* Dòng tài khoản cha trên bảng cân đối phát sinh.
   In đậm và nền nhạt, vì số của nó là số DỒN từ các tài khoản con chứ không phải một
   khoản phát sinh riêng. Không phân biệt được hai loại dòng này là cộng nhầm hai lần. */
.wv-dong-cha > td {
    font-weight: 600;
    background: var(--wv-nen-mo, #f7f7f9);
}