/* ===============================
   FASHION SHOP - LUXURY STYLE
   Phiên bản sang xịn mịn cao cấp 💎
   =============================== */
   @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;700&display=swap');

   :root {
     --bg-color: #0f0f0f;
     --surface-color: #181818;
     --primary-text: #f2f2f2;
     --accent-gold: #d4af37;
     --accent-gold-light: #f6e27f;
     --transition: all 0.4s ease;
   }
   
   * {
     box-sizing: border-box;
     margin: 0;
     padding: 0;
     font-family: 'Montserrat', sans-serif;
   }
   
   body {
     background: var(--bg-color);
     color: var(--primary-text);
     overflow-x: hidden;
   }
   
   /* ========== HEADER ========== */
   header {
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding: 18px 60px;
     position: sticky;
     top: 0;
     z-index: 999;
     background: rgba(15,15,15,0.85);
     backdrop-filter: blur(8px);
     border-bottom: 1px solid rgba(255,255,255,0.05);
     box-shadow: 0 4px 20px rgba(0,0,0,0.25);
   }
   
   .logo {
     display: flex;
     align-items: center;
     gap: 12px;
   }
   
   .logo img {
     width: 55px;
     height: 55px;
     border-radius: 50%;
     object-fit: cover;
     box-shadow: 0 2px 8px rgba(212,175,55,0.2);
   }
   
   .logo h1 {
     font-weight: 700;
     font-size: 1.6rem;
     background: linear-gradient(45deg, var(--accent-gold), #fff);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     letter-spacing: 1px;
   }
   
   .navbar ul {
     list-style: none;
     display: flex;
     gap: 30px;
   }
   
   .navbar a {
     text-decoration: none;
     color: var(--primary-text);
     font-weight: 500;
     position: relative;
     transition: var(--transition);
   }
   
   .navbar a::after {
     content: "";
     position: absolute;
     width: 100%;
     height: 2px;
     background: linear-gradient(90deg, var(--accent-gold), var(--accent-gold-light));
     left: 0;
     bottom: -5px;
     transform: scaleX(0);
     transform-origin: right;
     transition: transform .4s cubic-bezier(0.7, 0, 0.3, 1);
   }
   
   .navbar a:hover {
     color: var(--accent-gold-light);
   }
   
   .navbar a:hover::after {
     transform: scaleX(1);
     transform-origin: left;
   }
   
   .search-box {
     display: flex;
     align-items: center;
     background: #222;
     border-radius: 30px;
     padding: 5px 15px;
     width: 240px;
     transition: var(--transition);
   }
   
   .search-box input {
     border: none;
     outline: none;
     background: transparent;
     color: #fff;
     width: 100%;
     padding: 8px;
     font-size: 14px;
   }
   
   .search-box button {
     background: none;
     border: none;
     cursor: pointer;
     color: var(--accent-gold);
     font-size: 16px;
   }
   
   .search-box:hover {
     box-shadow: 0 0 8px rgba(212,175,55,0.4);
   }
   
   .header-right {
     display: flex;
     align-items: center;
     gap: 16px;
   }
   
   .user-box {
     display: flex;
     align-items: center;
     gap: 10px;
   }
   
   .user-box i {
     color: var(--accent-gold);
     font-size: 1.4rem;
   }
   
   .btn-primary, .btn-profile, .logout-btn {
     background: linear-gradient(90deg, var(--accent-gold), var(--accent-gold-light));
     color: #111;
     padding: 8px 16px;
     border-radius: 30px;
     text-decoration: none;
     font-weight: 600;
     transition: var(--transition);
   }
   
   .btn-primary:hover, .btn-profile:hover, .logout-btn:hover {
     transform: translateY(-3px);
     box-shadow: 0 4px 15px rgba(212,175,55,0.4);
   }
   
   /* ========== BANNER ========== */
   .banner {
     background: url('images/banner.jpg') no-repeat center/cover;
     height: 500px;
     position: relative;
     display: flex;
     align-items: center;
     justify-content: center;
     text-align: center;
   }
   
   .banner::before {
     content: "";
     position: absolute;
     inset: 0;
     background: rgba(0,0,0,0.55);
   }
   
   .banner-content {
     position: relative;
     color: #fff;
     z-index: 2;
     animation: fadeIn 1.2s ease-out;
   }
   
   .banner-content h2 {
     font-size: 2.5rem;
     font-weight: 700;
     margin-bottom: 12px;
     background: linear-gradient(45deg, var(--accent-gold-light), var(--accent-gold));
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
   }
   
   .banner-content p {
     font-size: 1.1rem;
     margin-bottom: 25px;
   }
   
   .banner-content .btn-primary {
     padding: 10px 26px;
     border-radius: 50px;
   }
   
   /* ========== CATEGORIES ========== */
   .categories {
     text-align: center;
     padding: 70px 80px;
   }
   
   .categories h2 {
     font-size: 2rem;
     margin-bottom: 40px;
     background: linear-gradient(45deg, var(--accent-gold), var(--accent-gold-light));
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
   }
   /* ========== header ========== */
   /* === DANH MỤC NỔI BẬT - FIX FULL HIỂN THỊ ẢNH + LUXURY EFFECT === */
.category-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 35px;
  justify-items: center;
}

.category-card {
  position: relative;
  background: radial-gradient(circle at top, #1b1b1b, #0e0e0e);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.45);
  max-width: 300px;
  transition: all 0.4s ease;
  cursor: pointer;
  border: 1px solid rgba(212, 175, 55, 0.05);
}

/* Hiệu ứng ánh sáng viền vàng chạy quanh */
.category-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 18px;
  padding: 1px;
  background: linear-gradient(135deg, rgba(212,175,55,0.4), rgba(255,255,255,0.1));
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: 0.5s ease;
}

.category-card:hover::before {
  opacity: 1;
  filter: brightness(1.2);
}

.category-card img {
  width: 100%;
  height: 270px;
  object-fit: contain;
  background: radial-gradient(circle at center, #222 30%, #0f0f0f 90%);
  padding: 20px;
  transition: transform 0.4s ease, filter 0.4s ease;
}

.category-card:hover img {
  transform: scale(1.07);
  filter: brightness(1.1) contrast(1.05);
}

.category-card h3 {
  padding: 16px 0 18px;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--accent-gold-light);
  background: rgba(15,15,15,0.9);
  border-top: 1px solid rgba(255,255,255,0.05);
  text-shadow: 0 2px 6px rgba(0,0,0,0.7);
}

   /* ========== FOOTER ========== */
   footer {
     text-align: center;
     padding: 25px 0;
     background: var(--surface-color);
     color: #aaa;
     font-size: 0.9rem;
     border-top: 1px solid rgba(255,255,255,0.1);
   }
   
   /* ========== MODAL PROMO ========== */
   .modal {
     display: none;
     position: fixed;
     inset: 0;
     z-index: 999;
     background: rgba(0,0,0,0.6);
   }
   
   .modal-content {
     background: var(--surface-color);
     width: 480px;
     margin: 10% auto;
     padding: 25px 30px;
     border-radius: 18px;
     box-shadow: 0 4px 20px rgba(212,175,55,0.2);
     animation: fadeUp 0.5s ease-out;
   }
   
   #notifClose {
     float: right;
     font-size: 1.4rem;
     color: var(--accent-gold-light);
     cursor: pointer;
   }
   
   #notifClose:hover {
     color: #fff;
   }
   
   /* ========== ANIMATIONS ========== */
   @keyframes fadeIn {
     from { opacity: 0; transform: translateY(20px); }
     to { opacity: 1; transform: translateY(0); }
   }
   
   @keyframes fadeUp {
     from { opacity: 0; transform: translateY(50px); }
     to { opacity: 1; transform: translateY(0); }
   }
   
   /* ========== RESPONSIVE ========== */
   @media (max-width: 768px) {
     header { flex-wrap: wrap; padding: 15px 20px; }
     .navbar ul { flex-wrap: wrap; gap: 18px; }
     .search-box { width: 100%; margin-top: 8px; }
     .banner { height: 400px; }
     .banner-content h2 { font-size: 1.9rem; }
     .categories { padding: 50px 25px; }
   }
   /* ===== SHOP PAGE ===== */
.shop-section {
  padding: 60px 80px;
  background: var(--bg-color);
}

.shop-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 40px;
}

.shop-header h2 {
  font-size: 2rem;
  margin-bottom: 20px;
  background: linear-gradient(45deg, var(--accent-gold), var(--accent-gold-light));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.filter-bar {
  display: flex;
  gap: 15px;
  flex-wrap: wrap;
  justify-content: center;
}

.filter-bar input,
.filter-bar select {
  padding: 10px 15px;
  border-radius: 25px;
  border: none;
  outline: none;
  background: #222;
  color: #fff;
  font-size: 14px;
}

.filter-bar button {
  background: linear-gradient(90deg, var(--accent-gold), var(--accent-gold-light));
  color: #111;
  font-weight: 600;
  border-radius: 30px;
  padding: 10px 20px;
  border: none;
  cursor: pointer;
  transition: var(--transition);
}

.filter-bar button:hover {
  transform: translateY(-3px);
  box-shadow: 0 0 10px rgba(212,175,55,0.4);
}

/* Product Grid */
.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 30px;
}

.product-card {
  background: var(--surface-color);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 6px 16px rgba(0,0,0,0.3);
  transition: var(--transition);
  text-align: center;
}

.product-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 10px 25px rgba(212,175,55,0.25);
}

.product-card img {
  width: 100%;
  height: 250px;
  object-fit: cover;
}

.product-info {
  padding: 20px;
}

.product-info h3 {
  font-size: 1.1rem;
  color: var(--accent-gold-light);
  margin-bottom: 10px;
}

.price {
  color: var(--accent-gold);
  font-weight: 600;
  margin-bottom: 8px;
}

.desc {
  color: #ccc;
  font-size: 0.9rem;
  margin-bottom: 15px;
}
/* ===== PROFILE PAGE ===== */
.profile-section {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 60px 20px;
  background: var(--bg-color);
}

.profile-card {
  background: var(--surface-color);
  color: var(--primary-text);
  border-radius: 16px;
  padding: 40px 50px;
  max-width: 600px;
  width: 100%;
  box-shadow: 0 6px 20px rgba(0,0,0,0.3);
}

.profile-card h2 {
  text-align: center;
  margin-bottom: 25px;
  background: linear-gradient(45deg, var(--accent-gold), var(--accent-gold-light));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.profile-form label {
  font-weight: 600;
  margin-top: 15px;
  display: block;
}

.profile-form input,
.profile-form textarea {
  width: 100%;
  background: #222;
  border: none;
  border-radius: 10px;
  padding: 10px 15px;
  color: #fff;
  margin-top: 5px;
}

.profile-form input[type="file"] {
  background: transparent;
  border: none;
  padding: 0;
}

.avatar-box {
  text-align: center;
  margin-bottom: 20px;
}

.avatar-box img {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--accent-gold);
  margin-bottom: 10px;
}

.balance-box {
  text-align: right;
  margin-top: 20px;
  font-size: 1rem;
  color: var(--accent-gold-light);
}

.update-msg {
  text-align: center;
  margin-bottom: 15px;
  color: #f6e27f;
  font-weight: 600;
}

.profile-form button {
  margin-top: 25px;
  width: 100%;
  padding: 12px;
  border-radius: 25px;
  font-size: 1rem;
}
.profile-form select {
  width: 100%;
  background: #222;
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 10px 15px;
  margin-top: 5px;
}
.small-note {
  font-size: 0.85rem;
  color: #aaa;
  text-align: right;
  margin-top: 8px;
}
.topup-section {
  display: flex;
  justify-content: center;
  padding: 60px 20px;
}
.topup-card {
  background: var(--surface-color);
  color: #fff;
  padding: 40px;
  border-radius: 16px;
  width: 600px;
  box-shadow: 0 8px 25px rgba(0,0,0,0.4);
}
.topup-card h2 {
  text-align: center;
  margin-bottom: 20px;
}
.topup-form label {
  font-weight: 600;
  display: block;
  margin-top: 10px;
}
.topup-form input, .topup-form select {
  width: 100%;
  padding: 10px;
  border-radius: 10px;
  border: none;
  background: #222;
  color: #fff;
  margin-top: 5px;
}
.history-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 20px;
}
.history-table th, .history-table td {
  border-bottom: 1px solid #444;
  padding: 10px;
  text-align: center;
}
/* === NÚT QUAY LẠI TRANG CHỦ === */
.btn-back {
  display: inline-block;
  margin-bottom: 15px;
  background: linear-gradient(135deg, #d4af37, #f9d976);
  color: #121212;
  text-decoration: none;
  font-weight: 600;
  padding: 10px 18px;
  border-radius: 50px;
  transition: all 0.3s ease;
  box-shadow: 0 3px 10px rgba(212, 175, 55, 0.2);
}

.btn-back:hover {
  transform: translateY(-3px);
  background: #fff;
  color: #000;
}

/* === LOGO CÓ LINK === */
.logo a {
  display: flex;
  align-items: center;
  text-decoration: none;
  color: var(--accent-color);
  transition: 0.3s;
}

.logo a:hover {
  opacity: 0.8;
}

.logo a h1 {
  margin-left: 8px;
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--accent-color);
}
.btn-profile {
  background: linear-gradient(135deg, #d4af37, #f9d976);
  color: #000;
  padding: 6px 14px;
  border-radius: 30px;
  margin-left: 8px;
  font-weight: 600;
  transition: 0.3s;
}

.btn-profile:hover {
  opacity: 0.85;
  transform: translateY(-2px);
}
/* ========== NẠP TIỀN (TOPUP) ========== */
.topup-container {
  max-width: 700px;
  margin: 50px auto;
  background: #1a1a1a;
  padding: 30px;
  border-radius: 20px;
  color: #f0f0f0;
  box-shadow: 0 4px 20px rgba(0,0,0,0.4);
}

.topup-container h2 {
  color: #d4af37;
  text-align: center;
  margin-bottom: 25px;
}

.topup-container label {
  font-weight: 600;
  display: block;
  margin: 10px 0 5px;
}

.topup-container input,
.topup-container select {
  width: 100%;
  padding: 10px;
  border: none;
  border-radius: 8px;
  background: #2c2c2c;
  color: #fff;
}

.topup-container input[type="file"] {
  background: none;
  border: 1px solid #444;
}

.table-topup {
  width: 100%;
  margin-top: 30px;
  border-collapse: collapse;
  color: #ddd;
}

.table-topup th, .table-topup td {
  border-bottom: 1px solid #333;
  padding: 10px;
  text-align: center;
}

.table-topup th {
  color: #d4af37;
}

.status-pending { color: #ffcc00; }
.status-approved { color: #00ff88; }
.status-rejected { color: #ff5555; }

.message {
  text-align: center;
  margin-bottom: 15px;
  font-weight: 600;
  color: #d4af37;
}
.admin-bank-info {
  background: #222;
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 25px;
  border-left: 4px solid #d4af37;
}

.admin-bank-info ul {
  list-style: none;
  padding: 0;
  margin: 10px 0;
}

.admin-bank-info li {
  margin: 8px 0;
}

.admin-bank-info .highlight {
  color: #f9d976;
  font-weight: 700;
}

.admin-bank-info .note {
  color: #aaa;
  font-style: italic;
  margin-top: 10px;
}
/* ========== ADMIN TOPUP ========== */
.admin-topup {
  max-width: 1100px;
  margin: 50px auto;
  background: #1a1a1a;
  padding: 30px;
  border-radius: 20px;
  color: #f0f0f0;
  box-shadow: 0 4px 20px rgba(0,0,0,0.4);
}

.admin-topup h2 {
  color: #d4af37;
  text-align: center;
  margin-bottom: 25px;
}

.btn-approve, .btn-reject {
  text-decoration: none;
  padding: 6px 10px;
  border-radius: 6px;
  font-weight: 600;
}

.btn-approve {
  background: #00c46c;
  color: #000;
}

.btn-reject {
  background: #ff4b4b;
  color: #fff;
}

.btn-approve:hover, .btn-reject:hover {
  opacity: 0.8;
}

.message {
  text-align: center;
  font-weight: bold;
  color: #f9d976;
  margin-bottom: 20px;
}


.sidebar h2 {
  color: #facc15;
  text-align: center;
}

.sidebar ul {
  list-style: none;
  padding: 0;
}

.sidebar ul li {
  margin: 15px 0;
}

.sidebar ul li a {
  color: #eee;
  text-decoration: none;
  font-weight: 500;
}

.sidebar ul li a:hover {
  color: #facc15;
}


.card:hover {
  transform: scale(1.05);
  background: #383838;
}