/* ===== 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;
}

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

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

.banner{
height:220px;
border-radius:20px;
background:url('../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;
padding:5px 10px;
font-size:12px;
border-radius:6px;
}
.product-title a{
text-decoration:none;
color:inherit;
font-weight:600;
}

/* AUTH */
    .auth-box{
      margin-bottom:20px;
      width:100%;
      max-width:550px;
      margin-top:60px;
      margin:80px auto 20px 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%}
    }