/* ===== RESET ===== */

*{
margin:0;
padding:0;
box-sizing:border-box;
}

body{
font-family:'Poppins',sans-serif;
background:linear-gradient(135deg,#0f0c29,#302b63,#24243e);
color:#fff;
display:flex;
justify-content:center;
}

/* ===== CONTAINER ===== */

.container{
width:95%;
max-width:1200px;
background:#111827;
border-radius:20px;
padding:30px;
box-shadow:0 0 40px rgba(0,0,0,0.6);
margin-top:10px;
margin-bottom:10px;
}

/* ===== HEADER ===== */

.profile-header{
position:relative;
margin-bottom:80px;
}

.banner{
height:220px;
border-radius:20px;
background:url('/assets/images/banner.png') center/cover no-repeat;
background-color:#0f172a;
}

.profile-info{
display:flex;
align-items:flex-end;
gap:20px;
position:absolute;
bottom:-60px;
left:30px;
}

.avatar-big{
position:relative;
width:100px;
height:100px;
border-radius:25px;
padding:5px;
background:linear-gradient(135deg,#45edd7,#60a5fa);
}

.avatar-big img{
width:100%;
height:100%;
border-radius:20px;
object-fit:cover;
}

.verified-badge{
position:absolute;
bottom:-5px;
right:-5px;
width:26px;
height:26px;
border-radius:50%;
background:#2563eb;
display:flex;
align-items:center;
justify-content:center;
color:#fff;
font-size:14px;
border:3px solid #111827;
}

.profile-text h2{
margin:0;
font-size:22px;
}

.profile-text span{
font-size:14px;
color:#aaa;
}

/* ===== LAYOUT ===== */

.main-layout{
display:flex;
gap:20px;

}

.left-col{
flex:2;
}

.right-col{
flex:1;
background:#0b1626;
border-radius:15px;
padding:20px;
border:1px solid #1f2a44;
}

/* ===== TITLE ===== */

h1{
font-size:24px;
margin-bottom:15px;
}

/* ===== SHOP GRID ===== */

.shop-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:20px;
}

/* ===== PRODUCT ===== */

.product{
background:#0b1626;
border-radius:15px;
overflow:hidden;
border:1px solid #1f2a44;
transition:0.25s;
position:relative;
}

.product:hover{
transform:translateY(-5px);
box-shadow:0 0 15px rgba(0,245,255,0.3);
}

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

.product-body{
padding:12px;
}

.product-title{
font-size:14px;
min-height:40px;
}

.price{
font-weight:700;
font-size:15px;
}

.old-price{
text-decoration:line-through;
color:#888;
font-size:12px;
margin-left:6px;
}

.discount{
background:#ef4444;
padding:2px 6px;
border-radius:6px;
font-size:11px;
margin-left:6px;
}



/* ===== RIGHT BOX ===== */

.right-col h3{
margin-bottom:10px;
}

/* ===== RESPONSIVE ===== */

@media(max-width:1000px){

.main-layout{
flex-direction:column;
}

.shop-grid{
grid-template-columns:repeat(2,1fr);
}

}

@media(max-width:600px){

.shop-grid{
grid-template-columns:1fr;
}

.profile-info{
position:relative;
bottom:auto;
left:auto;
margin-top:-50px;
justify-content:center;
text-align:center;
}

}

/* =========================
PROFILE MENU
========================= */

.profile-menu{
display:flex;
justify-content:center;
align-items:center;
gap:35px;
margin-top:25px;
padding:14px 25px;

flex-wrap:wrap;
}

/* LINK */

.profile-menu a{
position:relative;
text-decoration:none;
color:#cbd5e1;
font-weight:600;
font-size:15px;
padding:8px 10px;
transition:all .25s ease;
letter-spacing:.3px;
}

/* HOVER */

.profile-menu a:hover{
color:#00f5ff;
transform:translateY(-1px);
}

/* LINE EFFECT */

.profile-menu a::after{
content:"";
position:absolute;
left:50%;
bottom:-6px;
width:0%;
height:2px;
background:linear-gradient(90deg,#00f5ff,#9d4edd);
transition:.25s;
transform:translateX(-50%);
border-radius:2px;
}

.profile-menu a:hover::after,
.profile-menu a.active::after{
width:80%;
}

/* ACTIVE */

.profile-menu a.active{
color:#00f5ff;
}

.shop-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:20px;
margin-top:20px;
}



.price{
font-weight:700;
font-size:16px;
color: #4ade80;
}

.old-price{
text-decoration:line-through;
color:#888;
font-size:13px;
margin-left:6px;
}

.discount{
background:#ef4444;
padding:2px 6px;
border-radius:6px;
font-size:12px;
margin-left:6px;
}

.buy-btn{
margin-top:10px;
width:100%;
padding:10px;
border:none;
border-radius:10px;
font-weight:600;
color:#fff;

background:linear-gradient(90deg,#2dd4bf,#7c3aed);
cursor:pointer;

transition:all .2s ease;
box-shadow:0 2px 8px rgba(0,0,0,0.25);
}

.buy-btn:hover{
background:linear-gradient(90deg,#3ddbd0,#8b5cf6);
transform:translateY(-1px);
box-shadow:0 4px 10px rgba(0,0,0,0.3);
}



@media(max-width:1000px){
.shop-grid{ grid-template-columns:repeat(2,1fr); }
}

@media(max-width:600px){
.shop-grid{ grid-template-columns:1fr; }
}

.buy-btn.disabled{
background:#aaa;
cursor:not-allowed;
}
.out-stock{
position:absolute;
top:10px;
left:10px;
background:red;
color:white;

border-radius:6px;
z-index:5;

padding:5px 12px;
font-size:12px;
font-weight:600;
letter-spacing:.5px;


}
.product-title a{
text-decoration:none;
color:inherit;
font-weight:600;
}

/* AUTH */
    .auth-box{
      margin-bottom:20px;
      width:100%;
      max-width:550px;
      margin:20px auto 15px auto; /* căn giữa ngang */
    }
    .auth-box a{
      color:#00f5ff;
      text-decoration:none;
      margin-right:10px;
      font-weight:600;
    }
    .user-info{
      margin-bottom:15px;
      padding:12px 15px;
      background:#1f2937;
      border-radius:10px;
    }
    
    /* GLOW */
    .glow-name{
      color:#fff;
      font-weight:700;
      text-shadow:
        0 0 5px #00f5ff,
        0 0 10px #00f5ff,
        0 0 20px #9d4edd,
        0 0 30px #9d4edd;
      animation: glow 1.5s infinite alternate;
    }
    @keyframes glow{
      from { text-shadow:0 0 5px #00f5ff; }
      to   { text-shadow:0 0 25px #9d4edd; }
    }
    
     /* ===== MENU GÓC PHẢI ===== */
    .top-user-menu{
      display:flex;
      justify-content:flex-end;
      gap:15px;
      margin-top:15px;
      font-size:14px;
    }
    
    .top-user-menu a{
      color:#00f5ff;
      text-decoration:none;
      font-weight:600;
    }
    
    .top-user-menu a:hover{
      opacity:0.8;
    }
    
    /* ===== ROYAL ===== */

    .royal{
    background:linear-gradient(90deg,#ffd700,#ff00ff,#ffd700);
    background-size:200%;
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    animation:royalMove 2s linear infinite;
    }
    
    @keyframes royalMove{
    0%{background-position:0%}
    100%{background-position:200%}
    }
    
.product{
position:relative;
}

/* ===============================
BADGE BÁN CHẠY
================================ */

.hot-badge{
position:absolute;
top:12px;
right:10px;

padding:5px 12px;
font-size:12px;
font-weight:700;
letter-spacing:.5px;

color:#fff;
border-radius:8px;

background:linear-gradient(45deg,#ff0000,#ff6a00);
box-shadow:
0 0 8px rgba(255,0,0,.7),
0 0 15px rgba(255,80,0,.6);

z-index:5;
overflow:hidden;


}

/* ánh sáng chạy */
.hot-badge::before{
content:"";
position:absolute;
top:0;
left:-120%;
width:30%;
height:100%;

background:linear-gradient(
120deg,
transparent,
rgba(255,255,255,.5),
transparent
);

transform:skewX(-20deg);
animation:hotLight 7s infinite;
}


/* ánh sáng chạy */
@keyframes hotLight{
0%{left:-120%;}
100%{left:150%;}
}


.pagination{
margin-top:30px;
display:flex;
justify-content:center;
gap:8px;
}

.pagination a{
padding:6px 12px;
background:#1e1e2f;
color:#fff;
text-decoration:none;
border-radius:6px;
transition:.2s;
}

.pagination a:hover{
background:#ff6a00;
}

.pagination a.active{
background:#ff6a00;
font-weight:700;
}


    
    .auth-note{
      font-size:12px;
      color:#9ca3af;
    }
 /* ===== STORE HEADER (h1 + auth nằm ngang) ===== */

.store-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:15px;

  flex-wrap:wrap;
}

/* user khi đã login */
.user-inline{
  display:flex;
  align-items:center;
  gap:12px;
  font-size:14px;
}



.auth-login{
    margin-left:auto; /* 👈 cái này mới đúng */
}

/* mobile */
@media(max-width:600px){
  .store-header{
    flex-direction:row;
    justify-content:space-between;
    align-items:center;
  }


  .profile-header{
    position:relative;
    margin-bottom:30px;
    }
    .search-box{
       width:100%;
    }
}

.search-box{
  position:relative;
  width:100%;
  max-width:300px;
  
  
}

/* INPUT */

.search-box input{
  width:100%;
  padding:12px 45px 12px 16px;

  border-radius:999px;
  border:1px solid rgba(0,245,255,0.15);

  background:linear-gradient(135deg,#1f2937,#0f172a);
  color:#e5e7eb;

  font-size:14px;
  outline:none;

  transition:0.25s;
}

/* placeholder */

.search-box input::placeholder{
  color:#9ca3af;
}

/* ICON */

.search-btn{
  position:absolute;
  top:50%;
  right:14px;
  transform:translateY(-50%);

  border:none;
  background:none;

  font-size:17px;
  color:#9ca3af;

  cursor:pointer;
  transition:0.2s;
}

.search-btn:hover{
  color:#00f5ff;
}

/* ===== AUTH BUTTONS FIX ===== */

.auth-buttons{
  display:flex;
  align-items:center; /* 🔥 QUAN TRỌNG: căn giữa theo chiều dọc */

}

/* LOGIN + REGISTER */

.btn-login,
.btn-register{
  display:inline-flex;          /* 🔥 fix lệch */
  align-items:center;           /* 🔥 căn icon + chữ */
  justify-content:center;

  padding:6px 12px;             /* 🔥 tạo chiều cao bằng nhau */


  font-size:14px;
  font-weight:600;
  text-decoration:none;

  line-height:1;                /* 🔥 fix baseline */
  color:#00f5ff;

  transition:0.25s;
}

/* LOGIN */

.btn-login:hover{
  transform:translateY(-1.5px);
}

/* REGISTER */

.btn-register:hover{

  transform:translateY(-1.5px);
}
.divider{
  color:#6b7280;
  font-size:14px;
}