/* =====================================================================
   NÂNG CẤP GIAO DIỆN CHUNG — cùng phong cách với trang chủ bảng điều hành.
   Nạp sau app.css, chỉ đè lên kiểu cũ, không đổi cấu trúc trang.
   ===================================================================== */

/* ------------------------------------------------ nền trang, thanh trên */
body { background: #f7f6f2; }
.page { padding-top: 24px; }
.bar { background: rgba(247, 246, 242, .9); }
.bar h1 { font-size: 1.3rem; }

/* ------------------------------------------------ thanh bên */
.sb { background: linear-gradient(180deg, #0c1b38 0%, var(--ink) 45%, #081226 100%); }
.sb-nav a.on { background: linear-gradient(90deg, rgba(77, 114, 255, .32), rgba(77, 114, 255, .08)); box-shadow: inset 0 0 0 1px rgba(125, 162, 255, .18); }
.sb-nav a.on svg { color: #9db6ff; }
/* logo thật của Hải Long Land (bản chữ trắng cho nền tối) */
.sb-logo { flex-direction: column; align-items: flex-start; gap: 8px; padding: 20px 18px 16px; }
.sb-logo img { display: block; width: 100%; max-width: 206px; height: auto; }
.sb-he { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: .64rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: #9db6ff; background: rgba(77, 114, 255, .16); border: 1px solid rgba(125, 162, 255, .22); }

/* ------------------------------------------------ lời giải thích đầu trang */
.phu { position: relative; max-width: none; margin: 0 0 18px; padding: 12px 16px 12px 44px; border-radius: 12px;
  background: #fff; border: 1px solid var(--line); color: var(--muted); font-size: .86rem; line-height: 1.55; }
.phu::before { content: "i"; position: absolute; left: 14px; top: 12px; width: 20px; height: 20px; border-radius: 50%;
  display: grid; place-items: center; background: var(--brand-soft); color: var(--brand); font-weight: 700; font-size: .78rem; font-style: italic; font-family: Georgia, serif; }
.phu b { color: var(--ink); }

/* ------------------------------------------------ thẻ */
.card, .bd-card { border-radius: 18px; border-color: #e8e3d9; box-shadow: 0 1px 2px rgba(10, 23, 48, .04), 0 8px 24px -18px rgba(10, 23, 48, .25); }
.card > header h3, .card > header h2 { font-size: 1rem; font-weight: 700; }
.card > header h2 { font-family: var(--sans); letter-spacing: -.01em; }
.card > header .num { width: 28px; height: 28px; border-radius: 9px; background: linear-gradient(140deg, var(--brand-2), var(--brand)); color: #fff; }
.bd-dau h3 { font-weight: 700; }

/* thẻ bộ lọc: gọn thành một thanh */
.card.no-print, #p-ds > .card:first-child { padding: 14px 18px; background: #fff; }
.card.no-print > header, #p-ds > .card:first-child > header { margin-bottom: 10px; }

/* ------------------------------------------------ ô số liệu */
.stats { gap: 14px; }
.stat { border-radius: 16px; border-color: #e8e3d9; padding: 16px 18px 15px;
  box-shadow: 0 1px 2px rgba(10, 23, 48, .04), 0 8px 24px -20px rgba(10, 23, 48, .3); transition: transform .25s var(--ease), box-shadow .25s; }
.stat:hover { transform: translateY(-1px); box-shadow: 0 1px 2px rgba(10, 23, 48, .05), 0 14px 30px -20px rgba(10, 23, 48, .38); }
/* vạch màu bên trái cũ → chấm màu cạnh tên ô */
.stat .vach { left: 18px; top: 21px; bottom: auto; width: 8px; height: 8px; border-radius: 50%; }
.stat:has(.vach) small { padding-left: 15px; }
.stat small { font-size: .7rem; letter-spacing: .08em; }
/* số lớn: phông không chân, chữ số tỉ lệ (tabular chỉ dùng cho cột bảng) */
.stat b { margin-top: 7px; font-size: 1.55rem; font-variant-numeric: lining-nums proportional-nums;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stat > b small, .stat:has(.vach) > b small { display: inline; padding: 0; margin-left: 2px; font-size: .55em; font-weight: 600;
  opacity: .6; letter-spacing: 0; text-transform: none; color: inherit; }
.stat b[title] { cursor: help; }
.stat i { font-size: .77rem; }
.stat.brand { background: radial-gradient(120% 140% at 0% 0%, #1d3a8a 0%, var(--ink) 60%); }

/* ------------------------------------------------ bảng */
.tbl-wrap { border-color: #ebe6dc; border-radius: 14px; }
table { font-size: .875rem; }
th, td { padding: 11px 13px; border-bottom-color: #f0ece4; }
thead th { background: #faf8f4; color: var(--muted); font-size: .69rem; letter-spacing: .07em; border-bottom: 1px solid #ebe6dc; }
tbody tr { transition: background .15s; }
tbody tr:hover { background: #f5f8ff; }
tbody td:first-child { font-weight: 500; color: var(--ink); }

/* thanh tỉ lệ sau con số trong ô bảng */
td.o-thanh { position: relative; min-width: 150px; }
td.o-thanh .db { position: absolute; right: 10px; top: 50%; height: 22px; margin-top: -11px; max-width: calc(100% - 20px);
  border-radius: 6px; background: linear-gradient(90deg, rgba(42, 120, 214, .06), rgba(42, 120, 214, .2)); }
td.o-thanh .db.am { background: linear-gradient(90deg, rgba(192, 43, 43, .05), rgba(192, 43, 43, .18)); }
td.o-thanh .db-so { position: relative; font-weight: 700; }

/* ------------------------------------------------ nhãn */
.chip { padding: 3px 10px; font-size: .71rem; font-weight: 700; letter-spacing: .01em; }
.chip.A, .chip.B, .chip.C { min-width: 26px; text-align: center; }

/* ------------------------------------------------ ô nhập, nút */
.field input, .field select, .field textarea { background: #fff; border-color: #e3ddd1; }
.btn-primary { background: linear-gradient(140deg, var(--brand-2), var(--brand)); box-shadow: 0 6px 16px -8px rgba(33, 73, 230, .6); }
.btn-primary:hover { background: var(--ink); }

/* ------------------------------------------------ phiếu chuyến */
.seg { border-radius: 14px; background: #fff; }
.lai { border-radius: 18px; }
.lai-top { background: radial-gradient(120% 140% at 0% 0%, #1d3a8a 0%, var(--ink) 60%); }
.li.tong b { font-size: 1.2rem; letter-spacing: -.01em; }

/* ------------------------------------------------ việc cần làm, thanh dưới, hộp thoại */
.viec a { background: #fff; border-radius: 12px; }
.viec a:hover { border-color: var(--brand-2); box-shadow: var(--shadow-sm); }
.viec a .n { min-width: 28px; padding: 2px 8px; border-radius: 999px; background: var(--ivory); text-align: center; }
.viec a.c1 .n { background: var(--err-soft); color: var(--err); }
.viec a.c2 .n { background: var(--warn-soft); color: var(--warn); }
.dock { background: rgba(247, 246, 242, .94); }
dialog { border-radius: 18px; }
.dlg-head h3 { font-family: var(--sans); font-weight: 700; }

@media (max-width: 720px) {
  .stat b { font-size: 1.35rem; }
  td.o-thanh { min-width: 120px; }
}

/* ------------------------------------------------ cảnh báo số liệu */
.sb-nav a .dem.loi { background: var(--err); color: #fff; }
.kt-muc { display: inline-block; flex: none; padding: 3px 10px; border-radius: 999px; font-size: .68rem; font-weight: 800;
  letter-spacing: .06em; text-transform: uppercase; }
.kt-muc.nang { background: var(--err); color: #fff; }
.kt-muc.vua { background: var(--warn-soft); color: var(--warn); box-shadow: inset 0 0 0 1px #efd9a8; }
.kt-muc.nhe { background: var(--brand-soft); color: var(--brand); }
.kt-the { border-left: 4px solid var(--brand-2); }
.kt-the.nang { border-left-color: var(--err); }
.kt-the.vua { border-left-color: #e0a526; }
.kt-the > header h3 { margin-right: auto; }
.kt-the > header .hint { margin-left: 0; }
.kt-vi { margin: -6px 0 14px; font-size: .85rem; color: var(--muted); }
.kt-hoi { color: var(--brand); font-weight: 600; }
.kt-chung-ds { display: grid; gap: 10px; }
.kt-chung { display: grid; grid-template-columns: auto 1fr 170px; gap: 14px; align-items: center; padding: 12px 14px;
  border-radius: 12px; background: var(--paper); border: 1px solid #efe9df; }
.kt-chung b { font-size: .9rem; color: var(--ink); }
.kt-chung p { margin: 2px 0 0; font-size: .82rem; color: var(--muted); }
.kt-chung p.kt-hoi { color: var(--brand); }
.kt-ti { display: grid; grid-template-columns: 1fr 40px; gap: 8px; align-items: center; }
.kt-ti em { font-style: normal; font-weight: 700; font-size: .82rem; text-align: right; color: var(--ink); }
.kt-chung.vua .phan-thanh i { background: #e0a526; }
.kt-chung.nhe .phan-thanh i { background: var(--s1); }
.dau-cb { display: inline-grid; place-items: center; width: 17px; height: 17px; margin-left: 6px; border-radius: 50%;
  font-size: .7rem; font-weight: 800; color: #fff; vertical-align: 1px; cursor: help; }
.dau-cb.nang { background: var(--err); }
.dau-cb.vua { background: #e0a526; }
@media (max-width: 720px) { .kt-chung { grid-template-columns: 1fr; } }

/* xác nhận cảnh báo hợp lý */
.kt-phai { display: grid; gap: 8px; justify-items: end; }
.kt-chung { grid-template-columns: auto 1fr 200px; }
.kt-chung.da, tr.kt-da { opacity: .78; }
.kt-chung.da { background: var(--ok-soft); border-color: #cfe8da; }
tr.kt-da td { background: #f6fbf8; }
.kt-xn { margin-top: 6px; padding: 6px 10px; border-radius: 8px; background: var(--ok-soft); color: var(--ok); font-size: .78rem; line-height: 1.45; }
.kt-xn span { color: var(--text); }
.kt-nut { border-color: #bfe0cd; color: var(--ok); }
.kt-nut:hover { background: var(--ok); border-color: var(--ok); color: #fff; }
.kt-bo { color: var(--muted); }
.cb-nd { padding: 12px 14px; border-radius: 12px; background: var(--paper); border: 1px solid var(--line); font-size: .88rem; line-height: 1.6; }
#cb_nguoi.am { color: var(--err); }
.canh.xn { background: var(--ok-soft); color: var(--ok); }