/* ===== BẢNG MÀU ===== */
:root {
  /* 3 màu chính */
  --trang: #ffffff;
  --vang: #d4af37;       /* vàng kim */
  --xanh: #4ade80;       /* xanh lá sáng */

  /* màu nền */
  --nen: #0b1812;
  --nen-the: #12251c;
  --nen-menu: #07110c;
  --vien: #25402f;

  /* ghi đè biến của Bootstrap */
  --bs-body-bg: var(--nen);
  --bs-body-color: var(--trang);
  --bs-heading-color: var(--vang);
  --bs-border-color: var(--vien);
  --bs-secondary-color: #b9c9bf;
  --bs-link-color: var(--vang);
  --bs-link-hover-color: var(--xanh);
  --bs-dark-rgb: 7, 17, 12;
  color-scheme: dark;
}

/* ===== CHUNG ===== */
body { font-family: 'Segoe UI', Arial, sans-serif; }
h1, h2, h3, h4, h5 { color: var(--vang); }
.text-secondary { color: #b9c9bf !important; }
.breadcrumb {
  --bs-breadcrumb-divider-color: var(--vang);
  --bs-breadcrumb-item-active-color: var(--trang);
}

/* ===== MENU VÀ FOOTER ===== */
.navbar { border-bottom: 2px solid var(--vang); }
footer { border-top: 2px solid var(--vang); }
.navbar-brand { color: var(--vang) !important; font-weight: 700; }
.navbar .nav-link { color: var(--trang); }
.navbar .nav-link:hover,
.navbar .nav-link.active { color: var(--xanh); }

/* ===== NÚT ===== */
.btn-primary {
  --bs-btn-bg: var(--xanh);
  --bs-btn-border-color: var(--xanh);
  --bs-btn-color: #07110c;
  --bs-btn-hover-bg: var(--vang);
  --bs-btn-hover-border-color: var(--vang);
  --bs-btn-hover-color: #07110c;
  font-weight: 600;
}
.btn-outline-primary {
  --bs-btn-color: var(--xanh);
  --bs-btn-border-color: var(--xanh);
  --bs-btn-hover-bg: var(--xanh);
  --bs-btn-hover-border-color: var(--xanh);
  --bs-btn-hover-color: #07110c;
  --bs-btn-active-bg: var(--xanh);
  --bs-btn-active-border-color: var(--xanh);
  --bs-btn-active-color: #07110c;
}
.btn-outline-secondary {
  --bs-btn-color: var(--trang);
  --bs-btn-border-color: var(--vien);
  --bs-btn-hover-bg: var(--vien);
  --bs-btn-hover-border-color: var(--vien);
  --bs-btn-hover-color: var(--trang);
}
.btn-outline-light {
  --bs-btn-color: var(--vang);
  --bs-btn-border-color: var(--vang);
  --bs-btn-hover-bg: var(--vang);
  --bs-btn-hover-border-color: var(--vang);
  --bs-btn-hover-color: #07110c;
}
.btn-close { filter: invert(1) grayscale(1) brightness(2); }

/* ===== BANNER (KHUNG EMOJI) ===== */
.banner-bg {
  height: 420px;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding-top: 60px;
  background: linear-gradient(135deg, #0b1812, #1b4a31);
}
.banner-bg.alt { background: linear-gradient(135deg, #0b1812, #3a3510); }
.banner-bg span { font-size: 7rem; line-height: 1; letter-spacing: 1rem; }
.carousel-caption h2 {
  color: var(--vang);
  font-size: clamp(1.6rem, 4vw, 2.6rem);
  font-weight: 700;
  text-shadow: 0 2px 8px rgba(0, 0, 0, .7);
}

/* ===== CARD SÂN ===== */
.card {
  --bs-card-bg: var(--nen-the);
  --bs-card-border-color: var(--vien);
  --bs-card-color: var(--trang);
  --bs-card-cap-bg: transparent;
  transition: transform .2s, border-color .2s, box-shadow .2s;
}
.card:hover {
  transform: translateY(-4px);
  border-color: var(--vang);
  box-shadow: 0 .5rem 1.2rem rgba(0, 0, 0, .5);
}
.card-icon {
  aspect-ratio: 4 / 3;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 4rem;
  letter-spacing: .4rem;
  background: linear-gradient(135deg, #16301f, #1f3d2a);
  border-radius: var(--bs-card-inner-border-radius) var(--bs-card-inner-border-radius) 0 0;
}
/* mỗi khung một tông nền riêng */
.col:nth-child(3n+1) .card-icon { background: linear-gradient(135deg, #12361f, #1f5a35); }
.col:nth-child(3n+2) .card-icon { background: linear-gradient(135deg, #3a3210, #6b5a16); }
.col:nth-child(3n+3) .card-icon { background: linear-gradient(135deg, #2a3a30, #4a5f52); }

.card-title { color: var(--vang); }
.card strong { color: var(--xanh); }

/* ===== NHÃN (BADGE) ===== */
.badge.text-bg-info    { background-color: var(--xanh) !important; color: #07110c !important; }
.badge.text-bg-warning { background-color: var(--vang) !important; color: #07110c !important; }

/* ===== BẢNG ===== */
.table {
  --bs-table-bg: var(--nen-the);
  --bs-table-color: var(--trang);
  --bs-table-striped-bg: #173226;
  --bs-table-striped-color: var(--trang);
  --bs-table-hover-bg: #1d4030;
  --bs-table-hover-color: var(--trang);
  --bs-table-border-color: var(--vien);
}
.table thead th {
  background-color: var(--nen-menu);
  color: var(--vang);
  border-bottom: 2px solid var(--vang);
}

/* ===== FORM VÀ MODAL ===== */
.modal-content {
  --bs-modal-bg: var(--nen-the);
  --bs-modal-border-color: var(--vang);
  --bs-modal-color: var(--trang);
}
.modal-title { color: var(--vang); }
.modal-header, .modal-footer { border-color: var(--vien); }
.form-control, .form-select {
  background-color: var(--nen);
  border-color: var(--vien);
  color: var(--trang);
}
.form-control:focus, .form-select:focus {
  background-color: var(--nen);
  color: var(--trang);
  border-color: var(--xanh);
  box-shadow: 0 0 0 .2rem rgba(74, 222, 128, .25);
}
.form-control::placeholder { color: #8da398; }
.invalid-feedback { color: var(--vang); }

/* ===== ĐIỆN THOẠI ===== */
@media (max-width: 576px) {
  .banner-bg { height: 260px; padding-top: 30px; }
  .banner-bg span { font-size: 4rem; }
  .card-icon { font-size: 3rem; }
}

/* ===== Tab đăng nhập / đăng ký ===== */
.nav-tabs { --bs-nav-tabs-border-color: var(--vang); }
.nav-tabs .nav-link { color: var(--chu-toi); font-weight: 600; }
.nav-tabs .nav-link:hover { color: var(--vang-dam); }
.nav-tabs .nav-link.active {
  background-color: var(--nen-menu);
  color: var(--vang);
  border-color: var(--vang) var(--vang) var(--nen-menu);
}