/* Tiêu đề Cassiopeia luôn xanh navy */
.navbar-brand a,
.brand-logo {
    color: #001B4C !important;   /* xanh navy */
    font-weight: bold;
    font-size: 28px;
    text-decoration: none;
}

/* Khi hover cũng giữ nguyên màu xanh navy */
.navbar-brand a:hover,
.brand-logo:hover {
    color: #001B4C !important;
}
/* Đổi nền header sang xám đậm */
.header.container-header {
    background-color: #4d4d4d !important;
    color: #fff !important;
}

/* Chữ Cassiopeia giữ màu trắng */
.header .navbar-brand a,
.header .navbar-brand {
    color: #ffffff !important;
}

body {
    background-color: #e0e0e0 !important; /* bạn có thể đổi sang #d9d9d9 hoặc #ccc nếu muốn nhạt hơn */
}

/* Xóa nền trắng mặc định của các container */
.container-component,
.container-banner,
.container-top-a,
.container-top-b,
.container-bottom-a,
.container-bottom-b,
.container-footer,
.grid-child,
.wrapper-static,
.wrapper-fluid {
    background-color: transparent !important;
    box-shadow: none !important; /* bỏ viền đổ bóng nếu có */
    border: none !important;
}
:root{
  --template-bg-light: #ffffff !important;   /* xám đậm */
  --template-text-dark: #eaeaea !important;  /* chữ trên nền tối */
}

/* Đảm bảo các khối lấy theo biến */
.site-grid,
.container-component,
.container-top-a,
.container-top-b,
.container-bottom-a,
.container-bottom-b,
.container-sidebar-left,
.container-sidebar-right,
.container-footer,
.grid-child {
  background: var(--template-bg-light) !important;
}

/* Nếu các module dạng card vẫn trắng, ép nền & bỏ viền/đổ bóng */
.card, .mod-card {
  background: var(--template-bg-light) !important;
  border: none !important;
  box-shadow: none !important;
}
body, 
.site-grid,
.container-component,
.container-top-a,
.container-top-b,
.container-bottom-a,
.container-bottom-b,
.container-sidebar-left,
.container-sidebar-right,
.container-footer,
.grid-child {
  background-color: #4d4d4d !important;  /* xám đậm */
  color: #f1f1f1 !important;             /* chữ sáng để dễ đọc */
}

/* Sửa các card/module để đồng bộ nền */
.card, .mod-card, .moduletable {
  background-color: #4d4d4d !important;
  border: none !important;
  box-shadow: none !important;
  color: #f1f1f1 !important;
}

/* Tiêu đề module hoặc heading */
h1, h2, h3, h4, h5, h6 {
  color: #ffffff !important;
}

/* Breadcrumbs nếu có */
.breadcrumb {
  background: transparent !important;
  color: #eaeaea !important;
}
.navbar-brand {
    display: flex;
    justify-content: center;  /* Căn giữa ngang */
    align-items: center;      /* Căn giữa dọc */
    width: 100%;              /* Cho chiếm toàn bộ chiều ngang */
    text-align: center;       /* Căn giữa text */
}

.navbar-brand a {
    margin: 0 auto;
    font-weight: bold;
    color: #ffffff; /* chỉnh màu nếu cần */
    text-decoration: none;
}
/* Đổi màu link toàn site (Cassiopeia dùng CSS variables) */
:root{
  --link-color: #f5c518;        /* vàng chính */
  --link-hover-color: #ffd95e;  /* vàng khi hover */
}

/* Phòng khi có chỗ không dùng biến */
a { color: var(--link-color) !important; }
a:hover, a:focus { color: var(--link-hover-color) !important; }
html { scroll-behavior: auto; }
html, body { overflow-x: hidden; 
}

.alert, joomla-alert {
  background-color: #2b2b2b !important;   /* nền xám đậm */
  color: #f8d86b !important;              /* chữ vàng nhạt */
  border: 2px solid #f8d86b !important;   /* viền vàng nhạt */
  border-radius: 10px !important;
  box-shadow: none !important;
  padding: 20px !important;
  font-size: 16px !important;
}

/* Tiêu đề alert (nếu có) */
.alert-heading, joomla-alert .alert-heading {
  color: #ffffff !important;
  font-weight: bold;
  margin-bottom: 8px;
}

/* Nút đóng (icon X) */
.alert .joomla-alert-close,
joomla-alert button[aria-label="Close"],
joomla-alert button.close {
  background: none !important;
  color: #ffd95e !important;
  font-size: 20px !important;
  border: none !important;
  opacity: 1 !important;
}

/* Khi hover lên nút đóng */
.alert .joomla-alert-close:hover,
joomla-alert button[aria-label="Close"]:hover {
  color: #ffffff !important;
}

/* Liên kết trong alert */
.alert a,
joomla-alert a {
  color: #ffd95e !important;
  text-decoration: underline;
}
.alert a:hover,
joomla-alert a:hover {
  color: #ffffff !important;
}

/* Tạo hiệu ứng bo góc mềm và spacing đều */
#system-message-container joomla-alert {
  margin: 20px 0 !important;
  border-radius: 10px !important;
}
/* ======= RESET LOGIN PAGE ======= */
.com-users-login {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-color: #4d4d4d;
  padding: 24px;
}

.com-users-login form {
  display: block;
  background: #3a3a3a;
  padding: 25px 30px;
  border-radius: 12px;
  max-width: 480px;
  width: 100%;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.4);
}



/* Giữ lại form chính */
.view-login .com-users-login form {
  display: block !important;
}

/* Đảm bảo các link bên trong form vẫn hiển thị bình thường */
.view-login .com-users-login form a {
  display: inline !important;
  color: #f5c518 !important;
  text-decoration: none;
}
.view-login .com-users-login form a:hover {
  color: #fff !important;
}
.view-login .com-users-login .login,
.view-login .com-users-login form {
  display: block !important;
}

/* Ẩn MỌI KHỐI sau .login (links bên ngoài form) */
.view-login .com-users-login > .login ~ * {
  display: none !important;
}

/* Nếu trang không có .login mà là form trực tiếp: ẩn MỌI KHỐI sau form */
.view-login .com-users-login > form ~ * {
  display: none !important;
}

/* ——— Fix input group (ô password có nút con mắt) ——— */
.com-users-login .input-group { display: flex; width: 100%; }
.com-users-login .input-group .form-control { flex: 1 1 auto; min-width: 0; }
.com-users-login .input-group .btn,
.com-users-login .input-group .input-group-text { flex: 0 0 auto; }

/* Giữ layout đẹp mắt */
.com-users-login input[type="text"],
.com-users-login input[type="password"],
.com-users-login input[type="email"],
.com-users-login input[type="tel"] {
  width: 100%;
  margin-bottom: 12px;
}

.login-note {
  color: #ffd95e;               /* Màu vàng nổi bật */
  text-align: center;
  line-height: 1.3;
  font-size: 30px;              /* Cỡ chữ lớn */
  font-weight: 700;             /* Chữ đậm */
  margin: 0 !important;
  padding: 0 !important;
  position: relative;
  top: 60px;                    /* ✅ Kéo chữ xuống gần form hơn */
}

/* Có thể tinh chỉnh thêm nếu cần */
@media (max-width: 768px) {
  .login-note {
    font-size: 26px;            /* Thu nhỏ nhẹ trên điện thoại */
    top: 40px;                  /* Kéo ít hơn cho màn hình nhỏ */
  }
}