/* WVEP.Web/wwwroot/css/wvep-chiet-tinh.css */

/*
   TỜ CHIẾT TÍNH GIÁ TOUR.

   Dựng theo hình dạng tờ mẫu công ty đang dùng: phần chi chia thành từng nhóm, mỗi nhóm
   một bảng riêng mang tiêu đề đánh số, cuối mỗi nhóm một dòng Thêm mới và một dòng cộng.

   VÌ SAO TỆP NÀY NẠP SAU CÙNG, sau cả wvep-cogian.css. Bảng của tờ chiết tính rộng hơn
   hẳn mọi bảng khác của hệ thống: mười ba cột với bản trong nước và mười bốn cột với bản
   nước ngoài. Bề rộng tối thiểu của nó phải đè được luật chung khai cho .wv-bang trong
   tệp co giãn, mà hai luật ấy cùng độ mạnh, nên chỉ có thứ tự nạp mới phân được. Đặt tệp
   này trước thì cột bị bóp lại và chữ tràn qua nút, đúng lỗi đã bị chê.

   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.
*/

.ct-an {
    display: none !important;
}

/* ---------- Khối đầu tờ ---------- */

.ct-dau-to {
    margin-bottom: var(--wv-k4);
    padding: var(--wv-k4) var(--wv-k5);
    background: var(--wv-tam);
    border: 1px solid var(--wv-vien);
    border-top: 3px solid var(--wv-chinh);
    border-radius: var(--wv-bo-3);
    box-shadow: var(--wv-bong-1);
}

.ct-dau-to-luoi {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: var(--wv-k2) var(--wv-k6);
}

.ct-o {
    display: flex;
    gap: var(--wv-k2);
    align-items: baseline;
    min-width: 0;
}

.ct-nhan {
    flex: 0 0 auto;
    color: var(--wv-chu-mo);
    font-size: var(--wv-cd-12);
    text-transform: uppercase;
    letter-spacing: .03em;
}

.ct-tri {
    min-width: 0;
    color: var(--wv-chu);
    font-weight: 600;
    overflow-wrap: anywhere;
}

.ct-tri-mo {
    color: var(--wv-chu-nhat);
    font-weight: 400;
}

.ct-tinh-trang {
    display: flex;
    flex-wrap: wrap;
    gap: var(--wv-k2);
    align-items: baseline;
    margin-top: var(--wv-k4);
    padding-top: var(--wv-k3);
    border-top: 1px solid var(--wv-vien-nhat);
}

.ct-tinh-trang-chua {
    color: var(--wv-xau-chu);
    font-weight: 600;
}

.ct-tinh-trang-xong {
    color: var(--wv-tot-chu);
    font-weight: 600;
}

/* Khối lý do bị bác, đặt trước cả tờ chiết tính trên màn sửa.

   Dựng trên wv-canh-bao có sẵn nên nó mang đúng màu cảnh báo của cả hệ thống; ba luật
   dưới đây chỉ lo phần bố cục bên trong, không đụng tới màu. */
.ct-bi-bac {
    display: grid;
    gap: var(--wv-k1);
}

/* Câu lý do là thứ người lập phải đọc kỹ nhất trên màn này, nên nó to hơn phần còn lại
   của khối chứ không nằm lẫn với dòng tên người và thời điểm. */
.ct-bi-bac-ly-do {
    margin: 0;
    font-size: var(--wv-cd-15);
}

.ct-bi-bac-nguoi {
    margin: 0;
    font-size: var(--wv-cd-13);
}

.ct-lich-su {
    margin-top: var(--wv-k3);
}

.ct-lich-su-trong {
    margin: var(--wv-k1) 0 0;
    color: var(--wv-chu-nhat);
    font-size: var(--wv-cd-13);
}

.ct-lich-su-ds {
    display: grid;
    gap: var(--wv-k1);
    margin: var(--wv-k2) 0 0;
    padding: 0;
    list-style: none;
}

.ct-lich-su-ds li {
    display: grid;
    grid-template-columns: minmax(9rem, 12rem) 1fr minmax(8rem, 10rem);
    gap: var(--wv-k3);
    padding: var(--wv-k1) var(--wv-k2);
    background: var(--wv-tam-mo);
    border-left: 3px solid var(--wv-nhan);
    border-radius: var(--wv-bo-1);
    font-size: var(--wv-cd-13);
}

.ct-moc-ten {
    font-weight: 600;
}

/* Cột giữa của một dòng lịch sử duyệt: tên người đã đẩy mốc.

   Đứng cùng mức với cột thời điểm bên phải, tức mờ hơn tên mốc, vì thứ người đọc dò
   trước là MỐC nào, còn ai làm với lúc nào là phần tra sau. Cho phép tên dài xuống dòng
   thay vì đẩy hai cột kia lệch đi. */
.ct-moc-nguoi {
    color: var(--wv-chu-mo);
    min-width: 0;
    overflow-wrap: anywhere;
}

.ct-moc-luc {
    color: var(--wv-chu-mo);
    font-variant-numeric: tabular-nums;
}

/* ---------- Nút chọn bản ---------- */

.ct-chon-ban {
    display: flex;
    flex-wrap: wrap;
    gap: var(--wv-k2);
    align-items: center;
    margin-bottom: var(--wv-k4);
}

.ct-nut-ban {
    padding: var(--wv-k2) var(--wv-k5);
    background: var(--wv-tam);
    color: var(--wv-chinh-dam);
    border: 1px solid var(--wv-chinh-vien);
    border-radius: var(--wv-bo-tron);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.ct-nut-ban:hover:not(:disabled) {
    background: var(--wv-chinh-nen);
}

.ct-nut-ban:disabled {
    opacity: .45;
    cursor: default;
}

/*
   Chữ trên nền cam vàng LUÔN là chữ tối. Chữ trắng trên #ffab0b chỉ đạt độ tương phản
   1,9 lần, dưới xa mức đọc được, nên nhãn của bản đang mở dùng màu cam sẫm.
*/
.ct-nut-ban-dang-o,
.ct-nut-ban-dang-o:hover {
    background: var(--wv-nhan);
    color: var(--wv-nhan-chu);
    border-color: var(--wv-nhan-dam);
}

.ct-chon-ban-nhac {
    color: var(--wv-chu-mo);
    font-size: var(--wv-cd-13);
}

.ct-the-chung > summary {
    cursor: pointer;
}

/* ---------- Tiêu đề phần I, II, III ---------- */

.ct-phan {
    margin-bottom: var(--wv-k6);
}

/* Fieldset bọc phần chi, chỉ để khóa cả khối ở lượt kinh doanh sửa phần thu. Xóa hết khung mặc
   định; min-width 0 bắt buộc, không có nó fieldset giãn theo bảng chi rộng hơn 1700 điểm ảnh và
   khối cuộn ngang bên trong mất tác dụng. */
.ct-khoi-khoa {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.ct-phan-dau {
    display: flex;
    flex-wrap: wrap;
    gap: var(--wv-k2) var(--wv-k5);
    align-items: baseline;
    justify-content: space-between;
    margin: 0 0 var(--wv-k3);
    padding: var(--wv-k3) var(--wv-k4);
    background: var(--wv-chinh);
    color: var(--wv-chu-nghich);
    border-radius: var(--wv-bo-2);
}

.ct-phan-ten {
    font-family: var(--wv-phong-tieu-de);
    font-size: var(--wv-cd-18);
    letter-spacing: .02em;
}

.ct-phan-so {
    color: rgba(255, 255, 255, .88);
    font-size: var(--wv-cd-14);
    font-variant-numeric: tabular-nums;
}

.ct-phan-so strong {
    color: var(--wv-cam-300);
    font-variant-numeric: tabular-nums;
}

.ct-phan-cach {
    padding: 0 var(--wv-k2);
    color: rgba(255, 255, 255, .45);
}

/* ---------- Câu nhắc về khối ngoài lãnh thổ của bản nước ngoài ---------- */

/*
   KHÔNG gạch hai khối thành hai đoạn liền nhau. Thứ tự nhóm của tờ mẫu đan xen: nhóm 1
   ngoài nước, nhóm 2 trong nước, nhóm 3 và 4 lại ngoài nước. Gạch khối thì tiêu đề khối
   lặp lại bốn lần và gợi ý sai rằng chúng nằm liền mạch. Thay bằng một câu nhắc ở đầu
   phần chi, còn nhóm nào thuộc khối ngoài nước thì mang nhãn ngay trên tiêu đề của nó.
*/
.ct-khoi-nhac {
    color: var(--wv-chu-mo);
    font-family: var(--wv-phong);
    font-size: var(--wv-cd-13);
    font-weight: 400;
}

.ct-khoi-nhac-dau {
    margin: 0 0 var(--wv-k3);
    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);
}

/* ---------- Một nhóm, tức một bảng con ---------- */

.ct-nhom {
    margin-bottom: var(--wv-k4);
}

/* Nhóm lớn của bản nước ngoài (01/10/2026): chỉ là tiêu đề đứng trên các bảng con của nó. */
.ct-muc-cha {
    margin: var(--wv-k4) 0 var(--wv-k2);
    padding-bottom: var(--wv-k1);
    border-bottom: 2px solid var(--wv-vien);
    color: var(--wv-chinh-dam);
    font-family: var(--wv-phong);
    font-size: var(--wv-cd-15);
    font-weight: 800;
    text-wrap: balance;
}

.ct-muc-cha:first-child {
    margin-top: 0;
}

/* Bảng thực hiện (02/10/2026): dòng phát sinh nền vàng nhạt để phân với dòng chép từ dự trù. */
.ct-dong-phat-sinh > td {
    background: var(--wv-nhac-nen);
}

/* Băng báo tờ đã khóa lúc khởi hành, viền màu nhắc cho khác thẻ thường. */
.ct-the-khoa {
    border-left: 4px solid var(--wv-nhac-vien);
}

.ct-mo-khoa {
    margin-top: var(--wv-k3);
}

.ct-mo-khoa > summary {
    cursor: pointer;
    color: var(--wv-chinh-dam);
    margin-bottom: var(--wv-k2);
}

/* Form nhỏ nằm cùng hàng nút (chốt, mở lại) ở thanh nút cuối trang. */
.ct-form-dong {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--wv-k2);
}

.ct-nhom-dau {
    margin: 0 0 var(--wv-k1);
    color: var(--wv-chinh-dam);
    font-family: var(--wv-phong);
    font-size: var(--wv-cd-14);
    font-weight: 700;
}

.ct-nhom-ngoai-nuoc .ct-nhom-dau::after {
    content: "ngoài lãnh thổ";
    margin-left: var(--wv-k2);
    padding: 1px var(--wv-k2);
    background: var(--wv-nhan-nen);
    color: var(--wv-nhan-chu);
    border: 1px solid var(--wv-nhan-vien);
    border-radius: var(--wv-bo-tron);
    font-size: var(--wv-cd-11);
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
}

/* ---------- Bảng của tờ chiết tính ---------- */

/* SÀN BỀ RỘNG CỦA HAI BẢNG, hạ ngày 15 tháng 9 năm 2026.
   
   Hai con số cũ là 62rem và 76rem, tức 992 và 1.216 điểm ảnh, và chúng
   là thứ cuối cùng giữ bảng rộng hơn khung. Đo từng cột sau khi siết:
   bảng thu cần 615 điểm ảnh, bảng chi cần 782. Sàn cũ vì thế đang ép
   thừa gần bốn trăm điểm ảnh, và chính chỗ thừa ấy sinh ra lượt cuộn
   ngang ở mọi khổ màn dưới 1.600.
   
   Sàn mới lấy số đo thật cộng một khoảng dư nhỏ: một cột chữ vẫn phải
   đủ chỗ cho vài từ chứ không rơi xuống đổ dọc từng ký tự. */

.wv-bang-cuon > .ct-bang {
    min-width: 40rem;
}

.wv-bang-cuon > .ct-bang-chi {
    min-width: 52rem;
}

.wv-bang-cuon > .ct-bang-td {
    min-width: 42rem;
}

.ct-bang th {
    font-size: var(--wv-cd-12);
}

/* KHỐI CUỘN CỦA TỜ CHIẾT TÍNH TỰ VẼ TRONG LÒNG NÓ.

   Không có dòng này thì phần bảng thò ra ngoài khung vẫn được tính vào
   bề rộng cuộn của cả trang: khối cuộn nuốt đúng phần hình, còn thân
   trang thì trôi ngang thêm 194 điểm ảnh ở khổ 1.024 và 386 ở khổ 768.
   Người dùng gặp hai thanh cuộn ngang chồng nhau, một của bảng và một
   của cả trang, mà thanh của cả trang thì không kéo ra được gì ngoài
   một dải nền trống.

   Đây là chỗ CHỈ DÀNH CHO BẢNG CHIẾT TÍNH, không phải luật chung cho
   mọi khối cuộn: contain cắt mọi thứ vẽ ra ngoài mép khối, nên bảng
   nào có khối thả xuống tự dựng bên trong sẽ bị cắt mất. Bảng chiết
   tính thì không: ô lọc nhà cung cấp chỉ ẩn bớt mục của thẻ chọn, còn
   danh sách bung ra là do trình duyệt vẽ ngoài luồng trang. */
/* NỚI TRẦN BỀ RỘNG CHO TRANG CÓ BẢNG CHIẾT TÍNH.

   Thân trang có trần 92rem, tức 1.472 điểm ảnh, khai một lần ở wvep-cong.css. Trần ấy
   đúng cho trang chữ: một dòng dài quá thì mắt đọc hết dòng là lạc chỗ xuống dòng.

   Nhưng tờ chiết tính không phải trang chữ. Nó là một bảng mười bốn cột đang phải cuộn
   ngang, và trần kia biến chỗ trống thành chỗ bỏ không: trên màn 1.920, người dùng bấm
   thu thanh điều hướng để lấy thêm 170 điểm ảnh, thanh thu lại thật, nhưng bảng không
   nhúc nhích vì trần đã chặn ở 1.472 từ trước. Người dùng mất một cú bấm mà không được
   gì, và cạnh phải trang là một dải nền trống nhìn thẳng vào mặt.

   HỎI BẰNG :has CHỨ KHÔNG HỎI BẰNG TÊN CỬA. Cửa chiết tính còn có màn không bảng nào,
   ví dụ Tra giá nhanh, và những màn ấy vẫn nên giữ trần đọc được. Điều kiện đúng không
   phải "trang này thuộc cửa nào" mà là "trang này có bảng rộng hay không", nên hỏi thẳng
   điều đó. Trình duyệt không hiểu :has thì giữ nguyên trần cũ, tức trở về đúng hành vi
   hôm qua chứ không vỡ gì. */
.wv-than:has(.ct-bang) {
    max-width: 100%;
}

.ct-cuon-bang {
    contain: paint;

    /* KHUNG ĐO CỦA CHÍNH BẢNG NÀY.

       Mọi luật co giãn của tờ chiết tính phải hỏi "khung chứa bảng rộng
       bao nhiêu", chứ không phải "màn hình rộng bao nhiêu". Hai con số
       ấy lệch nhau đúng bằng bề ngang thanh điều hướng, mà thanh ấy thu
       gọn được: người dùng bấm thu thanh thì khung rộng thêm hơn hai
       trăm điểm ảnh, nhưng mọi @media vẫn thấy màn hình y như cũ nên
       bảng không hề giãn ra, vẫn cuộn ngang trong một khung giờ đã dư
       chỗ. Đó là điều người dùng báo lại: thu thanh xong trang không co
       giãn theo.

       Khai container-type ở đây rồi thì các mốc bên dưới dùng @container
       thay cho @media, và chúng đo đúng cái khung mà bảng đang sống. */
    container-type: inline-size;
}

/* CHỮ TIÊU ĐỀ KHÔNG ĐƯỢC QUYẾT BỀ RỘNG CỘT.

   Trước đây hàng tiêu đề khai nowrap ở mọi khổ, và mấy chữ ấy quyết
   định bề rộng cột, quyết định sai: đo ngày 15 tháng 9 năm 2026, cột
   Hành động rộng 99 điểm ảnh trong khi nội dung nó là một cái nút 34,
   cột Đơn vị tiền rộng 98 trong khi ô chọn bên trong chỉ cần 51. Cộng
   lại, sáu cột như vậy ăn mất 179 điểm ảnh bề ngang.

   NGƯỠNG THEO KHỔ MÀN LÀ NGƯỠNG SAI, đó là lý do bỏ hẳn nowrap chứ
   không phải chỉ nới ngưỡng. Bảng không sống trong khổ màn mà sống
   trong khung nội dung, và khung ấy hẹp hơn khổ màn đúng bằng bề ngang
   thanh bên: ở khổ 1.440 khung chỉ còn 1.127. Lấy 1.400 làm mốc thì
   khổ 1.440 nằm ngoài mốc, tiêu đề giữ một dòng, và bảng lại vượt
   khung thêm 54 điểm ảnh ở đúng cái khổ màn hình phổ biến nhất.

   Bỏ nowrap thì bề rộng cột đi theo nội dung thật, còn tiêu đề tự
   xuống dòng đúng lúc cần: màn rộng dư chỗ thì nó vẫn nằm một dòng mà
   không cần luật nào ra lệnh. */

@container (max-width: 640px) {
    /* CẮT GIỮA TỪ LÀ LỐI THOÁT CUỐI CÙNG, không phải cách co bảng.

       Mốc này từng đặt ở 1.100 và đó là sai lầm đo được: khung bảng ở
       khổ màn 1.280 rộng 967 điểm ảnh, tức nằm trong mốc, nên hàng tiêu
       đề bị bẻ dọc từng chữ cái ngay trên màn hình phổ biến nhất. DUYỆT
       thành DUY ỆT, HÀNH ĐỘNG thành HÀ NH ĐỘ NG, GỒM THUẾ thành GỒ M TH
       UÊ. Bảng gọn hơn thật, nhưng không ai đọc nổi đầu cột.

       Sáu trăm bốn mươi là khổ mà bảng đã cuộn ngang từ lâu rồi, nên
       cắt giữa từ ở đó chỉ còn là chuyện cứu vãn, không phải đánh đổi.

       Mốc đo theo KHUNG CHỨA BẢNG, không theo khổ màn: xem chú thích
       container-type ở khối .ct-cuon-bang. */
    .ct-bang th {
        overflow-wrap: anywhere;
    }
}

.ct-bang td {
    padding: var(--wv-k1) var(--wv-k2);
    vertical-align: middle;
}

/* KHOẢNG ĐỆM HAI BÊN THU LẠI KHI KHUNG HẸP.

   Nửa rem mỗi bên nghe không đáng kể, nhưng bảng nước ngoài có mười hai
   cột, tức hai mươi tư lần khoảng đệm ấy trên một hàng. Thu còn một
   phần tư rem thì lấy lại đúng 48 điểm ảnh, và 48 ấy là phần cuối cùng
   giữ bảng rộng hơn khung ở khổ 1.024.

   Chỉ thu ở khổ hẹp. Trên màn rộng thì bảng đã vừa khung rồi, và khoảng
   đệm rộng là thứ giữ mười hai cột số không dính vào nhau. */
@container (max-width: 1100px) {
    .ct-bang th,
    .ct-bang td {
        padding-left: var(--wv-k1);
        padding-right: var(--wv-k1);
    }
}

/*
   VẠCH NGĂN GIỮA CÁC CỘT.

   Bảng này rộng mười hai cột và gần như toàn số. Mắt đọc ngang một dòng số dài rất dễ
   trượt sang cột bên cạnh, nhất là trên điện thoại lúc phải cuộn ngang: khi cuộn thì
   tiêu đề cột đã trôi khỏi tầm mắt, chỉ còn dãy số trần.

   CHỌN VẠCH NGĂN CHỨ KHÔNG TÔ MÀU XEN KẼ. Bảng đã tô sọc theo DÒNG rồi; chồng thêm sọc
   theo CỘT thì thành bàn cờ, và ô nào cũng có màu thì mấy màu thật sự có nghĩa là dòng
   đang chọn, dòng đã duyệt, ô tổng tiền lại chìm nghỉm. Vạch một điểm ảnh không tranh
   chỗ với màu nào cả, nó chỉ chia ranh giới.

   Vạch rất nhạt và không vẽ ở mép ngoài cùng, để bảng vẫn nhẹ chứ không thành lưới kẻ ô.
*/
.ct-bang th + th,
.ct-bang td + td {
    border-left: 1px solid var(--wv-vien-nhat, rgba(0, 0, 0, .07));
}

/* Vạch dưới hàng tiêu đề đậm hơn một chút, tách hẳn phần đầu bảng khỏi phần số. */
.ct-bang thead th {
    border-bottom: 1px solid var(--wv-vien);
}

/*
   Ô tổng tiền và ô thuế khấu trừ là hai cột kết quả, vạch bên trái chúng đậm hơn để
   mắt bắt ngay được chỗ chuyển từ phần nhập sang phần máy tính ra.
*/
.ct-bang th.ct-tong-tien,
.ct-bang td.ct-tong-tien {
    border-left: 1px solid var(--wv-vien);
}

.ct-bang .wv-o-nhap {
    width: 100%;
    min-width: 0;
}

/* Ô CHỌN PHẢI ĐỦ CHỖ HIỆN GIÁ TRỊ ĐANG CHỌN.

   Dòng min-width 0 ngay trên là để ô GÕ co được: một ô số chỉ hiện vài
   chữ số thì hẹp bao nhiêu cũng vẫn gõ và vẫn đọc được, vì con trỏ kéo
   chữ theo. Ô CHỌN thì không: nó không cuộn trong lòng nó, chữ vượt quá
   bề rộng là mất hẳn, và người dùng nhìn vào một ô trống trơn không
   biết mình đang chọn mức thuế nào.

   Đo ngày 15 tháng 9 năm 2026: ô Thuế rộng 46 điểm ảnh trong khi cần 89
   để hiện chữ 10%, ô Đơn vị tiền cũng 46 mà cần 91 để hiện chữ VND. Cả
   hai cùng bị chính dòng min-width 0 bóp xuống.

   Sàn này làm bảng rộng thêm chừng 50 điểm ảnh và đẩy khổ 1.024 về lại
   cảnh phải cuộn. Đó là đánh đổi đã cân nhắc và chọn theo đúng thứ tự
   ưu tiên của người dùng: đọc được giá trị quan trọng hơn khỏi phải
   kéo ngang. Không thu gọn nổi nữa thì cuộn, chứ không bóp tới mức
   không đọc được. */
.ct-bang select.wv-o-nhap {
    min-width: 4.5rem;
}

/* Ô chọn Loại phí bày cả câu, ví dụ Chưa phân loại, nên sàn của nó phải
   theo câu chứ không theo con số. */
.ct-bang select.ct-loai-phi {
    min-width: 9rem;
}

/* Ô chọn Đơn vị tiền chỉ ba chữ, nhưng ba chữ ấy vẫn phải đọc trọn:
   VND bị mũi tên gặm mất chữ cuối thì thành VNE. */
.ct-bang td.ct-c-tiente select {
    min-width: 5rem;
}

/* SÀN CHO Ô GÕ SỐ, nhỏ hơn sàn ô chọn nhưng không được bằng không.

   Ô gõ thì cuộn được trong lòng nó nên hẹp mấy cũng gõ được, nhưng ĐỌC
   thì khác hẳn: đo ngày 15 tháng 9 năm 2026, ô đơn giá rộng 43 điểm ảnh
   nên một dòng ghi 1.000.000 chỉ bày ra ba chữ số đầu. Người soát tờ
   nhìn lướt cả cột thấy toàn số 100, không có cách nào biết dòng nào
   một trăm nghìn và dòng nào một triệu nếu không bấm vào từng ô.

   Đơn giá là con số người ta gõ nhiều nhất và soát kỹ nhất trên tờ này,
   nên nó được sàn rộng hơn hẳn hai cột số lượng bên cạnh. */
.ct-bang input.ct-don-gia {
    min-width: 7rem;
}

/* Hai ô này chỉ chứa một tới ba chữ số, nhưng ô gõ số còn phải chừa chỗ cho hai nút tăng
   giảm của trình duyệt. Đo ngày 15 tháng 9 năm 2026 ở mức 2,75rem: ô hiện đúng một dấu
   chấm thay vì con số 1 nằm trong nó. */
.ct-bang input.ct-so-luong,
.ct-bang input.ct-o-thu-ba {
    min-width: 3.5rem;
}

/* ------------------------------------------------------------------
   BỀ RỘNG CỘT ĐI THEO NỘI DUNG, KHÔNG ĐI THEO CHỮ TIÊU ĐỀ.

   Đo ngày 15 tháng 9 năm 2026: bảng chi rộng 1.522 điểm ảnh trong một
   khung rộng 1.271, tức thừa ra 251 và cuộn ngang ở mọi khổ màn. Đào
   ra thì thủ phạm không phải số cột mà là chữ tiêu đề: cột Đã gồm thuế
   chỉ chứa ĐÚNG MỘT ô tích mà rộng 128 điểm ảnh, vì hàng tiêu đề của
   nó không xuống dòng được. Cột Thuế chứa số 10 cũng rộng 128, cột Số
   lần cũng vậy.

   Chữa bằng hai việc đi đôi. Một, cho chữ tiêu đề XUỐNG DÒNG thay vì
   kéo cả cột rộng ra. Hai, đặt bề rộng cột bằng đơn vị ch, tức bề rộng
   một chữ số, nên con số khai ở đây đọc thẳng ra là "cột này chứa được
   mấy chữ số".
   ------------------------------------------------------------------ */

.ct-bang th {
    line-height: 1.25;
}

.ct-c-stt {
    width: 3ch;
    color: var(--wv-chu-mo);
    font-variant-numeric: tabular-nums;
    text-align: center;
}

.ct-c-ten {
    min-width: 9rem;
}

/* Cột tiền: chứa được mười chữ số, tức tới hàng tỷ. Số lớn hơn vẫn gõ
   được, ô chỉ cuộn trong lòng nó chứ không đẩy cả bảng. */
.ct-c-tien {
    width: 10ch;
}

/* Cột số lượng và số lần: ba chữ số là đủ cho mọi đoàn. */
.ct-c-so {
    width: 5ch;
}

/* Cột thuế suất. Từ đợt này ô trong cột là ô CHỌN chứ không phải ô gõ
   số, nên bề rộng phải đủ cho chuỗi dài nhất trong danh sách cộng thêm
   chỗ của mũi tên bung, chứ không còn đo theo số chữ số gõ vào. */
.ct-c-thue {
    width: 8ch;
}

/* Ô chọn thuế suất không được phép nở theo mục dài nhất của nó: một mức
   lẻ ghép thêm vào danh sách là một mục dài hơn hẳn, và ô nở ra kéo cả
   cột rộng theo. Ghim vào bề rộng ô chứa rồi cho chữ trong ô tự cắt. */
.ct-thue-suat {
    width: 100%;
    min-width: 0;
}

/* Cột Đã gồm thuế của bảng chi. Chỉ chứa MỘT ô tích, nên nó chỉ cần
   đủ chỗ cho ô tích ấy; chữ tiêu đề dài thì xuống dòng. */
.ct-c-gom {
    width: 4ch;
    text-align: center;
}

.ct-c-tiente {
    width: 8ch;
}

.ct-c-doitac {
    min-width: 5rem;
}

.ct-c-ghi {
    min-width: 5rem;
}

.ct-c-duyet {
    width: 4ch;
    text-align: center;
}

/* Cột Xóa bày cả hình lẫn chữ, giống mẫu. Chỉ để mỗi hình thì trên máy nào hình
   không vẽ được là ô trông như trống trơn, người dùng tưởng không xóa được. Chữ là
   thứ chắc chắn hiện ở mọi máy. */
.ct-c-xoa {
    width: 5ch;
    text-align: center;
    white-space: nowrap;
}

/* Nowrap ở trên là để CÁI NÚT không vỡ làm đôi, không phải để chữ tiêu
   đề giữ một dòng. Hai chữ Hành động đứng liền nhau bắt cột rộng 99
   điểm ảnh trong khi cái nút bên dưới chỉ cần 43, và 56 điểm ảnh chênh
   ra đúng là phần làm bảng vượt khung ở khổ 1.024. */
.ct-bang th.ct-c-xoa {
    white-space: normal;
}

.ct-nut-xoa {
    gap: var(--wv-k1);
    align-items: center;
    justify-content: center;
    white-space: nowrap;
}

.ct-nut-xoa-chu {
    font-size: var(--wv-cd-12);
    font-weight: 600;
}

/* CHỮ "XÓA" CHỈ HIỆN Ở MÀN RỘNG.
   Chú thích của cột Xóa nói rõ vì sao nút ấy có cả hình lẫn chữ: trên
   máy nào hình không vẽ được thì ô trông như trống trơn. Lý do ấy còn
   nguyên, nên chữ không bị gỡ bỏ mà chỉ lùi khỏi tầm mắt ở khổ hẹp,
   nơi từng điểm ảnh bề ngang đều phải giành. Máy đọc màn hình vẫn đọc
   được đủ chữ, và thuộc tính title của nút cũng vẫn nói "Xóa dòng". */
@media (max-width: 1200px) {
    .ct-nut-xoa-chu {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }
}

/*
   BA CỘT NÀY PHẢI LẤY LẠI QUYỀN CĂN GIỮA CỦA CHÍNH CHÚNG, y hệt việc năm lớp căn phải đã
   phải làm ở wvep-thanh-phan.css.

   .ct-c-stt, .ct-c-gom và .ct-c-xoa đều khai text-align center, nhưng chúng chỉ nặng MỘT
   mảnh, trong khi .wv-bang th, .wv-bang td khai text-align left và nặng HAI mảnh. Bảng
   chiết tính mang cả .wv-bang lẫn .ct-bang, nên luật căn trái thắng, bất kể thứ tự nạp
   hai tệp.

   Đo được ngày 26 tháng 8 năm 2026 ở khổ 1440, trước khi vá: ô số thứ tự "1" rộng 128 điểm
   ảnh nằm cách mép trái 8 và cách mép phải 113, tức nó nằm sát mép trái chứ không giữa
   dòng nào cả. Số ô dính: 98 ô trên hai màn chiết tính, gồm 46 ô số thứ tự, 28 ô cột Xóa và
   24 ô cột Đã gồm thuế.

   Chữa bằng bộ chọn GHÉP đúng lối quy tắc 11 đã chốt, chứ không đổi thứ tự nạp tệp.
*/
.wv-bang th.ct-c-stt,
.wv-bang td.ct-c-stt,
.wv-bang th.ct-c-gom,
.wv-bang td.ct-c-gom,
.wv-bang th.ct-c-xoa,
.wv-bang td.ct-c-xoa {
    text-align: center;
}

.ct-bang td.ct-tong-tien,
.ct-bang td.ct-khau-tru {
    background: var(--wv-xam-50);
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

.ct-bang tbody tr:hover > td {
    background: var(--wv-chinh-nen);
}

.ct-bang tbody tr:hover > td.ct-tong-tien,
.ct-bang tbody tr:hover > td.ct-khau-tru {
    background: var(--wv-chinh-nen-dam);
}

/*
   DÒNG ĐÃ DUYỆT THÌ KHÓA LẠI. Người soát đã đánh dấu duyệt cho một con số thì không ai
   được sửa con số nằm dưới dấu ấy nữa. Ô vẫn đọc được và vẫn gửi lên như cũ, chỉ không
   gõ vào được, và bỏ dấu duyệt là mở lại ngay. Đây chỉ là lớp chặn của màn hình, chốt
   chặn thật của cả bảng vẫn nằm ở bốn mốc duyệt bên tầng dịch vụ.
*/
.ct-bang tbody tr:has(.ct-duyet:checked) > td {
    background: var(--wv-tot-nen);
}

.ct-bang tbody tr:has(.ct-duyet:checked) .wv-o-nhap {
    background: var(--wv-tot-nen);
    border-color: var(--wv-tot-vien);
    color: var(--wv-chu-mo);
    pointer-events: none;
}

.ct-bang tbody tr:has(.ct-duyet:checked) .ct-nut-xoa {
    opacity: .35;
    pointer-events: none;
}

.ct-duyet {
    width: 1.05rem;
    height: 1.05rem;
    accent-color: var(--wv-tot);
    cursor: pointer;
}

/* ---------- Dòng chân của một nhóm ---------- */

.ct-dong-them > td {
    background: var(--wv-tam-mo);
    border-top: 2px solid var(--wv-vien);
    font-variant-numeric: tabular-nums;
}

.ct-dong-them .ct-nhom-tong-tien,
.ct-dong-them .ct-nhom-khau-tru {
    color: var(--wv-chinh-dam);
    font-weight: 700;
}

.ct-nut-them {
    display: inline-flex;
    gap: var(--wv-k1);
    align-items: center;
    padding: var(--wv-k1) var(--wv-k2);
    background: none;
    border: 0;
    border-radius: var(--wv-bo-1);
    color: var(--wv-chinh);
    cursor: pointer;
    font: inherit;
    font-size: var(--wv-cd-13);
    font-weight: 600;
}

.ct-nut-them:hover {
    background: var(--wv-chinh-nen);
    text-decoration: underline;
}

.ct-nut-vat {
    color: var(--wv-nhan-chu);
}

.ct-nut-vat:hover {
    background: var(--wv-nhan-nen);
}

.ct-nut-xoa {
    display: inline-flex;
    padding: var(--wv-k1);
    background: none;
    border: 0;
    border-radius: var(--wv-bo-1);
    color: var(--wv-xau);
    cursor: pointer;
}

.ct-nut-xoa:hover {
    background: var(--wv-xau-nen);
}

/* ---------- Dòng cố định của phần chi phí trưởng đoàn ---------- */

.ct-dong-co-dinh > td:nth-child(2) {
    font-weight: 600;
}

/* ---------- Thanh nút cuối ---------- */

.ct-thanh-nut {
    position: sticky;
    bottom: 0;
    z-index: 3;
    display: flex;
    flex-wrap: wrap;
    gap: var(--wv-k2);
    margin-top: var(--wv-k6);
    padding: var(--wv-k3) var(--wv-k4);
    background: var(--wv-tam);
    border: 1px solid var(--wv-vien);
    border-radius: var(--wv-bo-3);
    box-shadow: var(--wv-bong-3);
}

/* ---------- Bề rộng hẹp ---------- */

@media (max-width: 720px) {
    .ct-phan-dau {
        flex-direction: column;
        align-items: flex-start;
    }

    .ct-lich-su-ds li {
        grid-template-columns: 1fr;
        gap: 0;
    }

    /*
       THANH NÚT VẪN DÍNH ĐÁY Ở MÀN HẸP.

       Trước để static ở đây vì sợ nó ăn chỗ. Nhưng chính màn hẹp mới là nơi cần nó: tờ
       chiết tính cuộn dài hàng chục màn hình, bỏ dính thì muốn lưu phải cuộn xuống tận
       đáy, mà giữa đường lỡ tay chạm ra ngoài là mất công gõ lại.

       Đổi cách xếp thay vì bỏ dính: nút chính chiếm trọn một hàng, mấy nút phụ chia đều
       hàng dưới. Hai hàng, cao chừng bảy rem, đổi lại lúc nào cũng với tới nút Lưu.
    */
    .ct-thanh-nut {
        bottom: 0;
        gap: var(--wv-k1);
        padding: var(--wv-k2);
        box-shadow: 0 -4px 12px rgba(0, 0, 0, .1);
    }

    .ct-thanh-nut .wv-nut-chinh {
        flex: 1 1 100%;
        justify-content: center;
    }

    /*
       NÚT PHỤ CHIA ĐÔI HÀNG, không dàn hết trên một hàng.

       Bản trước cho mỗi nút một phần bằng nhau của hàng rồi cắt chữ thừa bằng dấu ba
       chấm. Màn chi tiết có tới bốn nút phụ, nên trên điện thoại nút nào cũng còn lại
       vài chữ đầu: "In dự trù tou", "In bảng chiết t", "Quay lại danh s". Một hàng nút
       mà đọc không ra tên việc thì thà xuống hàng còn hơn.

       Hai nút một hàng, chữ hiện đủ, không cắt chữ nào.
    */
    .ct-thanh-nut .wv-nut-phu {
        flex: 1 1 calc(50% - var(--wv-k1));
        min-width: 0;
        justify-content: center;
        padding-left: var(--wv-k2);
        padding-right: var(--wv-k2);
        font-size: var(--wv-cd-12);
        white-space: normal;
        text-align: center;
    }
}

/* ---------- Bốn số chạy trên thanh việc ---------- */

/*
   Thanh việc giờ có hai vế: số bên trái, nút bên phải. Ở màn rộng hai vế nằm cùng một
   hàng và số đẩy nút về cuối; ở màn hẹp số xuống một hàng riêng phía trên nút, vì bấm
   nhầm nút Lưu là chuyện đắt hơn nhiều so với đọc số chậm một nhịp.
*/
.ct-thanh-nut {
    align-items: center;
    justify-content: space-between;
}

.ct-so-nhanh {
    display: flex;
    flex: 1 1 auto;
    flex-wrap: wrap;
    gap: var(--wv-k2) var(--wv-k5);
    align-items: baseline;
    min-width: 0;
}

.ct-so-mot {
    display: flex;
    gap: var(--wv-k2);
    align-items: baseline;
    white-space: nowrap;
}

.ct-so-nhan {
    color: var(--wv-chu-mo);
    font-size: var(--wv-cd-12);
}

.ct-so-gia-tri {
    font-variant-numeric: tabular-nums;
    font-size: var(--wv-cd-15);
    font-weight: 700;
}

.ct-so-lai .ct-so-gia-tri {
    color: var(--wv-tot);
}

/* Lãi âm đổi màu, vì một con số âm nằm lẫn giữa mấy số dương rất dễ đọc lướt qua. */
.ct-so-lai .ct-so-gia-tri.ct-so-am {
    color: var(--wv-xau);
}

.ct-thanh-viec {
    display: flex;
    flex-wrap: wrap;
    gap: var(--wv-k2);
    align-items: center;
}

/* ---------- Lớp phủ chọn giá nhà cung cấp ---------- */

.ct-lop-phu {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--wv-k4);
    background: rgba(0, 32, 56, .45);
}

.ct-lop-phu[hidden] {
    display: none;
}

.ct-hop-gia {
    display: flex;
    flex-direction: column;
    width: min(64rem, 100%);
    max-height: min(42rem, 90vh);
    background: var(--wv-tam);
    border-radius: var(--wv-bo-3);
    box-shadow: 0 24px 64px rgba(0, 0, 0, .3);
}

.ct-gia-dau {
    display: flex;
    gap: var(--wv-k3);
    align-items: flex-start;
    justify-content: space-between;
    padding: var(--wv-k4) var(--wv-k4) var(--wv-k2);
    border-bottom: 1px solid var(--wv-vien);
}

.ct-gia-tieu-de {
    margin: 0;
    font-size: var(--wv-cd-16);
}

.ct-gia-mo-ta {
    margin: var(--wv-k1) 0 0;
    color: var(--wv-chu-mo);
    font-size: var(--wv-cd-13);
}

.ct-gia-dong {
    flex: 0 0 auto;
    padding: var(--wv-k1);
    border: 0;
    border-radius: var(--wv-bo-2);
    background: none;
    color: var(--wv-chu-mo);
    cursor: pointer;
}

.ct-gia-dong:hover {
    background: var(--wv-xam-100);
    color: var(--wv-chu);
}

.ct-gia-loc {
    padding: var(--wv-k3) var(--wv-k4);
}

.ct-gia-than {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 0 var(--wv-k4) var(--wv-k4);
}

.ct-gia-bang th,
.ct-gia-bang td {
    vertical-align: middle;
}

/*
   Vòng chờ. Chỉ hiện khi máy chủ trả về chậm; đoạn mã dựng nó ngay lúc gửi yêu cầu, còn
   mắt người thì không kịp thấy nếu máy chủ trả về nhanh, nên không cần hẹn giờ riêng.
*/
.ct-gia-cho {
    display: flex;
    gap: var(--wv-k3);
    align-items: center;
    padding: var(--wv-k6) 0;
    color: var(--wv-chu-mo);
}

.ct-gia-vong {
    display: inline-block;
    width: 1.25rem;
    height: 1.25rem;
    border: 2px solid var(--wv-vien);
    border-top-color: var(--wv-chinh);
    border-radius: 50%;
    animation: ct-quay .7s linear infinite;
}

@keyframes ct-quay {
    to { transform: rotate(360deg); }
}

/* Máy đặt chế độ giảm chuyển động thì vòng đứng yên, chữ bên cạnh vẫn nói đang tải. */
@media (prefers-reduced-motion: reduce) {
    .ct-gia-vong {
        animation: none;
    }
}

.ct-gia-loi {
    padding: var(--wv-k4) 0;
    color: var(--wv-xau);
}

/* Trang không cuộn sau lưng lớp phủ, không thì cuộn chuột trong hộp là trang chạy theo. */
body.ct-dang-mo-gia {
    overflow: hidden;
}

@media (max-width: 760px) {
    .ct-hop-gia {
        max-height: 92vh;
    }

    .ct-gia-dau,
    .ct-gia-loc,
    .ct-gia-than {
        padding-left: var(--wv-k3);
        padding-right: var(--wv-k3);
    }

    /* Ở khổ điện thoại số xuống một hàng riêng, nút giữ nguyên hàng dưới cùng. */
    .ct-so-nhanh {
        flex: 1 1 100%;
        gap: var(--wv-k1) var(--wv-k4);
    }

    .ct-so-gia-tri {
        font-size: var(--wv-cd-13);
    }

    .ct-thanh-viec {
        flex: 1 1 100%;
        gap: var(--wv-k1);
    }
}

/* ---------- Danh sách giá xổ ra ---------- */

/*
   Hai mươi dòng trong một khung cuộn riêng, không để nó đẩy dài cả hộp. Người dùng gõ
   thêm chữ để thu hẹp chứ không cuộn tìm, nên khung này cố ý không cao.
*/
.ct-gia-than .wv-bang-cuon {
    max-height: 24rem;
    overflow-y: auto;
}

.ct-gia-bang tbody tr:hover {
    background: var(--wv-xam-50);
}

/* Dòng thuộc bảng giá không phủ ngày khởi hành. Vẫn chọn được, nhưng phải thấy ngay. */
.ct-gia-ngoai-han {
    background: var(--wv-cam-50);
}

.ct-gia-ngoai-han:hover {
    background: var(--wv-cam-50);
}

.ct-gia-nhan-ngoai {
    margin-top: var(--wv-k1);
    color: var(--wv-nhan-dam);
    font-size: var(--wv-cd-11);
    font-weight: 600;
}

/* ---------- Ô Loại phí của dòng chi, mã chức năng DM-20 ---------- */

/*
   Ô này nằm BÊN TRONG ô Tên chiết tính chứ không thành một cột riêng, và đó là lựa chọn
   có lý do đo được, đúng quy tắc 28: ở khổ 1280 khung nội dung rộng 942 điểm ảnh trong
   khi bảng chi đã đòi hơn 1700, nên thêm cột thứ mười sáu thì hoặc cột Tổng tiền bị đẩy
   ra ngoài khung nhìn, hoặc chính ô Loại phí nằm ngoài. Cả hai đều hỏng, vì người lập
   ĐANG GÕ cái nhãn này chứ không đi tra nó.

   Chữ nhỏ hơn và màu mờ hơn ô tên để mắt đọc ra ngay đâu là tên hạng mục, đâu là nhãn
   phân loại. Bỏ trống vẫn lưu được, nên nó không mang dáng một ô bắt buộc.
*/
.ct-loai-phi {
    margin-top: var(--wv-k1);
    color: var(--wv-chu-mo);
    font-size: var(--wv-cd-12);
}


/* ---------- Tab Thực hiện và phần tô chỗ điều hành đã sửa, 9 tháng 9 năm 2026 ---------- */

/*
   MÀU ĐỎ Ở ĐÂY KHÔNG PHẢI MÀU BÁO LỖI. Một dòng điều hành sửa không phải một dòng sai;
   nó là dòng người đọc cần dừng mắt lại. Nên dùng viền trái đậm cộng nền rất nhạt, chứ
   không tô đỏ cả chữ: chữ đỏ trên một bảng mười lăm cột đọc rất mệt, và khi mười dòng
   cùng đỏ thì không dòng nào nổi lên nữa.

   Viền TRÁI chứ không phải viền quanh: bảng chi cuộn ngang, và viền quanh thì cạnh phải
   của nó nằm ngoài khung nhìn ở mọi khổ màn dưới 1700 điểm ảnh.
*/
.ct-dong-da-doi > td {
    background: var(--wv-xau-nen);
}

.ct-dong-da-doi > td:first-child {
    border-left: 3px solid var(--wv-xau);
}

.ct-nhan-doi {
    margin-top: var(--wv-k1);
    color: var(--wv-xau-chu);
    font-size: var(--wv-cd-11);
    font-weight: 600;
}

.ct-the-doi {
    border-color: var(--wv-xau-vien);
}

.ct-the-doi > .wv-the-dau {
    background: var(--wv-xau-nen);
    color: var(--wv-xau-chu);
}

.ct-danh-sach-bo {
    margin: var(--wv-k2) 0 0;
    padding-left: var(--wv-k4);
}

/* Dòng đã bị bỏ khỏi bảng thì gạch ngang, đúng cái nó là: nội dung này không còn nữa. */
.ct-ten-dong-bo {
    text-decoration: line-through;
    color: var(--wv-chu-mo);
}

/*
   Con số lệch dự trù. Chỉ tô khi lệch theo chiều XẤU, tức chi thật vượt dự trù. Tô cả
   hai chiều thì một bảng tiết kiệm được tiền cũng đỏ rực, và người đọc học được rằng màu
   đỏ ở đây không mang tin gì.
*/
.ct-so-lech {
    color: var(--wv-xau-chu);
    font-weight: 600;
}

.ct-loi-nhac {
    margin-top: var(--wv-k3);
    padding: var(--wv-k2) var(--wv-k3);
    border-left: 3px solid var(--wv-nhac-vien);
    background: var(--wv-nhac-nen);
    color: var(--wv-chu);
}


/* ---------- Cột Đối tác: tên ở trên, mã ở dưới, 13 và 14 tháng 10 năm 2026 ---------- */

/*
   Ô Đối tác ở màn xem chỉ còn TÊN và MÃ NCC, bấm mã ra thẻ thông tin (Lâm, 13 và 14/10/2026). Tên đầy
   đủ, mã số thuế, tài khoản từng chồng ba bốn tầng chữ dưới tên và làm dòng chi "kéo ra dài quá"; nay
   chúng nằm trong thẻ _TheDoiTac.

   Lúc sửa thì ô chọn bày tên, và sàn 9rem ở lại cho riêng chế độ ấy để tên đọc được nhiều chữ hơn. Màn
   xem không cần sàn: tên một dòng tự giữ bề rộng của nó, tới trần của .ct-ten-ncc.
*/
.ct-o-doi-tac-sua {
    min-width: 9rem;
}

/* Tên nhà cung cấp ở màn xem: MỘT dòng, dài quá thì cắt ba chấm, chú thích khi rê chuột kể đủ. Ô bảng
   giãn theo bề rộng của chữ không ngắt, nên phải có trần thì ba chấm mới hiện. Tên trên prod ngày 14/10
   dài trung bình 34 ký tự, phần nhiều viết hoa, có tên mang đuôi ghi chú trong ngoặc tới năm sáu chục.

   Trần 9rem, bằng đúng sàn của ô chọn lúc sửa. Đo trên tờ có một dòng mang nhà cung cấp: trần 14rem
   làm khổ 390 bóp tiêu đề Thuế khấu trừ còn 23px, chữ đổ dọc từng chữ cái, cao 168px; khổ 1024 thì
   bảng tràn khung 28px. Trần 9rem giữ đúng hai khổ ấy như hồi ô chỉ có mã.

   Từ 1600px mới nới lên 14rem cho đọc trọn tên thường gặp. Mốc lấy từ tờ RỘNG NHẤT, tờ đã có hai cột
   Thực tế và Lệch: tên 14rem làm bảng tràn khung 121px ở khổ 1440 và 25px ở khổ 1536, từ 1600 trở lên
   thì vừa. */
.ct-ten-ncc {
    display: block;
    max-width: 9rem;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

@media (min-width: 1600px) {
    .ct-ten-ncc {
        max-width: 14rem;
    }
}

/* Mã nhà cung cấp, ở hộp lấy giá và ở ô Đối tác màn xem.
   Không cho tách đôi: NCC-0001 gãy giữa dòng là hai mẩu chẳng mẩu nào tra được. */
.ct-ma-ncc {
    color: var(--wv-chu-mo);
    font-size: var(--wv-cd-12);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Mã ở ô Đối tác là ĐƯỜNG BẤM: màu đường dẫn và gạch chân chấm để mắt biết bấm được, khác chữ mờ của
   hộp lấy giá. Cỡ, khoảng hở và gạch chân lấy đúng dòng mã dưới ô chọn lúc sửa (.wv-chon-go-ma-chon,
   .wv-chon-go-ma-xem), để màn xem và lúc sửa cùng một dáng: tên trên, mã nhỏ dưới. */
.ct-ma-ncc-mo {
    display: inline-block;
    max-width: 100%;
    margin-top: var(--wv-k1);
    color: var(--wv-chinh);
    line-height: 1.25;
    letter-spacing: .02em;
    text-decoration: underline dotted;
    text-underline-offset: 2px;
}

.ct-ma-ncc-mo:hover {
    color: var(--wv-chinh-dam);
    text-decoration-style: solid;
}

/* ---------- Thẻ thông tin nhà cung cấp, 13 tháng 10 năm 2026 ---------- */

/*
   Ruột thẻ _TheDoiTac, dời nguyên vào thân hộp thoại. Hộp rộng 34rem nên lưới nhãn và giá trị đi HAI
   cột thay vì ba của màn rộng; ô dài (tên đầy đủ, ngân hàng, địa chỉ, người liên hệ) trải hết hàng.
*/
.ct-the-ncc {
    display: flex;
    flex-direction: column;
    gap: var(--wv-k4);
}

.ct-the-ncc .wv-luoi-xem {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ct-the-ncc .wv-luoi-xem > div > span:not(.wv-nhan) {
    overflow-wrap: anywhere;
}

/* Chỗ THIẾU nói bằng màu nhắc chứ không bằng màu lỗi: chưa khai là một việc còn phải làm. */
.ct-the-ncc-thieu {
    color: var(--wv-nhac-chu);
}

.ct-the-ncc-chan {
    display: flex;
    flex-wrap: wrap;
    gap: var(--wv-k2);
    padding-top: var(--wv-k3);
    border-top: 1px solid var(--wv-vien);
}

@media (max-width: 520px) {
    .ct-the-ncc .wv-luoi-xem {
        grid-template-columns: minmax(0, 1fr);
    }
}


/* ---------- Thẻ Bảng thực hiện ở màn danh sách, 10 tháng 9 năm 2026 ---------- */

/*
   Ô "chưa có đoàn" gộp sáu cột số thành một câu. Chữ mờ và nghiêng để mắt lướt qua nhanh:
   dòng ấy không có gì để đọc, nó chỉ cho biết đừng tìm số ở đây.
*/
.ct-chua-co-doan {
    color: var(--wv-chu-mo);
    font-style: italic;
}


/* ---------- Duyệt từng dòng và chốt chi thực tế, 10 tháng 9 năm 2026 ---------- */

/*
   Thanh duyệt DÍNH ở đỉnh vùng cuộn, cùng lối với thanh chọn nhiều của màn nhà cung cấp.
   Người điều hành soát một bảng ba mươi dòng phải cuộn qua mấy màn hình, mà nút duyệt lại
   nằm ở đâu đó phía trên thì họ cuộn lên cuộn xuống mỗi lần tích xong một cụm.
*/
.ct-thanh-duyet {
    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);
}

/* Ô tích duyệt nằm giữa một cột hẹp, cho nó chỗ bấm rộng hơn con dấu tích. */
.ct-c-duyet input[type="checkbox"] {
    width: 1.1rem;
    height: 1.1rem;
    cursor: pointer;
}

/* Dòng tổng của cột Thực tế: đậm như mọi dòng tổng khác, nhưng KHÔNG tô màu lệch. Tổng
   của một cột dở dang thì tô đỏ chỉ nói rằng kế toán chưa gõ xong. */
.ct-nhom-thuc-te {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

/* Ô nhập lý do lệch chiếm trọn bề rộng cột, vì câu trả lời thường là một câu chứ không
   phải một từ. */
.ct-bang-thuc-te input[type="text"] {
    width: 100%;
    min-width: 14rem;
}

/* ------------------------------------------------------------------
   CỘT TÊN DÍNH BÊN TRÁI KHI BẢNG PHẢI CUỘN NGANG.

   Mười bốn cột không có cách nào vừa một màn dưới 1.100 điểm ảnh mà
   vẫn đọc được. Ở khổ ấy bảng buộc phải cuộn, và cái giá thật của lượt
   cuộn không phải là động tác cuộn: nó là chuyện cuộn sang phải vài
   cột thì không còn biết mình đang ở dòng nào nữa.

   Ghim cột tên lại thì cái giá ấy biến mất. Người dùng cuộn tới cột
   Thuế khấu trừ mà vẫn thấy dòng ấy tên là gì.

   KHÔNG ẨN CỘT NÀO, và đó là chủ ý. Ẩn một cột ở khổ hẹp nghĩa là
   người ngồi máy nhỏ không nhập nổi cột ấy, mà bảng chiết tính thì
   không có cột nào thừa: mỗi cột là một con số đi thẳng vào tiền thuế
   hoặc tiền lãi.
   ------------------------------------------------------------------ */

@media (max-width: 1400px) {
    .ct-bang th.ct-c-ten,
    .ct-bang td.ct-c-ten {
        position: sticky;
        left: 0;
        z-index: 2;
        background: var(--wv-nen, #fff);
        box-shadow: 1px 0 0 var(--wv-vien, #d5dae0);
    }

    .ct-bang thead th.ct-c-ten {
        z-index: 3;
    }

    /* Cột số thứ tự đi liền cột tên, ghim theo luôn thì hai cột ấy
       thành một khối nhận diện dòng. */
    .ct-bang th.ct-c-stt,
    .ct-bang td.ct-c-stt {
        position: sticky;
        left: 0;
        z-index: 2;
        background: var(--wv-nen, #fff);
    }

    .ct-bang th.ct-c-ten,
    .ct-bang td.ct-c-ten {
        left: 3ch;
    }
}

/* ------------------------------------------------------------------
   SỬA TẠI CHỖ TRÊN MÀN CHI TIẾT (quy tắc 57).

   Ô số dùng lại đúng lớp của màn lập (ct-don-gia, ct-so-luong, ct-o-thu-ba) nên nhận
   luôn các sàn bề rộng đã đo ở trên. Ô tên dòng thì màn lập đặt trong cột ct-c-ten, màn
   chi tiết không có lớp ấy trên ô, nên sàn khai riêng ở đây: tên dòng là chữ, hẹp hơn
   chừng này thì người sửa chỉ thấy nửa chữ đầu.
   ------------------------------------------------------------------ */
.ct-bang input.ct-o-sua-ten {
    min-width: 12rem;
}

/* ------------------------------------------------------------------
   BẢNG GIÁ BÁN THEO LOẠI KHÁCH.

   Đo ngày 24 tháng 9 năm 2026: cột Hoa hồng ghim 150 điểm ảnh cho cả ô gõ số lẫn ô chọn
   kiểu, ô chọn giữ 6rem nên ô gõ còn chưa tới 50 điểm ảnh, không gõ nổi một con số. Các
   cột khác ghim mỗi cột một số nên cột dài cột ngắn. Bỏ ghim, cho cột giãn theo ô, và
   đặt sàn cho từng ô: cặp gõ số và chọn kiểu không co dưới 13.5rem, ba cột tiền chỉ đọc
   giữ 7.5rem để tiêu đề gãy nhiều nhất hai dòng.
   ------------------------------------------------------------------ */
.ct-bang-gia-khach th {
    line-height: 1.25;
}

.ct-bang-gia-khach input.wv-o-so {
    min-width: 5rem;
}

.ct-bang-gia-khach input.ct-gia-so-khach {
    max-width: 7rem;
}

.ct-bang-gia-khach th.ct-gk-tien {
    width: 7.5rem;
}

.ct-bang-gia-khach .wv-o-doi {
    min-width: 13.5rem;
}

.ct-bang-gia-khach .wv-o-doi .wv-o-nhap:first-child {
    min-width: 6.5rem;
}

.ct-bang-gia-khach .wv-o-doi select {
    width: auto;
    min-width: 6.5rem;
}

/* ------------------------------------------------------------------
   TÁCH TIỀN (QuyTacTienTeChietTinh, Lâm chốt ngày 24/09/2026).

   Dòng mà nhãn tiền và tỷ giá nói hai điều khác nhau thì tô đỏ ngay trên bảng, kèm một câu
   ngắn dưới tên dòng; cửa lưu chặn lượt ghi cho tới khi sửa xong. Ô tỷ giá của dòng VND khóa
   ở 1 nên nhìn khác ô gõ được.
   ------------------------------------------------------------------ */
.ct-dong-loi-tien > td {
    background: var(--wv-xau-nen);
}

.ct-loi-tien {
    margin-top: var(--wv-k1);
    color: var(--wv-xau-chu);
    font-size: var(--wv-cd-12);
    font-weight: 700;
}

.ct-bang select.ct-o-loi {
    border-color: var(--wv-xau);
    box-shadow: 0 0 0 2px var(--wv-xau-nen);
}

/* Ô TỶ GIÁ của bản nước ngoài chứa số năm chữ số (25.400, 3.500), không phải một hai chữ số như
   Số lần. Đo ngày 24/09/2026: ô rộng 56 điểm ảnh chỉ bày "35" cho tỷ giá 3.500. */
table[data-ct-ngoai="1"] input.ct-o-thu-ba,
.ct-ban[data-ban="2"] input.ct-o-thu-ba {
    min-width: 6rem;
}

.ct-bang input.ct-o-thu-ba[readonly] {
    background: var(--wv-xam-50);
    color: var(--wv-chu-mo);
}

/* Phần chi theo từng loại tiền: tiền gốc để trả đúng đối tác, kèm số đã quy ra đồng. */
.ct-tach-tien {
    display: flex;
    flex-wrap: wrap;
    gap: var(--wv-k2);
    margin: var(--wv-k2) 0 var(--wv-k3);
}

.ct-tach-tien-o {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--wv-k1) var(--wv-k2);
    padding: var(--wv-k2) var(--wv-k3);
    border: 1px solid var(--wv-vien);
    border-radius: 6px;
    background: var(--wv-xam-50);
    font-variant-numeric: tabular-nums;
}

.ct-tach-tien-ma {
    font-size: var(--wv-cd-12);
    font-weight: 700;
    letter-spacing: .04em;
    color: var(--wv-chu-mo);
}

.ct-tach-tien-phu {
    font-size: var(--wv-cd-12);
    color: var(--wv-chu-mo);
}

/* Ô TỶ GIÁ RIÊNG của dòng ngoại tệ bản trong nước nằm ngay dưới ô chọn tiền tệ, không thành
   cột mới. Ẩn tường minh khi dòng là VND, kẻo một luật display nào khác đè mất thuộc tính hidden. */
.ct-bang input.ct-ty-gia-rieng {
    margin-top: var(--wv-k1);
    min-width: 6rem;
}

.ct-bang input.ct-ty-gia-rieng[hidden] {
    display: none;
}

/* ------------------------------------------------------------------
   Mục Báo cáo chiết tính (25/09/2026): lưới thẻ ở trang đầu mục và màu
   dòng của bảng báo cáo. Dòng xấu là tour lỗ, chi vượt dự trù hay bảng
   sắp khởi hành mà chưa duyệt; dòng nhắc là bảng chờ lâu hay ngoại tệ
   đang dùng nhiều tỷ giá.
   ------------------------------------------------------------------ */
.ct-bc-luoi {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(16rem, 100%), 1fr));
    gap: var(--wv-k3);
}

.ct-bc-the {
    display: flex;
    flex-direction: column;
    gap: var(--wv-k1);
    padding: var(--wv-k4);
    background: var(--wv-tam);
    border: 1px solid var(--wv-vien);
    border-radius: var(--wv-bo-3);
    color: var(--wv-chu);
    text-decoration: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.ct-bc-the:hover,
.ct-bc-the:focus-visible {
    border-color: var(--wv-nhan-vien);
    box-shadow: var(--wv-bong-2);
}

.ct-bc-ten {
    font-weight: 600;
    color: var(--wv-nhan-dam);
}

.wv-bang tr.ct-bc-dong-xau > td {
    background: var(--wv-xau-nen);
}

.wv-bang tr.ct-bc-dong-nhac > td {
    background: var(--wv-nhac-nen);
}

@media (prefers-reduced-motion: reduce) {
    .ct-bc-the {
        transition: none;
    }
}