*{margin:0;padding:0;box-sizing:border-box;font-family:Poppins,sans-serif}
body{background:#f4f6f8;color:#1f2937}

/* ===== HEADER ===== */
header{background:#fff}
.top-bar{
  background:#0f172a;
  color:#cbd5f5;
  padding:6px 60px;
  display:flex;
  justify-content:space-between;
  font-size:13px
}
.main-header{
  padding:26px 60px;
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:50px;
  align-items:center
}
.logo{font-size:36px;font-weight:700}
.logo span{color:#2563eb}
.search-box{
  display:flex;
  background:#f1f5f9;
  border-radius:40px;
  overflow:hidden;
  position: relative;
  z-index: 10001;
  box-shadow:0 0 0 3px rgba(37,99,235,.1);
  transition:.3s ease;
}
.search-suggestions{
  position:absolute;
  top:100%;
  left:0;
  right:0;
  background:#fff;
  border-radius:16px;
  box-shadow:0 12px 30px rgba(0,0,0,.12);
  margin-top:8px;
  display:none;
  overflow:hidden;
  z-index:10002
}
.search-suggestions.show{display:block}
.search-suggestion-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px 16px;
  border-bottom:1px solid #eef2f7;
  color:#1f2937;
  transition:.25s
}
.search-suggestion-item:hover{
  background:#f8fafc;
  color:#2563eb
}
.search-suggestion-price{
  color:#1e40af;
  font-weight:700
}
.search-box button{
  padding:0 24px;
  border:none;
  background:#2563eb;
  color:white
}
.icon-area{display:flex;gap:30px}
.icon-item{text-align:center;font-size:13px;cursor:pointer}
.icon-item i{font-size:22px;display:block}
.icon-item.bump{
  animation:bump .4s ease;
}
@keyframes bump{
  0%{transform:scale(1)}
  40%{transform:scale(1.15) translateY(-2px)}
  100%{transform:scale(1)}
}
.cart-badge.glow{
  box-shadow:0 0 0 6px rgba(239,68,68,.25), 0 0 20px rgba(239,68,68,.45);
}

/* ===== USER DROPDOWN ===== */
.user-account{
  position:relative
}
.user-account.pulse{
  animation:accPulse 2.4s ease-in-out infinite;
}
@keyframes accPulse{
  0%,100%{transform:none}
  50%{transform:translateY(-2px) scale(1.03)}
}
.user-account.open::after{
  content:"";
  position:absolute;
  inset:-6px;
  border-radius:12px;
  box-shadow:0 0 0 6px rgba(37,99,235,.12), 0 0 20px rgba(37,99,235,.25);
  pointer-events:none;
}
.user-dropdown{
  display:none;
  position:absolute;
  top:100%;
  right:-20px;
  background:white;
  border-radius:12px;
  box-shadow:0 8px 24px rgba(0,0,0,.15);
  min-width:200px;
  margin-top:8px;
  z-index:1000;
  animation:dropDown .3s ease
}
@keyframes dropDown{
  from{opacity:0;transform:translateY(-10px)}
  to{opacity:1;transform:translateY(0)}
}
.user-dropdown.show{
  display:flex;
  flex-direction:column
}
.user-dropdown a{
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 18px;
  color:#1f2937;
  text-decoration:none;
  transition:.3s;
  font-size:14px
}
.user-dropdown a:first-child{
  border-radius:12px 12px 0 0
}
.user-dropdown a:hover{
  background:#f1f5f9;
  color:#2563eb;
  padding-left:24px
}
.user-dropdown a i{
  width:18px;
  text-align:center
}
.user-dropdown hr{
  margin:6px 0;
  border:none;
  height:1px;
  background:#e5e7eb
}
.user-dropdown a:last-child{
  border-radius:0 0 12px 12px;
  color:#ef4444
}
.user-dropdown a:last-child:hover{
  background:#fee2e2
}

/* ===== CART BADGE ===== */
.cart-badge{
  position:absolute;
  top:-8px;
  right:-8px;
  background:#ef4444;
  color:white;
  border-radius:50%;
  width:24px;
  height:24px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:12px;
  font-weight:700;
  transform-origin:center;
  transition:transform .25s ease, box-shadow .25s ease;
  animation:cartBadgePulse 1.2s ease-in-out infinite
}

/* ===== CART MODAL ===== */
.cart-modal{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.6);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:2000
}
.auth-modal.show{
  animation:modalFade .25s ease
}
.cart-modal.show{
  animation:modalFade .25s ease
}
@keyframes modalFade{
  from{opacity:0}
  to{opacity:1}
}
.cart-modal.show{
  animation:modalFade .25s ease
}
@keyframes modalFade{
  from{opacity:0}
  to{opacity:1}
}
.cart-box{
  background:#fff;
  width:500px;
  max-height:600px;
  padding:30px;
  border-radius:20px;
  box-shadow:0 30px 60px rgba(0,0,0,.3);
  animation:popup .35s ease;
  position:relative;
  display:flex;
  flex-direction:column
}
.cart-box::before{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius:22px;
  border:2px solid rgba(37,99,235,.35);
  opacity:0;
  transform:scale(.96);
  transition:opacity .25s ease, transform .25s ease
}
.cart-box:hover::before{
  opacity:1;
  transform:scale(1)
}
.cart-items{
  flex:1;
  overflow-y:auto;
  margin:20px 0
}
.empty-cart{
  text-align:center;
  color:#9ca3af;
  padding:40px 20px
}
.cart-item{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:12px;
  border-bottom:1px solid #e5e7eb;
  gap:15px;
  border-radius:12px;
  transition:background .2s ease, transform .2s ease, box-shadow .2s ease
}
.cart-item:hover{
  background:#f9fafb;
  transform:translateY(-2px);
  box-shadow:0 6px 16px rgba(15,23,42,.12)
}
.cart-item.slide-out{
  transform:translateX(24px);
  opacity:.0;
  transition:.2s ease;
}
.cart-item-info{
  flex:1
}
.cart-item-name{
  font-weight:600;
  color:#1f2937
}
.cart-item-price{
  color:#ef4444;
  font-size:14px
}
.cart-item-qty{
  display:flex;
  align-items:center;
  gap:8px;
  background:#f1f5f9;
  border-radius:8px;
  padding:4px 8px
}
.cart-item-qty button{
  background:none;
  border:none;
  cursor:pointer;
  font-weight:700;
  color:#2563eb;
  transition:transform .15s ease, color .15s ease
}
.cart-item-qty button:hover{
  transform:scale(1.15);
  color:#1d4ed8
}
.cart-item-remove{
  background:#fee2e2;
  color:#ef4444;
  border:none;
  border-radius:6px;
  padding:4px 8px;
  cursor:pointer;
  font-size:12px
}
.cart-summary{
  border-top:2px solid #e5e7eb;
  padding-top:15px;
  margin-top:15px
}
.total-price{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:15px;
  font-size:18px
}
.total-price span{
  color:#2563eb;
  font-weight:700
}
.checkout-btn{
  width:100%;
  padding:14px;
  background:#2563eb;
  color:white;
  border:none;
  border-radius:12px;
  font-weight:600;
  cursor:pointer;
  position:relative;
  overflow:hidden;
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease
}
.checkout-btn:hover{
  background:#1e40af;
  transform:translateY(-2px);
  box-shadow:0 10px 25px rgba(37,99,235,.35)
}
.checkout-btn::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(120deg,transparent,rgba(255,255,255,.45),transparent);
  transform:translateX(-120%);
  transition:transform .5s ease;
  pointer-events:none
}
.checkout-btn:hover::after{
  transform:translateX(120%)
}

/* ===== MENU ===== */
.menu{
  background:#fff;
  border-top:1px solid #e5e7eb;
  border-bottom:3px solid #2563eb
}
.menu ul{
  display:flex;
  gap:36px;
  list-style:none;
  padding:0 60px
}
.menu li{
  padding:16px 0;
  font-weight:600;
  cursor:pointer;
  position:relative
}
.menu li:hover{color:#2563eb}

/* ===== HERO ===== */
.hero{
  background:linear-gradient(120deg,#2563eb,#0f172a);
  color:white;
  padding:80px 60px;
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:center
}
.hero h1{font-size:52px;margin-bottom:20px}
.hero p{font-size:18px;opacity:.9;margin-bottom:30px}
.hero button{
  padding:14px 30px;
  border:none;
  border-radius:30px;
  font-weight:600;
  background: linear-gradient(45deg, #00ff00, #00ffff);
  color:#000;
  cursor:pointer;
  transition:.3s;
  box-shadow: 0 0 10px rgba(0, 255, 0, 0.5);
  position: relative;
  overflow: hidden;
}
.hero button::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.5s;
}
.hero button:hover::before {
  left: 100%;
}
.hero button:hover{
  transform:translateY(-3px) scale(1.05);
  box-shadow: 0 0 20px rgba(0, 255, 0, 0.8), 0 0 40px rgba(0, 255, 255, 0.6);
}
.hero img{
  width:100%;
  border-radius:30px;
  box-shadow:0 30px 60px rgba(0,0,0,.3);
  transition: transform 0.5s ease, box-shadow 0.5s ease;
}
.hero img:hover {
  transform: scale(1.02);
  box-shadow: 0 40px 80px rgba(0,0,0,.4);
}

.hero-features {
  display: flex;
  gap: 20px;
  margin-top: 30px;
  flex-wrap: wrap;
  justify-content: center;
}
.hero-chips{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin:12px 0 6px;
  justify-content:center;
}
.chip{
  padding:8px 12px;
  border-radius:20px;
  background:linear-gradient(135deg,#e0e7ff,#eef2ff);
  color:#1e3a8a;
  font-weight:700;
  box-shadow:0 4px 12px rgba(0,0,0,.08);
}

.feature-item {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255, 255, 255, 0.1);
  padding: 10px 15px;
  border-radius: 20px;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: white;
  font-size: 14px;
  transition: transform 0.3s;
}

.feature-item:hover {
  transform: translateY(-5px);
}

.feature-item i {
  color: #00ff00;
}

/* ===== SECTION ===== */
.section{
  padding:70px 60px
}
.section h2{
  font-size:32px;
  margin-bottom:40px;
  text-align:center
}

/* ===== PRODUCTS ===== */
.product-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:30px
}
/* Gộp style thẻ sản phẩm: xoá block cũ trùng lặp, dùng phần "Product card enhancements" bên dưới */

/* ===== FOOTER ===== */
footer{
  background:#0f172a;
  color:#cbd5f5;
  padding:40px;
  text-align:center;
  margin-top:60px
}
/* ===== AUTH MODAL ===== */
.auth-modal{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.6);
  display:none;
  z-index:30000
}
.auth-box{
  background:#fff;
  width:360px;
  padding:30px;
  border-radius:20px;
  box-shadow:0 30px 60px rgba(0,0,0,.3);
  animation:popup .35s ease;
  position:fixed;
  top:80px;
  left:50%;
  transform:translateX(-50%);
  z-index:30001
}
@keyframes popup{
  from{transform:scale(.8);opacity:0}
  to{transform:scale(1);opacity:1}
}
.auth-box h2{
  text-align:center;
  margin-bottom:20px
}
.auth-box input{
  width:100%;
  padding:12px 14px;
  margin-bottom:14px;
  border-radius:12px;
  border:1px solid #ddd;
  outline:none
}
.auth-box button{
  width:100%;
  padding:12px;
  border:none;
  border-radius:20px;
  background:#2563eb;
  color:white;
  font-weight:600;
  cursor:pointer
}
.switch{
  text-align:center;
  margin-top:15px;
  font-size:14px
}
.switch span{
  color:#2563eb;
  cursor:pointer;
  font-weight:600
}
.close-btn{
  position:absolute;
  top:14px;
  right:18px;
  font-size:22px;
  cursor:pointer;
  color:#555
}
/* ===== GLOBAL ANIMATION ===== */
*{margin:0;padding:0;box-sizing:border-box;font-family:Poppins,sans-serif}
body{
  background:#f4f6f8;
  color:#1f2937;
  animation:fadeIn 1s ease;
}
@keyframes fadeIn{
  from{opacity:0}
  to{opacity:1}
}

/* ===== HEADER ===== */
header{background:#fff;transition:.4s}
header:hover{box-shadow:0 10px 40px rgba(0,0,0,.08)}

.top-bar{
  background:#0f172a;
  color:#cbd5f5;
  padding:6px 60px;
  display:flex;
  justify-content:space-between;
  font-size:13px
}

.main-header{
  padding:26px 60px;
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:50px;
  align-items:center
}

.logo{font-size:36px;font-weight:700}
.logo span{
  color:#2563eb;
  text-shadow:0 0 10px rgba(37,99,235,.4)
}

/* ===== SEARCH ===== */
.search-box{
  display:flex;
  align-items:center;
  background:#f1f5f9;
  border-radius:40px;
  overflow:visible;
  transition:.3s;
  position:relative;
  padding:0 20px;
  border:2px solid transparent
}
.search-box:focus-within{
  box-shadow:0 0 0 4px rgba(37,99,235,.2);
  transform:scale(1.03);
  border-color:#2563eb;
  background:white
}
.search-icon{
  color:#9ca3af;
  margin-right:10px;
  transition:.3s
}
.search-box:focus-within .search-icon{
  color:#2563eb
}
.search-box input{
  flex:1;
  padding:14px 0;
  border:none;
  outline:none;
  background:transparent;
  font-size:15px
}
.search-box input::placeholder{
  color:#d1d5db
}
.search-suggestions{
  display:none;
  position:absolute;
  top:calc(100% + 8px);
  left:0;
  right:0;
  background:white;
  border-radius:12px;
  box-shadow:0 8px 24px rgba(0,0,0,.15);
  max-height:300px;
  overflow-y:auto;
  z-index:20000
}
.search-suggestions.show{
  display:block;
  animation:slideDown .3s ease
}
@keyframes slideDown{
  from{opacity:0;transform:translateY(-10px)}
  to{opacity:1;transform:translateY(0)}
}
.search-suggestion-item{
  padding:12px 16px;
  cursor:pointer;
  transition:.2s;
  border-bottom:1px solid #f3f4f6;
  display:flex;
  align-items:center;
  gap:12px
}
.search-suggestion-item:hover{
  background:#f1f5f9;
  padding-left:20px
}
.search-suggestion-item i{
  color:#9ca3af;
  font-size:14px
}
.search-suggestion-item span{
  flex:1
}
.search-suggestion-price{
  color:#ef4444;
  font-weight:600;
  font-size:13px
}
.search-box button{
  padding:8px 0;
  margin-left:10px;
  border:none;
  background:none;
  color:#2563eb;
  cursor:pointer;
  font-size:18px;
  transition:.3s
}
.search-box button:hover{
  color:#1e40af;
  transform:scale(1.15)
}

/* ===== ICON ===== */
.icon-area{display:flex;gap:30px}
.icon-item{text-align:center;font-size:13px;cursor:pointer;transition:.3s;position:relative}
.icon-item:hover{color:#2563eb;transform:translateY(-3px)}
.icon-item i{font-size:22px;display:block}
@keyframes cartBadgePulse{
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.2)}
}

/* ===== MENU ===== */
.menu{
  background:#fff;
  border-top:1px solid #e5e7eb;
  border-bottom:3px solid #2563eb
}
.menu ul{
  display:flex;
  gap:36px;
  list-style:none;
  padding:0 60px
}
.menu li{
  padding:16px 0;
  font-weight:600;
  cursor:pointer;
position:relative
}
.menu li::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:0;
  width:0;
  height:2px;
  border-radius:2px;
  background:linear-gradient(90deg, rgba(37,99,235,0), rgba(37,99,235,.45), rgba(37,99,235,0));
  transition:width .3s ease;
  transform:translateX(-50%)
}
.menu li:hover::after{width:60%}

/* ===== HERO ===== */
.hero{
  background:linear-gradient(120deg,#2563eb,#0f172a,#2563eb);
  background-size:200% 200%;
  animation:heroBg 10s infinite alternate;
  color:white;
  padding:80px 60px;
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:center
}
@keyframes heroBg{
  from{background-position:0% 50%}
  to{background-position:100% 50%}
}

.hero h1{font-size:52px;margin-bottom:20px}
.hero p{font-size:18px;opacity:.9;margin-bottom:30px}

.hero button{
  padding:14px 30px;
  border:none;
  border-radius:30px;
  font-weight:600;
  background:white;
  color:#2563eb;
  cursor:pointer;
  transition:.3s;
  position:relative;
  overflow:hidden
}
.hero button:hover{
  transform:translateY(-4px);
  box-shadow:0 10px 30px rgba(0,0,0,.3)
}

/* ===== SECTION ===== */
.section{padding:70px 60px; background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); border-radius: 20px; margin: 20px 0;}
.section h2{
  font-size:32px;
  margin-bottom:40px;
  text-align:center
}

/* ===== PRODUCTS ===== */
.product-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:30px
}
.product-card{
  background:white;
  border-radius:24px;
  padding:20px;
  box-shadow:0 15px 40px rgba(0,0,0,.1);
  transition:.4s;
  position:relative
}
.product-card::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:24px;
  background:linear-gradient(135deg,#2563eb,transparent);
  opacity:0;
  transition:.4s
}
.product-card:hover::before{opacity:.08}
.product-card:hover{
  transform:translateY(-12px);
  box-shadow:0 30px 60px rgba(0,0,0,.2)
}
.product-card img{
  width:100%;
  height:180px;
  object-fit:cover;
  border-radius:16px
}
.product-card h3{margin:15px 0}
.price{color:#ef4444;font-weight:700}

.product-card button{
  margin-top:15px;
  width:100%;
  padding:12px;
  border:none;
  border-radius:20px;
  background:#2563eb;
  color:white;
  font-weight:600;
  cursor:pointer;
  transition:.3s
}
.product-card button:hover{
  background:#1e40af;
  transform:scale(1.05)
}

/* ===== AUTH MODAL ===== */
.auth-modal{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.6);
  backdrop-filter:blur(6px);
  display:none;
  z-index:30000
}
.auth-box{
  background:#fff;
  width:360px;
  padding:30px;
  border-radius:20px;
  box-shadow:0 30px 60px rgba(0,0,0,.3);
  animation:popup .35s ease;
  position:fixed;
  top:80px;
  left:50%;
  transform:translateX(-50%);
  z-index:30001
}
/* Trùng lặp keyframes popup: đã khai báo phía trên, xoá bản sao */
.auth-box input:focus{
  border-color:#2563eb;
  box-shadow:0 0 0 3px rgba(37,99,235,.2)
}

/* ===== FOOTER ===== */
footer{
  background:#0f172a;
  color:#cbd5f5;
padding:40px;
  text-align:center;
  margin-top:60px
}
/* ===== MENU CHIA 3 CỤM – CĂN GIỮA ===== */
/* ===== MENU CÂN ĐẸP – CHIA TRỌNG TÂM ===== */
.menu{
  background:linear-gradient(to right, #fff, #f8fafc, #fff);
  border-top:1px solid #e5e7eb;
  border-bottom:3px solid #2563eb;
  position:sticky;
  top:100px;
  z-index:100;
  box-shadow:0 4px 12px rgba(0,0,0,.04)
}

.menu-list{
  max-width:1400px;
  margin:auto;
  padding:0 40px;
  list-style:none;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  flex-wrap:wrap
}

/* item thường */
.menu-item{
  padding:14px 16px;
  font-weight:600;
  cursor:pointer;
  position:relative;
  transition:.35s cubic-bezier(.4,0,.2,1);
  text-align:center;
  color:#374151;
  border-radius:20px;
  display:flex;
  align-items:center;
  gap:8px;
  white-space:nowrap
}

.menu-item i{
  font-size:16px;
  transition:.35s;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.05))
}

.menu-item span{
  transition:.35s;
  display: inline !important; /* Đảm bảo text luôn hiển thị */
}

/* underline animation */
.menu-item::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:20px;
  background:linear-gradient(135deg, rgba(37,99,235,.1), rgba(56,189,248,.05));
  opacity:0;
  transition:.35s;
  z-index:-1
}

.menu-item:hover::after{
  opacity:1
}

.menu-item:hover{
  color:#2563eb;
  transform:translateY(-3px);
  padding:14px 20px
}

.menu-item:hover i{
  color:#2563eb;
  transform:scale(1.2) rotate(-10deg)
}

.menu-item:active{
  transform:scale(.95)
}

/* ===== TRUNG TÂM – NỔI BẬT ===== */
.menu-center{
  color:#fff;
  font-size:15px;
  font-weight:700;
  white-space:nowrap;
  padding:12px 20px;
  border-radius:30px;
  background:linear-gradient(135deg, #2563eb, #1e40af);
  box-shadow:0 8px 24px rgba(37,99,235,.35);
  transition:.35s cubic-bezier(.4,0,.2,1);
  position:relative;
  margin:0 12px;
  display:flex;
  align-items:center;
  gap:8px;
  overflow:hidden
}

.menu-center::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(120deg, transparent, rgba(255,255,255,.3), transparent);
  transform:translateX(-100%);
  transition:.6s;
}

.menu-center:hover::before{
  transform:translateX(100%)
}

.menu-center i{
  font-size:16px;
  transition:.35s;
  animation:starPulse 2s ease-in-out infinite
}

@keyframes starPulse{
  0%, 100%{transform:scale(1) rotate(0deg)}
  50%{transform:scale(1.2) rotate(20deg)}
}

.menu-center:hover{
  transform:translateY(-4px) scale(1.05);
  box-shadow:0 12px 32px rgba(37,99,235,.45)
}

.menu-center:hover i{
  animation:starSpin .6s ease-in-out
}

@keyframes starSpin{
  from{transform:scale(1) rotate(0deg)}
  to{transform:scale(1.3) rotate(360deg)}
}

.menu-center a{
  display:flex;
  align-items:center;
  gap:8px;
  color:inherit;
  text-decoration:none
}

/* ===============================
   SOCIAL FLOAT BUTTONS
================================ */
.social-float{
  position:fixed;
  bottom:30px;
  right:30px;
  display:flex;
  flex-direction:column;
  gap:14px;
  z-index:9999;
}

/* NÚT CHUNG */
.social-btn{
  display:flex;
  align-items:center;
  gap:12px;
  padding:14px 20px;
  border-radius:40px;
  color:white;
  font-weight:600;
  text-decoration:none;
  box-shadow:0 15px 35px rgba(0,0,0,.25);
  transform:translateX(100%);
  transition:transform 0.8s ease, box-shadow 0.8s ease, scale 0.8s ease;
  position:relative;
  overflow:hidden;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  will-change: transform;
}

/* ICON */
.social-btn i{
  font-size:20px;
  animation:pulse 2s infinite;
  transition: transform 0.3s;
}
.social-btn:hover i {
  transform: scale(1.2) rotate(360deg);
}

/* TEXT */
.social-btn span{
  white-space:nowrap;
}

/* ZALO */
.social-btn.zalo{
  background:linear-gradient(135deg,#00c6ff,#0072ff);
  box-shadow: 0 0 15px rgba(0, 198, 255, 0.5);
}

/* FACEBOOK */
.social-btn.fb{
  background:linear-gradient(135deg,#1877f2,#0f3d91);
  animation-delay:.2s;
  box-shadow: 0 0 15px rgba(24, 119, 242, 0.5);
}

/* HOVER */
.social-btn:hover{
  transform:translateX(0) scale(1.05);
}

/* HIỆU ỨNG SÁNG QUÉT */
.social-btn::after{
  content:"";
  position:absolute;
  top:0;
  left:-100%;
  width:100%;
  height:100%;
  background:linear-gradient(120deg,transparent,rgba(255,255,255,.5),transparent);
  transition:.6s;
}
.social-btn:hover::after{
  left:100%;
}

/* GLOW EFFECT */
.social-btn::before {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  background: inherit;
  border-radius: 42px;
  z-index: -1;
  opacity: 0;
  transition: opacity 0.8s ease;
}
.social-btn:hover::before {
  opacity: 0.8;
  filter: blur(10px);
}

/* ANIMATIONS */
@keyframes pulse{
  0%{transform:scale(1)}
  50%{transform:scale(1.15)}
  100%{transform:scale(1)}
}
/* hiệu ứng */
.product-grid:hover .product-card{
  opacity:.6;
}
.product-grid .product-card:hover{
  opacity:1;
z-index:2;
}
.product-grid:hover .product-card{
  opacity:.6;
}
.product-grid .product-card:hover{
  opacity:1;
  z-index:2;
}
.price{
  position:relative;
}
.price::after{
  content:"";
  position:absolute;
  inset:-6px;
  background:radial-gradient(circle,rgba(239,68,68,.25),transparent 70%);
  opacity:0;
  transition:.4s;
}
.product-card:hover .price::after{
  opacity:1;
}
img{
  filter:blur(8px);
  opacity:.6;
  transition:.8s ease;
}
img.loaded{
  filter:blur(0);
  opacity:1;
}
/* Xoá cặp img/img.loaded trùng lặp – giữ một cặp duy nhất để dễ bảo trì */
.menu-list li:active{
  transform:scale(.92);
}
.icon-item:hover i{
  animation:iconWiggle .4s;
}
@keyframes iconWiggle{
  0%{transform:none}
  25%{transform:rotate(-8deg)}
  50%{transform:rotate(8deg)}
  100%{transform:none}
}
.section{
  position:relative;
  overflow:hidden;
}
.section::before{
  content:"";
  position:absolute;
  inset:0;
  background:#f4f6f8;
  transform:translateX(0);
  transition:1s ease;
}
.section.show::before{
  transform:translateX(100%);
}
footer{
  animation:footerBreath 6s ease-in-out infinite;
}
@keyframes footerBreath{
  0%,100%{box-shadow:inset 0 0 0 rgba(0,0,0,0)}
  50%{box-shadow:inset 0 10px 40px rgba(255,255,255,.05)}
}

header.scrolled{
  box-shadow:0 12px 40px rgba(0,0,0,.08);
}
.hero button::after{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(circle,rgba(255,255,255,.4),transparent 60%);
  opacity:0;
  transition:.4s;
}
.hero button:hover::after{opacity:1}
.product-card img{
  transition:.6s cubic-bezier(.4,0,.2,1)
}
.product-card:hover img{
  transform:scale(1.06)
}
.product-card button:active{
  transform:scale(.96)
}

.toolbar-general{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  align-items:center;
  background:linear-gradient(135deg,#f8f9fa,#e9ecef);
  border-radius:16px;
  padding:14px;
  box-shadow:0 10px 30px rgba(0,0,0,.08);
  position:relative;
  overflow:hidden
}
.toolbar-general::before{
  content:"";
  position:absolute;
  top:0;left:-100%;
  width:100%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(37,99,235,.12),transparent);
  animation:scan 4s linear infinite
}
.general-grid.skeleton .product-card{
  position:relative;
}
.general-grid.skeleton .product-card::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,#eee,#f5f5f5,#eee);
  background-size:200% 100%;
  animation:skeleton 1.2s ease infinite
}
@keyframes skeleton{
  0%{background-position:200% 0}
  100%{background-position:-200% 0}
}
.general-grid.list-view .product-card{
  display:flex;
  align-items:center;
  gap:16px
}
.general-grid.list-view .product-card img{
  width:120px;height:120px;flex-shrink:0
}
.heart{
  position:absolute;
  top:12px;right:12px;
  width:36px;height:36px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.9);
  box-shadow:0 4px 12px rgba(0,0,0,.1);
  cursor:pointer;transition:.3s
}
.heart:hover{transform:scale(1.1);background:#ef4444;color:#fff}
.heart.active{background:#ef4444;color:#fff}
.badge{
  position:absolute;top:12px;left:12px;
  background:#ef4444;color:#fff;font-size:12px;
  padding:6px 10px;border-radius:20px;font-weight:700;
  box-shadow:0 4px 12px rgba(239,68,68,.3)
}

.product-card{
  animation:cardIn .6s ease both;
}
@keyframes cardIn{
  from{opacity:0;transform:translateY(30px)}
  to{opacity:1;transform:none}
}
.menu-list li:hover{
  letter-spacing:.3px;
}
.search-box input:focus{
  background:#fff;
}
@keyframes shake{
  0%,100%{transform:none}
  25%{transform:translateX(-6px)}
  75%{transform:translateX(6px)}
}
.auth-box.shake{
  animation:shake .3s;
}
.icon-item:hover i{
  filter:drop-shadow(0 6px 12px rgba(37,99,235,.4))
}
footer{
  box-shadow:0 -10px 40px rgba(0,0,0,.25) inset;
}
header.scrolled .main-header{
  padding:14px 60px;
  transition:.35s ease;
}
header.scrolled .logo{
  transform:scale(.9);
}
.menu-list li:hover{
  background:rgba(37,99,235,.08);
  border-radius:20px;
  backdrop-filter:blur(6px);
}
.search-box:hover{
  box-shadow:0 0 0 4px rgba(37,99,235,.15);
}
.hero button:active{
  transform:translateY(2px) scale(.96);
  box-shadow:0 4px 12px rgba(0,0,0,.25) inset;
}
.product-card{
  transform-style:preserve-3d;
}
.product-card:hover{
  transform:translateY(-12px) rotateX(4deg) rotateY(-4deg);
}

/* ===== HERO TITLE EFFECT ===== */
.hero-title {
  font-size: 52px;
  font-weight: 900;
  position: relative;
  margin-bottom: 20px;
  line-height: 1.2;
  color: #00ff00; /* Màu xanh matrix */
  font-family: 'Courier New', monospace; /* Font code-like */
}

.hero-title span {
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  border-right: 2px solid #00ff00;
  animation: typing 3s steps(20, end) forwards, blink-caret 0.75s step-end infinite;
}

@keyframes typing {
  from { width: 0; }
  to { width: 100%; }
}

@keyframes blink-caret {
  from, to { border-color: transparent; }
  50% { border-color: #00ff00; }
}

.hero-title::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(0, 255, 0, 0.1), transparent);
  animation: scanline 2s linear infinite;
  pointer-events: none;
}

@keyframes scanline {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* fitloi */
.menu-list li::after,
.menu-center::after,
.menu-center::before {
  pointer-events: none;
}
.menu-list li {
  position: relative;
  z-index: 1;
}

.menu-center {
  z-index: 5;
  pointer-events: auto;
}
.menu-center a{
  display:block;
  color:inherit;
  text-decoration:none;
}
.menu-list:hover li{opacity:.4}
.menu-list li:hover{opacity:1}
.menu-list li{
  transition:.3s;
}
.menu-list li:not(:hover){
  opacity:.7;
}
.menu-item a{
  display:flex;
  align-items:center;
  gap:8px;
  color:inherit;
  text-decoration:none;
}
/* hiệu ứng logo */
.logo-container{
  position:relative;
  display:inline-block;
  cursor:pointer;
}

.logo-glow{
  position:absolute;
  inset:-10px;
  background:radial-gradient(circle, rgba(37,99,235,.1), transparent 70%);
  border-radius:50%;
  opacity:0;
  transition:.3s ease;
}

@keyframes glowPulse{
  0%, 100%{opacity:0;transform:scale(1)}
  50%{opacity:.6;transform:scale(1.2)}
}

.logo-container:hover .logo-glow{
  opacity:1;
  transform:scale(1.1);
}

.logo{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:0;
  font-size:32px;
  font-weight:900;
  letter-spacing:-1px;
  transition:.4s cubic-bezier(.34,.1,.68,.55)
}
.logo::before{
  content:"";
  position:absolute;
  width:140%;
  height:140%;
  left:-20%;
  top:-20%;
  border-radius:50%;
  border:2px dashed rgba(37,99,235,.25);
  animation:orbit 6s linear infinite;
  transform-origin:center;
  pointer-events:none;
}
@keyframes orbit{
  from{transform:rotate(0deg)}
  to{transform:rotate(360deg)}
}
.logo::after{
  content:"";
  position:absolute;
  bottom:-6px;
  left:0;
  width:100%;
  height:2px;
  background:linear-gradient(90deg,#2563eb,transparent);
  opacity:0;
  transform:translateX(-30%);
  transition:.4s;
}
.logo:hover::after{
  opacity:1;
  transform:translateX(0);
}
.logo-icon{
  transition:.6s;
  filter:drop-shadow(0 6px 12px rgba(37,99,235,.35))
}
.logo-container:hover .logo-icon{
  transform:rotate(20deg) scale(1.1);
}
.logo-dien{
  animation:flicker 5s ease-in-out infinite;
  text-shadow:0 0 8px rgba(96,165,250,.5);
}
@keyframes flicker{
  0%, 100%{opacity:1; text-shadow:0 0 8px rgba(96,165,250,.5)}
  10%{opacity:.96}
  20%{opacity:.98}
  30%{opacity:.94}
  40%{opacity:1}
  50%{opacity:.97}
}
.logo-electric{
  position:absolute;
  inset:-10px;
  pointer-events:none;
}
.logo-container::before{
  content:"";
  position:absolute;
  width:10px;height:10px;
  background:#60a5fa;
  border-radius:50%;
  top:10%;
  left:10%;
  opacity:0;
}
.logo-container:hover::before{
  animation:electricBurst .6s ease-out forwards
}
@keyframes electricBurst{
  0%{opacity:1;transform:scale(1) rotate(0deg)}
  100%{opacity:0;transform:scale(2.2) rotate(180deg)}
}

.logo-do{
  background:linear-gradient(135deg, #0f172a, #1e3a8a);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  font-weight:900
}

.logo-dien{
  background:linear-gradient(135deg, #2563eb, #60a5fa);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  font-weight:900;
  animation:colorShift 4s ease-in-out infinite;
}

@keyframes colorShift{
  0%, 100%{filter:hue-rotate(0deg)}
  50%{filter:hue-rotate(20deg)}
}

.logo-tu{
  background:linear-gradient(135deg, #38bdf8, #06b6d4);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  font-weight:900;
  animation:colorGlow 3s ease-in-out infinite;
}

@keyframes colorGlow{
  0%, 100%{text-shadow:0 0 10px rgba(56,189,248,.4)}
  50%{text-shadow:0 0 20px rgba(56,189,248,.8), 0 0 30px rgba(37,99,235,.5)}
}

.logo-icon{
  font-size:24px;
  margin-left:6px;
  color:#2563eb;
  animation:chipSpin 3s linear infinite;
}

@keyframes chipSpin{
  0%{transform:rotate(0deg) scale(1)}
  25%{transform:rotate(90deg) scale(1.1)}
  50%{transform:rotate(180deg) scale(1)}
  75%{transform:rotate(270deg) scale(1.1)}
  100%{transform:rotate(360deg) scale(1)}
}

.logo-container:hover .logo-icon{
  animation:chipSpinFast .8s linear infinite;
  filter:drop-shadow(0 0 8px rgba(37,99,235,.8))
}

@keyframes chipSpinFast{
  0%{transform:rotate(0deg) scale(1.2)}
  100%{transform:rotate(360deg) scale(1.2)}
}

.logo-container:hover .logo{
  transform:translateY(-3px);
  filter:drop-shadow(0 8px 20px rgba(37,99,235,.4))
}

.logo-container:hover .logo-do{
  animation:letterBounce .6s cubic-bezier(.68,.55,.265,.55)
}

@keyframes letterBounce{
  0%, 100%{transform:translateY(0)}
  50%{transform:translateY(-4px)}
}

.logo-container:hover .logo-dien{
  animation:letterBounce .6s cubic-bezier(.68,.55,.265,.55) .1s
}

.logo-container:hover .logo-tu{
  animation:letterBounce .6s cubic-bezier(.68,.55,.265,.55) .2s
}

.logo-container::before{
  content:"⚡";
  position:absolute;
  top:-8px;
  right:-8px;
  font-size:14px;
  opacity:0;
  transform:scale(0);
  transition:.4s;
  animation:electricPulse 2s ease-in-out infinite;
}

@keyframes electricPulse{
  0%{opacity:0;transform:scale(0) rotate(0deg)}
  50%{opacity:1;transform:scale(1) rotate(45deg)}
  100%{opacity:0;transform:scale(0) rotate(90deg)}
}

.logo-container:hover::before{
  animation:electricBurst .6s ease-out forwards
}

@keyframes electricBurst{
  0%{opacity:1;transform:scale(1) rotate(0deg)}
  100%{opacity:0;transform:scale(2) rotate(180deg)}
}

.top-bar{
  display:none;
}
.main-header{
  padding:22px 60px;
}
header{
  position:sticky;
  top:0;
  z-index:3000;
}


/* Phone.html */
.product-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
}

.product-card {
  border: 1px solid #ddd;
  padding: 15px;
  text-align: center;
}

/* List view styles */
.product-grid.list-view {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.product-grid.list-view .product-card {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 20px;
}

.product-grid.list-view .product-card img {
  width: 120px;
  height: 120px;
  flex-shrink: 0;
}

.product-grid.list-view .product-card h3 {
  margin: 0;
  flex: 1;
}

.product-grid.list-view .product-card .price {
  font-size: 20px;
  margin: 0 20px;
}

.product-grid.list-view .product-card button {
  flex-shrink: 0;
  width: 150px;
}

/* Toast styles */
.toast {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background: #333;
  color: #fff;
  padding: 12px 20px;
  border-radius: 8px;
  z-index: 10000;
  transform: translateY(100px);
  opacity: 0;
  transition: all 0.3s;
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

.toast.show {
  transform: translateY(0);
  opacity: 1;
}

.toast.success {
  background: linear-gradient(45deg, #10b981, #059669);
}

.toast.error {
  background: linear-gradient(45deg, #ef4444, #dc2626);
}

.toast.info {
  background: linear-gradient(45deg, #3b82f6, #2563eb);
}

/* Enhanced search container */
.search-container {
  position: relative;
  flex: 1;
  max-width: 300px;
}

.search-container i {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #2563eb;
  z-index: 1;
  pointer-events: none;
}

.search-container input {
  padding-left: 40px;
  width: 100%;
}

/* Smooth scrolling */
html {
  scroll-behavior: smooth;
}

/* Additional animations from pphone */
@keyframes slideUp {
  from { transform: translateY(30px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

@keyframes zoomIn {
  from { transform: scale(0); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

@keyframes liquidFloat {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  33% { transform: translateY(-10px) rotate(120deg); }
  66% { transform: translateY(5px) rotate(240deg); }
}

@keyframes typewriter {
  from { width: 0; }
  to { width: 100%; }
}

@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

/* ===== CÁC HIỆU ỨNG TỪ PPHONE ===== */

/* Toolbar styles */
.toolbar {
  display: flex;
  gap: 15px;
  flex-wrap: wrap;
  margin: 20px 0;
  padding: 20px;
  background: linear-gradient(135deg, #f8f9fa, #e9ecef);
  border-radius: 15px;
  box-shadow: 0 4px 20px rgba(0,0,0,.08);
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.8);
  backdrop-filter: blur(10px);
}

.toolbar::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(37, 99, 235, 0.1), transparent);
  animation: toolbarShine 4s infinite;
}

@keyframes toolbarShine {
  0% { left: -100%; }
  100% { left: 100%; }
}

.toolbar input, .toolbar select, .toolbar button {
  background: #fff;
  border: 2px solid #e1e5e9;
  border-radius: 25px;
  padding: 10px 16px;
  font-size: 14px;
  transition: all 0.3s ease;
  outline: none;
  position: relative;
  overflow: hidden;
}

.toolbar input:focus, .toolbar select:focus, .toolbar button:focus {
  transform: scale(1.02);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .2);
  border-color: #2563eb;
}

.toolbar input:hover, .toolbar select:hover, .toolbar button:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,.1);
}

.toolbar button {
  background: linear-gradient(45deg, #2563eb, #1d4ed8);
  color: #fff;
  border: none;
  cursor: pointer;
  font-weight: 600;
}

.toolbar button:hover {
  background: linear-gradient(45deg, #1d4ed8, #1e40af);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(37, 99, 235, .4);
}

.toolbar .filter-btn {
  background: #fff;
  color: #333;
  border: 2px solid #e1e5e9;
}

.toolbar .filter-btn.active {
  background: linear-gradient(45deg, #10b981, #059669);
  color: #fff;
  border-color: #10b981;
  transform: scale(1.05);
}

.toolbar .reset-btn {
  background: linear-gradient(45deg, #ef4444, #dc2626);
  color: #fff;
}

.toolbar .reset-btn:hover {
  background: linear-gradient(45deg, #dc2626, #b91c1c);
}

.toolbar i {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #2563eb;
  z-index: 1;
  pointer-events: none;
}

.toolbar input {
  padding-left: 40px;
}

.toolbar select {
  padding-left: 40px;
}

.toolbar .shine {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(45deg, transparent, rgba(37, 99, 235, 0.1), transparent);
  transform: translateX(-100%);
  transition: 1s;
}

.toolbar:hover .shine {
  transform: translateX(100%);
}

/* Product card enhancements */
.product-card {
  position: relative;
  background: #fff;
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
  transition: all 0.3s ease;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.2);
}

.product-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 32px rgba(0,0,0,.15);
}

.product-card img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 12px;
  transition: transform 0.3s;
}

.product-card:hover img {
  transform: scale(1.05);
}

.product-card .badge {
  position: absolute;
  top: 12px;
  left: 12px;
  background: #ef4444;
  color: #fff;
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 20px;
  font-weight: 700;
  box-shadow: 0 4px 12px rgba(239, 68, 68, .3);
}

.product-card .heart {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,.9);
  box-shadow: 0 4px 12px rgba(0,0,0,.1);
  cursor: pointer;
  transition: 0.3s;
}

.product-card .heart:hover {
  transform: scale(1.1);
  background: #ef4444;
  color: #fff;
}

.product-card .heart.active {
  background: #ef4444;
  color: #fff;
}

.product-card h3 {
  font-size: 16px;
  font-weight: 600;
  margin: 8px 0;
  flex: 1;
}

.product-card .price {
  color: #ef4444;
  font-weight: 800;
  font-size: 18px;
  margin-bottom: 12px;
}

.product-card button {
  width: 100%;
  padding: 12px;
  border: none;
  border-radius: 12px;
  background: linear-gradient(45deg, #2563eb, #1d4ed8);
  color: #fff;
  cursor: pointer;
  font-weight: 700;
  position: relative;
  overflow: hidden;
  transition: 0.3s;
}

.product-card button:hover {
  background: linear-gradient(45deg, #1d4ed8, #1e40af);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(37, 99, 235, .4);
}

.product-card button::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,.3), transparent);
  transform: translateX(-120%);
  transition: 0.5s;
}

.product-card button:hover::after {
  transform: translateX(120%);
}

/* Animations */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.6s ease;
}

.reveal.show {
  opacity: 1;
  transform: translateY(0);
}

.magnetic {
  cursor: pointer;
  transition: transform 0.3s ease;
}

.magnetic:hover {
  transform: scale(1.1) rotate(5deg);
}

/* Section tools */
.section-tools{
  display:flex;
  gap:12px;
  justify-content:flex-end;
  align-items:center;
  margin:10px 0 14px;
  background:linear-gradient(135deg,#f8fafc,#eef2ff);
  padding:8px 12px;
  border-radius:12px;
  box-shadow:0 4px 12px rgba(0,0,0,.06);
}
.view-toggle{
  display:flex;
  gap:8px;
  background:#eef2ff;
  padding:6px;
  border-radius:10px;
}
.view-toggle button{
  padding:8px 12px;
  border:none;
  border-radius:8px;
  background:transparent;
  color:#1e3a8a;
  cursor:pointer;
  font-weight:700;
}
.view-toggle button.active{
  background:#2563eb;
  color:#fff;
  box-shadow:0 4px 12px rgba(37,99,235,.35);
}
.sort-select{
  padding:10px 12px;
  border-radius:10px;
  border:1px solid #e5e7eb;
  background:#fff;
}

/* Scroll progress */
#scrollProgress{
  position:fixed;
  top:0;
  left:0;
  height:4px;
  width:0;
  background:linear-gradient(90deg,#2563eb,#60a5fa);
  z-index:10000;
  box-shadow:0 2px 8px rgba(37,99,235,.4);
}

/* Back to top */
.back-to-top{
  position:fixed;
  right:20px;
  bottom:20px;
  width:44px;
  height:44px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  border:none;
  background:linear-gradient(135deg,#1e40af,#2563eb);
  color:#fff;
  cursor:pointer;
  box-shadow:0 8px 20px rgba(37,99,235,.35);
  transform:translateY(120%);
  opacity:0;
  transition:.3s;
  z-index:10000;
}
.back-to-top.show{
  transform:translateY(0);
  opacity:1;
}

.hero-title{
  font-size:52px;
  font-weight:900;
  position:relative;
  margin-bottom:20px;
  line-height:1.2;
  color:#00ff00;
  font-family:'Courier New', monospace
}
.hero-title span{
  display:inline-block;
  overflow:hidden;
  white-space:nowrap;
  border-right:2px solid #00ff00;
  animation:typing 3s steps(20,end) forwards, blink-caret .75s step-end infinite
}
@keyframes typing{from{width:0}to{width:100%}}
@keyframes blink-caret{from,to{border-color:transparent}50%{border-color:#00ff00}}
.hero-title::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:linear-gradient(90deg,transparent,rgba(0,255,0,.1),transparent);
  animation:scanline 2s linear infinite;
  pointer-events:none
}
@keyframes scanline{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}

.menu-center:hover{transform:translateY(-4px) scale(1.05);box-shadow:0 12px 32px rgba(37,99,235,.45)}
.menu-center:hover i{animation:starSpin .6s ease-in-out}
@keyframes starSpin{from{transform:scale(1) rotate(0)}to{transform:scale(1.3) rotate(360deg)}}

.icon-item:hover i{animation:iconWiggle .4s}
@keyframes iconWiggle{0%{transform:none}25%{transform:rotate(-8deg)}50%{transform:rotate(8deg)}100%{transform:none}}

header.scrolled{box-shadow:0 12px 40px rgba(0,0,0,.08)}
header.scrolled .main-header{padding:14px 60px;transition:.35s ease}
header.scrolled .logo{transform:scale(.9)}

.section{position:relative;overflow:hidden}
.section::before{content:"";position:absolute;inset:0;background:#f4f6f8;transform:translateX(0);transition:1s ease}
.section.show::before{transform:translateX(100%)}

.product-card{transform-style:preserve-3d}
.product-card:hover{transform:translateY(-12px) rotateX(4deg) rotateY(-4deg)}

.hero img{filter:blur(8px);opacity:.6;transition:.8s ease}
.hero img.loaded{filter:blur(0);opacity:1}
.product-card img{filter:blur(8px);opacity:.6}
.product-card img.loaded{filter:blur(0);opacity:1}
.ripple {
  position: relative;
  overflow: hidden;
}

.ripple::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255,255,255,0.6);
  transform: translate(-50%, -50%);
  transition: width 0.6s, height 0.6s;
}

.ripple:active::after {
  width: 300px;
  height: 300px;
  opacity: 0;
}

@keyframes rippleEffect {
  0% { transform: scale(0); opacity: 1; }
  100% { transform: scale(4); opacity: 0; }
}

.toast {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background: #333;
  color: #fff;
  padding: 12px 20px;
  border-radius: 8px;
  z-index: 10000;
  transform: translateY(100px);
  opacity: 0;
  transition: all 0.3s;
}

.toast.show {
  transform: translateY(0);
  opacity: 1;
}

.confetti-piece {
  position: absolute;
  width: 10px;
  height: 10px;
  pointer-events: none;
  animation: fall 3s linear forwards;
}

@keyframes fall {
  0% { transform: translateY(-100vh) rotate(0deg); opacity: 1; }
  100% { transform: translateY(100vh) rotate(720deg); opacity: 0; }
}

/* Enhanced sections */
.section {
  padding: 60px 0;
  background: linear-gradient(145deg, #ffffff, #f0f0f0);
  margin: 40px 0;
  border-radius: 20px;
  box-shadow: inset 0 2px 8px rgba(0,0,0,.06);
  animation: sectionFade 1s ease-out;
}

@keyframes sectionFade {
  from { opacity: 0; transform: scale(0.9); }
  to { opacity: 1; transform: scale(1); }
}

/* Stats enhancement */
.hero-stats {
  display: flex;
  justify-content: center;
  gap: 40px;
  margin: 30px 0;
}

.stat-item {
  text-align: center;
  padding: 20px;
  background: rgba(255,255,255,0.9);
  border-radius: 15px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.1);
  transition: transform 0.3s ease;
}

.stat-item:hover {
  transform: translateY(-5px);
}

.stat-number {
  display: block;
  font-size: 2.5em;
  font-weight: 800;
  color: #2563eb;
  margin-bottom: 5px;
}

.stat-label {
  font-size: 0.9em;
  color: #666;
  font-weight: 500;
}

/* Enhanced buttons */
button {
  position: relative;
  overflow: hidden;
}

button::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
  transition: left 0.5s;
}

button:hover::before {
  left: 100%;
}

/* ===== ENHANCED RESPONSIVE DESIGN ===== */

/* Mobile First Approach */
@media (max-width: 768px) {
  .top-bar {
    padding: 8px 20px;
    font-size: 12px;
  }

  .main-header {
    padding: 20px 20px;
    grid-template-columns: 1fr;
    gap: 20px;
    text-align: center;
  }

  .logo {
    font-size: 28px;
  }

  .search-box {
    max-width: 100%;
    margin: 0 auto;
  }

  .icon-area {
    gap: 20px;
    justify-content: center;
  }

  .menu {
    padding: 0 10px;
  }

  .menu-list {
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
  }

  .menu-item {
    flex: 1;
    min-width: 120px;
    text-align: center;
  }

  .hero {
    padding: 40px 20px;
    flex-direction: column;
    text-align: center;
  }

  .hero img {
    width: 100%;
    max-width: 300px;
    margin-top: 30px;
  }

  .hero-title {
    font-size: 2.5em !important;
  }

  .hero-stats {
    flex-direction: column;
    gap: 20px;
  }

  .hero-features {
    flex-direction: column;
    gap: 15px;
  }

  .section {
    padding: 40px 20px;
  }

  .product-grid {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
  }

  .toolbar {
    flex-direction: column;
    gap: 15px;
    padding: 20px;
  }

  .search-container {
    width: 100%;
  }

  .social-float {
    bottom: 20px;
    right: 15px;
  }

  .social-btn {
    width: 50px;
    height: 50px;
    font-size: 18px;
  }

  .social-btn span {
    display: none;
  }
}

@media (max-width: 480px) {
  .logo {
    font-size: 24px;
  }

  .hero-title {
    font-size: 2em !important;
  }

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

  .menu-item {
    min-width: 100px;
  }

  .icon-item span {
    display: none;
  }

  .icon-item i {
    font-size: 24px;
  }
}

/* ===== NEW ANIMATIONS & EFFECTS ===== */

/* 1. Smooth Scroll Enhancement */
html {
  scroll-behavior: smooth;
}

/* 2. Loading Animation */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.section {
  animation: fadeInUp 0.8s ease-out;
}

/* 3. Hover Glow Effect */
.product-card {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.product-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(37, 99, 235, 0.1), transparent);
  transition: left 0.5s;
}

.product-card:hover::before {
  left: 100%;
}

/* 4. Button Pulse Animation */
@keyframes pulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}

.product-card button:hover {
  animation: pulse 0.6s ease-in-out;
}

/* 5. Stagger Animation for Product Cards */
.product-grid .product-card:nth-child(1) { animation-delay: 0.1s; }
.product-grid .product-card:nth-child(2) { animation-delay: 0.2s; }
.product-grid .product-card:nth-child(3) { animation-delay: 0.3s; }
.product-grid .product-card:nth-child(4) { animation-delay: 0.4s; }
.product-grid .product-card:nth-child(5) { animation-delay: 0.5s; }

/* 6. Logo Breathing Effect */
@keyframes breathe {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}

.logo-container:hover .logo {
  animation: breathe 2s ease-in-out infinite;
}

/* 7. Menu Item Hover Effect */
.menu-item {
  transition: all 0.3s ease;
  position: relative;
}

.menu-item::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 2px;
  background: #2563eb;
  transition: all 0.3s ease;
  transform: translateX(-50%);
}

.menu-item:hover::after {
  width: 80%;
}

/* 8. Search Box Focus Effect */
.search-box input:focus {
  transform: scale(1.02);
  box-shadow: 0 0 20px rgba(37, 99, 235, 0.2);
}

/* 9. Floating Animation for Icons */
@keyframes float {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-10px);
  }
}

.icon-item i {
  transition: all 0.3s ease;
}

.icon-item:hover i {
  animation: float 1s ease-in-out infinite;
  color: #2563eb;
}

/* 10. Clearance Items Special Effect */
.clearance-item {
  position: relative;
  border: 2px solid #ef4444;
}

.clearance-item::after {
  content: 'SALE';
  position: absolute;
  top: 10px;
  right: 10px;
  background: #ef4444;
  color: white;
  padding: 5px 10px;
  border-radius: 15px;
  font-size: 12px;
  font-weight: bold;
}

.discount-badge {
  background: #ef4444 !important;
  color: white !important;
  position: absolute !important;
  top: 10px !important;
  left: 10px !important;
  padding: 5px 10px !important;
  border-radius: 15px !important;
  font-size: 12px !important;
  font-weight: bold !important;
  z-index: 10 !important;
}

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

/* ===== PERFORMANCE OPTIMIZATIONS ===== */

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Optimize for touch devices */
@media (hover: none) and (pointer: coarse) {
  .product-card:hover {
    transform: none;
  }

  .menu-item:hover::after {
    width: 0;
  }

  /* Đảm bảo menu text luôn hiển thị trên touch devices */
  .menu-item span {
    display: inline !important;
    opacity: 1 !important;
  }

  /* Touch-friendly menu items */
  .menu-item {
    min-height: 44px; /* iOS touch target minimum */
    display: flex;
    align-items: center;
  }

  .menu-item a {
    padding: 12px 16px;
    width: 100%;
  }
}

/* ===== ADDITIONAL RESPONSIVE FIXES ===== */

@media (min-width: 769px) {
  .hero {
    min-height: 80vh;
  }

  .product-grid {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  }
}

@media (min-width: 1200px) {
  .main-header {
    padding: 26px 100px;
  }

  .top-bar {
    padding: 6px 100px;
  }

  .section {
    padding: 80px 100px;
  }
}

/* ===== ACCESSIBILITY IMPROVEMENTS ===== */

@media (max-width: 768px) {
  .menu-item a {
    padding: 12px 8px;
  }

  .icon-item {
    min-width: 60px;
  }
}

/* Focus states for keyboard navigation */
.product-card button:focus,
.search-box input:focus,
.search-box button:focus {
  outline: 2px solid #2563eb;
  outline-offset: 2px;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .product-card {
    border: 2px solid #000;
  }

@media (max-width: 640px) {
  html, body { overflow-x: hidden; }
  .top-bar { padding: 6px 16px; }
  .main-header { padding: 14px 16px; grid-template-columns: 1fr; gap: 16px; }
  .logo { font-size: 28px; }
  .icon-area { gap: 16px; justify-content: space-between; }
  .menu { top: 0; }
  .menu-list { padding: 0 12px; gap: 6px; }
  .menu-item { padding: 10px 12px; }
  .cart-box { width: 94vw; max-height: 80vh; }
  .product-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
}

  .menu-item:hover {
    background: #000;
    color: #fff;
  }
}