:root{
  --main-color:#2b7cff;
  --zalo:#028fe3;
  --messenger:#0084ff;
  --phone:#4caf50;
}

*{box-sizing:border-box}

body{
margin:0;
font-family:"Segoe UI",Arial,sans-serif;
background:#eef2f7;
color:#333;
line-height:1.6
}

/* ================= HEADER ================= */
.main-header{
  background:var(--main-color);
  color:white;
  box-shadow:0 3px 10px rgba(0,0,0,.15);
  position:sticky;
  top:0;
  z-index:1000;
}

.header-inner{
  width:100%;
  margin:0;
  padding:14px 24px;
  display:flex;
  align-items:center;
  gap:16px;
}


.header-inner img{
  height:72px;
}


.header-text h1{
  margin:0;
  font-size:22px;
}

.header-text p{
  margin:2px 0 0;
  font-size:13px;
  opacity:.9;
}

/* ================= HERO ================= */
.hero{
  background:linear-gradient(135deg,var(--main-color),#00c6ff);
  color:white;
  padding:10px 20px 25px;
  text-align:center
}

.hero h2{
  font-size:34px;
  margin-top:0;
  margin-bottom:8px;
}

.hero p{
  font-size:17px;
  max-width:720px;
  margin:0 auto 16px;
  opacity:.95
}

.hero a{
  display:inline-block;
  background:white;
  color:var(--main-color);
  padding:12px 30px;
  border-radius:30px;
  text-decoration:none;
  font-weight:bold;
  box-shadow:0 4px 10px rgba(0,0,0,.2);
  transition:.2s;
}

.hero a:hover{
  transform:translateY(-2px);
  box-shadow:0 6px 14px rgba(0,0,0,.25);
}


/* ================= SECTION ================= */
.section{
padding:24px 20px;
max-width:1200px;
margin:20px auto;

background:white;
border-radius:16px;

border:1px solid rgba(0,0,0,.05);

box-shadow:0 6px 20px rgba(0,0,0,.06);
}

.section + .section{
  margin-top:30px;
}

.section{
  opacity:0;
  transform:translateY(20px);
  animation:fadeUp .6s ease forwards;
}

@keyframes fadeUp{
  to{
    opacity:1;
    transform:translateY(0);
  }
}


/* ===== BLOCK TITLE NEW (PRO STYLE) ===== */
.block-title{
  margin-bottom:20px;
}

/* dòng chính */
.title-main{
  display:flex;
  align-items:center;
  gap:12px;
}

/* label */
.title-label{
  display:inline-flex;
  align-items:center;
  gap:6px;

  background:#ff6a00;
  color:white;

  padding:8px 16px;

  font-weight:700;
  font-size:15px;

  border-radius:4px;
}

/* icon */
.title-icon{
  font-size:16px;
}

/* line kéo dài */
.title-line{
  flex:1;
  height:2px;
  background:#eee;
}

/* mô tả */
.title-desc{
  margin-top:8px;
  font-size:14px;
  color:#666;
}

/* ===== MÀU THEO SECTION ===== */
.block-title.combo .title-label{
  background:#ff6a00;
}

.block-title.bo1 .title-label{
  background:#007bff;
}

.block-title.bo2 .title-label{
  background:#8e44ad;
}

.block-title.bo3 .title-label{
  background:#27ae60;
}

.block-title.new .title-label{
  background:#e74c3c;
}

/* ================= FEATURES ================= */
.features{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
gap:16px;
margin-top:10px;
}

.feature{
background:white;
padding:20px;
border-radius:14px;
box-shadow:0 4px 12px rgba(0,0,0,.08);
text-align:center;
font-weight:500
}

/* ================= PRODUCTS ================= */
.products{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(220px,260px));
justify-content:center;
max-width:1200px;
margin:auto;
gap:24px;
}

.product{
background:white;
border-radius:16px;
overflow:hidden;
box-shadow:0 6px 18px rgba(0,0,0,.08);
display:flex;
flex-direction:column;
transition:transform .25s ease, box-shadow .25s ease;
position:relative;
}

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

.product img{
  width:100%;
  height:auto;
  object-fit:contain;
  background:none;
  padding:0;
  display:block;
  transition:transform .3s ease;
}

.product:hover img{
  transform:scale(1.06);
}


.product-content{
  padding:2px 10px 10px;
  margin-top:-6px;
  flex:1;
  display:flex;
  flex-direction:column
}



.product-content h3{margin-bottom:4px}

.product-content p{
font-size:14px;
color:#555;
margin-top:0;
flex:1
}

.product-actions{
display:flex;
gap:8px;
flex-wrap:wrap;
}

.product-content a,
.btn-cart{
background:var(--main-color);
color:white;
padding:8px 14px;
border-radius:20px;
text-decoration:none;
font-size:14px;
border:none;
cursor:pointer;
}

.btn-cart{
  background:linear-gradient(135deg,#ff3b3b,#ff9800);
  transition:transform .2s ease, box-shadow .2s ease;
}

.btn-cart:hover{
  transform:translateY(-2px);
  box-shadow:0 6px 14px rgba(0,0,0,.25);
}

/* ================= PRICE (GIỮ NGUYÊN NHƯ CŨ) ================= */
.price-sale{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin:4px 0 10px;
}

.price-sale .old{
  color:#aaa;
  font-size:13px;
  text-decoration:line-through;
}

.price-sale .new{
  color:#555;
  font-size:16px;
  font-weight:600;
}

.price-sale .percent{
  background:#ff3b3b;
  color:white;
  font-size:12px;
  padding:2px 6px;
  border-radius:6px;
  line-height:1;
}

/* ===== RIBBON GÓC PHẢI (FIX NHỎ GỌN) ===== */

/* khung ribbon */
.badge-ribbon{
  position:absolute;
  top:0;
  right:0;
  width:65px;
  height:65px;
  pointer-events:none;
}

/* tam giác */
.badge-ribbon::before{
  content:"";
  position:absolute;
  top:0;
  right:0;

  border-top:65px solid #e53935;
  border-left:65px solid transparent;
}

/* text */
.badge-ribbon::after{
  content:attr(data-text);
  position:absolute;

  top:14px;
  right:-20px;

  transform:rotate(45deg);

  color:white;
  font-size:10px;
  font-weight:700;

  width:90px;
  text-align:center;
}

.badge-ribbon[data-text="Bán chạy"]::before{
  border-top-color:#e53935;
}

.badge-ribbon[data-text="Hot"]::before{
  border-top-color:#ff9800;
}

.badge-ribbon[data-text="NEW"]::before{
  border-top-color:#2ecc71;
}

.badge-ribbon[data-text="Best"]::before{
  border-top-color:#9c27b0;
}

.badge-ribbon[data-text="Tiết kiệm"]::before{
  border-top-color:#2196f3;
}
/* ================= SEARCH ================= */
.search-box{
max-width:420px;
margin:15px auto 5px;
}

.search-box input{
  width:100%;
  padding:10px 14px;
  border-radius:20px;
  border:1px solid #ccc;
  font-size:15px;
}

/* ================= QUICK CONTACT ================= */
.quick-contact{
position:fixed;
right:20px;
bottom:100px;
display:flex;
flex-direction:column;
gap:12px;
z-index:998;
}

.qc-btn{
width:52px;
height:52px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
position:relative;
animation:shake 3s infinite;
box-shadow:0 4px 12px rgba(0,0,0,.25);
}

.qc-btn img{width:28px;height:28px}

/* colors */
.phone{background:var(--phone)}
.zalo{background:var(--zalo)}
.messenger{background:var(--messenger)}
.backtop{
  background:#ff9800;
  color:white;
  font-size:22px;
  font-weight:bold;
  opacity:0;
  pointer-events:none;
  transition:opacity .3s ease, transform .3s ease;
  transform:translateY(10px);
  cursor:pointer;
}

.backtop.show{
  opacity:1;
  pointer-events:auto;
  transform:translateY(0);
}

.qc-btn::after{
content:attr(data-tooltip);
position:absolute;
right:60px;
background:#333;
color:white;
padding:4px 8px;
font-size:13px;
border-radius:6px;
white-space:nowrap;
opacity:0;
transition:.2s;
}

.qc-btn:hover::after{opacity:1}

@media (hover: none){
  .qc-btn::after{display:none !important;}
}

@keyframes shake{
0%,90%,100%{transform:translateX(0)}
92%{transform:translateX(-3px)}
94%{transform:translateX(3px)}
96%{transform:translateX(-3px)}
98%{transform:translateX(3px)}
}

/* ================= CART ICON ================= */
#cart-box{
position:fixed;
right:20px;
bottom:20px;
background:white;
width:60px;
height:60px;
box-shadow:0 4px 12px rgba(0,0,0,.2);
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
cursor:pointer;
z-index:999;
}

#cart-count{
position:absolute;
top:-6px;
right:-6px;
background:red;
color:white;
font-size:12px;
width:20px;
height:20px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
}

/* ================= CART FULL ================= */
#cart-box-full-inner{
  position:fixed;
  right:20px;
  bottom:20px;
  background:white;
  width:320px;
  box-shadow:0 4px 12px rgba(0,0,0,.2);
  border-radius:12px;
  padding:12px;
  z-index:999;
  font-size:14px;

  transform:translateX(120%);
  transition:transform .35s ease;
}

#cart-box-full.show #cart-box-full-inner{
  transform:translateX(0);
}

#cart-header{
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:6px;
}

#cart-items{
list-style:none;
padding:0;
margin:0 0 10px;
max-height:200px;
overflow:auto;
}

#cart-items li{
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:4px;
}

.cart-buttons{
display:flex;
gap:6px;
}

.cart-buttons button{
flex:1;
background:var(--main-color);
color:white;
border:none;
border-radius:6px;
padding:6px;
cursor:pointer;
}

/* ================= POPUP QR ================= */
#pay-modal{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.4);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display:none;
  justify-content:center;
  align-items:center;
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
  z-index:9999;
}

#pay-content{
  margin-top:20px;
}

#pay-content img{
width:100%;
max-width:280px;
margin-bottom:10px;
}

.pay-amount{
font-size:22px;
font-weight:bold;
color:#e60000;
margin:12px 0 6px;
}

.pay-guide{
font-size:15px;
line-height:1.6;
margin-bottom:10px;
}

.download-qr{
display:inline-block;
margin:6px 0 12px;
font-size:14px;
color:var(--main-color);
text-decoration:none;
font-weight:600;
}

#pay-content > button{
  margin-top:10px;
  background:var(--main-color);
  color:white;
  border:none;
  border-radius:6px;
  padding:8px 16px;
  cursor:pointer;
}

/* ================= FOOTER ================= */
.site-footer{
  background:#0f172a;
  color:#ccc;
  text-align:center;
  padding:30px 15px;
  font-size:14px
}
.site-footer b{color:white}


/* SOCIAL PROOF POPUP */

#purchase-popup{
position:fixed;
left:20px;
bottom:90px;
z-index:9999;
opacity:0;
transform:translateY(30px);
transition:all .4s ease;
pointer-events:none;
}

#purchase-popup.show{
opacity:1;
transform:translateY(0);
}

.social-box{
background:white;
border-radius:14px;
box-shadow:0 12px 30px rgba(0,0,0,.25);
padding:12px 14px;
display:flex;
gap:10px;
align-items:flex-start;
max-width:260px;
font-size:14px;
}

.social-icon{
font-size:20px;
}

.social-text b{
color:#2b7cff;
}

.social-time{
font-size:12px;
color:#777;
}


/* VIEWER COUNTER */

.viewer-counter{
margin:6px 0 10px;
font-size:13px;
line-height:1.4;
}

.viewer-line{
display:flex;
align-items:center;
gap:6px;
color:#555;
}

.viewer-line span{
font-weight:600;
color:#e53935;
}

/* ================= TOAST PRO ================= */

#toast{
  position:fixed;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%) scale(.85);
  min-width:220px;
  max-width:90vw;
  padding:16px 22px;
  border-radius:16px;
  color:white;
  font-size:15px;
  font-weight:600;
  text-align:center;
  opacity:0;
  z-index:999999;
  pointer-events:none;
  transition:.25s;
  box-shadow:0 12px 30px rgba(0,0,0,.35);
}

#toast.show{
  opacity:1;
  transform:translate(-50%,-50%) scale(1);
}

/* type colors */

#toast.success{ background:linear-gradient(135deg,#2e7d32,#43a047); }
#toast.error{ background:linear-gradient(135deg,#c62828,#ef5350); }
#toast.warn{ background:linear-gradient(135deg,#ef6c00,#ffa726); }

/* icon */

.toast-icon{
  font-size:22px;
  display:block;
  margin-bottom:6px;
  animation:toastPop .25s ease;
}

@keyframes toastPop{
  from{transform:scale(.6);opacity:.2}
  to{transform:scale(1);opacity:1}
}



#cart-box{
  display:flex;
  gap:6px;
  align-items:center;
  padding:0 14px;
  border-radius:30px;
  width:auto;
  height:46px;
}

.cart-icon{
  font-size:18px;
}

#cart-total-mini{
  font-size:14px;
  font-weight:bold;
}

#cart-count{
  background:red;
  color:white;
  min-width:18px;
  height:18px;
  border-radius:50%;
  font-size:12px;
  display:flex;
  align-items:center;
  justify-content:center;
}

#cart-box-full-inner{
  width:320px;
}

#cart-items li{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:6px;
}

.cart-item-name{
  flex:1;
  font-size:13px;
}


.cart-price{
  color:#555;
  font-weight:600;
}


.cart-sum{
  text-align:right;
  font-weight:bold;
  margin:10px 0;
}

.pay-btn{
  width:100%;
  background:#ff3b3b;
  color:white;
  border:none;
  border-radius:8px;
  padding:10px;
  font-size:15px;
  cursor:pointer;
}

.cart-remove{
  width:28px;
  height:28px;
  border-radius:50%;
  border:1px solid #ccc;
  background:#f2f2f2;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  font-size:15px;
  color:#555;
}

.cart-remove:hover{
  background:#e0e0e0;
  color:#333;
}

/* ================= FOOTER LINKS ================= */
.footer-links{
  display:flex;
  justify-content:center;
  gap:20px;
  margin-bottom:10px;
  flex-wrap:wrap;
}

.footer-links a{
  color:#ccc;
  text-decoration:none;
  font-size:14px;
}

.footer-links a:hover{
  color:white;
}


.header-inner{
  display:flex;
  justify-content:space-between;
  align-items:center;
}

.header-left{
  display:flex;
  align-items:center;
  gap:12px;
}

.logo-link img{
  height:72px;
}

.header-nav{
  display:flex;
  gap:20px;
}

.header-nav a{
  color:white;
  text-decoration:none;
  font-weight:600;
  padding:6px 12px;
  border-radius:8px;
}

.header-nav a:hover{
  background:rgba(255,255,255,.2);
}

.header-nav a.active{
  background:rgba(255,255,255,.35);
}

/* ================= MOBILE HEADER ================= */
@media (max-width: 768px){

  .header-inner{
    flex-direction: column;
    align-items: flex-start;
    padding: 8px 12px;
    gap: 6px;
  }

  .header-left{
    width: 100%;
  }

  .logo-link img{
    height: 44px; /* thu nhỏ logo */
  }

  .header-text h1{
    font-size: 16px;
    line-height: 1.2;
  }

  .header-text p{
    font-size: 11px;
    line-height: 1.3;
  }

  .header-nav{
    width: 100%;
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-top: 4px;
  }

  .header-nav a{
    font-size: 12px;
    padding: 4px 8px;
    border-radius: 6px;
    white-space: nowrap;
  }
}

@media (max-width:600px){
  .btn-cart,
  .product-content a{
    padding:10px 18px;
    font-size:15px;
  }

  .product{
    border-radius:14px;
  }

  .product-content h3{
    font-size:16px;
  }

  .product-content p{
    font-size:13px;
  }

  .cart-remove{
    width:32px;
    height:32px;
  }
}

/* ===== POPUP THANH TOÁN KIỂU HÓA ĐƠN ===== */
#pay-content{
  background:white;
  border-radius:20px;
  max-width:720px;
  width:95%;
  padding:20px;
  box-shadow:0 10px 30px rgba(0,0,0,.3);
  transform-origin: top left;
  transition: transform .35s ease, opacity .35s ease;
}

#pay-content.zoom-from-cart{
  transform: scale(0.1);
  opacity:0;
}

.pay-header{
  font-size:20px;
  font-weight:700;
  color:var(--main-color);
  text-align:center;
  margin-bottom:10px;
}

.pay-order-id{
  font-size:13px;
  color:#666;
  margin-top:4px;
}

.pay-body{
  display:flex;
  flex-direction:column;
  gap:16px;
}

.pay-left{
  display:flex;
  flex-direction:column;
  min-height:0;   /* rất quan trọng để scroll hoạt động */
}

.pay-left h4{
  margin:6px 0;
}

#pay-items{
  list-style:none;
  padding:0;
  margin:0 0 10px;
  flex:1;               /* chiếm phần còn lại */
  overflow-y:auto;     /* chỉ list được cuộn */
}

#pay-items li{
  font-size:14px;
  margin-bottom:4px;
}

.pay-total{
  font-size:18px;
  font-weight:700;
  color:#e60000;
  margin:16px 0 6px 0;
}

.pay-actions button{
  background:var(--main-color);
  color:white;
  border:none;
  border-radius:8px;
  padding:8px 14px;
  cursor:pointer;
}

.pay-right img{
  width:100%;
  max-width:220px;
  display:block;
  margin:auto;
}

.pay-right{
  text-align:center;
}

.pay-guide{
  font-size:14px;
  line-height:1.6;
  margin-top:8px;
}

.pay-close{
  display:block;
  width:100%;
  margin-top:12px;
  background:#ccc;
  border:none;
  border-radius:8px;
  padding:10px 16px;
  cursor:pointer;
}

/* ===== PAY ACTIONS — FINAL ===== */

.pay-actions{
  display:flex;
  flex-direction:column;
  gap:12px;
  margin-top:12px;
}

.pay-actions button{
  width:100%;
  padding:12px 16px;
  font-size:16px;
  line-height:1.2;
  height:auto;
  min-height:44px;
  flex:0 0 auto;
}

/* nút - + nhỏ gọn */
#pay-items .qty-btn{
  width:22px;
  height:22px;
  border:1px solid #ccc;
  background:#fff;
  color:#333;
  font-size:14px;
  border-radius:4px;
  padding:0;
  line-height:1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}

/* số lượng */
#pay-items .qty-num{
  min-width:20px;
  text-align:center;
  font-size:14px;
}

/* nút xóa */
#pay-items .remove-btn{
  width:22px;
  height:22px;
  border:1px solid #f44336;
  background:#fff;
  color:#f44336;
  font-size:14px;
  border-radius:4px;
  padding:0;
  line-height:1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}

/* MOBILE */
@media(max-width:600px){
  .pay-body{
  grid-template-columns:1fr;
  height:auto;
}

  .pay-left{
    min-height:0;
  }

  /* danh sách sản phẩm chiếm nhiều không gian hơn */
  #pay-items{
    flex:1;
    overflow-y:auto;
    margin-bottom:6px;
  }

  /* giới hạn chiều cao khối QR */
  .pay-right img{
  max-width:160px;
}

  .pay-guide{
  font-size:13px;
}

  .pay-right{
    margin-top:8px;
  }

  #pay-content{
  max-height: calc(100vh - 20px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  overflow:auto;
}



#pay-items .qty-btn:hover{
  background:#eaeaea;
}

#pay-items .remove-btn:hover{
  background:#ffd6d6;
}

  /* ===== FIX NÚT POPUP THANH TOÁN KHÔNG ĐÈ NHAU ===== */

  .pay-close{
    width:100%;
  }
}
/* ===== FIX MODAL THANH TOÁN RESPONSIVE ===== */

.pay-left,
.pay-right{
  flex:1;
  min-width:0;
}

#pay-content{
  max-height:90vh;
  overflow:auto;
}

/* Khi màn hình nhỏ → xếp dọc */
@media (max-width: 900px){

  .pay-close{
    position:static;
    margin-top:12px;
    width:100%;
  }
}
.pay-guide{
  margin:10px 0 18px;
  padding:12px 14px;
  background:#f5f7ff;
  border-left:4px solid #2b7cff;
  border-radius:8px;
  text-align:left;
  font-size:14px;
  line-height:1.6;
}

/* ===== GALLERY POPUP ===== */

#gallery-modal{
  position:fixed;
  inset:0;
  display:none;
  z-index:3000;
}

#gallery-modal.show{
  display:block;
}

.gallery-overlay{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.75);
}

.gallery-box{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width:min(1000px,95vw);
  background:#111;
  border-radius:14px;
  padding:14px 14px 10px;
  box-shadow:0 20px 60px rgba(0,0,0,.5);
}

#gallery-main{
  width:100%;
  max-height:70vh;
  object-fit:contain;
  display:block;
  border-radius:10px;
  background:#000;
}

/* nav buttons */

.gallery-nav{
  position:absolute;
  top:45%;
  transform:translateY(-50%);
  width:46px;
  height:46px;
  border-radius:50%;
  border:none;
  background:rgba(255,255,255,.15);
  color:white;
  font-size:28px;
  cursor:pointer;
}

.gallery-nav.prev{ left:10px }
.gallery-nav.next{ right:10px }

.gallery-nav:hover{
  background:rgba(255,255,255,.3);
}

/* close */

.gallery-close{
  position:absolute;
  top:6px;
  right:8px;
  border:none;
  background:transparent;
  color:white;
  font-size:26px;
  cursor:pointer;
}

/* thumbs */

#gallery-thumbs{
  margin-top:10px;
  display:flex;
  gap:8px;
  overflow-x:auto;
  padding-bottom:4px;
}

#gallery-thumbs img{
  width:84px;
  height:64px;
  object-fit:cover;
  border-radius:6px;
  opacity:.6;
  cursor:pointer;
  border:2px solid transparent;
  flex:0 0 auto;
}

#gallery-thumbs img.active{
  opacity:1;
  border-color:#2b7cff;
}

/* mobile */

@media(max-width:600px){
  .gallery-box{
    padding:10px;
  }

  #gallery-main{
    max-height:60vh;
  }

  #gallery-thumbs img{
    width:70px;
    height:54px;
  }
}

#gallery-counter{
  position:absolute;
  top:10px;
  left:14px;
  background:rgba(0,0,0,.55);
  color:#fff;
  padding:4px 10px;
  border-radius:20px;
  font-size:13px;
}

.gallery-cart-row{
  margin-top:10px;
  text-align:center;
}

#gallery-main{
  transition:opacity .15s;
}

/* ===== FIX IOS ZOOM INPUT EMAIL ===== */
#customer-email{
  font-size:16px;
}

/* ===== POPUP STEP 1 FIX GIAO DIỆN PC ===== */

#pay-content{
  max-width:600px;   /* popup rộng hơn chút */
}

#customer-email{
  width:100%;
  font-size:16px;
  padding:12px;
  border-radius:8px;
  border:1px solid #ccc;
  box-sizing:border-box;
}

#copy-order-btn{
  width:100%;
  background:linear-gradient(90deg,#1e88e5,#1565c0);
  color:white;
  border:none;
  padding:14px;
  font-size:16px;
  border-radius:8px;
  cursor:pointer;
  transition:0.2s;
}

#copy-order-btn:hover{
  background:linear-gradient(90deg,#1976d2,#0d47a1);
}

.pay-close{
  width:100%;
  margin-top:10px;
  background:#ccc;
  color:#333;
  border:none;
  padding:12px;
  border-radius:8px;
  cursor:pointer;
  transition:0.2s;
}

.pay-close:hover{
  background:#bbb;
}
.confirm-paid-btn{
  background:#2e7d32;
  color:white;
  border:none;
  padding:10px 20px;
  border-radius:8px;
  font-size:15px;
  cursor:pointer;
  transition:.2s;
}

.confirm-paid-btn:hover{
  background:#1b5e20;
  transform:scale(1.03);
}

/* ================= STEP 3 POPUP – UPGRADE ================= */

.step3-overlay{
  display:none;
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.45);
  backdrop-filter:blur(6px);
  justify-content:center;
  align-items:center;
  z-index:1000;
  animation:fadeIn .3s ease;
}

.step3-box{
  position:relative;
  background:white;
  width:95%;
  max-width:460px;
  border-radius:20px;
  padding:28px;
  text-align:center;

  /* 👉 shadow + glow */
  box-shadow:
    0 15px 40px rgba(0,0,0,.3),
    0 0 25px rgba(76,175,80,.25);

  /* 👉 thêm rung */
  animation:
  scaleIn .3s ease,
  shakeSuccess 0.5s ease 0.3s;

  overflow:visible;
}

/* ===== VIỀN CHẠY ===== */
.step3-box::before{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius:22px;

  padding:2px;

background:conic-gradient(
  from 0deg,

  /* vùng tối */
  transparent 0deg 340deg,

  /* đuôi mờ */
  rgba(0,229,255,0.15) 342deg,
  rgba(0,229,255,0.35) 346deg,

  /* lõi sáng */
  #00f7ff 350deg,
  #00ff9d 353deg,

  /* fade ra */
  rgba(0,255,157,0.6) 356deg,
  rgba(0,255,157,0.2) 358deg,

  transparent 360deg
);

  animation:rotateLight 1.2s linear infinite;

  filter:
  drop-shadow(0 0 6px #00f7ff)
  drop-shadow(0 0 16px #00ff9d)
  drop-shadow(0 0 26px #00f7ff)
  drop-shadow(0 0 36px #00ff9d);

  z-index:0;

  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
          mask-composite:exclude;
}


/* animation tia chạy */
@keyframes lightRun{
  0%{
    background-position:0% 50%;
  }
  100%{
    background-position:300% 50%;
  }
}

/* lớp nền che bên trong */
.step3-box::after{
  content:"";
  position:absolute;
  inset:2px;

  background:white;
  border-radius:18px;

  z-index:1;
}

/* đảm bảo content nằm trên */
.step3-box > *{
  position:relative;
  z-index:2;
}

/* ===== ANIMATION ===== */

@keyframes rotateBorder{
  to{
    transform:rotate(360deg);
  }
}

.step3-icon{
  width:90px;
  height:90px;
  margin:0 auto 16px;

  background:radial-gradient(circle at 30% 30%, #66bb6a, #2e7d32);

  color:white;
  font-size:42px;
  font-weight:bold;

  border-radius:50%;

  display:flex;
  align-items:center;
  justify-content:center;

  box-shadow:
    0 0 20px rgba(76,175,80,.6),
    0 0 40px rgba(76,175,80,.4);

  animation:iconPop .4s ease;
}
@keyframes iconPop{
  0%{
    transform:scale(0.5);
    opacity:0;
  }
  60%{
    transform:scale(1.2);
  }
  100%{
    transform:scale(1);
    opacity:1;
  }
}

.step3-title{
  font-size:20px;
  font-weight:bold;
  color:#2e7d32;
  margin-bottom:10px;
}

.step3-message{
  margin-bottom:12px;
  line-height:1.6;
}

.step3-note{
  background:#f5f5f5;
  padding:12px;
  border-radius:10px;
  font-size:14px;
  margin-bottom:16px;
}

.step3-close{
  width:100%;
  background:#9e9e9e;
  color:white;
  border:none;
  padding:12px;
  border-radius:8px;
  cursor:pointer;
  transition:.2s;
}

.step3-close:hover{
  background:#757575;
}

/* Animation */
@keyframes scaleIn{
  from{
    transform:scale(.9);
    opacity:0;
  }
  to{
    transform:scale(1);
    opacity:1;
  }
}

@keyframes fadeIn{
  from{opacity:0;}
  to{opacity:1;}
}

@keyframes shakeSuccess{
  0%   { transform:translateX(0); }
  10%  { transform:translateX(-8px); }
  20%  { transform:translateX(7px); }
  30%  { transform:translateX(-6px); }
  40%  { transform:translateX(5px); }
  50%  { transform:translateX(-4px); }
  60%  { transform:translateX(3px); }
  70%  { transform:translateX(-2px); }
  80%  { transform:translateX(1px); }
  100% { transform:translateX(0); }
}

/* ===== NÚT ĐÓNG STEP 1 MÀU XÁM ===== */
#pay-modal .pay-close{
  width:100%;
  margin-top:10px;
  background:#9e9e9e !important;
  color:white;
  border:none;
  padding:12px;
  border-radius:8px;
  cursor:pointer;
  transition:0.2s;
}

#pay-modal .pay-close:hover{
  background:#757575 !important;
}

.pswp-product-box{

position:absolute;
bottom:0;
left:0;
width:100%;

background:#111;
color:white;

padding:14px;
text-align:center;

}

.pswp-product-title{
font-size:16px;
font-weight:600;
margin-bottom:4px;
}

.pswp-product-price{
font-size:18px;
color:#ffcc00;
margin-bottom:10px;
}

.pswp-add-cart{

background:#ff3b3b;
color:white;

border:none;
padding:10px 18px;

border-radius:30px;
font-weight:700;

cursor:pointer;

}

/* ===== ADD CART EFFECT ===== */

.pswp-add-cart.added{
transform:scale(1.08);
background:#4caf50;
transition:.2s;
}

#cart-box.cart-bounce{
animation:cartBounce .45s;
}

@keyframes cartBounce{
0%{transform:scale(1)}
30%{transform:scale(1.2)}
60%{transform:scale(.9)}
100%{transform:scale(1)}
}


/* ===== FLY TO CART EFFECT ===== */

.fly-img{
position:fixed;
z-index:20000;
pointer-events:none;

width:auto;
max-width:120px;

border-radius:10px;

transition:
transform .8s cubic-bezier(.2,.8,.2,1),
opacity .8s ease;

box-shadow:0 10px 30px rgba(0,0,0,.4);
}

/* ===== CART SPARKLE EFFECT ===== */

.cart-sparkle{
position:fixed;

width:10px;
height:10px;

background:radial-gradient(circle,#fff 0%,#ffd700 60%,transparent 70%);

border-radius:50%;

pointer-events:none;
z-index:20000;

transform:translate(-50%,-50%);

box-shadow:
0 0 10px #ffd700,
0 0 18px #ff9800;

animation:sparkleFly .7s ease forwards;
}

@keyframes sparkleFly{

0%{
transform:translate(0,0) scale(1);
opacity:1;
}

100%{
transform:translate(var(--x),var(--y)) scale(.3);
opacity:0;
}

}


.product-id{
font-size:13px;
color:#e74c3c;
font-weight:600;
margin-top:4px;
margin-bottom:4px;
}

.product-code{
font-size:13px;
color:#e74c3c;
font-weight:600;
margin:4px 0;
}



.title-icon{
  font-size:18px;
  margin-right:6px;
}

/* ===== STEP 3 ANIMATION ===== */

.step3-icon{
  width:90px;
  height:90px;
  margin:0 auto 10px;
}

/* SVG */
.check-svg{
  width:100%;
  height:100%;
}

/* vòng tròn */
.check-circle{
  fill:none;
  stroke:#4CAF50;
  stroke-width:6;
  stroke-dasharray:283;
  stroke-dashoffset:283;

  filter:drop-shadow(0 0 6px #4CAF50);
}

/* dấu tick */
.check-mark{
  fill:none;
  stroke:#4CAF50;
  stroke-width:6;
  stroke-linecap:round;
  stroke-linejoin:round;
  stroke-dasharray:50;
  stroke-dashoffset:50;

  filter:drop-shadow(0 0 6px #4CAF50);
}

/* ===== CHỈ CHẠY ANIMATION KHI SHOW ===== */

.step3-box.show .check-circle{
  animation:drawCircle 0.6s ease forwards;
}

.step3-box.show .check-mark{
  animation:drawTick 0.4s ease forwards;
  animation-delay:0.6s;
}

@keyframes borderRun{
  to{
    transform:rotate(360deg);
  }
}

/* glow */
.step3-box.show .check-svg{
  animation:glowPulse 1.5s ease infinite alternate;
  animation-delay:1s;
}

/* ===== KEYFRAMES ===== */

@keyframes drawCircle{
  to{
    stroke-dashoffset:0;
  }
}

@keyframes drawTick{
  to{
    stroke-dashoffset:0;
  }
}

@keyframes glowPulse{
  from{
    filter:drop-shadow(0 0 0px #4CAF50);
  }
  to{
    filter:drop-shadow(0 0 12px #4CAF50);
  }
}

.check-circle{
  fill: none !important;
}

.check-mark{
  fill: none !important;
}

/* ===== ID CHECK STEP 2 ===== */

.id-check-box{
  margin-top:16px;
  display:flex;
  gap:8px;
  justify-content:center;
}

.id-input{
  flex:1;
  max-width:220px;
  padding:8px 10px;
  border-radius:8px;
  border:1px solid #ccc;
  background:#f2f2f2;
  font-size:14px;
}

.id-btn{
  background:#bbb;
  color:#333;
  border:none;
  padding:8px 12px;
  border-radius:8px;
  cursor:pointer;
  font-weight:600;
}

.id-btn:hover{
  background:#999;
}

/* ===== UPDATE POPUP PREMIUM ===== */
#update-popup{
  position:fixed;
  inset:0;
  background:rgba(20,30,60,.6);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);

  display:flex;
  justify-content:center;
  align-items:center;

  z-index:999999;

  animation:fadeIn .4s ease;
}

/* BOX */
.update-box{
  position:relative;

  background:linear-gradient(145deg,#ffffff,#eaf2ff);

  padding:36px 28px;
  border-radius:22px;

  width:90%;
  max-width:360px;

  text-align:center;

  box-shadow:
    0 20px 60px rgba(0,0,0,.35),
    0 0 40px rgba(43,124,255,.25);

  animation:popupZoom .45s cubic-bezier(.2,.8,.2,1);
  overflow:hidden;
}

/* ===== VIỀN GLOW ===== */
.update-box::before{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius:24px;

  background:linear-gradient(
    120deg,
    rgba(255,255,255,0.4),
    rgba(43,124,255,0.6),
    rgba(0,198,255,0.5),
    rgba(255,255,255,0.3)
  );

  filter:blur(10px);
  opacity:.7;
}

/* ===== ÁNH SÁNG CHẠY ===== */
.update-box::after{
  content:"";
  position:absolute;
  inset:0;

  background:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,.6) 0, transparent 40%),
    radial-gradient(circle at 80% 20%, rgba(255,255,255,.5) 0, transparent 40%),
    radial-gradient(circle at 50% 80%, rgba(255,255,255,.4) 0, transparent 40%);

  opacity:.4;
  animation:lightMove 6s linear infinite;
}

/* đảm bảo content nằm trên */
.update-box > *{
  position:relative;
  z-index:2;
}

/* ICON */
.update-icon{
  font-size:42px;
  margin-bottom:10px;

  animation:starGlow 2s ease-in-out infinite;
}

/* TEXT */
.update-text{
  font-size:17px;
  line-height:1.6;
  margin-bottom:22px;
  font-weight:500;
}

/* BUTTON */
.update-btn{
  background:linear-gradient(135deg,#2b7cff,#0066ff);

  color:white;
  border:none;

  padding:14px 28px;
  font-size:16px;
  font-weight:600;

  border-radius:14px;
  cursor:pointer;

  box-shadow:
    0 6px 18px rgba(0,0,0,.25),
    0 0 20px rgba(43,124,255,.35);

  transition:.25s;
}

.update-btn:hover{
  transform:translateY(-3px) scale(1.05);

  box-shadow:
    0 10px 28px rgba(0,0,0,.35),
    0 0 30px rgba(43,124,255,.6);
}

/* ===== ANIMATION ===== */

@keyframes popupZoom{
  from{
    transform:scale(.7) translateY(40px);
    opacity:0;
  }
  to{
    transform:scale(1) translateY(0);
    opacity:1;
  }
}

@keyframes starGlow{
  0%,100%{
    transform:translateY(0);
    text-shadow:0 0 8px rgba(255,215,0,.5);
  }
  50%{
    transform:translateY(-6px);
    text-shadow:0 0 18px rgba(255,215,0,.9);
  }
}

@keyframes lightMove{
  0%{transform:translateY(0);}
  100%{transform:translateY(-20px);}
}