*{ 
	box-sizing : border-box;
}


body{
	font-family: Arial;
	background-color: #FFF;
	margin: 0px;
}


a {
    text-decoration: none;
    color: inherit;
}

ul {
    list-style: none;
}
        /* THANH THÔNG TIN TRÊN CÙNG */
#top {
    width: 100%;
    height: 48px;
    background-color: #E26F03; 
    color: #FFF;
}

#top-content {
    width: 80%;
    height: 48px;
    margin: 0 auto;
    display: flex; 
    justify-content: space-between;
    align-items: center;
}

#top-left {
    line-height: 48px;
}

#top-right ul {
    display: flex;
    gap: 20px; 
    line-height: 48px;
}

#top-right a {
    opacity: 1;
    transition: opacity 0.3s;
	color: white;
}

#top-right a:hover {
    opacity: 1;
    color: #f1c40f; 
}


        /* banner */

#main-header {
    width: 100%;
    position: relative; 
    z-index: 100;
}

.container-inner {
    width: 90%;
    max-width: 1200px; 
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}


#top-bar {
    background-color: #333;
    color: #fff;
    padding: 10px 0;
    font-size: 14px;
}

.top-bar-left {
    display: flex;
    gap: 20px;
}

.header-info-box {
    display: flex;
    align-items: center;
    gap: 8px;
}

.icon-small {
    color: #f1c40f; 
    font-size: 16px;
}

.top-bar-right ul {
    display: flex;
    gap: 15px;
}

.top-bar-right a {
    opacity: 0.8;
    transition: opacity 0.3s;
}

.top-bar-right a:hover {
    opacity: 1;
    color: #f1c40f;
}


/* THANH MENU CHÍNH */
#menu-bar {
    background-color: #fff;
    padding: 15px 0;
    border-bottom: 1px solid #ddd;
    font-weight: bold;
    position: sticky;  
    top: 0;            
    z-index: 9999;     
    width: 100%;
}

#main-menu ul {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 50px; 
    font-size: 16px;
    padding: 0;
    margin: 0;
}

#main-menu ul li {
    position: relative;
    list-style: none;
    padding: 10px 0;
}

#main-menu a {
    color: #000;
    text-transform: uppercase;
    position: relative;
    padding-bottom: 5px;
    display: block;
    transition: color 0.3s;
}

#main-menu a:hover {
    opacity: 1;
    color: #f1c40f;
}

#main-menu ul ul {
    display: none;          
    position: absolute;
    top: 100%;            
    left: 0;
    background-color: #ffffff; 
    min-width: 220px;   
    padding: 5px 0;
    margin: 0;
    z-index: 10000;
    border-radius: 4px;
}

#main-menu ul ul li {
    width: 100%;
    border: none;         
}

/* Chữ của từng mục đồ ăn */
#main-menu ul ul li a {
    color: #6699FF;
    font-size: 14px;
    line-height: 24px;
    padding: 10px 20px; 
    display: block;
}

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

.menu-actions {
    display: flex;
    gap: 15px;
    align-items: center;
}

.icon-btn {
    background: none;
    border: none;
    font-size: 20px;
    cursor: pointer;
    color: #333;
}

.cart-btn {
    background-color: #f1c40f; 
    color: #333;
    padding: 10px 15px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    gap: 5px;
    position: relative;
    transition: background-color 0.3s;
}

.cart-btn:hover {
    background-color: #f39c12; 
}




/* Slide */
#anh{
	width :100%;
	height: 100%;
}

/* wrapper*/

#wrapper {
    width: 100%;
}
#container {
    width: 80%;
    margin: 0 auto;
}
.main-content-top {
    height: 412px;
    width: 100%;
    margin-top: 50px;
}

/* menu ảnh tự chuyển */
#list-cate {
		background-image:url('hoaqua.jpg');
    width: 23%;
    height: 100%;
    float: left;
    border: 1px solid #CCC;
    border-radius: 20px;
}
#list-cate h1 {
    background-color: #E8A35E;
    color: white;
    font-size: 16px;
    margin: 0;
    padding: 0;
    text-align: center;
    line-height: 42px;
    border-radius: 20px;
}
#list-cate ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
#list-cate li {
    line-height: 40px;
    border-bottom: 1px solid #CCC;
}
#list-cate li.no-border {
    border-bottom: none;
}
#list-cate li a {
    display: block;
    padding-left: 15px;
    text-decoration: none;
    color: white;
}


#anhdoan {
    width: 75%;
    height: 100%;
    float: right;
}

/* Hình ảnh menu đồ ăn  */
#nen{
		background-color: #F4F4F4;
	padding: 0px;
	height: auto;
}


.cate {
    width: 100%;
    margin-top: 40px;
}

.cate-title {
    text-transform: uppercase;
		width: 300px;
		height: 48px;                   
		background-color: #FF9966;
		color: #FFF;
		font-size: 32px;
		 font-weight: bold;
		text-align: center;
		line-height : 48px;
		border-radius: 40px;
		margin: 76px auto 20px auto;
}

.list-product {
     height: 100%
}


.list-product::after {
    content: "";
    display: table;
    clear: both;
}


.product {
    background-color: white;
    border-radius: 10px;
    overflow: hidden;
    height: 400px;
    position: relative;
	display: flex;
    flex-direction: column;
	box-shadow: 0 4px 6px rgba(0,0,0,0.05);
    border: 2px solid transparent;
    transition: transform 0.5s ease, box-shadow 0.5s ease, border-color 0.5s ease;
}

/* Hiệu ứng nhấc */
.product:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
	border: 2px solid #33CCFF;

}

.kichco{
	height:60%;
	width: 100%;
}


.photo {
	cursor: pointer;
    transition: transform 0.5s ease, opacity 0.5s ease;
   width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    opacity: 1;
}

.photo:hover {
    opacity: 1;
}

.name {
   font-size: 16px;
    font-weight: bold;
	padding-left: 5px;
    color: #FF66CC;
	margin: 15px 10px 0px 5px;
}
.price {
   color: red;
    font-weight: bold;
    font-size: 18px;
    position: absolute;
    bottom: 10px;
    right: 15px;
    margin: 0;
	
}

.p-divider {
   border: none;              
    border-top: 1px dashed #dcdcdc; 
    width: 100%;
    margin-top: auto;
}


#noidung{
	width: 100%;
     display: flex; 
     height: 270px;
     clear: both;
}

.noidung-anh{
	flex: 1; 
    height: 100%;
    object-fit: cover;
}

.buy {
    width: calc(100% - 30px); 
    height: 40px;
    margin: 5px 15px 40px 15px; 
    
    background: linear-gradient(135deg, #FF66CC, #FF9966);
    color: #FFFFFF; 
    border: none; 
    border-radius: 20px; 
    font-size: 15px;
    font-weight: bold;
    text-transform: uppercase; 
    letter-spacing: 0.5px; 
    padding-top: 2px;
   
    cursor: pointer;
    transition: all 0.3s ease; 
}

















        /* ---  CHÂN TRANG (FOOTER) --- */
       #footer {
    width: 100%;
    height: auto; 
    background-color: #CC6633;
    padding-bottom: 40px; 
}

#footer-content {
    width: 80%;
    margin: 0 auto;
    display: flex;
    gap: 40px;
}

.footer-ht {
    height: 100%;
    flex: 1;
    color: white;
}

.footer-ht h2 {
    font-size: 22px;
    padding-top: 20px;
    margin-bottom: 15px; 
}

.footer-ht p {
    margin: 10px 0; 
}

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

.footer-ht li {
    line-height: 35px; 
}

.footer-ht li a {
    display: block;
    text-decoration: none;
    color: white;
    padding-left: 0; 
}

.footer-ht li a:hover {
    text-decoration: underline;
    color: #ffcc00; 
}


/*  logoo dưới cùng*/
#quick-contact{
	width: 80px;
	height: 80px;
	border-radius: 40px;
	position: fixed;
	bottom: 20px;
	right: 20px;
	background-image: url('tuvan.png')
	}
	
	
	
	
	/* Thiết lập CSS cho Mobile*/
@media only screen and (max-width: 768px)  {
	#top { 
	display: none;
	} 
	
	#anhnen{
		display: none;
	}
	
	#noidung{
		display:none;
	}
	
	#quick-contact{
		display: none;
	} 
	
	.main-content-top{
		display: none;
	}
	
	#anhdoan{
		display: none;
	}
	
	.col-s-1{width: 8.33%}
	.col-s-2{width: 16.66%}
	.col-s-3{width: 25.0%}
	.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%}
	
}

/* Thiết lập CSS cho Table*/
@media only screen and (min-width: 768px)  {
		#top { 
	display: block;
	} 
	#noidung{
		display:none;
	}
	#quick-contact{
		display: none;
	} 
	
	.main-content-top{
		display: block;
	}
	
	#anhdoan{
		display: block;
	}
	
	.col-m-1{width: 8.33%}
	.col-m-2{width: 16.66%}
	.col-m-3{width: 25.0%}
	.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%}
}

/* Thiết lập CSS cho Lap*/
@media only screen and (min-width: 1200px)  {
	#top { 
	display: block;
	} 
	
	#noidung{
		display: block
	}
	#quick-contact{
		display: block;
	} 
	
	.col-x-l{width: 8.33%}
	.col-x-2{width: 16.66%}
	.col-x-3{width: 25.0%}
	.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%}
	
}

[class*="col-"]
{
	float: left;
	padding: 15px;
}



/* Nhượng quyền */
.highlight{
	font-size: 18px;
    font-weight: bold;
    color: #27ae60;
    margin-bottom: 20px;
}

#nq-ct{
	background-color: #CCFFFF; height: 700px; width: 100%;padding: 40px 160px 40px 160px;
}

#nq-ct p {
            line-height: 1.6;
            color: #555;
            margin-bottom: 20px;
            text-align: justify;
        }