/* =====================================================================
   VBI Portal — hệ thống hình thức
   ---------------------------------------------------------------------
   Ý tưởng: đây không phải bảng điều khiển phần mềm, đây là SỔ ĐỐI CHIẾU.
   Thứ hai bên ký cuối tháng là một tờ giấy. Nên màn hình mượn ngữ vựng
   của sổ sách: kẻ dòng thay vì tô nền, số thẳng cột, số âm ghi đỏ,
   giấy trắng đặt trên mặt bàn xanh xám.

   Màu lấy thẳng từ logo VietinBank Insurance:
     #00538E mực xanh   ·   #D71249 đỏ triện
   Đỏ chỉ dùng cho MỘT nghĩa duy nhất: tiền đi ra và hành động xóa.
   ===================================================================== */

:root {
  /* mực */
  --muc:        #00538E;
  --muc-dam:    #013D6B;
  --muc-sang:   #1B6DAE;
  --muc-nhat:   #E9F1F8;
  --muc-vien:   #C2D9EC;

  /* triện — tiền đi ra, hành động xóa */
  --son:        #D71249;
  --son-dam:    #A50E38;
  --son-nhat:   #FDECF1;

  /* đã chốt */
  --luc:        #0B7A55;
  --luc-nhat:   #E4F4ED;
  /* đang chờ */
  --nghe:       #9A6206;
  --nghe-nhat:  #FDF2E0;

  /* giấy & bàn */
  --ban:        #EDF1F6;
  --giay:       #FFFFFF;
  --ke:         #DDE4EB;
  --ke-dam:     #C4CFDA;

  --chu:        #10212F;
  --chu-nhat:   #55677A;
  --chu-mo:     #8697A8;

  --bong-1: 0 1px 2px rgba(16,33,47,.05), 0 1px 3px rgba(16,33,47,.04);
  --bong-2: 0 2px 4px rgba(16,33,47,.06), 0 4px 14px rgba(16,33,47,.06);
  --bong-3: 0 12px 40px rgba(16,33,47,.18);

  --r: 8px;
  --r-nho: 5px;

  /* chuyển động — một thang duy nhất, dùng lại khắp nơi */
  --ra:  200ms cubic-bezier(.22,.72,.28,1);
  --vao: 130ms cubic-bezier(.4,0,.7,.2);
  --nhanh: 110ms ease-out;
}

@media (prefers-reduced-motion: reduce) {
  :root { --ra: 1ms; --vao: 1ms; --nhanh: 1ms; }
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: 'Be Vietnam Pro', 'Segoe UI', system-ui, -apple-system, sans-serif;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--chu);
  background: var(--ban);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Số tiền phải thẳng cột — không có ngoại lệ nào trong hệ này. */
.tien, td.so, th.so, .gia-tri, .so-lieu { font-variant-numeric: tabular-nums; }

h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -.015em; }
a { color: var(--muc); }

:focus-visible {
  outline: 2px solid var(--muc-sang);
  outline-offset: 2px;
  border-radius: 3px;
}

/* Nhãn nhỏ in hoa — dùng cho mọi nhãn dữ liệu, tạo nhịp chung. */
.mac {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .085em;
  text-transform: uppercase;
  color: var(--chu-nhat);
}

/* ==================================================== HIỆU ỨNG DÙNG CHUNG */
@keyframes lenNhe   { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes hienRa   { from { opacity: 0; } to { opacity: 1; } }
@keyframes noHop    { from { opacity: 0; transform: scale(.975) translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes truotLen { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes loeLuc   { 0% { background: var(--luc-nhat); } 100% { background: transparent; } }
@keyframes loeSon   { 0% { background: var(--son-nhat); } 100% { background: transparent; } }
@keyframes chayNgang { from { background-position: 100% 0; } to { background-position: -100% 0; } }
@keyframes xoay     { to { transform: rotate(360deg); } }

.vao-dan > * { animation: lenNhe var(--ra) both; }
.vao-dan > *:nth-child(1) { animation-delay: 0ms; }
.vao-dan > *:nth-child(2) { animation-delay: 45ms; }
.vao-dan > *:nth-child(3) { animation-delay: 90ms; }
.vao-dan > *:nth-child(4) { animation-delay: 135ms; }
.vao-dan > *:nth-child(5) { animation-delay: 180ms; }
.vao-dan > *:nth-child(6) { animation-delay: 225ms; }

.vao-trang { animation: lenNhe var(--ra) both; }

/* ------------------------------------------------------------ ĐĂNG NHẬP */
.trang-dang-nhap {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
  position: relative;
  overflow: hidden;
  background: var(--ban);
}
/* Nền: dải kẻ chéo rất mờ, gợi giấy kẻ của sổ sách. Tĩnh, không động. */
.trang-dang-nhap::before {
  content: '';
  position: absolute;
  inset: -20%;
  background:
    radial-gradient(900px 460px at 12% -6%, rgba(0,83,142,.10), transparent 62%),
    radial-gradient(700px 420px at 96% 104%, rgba(215,18,73,.055), transparent 60%),
    repeating-linear-gradient(112deg, rgba(0,83,142,.032) 0 1px, transparent 1px 26px);
  pointer-events: none;
}

.hop-dang-nhap {
  position: relative;
  width: 100%;
  max-width: 408px;
  background: var(--giay);
  border: 1px solid var(--ke);
  border-radius: 12px;
  box-shadow: var(--bong-2);
  padding: 34px 32px 28px;
  animation: noHop 320ms cubic-bezier(.22,.72,.28,1) both;
}
/* Vạch triện đỏ mảnh ở mép trên — dấu hiệu nhận biết của cổng này. */
.hop-dang-nhap::before {
  content: '';
  position: absolute;
  top: -1px; left: 32px; right: 32px; height: 3px;
  background: linear-gradient(90deg, var(--muc) 0 62%, var(--son) 62% 100%);
  border-radius: 0 0 3px 3px;
}
.hop-dang-nhap .logo { height: 36px; margin-bottom: 22px; }
.hop-dang-nhap h1 { font-size: 19px; letter-spacing: -.02em; }
.hop-dang-nhap .phu { color: var(--chu-nhat); font-size: 13px; margin: 5px 0 24px; line-height: 1.45; }

/* ---------------------------------------------------------------- KHUNG */
.khung { display: grid; grid-template-columns: 244px 1fr; min-height: 100vh; }

.ben {
  background: var(--muc-dam);
  color: #fff;
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
}
.ben-dau { padding: 18px 18px 15px; border-bottom: 1px solid rgba(255,255,255,.14); }
.ben-dau img { height: 29px; display: block; filter: brightness(0) invert(1); }
.ben-dau .vai-tro { margin-top: 11px; font-size: 10.5px; font-weight: 600;
  letter-spacing: .09em; text-transform: uppercase; color: rgba(255,255,255,.62); }

.chon-don-vi { padding: 13px 14px; border-bottom: 1px solid rgba(255,255,255,.14); }
.chon-don-vi label { font-size: 10.5px; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: rgba(255,255,255,.6); }
.chon-don-vi select {
  width: 100%; margin-top: 7px; padding: 7px 9px; font-size: 13px; font-weight: 500;
  background: rgba(255,255,255,.10); color: #fff;
  border: 1px solid rgba(255,255,255,.2); border-radius: var(--r-nho);
  transition: background var(--nhanh), border-color var(--nhanh);
}
.chon-don-vi select:hover { background: rgba(255,255,255,.16); }
.chon-don-vi select option { color: var(--chu); background: #fff; }

.menu { padding: 10px 9px; flex: 1; overflow-y: auto; }
.menu a {
  position: relative;
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px; margin-bottom: 1px;
  color: rgba(255,255,255,.82); text-decoration: none;
  border-radius: var(--r-nho); font-size: 13.5px; font-weight: 500;
  transition: background var(--nhanh), color var(--nhanh);
}
.menu a:hover { background: rgba(255,255,255,.09); color: #fff; }
.menu a.chon { background: #fff; color: var(--muc-dam); font-weight: 600; }
/* Vạch triện đỏ đánh dấu trang đang mở */
.menu a.chon::before {
  content: ''; position: absolute; left: -9px; top: 7px; bottom: 7px;
  width: 3px; border-radius: 0 3px 3px 0; background: var(--son);
  animation: hienRa var(--ra) both;
}
.menu a .so {
  margin-left: auto; font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums;
  background: var(--son); color: #fff; border-radius: 999px; padding: 1px 7px; min-width: 20px; text-align: center;
}

.ben-chan { padding: 13px 16px 16px; border-top: 1px solid rgba(255,255,255,.14); font-size: 12px; }
.ben-chan .ten { color: #fff; font-weight: 600; }
.ben-chan .em { color: rgba(255,255,255,.6); word-break: break-all; margin-top: 1px; }
.ben-chan button {
  margin-top: 7px; width: 100%; justify-content: center;
  background: rgba(255,255,255,.10); color: #fff; border-color: rgba(255,255,255,.2);
}
.ben-chan button:hover { background: rgba(255,255,255,.19); border-color: rgba(255,255,255,.32); }

.than { padding: 22px 26px 64px; min-width: 0; }

.dau-trang { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 18px; flex-wrap: wrap; }
.dau-trang h2 { font-size: 21px; letter-spacing: -.022em; }
.dau-trang .phu { color: var(--chu-nhat); font-size: 13px; margin-top: 4px; }
.dau-trang .phai { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }

/* ------------------------------------------------------------------ THẺ */
.the {
  background: var(--giay); border: 1px solid var(--ke);
  border-radius: var(--r); box-shadow: var(--bong-1); padding: 17px 19px;
}
.the + .the { margin-top: 14px; }
.the h3 { font-size: 14.5px; margin-bottom: 13px; display: flex; align-items: center; gap: 8px; }

.luoi-the { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(172px, 1fr)); }

.o-so {
  position: relative; overflow: hidden;
  background: var(--giay); border: 1px solid var(--ke); border-radius: var(--r);
  padding: 14px 16px; box-shadow: var(--bong-1);
  transition: box-shadow var(--ra), transform var(--ra);
}
.o-so:hover { box-shadow: var(--bong-2); transform: translateY(-1px); }
.o-so .nhan { font-size: 10.5px; font-weight: 600; letter-spacing: .085em;
  text-transform: uppercase; color: var(--chu-nhat); }
.o-so .gia-tri { font-size: 26px; font-weight: 700; margin-top: 6px;
  letter-spacing: -.03em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.o-so .duoi { font-size: 12px; color: var(--chu-mo); margin-top: 3px; }
.o-so::after {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--ke-dam);
}
.o-so.xanh::after { background: var(--muc); }
.o-so.xanh .gia-tri { color: var(--muc); }
.o-so.do::after   { background: var(--son); }
.o-so.do .gia-tri { color: var(--son); }
.o-so.luc::after  { background: var(--luc); }
.o-so.luc .gia-tri { color: var(--luc); }
.o-so.nghe::after { background: var(--nghe); }
.o-so.nghe .gia-tri { color: var(--nghe); }

/* ====================================================== THƯỚC TIỀN
   Dấu hiệu riêng của cổng này: một thanh tỉ lệ đọc được ngay
   tháng này thu thêm hay hoàn lại nhiều hơn — chính là phép cộng
   (I + II) của Phụ lục 03, vẽ ra thành hình.
   =================================================================== */
.thuoc-tien { margin-top: 4px; }
.thuoc-tien .thanh {
  display: flex; height: 30px; border-radius: var(--r-nho); overflow: hidden;
  background: var(--ban); border: 1px solid var(--ke);
}
.thuoc-tien .doan {
  display: flex; align-items: center; justify-content: center;
  font-size: 11.5px; font-weight: 600; color: #fff; white-space: nowrap;
  font-variant-numeric: tabular-nums;
  transition: flex-basis 520ms cubic-bezier(.22,.72,.28,1);
  overflow: hidden;
}
.thuoc-tien .doan.tang { background: var(--luc); }
.thuoc-tien .doan.giam { background: var(--son); }
.thuoc-tien .chu-thich {
  display: flex; gap: 16px; margin-top: 8px; font-size: 12px; color: var(--chu-nhat);
  flex-wrap: wrap; align-items: center;
}
.thuoc-tien .chu-thich i {
  display: inline-block; width: 9px; height: 9px; border-radius: 2px;
  margin-right: 6px; vertical-align: -1px;
}
.thuoc-tien .chu-thich .rong { margin-left: auto; font-weight: 600; color: var(--chu); }

/* ------------------------------------------------------------------ NÚT */
button, .nut {
  font-family: inherit; font-size: 13px; font-weight: 550;
  padding: 7px 14px; border-radius: var(--r-nho); cursor: pointer;
  border: 1px solid var(--ke-dam); background: var(--giay); color: var(--chu);
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  text-decoration: none; white-space: nowrap;
  transition: background var(--nhanh), border-color var(--nhanh),
              box-shadow var(--nhanh), transform var(--nhanh);
}
button:hover, .nut:hover { background: #F6F9FC; border-color: var(--chu-mo); }
button:active, .nut:active { transform: translateY(1px); }
button:disabled { opacity: .45; cursor: not-allowed; transform: none; }

.nut-chinh { background: var(--muc); border-color: var(--muc); color: #fff; }
.nut-chinh:hover { background: var(--muc-dam); border-color: var(--muc-dam); }
.nut-do  { background: var(--son); border-color: var(--son); color: #fff; }
.nut-do:hover { background: var(--son-dam); border-color: var(--son-dam); }
.nut-luc { background: var(--luc); border-color: var(--luc); color: #fff; }
.nut-luc:hover { filter: brightness(.9); }
.nut-nho { padding: 4px 9px; font-size: 12px; }

/* Nút đang chạy: vòng xoay thay cho chữ nhảy loạn */
button.dang-chay { position: relative; color: transparent !important; pointer-events: none; }
button.dang-chay::after {
  content: ''; position: absolute; width: 13px; height: 13px;
  border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%;
  color: #fff; animation: xoay 620ms linear infinite;
}
button.dang-chay:not([class*="nut-chinh"]):not([class*="nut-do"]):not([class*="nut-luc"])::after { color: var(--muc); }

/* ------------------------------------------------------------- BIỂU MẪU */
label.o-nhap { display: block; margin-bottom: 14px; }
label.o-nhap .ten { display: block; font-size: 12px; font-weight: 600;
  margin-bottom: 5px; color: var(--chu-nhat); }
label.o-nhap .goi-y { font-size: 12px; color: var(--chu-mo); margin-top: 4px; }

input, select, textarea {
  font-family: inherit; font-size: 13.5px; width: 100%;
  padding: 8px 11px; border: 1px solid var(--ke-dam); border-radius: var(--r-nho);
  background: #fff; color: var(--chu);
  transition: border-color var(--nhanh), box-shadow var(--nhanh);
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--muc);
  box-shadow: 0 0 0 3px rgba(0,83,142,.13);
}
input[type=date] { font-variant-numeric: tabular-nums; }
textarea { line-height: 1.5; resize: vertical; }

.hang-nhap { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; }
.hang-nhap > * { flex: 1 1 160px; margin-bottom: 14px; }
.hang-nhap > .hep { flex: 0 0 154px; }

/* --------------------------------------------------------------- BẢNG */
.boc-bang {
  overflow: auto; border: 1px solid var(--ke); border-radius: var(--r);
  background: var(--giay); box-shadow: var(--bong-1);
}
table { border-collapse: separate; border-spacing: 0; width: 100%; font-size: 13px; }
th, td { padding: 7px 10px; text-align: left; border-bottom: 1px solid var(--ke); white-space: nowrap; }
thead th {
  position: sticky; top: 0; z-index: 3;
  background: var(--muc-nhat); color: var(--muc-dam);
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .07em; font-weight: 700;
  border-bottom: 1px solid var(--muc-vien);
}
tbody tr { transition: background var(--nhanh); }
tbody tr:hover { background: #F7FAFD; }
tbody tr.da-chon { background: var(--muc-nhat); }
tbody tr:last-child td { border-bottom: none; }
td.so, th.so { text-align: right; }
td.giua, th.giua { text-align: center; }
td.am { color: var(--son); font-weight: 600; }
tbody tr.vua-luu > td { animation: loeLuc 1100ms ease-out both; }
tbody tr.vua-xoa > td { animation: loeSon 700ms ease-out both; }

/* ------------------------------------------------- LƯỚI SỬA TRỰC TIẾP */
.luoi td.sua { padding: 0; }
.luoi td.sua input, .luoi td.sua select {
  border: 1px solid transparent; border-radius: 0; background: transparent;
  padding: 7px 10px; font-size: 13px; width: 100%; min-width: 88px;
  transition: background var(--nhanh), box-shadow var(--nhanh);
}
.luoi td.sua input:hover, .luoi td.sua select:hover { background: #fff; box-shadow: inset 0 0 0 1px var(--ke); }
.luoi td.sua input:focus, .luoi td.sua select:focus {
  background: #fff; box-shadow: inset 0 0 0 2px var(--muc); position: relative; z-index: 2;
}
.luoi td.sua input.doi { background: var(--nghe-nhat); box-shadow: inset 2px 0 0 var(--nghe); }
.luoi tr.moi td.sua input, .luoi tr.moi td.sua select { background: var(--luc-nhat); }
.luoi .cot-chon { width: 32px; text-align: center; padding: 0 4px; }
.luoi input[type=checkbox] { width: 15px; height: 15px; cursor: pointer; accent-color: var(--muc); }

/* Ghim cột họ tên khi cuộn ngang — mất tên là mất phương hướng. */
.luoi th.ghim, .luoi td.ghim {
  position: sticky; left: 0; z-index: 2; background: var(--giay);
  box-shadow: 1px 0 0 var(--ke);
}
.luoi thead th.ghim { z-index: 4; background: var(--muc-nhat); }
.luoi tbody tr:hover td.ghim { background: #F7FAFD; }
.luoi tbody tr.da-chon td.ghim { background: var(--muc-nhat); }

/* --------------------------------------------------------------- NHÃN */
.nhan {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 8px 2px 6px; border-radius: 999px;
  font-size: 11.5px; font-weight: 600; white-space: nowrap; border: 1px solid transparent;
}
.nhan::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: currentColor; flex: none; }

.nhan.chua_bao, .nhan.chua_tao { background: #EFF2F5; color: #5A6B7C; border-color: #E0E6EC; }
.nhan.cho_duyet_tang, .nhan.cho_duyet { background: var(--nghe-nhat); color: var(--nghe); border-color: #F2DFB9; }
.nhan.dang_tham_gia, .nhan.da_duyet  { background: var(--luc-nhat); color: var(--luc); border-color: #B6DFCD; }
.nhan.cho_duyet_giam, .nhan.tra_lai  { background: var(--son-nhat); color: var(--son); border-color: #F6C6D3; }
.nhan.da_giam { background: #F3F4F6; color: var(--chu-mo); border-color: #E5E7EA; }
.nhan.nhap    { background: #EFF2F5; color: #5A6B7C; border-color: #E0E6EC; }

/* ----------------------------------------------------------- THÔNG BÁO */
.bao {
  padding: 11px 14px; border-radius: var(--r); font-size: 13px;
  border: 1px solid; margin-bottom: 14px; display: flex; gap: 10px; align-items: flex-start;
  animation: lenNhe var(--ra) both;
}
.bao.loi { background: var(--son-nhat); border-color: #F2C2D0; color: var(--son-dam); }
.bao.ok  { background: var(--luc-nhat); border-color: #B2DCC8; color: #086243; }
.bao.y   { background: var(--nghe-nhat); border-color: #F0DAAC; color: var(--nghe); }
.bao.tin { background: var(--muc-nhat); border-color: var(--muc-vien); color: var(--muc-dam); }
.bao ul { margin: 6px 0 0; padding-left: 18px; }
.bao li { margin-bottom: 2px; }
.bao .dau-hieu { font-weight: 700; flex: none; }

/* Thông báo nổi góc màn hình */
.khay-bao {
  position: fixed; right: 18px; bottom: 18px; z-index: 80;
  display: flex; flex-direction: column; gap: 8px; max-width: 380px;
}
.khay-bao .bao {
  margin: 0; box-shadow: var(--bong-2); background: var(--giay);
  animation: truotLen var(--ra) both;
}
.khay-bao .bao.dang-tat { animation: hienRa var(--vao) reverse both; }

/* ------------------------------------------------------------ LỚP PHỦ */
.phu-nen {
  position: fixed; inset: 0; background: rgba(12,26,38,.44);
  display: flex; align-items: center; justify-content: center; padding: 20px; z-index: 60;
  animation: hienRa var(--vao) both;
  backdrop-filter: blur(2px);
}
.hop-thoai {
  background: var(--giay); border-radius: 12px; box-shadow: var(--bong-3);
  width: 100%; max-width: 520px; max-height: 88vh; display: flex; flex-direction: column;
  animation: noHop 220ms cubic-bezier(.22,.72,.28,1) both;
}
.hop-thoai.rong { max-width: 920px; }
.hop-thoai .dau { padding: 18px 22px 14px; border-bottom: 1px solid var(--ke); }
.hop-thoai .dau h3 { font-size: 16px; }
.hop-thoai .dau .phu { font-size: 12.5px; color: var(--chu-nhat); margin-top: 4px; }
.hop-thoai .noi { padding: 18px 22px; overflow: auto; }
.hop-thoai .chan { padding: 13px 22px 17px; border-top: 1px solid var(--ke);
  display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
.hop-thoai .chan .trai { margin-right: auto; }

/* ---------------------------------------------------------- CÔNG CỤ */
.thanh-cong-cu { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.thanh-cong-cu .day { margin-left: auto; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.thanh-cong-cu input[type=search] { width: 258px; }
.thanh-cong-cu select { width: auto; min-width: 148px; }

.thanh-chon {
  position: sticky; bottom: 0; z-index: 5;
  background: var(--muc-dam); color: #fff; border-radius: var(--r);
  padding: 10px 16px; margin-top: 12px;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  box-shadow: var(--bong-2);
  animation: truotLen var(--ra) both;
}
.thanh-chon .dem { font-weight: 600; }
.thanh-chon .nho { opacity: .78; }
.thanh-chon .day { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.thanh-chon button { background: rgba(255,255,255,.13); border-color: rgba(255,255,255,.26); color: #fff; }
.thanh-chon button:hover { background: rgba(255,255,255,.23); }
.thanh-chon .nut-do  { background: var(--son); border-color: var(--son); }
.thanh-chon .nut-luc { background: var(--luc); border-color: var(--luc); }
.thanh-chon .nut-do:hover  { background: var(--son-dam); }
.thanh-chon .nut-luc:hover { filter: brightness(.9); }

/* ============================================ VÙNG DÍNH ĐẦU LƯỚI
   Thanh công cụ và thanh tích chọn dính lại ở đỉnh màn hình. Người dùng
   cuộn tới dòng thứ 200 vẫn bấm Báo TĂNG được mà không phải kéo ngược lên.
   Tiêu đề cột thì dính ngay bên dưới vùng này — chiều cao vùng dính do JS
   đo rồi ghi vào --cao-dinh, vì thanh tích chọn lúc có lúc không.
   ================================================================== */
.dinh-dau {
  position: sticky; top: 0; z-index: 8;
  background: var(--ban);
  padding-top: 2px;
  margin: -2px -4px 0;
  padding-left: 4px; padding-right: 4px;
}
.dinh-dau .thanh-cong-cu { margin-bottom: 8px; }

.luoi thead th { top: var(--cao-dinh, 0px); }

.thanh-chon.tren {
  position: static; margin: 0 0 10px;
}

/* --------------------------------------------- Ô THỐNG KÊ BẤM ĐƯỢC */
.hang-thong-ke {
  display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px;
}
.o-tk {
  flex: 1 1 128px; min-width: 118px;
  background: var(--giay); border: 1px solid var(--ke);
  border-radius: var(--r-nho); padding: 8px 11px;
  cursor: pointer; text-align: left; position: relative;
  transition: border-color var(--nhanh), background var(--nhanh), box-shadow var(--nhanh);
  display: block;
}
.o-tk:hover { border-color: var(--muc); background: #F8FBFD; }
.o-tk .nhan {
  font-size: 10.5px; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--chu-nhat); display: block;
}
.o-tk .so-lieu {
  font-size: 20px; font-weight: 700; letter-spacing: -.02em;
  line-height: 1.25; display: block; margin-top: 2px;
}
.o-tk.dang-chon { border-color: var(--muc); box-shadow: inset 0 0 0 1px var(--muc); background: var(--muc-nhat); }
.o-tk.tang .so-lieu { color: var(--luc); }
.o-tk.giam .so-lieu { color: var(--son); }
.o-tk.canh .so-lieu { color: var(--nghe); }
.o-tk.tong .so-lieu { color: var(--muc); }
.o-tk.tat .so-lieu { color: var(--chu-mo); }
.o-tk:disabled { cursor: default; opacity: 1; }
.o-tk:disabled:hover { border-color: var(--ke); background: var(--giay); }

/* ---------------------------------------------------------- TRỐNG & TẢI */
.trong { padding: 46px 20px; text-align: center; color: var(--chu-mo); animation: hienRa var(--ra) both; }
.trong .to { font-size: 15px; color: var(--chu-nhat); font-weight: 550; margin-bottom: 6px; }

/* Khung xương thay cho dòng chữ "Đang tải" */
.xuong {
  border-radius: var(--r-nho);
  background: linear-gradient(90deg, #E7ECF2 30%, #F2F6FA 50%, #E7ECF2 70%);
  background-size: 220% 100%;
  animation: chayNgang 1.25s linear infinite;
}
.nap-khung { display: grid; gap: 12px; }
.nap-khung .hang-xuong { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(172px, 1fr)); }
.nap-khung .hang-xuong .xuong { height: 84px; }
.nap-khung .khoi-xuong { height: 260px; }

.mo { color: var(--chu-mo); }
.nho { font-size: 12px; }
.dam { font-weight: 600; }
.an { display: none !important; }

/* Bảng in ra giấy: bỏ hết phần điều hướng */
@media print {
  .ben, .thanh-cong-cu, .thanh-chon, .dau-trang .phai, .khay-bao { display: none !important; }
  .khung { display: block; }
  .than { padding: 0; }
  .the, .boc-bang { box-shadow: none; border-color: #999; }
  body { background: #fff; }
}

@media (max-width: 900px) {
  .khung { grid-template-columns: 1fr; }
  .ben { position: static; height: auto; }
  .menu { display: flex; overflow-x: auto; padding: 8px; gap: 2px; }
  .menu a { white-space: nowrap; }
  .menu a.chon::before { left: 0; right: 0; top: auto; bottom: -8px; width: auto; height: 3px; border-radius: 3px 3px 0 0; }
  .than { padding: 16px 14px 44px; }
  .thanh-cong-cu input[type=search] { width: 100%; }
  .thanh-cong-cu .day { margin-left: 0; width: 100%; }
  .khay-bao { left: 14px; right: 14px; max-width: none; }
}