body{
	margin: 0px; 
	font-family: arial;
}
*{
	box-sizing: border-box; /*
	border: 1px solid #CCC; */
}

/*-BEGIN HEADER--*/
#header{
width:100%; 
height:268px; 
}
	#top{
	width:100%;	height:40px; 
	background-color: #2f5f8f; /*blue*/
	color: white;
	}
		#top-left{ 
		height:40px; 
		float: left;
		display: none;
		}	
			#top-left span{
			margin-right: 20px;
			line-height: 40px;
			}
			#top-left img{
			height: 25px;
			padding-top: 8px;
			}
		#top-right{
		height:40px; 
		float:right; 
		text-align: right;
		}
			#top-right a{
			text-decoration: none;
			line-height: 40px;
			color: white;
			}
			#top-right img{
			height: 25px;
			padding-top: 8px;
			}
	#banner{
	width:100%; height:178px; 
	margin: auto;
	}
		#logo{
		width: 20%;	height: 100%;
		float: left;
		text-align: left;
		}
			#logo img{
			height: 100%;
			}
			
		.site-title { 
		flex: 1; 
		padding-left: 12px; 
		padding-top: 50px;
		}
		.site-title h1 { 
		color: #d63b2a; 
		font-size: 30px; 
		margin-bottom: 2px; 
		line-height: 30px; 
		letter-spacing: 0.6px; 
		}
		.site-title p { 
		color: #888; 
		font-size: 20px; 
		margin-top: 10px; 
		}
			
		#login{			
		height: 60px; width: 180px; 
		color: white; 
		display: block; 
		line-height: 60px;
		text-align: center; 
		text-decoration: none;  
		float: right; 
		position: absolute;
		right: 15px;
		top: 50%;
		transform: translateY(-50%);
		}
	#menu{
	display: none;
	width:100%; height:50px; 
	background-color: #2f5f8f;
	position: relative;
	z-index: 10;
	}
	#menu ul{
	margin: 0px; 
	padding: 0px; 
	list-style: none;	
	}
/*--END HEADER--*/	

/*--BEGIN CONTAINER--*/	
#container{
width: 100%; 
min-height: 500px; 
background-color: white;
}
	#wrapper{
	width: 80%; 
	margin: 20px auto; 
	min-height: 500px;
	}
	#overview{
	width: 100%; 
	height: 420px;
	}
	
	
	/*SLIDESHOW*/	
	.slideshow-wrap {
	  width: 100%;
	  background: #fff;
	  padding: 18px 0;
	}

	.slideshow {
	  width: 90%;
	  max-width: 1200px;
	  margin: 0 auto;
	  position: relative;
	  overflow: hidden;
	  border-radius: 6px;
	  box-shadow: 0 1px 6px rgba(0,0,0,.08);
	  height: 400px; 
	}

	.slide {
	  width: 100%;
	  height: 100%;
	  display: none;
	}

	.slide.active { display: block; }

	.slide img {
	  width: 100%;
	  height: 100%;
	  object-fit: cover; 
	  object-position: center;
	  display: block;
	}
/*--END CONTAINER--*/	

/*-------------------------------------------------------BEGIN 3 CỘT-------------------------------------------------------*/
/* nút */
.dots button { 
width:10px; 
height:10px; 
border-radius:50%; 
border: none; 
background: rgba(255,255,255,0.6); 
cursor:pointer; 
}
.dots button.active { 
background: #2c5aa0; 
}

/*--3 columns--*/
.three-col { 
width: 90%; 
max-width: 1200px; 
margin: 22px auto; 
display: grid; 
grid-template-columns: 1fr 1fr 420px; 
gap: 18px; 
}
	/* CARD */
	.card { 
	background: #fff; 
	border-radius: 6px; 
	padding: 16px; 
	box-shadow: 0 1px 6px rgba(0,0,0,.06); 
	}
	.card h2 { 
	font-size: 18px; 
	color: #2c5aa0; 
	margin-bottom: 12px; 
	border-bottom: 1px solid #eee; 
	padding-bottom: 8px; }

		/* list trong card */
		.list { 
		list-style: none; 
		display: block; 
		}
		.list li { display: flex; 
		gap: 12px; 
		align-items: flex-start; 
		padding: 12px 0; 
		border-bottom: 1px dashed #eee; 
		}
		.list .list-icon { 
		width: 36px; 
		height: 36px; 
		object-fit: cover; 
		}
		.list a { 
		color: #2c5aa0; 
		text-decoration: none; 
		font-weight: 600; 
		display: block; 
		}
		.list .date { 
		margin-left: auto; 
		color: #999; 
		font-size: 12px; 
		}

		/* Xem thêm */
		.more { 
		display: inline-block; 
		margin-top: 10px; 
		color: #2c5aa0; 
		text-decoration: none; 
		font-weight: 700; 
		}

		/* video area */
		.video-embed iframe { 
		border-radius: 4px; 
		border: none; 
		}
		.video-list { margin-top: 12px; 
		display:flex; 
		flex-direction:column; 
		gap:8px; 
		}
		.video-list a { 
		color:#2c5aa0; 
		text-decoration:none; 
		font-weight:600; 
		}
/*-------------------------------------------------------END 3 CỘT-------------------------------------------------------*/
		
/*--BEGIN FOOTER--*/
#footer{
width:100%; height:500px; 
background-color: #2f5f8f; 
color: white;
clear: both;
}
	.footer-info{
	display: none;
	font-size: 11pt;
	font-weight: normal;
	text-align: left;
	line-height: 18px;
	padding-left: 20px;
	}
	.footer-map{
	margin: 0px;
	border:0px; 
	height: 90%
	}
/*--END FOOTER--*/

/*-----------------------------------------------------MENU & SIDEBAR---------------------------------------------------------------*/
#menu ul li a{
display: block; 
line-height: 50px; 
text-decoration: none; 
color: white;
padding: 0px 20px; 
text-align: left;
}
#menu ul ul{
position: absolute;
z-index: 11;				
display: none;
margin: 0px;
padding: 0px;
list-style: none; 
}
#menu li:hover{		 		
position: relative;
background-color: #6BA1DE; 
}
#menu li:hover ul{ 			
display: block;
position: absolute;
top: 50px; 		left: 0px; 
}
#menu li li{				
width: 300px;
border-bottom: 1px solid #CCC;
background-color: #EFEFEF;
line-height: 38px;
padding-left: 15px; 
}
#menu li li a{ 				
text-decoration: none;
color: #333;
display: block; 
}
#menu li li a:hover{		
color: #004754; 
}

#sidebar ul ul{ 
display: none;
margin: 0px;
padding: 0px;
list-style: none; 
}
#sidebar li:hover{
position: relative;
background-color: #6BA1DE; 
}
#sidebar li:hover ul{
display: block;
position: absolute;
top: 0px; right: -300px; 
}
#sidebar li li{
width: 300px;
border-bottom: 1px solid #CCC;
background-color: #EFEFEF;
line-height: 36px;
padding: 0px 15px; 
}
#sidebar li li a{
text-decoration: none;
color: #333;
display: block; 
}
#sidebar li li a:hover{ 
color: #004754; 
}
	
/*-----------------------------------------------------GIỎ HÀNG---------------------------------------------------------------*/	
.order-header, .order-item{
display: flex;
align-items: center;
padding: 10px;
font-size: 15pt;
color: white;
}

.order-header{
background-color: #2f5f8f;
font-weight: bold;
border-radius: 10px;
}

.order-header > div, .order-item > div{
padding: 10px;
text-align: center;
}
.order-photo{
width: 100px;
flex: 1;	
}
.order-name{	
width: 200px;
flex: 2;
}
.order-price, .order-quantity, .order-total{
width: 70px;
flex: 1;
}

.btnMinus, .btnPlus{
background-color: white;
color: white;
border: none;
cursor: pointer;
font-size: 14pt;
}
.btnMinus:disabled{
opacity: 0.5;
cursor: not-allowed;	
}

/*ảnh*/
.order-photo img{
width: 80px; height: 80px;
object-fit: cover;
}
.btnDelete{
border: none;
background-color: white;
cursor: pointer;
}
.btnDelete img{
width: 30px; height: 30px;
}

#content:empty{
height: 50px; 
}
/*------------------------------------------------------TỔNG TIỀN----------------------------------------------------------*/
.total{
font-size: 15pt;
color: white;
background-color: #2f5f8f;
border-radius: 10px;
display: flex;
justify-content: space-between;
align-items: center;
position: sticky;
bottom: 0;
}
.order-bill{
background-color: #DD6734;
color: white;
line-height: 50px;
min-width: 150px;
text-align: center;
border-radius: 10px;
}
.order-confirm a{
width: 150px;
display: block;
text-decoration: none;
line-height: 50px;
text-align: center;
background-color: #6BA1DE;
border-radius: 10px;
font-size: 15pt;
color: white;
font-weight: bold;
cursor: pointer;
}
/*-----------------------------------------------------PREVIEW MODAL---------------------------------------------------------------*/	
.modal{
position: fixed;
top: 0; left: 0;
width: 100%; height: 100%;
border-radius: 10px;
z-index: 1000; /*vị trí layer trên cùng*/
backdrop-filter: blur(3px); /*nền blur*/
background-color: rgba(0, 0, 0, 0.2); 
display: none;
}
.modal-content{
background-color: white;
padding: 20px;
border-radius: 10px;
width: 400px; height: 520px;
text-align: center;
position: relative;
margin: 200px auto;
}
.modal-content .close{
position: absolute;
top: 10px; right: 15px;
font-size: 24px;
cursor: pointer;
}

#preview-image{
width: 200px; height: 200px;
border-radius: 10px; 
}
#preview-name{
font-size: 14pt;
color: white;
}
#preview-sale{
font-size: 20pt;
color: #DD6734;
font-weight: bold;
}
#preview-price{
color: #CCC; 
font-size: 13pt; 
margin-top: 0;
text-decoration: line-through;
}
.num, #preview-num{
color: white; 
font-size: 14pt; 
}
#preview-num{
font-size: 15pt; 
width: 100px;
}
#confirm-add{
height: 50px; width: 200px;
font-size: 14pt;
color: white;
background-color: #2f5f8f;
border-color: #2f5f8f;
border-radius: 10px;
}
#confirm-add:hover{
color: white;
background-color: #DD6734;
border-color: #DD6734;
transform: translateY(-3px);
box-shadow: 0 3px 8px rgba(0, 0, 0, 0.5);
cursor: pointer;
}

/* Thêm vào cuối css_index.css */
#login {
    display: block !important;
    float: right;
    width: auto;
    min-width: 180px;
    text-align: center;
}

/* Mobile: vẫn hiển thị tên người dùng */
@media (max-width: 1024px) {
    #login {
        display: block !important;
        float: none;
        width: 100%;
        background: #002244;
        padding: 8px 0;
    }
}

/* ====================== MENU NGƯỜI DÙNG ====================== */
.user-menu {
  position: relative;
  display: inline-block;
  font-family: 'Segoe UI', Tahoma, sans-serif;
}

.arrow {
  font-size: 12px;
  transition: transform 0.2s ease;
}

.user-menu:hover .arrow {
  transform: rotate(180deg);
}

/* Dropdown */
.dropdown-menu {
  display: none;
  position: absolute;
  right: 0;
  top: 100%; /* đặt ngay dưới phần tử cha */
  margin-top: 0;
  background: #fff;
  min-width: 220px;
  border-radius: 12px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.15);
  overflow: hidden;
  z-index: 9999;
  border: 1px solid #e0e0e0;
  animation: slideDown 0.25s ease-out;
}

.user-menu:hover .dropdown-menu {
  display: block;
}

/* Item trong menu */
.menu-item {
  margin: 0;
  border-bottom: 1px solid #f5f5f5;
}

.menu-item:last-child {
  border-bottom: none;
}

.menu-item a {
  display: block;
  padding: 12px 18px;
  color: #2c5aa0;
  text-decoration: none;
  font-size: 14.5px;
  transition: all 0.2s ease;
  position: relative;
}

.menu-item a:hover {
  color: #fff;
  padding-left: 24px !important;
  font-weight: 500;
}

.menu-item:first-child a {
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
}

/* Logout đỏ */
.logout-item a {
  color: #e74c3c !important;
  font-weight: 500;
}

.logout-item a:hover {
  background: #ffebee !important;
  color: #c62828 !important;
  padding-left: 24px !important;
}

/* Hiệu ứng mở menu */
@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Responsive */
@media (max-width: 768px) {
  .dropdown-menu {
    right: auto;
    left: 50%;
    transform: translateX(-50%);
    width: 200px;
  }
  .user-name {
    font-size: 14px;
    padding: 6px 6px;
  }
}