/* File CSS tổng hợp cho giao diện Cửa Hàng MMO */
.top-alert {
  background: #fff;
  color: #e74040;
  border-bottom: 2px solid #e74040;
  font-weight: 500;
  padding: 0.8rem 0;
  font-size: 1rem;
  text-align: center;
}
.product-card, .service-card { transition: .15s; }
.product-card:hover, .service-card:hover {
  box-shadow: 0 4px 24px rgba(40,120,60,0.12);
  border-color:#2ecc71;
}
.index-icon {
  width: 80px; height: 80px; display:inline-block; margin-bottom:15px;
}

/* Thanh hỗ trợ trên cùng */
.top-support-bar {
  background: #f6f6f6;
  border-bottom: 1px solid #2c9f30;
  font-size: 13px;
  color: #2c9f30;
}
.top-support-bar .support-brand {
  color: #189b55;
}
.top-support-bar .support-wrapper {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}
.top-support-bar .support-link {
  text-decoration: none;
}
.top-support-bar .support-user-icon {
  font-size: 13px;
}
.top-support-bar .support-register {
    margin-right: 73px;
    font-size: 15px;
}

/* Marquee cảnh báo */
.top-alert-bar {
  background: #fff;
  color: #e74040;
  font-weight: 500;
  padding: 0;
  min-height: 13px;
  font-size: 12px;
  width: 100%;
  overflow: hidden;
}
.marquee-container {
  width: 100%;
  overflow: hidden;
  position: relative;
  height: 23px;
  display: flex;
  align-items: center;
}
.marquee-text {
  position: absolute;
  left: 100%;
  white-space: nowrap;
  animation: marqueeText 60s linear infinite;
}
@keyframes marqueeText {
  0%   { left: 100%; }
  100% { left: -100%; }
}
.navbar.navbar-expand-lg.navbar-dark {
    height: 50px !important;
}
/* Navbar thu gọn */
.navbar-main {
  background: #23b371;
  padding-top: 0.25rem !important;
  padding-bottom: 0.25rem !important;
}
.navbar-main .navbar-brand {
  font-size: 1.4rem !important;
  line-height: 1.2 !important;
  margin-bottom: 0 !important;
}
.navbar-main .navbar-nav .nav-link {
  padding-top: 0.25rem !important;
  padding-bottom: 0.25rem !important;
  font-size: 0.9rem !important;
  line-height: 1.2 !important;
}
.brand-primary { color: #fff; }
.brand-accent { color: #ff365e; }
.nav-user-icon {
  font-size: 18px;
}
.nav-chat-icon {
  font-size: 20px;
}
.nav-chat-badge {
  min-width: 12px;
  height: 16px;
  font-size: 12px;
  padding: 1px;
  margin-top: 8px;
  margin-left: -8px;
}

/* Search form đơn giản */
.search-bar {
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid #e6e6e6;
  border-radius: 6px;
  padding: 12px;
}
.search-bar .form-control,
.search-bar .form-select {
  height: 42px;
  border-radius: 6px;
  color: #fff;
  margin-bottom: 12px;
}

.search-bar .form-control {
  background: transparent;
  color: #fff;
}
.search-bar .form-select {
  background: transparent;
}

.search-bar .form-select option {
  color: #000;
}
.search-bar .form-control::placeholder {
  color: rgba(255, 255, 255, 0.9);
}
.search-bar .search-btn {
  height: 42px;
  border-radius: 6px;
  font-weight: 600;
  padding: 0 16px;
}
.hero-search {
  position: relative;
  margin-bottom: 2.5rem;
}
.hero-box {
  position: relative;
  min-height: 468px;
  overflow: hidden;
}
.hero-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  filter: brightness(0.92);
}
.hero-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.hero-form {
  background: transparent;
  border: none;
  box-shadow: none;
  backdrop-filter: none;
}

/* Force white color for main nav items */
.navbar.navbar-dark .navbar-nav .nav-link {
  color: #fff !important;
}
.navbar.navbar-dark .navbar-nav .nav-link:hover,
.navbar.navbar-dark .navbar-nav .nav-link:focus,
.navbar.navbar-dark .navbar-nav .nav-link.active {
  color: #fff !important;
}
.btn.btn-secondary {
  background-color: #21bf73;
  border-color: #21bf73;
  color: white;
}
.btn.btn-secondary:hover {
  background-color: #476455;
  border-color: #476455;
  color: white;
}
a.btn.btn-primary.w-100 {
  width: 10% !important;
  background-color: #17a2b8;
  border-color: #21bf73;
  color: white;
  border-radius: 0px !important;
  position: absolute;
  left: 624px;
}
a.quan_ly_users {
  width: 48% !important;
  background-color: #17a2b8;
  border-color: #21bf73;
  color: white;
  border-radius: 6px !important;
  position: absolute;
  padding: 7px;
  text-decoration: none;
}