body {
margin: 0;
font-family: Arial, sans-serif;
background-image: url('br.jpg');
}

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

#top {
width: 100%;
height: 40px;
background-color: #2E9E08;
color: white;
font-size: 14px;
}

#top-content {
width: 90%;
max-width: 1200px;
margin: auto;
height: 100%;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 20px;
}

#top-left,
#top-right {
display: flex;
align-items: center;
gap: 20px;
}

#top-left i,
#top-right i {
margin-right: 5px;
}

#top-right a {
color: white;
text-decoration: none;
}

#top-right a:hover { /* Sửa lỗi cú pháp, thêm :hover vào a */
text-decoration: underline;
cursor: pointer;
}

/* Phần banner */
#banner {
width: 100%;
background-color: white;
padding: 20px 0;
}

#banner-content {
width: 90%;
max-width: 1200px;
margin: auto;
display: flex;
align-items: center;
justify-content: space-between;
gap: 30px;
padding: 0 20px;
}

.banner-left {
display: flex;
align-items: center;
gap: 40px;
flex: 1;
justify-content: center;
}

.banner-item {
display: flex;
align-items: center;
gap: 10px;
}

.banner-item img {
width: 40px;
height: 40px;
object-fit: contain;
}

.logo img {
max-height: 60px;
width: auto;
}

.banner-item .text {
font-size: 14px;
line-height: 1.4;
color: #333;
}

.banner-cart {
flex-shrink: 0;
}

.banner-cart button {
background-color: orange;
color: white;
padding: 10px 20px;
border-radius: 25px;
border: none;
font-weight: bold;
cursor: pointer;
display: flex;
align-items: center;
gap: 10px;
}

/* Phần menu - Cải thiện responsive */
#menu {
width: 100%;
min-height: 48px;
background-color: #2E9E08;
position: relative; /* Giữ relative để #menu-content có thể dùng absolute nếu cần */
z-index: 10; /* Đảm bảo menu nằm trên các phần tử khác */
}

#menu-content {
width: 90%;
max-width: 1200px;
margin: auto;
padding: 0 20px;
position: relative; /* Quan trọng để menu ul.absolute căn chỉnh theo nó */
display: flex; /* Đảm bảo menu-toggle và ul nằm trên cùng một hàng trên desktop */
align-items: center; /* Căn giữa theo chiều dọc */
justify-content: space-between; /* Đẩy menu-toggle sang một bên */
}

/* Hamburger Menu Button */
.menu-toggle {
display: none; /* Mặc định ẩn trên desktop */
background: none;
border: none;
color: white;
font-size: 20px;
cursor: pointer;
padding: 12px;
/* Loại bỏ position absolute ở đây để nó flex đúng cách */
z-index: 1000;
}

.menu-toggle span {
display: block;
width: 25px;
height: 3px;
background-color: white;
margin: 5px 0;
transition: 0.3s;
border-radius: 2px;
}

/* Animation for hamburger menu */
.menu-toggle.active span:nth-child(1) {
transform: rotate(-45deg) translate(-5px, 6px);
}

.menu-toggle.active span:nth-child(2) {
opacity: 0;
}

.menu-toggle.active span:nth-child(3) {
transform: rotate(45deg) translate(-5px, -6px);
}

/* Main menu */
#main-menu { /* Đổi selector từ #menu ul thành #main-menu */
list-style: none;
margin: 0;
padding: 0;
height: 48px; /* Giữ chiều cao cố định trên desktop */
display: flex;
align-items: center;
/* Mặc định hiển thị trên desktop */
}

#main-menu li {
position: relative;
height: 48px;
display: flex;
align-items: center;
}

#main-menu li a {
text-decoration: none;
color: white;
display: block;
padding: 0 15px;
line-height: 48px;
height: 48px;
white-space: nowrap;
}

#main-menu li a:hover {
background-color: orange;
color: white;
cursor: pointer;
}

/* Dropdown menu */
#main-menu li ul { /* Đổi selector từ #menu ul li ul thành #main-menu li ul */
display: none;
position: absolute;
top: 48px;
left: 0;
width: 180px;
background-color: #ddd;
box-shadow: 0 2px 5px rgba(0,0,0,0.2);
flex-direction: column;
height: auto;
z-index: 1; /* Đảm bảo dropdown nằm trên các phần tử khác */
}

#main-menu li:hover ul {
display: flex;
}

#main-menu li ul li {
width: 100%;
height: auto;
}

#main-menu li ul li a {
color: black;
border-bottom: 1px solid #ccc;
padding: 10px 15px;
height: auto;
line-height: 1.4;
}

/* Phần slideshow */
#slideshow {
width: 100%;
height: auto;
background-color: white;
padding: 20px 0;
position: relative;
z-index: 1;
}

.slideshow-wrapper {
width: 90%;
max-width: 1200px;
margin: auto;
display: flex;
gap: 20px;
align-items: stretch;
padding: 0 20px;
}

.category-box {
width: 25%;
background-color: #f8f8f8;
border-radius: 10px;
padding: 15px;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}

.category-box h3 {
background-color: #8bc34a;
color: white;
text-align: center;
padding: 10px;
margin: 0;
border-radius: 10px 10px 0 0;
font-size: 16px;
}

.category-list {
list-style: none;
padding: 10px 0;
margin: 0;
display: flex;
flex-direction: column;
}

.category-list li {
padding: 8px 10px;
font-size: 14px;
border-bottom: 1px solid #ddd;
display: flex;
align-items: center;
gap: 8px;
color: #333;
}

.category-list li:last-child {
border-bottom: none;
}

.slideshow-box {
width: 75%;
border-radius: 12px;
overflow: hidden;
}

.slide-image {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 12px;
}

/* Phần container */
#container {
width: 100%;
min-height: 700px;
background-color: white;
margin-top: 20px;
padding: 20px 0;
clear: both;
position: relative;
z-index: 0;
}

#content {
width: 90%;
max-width: 1200px;
margin: auto;
padding: 0 20px;
}

.cate {
width: 100%;
clear: both;
}

.cate-title {
width: 300px;
line-height: 40px;
background-color: #2E9E08;
font-size: 16pt;
color: #fff;
padding-left: 15px;
border-radius: 15px;
}

.list-products { /* Thêm class này để quản lý layout sản phẩm */
display: flex;
flex-wrap: wrap;
margin: 0 -15px; /* Điều chỉnh margin âm để bù padding của col-s-6/col-m-4/col-x-3 */
}

.product {
padding: 15px;
width: 100%;
text-align: center;
line-height: 40px;
border: 1px solid #ccc;
border-radius: 10px;
margin-bottom: 15px; /* Thêm margin-bottom để tạo khoảng cách giữa các sản phẩm */
}

.product .photo {
width: 150px;
height: 120px;
object-fit: cover; /* Đảm bảo hình ảnh không bị méo */
}

.name {
text-decoration: none;
font-weight: bold;
font-size: 16px;
color: #2E9E08;
display: block; /* Đảm bảo tên sản phẩm chiếm một dòng riêng */
}

.price {
color: orange;
font-size: 16px;
font-weight: bold;
display: block; /* Đảm bảo giá chiếm một dòng riêng */
}

.buy {
cursor: pointer;
border-radius: 10px;
background-color: orange;
color: #fff;
width: 120px;
height: 36px;
border: none;
margin-top: 10px; /* Thêm khoảng cách với giá */
}

/* Phần chat */
#chat {
width: 60px;
height: 250px; 
position: fixed;
bottom: 50px;
right: 15px;
z-index: 2;
display: flex; 
flex-direction: column; 
align-items: center; 
justify-content: space-around; 
padding: 10px 0; 
}

.chat-icon {
width: 50px; 
height: 50px; 
border-radius: 50%; 
display: flex;
justify-content: center;
align-items: center;
margin: 5px 0;
background-size: 60%;
background-repeat: no-repeat;
background-position: center;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); 
cursor: pointer; /* Thêm con trỏ cho icon */
}

/* Specific styles for each icon */
.phone-icon {
background-color: #f44336;
background-image: url('image/phone.jpg'); 
}

.zalo-icon {
background-color: #2196f3;
background-image: url('image/zalo.jpg'); 
}

.messenger-icon {
background-color: #03a9f4;
background-image: url('image/mes.jpg');
}

.email-icon {
background-color: #00bcd4;
background-image: url('image/email.jpg');
}

.location-icon {
background-color: #ffc107; 
background-image: url('image/location.jpg'); 
}

/* Phần footer - Cải thiện responsive */
#footer {
width: 100%;
background-color: #558B2F;
color: white;
padding: 40px 0;
clear: both;
}

.footer-content {
width: 90%;
max-width: 1200px;
margin: auto;
display: flex;
justify-content: space-between;
gap: 30px;
padding: 0 20px;
}

.footer-column {
flex: 1;
min-width: 200px;
}

.footer-column h3 {
font-size: 18px;
margin-top: 0;
margin-bottom: 20px;
text-transform: uppercase;
position: relative;
padding-bottom: 10px;
}

.footer-column h3::after {
content: '';
position: absolute;
left: 0;
bottom: 0;
width: 50px;
height: 2px;
background-color: white;
}

.footer-column p {
font-size: 14px;
line-height: 1.6;
margin-bottom: 10px;
display: flex;
align-items: flex-start;
gap: 8px;
}

.footer-column p i {
font-size: 16px;
margin-top: 2px; 
}

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

.footer-column ul li {
margin-bottom: 10px;
}

.footer-column ul li a {
color: white;
text-decoration: none;
font-size: 14px;
display: flex; 
align-items: center;
gap: 8px;
}

.footer-column ul li a::before {
content: '\2022';
color: white; 
font-weight: bold;
display: inline-block;
width: 1em;
margin-left: -1em; 
}

.footer-column ul li a:hover {
text-decoration: underline;
}

.haravan-fb-img {
width: 100%; 
max-width: 280px; 
height: auto;
border-radius: 5px; 
display: block; 
}

/* Grid System */
.col-1{width: 8.33%;}
.col-2{width: 16.66%;}
.col-3{width: 25%;}
.col-4{width: 33.33%;}
.col-5{width: 41.66%;}
.col-6{width: 50%;}
.col-7{width: 58.33%;}
.col-8{width: 66.66%;}
.col-9{width: 75%;}
.col-10{width: 83.33%;}
.col-11{width: 91.66%;}
.col-12{width: 100%;}

[class*="col-"]{
float: left; /* Giữ float để cột hiển thị đúng */
padding: 15px; /* Giữ padding */
}

/* Responsive Design Improvements */

/* Mobile */
@media only screen and (max-width: 768px){
.col-s-1{width: 8.33%;}
.col-s-2{width: 16.66%;}
.col-s-3{width: 25%;}
.col-s-4{width: 33.33%;}
.col-s-5{width: 41.66%;}
.col-s-6{width: 50%;}
.col-s-7{width: 58.33%;}
.col-s-8{width: 66.66%;}
.col-s-9{width: 75%;}
.col-s-10{width: 83.33%;}
.col-s-11{width: 91.66%;}
.col-s-12{width: 100%;}

#top-content,
#banner-content,
#menu-content,
.slideshow-wrapper,
#content,
.footer-content {
	width: 95%;
	padding: 0 10px;
}

.menu-toggle {
	display: block;
	position: relative;
	left: 10px;
	top: 50%;
	height: 18px;
	z-index: 1001; 
}

/* Ẩn menu trên mobile theo mặc định và tạo hiệu ứng trượt xuống */
#main-menu { /* Đổi selector từ #menu ul thành #main-menu */
	position: absolute; /* Đặt menu nằm dưới menu-toggle */
	top: 100%; /* Ngay dưới phần tử cha (menu-content) */
	left: 0;
	width: 100%; /* Chiều rộng 100% */
	height: auto; /* Chiều cao tự động */
	max-height: 0; /* Ẩn menu bằng cách đặt max-height là 0 */
	background-color: #2E9E08;
	flex-direction: column; /* Sắp xếp các mục theo chiều dọc */
	justify-content: flex-start;
	align-items: stretch;
	padding: 0; /* Bỏ padding-top không cần thiết */
	overflow: hidden; /* Quan trọng để ẩn nội dung tràn ra ngoài */
	transition: max-height 0.3s ease-out; /* Hiệu ứng trượt cho max-height */
	z-index: 999;
	box-shadow: 0 2px 5px rgba(0,0,0,0.3);
	display: flex; /* Giữ display flex để column hoạt động */
}

#main-menu.active { /* Đổi selector từ #menu ul.active thành #main-menu.active */
	max-height: 500px; /* Chiều cao tối đa khi menu hiển thị (điều chỉnh nếu menu của bạn dài hơn) */
	/* Không cần right: 0 nữa */
}

#main-menu li {
	width: 100%;
	height: auto;
	border-bottom: 1px solid rgba(255,255,255,0.1);
}

#main-menu li a {
	padding: 15px 20px;
	line-height: 1.4;
	height: auto;
	display: block;
	width: 100%;
}

/* Mobile dropdown */
#main-menu li ul { /* Đổi selector từ #menu ul li ul thành #main-menu li ul */
	position: static; /* Đặt lại vị trí thành static */
	width: 100%;
	background-color: rgba(0,0,0,0.1);
	box-shadow: none;
	margin-left: 0;
	max-height: 0; /* Ẩn dropdown con theo mặc định */
	transition: max-height 0.3s ease-out; /* Hiệu ứng trượt cho dropdown con */
}

#main-menu li:hover ul,
#main-menu li.active ul { /* Dùng .active cho dropdown con khi li cha có .active */
	display: flex; /* Giữ display flex */
	max-height: 200px; /* Chiều cao tối đa cho dropdown con */
}

#main-menu li ul li a {
	padding-left: 40px;
	background-color: rgba(0,0,0,0.1);
}

/* Overlay for mobile menu (nếu bạn muốn có một lớp phủ tối khi menu mở) */
.menu-overlay {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,0.5);
	z-index: 998;
}

.menu-overlay.active {
	display: block;
}

.footer-content {
	flex-direction: column;
	gap: 20px;
}

.slideshow-wrapper {
	flex-direction: column;
}

.category-box,
.slideshow-box {
	width: 100%;
}
}

/* Tablet */
@media only screen and (min-width: 768px) and (max-width: 1023px){
.col-m-1{width: 8.33%;}
.col-m-2{width: 16.66%;}
.col-m-3{width: 25%;}
.col-m-4{width: 33.33%;}
.col-m-5{width: 41.66%;}
.col-m-6{width: 50%;}
.col-m-7{width: 58.33%;}
.col-m-8{width: 66.66%;}
.col-m-9{width: 75%;}
.col-m-10{width: 83.33%;}
.col-m-11{width: 91.66%;}
.col-m-12{width: 100%;}

/* Đảm bảo menu và slideshow hiển thị đúng trên tablet */
#menu, #slideshow{
	display: block;
}

.menu-toggle {
	display: none; /* Ẩn nút hamburger trên tablet */
}

#main-menu { /* Đảm bảo menu hiển thị inline trên tablet */
	display: flex;
	position: static;
	height: 48px;
	max-height: none; /* Bỏ giới hạn chiều cao max-height của mobile */
	width: auto;
	background-color: transparent;
	box-shadow: none;
	overflow: visible;
	flex-direction: row;
	padding: 0;
}

#main-menu li {
	border-bottom: none;
}

#main-menu li ul {
	display: none; /* Mặc định ẩn dropdown con */
	position: absolute; /* Giữ vị trí tuyệt đối cho dropdown con */
	top: 48px;
	left: 0;
	max-height: none; /* Bỏ giới hạn chiều cao max-height của mobile */
	width: 180px; /* Đặt lại width cho dropdown trên desktop */
	background-color: #ddd;
	box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

#main-menu li:hover ul {
	display: flex; /* Hiển thị dropdown khi hover */
}

/* Tablet specific adjustments */
#top-content,
#banner-content,
#menu-content,
.slideshow-wrapper,
#content,
.footer-content {
	width: 92%;
	padding: 0 15px;
}
}

/* Desktop */
@media only screen and (min-width: 1024px){
.col-x-1{width: 8.33%;}
.col-x-2{width: 16.66%;}
.col-x-3{width: 25%;}
.col-x-4{width: 33.33%;}
.col-x-5{width: 41.66%;}
.col-x-6{width: 50%;}
.col-x-7{width: 58.33%;}
.col-x-8{width: 66.66%;}
.col-x-9{width: 75%;}
.col-x-10{width: 83.33%;}
.col-x-11{width: 91.66%;}
.col-x-12{width: 100%;}

/* Đảm bảo menu và slideshow hiển thị đúng trên desktop */
#menu, #slideshow{
	display: block;
}

.menu-toggle {
	display: none; /* Ẩn nút hamburger trên desktop */
}

#main-menu { /* Đảm bảo menu hiển thị inline trên desktop */
	display: flex;
	position: static;
	height: 48px;
	max-height: none;
	width: auto;
	background-color: transparent;
	box-shadow: none;
	overflow: visible;
	flex-direction: row;
	padding: 0;
}

#main-menu li {
	border-bottom: none;
}

#main-menu li ul {
	display: none; /* Mặc định ẩn dropdown con */
	position: absolute; /* Giữ vị trí tuyệt đối cho dropdown con */
	top: 48px;
	left: 0;
	max-height: none;
	width: 180px;
	background-color: #ddd;
	box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

#main-menu li:hover ul {
	display: flex; /* Hiển thị dropdown khi hover */
}
}

/* Large Desktop */
@media only screen and (min-width: 1400px){
#top-content,
#banner-content,
#menu-content,
.slideshow-wrapper,
#content,
.footer-content {
	max-width: 1400px;
}
}