/* ================= INDEX ================= */
:root{
  --green:#2e9b5e;
  --green-dark:#1f7a3f;
  --green-light:#e9f6ef;
  --text:#1f2937;
}

body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:var(--green-light);
  color:var(--text);
}

/* TITLE */
.title{
  margin:26px 0 18px;
  font-size:26px;
  font-weight:700;
  color:var(--green-dark);
  text-align:center;
}

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

.layout{
  max-width:1300px;
  margin:0 auto;
  padding:0 16px 30px;
  display:flex;
  align-items:flex-start;
  gap:22px;
}

/* ================= SIDEBAR ================= */

.sidebar{
  width:230px;
  flex-shrink:0;
  background:#fff;
  border-radius:16px;
  padding:16px;
  box-shadow:0 8px 20px rgba(0,0,0,.08);
}

.sidebar h3{
  margin:0 0 12px;
  font-size:16px;
  font-weight:700;
}

.sidebar ul{
  list-style:none;
  padding:0;
  margin:0;
}

.sidebar li{
  margin-bottom:10px;
}

.sidebar a{
  text-decoration:none;
  color:#374151;
  font-size:14px;
  display:block;
  padding:6px 4px;
  border-radius:8px;
  transition:.2s;
}

.sidebar a:hover{
  background:#f0fdf4;
  color:var(--green-dark);
  font-weight:600;
}

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

.grid{
  flex:1;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:18px;
}

/* ================= ITEM ================= */

.item{
  background:#fff;
  border-radius:16px;
  padding:14px;
  text-align:center;
  box-shadow:0 10px 28px rgba(0,0,0,.1);
  transition:.25s;
}

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

.item img{
  width:100%;
  height:200px;
  object-fit:contain;
  background:#f8faf9;
  border-radius:12px;
}

.item h3{
  margin:12px 0 6px;
  font-size:18px;
}

.item p{
  margin:0 0 10px;
  color:var(--green-dark);
  font-weight:700;
}

/* ================= SHOP INFO ================= */

.shop-name{
  display:block;
  font-size:13px;
  color:#666;
  margin:4px 0 6px;
}

.shop-name a{
  color:#2563eb;
  text-decoration:none;
  font-weight:500;
}

.shop-name a:hover{
  text-decoration:underline;
}

/* ================= QUANTITY ================= */

.qty{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:10px;
  margin:10px 0 12px;
}

.qty button{
  width:34px;
  height:34px;
  border-radius:50%;
  border:none;
  background:var(--green);
  color:#fff;
  font-size:18px;
  font-weight:700;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
}

.qty button:hover{
  background:var(--green-dark);
}

.qty input{
  width:42px;
  height:32px;
  text-align:center;
  border:1px solid #d1d5db;
  border-radius:6px;
  font-size:14px;
  font-weight:600;
}

/* ================= BUY ACTIONS ================= */

.buy-actions{
display:flex;
gap:10px;
margin-top:14px;
}

.contact-btn,
.chat-btn{
flex:1;
display:flex;
align-items:center;
justify-content:center;
gap:6px;
padding:10px 0;
border-radius:8px;
font-size:14px;
font-weight:600;
text-decoration:none;
cursor:pointer;
border:none;
transition:all .2s ease;
}

/* NÚT LIÊN HỆ */
.contact-btn{
background:#28a745;
color:white;
}

.contact-btn:hover{
background:#218838;
transform:translateY(-1px);
}

/* NÚT CHAT */
.chat-btn{
background:#1e73e8;
color:white;
}

.chat-btn:hover{
background:#155bc1;
transform:translateY(-1px);
}

.buy-now{
  flex:1;
  padding:11px 0;
  border:none;
  border-radius:999px;
  background:linear-gradient(135deg,#22c55e,#15803d);
  color:#fff;
  font-weight:700;
  cursor:pointer;
  transition:.25s;
}

.buy-now:hover{
  transform:translateY(-1px);
  box-shadow:0 8px 20px rgba(34,197,94,.4);
}

.add-cart-icon{
  width:44px;
  border:none;
  border-radius:50%;
  background:#e9f6ef;
  color:#15803d;
  font-size:18px;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:.25s;
}

.add-cart-icon:hover{
  background:#d1fae5;
  transform:scale(1.05);
}

/* ================= FILTER BOX ================= */

.filter-box{
  max-width:1300px;
  margin:0 auto 18px;
  padding:14px;
  background:#ffffff;
  border-radius:14px;
  box-shadow:0 8px 20px rgba(0,0,0,.08);
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  align-items:center;
}

.filter-box input,
.filter-box select{
  padding:9px 12px;
  border-radius:999px;
  border:1px solid #d1d5db;
  font-size:14px;
  outline:none;
  transition:.2s;
  background:#f9fafb;
}

.filter-box input:focus,
.filter-box select:focus{
  border-color:var(--green);
  box-shadow:0 0 0 3px rgba(46,155,94,.15);
  background:#fff;
}

#searchInput{
  flex:1;
  min-width:220px;
}

#minPrice,
#maxPrice{
  width:120px;
}

#shopFilter,
#sortPrice{
  cursor:pointer;
  background:#fff;
}

@media(max-width:600px){
  .title{font-size:22px}
  .item img{height:160px}
  .grid{
    grid-template-columns:1fr;
  }
}
select {
  width: 100%;
  padding: 6px;
  margin: 5px 0;
  border-radius: 6px;
  border: 1px solid #ccc;
}
.title-bar{
  max-width:1300px;
  margin:26px auto 18px;
  padding:0 16px;
  display:flex;
  justify-content:space-between;
  align-items:center;
}

.btn-dang{
background:linear-gradient(135deg,#ff4d4f,#ff7875);
color:white;
padding:10px 18px;
border-radius:8px;
text-decoration:none;
font-weight:600;
box-shadow:0 6px 14px rgba(0,0,0,.15);
transition:.2s;
}

.btn-dang:hover{
transform:translateY(-1px);
box-shadow:0 8px 18px rgba(0,0,0,.2);
}

.sale-badge{
position:absolute;
top:10px;
left:10px;
background:#ff4d4f;
color:white;
padding:4px 8px;
font-size:12px;
border-radius:4px;
}

/* ================= FORM ĐĂNG THANH LÝ ================= */

.form-wrapper{
max-width:600px;
margin:40px auto;
background:white;
padding:25px;
border-radius:16px;
box-shadow:0 10px 30px rgba(0,0,0,.1);
}

.form-wrapper h2{
text-align:center;
margin-bottom:20px;
color:var(--green-dark);
}

.form-wrapper label{
display:block;
margin-top:12px;
font-weight:600;
}

.form-wrapper input,
.form-wrapper textarea,
.form-wrapper select{
width:100%;
padding:10px;
margin-top:6px;
border-radius:8px;
border:1px solid #d1d5db;
font-size:14px;
}

.form-wrapper input:focus,
.form-wrapper textarea:focus,
.form-wrapper select:focus{
border-color:var(--green);
outline:none;
}

.form-wrapper button{
margin-top:18px;
width:100%;
padding:12px;
border:none;
border-radius:999px;
background:linear-gradient(135deg,#22c55e,#15803d);
color:white;
font-weight:700;
font-size:15px;
cursor:pointer;
}

.form-wrapper button:hover{
transform:translateY(-1px);
box-shadow:0 6px 16px rgba(34,197,94,.4);
}

.popup{
display:none;
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.6);
align-items:center;
justify-content:center;
z-index:999;
}

.popup-content{
background:#fff;
padding:25px;
border-radius:10px;
text-align:center;
width:280px;
}

.popup-content button{
margin-top:10px;
padding:8px 15px;
border:none;
border-radius:6px;
cursor:pointer;
}

.contact-btn:hover{
background:#218838;
}

.chat-btn:hover{
background:#155bc1;
}
/* ===== MODAL ===== */

.modal{
display:none;
position:fixed;
z-index:999;
left:0;
top:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.6);
}

.modal-content{
background:#fff;
margin:5% auto;
padding:20px;
width:90%;
max-width:500px;
border-radius:10px;
text-align:center;
position:relative;
}

.modal-content img{
width:100%;
max-height:400px;
object-fit:contain;
border-radius:10px;
}

.modal-price{
font-size:22px;
font-weight:bold;
color:#e53935;
margin-top:10px;
}

.close{
position:absolute;
top:10px;
right:15px;
font-size:26px;
cursor:pointer;
z-index:1000;
}

.preview-box{
display:flex;
flex-wrap:wrap;
gap:10px;
margin-top:10px;
}
.preview-item{
position:relative;
display:inline-block;
}

.remove-btn{
position:absolute;
top:5px;
right:5px;
width:22px;
height:22px;
border:none;
border-radius:50%;
background:#ff3b30;
color:#fff;
font-size:14px;
line-height:22px;
text-align:center;
cursor:pointer;
padding:0;
}

.preview-box img,
.preview-box video{
width:120px;
height:120px;
object-fit:cover;
border-radius:8px;
border:1px solid #ddd;
}
.preview-item .remove-btn{
position:absolute;
top:5px;
right:5px;
width:22px;
height:22px;
margin:0;
padding:0;
border:none;
border-radius:50%;
background:#ff3b30;
color:#fff;
font-size:14px;
line-height:22px;
text-align:center;
cursor:pointer;
}

.media-list{
display:flex;
gap:6px;
overflow-x:auto;
}

.media-list img,
.media-list video{
width:90px;
height:90px;
object-fit:cover;
border-radius:6px;
cursor:pointer;
}

.title-bar{
display:flex;
justify-content:space-between;
align-items:center;
}

.title-actions{
display:flex;
gap:10px;
}

.btn-my{
background:#4caf50;
color:white;
padding:10px 16px;
border-radius:8px;
text-decoration:none;
font-weight:600;
box-shadow:0 3px 6px rgba(0,0,0,0.15);
}

.btn-my:hover{
background:#3d9142;
}
/* ===== SẢN PHẨM CỦA TÔI ===== */

.my-product{
display:flex;
align-items:center;
gap:20px;
background:white;
padding:20px;
border-radius:12px;
box-shadow:0 2px 10px rgba(0,0,0,0.08);
margin-bottom:20px;
}

.my-product img{
width:120px;
height:120px;
object-fit:cover;
border-radius:8px;
}

.my-product-info{
flex:1;
}

.my-product-info h3{
margin:0 0 5px;
font-size:18px;
}

.my-product-price{
color:#2e9b5e;
font-weight:bold;
font-size:18px;
}

.my-product-actions{
margin-top:10px;
}

.btn-edit{
color:#ff9800;
margin-right:10px;
text-decoration:none;
font-weight:600;
}

.btn-delete{
color:#e53935;
text-decoration:none;
font-weight:600;
}

.modal-gallery{
display:flex;
align-items:center;
justify-content:center;
position:relative;
}

#modalMedia{
width:100%;
max-width:420px;
aspect-ratio:9/16;
margin:auto;
display:flex;
align-items:center;
justify-content:center;
background:#000;
overflow:hidden;
border-radius:12px;
}

#modalMedia img,
#modalMedia video{
width:100%;
height:100%;
object-fit:contain;
border-radius:10px;
}

.modal-gallery img{
max-width:100%;
max-height:420px;
border-radius:10px;
}

/* MŨI TÊN */
.modal-gallery .nav{
position:absolute;
top:50%;
transform:translateY(-50%);
background:rgba(0,0,0,0.6);
color:#fff;
border:none;
width:40px;
height:40px;
border-radius:50%;
font-size:22px;
cursor:pointer;
display:flex;
align-items:center;
justify-content:center;
z-index:10;
}

/* trái */
.modal-gallery .prev{
left:10px;
}

/* phải */
.modal-gallery .next{
right:10px;
}

/* hover */
.modal-gallery .nav:hover{
background:rgba(0,0,0,0.85);
}

/* ===== MOBILE FIX ===== */
@media screen and (max-width:768px){

/* layout */
.layout{
display:block !important;
padding:10px !important;
}

/* ẨN SIDEBAR */
.sidebar{
display:none !important;
}

/* GRID 2 CỘT */
.grid{
display:grid !important;
grid-template-columns:repeat(2,1fr) !important;
gap:12px !important;
align-items:stretch;
}

/* CARD */
.item{
width:100% !important;
padding:10px !important;
}

/* ẢNH */
.media-list img,
.media-list video{
width:100% !important;
height:130px !important;
object-fit:cover;
border-radius:8px;
}

/* TÊN */
.item h3{
font-size:14px;
min-height:34px;
}

/* SHOP */
.shop-name,
.shop-address{
font-size:11px;
}

/* GIÁ */
.item p{
font-size:15px;
font-weight:bold;
color:#1a7f37;
}

/* BUTTON */
.buy-actions{
display:flex;
gap:6px;
}

.contact-btn,
.chat-btn{
flex:1;
font-size:12px;
padding:7px;
}

/* FILTER */
.filter-box{
display:flex;
flex-direction:column;
gap:8px;
}

.filter-box input,
.filter-box select{
width:100%;
}

}

/* ================= MOBILE ================= */

@media screen and (max-width:768px){

.layout{
display:block;
padding:10px;
}

.sidebar{
display:none;
}

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

.item{
padding:10px;
display:flex;
flex-direction:column;
}

.media-list img,
.media-list video{
width:100%;
height:130px;
object-fit:cover;
border-radius:8px;
}

.item h3{
font-size:14px;
min-height:34px;
}

.shop-name{
font-size:11px;
}

.item p{
font-size:15px;
}

.buy-actions{
margin-top:auto;
gap:6px;
}

.contact-btn,
.chat-btn{
font-size:12px;
padding:7px;
}

.filter-box{
flex-direction:column;
gap:8px;
}

.filter-box input,
.filter-box select{
width:100%;
}

}

@media screen and (max-width:480px){

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

.media-list img,
.media-list video{
height:120px;
}

.item h3{
font-size:13px;
}

}
#prevBtn,
#nextBtn{
position:absolute;
top:50%;
transform:translateY(-50%);
width:45px;
height:45px;
border-radius:50%;
border:none;
background:rgba(0,0,0,0.4);
color:#fff;
font-size:28px;
cursor:pointer;
display:flex;
align-items:center;
justify-content:center;
transition:0.2s;
z-index:5;
}

#prevBtn{
left:15px;
}

#nextBtn{
right:15px;
}

#prevBtn:hover,
#nextBtn:hover{
background:rgba(0,0,0,0.7);
transform:translateY(-50%) scale(1.1);
}
.modal-link{
margin-top:10px;
display:flex;
gap:8px;
}

.modal-link input{
flex:1;
padding:8px;
border:1px solid #ddd;
border-radius:6px;
font-size:13px;
}

.modal-link button{
padding:8px 12px;
background:#1976d2;
color:white;
border:none;
border-radius:6px;
cursor:pointer;
}