* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', Arial, sans-serif; }
body { background-color: #eaeded; color: #0f1111; }

/* HEADER */
header { background-color: #131921; color: white; position: sticky; top: 0; z-index: 100; }
.navbar { display: flex; align-items: center; padding: 10px 20px; justify-content: space-between; }
.nav-logo { font-size: 24px; font-weight: bold; color: #febd69; cursor: pointer; }
.nav-logo span { color: white; }
.nav-search { flex: 1; display: flex; height: 40px; border-radius: 4px; overflow: hidden; margin: 0 20px; }
.search-input { width: 100%; border: none; outline: none; padding-left: 10px; font-size: 16px; }
.search-icon { width: 45px; background-color: #febd69; display: flex; justify-content: center; align-items: center; color: #333; cursor: pointer; }

.nav-right { display: flex; align-items: center; gap: 15px; }
.btn-nav { border: none; padding: 8px 12px; font-weight: bold; border-radius: 4px; cursor: pointer; transition: 0.2s; }
.btn-deposit { background-color: #f08804; color: white; }
.btn-deposit:hover { background-color: #cc7303; }
.btn-auth { background-color: #232f3e; color: #febd69; border: 1px solid #febd69; }
.btn-auth:hover { background-color: #37475a; }

/* BANNER SLIDE */
.banner-container { width: 100%; height: 380px; position: relative; overflow: hidden; }
.banner-slide { width: 100%; height: 100%; background-size: cover; background-position: center; transition: background-image 0.5s ease-in-out; background-image: url('https://images-na.ssl-images-amazon.com/images/G/01/AmazonExports/Fuji/2020/May/Hero/Fuji_TallHero_Computers_1x._CB432469755_.jpg'); }
.banner-fade { position: absolute; bottom: 0; width: 100%; height: 150px; background: linear-gradient(to bottom, transparent, #eaeded); }
.slide-btn { position: absolute; top: 30%; font-size: 35px; color: white; background: rgba(0,0,0,0.3); border: none; padding: 10px; cursor: pointer; z-index: 10; }
#prevBtn { left: 10px; } #nextBtn { right: 10px; }

/* LƯỚI SẢN PHẨM 4 CỘT CHUYÊN NGHIỆP */
.main-content { max-width: 1400px; margin: -100px auto 0 auto; position: relative; z-index: 2; padding: 0 20px; }
.products-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.product-card { background-color: white; padding: 20px; border-radius: 4px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); display: flex; flex-direction: column; justify-content: space-between; min-height: 400px; }
.product-image { width: 100%; height: 180px; object-fit: contain; margin: 10px 0; }
.product-price { font-size: 20px; font-weight: bold; color: #b12704; margin: 8px 0; }
.btn-buy { background-color: #ffd814; border: 1px solid #fcd200; border-radius: 20px; padding: 8px; cursor: pointer; font-weight: bold; width: 100%; }
.btn-buy:hover { background-color: #f7ca00; }

/* HỆ THỐNG POPUP CỬA SỔ */
.modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.6); justify-content: center; align-items: center; z-index: 1000; }
.modal-content { background: white; padding: 25px; border-radius: 8px; width: 90%; max-width: 400px; text-align: center; position: relative; box-shadow: 0 4px 20px rgba(0,0,0,0.3); }
.close-btn { position: absolute; top: 10px; right: 15px; font-size: 24px; cursor: pointer; color: #555; }

.auth-form { margin-top: 15px; text-align: left; }
.form-group { margin-bottom: 15px; }
.form-group label { display: block; font-size: 14px; font-weight: bold; margin-bottom: 5px; color: #333; }
.form-input { width: 100%; padding: 10px; border: 1px solid #a6a6a6; border-radius: 3px; outline: none; font-size: 15px; }

.bank-details { background: #f7f9fa; border: 1px solid #d5dbdb; padding: 15px; border-radius: 6px; margin: 15px 0; text-align: left; font-size: 14px; line-height: 1.6; }
.btn-link-form { background-color: #111; color: white; border: none; padding: 10px; border-radius: 4px; font-weight: bold; cursor: pointer; width: 100%; text-decoration: none; display: inline-block; text-align: center; }

/* FOOTER CHÂN TRANG */
footer { margin-top: 50px; background-color: #232f3e; color: white; }
.back-to-top { background-color: #37475a; text-align: center; padding: 15px; cursor: pointer; font-weight: bold; font-size: 14px; }
.footer-logo { text-align: center; padding: 25px; border-top: 1px solid #3a4553; font-size: 16px; color: #febd69; }

/* CO GIÃN THEO THIẾT BỊ DI ĐỘNG */
@media (max-width: 1024px) { .products-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .products-grid { grid-template-columns: repeat(1, 1fr); } }