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

/*
   CÁI VỎ CỦA WVEP: thanh điều hướng dọc, thanh điều hướng ngang, chân trang.

   HÌNH DẠNG. Thanh dọc chạy suốt từ mép trên xuống mép dưới màn hình và mang nền xanh
   đậm của thương hiệu, logo công ty đặt ở đỉnh thanh. Thanh ngang bắt đầu từ mép phải
   của thanh dọc, nền sáng, dính ở mép trên khi cuộn, chứa nút đóng mở, đường dẫn phân
   cấp, ô tìm nhanh, ô chọn chi nhánh, chuông và khối tài khoản. Vùng nội dung nằm dưới
   thanh ngang và bên phải thanh dọc.

   VÌ SAO THANH DỌC CHẠY SUỐT CHIỀU CAO chứ không nằm dưới một thanh ngang phủ hết bề
   ngang. Logo phải ngồi ở góc trên bên trái, đó là chỗ mắt người tìm nhận diện đầu tiên.
   Thanh ngang phủ hết bề ngang thì góc ấy thuộc về thanh ngang, còn thanh dọc bắt đầu
   từ giữa chừng và trông như một cái hộp gắn thêm chứ không phải xương sống của phần mềm.

   BA DẠNG CỦA THANH DỌC:
     mở rộng        15,5rem, thấy logo ngang chữ vàng kim và đủ chữ của từng mục
     dải biểu tượng 4rem, chỉ còn hình, chữ lùi khỏi tầm mắt nhưng máy đọc vẫn đọc được
     ngăn trượt     ở màn hẹp, khuất ngoài mép trái cho tới khi bấm nút ba gạch

   HAI DẠNG ĐẦU DÙNG CHUNG MỘT BỘ LUẬT, phân biệt bằng KHỐI THEO BỀ NGANG CỦA CHÍNH
   THANH chứ không bằng lớp CSS hay bằng bề rộng cửa sổ. Đây là điểm then chốt của tệp
   này: thanh co lại vì người dùng bấm nút, hay vì cửa sổ hẹp dưới 1200 nên hệ thống tự
   thu, hay vì bất cứ lý do nào về sau, thì bộ luật dải biểu tượng vẫn tự động đúng. Viết
   theo lớp CSS thì mỗi lý do mới là một bản sao của cả bộ luật, và bản sao thứ hai bao
   giờ cũng sót vài dòng.

   MÀU CHỮ TRÊN NỀN CAM VÀNG. #ffab0b với chữ trắng chỉ đạt tương phản 1,9 lần, đọc
   không nổi. Nên mọi chỗ đặt chữ lên nền cam vàng đều dùng chữ tối #6b4400, đạt 6,4
   lần. Cam vàng ở đây làm gạch chỉ và viền tiêu điểm là chính, ít khi làm nền chữ.

   Tệp này nạp SAU wvep.css và wvep-thanh-phan.css, và TRƯỚC wvep-cogian.css. Luật co
   giãn theo bề rộng MÀN HÌNH nằm trọn ở tệp cuối cùng ấy, không rải rác ở đây.
*/

/* ==================================================================
   Đường bỏ qua
   ================================================================== */

/*
   Phần tử bấm được ĐẦU TIÊN của trang. Người dùng bàn phím nhấn Tab một lần là nhảy
   thẳng vào nội dung, không phải lội qua ba chục mục thực đơn ở mỗi lần mở màn.

   Nằm ngoài tầm mắt cho tới khi nhận con trỏ bàn phím. Không dùng display none, vì thứ
   mang display none thì con trỏ bàn phím không bao giờ tới được và đường bỏ qua thành
   ra không tồn tại.
*/
.wv-bo-qua {
    position: fixed;
    top: var(--wv-k2);
    left: var(--wv-k2);
    z-index: 90;
    transform: translateY(-200%);
    padding: var(--wv-k2) var(--wv-k4);
    background: var(--wv-nhan);
    color: var(--wv-nhan-chu);
    border-radius: var(--wv-bo-2);
    box-shadow: var(--wv-bong-3);
    font-size: var(--wv-cd-13);
    font-weight: 600;
    transition: transform .12s ease;
}

.wv-bo-qua:focus {
    transform: translateY(0);
    color: var(--wv-nhan-chu);
    text-decoration: none;
}

/* Vùng nội dung nhận con trỏ bàn phím thì không vẽ vòng tiêu điểm quanh cả trang: người
   dùng vừa chủ động nhảy vào đây, họ biết mình đang ở đâu. */
.wv-than:focus {
    outline: none;
}

/* ==================================================================
   Thanh điều hướng dọc
   ================================================================== */

.wv-canh {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 40;
    display: flex;
    flex-direction: column;
    width: var(--wv-rong-canh);
    padding: 0;
    overflow: hidden;
    background: var(--wv-canh);
    border-right: 1px solid var(--wv-xanh-950);
    transition: width .16s ease;

    /* Khai chính thanh này làm một khối đo được, để mọi luật của dạng dải biểu tượng
       viết theo bề ngang THẬT của nó. Xem lời giải thích ở đầu tệp. */
    container-type: inline-size;
    container-name: canh;
}

/* ----- Đỉnh thanh: logo công ty ----- */

.wv-canh a.wv-canh-dau {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: .125rem;
    flex: 0 0 auto;
    height: var(--wv-cao-thanh);
    padding: 0 var(--wv-k4);
    border-left: 0;
    font-size: var(--wv-cd-14);
    background: var(--wv-canh-dinh);
    border-bottom: 1px solid var(--wv-canh-vien);
    overflow: hidden;
}

.wv-canh a.wv-canh-dau:hover {
    text-decoration: none;
}

/* Logo ngang chữ vàng kim, bản dành cho nền tối. Chiều cao khai theo rem còn bề ngang
   để tự, nên ảnh không bao giờ bị kéo méo dù thanh có đổi bề rộng.

   Trước đây dưới logo có một dòng chữ nhỏ ghi tên cửa, và logo phải nép lại còn 1.6rem
   để chừa chỗ cho dòng ấy. Nay bỏ dòng chữ nên logo lấy trọn chiều cao: đỉnh thanh cao
   3.5rem, logo 2.5rem, còn lại nửa rem mỗi bên làm khoảng thở. */
.wv-logo-ngang {
    display: block;
    width: auto;
    height: 2.5rem;
    max-width: 100%;
    object-fit: contain;
}

/* Phần biểu tượng chữ W và mặt trời, dùng ở dạng dải biểu tượng. */
.wv-logo-dau {
    display: none;
    width: 2.25rem;
    height: 2.25rem;
    flex: 0 0 auto;
}

/* ----- Thân thanh: danh sách mục ----- */

/*
   Chỉ khối này cuộn, chứ không phải cả trang. Logo ở đỉnh và khối tài khoản ở đáy đứng
   yên tại chỗ, người dùng cuộn hết bảy nhóm vẫn còn nguyên lối đăng xuất trước mắt.
*/
.wv-canh-menu {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: var(--wv-k3) 0 var(--wv-k4);
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, .22) transparent;
    overscroll-behavior: contain;
}

.wv-canh-menu::-webkit-scrollbar {
    width: 8px;
}

.wv-canh-menu::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, .18);
    border-radius: var(--wv-bo-tron);
}

/* ----- Nhóm gập mở được ----- */

.wv-nhom {
    margin-top: var(--wv-k2);
}

.wv-nhom:first-child {
    margin-top: 0;
}

/*
   Tiêu đề nhóm là một cái NÚT chứ không phải một dòng chữ. Nút thì bấm được bằng chuột,
   bấm được bằng phím cách, và nói được cho máy đọc màn hình biết phần bên dưới nó đang
   mở hay đang gập. Một dòng chữ trơn thì không làm được việc nào trong ba việc ấy.
*/
.wv-nhom-dau {
    display: flex;
    align-items: center;
    gap: var(--wv-k3);
    width: 100%;
    padding: var(--wv-k3) var(--wv-k4) var(--wv-k1);
    background: transparent;
    border: 0;
    color: var(--wv-canh-chu-mo);
    font: inherit;
    font-size: var(--wv-cd-11);
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    text-align: left;
    cursor: pointer;
}

.wv-nhom-dau:hover {
    color: var(--wv-canh-chu);
}

.wv-nhom-ten {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Hình của nhóm chỉ hiện ở dạng dải biểu tượng, chỗ mà tiêu đề chữ không còn đọc được. */
.wv-nhom-hinh {
    display: none;
    width: 1rem;
    height: 1rem;
}

.wv-nhom-mui {
    flex: 0 0 auto;
    width: .875rem;
    height: .875rem;
    opacity: .7;
    transition: transform .14s ease;
}

/* Nhóm đang gập: mũi tên quay ngang, phần thân khuất đi. */
.wv-nhom-gap > .wv-nhom-muc {
    display: none;
}

.wv-nhom-gap > .wv-nhom-dau > .wv-nhom-mui {
    transform: rotate(-90deg);
}

/*
   Nhóm chứa màn đang mở thì mặc định bật ra, để người dùng thấy ngay mình đang ở đâu.
   Nhưng phải nhường khi người dùng CHỦ ĐỘNG gập nhóm đó lại, nên mới có phần loại trừ.
   Thiếu phần loại trừ thì hai luật nặng ngang nhau, luật viết sau thắng, và nhóm đang
   chứa màn hiện tại không tài nào gập được: bấm vào chỉ thấy mũi tên xoay còn các mục
   vẫn nằm nguyên đó.
*/
.wv-nhom-dang-o:not(.wv-nhom-gap) > .wv-nhom-muc {
    display: block;
}

/* ----- Mục ----- */

.wv-muc {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: var(--wv-k3);
    width: 100%;
    padding: .5rem var(--wv-k4);
    color: var(--wv-canh-chu);
    background: transparent;
    border: 0;
    border-left: 3px solid transparent;
    font: inherit;
    font-size: var(--wv-cd-13);
    line-height: 1.35;
    text-align: left;
    cursor: pointer;
}

.wv-muc-ten {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wv-muc .wv-bt {
    flex: 0 0 auto;
    width: 1.125rem;
    height: 1.125rem;
    opacity: .82;
}

.wv-muc:hover {
    background: var(--wv-canh-luot);
    color: #ffffff;
    text-decoration: none;
}

.wv-muc:hover .wv-bt {
    opacity: 1;
}

/*
   Mục đang mở. Nền sáng hơn một bậc, gạch chỉ bên trái màu cam vàng của thương hiệu,
   và riêng biểu tượng cũng nhuộm cam vàng. Ba dấu hiệu cùng lúc chứ không chỉ một,
   để người mù màu vẫn nhận ra mình đang đứng ở đâu.
*/
.wv-muc.wv-dang-o {
    background: var(--wv-canh-chon);
    border-left-color: var(--wv-nhan);
    color: #ffffff;
    font-weight: 600;
}

.wv-muc.wv-dang-o .wv-bt {
    color: var(--wv-nhan);
    opacity: 1;
}

.wv-canh a:focus-visible,
.wv-canh button:focus-visible {
    outline: 2px solid var(--wv-nhan);
    outline-offset: -3px;
}

/* ----- Khối cuối thanh: lối sang cửa đầy đủ và hai mục tài khoản ----- */

.wv-canh-chan {
    flex: 0 0 auto;
    padding: var(--wv-k2) 0 var(--wv-k3);
    border-top: 1px solid var(--wv-canh-vien);
    background: var(--wv-canh-dinh);
}

.wv-canh-chan .wv-mo-day-du {
    color: var(--wv-cam-300);
    font-weight: 600;
}

.wv-canh-chan .wv-canh-thoat {
    margin: 0;
}

/* ==================================================================
   Dạng dải biểu tượng
   ================================================================== */

/*
   Áp theo bề ngang THẬT của thanh, nên nó đúng cho mọi lý do làm thanh co lại: người
   dùng bấm nút thu gọn, hoặc cửa sổ hẹp dưới 1200 nên hệ thống tự thu. Ngăn trượt của
   màn hẹp rộng gần 17,5rem nên không rơi vào khối này, và đó là điều đúng: ngăn trượt
   mở ra là phải thấy đủ chữ.
*/
@container canh (max-width: 7rem) {

    .wv-canh-dau {
        align-items: center;
        padding: 0;
    }

    .wv-logo-ngang {
        display: none;
    }

    .wv-logo-dau {
        display: block;
    }

    /* Tiêu đề nhóm rút về đúng cái hình của nó, đứng giữa dải, kèm một vạch ngăn phía
       trên để mắt vẫn thấy được ranh giới giữa hai nhóm. */
    .wv-nhom {
        margin-top: 0;
        border-top: 1px solid var(--wv-canh-vien);
    }

    .wv-nhom:first-child {
        border-top: 0;
    }

    .wv-nhom-dau {
        justify-content: center;
        padding: var(--wv-k2) 0 var(--wv-k1);
    }

    .wv-nhom-hinh {
        display: block;
        opacity: .5;
    }

    .wv-nhom-ten,
    .wv-nhom-mui {
        display: none;
    }

    /*
       MỌI NHÓM MỞ HẾT, kể cả nhóm người dùng đã gập từ hôm trước. Dải biểu tượng không
       có chỗ đặt tiêu đề nhóm, nên một nhóm đang gập ở đây là mấy mục biến mất mà không
       để lại một dấu vết nào cho người dùng bấm vào mở lại.
    */
    .wv-nhom-gap > .wv-nhom-muc {
        display: block;
    }

    .wv-muc {
        justify-content: center;
        gap: 0;
        padding-left: 0;
        padding-right: 0;
        border-left-width: 0;
        border-right: 3px solid transparent;
    }

    .wv-muc .wv-bt {
        width: 1.25rem;
        height: 1.25rem;
    }

    .wv-muc.wv-dang-o {
        border-right-color: var(--wv-nhan);
    }

    /*
       Chữ của mục LÙI KHỎI TẦM MẮT chứ không bị xóa. Dùng display none thì chữ rời khỏi
       cây nội dung và máy đọc màn hình đọc ra một thực đơn gồm ba chục nút không tên.
       Cách này giữ chữ lại nguyên vẹn cho máy đọc, còn mắt thì đọc chú thích hiện ra lúc
       rê chuột hoặc lúc con trỏ bàn phím dừng lại.
    */
    .wv-muc-ten {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }
}

/* ==================================================================
   Chú thích của dải biểu tượng
   ================================================================== */

/*
   Một khối duy nhất cho cả thực đơn, đặt ngoài thanh dọc và ghim theo tọa độ màn hình.
   Đặt trong thanh thì nó bị cắt mất, vì thanh phải cắt phần thừa để cuộn được trong
   lòng nó. Vị trí do wvep-vo.js tính, tệp này chỉ lo hình dạng.
*/
.wv-chu-thich {
    position: fixed;
    z-index: 80;
    padding: var(--wv-k1) var(--wv-k3);
    background: var(--wv-xanh-950);
    color: #ffffff;
    border-radius: var(--wv-bo-2);
    box-shadow: var(--wv-bong-3);
    font-size: var(--wv-cd-12);
    white-space: nowrap;
    pointer-events: none;
}

.wv-chu-thich[hidden] {
    display: none;
}

/* ==================================================================
   Thanh điều hướng ngang
   ================================================================== */

/*
   Nền sáng chứ không xanh đậm. Thanh dọc đã mang trọn màu thương hiệu rồi; để thêm một
   dải xanh đậm nữa vắt ngang thì hai khối tối kẹp lấy vùng nội dung và cả màn hình nặng
   như một cái khung ảnh. Thanh sáng cũng cho phép đặt chữ tối lên, đọc dễ hơn hẳn chữ
   trắng ở cỡ mười ba.
*/
.wv-thanh-tren {
    position: fixed;
    top: 0;
    right: 0;
    left: var(--wv-rong-canh);
    z-index: 30;
    display: flex;
    align-items: center;
    gap: var(--wv-k3);
    height: var(--wv-cao-thanh);
    padding: 0 var(--wv-k5);
    background: var(--wv-tam);
    border-bottom: 1px solid var(--wv-vien);
    box-shadow: var(--wv-bong-1);
    color: var(--wv-chu);
    transition: left .16s ease;
}

/* Nút đóng mở thanh dọc. Ở màn rộng nó thu gọn thanh, ở màn hẹp nó kéo ngăn trượt ra.
   Một nút làm hai việc vì với người dùng đó vẫn là một việc: cho tôi xem hoặc giấu đi
   cái thực đơn. */
.wv-nut-menu {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--wv-bo-2);
    color: var(--wv-chu-mo);
    cursor: pointer;
}

.wv-nut-menu:hover {
    background: var(--wv-xam-100);
    border-color: var(--wv-vien);
    color: var(--wv-chinh);
}

.wv-nut-menu .wv-bt {
    width: 1.25rem;
    height: 1.25rem;
}

/* Ba hình chồng lên nhau, mỗi dạng màn hình chỉ hiện đúng một hình. Hình ba gạch để
   dành cho màn hẹp và bật lên ở wvep-cogian.css. */
.wv-nut-menu .wv-hinh-mo,
.wv-nut-menu .wv-hinh-menu {
    display: none;
}

html.wv-canh-gon .wv-nut-menu .wv-hinh-mo {
    display: block;
}

html.wv-canh-gon .wv-nut-menu .wv-hinh-thu {
    display: none;
}

/* ----- Nhận diện cửa đang đứng ----- */

/*
   Khối nhận diện trên thanh ngang chỉ dành cho MÀN HẸP, nên mặc định nó khuất.

   Ở màn rộng, logo và tên cửa đã nằm trên đỉnh thanh dọc ngay bên trái nó. Để thêm một
   khối nhận diện nữa ở đây thì góc trên bên trái có hai khối nói cùng một điều nằm sát
   nhau, mà chỗ ấy lại đang phải chia cho đường dẫn phân cấp và ô tìm nhanh. Từ mốc 900
   trở xuống thanh dọc khuất hẳn, và lúc ấy khối này hiện ra thế chỗ.
*/
/*
   KHÔNG cho khối này co lại. Tên cửa dài nhất là Hồ sơ nhà cung cấp, mười tám chữ, và
   cho nó co thì ở màn 880 nó cụt thành WV.. ngay cạnh logo, tức là chỗ nhận diện lại
   là chỗ đầu tiên trông như hỏng. Ô tìm nhanh bên phải mới là thứ co được, vì nó co
   bớt vài chữ thì người dùng vẫn gõ và vẫn đọc được kết quả.
*/
.wv-nhan-cong {
    display: none;
    align-items: center;
    gap: var(--wv-k2);
    flex: 0 0 auto;
    min-width: 0;
    line-height: 1.2;
    color: var(--wv-chu);
}

.wv-nhan-cong:hover {
    color: var(--wv-chinh);
    text-decoration: none;
}

/*
   Logo thu nhỏ trên thanh ngang. Ở màn rộng nó nhường chỗ cho logo lớn trên đỉnh thanh
   dọc, hai logo cạnh nhau chỉ tạo ra một góc trái lộn xộn. Ở màn hẹp thanh dọc khuất
   hẳn, và lúc ấy đây là chỗ duy nhất còn nhận diện công ty nên nó hiện ra.
*/
.wv-logo-thanh {
    display: none;
    width: auto;
    height: 1.75rem;
    flex: 0 0 auto;
}

.wv-nhan-chu {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    max-width: 11rem;
}

.wv-nhan-chinh {
    font-family: var(--wv-phong-tieu-de);
    font-size: var(--wv-cd-16);
    font-weight: 700;
    letter-spacing: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wv-nhan-phu {
    font-size: var(--wv-cd-11);
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--wv-chu-nhat);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ----- Đường dẫn phân cấp ----- */

/*
   Cho biết đang đứng ở đâu trong hệ thống, và mỗi đốt phía trước là một lối quay lại.
   Trên tám mươi màn thì tên màn thôi chưa đủ: hai màn Công nợ nằm ở hai nhóm khác nhau,
   chỉ đường dẫn mới phân biệt được chúng.
*/
.wv-duong-dan-thanh {
    flex: 0 1 auto;
    min-width: 0;
    padding-left: var(--wv-k2);
}

.wv-duong-dan-thanh .wv-duong-dan {
    margin: 0;
    flex-wrap: nowrap;
    overflow: hidden;
}

/* Đốt cuối là màn đang mở, nó phải đọc được trọn vẹn. Các đốt phía trước co lại trước,
   vì mất một chữ ở tên nhóm thì người dùng vẫn đoán ra, mất tên màn thì không.

   NHƯNG CO KHÔNG PHẢI LÀ BIẾN MẤT, và trước ngày 10 tháng 9 năm 2026 chỗ này không phân
   biệt hai chuyện ấy. Đốt cuối khai không co được, nên gặp tên dài là hai đốt trước bị ép
   về đúng 0 điểm ảnh: liên kết vẫn nằm trong trang, vẫn đọc được bằng trình đọc màn hình,
   mà không ai bấm được. Mà chính chúng là lối quay lại danh sách.

   Con số làm chuyện này thành thường ngày chứ không phải hiếm: trong 4.810 hồ sơ đối tác
   trên máy chủ thật có 609 hồ sơ tên dài quá 60 ký tự, dài nhất 183. Mở hồ sơ nào trong số
   ấy ở dải 1400 tới 1700 là mất đường quay lại.

   Nay các đốt trước có SÀN, còn đốt cuối nhận phần chỗ còn lại và tự cắt bằng dấu ba chấm.
   Sàn 3,5rem là chỗ vừa cho ba tới bốn ký tự cộng dấu ba chấm, đủ để còn thấy mà bấm. */
.wv-duong-dan-thanh .wv-duong-dan li {
    flex: 0 1 auto;
    min-width: 3.5rem;
}

.wv-duong-dan-thanh .wv-duong-dan li > a,
.wv-duong-dan-thanh .wv-duong-dan li > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wv-duong-dan-thanh .wv-duong-dan li:last-child {
    flex: 1 1 auto;
    min-width: 0;
}

/* ----- Ô tìm nhanh ----- */

/*
   Ô tìm co giãn theo chỗ còn lại, nhưng có SÀN và có TRẦN.

   Sàn 15rem là chỗ vừa đủ cho dòng gợi ý "Tìm nhanh màn hình" cộng với ô nhắc phím tắt
   nằm đè bên phải. Trước đây khai min-width 0 nên gặp màn chật là ô teo lại tới mức
   dòng gợi ý cụt mất mấy chữ cuối, trong khi thanh ngang vẫn còn thừa chỗ trống ở giữa.
   Cụt dòng gợi ý là hỏng đúng cái việc nó sinh ra để làm: nói cho người dùng biết gõ
   vào đây thì tìm được gì.

   Cho nó GIÃN chứ không chỉ co: thừa chỗ thì ô rộng ra, gõ tên màn dài vẫn đọc được hết.
   Trần 30rem để nó đừng nuốt cả thanh trên màn rất rộng.
*/
.wv-tim-nhanh {
    position: relative;
    flex: 1 1 20rem;
    min-width: 15rem;
    max-width: 30rem;
    margin-left: var(--wv-k3);
}

.wv-tim-nhanh .wv-o-tim {
    flex: 1 1 auto;
}

.wv-tim-nhanh .wv-o-nhap {
    height: 2rem;
    padding-right: 3.75rem;
    font-size: var(--wv-cd-13);
    background: var(--wv-xam-50);
}

.wv-tim-nhanh .wv-o-nhap:focus {
    background: var(--wv-tam);
}

/* Nhắc phím tắt. Chỉ để mắt liếc qua, máy đọc màn hình bỏ qua vì lời nhắc ấy đã nằm
   trong nhãn của chính ô nhập. */
.wv-tim-phim {
    position: absolute;
    right: var(--wv-k2);
    padding: .0625rem var(--wv-k2);
    border: 1px solid var(--wv-vien);
    border-radius: var(--wv-bo-1);
    background: var(--wv-tam);
    color: var(--wv-chu-nhat);
    font-family: var(--wv-phong);
    font-size: var(--wv-cd-11);
    pointer-events: none;
}

.wv-tim-ket-qua {
    position: absolute;
    top: calc(100% + var(--wv-k1));
    left: 0;
    right: 0;
    z-index: 50;
    margin: 0;
    padding: var(--wv-k1);
    list-style: none;
    background: var(--wv-tam);
    border: 1px solid var(--wv-vien);
    border-radius: var(--wv-bo-3);
    box-shadow: var(--wv-bong-3);
}

.wv-tim-ket-qua[hidden] {
    display: none;
}

.wv-tim-ket-qua a {
    display: block;
    padding: var(--wv-k2) var(--wv-k3);
    border-radius: var(--wv-bo-2);
    color: var(--wv-chu);
    font-size: var(--wv-cd-13);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wv-tim-ket-qua a:hover,
.wv-tim-ket-qua .wv-tim-dang-chon a {
    background: var(--wv-chinh-nen);
    color: var(--wv-chinh-dam);
    text-decoration: none;
}

.wv-tim-trong {
    padding: var(--wv-k2) var(--wv-k3);
    color: var(--wv-chu-nhat);
    font-size: var(--wv-cd-13);
}

.wv-day {
    flex: 1 1 auto;
}

/* ----- Ô chọn chi nhánh ----- */

.wv-doi-chi-nhanh {
    display: flex;
    align-items: center;
    gap: var(--wv-k2);
    margin: 0;
    flex: 0 1 auto;
    min-width: 0;
}

.wv-doi-chi-nhanh label {
    margin: 0;
    font-size: var(--wv-cd-12);
    color: var(--wv-chu-mo);
    white-space: nowrap;
}

.wv-doi-chi-nhanh .wv-o-nhap {
    height: 2rem;
    width: 11rem;
    min-width: 0;
    max-width: 100%;
    padding: 0 var(--wv-k2);
    font-size: var(--wv-cd-13);
}

.wv-chi-nhanh {
    display: inline-flex;
    align-items: center;
    gap: var(--wv-k1);
    flex: 0 1 auto;
    min-width: 0;
    padding: .1875rem var(--wv-k2);
    border: 1px solid var(--wv-vien);
    border-radius: var(--wv-bo-tron);
    background: var(--wv-xam-50);
    color: var(--wv-chu-mo);
    font-size: var(--wv-cd-12);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ==================================================================
   Hai thực đơn thả xuống của thanh ngang
   ================================================================== */

/*
   Cả hai dựng bằng thẻ details của chính HTML chứ không bằng mã chạy trên trình duyệt,
   nên chúng bấm được cả khi mã của trang chưa tải xong hoặc bị chặn. Mã ở wvep-vo.js
   chỉ thêm ba tiện nghi: bấm ra ngoài thì đóng, bấm phím Esc thì đóng, và hai cái không
   bao giờ cùng mở một lúc.
*/

.wv-chuong,
.wv-menu-nguoi {
    position: relative;
    flex: 0 0 auto;
}

.wv-chuong > summary,
.wv-menu-nguoi > summary {
    display: flex;
    align-items: center;
    gap: var(--wv-k2);
    padding: var(--wv-k1) var(--wv-k2);
    border: 1px solid transparent;
    border-radius: var(--wv-bo-2);
    cursor: pointer;
    list-style: none;
    user-select: none;
}

.wv-chuong > summary::-webkit-details-marker,
.wv-menu-nguoi > summary::-webkit-details-marker {
    display: none;
}

.wv-chuong > summary:hover,
.wv-chuong[open] > summary,
.wv-menu-nguoi > summary:hover,
.wv-menu-nguoi[open] > summary {
    background: var(--wv-xam-100);
    border-color: var(--wv-vien);
}

/* ----- Chuông thông báo ----- */

.wv-chuong > summary {
    position: relative;
    width: 2.25rem;
    height: 2.25rem;
    justify-content: center;
    color: var(--wv-chu-mo);
}

.wv-chuong > summary .wv-bt {
    width: 1.25rem;
    height: 1.25rem;
}

/*
   Con số việc đang cần để mắt. Nền đỏ cam chứ không nền cam vàng của thương hiệu: cam
   vàng ở đây là màu của mục đang mở, dùng lại nó cho một lời nhắc thì hai thứ khác hẳn
   nhau lại mang cùng một màu. Chữ trắng trên nền này đạt tương phản 4,8 lần.
*/
.wv-chuong-so {
    position: absolute;
    top: .0625rem;
    right: .0625rem;
    min-width: 1.0625rem;
    padding: 0 .25rem;
    border-radius: var(--wv-bo-tron);
    background: var(--wv-xau);
    color: #ffffff;
    font-size: var(--wv-cd-11);
    font-weight: 700;
    line-height: 1.0625rem;
    text-align: center;
}

.wv-chuong-so[hidden] {
    display: none;
}

.wv-chuong-tha {
    width: 21rem;
    max-width: calc(100vw - var(--wv-k6));
}

.wv-chuong-than {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.wv-chuong-trong {
    margin: 0;
    padding: var(--wv-k3);
    color: var(--wv-chu-nhat);
    font-size: var(--wv-cd-13);
}

.wv-chuong-dong {
    display: flex;
    align-items: flex-start;
    gap: var(--wv-k3);
    padding: var(--wv-k2) var(--wv-k3);
    border-radius: var(--wv-bo-2);
    color: var(--wv-chu);
}

.wv-chuong-dong:hover {
    background: var(--wv-xam-50);
    text-decoration: none;
}

.wv-chuong-dem {
    flex: 0 0 auto;
    min-width: 1.75rem;
    padding: .125rem var(--wv-k2);
    border-radius: var(--wv-bo-2);
    font-size: var(--wv-cd-13);
    font-weight: 700;
    text-align: center;
}

.wv-chuong-nhac .wv-chuong-dem {
    background: var(--wv-nhac-nen);
    color: var(--wv-nhac-chu);
}

.wv-chuong-xau .wv-chuong-dem {
    background: var(--wv-xau-nen);
    color: var(--wv-xau-chu);
}

.wv-chuong-chu {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.35;
}

.wv-chuong-chu strong {
    font-size: var(--wv-cd-13);
    font-weight: 600;
}

.wv-chuong-chu span {
    color: var(--wv-chu-nhat);
    font-size: var(--wv-cd-12);
}

/* ----- Sự kiện đã xảy ra trong ngăn chuông, mã chức năng HT-12 -----

   Ngăn chuông nay bày HAI khối khác hẳn nhau về bản chất, nên chúng phải nhìn ra khác
   nhau. Khối trên là VIỆC CẦN ĐỂ MẮT: mỗi dòng một con số, tính lại ở mỗi lượt hỏi, không
   có dấu đã đọc. Khối dưới là SỰ KIỆN ĐÃ XẢY RA: mỗi dòng một tờ giấy có thật, có mốc giờ,
   và bấm vào là đọc xong nó.

   Trộn hai khối vào một dãy là thứ người dùng không bao giờ hiểu: con số 3 cạnh dòng "Đơn
   quá hạn thu" nghĩa là ba đơn, còn cạnh dòng "Phiếu thu được duyệt" thì chẳng nghĩa là
   gì cả. */

.wv-chuong-nhom {
    padding: var(--wv-k2) var(--wv-k3) 0;
    color: var(--wv-chu-nhat);
    font-size: var(--wv-cd-12);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .02em;
}

/* Một dòng tin. Cùng bố cục với .wv-chuong-dong nhưng KHÔNG có ô đếm bên trái, vì một sự
   kiện đã xảy ra không có con số nào để đếm.

   PHẢI VIẾT KÈM LỚP CHA .wv-chuong-than, và đây là quy tắc 11 trả giá ngay lần đầu: tấm
   kiểu này đã có sẵn luật `.wv-menu-tha a` nặng một lớp CỘNG một tên thẻ, tức nặng hơn một
   lớp trơn, và nó đặt `align-items: center` với `text-align: left`. Bản đầu của khối này
   viết `.wv-chuong-tin` trơn nên thua, và ba dòng tin trong ngăn chuông hiện ra CĂN GIỮA,
   chụp ảnh mới thấy. Viết kèm lớp cha thì nặng hai lớp và kết quả không còn phụ thuộc thứ
   tự nạp nữa. */
.wv-chuong-than .wv-chuong-tin {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    padding: var(--wv-k2) var(--wv-k3);
    border-radius: var(--wv-bo-2);
    border-left: 3px solid var(--wv-vien);
    color: var(--wv-chu);
    text-align: left;
}

.wv-chuong-than .wv-chuong-tin:hover {
    background: var(--wv-xam-50);
    text-decoration: none;
}

.wv-chuong-than .wv-chuong-tin strong {
    font-size: var(--wv-cd-13);
    font-weight: 600;
}

.wv-chuong-luc {
    color: var(--wv-chu-nhat);
    font-size: var(--wv-cd-12);
}

/* Vạch màu bên trái nói mức khẩn. Dùng vạch chứ không tô nền cả dòng: một ngăn thả xuống
   có năm dòng cùng tô nền đỏ nhạt đọc ra như một trang báo lỗi. */
.wv-chuong-than .wv-chuong-tin.wv-chuong-nhac {
    border-left-color: var(--wv-nhac-chu);
}

.wv-chuong-than .wv-chuong-tin.wv-chuong-xau {
    border-left-color: var(--wv-xau-chu);
}

/* Dòng chân ngăn chuông, dẫn sang màn Thông báo của tôi. Đây là ĐƯỜNG VÀO duy nhất mà
   người dùng bấm tới được của màn ấy, nên nó không được lẫn vào dãy tin: căn giữa và có
   vạch ngăn ở trên. */
.wv-chuong-tha .wv-chuong-day {
    display: block;
    margin-top: var(--wv-k2);
    padding: var(--wv-k2) var(--wv-k3);
    border-top: 1px solid var(--wv-vien);
    border-radius: 0;
    color: var(--wv-chinh);
    font-size: var(--wv-cd-13);
    font-weight: 600;
    text-align: center;
}

/* ----- Nhãn mức khẩn trên màn Thông báo của tôi -----

   Cặp lớp riêng chứ KHÔNG mượn .wv-chuong-dong của ngăn thả xuống: lớp ấy mang bố cục của
   một ngăn rộng hai mươi mốt rem, đem vào một ô bảng là một khối lệch hẳn hàng.

   Viết hai lớp liền nhau cho độ nặng thành hai, đúng lối .wv-trang-thai.wv-bi-bac đã đi:
   như vậy kết quả không phụ thuộc thứ tự nạp giữa các tấm kiểu. */
.wv-tb-muc {
    display: inline-block;
    padding: .125rem var(--wv-k2);
    border-radius: var(--wv-bo-2);
    font-size: var(--wv-cd-12);
    font-weight: 600;
}

.wv-tb-muc.wv-tb-nhac {
    background: var(--wv-nhac-nen);
    color: var(--wv-nhac-chu);
}

.wv-tb-muc.wv-tb-xau {
    background: var(--wv-xau-nen);
    color: var(--wv-xau-chu);
}

/* ----- Khối tài khoản ----- */

/* Vòng tròn chữ cái đầu. Không có ảnh đại diện thì đây là thứ thay thế đọc được ngay,
   và nó không tốn một lượt tải ảnh nào. */
.wv-anh-nguoi {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 2rem;
    height: 2rem;
    border-radius: var(--wv-bo-tron);
    background: var(--wv-chinh);
    color: #ffffff;
    font-size: var(--wv-cd-12);
    font-weight: 700;
    letter-spacing: .02em;
}

.wv-nguoi-dung {
    display: flex;
    flex-direction: column;
    min-width: 0;
    max-width: 11rem;
    line-height: 1.25;
    text-align: left;
}

.wv-nguoi-dung strong {
    font-size: var(--wv-cd-13);
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wv-nguoi-dung span {
    font-size: var(--wv-cd-11);
    color: var(--wv-chu-nhat);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wv-menu-nguoi > summary .wv-bt {
    flex: 0 0 auto;
    width: 1rem;
    height: 1rem;
    color: var(--wv-chu-nhat);
}

.wv-menu-nguoi[open] > summary .wv-bt {
    transform: rotate(180deg);
}

/* ----- Hộp thả xuống dùng chung cho cả hai ----- */

.wv-menu-tha {
    position: absolute;
    top: calc(100% + var(--wv-k1));
    right: 0;
    z-index: 50;
    min-width: 14rem;
    padding: var(--wv-k1);
    background: var(--wv-tam);
    border: 1px solid var(--wv-vien);
    border-radius: var(--wv-bo-3);
    box-shadow: var(--wv-bong-3);
}

.wv-menu-tha a,
.wv-menu-tha button {
    display: flex;
    align-items: center;
    gap: var(--wv-k2);
    width: 100%;
    padding: var(--wv-k2) var(--wv-k3);
    border: 0;
    border-radius: var(--wv-bo-2);
    background: transparent;
    color: var(--wv-chu);
    font: inherit;
    font-size: var(--wv-cd-13);
    text-align: left;
    cursor: pointer;
}

.wv-menu-tha a:hover,
.wv-menu-tha button:hover {
    background: var(--wv-chinh-nen);
    color: var(--wv-chinh-dam);
    text-decoration: none;
}

.wv-menu-tha .wv-bt {
    width: 1rem;
    height: 1rem;
    color: var(--wv-chu-mo);
}

.wv-menu-tha form {
    margin: 0;
}

.wv-menu-vach {
    height: 1px;
    margin: var(--wv-k1) var(--wv-k2);
    background: var(--wv-vien);
}

.wv-menu-tha .wv-menu-ten {
    display: block;
    padding: var(--wv-k2) var(--wv-k3) 0;
    color: var(--wv-chu);
    font-size: var(--wv-cd-13);
    font-weight: 600;
}

.wv-menu-tha .wv-menu-vai-tro {
    display: block;
    padding: 0 var(--wv-k3) var(--wv-k2);
    color: var(--wv-chu-nhat);
    font-size: var(--wv-cd-11);
    text-transform: uppercase;
    letter-spacing: .05em;
}

.wv-chuong-tha .wv-menu-ten {
    padding-bottom: var(--wv-k2);
}

/* ==================================================================
   Vùng nội dung và chân trang
   ================================================================== */

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

/*
   Trần bề rộng của thân trang khai ở ĐÚNG MỘT chỗ, tức là ở đây.

   Viết min của hai giá trị chứ không viết một mình 92rem: nó vừa giữ trần đọc được trên
   màn rất rộng, vừa giữ tấm chắn không cho thân trang rộng hơn chỗ còn lại của cửa sổ.
   Trước đó vế thứ hai nằm ở wvep-cogian.css, mà tấm ấy nạp SAU nên nó ăn mất trần 92rem.
*/
.wv-than {
    padding: calc(var(--wv-cao-thanh) + var(--wv-k6)) var(--wv-k6) var(--wv-k8);
    max-width: min(92rem, 100%);
}

.wv-chan-trang {
    display: flex;
    align-items: center;
    gap: var(--wv-k2);
    padding: var(--wv-k4) var(--wv-k6) var(--wv-k6);
    margin-left: var(--wv-rong-canh);
    color: var(--wv-chu-nhat);
    font-size: var(--wv-cd-12);
    transition: margin-left .16s ease;
}

.wv-chan-trang .wv-logo-chan {
    height: 1rem;
    width: auto;
    opacity: .55;
}

/* Tấm che phía sau ngăn trượt ở màn hẹp */

.wv-man-che {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 35;
    background: rgba(0, 26, 43, .48);
}

/* Chỗ báo tin của cái vỏ */

.wv-bao-khung {
    border-left-color: var(--wv-nhan);
}

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

/*
   Nền là một dải xanh thương hiệu đi từ đậm nhất tới sáng hơn hai bậc, cộng hai vệt
   sáng mờ dựng bằng radial-gradient. Không dùng ảnh nền nào, nên trang đăng nhập mở
   được ngay cả trên đường truyền chậm và không có gì để tải hỏng.
*/
.wv-trong {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--wv-k8) var(--wv-k4);
    background:
        radial-gradient(60rem 40rem at 15% -10%, rgba(255, 171, 11, .16), transparent 60%),
        radial-gradient(50rem 34rem at 100% 110%, rgba(31, 117, 173, .38), transparent 62%),
        linear-gradient(158deg, var(--wv-xanh-950) 0%, var(--wv-xanh-700) 58%, var(--wv-xanh-500) 100%);
}

.wv-hop {
    position: relative;
    width: 100%;
    max-width: 25rem;
    background: var(--wv-tam);
    border-radius: var(--wv-bo-4);
    padding: var(--wv-k8) var(--wv-k8) var(--wv-k6);
    box-shadow: var(--wv-bong-4);
}

/* Vạch cam vàng chạy suốt mép trên của hộp, đúng màu nhấn của logo. */
.wv-hop::before {
    content: "";
    position: absolute;
    top: 0;
    left: var(--wv-k8);
    right: var(--wv-k8);
    height: 3px;
    border-radius: 0 0 var(--wv-bo-1) var(--wv-bo-1);
    background: linear-gradient(90deg, var(--wv-cam-400), var(--wv-cam-300));
}

.wv-hop-rong {
    max-width: 35rem;
    text-align: center;
}

/* Logo đầy đủ trên trang đăng nhập: chữ W, mặt trời, chữ Journeys và dòng
   a member of Evo. Đặt to và đứng giữa vì đây là nơi duy nhất người dùng nhìn thấy
   nhận diện công ty trọn vẹn trong cả phiên làm việc. */
.wv-logo-hop {
    display: block;
    width: 8.5rem;
    height: auto;
    margin: 0 auto var(--wv-k5);
}

.wv-hop h1 {
    margin: 0 0 var(--wv-k1);
    font-family: var(--wv-phong-tieu-de);
    font-size: var(--wv-cd-24);
    font-weight: 700;
    letter-spacing: .01em;
    color: var(--wv-chinh);
    text-align: center;
}

.wv-hop .wv-phu-de {
    margin: 0 0 var(--wv-k6);
    color: var(--wv-chu-mo);
    font-size: var(--wv-cd-13);
    text-align: center;
}

.wv-hop-chan {
    margin: var(--wv-k5) 0 0;
    padding-top: var(--wv-k4);
    border-top: 1px solid var(--wv-vien);
    color: var(--wv-chu-nhat);
    font-size: var(--wv-cd-11);
    text-align: center;
}

/* Trang báo thiếu quyền vào cửa */

.wv-the-hep {
    max-width: 34rem;
}

.wv-danh-sach-quyen {
    list-style: none;
    margin: 0 0 var(--wv-k4);
    padding: 0;
}

.wv-danh-sach-quyen li {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--wv-k2);
    padding: var(--wv-k2) 0;
    border-bottom: 1px solid var(--wv-vien);
}

.wv-ten-quyen {
    font-weight: 600;
}

.wv-ma-quyen {
    padding: .0625rem .375rem;
    border: 1px solid var(--wv-vien);
    border-radius: var(--wv-bo-1);
    background: var(--wv-xam-100);
    color: var(--wv-chu-mo);
    font-family: var(--wv-phong-ma);
    font-size: var(--wv-cd-12);
}

/* Kho hình của bộ biểu tượng: có mặt trong trang nhưng không chiếm một chấm nào. */
.wv-bo-bieu-tuong {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

/* ---------- Nút mũi tên gập thanh, đặt ở cuối chính thanh ---------- */

/*
   Hai mũi tên nằm chồng nhau trong cùng một nút, mỗi lúc chỉ một cái hiện. Làm vậy thay
   vì đổi hình bằng JavaScript, để lúc trang vừa nạp mà mã chưa chạy thì mũi tên đã đúng
   chiều rồi, không có cái chớp đổi hình.

   Vạch ngăn phía trên tách nó khỏi ba mục tài khoản: nó không phải một lối đi tới màn
   nào, nó là một cái công tắc.
*/
.wv-nut-gap-canh {
    width: 100%;
    margin-top: var(--wv-k1);
    padding-top: var(--wv-k2);
    border-top: 1px solid var(--wv-canh-vien);
    color: var(--wv-canh-chu-mo);
    background: none;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.wv-nut-gap-canh:hover {
    color: var(--wv-canh-chu);
}

.wv-nut-gap-canh .wv-gap-hinh-mo {
    display: none;
}

html.wv-canh-gon .wv-nut-gap-canh .wv-gap-hinh-thu {
    display: none;
}

html.wv-canh-gon .wv-nut-gap-canh .wv-gap-hinh-mo {
    display: inline-block;
}

/*
   Dưới 900 thanh dọc là ngăn trượt. Gập ngăn trượt thành dải biểu tượng không có nghĩa
   gì vì đóng lại là hết chỗ, nên nút này biến mất hẳn ở khổ điện thoại.
*/
@media (max-width: 900px) {
    .wv-nut-gap-canh {
        display: none;
    }
}