:root {
  --mau-chinh: #b9842c;        /* vàng đồng - màu nhấn chính (nút, liên kết, mục đang chọn) */
  --mau-chinh-toi: #8f661f;    /* vàng đồng đậm - hover/active */
  --mau-chinh-nhat: #ecc983;   /* vàng nhạt - chữ nhấn trên nền tối */
  --mau-nau-den: #1c150d;      /* nâu đen - nền thanh bên */
  --mau-nau: #2b2013;          /* nâu - nền phụ / hover thanh bên */
  --mau-nen: #f7f2e8;          /* nền tổng thể - kem ấm */
  --mau-chu: #2a2117;          /* màu chữ chính - nâu đen ấm */
  --mau-chu-nhat: #8a7a62;     /* chữ phụ - nâu xám ấm */
  --mau-vien: #e8decb;         /* viền - be nhạt */
  --mau-nen-ben: var(--mau-nau-den);
  --mau-nen-ben-hover: var(--mau-nau);
}

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

body {
  font-family: "Segoe UI", "Inter", Arial, sans-serif;
  background: var(--mau-nen);
  color: var(--mau-chu);
  overflow-x: hidden;
}
a { text-decoration: none; color: var(--mau-chinh-toi); }
a:hover { color: var(--mau-chinh); }

.he-thong { display: flex; min-height: 100vh; min-height: 100dvh; }

/* ===================== Thanh bên (sidebar) ===================== */
.thanh-ben {
  width: 264px;
  flex-shrink: 0;
  background: linear-gradient(180deg, var(--mau-nau-den) 0%, #241a10 100%);
  color: #fff;
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100dvh;
  box-shadow: 2px 0 18px rgba(0,0,0,.22);
  z-index: 1000;
}
.thanh-ben-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 22px 18px;
  border-bottom: 1px solid rgba(236,201,131,.16);
  font-size: 1.7rem;
  color: var(--mau-chinh-nhat);
  background: rgba(0,0,0,.14);
}
.ten-he-thong { font-weight: 700; font-size: 1rem; line-height: 1.25; color: #fff; letter-spacing: .01em; }
.phu-de-he-thong { font-size: 0.72rem; opacity: .7; color: var(--mau-chinh-nhat); }
.thanh-ben-menu { list-style: none; padding: 14px 12px; margin: 0; flex: 1; overflow-y: auto; }
.thanh-ben-menu li { margin-bottom: 4px; }
.thanh-ben-menu a {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px; border-radius: 10px;
  color: rgba(255,255,255,.8); font-size: 0.9rem; font-weight: 500;
  transition: background .18s, color .18s, transform .18s;
}
.thanh-ben-menu a .menu-icon {
  display: flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 9px; flex-shrink: 0;
  font-size: 1rem; transition: background .18s, color .18s;
}
/* Nổi bật từng phân hệ: mỗi mục menu mang 1 sắc độ chip riêng trong cùng tông vàng đồng - nâu */
.thanh-ben-menu li:nth-child(6n+1) .menu-icon { background: rgba(236,201,131,.20); color: #ecc983; }
.thanh-ben-menu li:nth-child(6n+2) .menu-icon { background: rgba(214,166,88,.22); color: #e3bd78; }
.thanh-ben-menu li:nth-child(6n+3) .menu-icon { background: rgba(185,132,44,.26); color: #dcb268; }
.thanh-ben-menu li:nth-child(6n+4) .menu-icon { background: rgba(150,104,28,.30); color: #d3a95f; }
.thanh-ben-menu li:nth-child(6n+5) .menu-icon { background: rgba(120,84,36,.34); color: #caa058; }
.thanh-ben-menu li:nth-child(6n+6) .menu-icon { background: rgba(94,68,32,.4); color: #c2984f; }
.thanh-ben-menu a:hover { background: rgba(255,255,255,.07); color: #fff; transform: translateX(2px); }
.thanh-ben-menu a:hover .menu-icon { background: var(--mau-chinh); color: #1c150d; }
.thanh-ben-menu a.dang-chon {
  background: linear-gradient(90deg, var(--mau-chinh) 0%, var(--mau-chinh-toi) 100%);
  color: #1c150d; font-weight: 700;
  box-shadow: 0 4px 14px rgba(185,132,44,.35);
}
.thanh-ben-menu a.dang-chon .menu-icon { background: rgba(28,21,13,.16); color: #1c150d; }

/* ===================== Khu nội dung ===================== */
.khu-noi-dung { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.thanh-tren {
  height: 64px; background: #fff; border-bottom: 1px solid var(--mau-vien);
  display: flex; align-items: center; padding: 0 24px; gap: 16px;
  position: sticky; top: 0; z-index: 900;
  box-shadow: 0 1px 4px rgba(28,21,13,.05);
}
.thanh-tren-tieu-de { font-weight: 700; font-size: 1.12rem; flex: 1; color: var(--mau-chu); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nut-menu-di-dong { display: none; border: none; background: none; font-size: 1.4rem; color: var(--mau-chu); flex-shrink: 0; }
.thanh-tren-user a { color: var(--mau-chu) !important; font-weight: 600; white-space: nowrap; }
.thanh-tren-user a:hover { color: var(--mau-chinh-toi) !important; }
.noi-dung-chinh { padding: 24px; flex: 1; min-width: 0; }

.the-thong-ke {
  background: #fff; border-radius: 14px; padding: 20px 22px;
  box-shadow: 0 2px 10px rgba(28,21,13,.06); border: 1px solid var(--mau-vien);
  border-top: 3px solid var(--mau-chinh);
  height: 100%;
  transition: transform .15s, box-shadow .15s;
}
.the-thong-ke:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(28,21,13,.1); }
.the-thong-ke .so-lieu { font-size: 1.9rem; font-weight: 800; }
.the-thong-ke .nhan { color: var(--mau-chu-nhat); font-size: 0.85rem; font-weight: 600; }

.hop { background: #fff; border-radius: 14px; padding: 20px; box-shadow: 0 2px 10px rgba(28,21,13,.06); border: 1px solid var(--mau-vien); }
.bang-du-lieu thead th { background: #faf5ea; font-size: 0.8rem; text-transform: uppercase; letter-spacing: .03em; color: var(--mau-chu-nhat); border-bottom: 2px solid var(--mau-vien); }
.bang-du-lieu td, .bang-du-lieu th { vertical-align: middle; }
.the-mau-form label { font-weight: 600; font-size: 0.86rem; color: var(--mau-chu); }
.khung-anh { width: 100%; height: 110px; object-fit: cover; border-radius: 8px; border: 1px solid var(--mau-vien); }

/* ===================== Phối lại màu Bootstrap theo tông nâu - vàng - đen ===================== */
:root {
  --bs-primary: var(--mau-chinh);
  --bs-primary-rgb: 185, 132, 44;
  --bs-link-color: var(--mau-chinh-toi);
  --bs-link-color-rgb: 143, 102, 31;
  --bs-link-hover-color: var(--mau-chinh);
  --bs-link-hover-color-rgb: 185, 132, 44;
}
.btn-primary {
  --bs-btn-bg: var(--mau-chinh); --bs-btn-border-color: var(--mau-chinh);
  --bs-btn-hover-bg: var(--mau-chinh-toi); --bs-btn-hover-border-color: var(--mau-chinh-toi);
  --bs-btn-active-bg: var(--mau-chinh-toi); --bs-btn-active-border-color: var(--mau-chinh-toi);
  --bs-btn-disabled-bg: var(--mau-chinh); --bs-btn-disabled-border-color: var(--mau-chinh);
  --bs-btn-focus-shadow-rgb: 185, 132, 44;
}
.btn-outline-primary {
  --bs-btn-color: var(--mau-chinh-toi); --bs-btn-border-color: var(--mau-chinh);
  --bs-btn-hover-bg: var(--mau-chinh); --bs-btn-hover-border-color: var(--mau-chinh);
  --bs-btn-active-bg: var(--mau-chinh); --bs-btn-active-border-color: var(--mau-chinh);
  --bs-btn-hover-color: #1c150d; --bs-btn-active-color: #1c150d;
  --bs-btn-focus-shadow-rgb: 185, 132, 44;
}
.text-bg-primary { background-color: var(--mau-chinh) !important; color: #1c150d !important; }
.bg-primary { background-color: var(--mau-chinh) !important; }
.text-primary { color: var(--mau-chinh-toi) !important; }
.border-primary { border-color: var(--mau-chinh) !important; }
.form-control:focus, .form-select:focus {
  border-color: var(--mau-chinh); box-shadow: 0 0 0 .2rem rgba(185,132,44,.2);
}
.form-check-input:checked { background-color: var(--mau-chinh); border-color: var(--mau-chinh); }
.form-check-input:focus { border-color: var(--mau-chinh); box-shadow: 0 0 0 .2rem rgba(185,132,44,.2); }
.dropdown-item:hover, .dropdown-item:focus { background-color: #faf2df; color: var(--mau-chinh-toi); }
.nav-link.active, .page-link.active, .active > .page-link { background-color: var(--mau-chinh) !important; border-color: var(--mau-chinh) !important; color: #1c150d !important; }
.page-link { color: var(--mau-chinh-toi); }

/* ===================== Trang đăng nhập ===================== */
.trang-dang-nhap { min-height: 100vh; min-height: 100dvh; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #1c150d 0%, #3c2a15 55%, #6e4c1f 100%); padding: 16px; }
.hop-dang-nhap { background: #fff; border-radius: 18px; padding: 40px; width: 380px; max-width: 92vw; box-shadow: 0 20px 50px rgba(0,0,0,.35); border-top: 4px solid var(--mau-chinh); }

/* ===================== Bản đồ ===================== */
.khung-ban-do { width: 100%; transition: height .15s; }
.diem-ghim-trang-thai { background: transparent !important; border: none !important; }

/* ===================== Responsive: máy tính bảng / điện thoại ===================== */
@media (max-width: 1100px) {
  .thanh-ben { width: 232px; }
}
@media (max-width: 900px) {
  .thanh-ben { position: fixed; left: -284px; z-index: 1050; transition: left .22s; width: 264px; }
  .he-thong.mo-menu .thanh-ben { left: 0; box-shadow: 6px 0 28px rgba(0,0,0,.4); }
  .nut-menu-di-dong { display: block; }
  .thanh-tren { padding: 0 16px; }
  .noi-dung-chinh { padding: 18px; }
}
@media (max-width: 576px) {
  .noi-dung-chinh { padding: 13px; }
  .thanh-tren { height: 56px; padding: 0 12px; gap: 10px; }
  .thanh-tren-tieu-de { font-size: 1rem; }
  .thanh-tren-user { font-size: .85rem; }
  .the-thong-ke { padding: 14px 16px; }
  .the-thong-ke .so-lieu { font-size: 1.5rem; }
  .hop { padding: 14px; border-radius: 12px; }
  .hop-dang-nhap { padding: 28px 22px; }
}