:root {
    --bg-body: #0f1117;
    --bg-card: #1a1d2e;
    --bg-card-hover: #222640;
    --bg-header: rgba(15, 17, 23, 0.95);
    --border: rgba(255,255,255,0.06);
    --border-hover: rgba(139,92,246,0.3);
    --text: #e8eaed;
    --text-sec: #9aa0b2;
    --text-dim: #5c6378;
    --accent: #8b5cf6;
    --accent2: #00f5d4;
    --gradient: linear-gradient(135deg, #8b5cf6 0%, #00f5d4 100%);
    --red: #ef4444;
    --green: #22c55e;
    --yellow: #fbbf24;
    --blue: #3b82f6;
    --radius: 12px;
    --radius-sm: 8px;
    --shadow: 0 8px 32px rgba(0,0,0,0.3);
    --transition: all 0.25s cubic-bezier(0.4,0,0.2,1);
}

*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Quicksand',sans-serif;background:var(--bg-body);color:var(--text);line-height:1.6;min-height:100vh;-webkit-font-smoothing:antialiased}
a{color:var(--accent2);text-decoration:none;transition:var(--transition)}
a:hover{color:var(--accent)}
img{max-width:100%;height:auto}

/* ===== HEADER ===== */
.main-header{background:var(--bg-header);backdrop-filter:blur(20px);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:1000}
.header-top{display:flex;align-items:center;justify-content:space-between;padding:0.75rem 0;gap:1rem}
.brand-logo{font-size:1.5rem;font-weight:800;color:var(--text);display:flex;align-items:center;gap:0.5rem;white-space:nowrap}
.brand-logo i{color:var(--accent);font-size:1.3rem}
.header-search{flex:1;max-width:520px;display:flex;background:rgba(255,255,255,0.05);border:1px solid var(--border);border-radius:10px;overflow:hidden;transition:var(--transition)}
.header-search:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px rgba(139,92,246,0.15)}
.header-search input{flex:1;background:none;border:none;color:var(--text);padding:0.6rem 1rem;font-family:inherit;font-size:0.9rem;outline:none}
.header-search input::placeholder{color:var(--text-dim)}
.header-search button{background:var(--gradient);border:none;color:#fff;padding:0 1.2rem;cursor:pointer;font-size:0.9rem;transition:var(--transition)}
.header-search button:hover{opacity:0.9}
.header-actions{display:flex;align-items:center;gap:0.5rem}
.header-icon-btn{position:relative;background:rgba(255,255,255,0.05);border:1px solid var(--border);border-radius:10px;padding:0.55rem 0.75rem;color:var(--text-sec);transition:var(--transition);font-size:1rem}
.header-icon-btn:hover{border-color:var(--accent);color:var(--accent)}
.badge-count{position:absolute;top:-5px;right:-5px;background:var(--red);color:#fff;font-size:0.6rem;padding:0.15rem 0.4rem;border-radius:10px;font-weight:700;min-width:16px;text-align:center}
.btn-login{background:rgba(255,255,255,0.05);border:1px solid var(--border);color:var(--text);padding:0.5rem 1rem;border-radius:10px;font-weight:600;font-size:0.85rem;transition:var(--transition);white-space:nowrap}
.btn-login:hover{border-color:var(--accent);color:var(--accent)}
.btn-register{background:var(--gradient);color:#fff;padding:0.5rem 1rem;border-radius:10px;font-weight:600;font-size:0.85rem;transition:var(--transition);white-space:nowrap}
.btn-register:hover{opacity:0.9;color:#fff}
.user-dropdown-wrap{position:relative}
.header-user-btn{display:flex;align-items:center;gap:0.5rem;background:rgba(255,255,255,0.05);border:1px solid var(--border);border-radius:10px;padding:0.4rem 0.75rem;color:var(--text);cursor:pointer;font-family:inherit;transition:var(--transition)}
.header-user-btn:hover{border-color:var(--accent)}
.user-avatar-sm{width:28px;height:28px;background:var(--gradient);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:0.75rem;font-weight:800;color:#fff}
.user-name-text{font-size:0.85rem;font-weight:600}
.header-user-btn i{font-size:0.65rem;color:var(--text-dim)}
.user-dropdown{display:none;position:absolute;top:calc(100% + 8px);right:0;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);min-width:220px;box-shadow:var(--shadow);overflow:hidden;z-index:100}
.user-dropdown-wrap:hover .user-dropdown{display:block}
.dropdown-balance{padding:0.75rem 1rem;border-bottom:1px solid var(--border);font-size:0.85rem;color:var(--text-sec)}
.user-dropdown a{display:flex;align-items:center;gap:0.6rem;padding:0.6rem 1rem;color:var(--text-sec);font-size:0.85rem;transition:var(--transition)}
.user-dropdown a:hover{background:rgba(255,255,255,0.05);color:var(--text)}
.dropdown-divider{height:1px;background:var(--border);margin:0}
.sub-nav{border-top:1px solid var(--border)}
.nav-menu{display:flex;list-style:none;gap:0;margin:-0.25rem 0}
.nav-menu li a{display:flex;align-items:center;gap:0.4rem;padding:0.65rem 1rem;color:var(--text-sec);font-size:0.85rem;font-weight:600;border-radius:var(--radius-sm);transition:var(--transition)}
.nav-menu li a:hover,.nav-menu li a.active{color:var(--text);background:rgba(139,92,246,0.1)}
.nav-menu li a.active{color:var(--accent)}

/* ===== HERO ===== */
.hero-banner{padding:4rem 0 2rem;overflow:hidden}
.hero-inner{display:flex;align-items:center;justify-content:space-between;gap:3rem}
.hero-text{flex:1;max-width:600px}
.hero-badge{display:inline-flex;align-items:center;gap:0.4rem;background:rgba(139,92,246,0.12);color:var(--accent);padding:0.4rem 1rem;border-radius:20px;font-size:0.8rem;font-weight:700;margin-bottom:1rem;border:1px solid rgba(139,92,246,0.2)}
.hero-text h1{font-size:3rem;font-weight:800;line-height:1.15;margin-bottom:1rem}
.text-gradient{background:var(--gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.hero-text p{font-size:1.1rem;color:var(--text-sec);margin-bottom:1.5rem;max-width:500px}
.hero-btns{display:flex;gap:0.75rem;flex-wrap:wrap}
.hero-visual{flex:0 0 340px;height:300px;position:relative;display:none}
@media(min-width:992px){.hero-visual{display:block}}
.hero-card{position:absolute;width:80px;height:80px;border-radius:var(--radius);display:flex;align-items:center;justify-content:center;font-size:1.8rem;color:#fff;animation:floatCard 6s ease-in-out infinite}
.hero-card-1{background:rgba(139,92,246,0.3);top:20%;left:10%;animation-delay:0s}
.hero-card-2{background:rgba(0,245,212,0.25);top:50%;right:10%;animation-delay:2s}
.hero-card-3{background:rgba(239,68,68,0.25);bottom:10%;left:40%;animation-delay:4s}
@keyframes floatCard{0%,100%{transform:translateY(0)}50%{transform:translateY(-20px)}}

/* ===== QUICK ACCESS ===== */
.quick-access{padding:0 0 2rem}
.promo-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.promo-card{display:flex;align-items:center;gap:0.75rem;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:1rem 1.25rem;transition:var(--transition);cursor:pointer;color:var(--text)}
.promo-card:hover{border-color:var(--border-hover);transform:translateY(-3px);box-shadow:0 8px 25px rgba(0,0,0,0.2);color:var(--text)}
.promo-icon{width:44px;height:44px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:1.1rem;flex-shrink:0}
.pc-purple .promo-icon{background:rgba(139,92,246,0.15);color:var(--accent)}
.pc-cyan .promo-icon{background:rgba(0,245,212,0.15);color:var(--accent2)}
.pc-pink .promo-icon{background:rgba(236,72,153,0.15);color:#ec4899}
.pc-green .promo-icon{background:rgba(34,197,94,0.15);color:var(--green)}
.promo-info h4{font-size:0.9rem;font-weight:700;margin-bottom:0.1rem}
.promo-info p{font-size:0.75rem;color:var(--text-dim);margin:0}
.promo-arrow{margin-left:auto;color:var(--text-dim);font-size:0.8rem;transition:var(--transition)}
.promo-card:hover .promo-arrow{color:var(--accent);transform:translateX(3px)}

/* ===== ANNOUNCE ===== */
.announce-bar{padding:0 0 1.5rem}
.announce-inner{display:flex;align-items:center;gap:0.75rem;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:0.75rem 1.25rem;overflow:hidden}
.announce-tag{background:var(--gradient);color:#fff;padding:0.3rem 0.75rem;border-radius:6px;font-size:0.75rem;font-weight:700;white-space:nowrap}
.announce-scroll{overflow:hidden;flex:1}
.announce-scroll span{display:inline-block;white-space:nowrap;animation:scrollLeft 20s linear infinite;font-size:0.85rem;color:var(--text-sec)}
@keyframes scrollLeft{0%{transform:translateX(100%)}100%{transform:translateX(-100%)}}

/* ===== PRODUCT GRID (coderent.vn style) ===== */
.section-products{padding:2rem 0}
.section-head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:1.5rem;flex-wrap:wrap;gap:1rem}
.section-title{font-size:1.4rem;font-weight:800;text-transform:uppercase;letter-spacing:1px}
.section-subtitle{color:var(--text-dim);font-size:0.9rem;margin-top:0.2rem}
.theme-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1.25rem}
.theme-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;transition:var(--transition);display:block;color:var(--text)}
.theme-card:hover{border-color:var(--border-hover);transform:translateY(-5px);box-shadow:0 12px 35px rgba(0,0,0,0.25);color:var(--text)}
.theme-img-wrap{position:relative;overflow:hidden;aspect-ratio:16/10}
.theme-img-inner{position:relative;width:100%;height:100%}
.theme-img-inner img{width:100%;height:100%;object-fit:cover;transition:transform 0.4s ease}
.theme-card:hover .theme-img-inner img{transform:scale(1.08)}
.theme-overlay{position:absolute;inset:0;background:rgba(0,0,0,0.6);display:flex;align-items:center;justify-content:center;opacity:0;transition:var(--transition)}
.theme-card:hover .theme-overlay{opacity:1}
.view-btn{display:flex;align-items:center;gap:0.5rem;background:var(--gradient);color:#fff;padding:0.6rem 1.2rem;border-radius:8px;font-weight:700;font-size:0.85rem;transform:translateY(10px);transition:var(--transition)}
.theme-card:hover .view-btn{transform:translateY(0)}
.price-badge{position:absolute;bottom:12px;left:12px;background:rgba(0,0,0,0.75);backdrop-filter:blur(8px);color:var(--accent2);padding:0.35rem 0.75rem;border-radius:6px;font-weight:800;font-size:0.85rem;border:1px solid rgba(0,245,212,0.2)}
.theme-body{padding:1rem 1.25rem}
.theme-meta{display:flex;align-items:center;margin-bottom:0.4rem}
.author-tag{font-size:0.72rem;color:var(--text-dim);font-weight:600}
.author-tag i{margin-right:0.25rem}
.theme-name{font-size:0.95rem;font-weight:700;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-bottom:0.6rem}
.theme-footer{display:flex;justify-content:space-between;align-items:center;font-size:0.78rem;color:var(--text-dim)}
.text-accent{color:var(--accent2)!important}

/* ===== FEATURES ===== */
.section-features{padding:2rem 0 3rem}
.features-row{display:grid;grid-template-columns:repeat(4,1fr);gap:1.25rem}
.feature-item{text-align:center;padding:2rem 1.25rem;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);transition:var(--transition)}
.feature-item:hover{border-color:var(--border-hover);transform:translateY(-3px)}
.feature-icon-box{width:56px;height:56px;background:var(--gradient);border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:1.3rem;color:#fff;margin:0 auto 1rem}
.feature-item h4{font-size:1rem;font-weight:700;margin-bottom:0.3rem}
.feature-item p{font-size:0.82rem;color:var(--text-dim)}

/* ===== PRODUCT DETAIL ===== */
.section-product-detail{padding:2rem 0}
.back-link{display:inline-flex;align-items:center;gap:0.4rem;color:var(--text-sec);font-size:0.9rem;font-weight:600;margin-bottom:1.5rem;transition:var(--transition)}
.back-link:hover{color:var(--accent)}
.detail-card{display:grid;grid-template-columns:1.2fr 1fr;gap:2rem;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}
.detail-left{min-height:400px}
.detail-img{width:100%;height:100%;object-fit:cover;min-height:400px}
.detail-right{padding:2rem}
.detail-right .status-badge{display:inline-block;padding:0.25rem 0.75rem;border-radius:6px;font-size:0.75rem;font-weight:700;margin-bottom:0.75rem}
.detail-right .status-badge.badge-active{background:rgba(34,197,94,0.15);color:var(--green)}
.detail-right .status-badge.badge-pending{background:rgba(251,191,36,0.15);color:var(--yellow)}
.detail-right .status-badge.badge-inactive{background:rgba(239,68,68,0.15);color:var(--red)}
.detail-name{font-size:1.8rem;font-weight:800;margin-bottom:0.75rem}
.detail-meta{display:flex;gap:1.25rem;color:var(--text-dim);font-size:0.85rem;margin-bottom:1rem;flex-wrap:wrap}
.detail-price{font-size:2.2rem;font-weight:800;background:var(--gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;margin-bottom:1.5rem}
.detail-desc{margin-bottom:1.5rem}
.detail-desc h3{font-size:1rem;font-weight:700;margin-bottom:0.5rem}
.detail-desc p{color:var(--text-sec);line-height:1.8}
.detail-actions{display:flex;gap:0.75rem;flex-wrap:wrap}
.alert-warning-custom{background:rgba(251,191,36,0.1);border:1px solid rgba(251,191,36,0.3);color:var(--yellow);padding:0.75rem 1rem;border-radius:var(--radius-sm);font-size:0.9rem}

/* ===== BUTTONS ===== */
.btn{display:inline-flex;align-items:center;gap:0.5rem;padding:0.65rem 1.5rem;border:none;border-radius:10px;font-family:inherit;font-size:0.9rem;font-weight:700;cursor:pointer;transition:var(--transition);white-space:nowrap;text-decoration:none}
.btn-sm{padding:0.45rem 1rem;font-size:0.8rem;border-radius:8px}
.btn-lg{padding:0.8rem 2rem;font-size:1rem}
.btn-block{width:100%;justify-content:center}
.btn-primary-custom{background:var(--gradient);color:#fff;box-shadow:0 4px 15px rgba(139,92,246,0.25)}
.btn-primary-custom:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(139,92,246,0.35);color:#fff}
.btn-outline-custom{background:transparent;border:1px solid var(--border);color:var(--text)}
.btn-outline-custom:hover{border-color:var(--accent);color:var(--accent);background:rgba(139,92,246,0.05)}
.btn-danger-custom{background:var(--red);color:#fff}
.btn-danger-custom:hover{background:#dc2626;color:#fff}

/* ===== FORMS ===== */
.form-group{margin-bottom:1rem}
.form-group label{display:block;font-size:0.82rem;font-weight:600;color:var(--text-sec);margin-bottom:0.3rem}
.form-group label i{margin-right:0.3rem;width:14px;text-align:center;color:var(--accent)}
.form-control{width:100%;padding:0.7rem 1rem;background:rgba(255,255,255,0.04);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text);font-family:inherit;font-size:0.9rem;transition:var(--transition)}
.form-control:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(139,92,246,0.12)}
.form-control::placeholder{color:var(--text-dim)}
select.form-control{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%235c6378' d='M6 8L1 3h10z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 1rem center;padding-right:2.5rem}
textarea.form-control{resize:vertical;min-height:80px}

/* ===== AUTH ===== */
.section-auth{padding:3rem 0}
.auth-card{max-width:440px;margin:0 auto;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:2.5rem;box-shadow:var(--shadow)}
.auth-header{text-align:center;margin-bottom:2rem}
.auth-icon{width:64px;height:64px;background:var(--gradient);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.5rem;color:#fff;margin:0 auto 1rem}
.auth-header h2{font-size:1.5rem;font-weight:800}
.auth-header p{color:var(--text-dim);font-size:0.9rem;margin-top:0.3rem}
.auth-footer{text-align:center;color:var(--text-dim);font-size:0.85rem;margin-top:1rem}

/* ===== CART ===== */
.section-cart{padding:2rem 0}
.page-title{font-size:1.4rem;font-weight:800;margin-bottom:1.5rem;display:flex;align-items:center;gap:0.5rem}
.page-title i{color:var(--accent)}
.cart-table-wrap{overflow-x:auto;margin-bottom:1.5rem}
.cart-table{width:100%;border-collapse:collapse}
.cart-table th,.cart-table td{padding:0.75rem 1rem;text-align:left;border-bottom:1px solid var(--border);font-size:0.85rem}
.cart-table th{color:var(--text-dim);font-weight:700;font-size:0.78rem;text-transform:uppercase;letter-spacing:0.5px}
.cart-table tbody tr:hover{background:rgba(255,255,255,0.02)}
.cart-prod-name{display:flex;align-items:center;gap:0.75rem}
.cart-thumb{width:40px;height:40px;object-fit:cover;border-radius:6px}
.cart-summary{display:flex;justify-content:flex-end;align-items:center;gap:2rem;padding:1.25rem 1.5rem;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);flex-wrap:wrap}
.cart-total{font-size:1rem}
.cart-balance{font-size:0.9rem}

/* ===== PROFILE ===== */
.section-profile{padding:2rem 0}
.profile-grid{display:grid;grid-template-columns:280px 1fr;gap:1.5rem}
.profile-sidebar{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:2rem;text-align:center;height:fit-content;position:sticky;top:80px}
.profile-avatar-wrap{margin-bottom:1.5rem}
.avatar-lg{width:80px;height:80px;background:var(--gradient);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.8rem;font-weight:800;color:#fff;margin:0 auto 0.75rem}
.profile-avatar-wrap h3{font-size:1.1rem;font-weight:700}
.role-badge{display:inline-block;padding:0.2rem 0.6rem;border-radius:6px;font-size:0.72rem;font-weight:700}
.role-admin{background:rgba(239,68,68,0.12);color:var(--red)}
.role-ctv{background:rgba(139,92,246,0.12);color:var(--accent)}
.role-user{background:rgba(100,116,139,0.12);color:var(--text-dim)}
.role-success,.role-deposit{background:rgba(34,197,94,0.12);color:var(--green)}
.role-warning{background:rgba(251,191,36,0.12);color:var(--yellow)}
.role-danger{background:rgba(239,68,68,0.12);color:var(--red)}
.profile-stats-row{display:grid;grid-template-columns:1fr 1fr;gap:0.75rem}
.ps-item{padding:0.75rem;background:rgba(255,255,255,0.03);border-radius:8px}
.ps-val{display:block;font-size:0.95rem;font-weight:700}
.ps-label{display:block;font-size:0.72rem;color:var(--text-dim);margin-top:0.15rem}
.profile-main{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:2rem}

/* ===== TABS ===== */
.tabs{display:flex;gap:0.4rem;margin-bottom:1.5rem;flex-wrap:wrap;border-bottom:1px solid var(--border);padding-bottom:0.75rem}
.tab-btn{padding:0.5rem 1rem;background:none;border:1px solid transparent;border-radius:var(--radius-sm) var(--radius-sm) 0 0;color:var(--text-dim);font-family:inherit;font-size:0.85rem;font-weight:600;cursor:pointer;transition:var(--transition)}
.tab-btn:hover{color:var(--text)}
.tab-btn.active{color:var(--accent);border-color:var(--border);border-bottom-color:var(--bg-card);background:rgba(139,92,246,0.05)}
.tab-content{display:none}
.tab-content.active{display:block}

/* ===== SEARCH ===== */
.search-filter{margin-bottom:1.5rem}
.search-box{display:flex;gap:0.5rem;max-width:500px;background:rgba(255,255,255,0.04);border:1px solid var(--border);border-radius:var(--radius-sm);padding:0.3rem;transition:var(--transition)}
.search-box:focus-within{border-color:var(--accent)}
.search-box i{padding:0 0.5rem;color:var(--text-dim);display:flex;align-items:center}
.search-box input{flex:1;background:none;border:none;color:var(--text);font-family:inherit;font-size:0.9rem;outline:none;padding:0.4rem 0}
.search-box input::placeholder{color:var(--text-dim)}

/* ===== DEPOSIT ===== */
.section-deposit{padding:2rem 0}
.deposit-card{max-width:600px}
.deposit-balance-bar{padding:1rem 1.25rem;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);margin-bottom:1.5rem;font-size:0.95rem}
.deposit-tabs{display:flex;gap:0.5rem;margin-bottom:1.5rem}
.deposit-tab-content{display:none}
.deposit-tab-content.active{display:block}
.zalopay-box{text-align:center;padding:1rem}
.qr-code-img{width:220px;height:220px;margin:0 auto 1.5rem;background:var(--bg-card);border-radius:var(--radius);display:flex;align-items:center;justify-content:center;overflow:hidden;border:1px solid var(--border)}
.qr-code-img img{width:100%;height:100%;object-fit:contain}
.qr-fallback{color:var(--text-dim);text-align:center}
.bank-info-grid{display:flex;flex-direction:column;gap:0.5rem;max-width:350px;margin:0 auto 1rem}
.bi-row{display:flex;justify-content:space-between;padding:0.5rem 1rem;background:rgba(255,255,255,0.03);border-radius:6px;font-size:0.85rem}
.bi-label{color:var(--text-dim)}
.bi-value{font-weight:700}
.alert-info-custom{background:rgba(59,130,246,0.1);border:1px solid rgba(59,130,246,0.3);color:var(--blue);padding:0.75rem 1rem;border-radius:var(--radius-sm);font-size:0.85rem;margin-top:1rem}
.deposit-history{margin-top:2rem}
.deposit-history h4{font-size:1rem;font-weight:700;margin-bottom:1rem;display:flex;align-items:center;gap:0.5rem}

/* ===== TABLES ===== */
.table-responsive{overflow-x:auto}
.data-table{width:100%;border-collapse:collapse}
.data-table th,.data-table td{padding:0.65rem 0.85rem;text-align:left;border-bottom:1px solid var(--border);font-size:0.82rem}
.data-table th{color:var(--text-dim);font-weight:700;font-size:0.75rem;text-transform:uppercase;letter-spacing:0.5px}
.data-table tbody tr:hover{background:rgba(255,255,255,0.02)}

/* ===== FLASH ===== */
.flash-msg{padding:0.6rem 0;animation:slideIn 0.3s ease}
@keyframes slideIn{from{transform:translateY(-100%);opacity:0}to{transform:translateY(0);opacity:1}}
.flash-success{background:rgba(34,197,94,0.1);border-bottom:2px solid var(--green);color:var(--green)}
.flash-error{background:rgba(239,68,68,0.1);border-bottom:2px solid var(--red);color:var(--red)}
.flash-close{background:none;border:none;color:inherit;font-size:1.3rem;cursor:pointer;padding:0 0.5rem}

/* ===== EMPTY ===== */
.empty-box{text-align:center;padding:4rem 2rem;color:var(--text-dim)}
.empty-box i{font-size:3rem;margin-bottom:1rem;display:block;opacity:0.5}
.empty-box h3{font-size:1.1rem;margin-bottom:0.5rem;color:var(--text-sec)}
.empty-box .btn{margin-top:1rem}

/* ===== PAGINATION ===== */
.pagination{display:flex;justify-content:center;gap:0.4rem;margin-top:2rem}
.page-btn{padding:0.45rem 0.75rem;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text-sec);font-size:0.82rem;font-weight:600;transition:var(--transition)}
.page-btn:hover,.page-btn.active{background:var(--gradient);border-color:transparent;color:#fff}

/* ===== FOOTER ===== */
.main-footer{background:var(--bg-card);border-top:1px solid var(--border);padding:3rem 0 1.5rem;margin-top:2rem}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:2rem;margin-bottom:2rem}
.footer-logo{font-size:1.2rem;font-weight:800;color:var(--text);display:flex;align-items:center;gap:0.5rem;margin-bottom:0.75rem}
.footer-logo i{color:var(--accent)}
.footer-brand p{color:var(--text-dim);font-size:0.85rem;line-height:1.7}
.footer-socials{display:flex;gap:0.5rem;margin-top:1rem}
.footer-socials a{width:36px;height:36px;background:rgba(255,255,255,0.05);border:1px solid var(--border);border-radius:8px;display:flex;align-items:center;justify-content:center;color:var(--text-dim);transition:var(--transition);font-size:0.85rem}
.footer-socials a:hover{border-color:var(--accent);color:var(--accent);background:rgba(139,92,246,0.1)}
.footer-links h4{font-size:0.9rem;font-weight:700;margin-bottom:0.75rem;color:var(--text)}
.footer-links a{display:block;color:var(--text-dim);font-size:0.82rem;padding:0.2rem 0;transition:var(--transition)}
.footer-links a:hover{color:var(--accent2)}
.payment-methods{display:flex;flex-direction:column;gap:0.4rem}
.payment-badge{display:inline-flex;align-items:center;gap:0.4rem;background:rgba(255,255,255,0.04);border:1px solid var(--border);border-radius:6px;padding:0.35rem 0.75rem;font-size:0.78rem;color:var(--text-sec)}
.footer-bottom{text-align:center;padding-top:1.5rem;border-top:1px solid var(--border)}
.footer-bottom p{color:var(--text-dim);font-size:0.78rem}

/* ===== ERROR PAGE ===== */
.error-page{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:80vh;text-align:center;padding:2rem}
.error-code{font-size:8rem;font-weight:900;background:var(--gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;line-height:1}
.error-page h2{font-size:1.5rem;margin:1rem 0 0.5rem}
.error-page p{color:var(--text-dim);margin-bottom:1.5rem}

/* ===== RESPONSIVE ===== */
@media(max-width:991px){
    .promo-grid{grid-template-columns:repeat(2,1fr)}
    .features-row{grid-template-columns:repeat(2,1fr)}
    .footer-grid{grid-template-columns:repeat(2,1fr)}
    .detail-card{grid-template-columns:1fr}
    .profile-grid{grid-template-columns:1fr}
    .profile-sidebar{position:static}
    .hero-text h1{font-size:2.2rem}
}
@media(max-width:767px){
    .header-search{display:none}
    .header-top{padding:0.6rem 0}
    .nav-menu{overflow-x:auto;-webkit-overflow-scrolling:touch;gap:0}
    .nav-menu li a{padding:0.5rem 0.75rem;font-size:0.8rem;white-space:nowrap}
    .promo-grid{grid-template-columns:1fr 1fr}
    .theme-grid{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
    .features-row{grid-template-columns:1fr 1fr}
    .footer-grid{grid-template-columns:1fr}
    .hero-text h1{font-size:1.8rem}
    .hero-btns{flex-direction:column}
    .hero-btns .btn{width:100%;justify-content:center}
    .cart-summary{flex-direction:column;align-items:stretch;text-align:center}
    .section-head{flex-direction:column;align-items:flex-start}
}
@media(max-width:480px){
    .promo-grid{grid-template-columns:1fr}
    .theme-grid{grid-template-columns:1fr}
    .features-row{grid-template-columns:1fr}
    .auth-card{padding:1.5rem}
    .user-name-text{display:none}
}

.modal{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.7);display:flex;align-items:center;justify-content:center;z-index:2000;padding:1rem}
.modal-dialog-content{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:2rem;width:100%;max-height:90vh;overflow-y:auto}