/* =========================================================================
   TRANG QUẢN TRỊ TAM QUỐC CHIBI — Hệ thống giao diện
   Phiên bản trắng–đen, dựng theo ngôn ngữ thiết kế của Apple.
   -------------------------------------------------------------------------
   Chủ ý thiết kế:

   • HAI TÔNG: trắng và đen. Nền làm việc là xám khói #F5F5F7 (đúng sắc nền
     Apple dùng cho mọi trang phụ), mặt thẻ trắng tinh, chữ #1D1D1F thay vì
     đen tuyệt đối — đen 100% trên nền trắng chói mắt sau vài giờ đọc số.

   • THANH BÊN VẪN TỐI, vùng làm việc vẫn sáng. Giữ nguyên bố cục cũ vì đó là
     thứ mắt đã quen: luôn biết đâu là điều hướng, đâu là nội dung. Chỉ khác
     là nay nó đen trung tính chứ không còn nâu đỏ.

   • MÀU CHỈ CÒN LÀ TÍN HIỆU, không còn là trang trí. Cả trang không có một
     mảng màu nào ngoài đen–trắng–xám; nên khi xuất hiện một chấm xanh (tiền
     cộng), một dòng đỏ (tiền trừ, cảnh báo), mắt bắt được ngay lập tức. Đây
     là lý do giữ lại bốn màu trạng thái thay vì bỏ hẳn: chúng chở thông tin,
     không phải thẩm mỹ. Bốn màu này lấy từ bảng màu hệ thống của Apple, đã
     hạ sáng để đạt tương phản đọc được trên nền trắng.

   • VIỀN LÀM VIỆC PHÂN TÁCH, KHÔNG PHẢI BÓNG ĐỔ. Trang này có lúc xếp năm
     sáu thẻ chồng nhau; bóng đổ mờ không đủ để mắt cắt được ranh giới. Nên
     thẻ dùng viền ĐẬM HƠN hẳn viền chia bên trong (--vien-the đậm hơn
     --vien), còn bóng đổ chỉ còn một lớp rất nhẹ để thẻ không dán bẹp vào nền.

   • BO GÓC THEO THANG APPLE: 18px cho thẻ, 10px cho ô nhập, và nút thì bo
     tròn hoàn toàn (dạng viên thuốc) — chi tiết nhận ra Apple ngay từ xa.

   Viết tay hoàn toàn: không Tailwind, không Bootstrap, không npm, không phông
   tải từ mạng. Trên máy Mac trình duyệt tự lấy SF Pro qua `-apple-system`;
   trên Windows rơi về Segoe UI Variable — cùng một khung chữ hình học, nên
   bố cục không xê dịch.
   ========================================================================= */

:root {
    /* ---- Thanh bên: đen trung tính, đúng sắc #1D1D1F của Apple ---- */
    --side:        #1D1D1F;
    --side-2:      #262628;
    --side-vien:   rgba(255, 255, 255, .12);
    --side-chu:    #D2D2D7;
    --side-chu-mo: #86868B;

    /* ---- Vùng làm việc ---- */
    --nen:         #F5F5F7;   /* nền trang, xám khói Apple */
    --the:         #FFFFFF;   /* mặt thẻ */
    --the-2:       #F5F5F7;   /* nền phụ trong thẻ: đầu bảng, ô đọc */
    --vien:        #E2E2E5;   /* viền chia BÊN TRONG thẻ, nhạt */
    --vien-dam:    #C9C9CE;   /* viền ô nhập, nút */
    --vien-the:    #B8B8BE;   /* viền NGOÀI thẻ — đậm nhất, để tách thẻ với thẻ */

    /* ---- Nhận diện ----
       Trong bảng màu trắng–đen, "nhận diện" chính là màu đen. Hai biến --do
       và --kim vẫn giữ nguyên tên vì các trang Blade đang gọi thẳng var(--do);
       đổi tên biến là phải sửa hàng chục tệp mà chẳng được thêm gì. */
    --do:          #D70015;   /* đỏ hệ thống Apple, đã hạ sáng để đọc trên nền trắng */
    --do-tham:     #A2000F;
    --do-nhat:     #FDECEC;

    --kim:         #1D1D1F;   /* trước là vàng kim; nay là màu nhấn = đen */
    --kim-sang:    #48484A;
    --kim-nhat:    #F0F0F2;

    /* ---- Chữ (đúng ba bậc Apple dùng: chính / phụ / mờ) ---- */
    --chu:         #1D1D1F;
    --chu-mo:      #6E6E73;
    --chu-nhat:    #98989D;

    /* ---- Trạng thái ---- */
    --luc:         #248A3D;   --luc-nhat:  #E9F6ED;
    --cam:         #B25000;   --cam-nhat:  #FDF1E5;
    --lam:         #0066CC;   --lam-nhat:  #EAF2FC;
    --xam:         #6E6E73;   --xam-nhat:  #F0F0F2;

    --bo:          18px;      /* thẻ */
    --bo-nho:      10px;      /* ô nhập, khối nhỏ */
    --bo-tron:     980px;     /* nút và nhãn dạng viên thuốc */

    --bong:        0 1px 2px rgba(0, 0, 0, .04), 0 6px 20px rgba(0, 0, 0, .035);
    --bong-nổi:    0 12px 40px rgba(0, 0, 0, .16);

    --nhip:        cubic-bezier(.25, .1, .25, 1);   /* đường cong chuyển động của Apple */

    --side-rong:   246px;

    --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display",
            "Segoe UI Variable Text", "Segoe UI", system-ui, "Helvetica Neue",
            "Noto Sans", Arial, sans-serif;
    --font-so: ui-monospace, "SF Mono", "Cascadia Mono", "Consolas",
               "DejaVu Sans Mono", monospace;
}

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

/*
 | Thuộc tính `hidden` phải THẮNG mọi lớp có đặt display.
 |
 | Trình duyệt chỉ khai `[hidden] { display: none }` trong bảng kiểu mặc định,
 | mà bảng đó thua mọi quy tắc của trang. Nghĩa là một khối `.alert` (display:
 | flex) hay `.hang` mang thuộc tính hidden vẫn HIỆN NGUYÊN — JavaScript đặt
 | hidden = true, kiểm tra bằng mã thì thấy đúng, nhìn màn hình thì thấy sai.
 |
 | Ở trang thao tác nhân vật, khối bị lộ ra là hai câu cảnh báo «xoá MỌI tướng»
 | của chế độ 3 và 4 — chúng nằm ngay dưới chế độ 1 và làm người trực tưởng
 | mình sắp xoá cả bộ sưu tập. Đây là chỗ duy nhất trong tệp dùng !important,
 | và dùng đúng chỗ: không có lớp nào được phép hiện lại thứ đã bị ẩn.
 */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    min-height: 100vh;
    font-family: var(--font);
    font-size: 16.5px;
    line-height: 1.55;
    letter-spacing: -.006em;      /* Apple bóp nhẹ chữ thường, chữ đứng gọn hơn */
    color: var(--chu);
    background: var(--nen);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a { color: var(--chu); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Tiêu đề: 600 (semibold) chứ không 700. Apple gần như không dùng bold đặc
   cho tiêu đề nhỏ — 600 kèm tracking âm cho cảm giác sắc mà không nặng. */
h1, h2, h3, h4 { margin: 0; font-weight: 600; line-height: 1.28; letter-spacing: -.021em; }

/* Con số tiền tệ luôn dùng phông đều chữ để các hàng thẳng cột, dễ so sánh. */
.so { font-family: var(--font-so); font-variant-numeric: tabular-nums; }

/* =========================================================================
   1. BỐ CỤC
   ========================================================================= */

.shell { display: flex; min-height: 100vh; }

.main {
    flex: 1;
    min-width: 0;                 /* cho phép bảng bên trong co lại thay vì tràn */
    display: flex;
    flex-direction: column;
}

.body-wrap { padding: 22px 26px 48px; }

.wide  { max-width: 1440px; }
.narrow { max-width: 860px; }

/* =========================================================================
   2. THANH BÊN
   ========================================================================= */

.side {
    width: var(--side-rong);
    flex: 0 0 var(--side-rong);
    background: var(--side);
    color: var(--side-chu);
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.side::-webkit-scrollbar { width: 8px; }
.side::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .16); border-radius: 4px; }

/* ---- Thương hiệu ---- */
.brand {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 18px 18px 16px;
    border-bottom: 1px solid var(--side-vien);
}

/* Ô chữ nhận diện: đảo màu — trắng đặc trên nền đen. Đây là chỗ duy nhất
   trên thanh bên có mảng trắng, nên nó tự thành điểm neo của mắt. */
.brand-dau {
    width: 38px; height: 38px;
    flex: 0 0 38px;
    border-radius: 10px;
    background: #FFFFFF;
    color: #1D1D1F;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 17px; letter-spacing: -.5px;
}

.brand-ten   { font-size: 16.5px; font-weight: 600; color: #F5F5F7; line-height: 1.25; letter-spacing: -.01em; }
.brand-phu   { font-size: 13.5px; color: var(--side-chu-mo); }

/* ---- Điều hướng ---- */
.nav { padding: 12px 10px 18px; flex: 1; }

.nav-nhom {
    padding: 15px 10px 6px;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .8px;
    text-transform: uppercase;
    color: var(--side-chu-mo);
}
.nav-nhom:first-child { padding-top: 4px; }

.nav a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8.5px 11px;
    margin-bottom: 2px;
    border-radius: var(--bo-nho);
    color: var(--side-chu);
    font-size: 16px;
    text-decoration: none;
    transition: background .18s var(--nhip), color .18s var(--nhip);
}

.nav a:hover { background: rgba(255, 255, 255, .08); color: #F5F5F7; text-decoration: none; }

/*
 | Mục đang mở: nền trắng mờ + vệt trắng đặc bên trái.
 | Bản cũ nhấn bằng màu vàng; ở bảng màu này không còn màu nào để nhấn ngoài
 | độ sáng, nên vệt trắng phải ĐẶC (không mờ) mới đủ tách khỏi nền trắng-mờ
 | của trạng thái rê chuột — nếu cả hai đều mờ, hai trạng thái nhìn như một.
 */
.nav a.on {
    background: rgba(255, 255, 255, .13);
    color: #FFFFFF;
    font-weight: 600;
    box-shadow: inset 2.5px 0 0 #FFFFFF;
}

.nav svg { width: 17px; height: 17px; flex: 0 0 17px; opacity: .72; }
.nav a.on svg { opacity: 1; }

/* Số đơn đang chờ, hiện ngay cạnh mục điều hướng */
.nav-dem {
    margin-left: auto;
    min-width: 20px;
    padding: 0 6px;
    height: 19px;
    border-radius: var(--bo-tron);
    background: var(--do);
    color: #fff;
    font-size: 13.5px;
    font-weight: 600;
    display: flex; align-items: center; justify-content: center;
}

/* ---- Chân thanh bên ---- */
.side-chan {
    padding: 12px 14px 16px;
    border-top: 1px solid var(--side-vien);
    font-size: 14px;
    color: var(--side-chu-mo);
}

.side-nguoi { display: flex; align-items: center; gap: 9px; margin-bottom: 9px; }

.anh-dai-dien {
    width: 32px; height: 32px; flex: 0 0 32px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .14);
    border: 1px solid rgba(255, 255, 255, .18);
    color: #F5F5F7;
    display: flex; align-items: center; justify-content: center;
    font-weight: 600; font-size: 15px;
}

.side-nguoi b { display: block; color: #F5F5F7; font-size: 15px; font-weight: 600; }

/* =========================================================================
   3. THANH TRÊN
   ========================================================================= */

/*
 | Nền kính mờ — đúng thứ Apple đặt ở mọi thanh điều hướng dính đỉnh.
 | saturate(180%) là phần làm nên hiệu ứng: chỉ blur thôi thì nội dung trôi
 | bên dưới hiện ra xám xịt; đẩy bão hoà lên mới ra cảm giác kính thật.
 */
.topbar {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 0 26px;
    height: 58px;
    background: rgba(255, 255, 255, .72);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    border-bottom: 1px solid var(--vien);
}

.topbar h1 { font-size: 19px; }
.topbar .duong-dan { font-size: 14.5px; color: var(--chu-nhat); }

.topbar-phai { margin-left: auto; display: flex; align-items: center; gap: 9px; }

.vai-chip {
    padding: 3px 11px;
    border-radius: var(--bo-tron);
    font-size: 14px;
    font-weight: 600;
    background: var(--kim-nhat);
    color: var(--chu);
    border: 1px solid var(--vien);
}

/* Nút mở thanh bên trên màn hình hẹp */
.nut-menu {
    display: none;
    width: 34px; height: 34px;
    border: 1px solid var(--vien-dam);
    border-radius: var(--bo-nho);
    background: #fff;
    color: var(--chu);
    cursor: pointer;
    align-items: center; justify-content: center;
}

/* =========================================================================
   4. THẺ NỘI DUNG
   ========================================================================= */

/*
 | VIỀN ĐẬM, BÓNG NHẸ.
 |
 | Một trang như «Máy chủ game» xếp liền ba bốn thẻ trắng trên nền xám khói.
 | Nếu viền thẻ cùng sắc với viền chia bên trong thẻ thì mắt không cắt được
 | đâu là hết thẻ này, đâu là đầu thẻ sau — cả trang đọc ra thành một khối
 | trắng dài. Nên viền NGOÀI (--vien-the) đậm hơn hẳn viền TRONG (--vien),
 | và khoảng cách giữa hai thẻ nới lên 20px.
 */
.card {
    background: var(--the);
    border: 1px solid var(--vien-the);
    border-radius: var(--bo);
    box-shadow: var(--bong);
    margin-bottom: 20px;
    overflow: hidden;
}

.card-dau {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--vien);
    background: var(--the-2);
}

.card-dau h2 { font-size: 17px; }
.card-dau .phu { font-size: 14.5px; color: var(--chu-nhat); font-weight: 400; letter-spacing: 0; }
.card-dau .phai { margin-left: auto; display: flex; gap: 8px; align-items: center; }

.card-than { padding: 18px; }
.card-than.khit { padding: 0; }

.card-chan {
    padding: 12px 18px;
    border-top: 1px solid var(--vien);
    background: var(--the-2);
    font-size: 14.5px;
    color: var(--chu-mo);
}

/* Lưới hai/ba cột dùng lại ở nhiều trang.
   `align-items: start` để thẻ ngắn không bị kéo dài bằng thẻ cạnh nó — nếu
   kéo dài, phần thừa hiện ra thành một mảng trắng dưới chân thẻ. */
.luoi { display: grid; gap: 20px; align-items: start; }
.luoi-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.luoi-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.luoi-2-1 { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.luoi-1-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }

/* =========================================================================
   5. Ô SỐ LIỆU
   ========================================================================= */

.tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 16px;
    margin-bottom: 20px;
}

.tile {
    background: var(--the);
    border: 1px solid var(--vien-the);
    border-radius: var(--bo);
    padding: 15px 16px;
    box-shadow: var(--bong);
    position: relative;
    overflow: hidden;
}

/* Vệt màu mảnh bên trái để phân loại ô mà không cần thêm biểu tượng */
.tile::before {
    content: "";
    position: absolute; left: 0; top: 0; bottom: 0;
    width: 3px;
    background: var(--vien-dam);
}
.tile.ok::before   { background: var(--luc); }
.tile.warn::before { background: var(--cam); }
.tile.bad::before  { background: var(--do); }
.tile.info::before { background: var(--lam); }
.tile.kim::before  { background: var(--kim); }

.tile .nhan { font-size: 14.5px; color: var(--chu-mo); display: flex; align-items: center; gap: 6px; }
.tile .so-lon {
    font-size: 28px;
    font-weight: 600;
    line-height: 1.22;
    margin-top: 3px;
    font-family: var(--font-so);
    font-variant-numeric: tabular-nums;
    letter-spacing: -.6px;
}
.tile .duoi { font-size: 14px; color: var(--chu-nhat); margin-top: 2px; }

.delta { font-weight: 600; font-size: 14.5px; }
.delta.len  { color: var(--luc); }
.delta.xuong{ color: var(--do); }

/* =========================================================================
   6. BẢNG
   ========================================================================= */

.bang-cuon { overflow-x: auto; }

.tbl { width: 100%; border-collapse: collapse; font-size: 15.5px; }

.tbl th {
    text-align: left;
    padding: 11px 16px;
    background: var(--the-2);
    border-bottom: 1px solid var(--vien);
    font-size: 13.5px;
    font-weight: 600;
    letter-spacing: .4px;
    text-transform: uppercase;
    color: var(--chu-mo);
    white-space: nowrap;
}

.tbl td {
    padding: 11px 16px;
    border-bottom: 1px solid #EFEFF2;
    vertical-align: middle;
}

.tbl tbody tr:last-child td { border-bottom: none; }
.tbl tbody tr:hover { background: #FAFAFC; }

.tbl td.phai, .tbl th.phai { text-align: right; }
.tbl td.giua, .tbl th.giua { text-align: center; }
.tbl td.hep { width: 1%; white-space: nowrap; }

.tbl .chinh { font-weight: 600; }
.tbl .mo    { color: var(--chu-nhat); font-size: 14.5px; }

/*
 | Liên kết trong bảng báo hiệu bằng GẠCH CHÂN khi rê chuột, không đổi màu.
 |
 | Ở bảng màu trắng–đen, đổi màu liên kết nghĩa là đưa thêm một màu vào vùng
 | nội dung — mà màu trong vùng này đã dành hết cho tiền và cảnh báo. Một bảng
 | danh sách gần như dòng nào cũng có liên kết; tô màu hết thì những chỗ có
 | màu THẬT SỰ quan trọng chìm đi.
 */
.tbl td a { color: var(--chu); }
.tbl td a:hover { color: var(--chu); text-decoration: underline; }
.tbl td a.btn:hover { color: var(--chu); text-decoration: none; }
.tbl td a.btn.nguy:hover { color: var(--do); }

/* Nhóm nút trong cột thao tác giữ trên một hàng, không xuống dòng lởm chởm */
.tbl td.hep .nhom-nut { flex-wrap: nowrap; }

/*
 | Ô chọn trong ô bảng phải đủ rộng cho chữ dài nhất của nó.
 |
 | .sel khai width: 100%, nên trong một cột hẹp nó co theo cột và cắt cụt chữ —
 | ở bảng máy chủ, «Quá tải» hiện thành «Quá t» với mũi tên đè lên. Đặt sàn bề
 | rộng thì bảng tự nới cột ra (bảng dùng dàn trang tự động), thay vì bóp ô chọn.
 */
.tbl td .sel { min-width: 132px; }

/*
 | Hàng TỔNG CỘNG ở cuối bảng sao kê.
 |
 | Nếu để giống hệt các hàng kênh thì mắt đọc lướt sẽ tưởng nó cũng là một kênh
 | — mà con số ở đó lại là tổng của tất cả những hàng phía trên, tức là hiểu sai
 | theo hướng nguy hiểm nhất: cộng thêm một lần nữa vào tổng.
 */
.tbl tr.tong td {
    background: var(--the-2);
    border-top: 1.5px solid var(--vien-dam);
}

/* Hàng cần chú ý: đơn chờ duyệt quá lâu, số dư lệch sổ */
.tbl tr.canh-bao td { background: #FEF3F3; }
.tbl tr.canh-bao:hover td { background: #FDE9E9; }

.empty {
    padding: 46px 20px;
    text-align: center;
    color: var(--chu-nhat);
}
.empty svg { width: 34px; height: 34px; opacity: .3; margin-bottom: 8px; }
.empty b { display: block; color: var(--chu-mo); font-size: 16px; margin-bottom: 3px; font-weight: 600; }

/* =========================================================================
   7. NHÃN TRẠNG THÁI
   ========================================================================= */

.tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2.5px 10px;
    border-radius: var(--bo-tron);
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    background: var(--xam-nhat);
    color: var(--xam);
    border: 1px solid transparent;
}

.tag.ok    { background: var(--luc-nhat); color: var(--luc); border-color: #CFE8D7; }
.tag.warn  { background: var(--cam-nhat); color: var(--cam); border-color: #F2DCC2; }
.tag.bad   { background: var(--do-nhat);  color: var(--do);  border-color: #F5D2D2; }
.tag.info  { background: var(--lam-nhat); color: var(--lam); border-color: #CFE0F5; }
.tag.muted { background: var(--xam-nhat); color: var(--xam); border-color: #E2E2E5; }
.tag.kim   { background: var(--chu);      color: #FFFFFF;    border-color: var(--chu); }

.cham { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/*
 | Lá cờ quốc gia (thành phần <x-co>).
 |
 | Bo góc đặt ở đây chứ không đặt trong SVG: một `overflow:hidden` trên thẻ bọc
 | cắt gọn được mọi hình vẽ bên trong, khỏi phải mỗi lá cờ tự khai một clipPath
 | với id riêng — mà id trùng nhau trên trang có hàng trăm lá cờ là một mớ.
 |
 | flex-shrink:0 để cờ không bị bóp méo khi nằm cạnh tên tài khoản dài trong ô
 | flex hẹp.
 |
 | Đây là chỗ DUY NHẤT trên trang được phép có màu tự do: cờ mà đổi sang
 | trắng–đen thì không còn là cờ nữa.
 */
.co {
    display: inline-block;
    width: 20px;
    height: 14px;
    flex-shrink: 0;
    border-radius: 3px;
    overflow: hidden;
    line-height: 0;
    vertical-align: -2px;
}
.co svg { display: block; }

/* Cờ đi kèm mã nước, dùng trong ô có cả chữ. */
.co-ma { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }

/* Tiền: cộng xanh, trừ đỏ. Quy ước duy nhất, dùng ở mọi bảng. */
.tien      { font-family: var(--font-so); font-variant-numeric: tabular-nums; font-weight: 600; }
.tien.cong { color: var(--luc); }
.tien.tru  { color: var(--do); }

/* =========================================================================
   8. NÚT
   ========================================================================= */

/*
 | Nút bo TRÒN HOÀN TOÀN (viên thuốc). Đây là chi tiết nhận ra Apple nhanh
 | nhất — mọi nút trên apple.com, trong App Store, trong Cài đặt iOS đều thế.
 |
 | Nút thường: trắng, viền xám. Nút chính: đen đặc, chữ trắng.
 | Chỉ có HAI bậc, không có bậc thứ ba. Bậc thứ ba trong bảng màu đơn sắc
 | buộc phải phân biệt bằng sắc xám trung gian, mà xám trung gian thì nhìn
 | như nút đang bị tắt.
 */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 8px 16px;
    border-radius: var(--bo-tron);
    border: 1px solid var(--vien-dam);
    background: #fff;
    color: var(--chu);
    font-family: inherit;
    font-size: 15.5px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -.01em;
    cursor: pointer;
    white-space: nowrap;
    transition: background .18s var(--nhip), border-color .18s var(--nhip),
                color .18s var(--nhip), transform .08s var(--nhip);
    text-decoration: none;
}

.btn:hover { background: var(--the-2); border-color: #AFAFB5; text-decoration: none; }
.btn:active { transform: scale(.97); }
.btn svg { width: 15px; height: 15px; }

/* Nút chính và nút «tạo mới» dùng CHUNG một kiểu: đen đặc.
   Hai lớp này không bao giờ đứng cạnh nhau trong cùng một hàng — `.kim` nằm
   ở dải nút trên đầu trang, `.chinh` nằm trong biểu mẫu — nên không có nguy
   cơ hai nút đen tranh nhau vai trò chính trên cùng một khung nhìn. */
.btn.chinh,
.btn.kim {
    background: var(--chu);
    border-color: var(--chu);
    color: #FFFFFF;
    font-weight: 500;
}
.btn.chinh:hover,
.btn.kim:hover { background: #000000; border-color: #000000; }

.btn.duyet { background: var(--luc-nhat); border-color: #C6E3D0; color: var(--luc); }
.btn.duyet:hover { background: #DCEFE2; border-color: #A9D6B8; }

.btn.nguy  { background: var(--do-nhat); border-color: #F2C9C9; color: var(--do); }
.btn.nguy:hover { background: #FADFDF; border-color: #E8AFAF; }

.btn.nho { padding: 5px 12px; font-size: 14.5px; }
.btn.nho svg { width: 13px; height: 13px; }

.btn[disabled], .btn.tat { opacity: .42; pointer-events: none; }

.nhom-nut { display: flex; gap: 7px; flex-wrap: wrap; }

/* =========================================================================
   9. BIỂU MẪU
   ========================================================================= */

.o { margin-bottom: 15px; }
.o:last-child { margin-bottom: 0; }

.o > label, .nhan-o {
    display: block;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--chu-mo);
    margin-bottom: 5px;
}

.inp, .sel, textarea.inp {
    width: 100%;
    padding: 9px 12px;
    border: 1px solid var(--vien-dam);
    border-radius: var(--bo-nho);
    background: #fff;
    font-family: inherit;
    font-size: 16px;
    color: var(--chu);
    transition: border-color .18s var(--nhip), box-shadow .18s var(--nhip);
}

/*
 | Vòng sáng khi con trỏ vào ô: xám đen, dày 4px.
 |
 | Apple dùng vòng xanh dương; ở đây không có xanh dương nên phải bù bằng
 | ĐỘ DÀY — vòng mỏng 3px màu xám gần như không thấy trên nền trắng, và ô
 | đang gõ mà không nhận ra được là lỗi nghiêm trọng ở trang nhập số tiền.
 */
.inp:focus, .sel:focus, textarea.inp:focus {
    outline: none;
    border-color: var(--chu);
    box-shadow: 0 0 0 4px rgba(29, 29, 31, .12);
}

.inp:disabled, .inp[readonly] { background: var(--the-2); color: var(--chu-mo); }

/*
 | Gợi ý trong ô phải nhạt hẳn so với chữ thật. Mặc định của trình duyệt mỗi
 | nơi một kiểu, và ở những ô như "Địa chỉ cổng GM" — nơi gợi ý là một địa chỉ
 | IP trông y như dữ liệu thật — người dùng sẽ tưởng ô đã điền sẵn rồi bỏ qua.
 */
.inp::placeholder, textarea.inp::placeholder { color: var(--chu-nhat); opacity: 1; }

textarea.inp { min-height: 82px; resize: vertical; line-height: 1.5; }

.sel {
    appearance: none;
    padding-right: 32px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 4.5 6 8.5 10 4.5' fill='none' stroke='%236E6E73' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 11px center;
    background-size: 12px;
}

.goi-y { font-size: 14px; color: var(--chu-nhat); margin-top: 4px; line-height: 1.45; }

.loi { font-size: 14.5px; color: var(--do); margin-top: 4px; font-weight: 500; }
.inp.co-loi, .sel.co-loi { border-color: var(--do); }
.inp.co-loi:focus, .sel.co-loi:focus { box-shadow: 0 0 0 4px rgba(215, 0, 21, .14); }

.tick { display: flex; align-items: flex-start; gap: 8px; font-size: 15.5px; cursor: pointer; }
.tick input { margin-top: 3px; accent-color: var(--chu); width: 15px; height: 15px; }

.hang { display: flex; gap: 12px; flex-wrap: wrap; }
.hang > * { flex: 1; min-width: 150px; }

/*
 | Nhóm nút chọn — dựng theo đúng "segmented control" của Apple: một rãnh xám
 | nhạt, ô đang chọn là một viên TRẮNG nổi lên có bóng đổ, trượt trong rãnh.
 |
 | Kiểu cũ (nút liền ô, gạch chân màu ở dưới) đọc ra thành tab điều hướng chứ
 | không phải công tắc chọn một-trong-nhiều. Viên trắng nổi thì không nhầm được.
 */
.chon-nhom {
    display: flex;
    gap: 2px;
    padding: 2px;
    border: 1px solid var(--vien);
    border-radius: 12px;
    background: var(--kim-nhat);
    overflow: hidden;
}
.chon-nhom label {
    flex: 1;
    text-align: center;
    padding: 7px 10px;
    border-radius: 9px;
    font-size: 15.5px;
    font-weight: 500;
    cursor: pointer;
    background: transparent;
    color: var(--chu-mo);
    margin: 0;
    transition: background .18s var(--nhip), color .18s var(--nhip), box-shadow .18s var(--nhip);
}
.chon-nhom label:hover { color: var(--chu); }
.chon-nhom input { position: absolute; opacity: 0; pointer-events: none; }
.chon-nhom input:checked + span { display: block; }
.chon-nhom label:has(input:checked) {
    background: #FFFFFF;
    color: var(--chu);
    font-weight: 600;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .10), 0 0 0 .5px rgba(0, 0, 0, .05);
}
.chon-nhom label.cong:has(input:checked) { background: #FFFFFF; color: var(--luc); box-shadow: 0 1px 3px rgba(0,0,0,.10), inset 0 0 0 1.5px var(--luc); }
.chon-nhom label.tru:has(input:checked)  { background: #FFFFFF; color: var(--do);  box-shadow: 0 1px 3px rgba(0,0,0,.10), inset 0 0 0 1.5px var(--do); }

/*
 | «Đặt về 0» — đỏ ĐẶC, không phải đỏ viền như «Trừ».
 |
 | Hai chiều này cùng làm giảm số dư nên rất dễ đọc lướt thành một. Khác nhau ở
 | chỗ không quay lại được: trừ là lấy đi đúng con số đã gõ, còn đây là xoá sạch
 | tất cả. Nền đặc làm nút đang chọn nổi hẳn khỏi hàng, đủ để mắt dừng lại.
 */
.chon-nhom label.ve-khong:has(input:checked) {
    background: var(--do);
    color: #FFFFFF;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .12);
}

/* Ô ảnh vật phẩm cạnh dòng nhập, giữ chỗ sẵn để dòng không nhảy khi ảnh về */
.o-anh-vp {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid var(--vien);
    border-radius: var(--bo-nho);
    background: var(--the-2);
    overflow: hidden;
}
.o-anh-vp img { max-width: 100%; max-height: 100%; display: block; }

/* Mã vật phẩm hiện dưới ô chọn — CHỈ ĐỌC.
   Ô nhập mã đã bỏ đi vì người trực chọn từ danh mục chứ không gõ tay, nhưng
   mã vẫn phải nhìn thấy được: những khung dùng khối này đều phát ra vật phẩm
   thật và không hoàn tác được, nên cần một chỗ đối chiếu trước khi bấm.

   min-height giữ chỗ sẵn cho dòng chữ. Không có nó thì lúc mã hiện ra, cả
   hàng cao thêm vài pixel và mấy ô bên cạnh nhảy xuống. */
.ma-vp {
    min-height: 16px;
    margin-top: 4px;
    font-family: var(--font-so);
    font-size: 13.5px;
    line-height: 16px;
    color: var(--chu-nhat);
}

/* Gõ vào nhưng không tra ra mã nào. Dòng đó sẽ bị bỏ qua lúc gửi, nên phải
   nói ra Ở ĐÂY — im lặng bỏ qua là người trực tưởng đã đính kèm mà thật ra
   không. */
.ma-vp.chua-ro { color: var(--do); font-family: inherit; }

/* -------------------------------------------------------------------------
   9b. BẢNG GỢI Ý VẬT PHẨM
   -------------------------------------------------------------------------
   Bảng này do JavaScript vẽ và GẮN THẲNG VÀO <body> với position: fixed, chứ
   không nằm trong thẻ cha của ô nhập. Lý do nằm ở .card — thẻ ấy khai
   overflow: hidden để bo góc cắt gọn phần bên trong, nên một bảng thả xuống
   đặt bên trong sẽ bị cắt cụt ngay ở mép thẻ, mà dòng vật phẩm thì thường nằm
   sát đáy thẻ.
   ------------------------------------------------------------------------- */

.vp-goi-y {
    position: fixed;
    z-index: 90;
    background: #fff;
    border: 1px solid var(--vien-the);
    border-radius: 14px;
    box-shadow: var(--bong-nổi);
    overflow: hidden;
    font-size: 15.5px;
}

.vp-ds { max-height: 320px; overflow-y: auto; padding: 5px; }

.vp-mon {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 9px;
    border-radius: 9px;
    cursor: pointer;
}

/* Dòng đang chỉ tới (bằng phím hoặc chuột) nhấn bằng NỀN XÁM, không phải nền
   đen: chữ tên vật phẩm phải đọc được, mà đảo sang chữ trắng thì ảnh vật phẩm
   nền sáng lại chìm. */
.vp-mon:hover, .vp-mon.on { background: var(--kim-nhat); }

.vp-anh {
    width: 26px; height: 26px; flex: 0 0 26px;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid var(--vien);
    border-radius: 7px;
    background: var(--the-2);
    overflow: hidden;
}
.vp-anh img { max-width: 100%; max-height: 100%; display: block; }

/* Món chưa có ảnh: viền nét đứt, nhạt hẳn. Để nguyên khung đặc như khung có
   ảnh thì nó đọc ra thành một ô vuông đang chờ tích — mà cả danh sách toàn ô
   vuông trống thì trông y hệt một danh sách chọn nhiều. */
.vp-anh:empty { border-style: dashed; background: transparent; opacity: .5; }

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

.vp-ma {
    flex: 0 0 auto;
    font-family: var(--font-so);
    font-size: 14px;
    color: var(--chu-nhat);
}
.vp-mon.on .vp-ma, .vp-mon:hover .vp-ma { color: var(--chu-mo); }

.vp-trong { padding: 14px 15px; color: var(--chu-mo); line-height: 1.5; }

/* Dòng chân: nói rõ còn bao nhiêu món chưa vẽ. Đây chính là chỗ <datalist>
   ngày trước im lặng cắt bớt, khiến người trực tưởng danh mục chỉ có ngần ấy. */
.vp-chan {
    padding: 8px 14px;
    border-top: 1px solid var(--vien);
    background: var(--the-2);
    font-size: 14px;
    color: var(--chu-nhat);
}

/* Dòng trạng thái nhỏ cạnh ô tìm tự động */
.o-tim-bao {
    flex: 0 0 auto;
    align-self: center;
    font-size: 14px;
    color: var(--chu-nhat);
    white-space: nowrap;
}
.o-tim-bao.canh { color: var(--do); font-weight: 500; white-space: normal; }

/* =========================================================================
   10. THANH LỌC
   ========================================================================= */

.loc {
    display: flex;
    gap: 9px;
    align-items: center;
    flex-wrap: wrap;
    padding: 13px 18px;
    background: var(--the-2);
    border-bottom: 1px solid var(--vien);
}

.loc .inp, .loc .sel { width: auto; min-width: 140px; padding: 7px 11px; font-size: 15.5px; }
/*
 | Sàn 150px chứ không phải 200px.
 |
 | Ô tìm khai flex: 1 nên ở thanh lọc rộng nó vẫn chiếm hết chỗ thừa — sàn này
 | chỉ quyết định lúc nào cả thanh phải xuống dòng. Từ khi trang «Gửi thư vật
 | phẩm» xếp hai cột, thanh lọc chỉ còn ~680px; để 200 thì tổng bề ngang vượt
 | chỗ có và hàng viên lọc tụt xuống dòng dưới.
 */
.loc .rong { flex: 1; min-width: 150px; }

/*
 | Trả lại khoảng trống bên phải cho mũi tên của ô chọn.
 |
 | Dòng ngay trên dùng `padding` viết tắt, mà `.loc .sel` thắng `.sel` về độ ưu
 | tiên — nên nó xoá luôn `padding-right: 32px` mà .sel khai để chừa chỗ cho mũi
 | tên. Hậu quả: mọi ô chọn trong thanh lọc đều bị mũi tên đè lên chữ cuối, thấy
 | rõ nhất ở ô chọn máy chủ («803 · Tây Môn Khán|h»).
 */
.loc .sel { padding-right: 30px; }

/* Nút lọc nhanh dạng viên thuốc */
.vien-loc {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 13px;
    border-radius: var(--bo-tron);
    border: 1px solid var(--vien-dam);
    background: #fff;
    color: var(--chu-mo);
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
    transition: background .18s var(--nhip), border-color .18s var(--nhip), color .18s var(--nhip);
}
.vien-loc:hover { background: #fff; border-color: #AFAFB5; color: var(--chu); text-decoration: none; }
.vien-loc.on { background: var(--chu); border-color: var(--chu); color: #FFFFFF; font-weight: 600; }
.vien-loc .dem {
    min-width: 18px; padding: 0 5px; height: 17px;
    border-radius: var(--bo-tron); background: var(--xam-nhat); color: var(--chu-mo);
    font-size: 13px; display: inline-flex; align-items: center; justify-content: center;
}
.vien-loc.on .dem { background: rgba(255, 255, 255, .22); color: #FFFFFF; }

/* =========================================================================
   11. THÔNG BÁO
   ========================================================================= */

.alert {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 12px 15px;
    border-radius: 14px;
    border: 1px solid;
    margin-bottom: 18px;
    font-size: 15.5px;
    line-height: 1.5;
}
.alert svg { width: 17px; height: 17px; flex: 0 0 17px; margin-top: 1px; }

/*
 | Chỉ tiêu đề của thông báo mới xuống dòng riêng. Trước đây quy tắc này gắn
 | thẳng vào thẻ <b>, khiến mọi chữ in đậm giữa câu — số tiền, tên cột — bị
 | ngắt thành từng dòng và câu văn vỡ vụn.
 */
.alert .tieu { display: block; margin-bottom: 2px; font-weight: 600; }

.alert.ok   { background: var(--luc-nhat); border-color: #CFE8D7; color: #1B6E2F; }
.alert.bad  { background: var(--do-nhat);  border-color: #F5D2D2; color: var(--do-tham); }
.alert.warn { background: var(--cam-nhat); border-color: #F2DCC2; color: #8A3E00; }
.alert.info { background: var(--lam-nhat); border-color: #CFE0F5; color: #0055AA; }

/* Ô ghi chú giải thích trong biểu mẫu — nền xám nhạt, không viền đậm */
.chu-thich {
    background: var(--kim-nhat);
    border: 1px solid var(--vien);
    border-radius: 12px;
    padding: 11px 13px;
    font-size: 14.5px;
    color: var(--chu-mo);
    line-height: 1.5;
}

/* =========================================================================
   12. KHUNG MỞ RỘNG (dùng <details>, không cần JavaScript)
   ========================================================================= */

details.khung { border-top: 1px solid var(--vien); }
details.khung > summary {
    list-style: none;
    cursor: pointer;
    padding: 11px 18px;
    font-size: 15.5px;
    font-weight: 500;
    color: var(--chu-mo);
    display: flex; align-items: center; gap: 8px;
    background: var(--the-2);
    transition: color .18s var(--nhip);
}
details.khung > summary:hover { color: var(--chu); }
details.khung > summary::-webkit-details-marker { display: none; }
details.khung > summary::after {
    content: "";
    margin-left: auto;
    width: 7px; height: 7px;
    border-right: 1.8px solid var(--chu-nhat);
    border-bottom: 1.8px solid var(--chu-nhat);
    transform: rotate(45deg) translateY(-2px);
    transition: transform .2s var(--nhip);
}
details.khung[open] > summary::after { transform: rotate(-135deg) translateY(-2px); }
details.khung > .noi-dung { padding: 16px 18px; }

/* Khung thao tác nhanh ngay trong hàng của bảng */
details.trong-hang > summary { background: none; padding: 0; }
details.trong-hang > summary::after { display: none; }
details.trong-hang > .noi-dung { padding: 10px 0 4px; }

/* =========================================================================
   13. BIỂU ĐỒ CỘT (thuần CSS, không thư viện)
   ========================================================================= */

/*
 | Khoảng trống trên đỉnh KHÔNG phải để cho thoáng — nó là chỗ đứng của nhãn số.
 |
 | Nhãn nằm ngoài thân cột (position: absolute; bottom: 100%), nên cột cao nhất
 | luôn đẩy nhãn của nó lên trên mép vùng vẽ. Không chừa dải này thì nhãn ấy bị
 | .bang-cuon cắt mất — mà .bang-cuon buộc phải cắt: overflow-x: auto kéo theo
 | overflow-y thành auto, trình duyệt không cho chỉ cuộn một chiều.
 |
 | 192 = 168 vùng vẽ + 24 dải nhãn, giữ nguyên chiều cao cột như trước.
 */
.chart {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    height: 192px;
    padding: 24px 4px 0;
}

.chart-cot { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; }

/*
 | Cột xám nhạt, RIÊNG cột hôm nay đen đặc.
 |
 | Bản cũ tô mọi cột vàng kim rồi tô đỏ cột hôm nay. Ở bảng đơn sắc, cách
 | tương đương và thật ra rõ hơn: hạ toàn bộ cột xuống xám, để một cột đen
 | duy nhất. Mắt bắt cột hôm nay ngay cả khi liếc qua.
 */
.chart-thanh {
    width: 100%;
    max-width: 34px;
    border-radius: 5px 5px 0 0;
    background: #D2D2D7;
    min-height: 3px;
    position: relative;
    transition: background .18s var(--nhip);
}
.chart-cot:hover .chart-thanh { background: #B8B8BE; }

.chart-cot.hom-nay .chart-thanh { background: var(--chu); }
.chart-cot.hom-nay:hover .chart-thanh { background: #000; }

.chart-nhan { font-size: 12.5px; color: var(--chu-nhat); margin-top: 6px; white-space: nowrap; }

/*
 | NHÃN SỐ TRÊN ĐẦU CỘT — hiện thường trực, không phải rê chuột mới thấy.
 |
 | Bản trước là một hộp đen kiểu chú giải, opacity: 0 và chỉ bật lên khi trỏ vào
 | cột. Hai vấn đề, cả hai đều do người dùng báo: đọc được đúng một cột mỗi lần,
 | và hộp đen lúc bật lên rộng hơn cột nên che luôn cột bên cạnh — đúng lúc cần
 | so hai ngày liền nhau thì lại không nhìn được cả hai.
 |
 | Nay bỏ hẳn cơ chế rê chuột. Giữ cả hai cùng lúc chỉ gây nhiễu: số đã nằm sẵn
 | trên màn hình rồi mà trỏ vào vẫn nhảy thêm một hộp nữa. Số ĐẦY ĐỦ vẫn lấy
 | được — nằm ở thuộc tính title của cả cột, do trình duyệt tự hiện.
 |
 | Ba lựa chọn để nhãn vừa bề ngang ~40px của một cột, và không cột nào chạm
 | chữ vào cột bên cạnh kể cả khi hai cột cao bằng nhau:
 |
 |   • Chữ trần, KHÔNG nền không viền. Nền và viền ăn thêm chừng 14px bề ngang
 |     — đúng phần dư ra khiến hai nhãn cạnh nhau dính vào nhau.
 |   • Phông chữ THƯỜNG chứ không phải var(--font-so). Phông đều chữ cho mọi ký
 |     tự cùng bề rộng, đọc theo cột thì thẳng hàng nhưng ở đây chỉ tổ rộng ra;
 |     nhãn này cũng không xếp cột với nhau nên không cần thẳng hàng.
 |   • Nội dung đã viết tắt sẵn từ phía PHP (hàm so_gon): tối đa sáu ký tự dạng
 |     «4,95tr», chừng 33px ở cỡ chữ 10px.
 |
 | max-width chặn theo bề ngang cột: khổ màn hình hẹp bất thường thì nhãn tự
 | thu lại và ellipsis, chứ không đè sang cột bên. Số đầy đủ vẫn còn ở title.
 |
 | Màu chữ dùng var(--chu-mo) — chữ nằm trên nền TRẮNG của thẻ chứ không nằm
 | trên thân cột, nên đọc được như nhau ở mọi cột.
 */
.chart-so {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: 4px;
    max-width: 46px;
    font-size: 12px;
    line-height: 1.4;
    color: var(--chu-mo);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: none;
}

/* Cột hôm nay: nhấn bằng ĐỘ ĐẬM và độ tối của chữ. */
.chart-cot.hom-nay .chart-so { color: var(--chu); font-weight: 700; }

/* =========================================================================
   13b. BIỂU ĐỒ THANH NGANG (phân bố — thuần CSS, không thư viện)
   -------------------------------------------------------------------------
   Vì sao NGANG chứ không dựng cột như biểu đồ doanh thu: nhãn ở đây là chữ
   tiếng Việt dài — «Hồ Chí Minh», «Bà Rịa - Vũng Tàu», «Mãnh Tướng», «không
   rõ». Dựng cột thì chỉ còn chừng 40px bề ngang cho mỗi nhãn, và cách duy
   nhất để nhét vừa là xoay chữ nghiêng — thứ mà mắt phải nghiêng theo mới đọc
   được. Thanh ngang cho nhãn nguyên một dòng, dài bao nhiêu cũng chứa được.

   Tên nằm TRÊN thanh chứ không nằm cạnh thanh, cũng vì lý do đó: cột tên đặt
   bề rộng cố định thì tên dài hoặc bị cắt cụt, hoặc đẩy thanh ngắn lại; đặt
   bề rộng co giãn thì mỗi thẻ một kiểu và không so ngang được giữa các thẻ.
   Đặt tên lên trên thì tên dài chỉ việc xuống dòng, mọi thanh vẫn cùng gốc và
   cùng chiều dài tối đa.

   MỘT MÀU cho mọi thanh trong một biểu đồ. Tô đậm dần theo giá trị nghe có vẻ
   trực quan nhưng là vẽ cùng một thông tin hai lần — bề dài đã nói đủ — và tỉnh
   thành hay kênh nạp thì vốn không có thứ tự tự nhiên nào để mà tô theo.
   ========================================================================= */

.pb { display: flex; flex-direction: column; gap: 12px; }

.pb-dong { min-width: 0; }

.pb-dau {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 5px;
    font-size: 15px;
}

/* overflow-wrap: anywhere thay vì cắt cụt — một tên tỉnh bị cắt mất đuôi là
   dữ liệu sai, còn xuống dòng thì chỉ tốn thêm mấy pixel chiều cao. */
.pb-ten { min-width: 0; overflow-wrap: anywhere; color: var(--chu); }

.pb-gia { margin-left: auto; white-space: nowrap; color: var(--chu-mo); }
.pb-gia b { color: var(--chu); font-weight: 600; }
.pb-gia i { font-style: normal; font-size: 14px; color: var(--chu-nhat); margin-left: 5px; }

/* Rãnh nền là một bậc nhạt của CHÍNH màu thanh, để chỗ chưa đầy vẫn đọc ra
   được là "phần còn lại của cùng một thang đo". */
.pb-rang {
    height: 8px;
    border-radius: var(--bo-tron);
    background: var(--kim-nhat);
    overflow: hidden;
}

/*
 | Vuông ở gốc, bo tròn ở đầu mút — đầu mút bo tròn cho mắt bắt được điểm kết
 | thúc, còn gốc phải thẳng vì mọi thanh đều đo từ đúng một đường thẳng đứng đó.
 */
.pb-rang span {
    display: block;
    height: 100%;
    min-width: 0;
    border-radius: 2px 8px 8px 2px;
    background: var(--chu);
    transition: opacity .18s var(--nhip);
}

.pb-dong:hover .pb-rang span { opacity: .78; }

/* =========================================================================
   14. DANH SÁCH MÔ TẢ (trang chi tiết)
   ========================================================================= */

.dl { display: grid; grid-template-columns: 128px minmax(0, 1fr); gap: 0; font-size: 15.5px; }
.dl dt {
    padding: 9px 0;
    color: var(--chu-mo);
    font-size: 14.5px;
    border-bottom: 1px solid #EFEFF2;
}
.dl dd {
    padding: 9px 0;
    margin: 0;
    border-bottom: 1px solid #EFEFF2;
    word-break: break-word;
}
.dl dt:last-of-type, .dl dd:last-of-type { border-bottom: none; }

/* =========================================================================
   15. PHÂN TRANG
   ========================================================================= */

.pager {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-wrap: wrap;
    padding: 13px 18px;
    border-top: 1px solid var(--vien);
    background: var(--the-2);
}

.pager a, .pager span {
    min-width: 32px;
    height: 32px;
    padding: 0 10px;
    border-radius: var(--bo-tron);
    border: 1px solid var(--vien-dam);
    background: #fff;
    color: var(--chu);
    font-size: 15px;
    display: inline-flex; align-items: center; justify-content: center;
    text-decoration: none;
    transition: background .18s var(--nhip), border-color .18s var(--nhip);
}
.pager a:hover { background: #fff; border-color: #AFAFB5; text-decoration: none; }
.pager .on { background: var(--chu); border-color: var(--chu); color: #FFFFFF; font-weight: 600; }
.pager .tat { opacity: .38; pointer-events: none; }
.pager .tom-tat { margin-left: auto; border: none; background: none; color: var(--chu-nhat); font-size: 14.5px; }

/* =========================================================================
   16. TRANG ĐĂNG NHẬP
   ========================================================================= */

.dang-nhap {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: #000000;
}

/* Hai vầng sáng trắng rất mờ cho nền đen đỡ phẳng — thuần CSS, không tốn ảnh.
   Đây là cách Apple làm nền trang sản phẩm tối: không hoa văn, chỉ chênh sáng. */
.dang-nhap::before {
    content: "";
    position: fixed; inset: 0;
    background:
        radial-gradient(760px 420px at 20% 6%,  rgba(255, 255, 255, .10), transparent 62%),
        radial-gradient(620px 380px at 86% 94%, rgba(255, 255, 255, .06), transparent 60%);
    pointer-events: none;
}

.the-dang-nhap {
    position: relative;
    width: 100%;
    max-width: 390px;
    background: #fff;
    border-radius: 20px;
    box-shadow: var(--bong-nổi);
    padding: 32px 28px 26px;
}

.the-dang-nhap .dinh { text-align: center; margin-bottom: 24px; }
.the-dang-nhap .dinh .brand-dau {
    width: 48px; height: 48px; margin: 0 auto 12px; font-size: 20px;
    border-radius: 12px;
    background: var(--chu); color: #FFFFFF;   /* trên nền thẻ trắng thì đảo lại */
}
.the-dang-nhap .dinh h1 { font-size: 22px; margin-bottom: 3px; }
.the-dang-nhap .dinh p  { margin: 0; font-size: 15px; color: var(--chu-nhat); }

.dang-nhap-chan {
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px solid var(--vien);
    font-size: 14px;
    color: var(--chu-nhat);
    text-align: center;
    line-height: 1.6;
}

/* =========================================================================
   17. TIỆN ÍCH
   ========================================================================= */

.mt0 { margin-top: 0; }    .mt8 { margin-top: 8px; }   .mt14 { margin-top: 14px; }
.mb0 { margin-bottom: 0; } .mb8 { margin-bottom: 8px; } .mb14 { margin-bottom: 14px; }
.mt18 { margin-top: 18px; }
.giua-ngang { text-align: center; }
.phai-ngang { text-align: right; }
.mo   { color: var(--chu-mo); }
.nhat { color: var(--chu-nhat); }
.nho  { font-size: 14.5px; }
.dam  { font-weight: 600; }
.tren-hang { display: flex; align-items: center; gap: 8px; }
.day { display: flex; align-items: center; justify-content: space-between; gap: 12px; }

.ma {
    display: inline-block;          /* để trên thẻ khối cũng chỉ rộng bằng nội dung */
    max-width: 100%;
    font-family: var(--font-so);
    font-size: 14.5px;
    background: var(--the-2);
    border: 1px solid var(--vien);
    border-radius: 6px;
    padding: 1px 7px;
    /* Chỉ ngắt khi thật sự không vừa, thay vì cắt giữa mọi từ như break-all */
    overflow-wrap: break-word;
    word-break: normal;
}

pre.json {
    margin: 0;
    padding: 13px 15px;
    background: #1D1D1F;
    color: #F5F5F7;
    border-radius: 12px;
    font-family: var(--font-so);
    font-size: 14.5px;
    line-height: 1.55;
    overflow-x: auto;
    white-space: pre-wrap;
    word-break: break-word;
}

/* Vạch phân cách có chữ */
.vach {
    display: flex; align-items: center; gap: 10px;
    color: var(--chu-nhat); font-size: 14px;
    margin: 16px 0;
}
.vach::before, .vach::after { content: ""; flex: 1; height: 1px; background: var(--vien); }

/* =========================================================================
   18. MÀN HÌNH HẸP
   ========================================================================= */

@media (max-width: 1100px) {
    .luoi-2, .luoi-3, .luoi-2-1, .luoi-1-2 { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 900px) {
    .side {
        position: fixed;
        z-index: 60;
        left: 0; top: 0;
        transform: translateX(-100%);
        transition: transform .28s var(--nhip);
        box-shadow: 8px 0 40px rgba(0, 0, 0, .3);
    }
    body.mo-menu .side { transform: none; }

    body.mo-menu::after {
        content: "";
        position: fixed; inset: 0;
        background: rgba(0, 0, 0, .42);
        backdrop-filter: blur(2px);
        -webkit-backdrop-filter: blur(2px);
        z-index: 55;
    }

    .nut-menu { display: inline-flex; }
    .topbar { padding: 0 14px; }
    .body-wrap { padding: 16px 14px 40px; }
    .topbar .duong-dan { display: none; }
}

@media (max-width: 560px) {
    .tiles { grid-template-columns: minmax(0, 1fr); }
    /*
     | 14 cột không vừa màn hình hẹp — cho cuộn ngang thay vì bóp méo biểu đồ.
     |
     | 580 chứ không phải 440 như trước: nhãn số nay hiện thường trực trên đầu
     | mỗi cột và cần chừng 36px một cột mới đọc trọn «4,95tr». Để 440 thì mỗi
     | cột chỉ còn 26px, nhãn bị cắt bằng dấu ba chấm — tức là quay lại đúng
     | tình trạng «số bị che» mà lần sửa này giải quyết.
     */
    .chart { min-width: 580px; }
    .dl { grid-template-columns: minmax(0, 1fr); }
    .dl dt { padding-bottom: 0; border-bottom: none; }
    .card-dau { flex-wrap: wrap; }
    .card-dau .phai { margin-left: 0; width: 100%; }
}

/* Người dùng đã tắt hiệu ứng chuyển động ở cấp hệ điều hành thì tôn trọng. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
    }
}

/* In ra giấy: bỏ điều hướng, giữ nội dung */
@media print {
    .side, .topbar, .loc, .pager, .btn, details.khung { display: none !important; }
    .card { box-shadow: none; border-color: #CCC; }
    body { background: #fff; }
}