body { 
    margin: 0; 
    font-family: Arial, sans-serif; 
    background-color: #f8f9fa; 
}
a { text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }

/*  PHẦN ĐẦU TRANG (HEADER & TOP BAR) */
.top-bar {
    width: 100%; height: 40px; background-color: #003366; 
    color: #e3f2fd; font-size: 14px; line-height: 40px;
}
.top-bar-content { width: 80%; margin: 0 auto; }
.top-left { float: left; }
.top-right { float: right; }
.top-right a { color: #e3f2fd; }

.header {
    width: 100%; height: 90px; background-color: white; 
    border-bottom: 4px solid #0056b3;
}
.header-content {
    width: 80%; height: 100%; margin: 0 auto; 
    display: flex; align-items: center; justify-content: space-between;
}
.logo { font-size: 32px; font-style: italic; font-weight: bold; color: #0056b3; }
.logo span { color: #ff6600; }

.search-box { display: flex; width: 40%; }
.search-input { width: 80%; padding: 10px; border: 2px solid #0056b3; border-radius: 20px 0 0 20px; outline: none; }
.search-btn { width: 20%; background-color: #0056b3; color: white; border: none; border-radius: 0 20px 20px 0; cursor: pointer; font-weight: bold; }

.cart-btn {
    display: block; width: 150px; height: 40px; background-color: #0056b3; 
    color: white; border-radius: 20px; text-align: center; line-height: 40px; font-weight: bold;
}

/*   MENU THANH ĐIỀU HƯỚNG */
.main-menu { width: 100%; height: 45px; background-color: #0056b3; }
.main-menu ul { width: 80%; margin: 0 auto; display: flex; }
.main-menu li a { display: block; color: white; padding: 0 20px; line-height: 45px; font-weight: bold; }
.main-menu li a:hover, .main-menu li.active a { color: #ffcc00; }

/*BỐ CỤC CHÍNH (SIDEBAR & NỘI DUNG) */
.container { width: 80%; margin: 30px auto; display: flex; gap: 25px; }
.sidebar { flex: 1; }
.main-content { flex: 3; }

.category-menu { background: white; border: 1px solid #ddd; border-radius: 8px; overflow: hidden; }
.category-title { background-color: #3b5998; color: white; text-align: center; padding: 15px 0; margin: 0; font-size: 18px; }
.category-menu li { border-bottom: 1px solid #eee; }
.category-menu li a { display: block; padding: 15px; color: #333; font-weight: bold; transition: 0.3s; }
.category-menu li a:hover { background-color: #fcebeb; color: #ff6600; }

/* LƯỚI SẢN PHẨM (PRODUCT GRID) */
.product-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 20px; }
.product { background: white; border: 1px solid #ddd; border-radius: 8px; padding: 15px; text-align: center; transition: 0.3s; }
.product:hover { transform: translateY(-5px); box-shadow: 0 5px 15px rgba(0,0,0,0.1); border-color: #0056b3; }
.product-img { height: 160px; background: #f9f9f9; display: flex; align-items: center; justify-content: center; margin-bottom: 15px; }
.product-img img { max-width: 100%; max-height: 100%; }
.product-name { color: #003366; font-size: 14px; margin: 0 0 10px 0; height: 35px; overflow: hidden; }
.product-price { color: #ff6600; font-weight: bold; font-size: 16px; margin: 0 0 10px 0; }
.add-to-cart { width: 100%; padding: 10px; background-color: #ff6600; color: white; border: none; border-radius: 5px; font-weight: bold; cursor: pointer; }
.add-to-cart:hover { background-color: #e65c00; }

/* GIỎ HÀNG NỔI & NÚT LÊN ĐẦU TRANG */
#floating-cart { 
    position: fixed; right: 30px; bottom: 30px; background-color: #ff6600; 
    color: white; width: 60px; height: 60px; border-radius: 50%; 
    text-align: center; line-height: 60px; font-size: 24px; cursor: pointer; 
    box-shadow: 0 4px 10px rgba(0,0,0,0.2); 
    z-index: 1000; /*  thêm z-index chống đè */
}
#floating-cart-count { 
    position: absolute; top: 0; right: 0; background: white; 
    color: #ff6600; font-weight: bold; font-size: 12px; width: 20px; height: 20px; 
    line-height: 20px; border-radius: 50%; border: 1px solid #ff6600; 
}
#back-to-top { 
    display: none; position: fixed; bottom: 100px; right: 35px; 
    font-size: 20px; border: none; background-color: #0056b3; color: white; 
    cursor: pointer; width: 50px; height: 50px; border-radius: 50%; 
    box-shadow: 0 4px 6px rgba(0,0,0,0.2); z-index: 999;
}


.footer { 
    width: 100%; 
    background-color: #2c2c2c; /* Màu xám đen */
    color: #ddd; 
    padding: 50px 0 20px; 
    margin-top: 50px; 
    font-size: 14px; 
    line-height: 1.8; 
}
.footer-container { 
    width: 80%; 
    margin: 0 auto; 
    display: flex; 
    gap: 40px; 
    justify-content: space-between; 
}
.footer-col { 
    flex: 1; 
}
.footer-col h3 { 
    color: #ff6600; /* Màu cam chủ đạo */
    font-size: 16px; 
    text-transform: uppercase; 
    margin-bottom: 20px; 
    position: relative; 
    padding-bottom: 10px; 
}
/* Tạo đường gạch chân mỏng  */
.footer-col h3::after { 
    content: ''; 
    position: absolute; 
    left: 0; 
    bottom: 0; 
    width: 40px; 
    height: 2px; 
    background-color: #ff6600; 
}
.footer-col p { margin: 0 0 10px 0; }
.footer-col ul { list-style: none; padding: 0; margin: 0; }
.footer-col ul li { margin-bottom: 10px; }
.footer-col ul li a { color: #ddd; transition: 0.3s; }
.footer-col ul li a:hover { color: #ff6600; text-decoration: underline; }

.footer-bottom { 
    width: 80%; 
    margin: 30px auto 0; 
    padding-top: 20px; 
    border-top: 1px solid #444; 
    text-align: left; 
    font-size: 13px; 
    color: #aaa; 
}ext-align: left; 
    font-size: 13px; 
    color: #aaa; 
}