body {
	background: #f1f1f1 url(bg.gif);
	font-family:Tahoma, Geneva, sans-serif;
	margin:0;
	padding:0;
}
li{

}
a {
	text-decoration:none;
}
img a{
	border:0;
}
form {
	padding:0;
	margin:0;
}
.canhgiua {
	width:964px;
	margin-left:auto;
	margin-right:auto;
}
.clear {clear:both;}
	#header {
    background: url("headerbg.jpg") no-repeat scroll center center;
    height: 280px;
    width: 100%;
}
#header #wrapper {
	width:964px;
	height:70px;
}
#logo {
	float:left;
}
/* CSS cho thanh topbar mới */
/* - Không sài nền ảnh
 #topbar-wrapper {
    background-color: #333;
    color: #fff; /
    height: 35px;
    line-height: 35px;
    width: 100%;
    border-bottom: 2px solid #857574;
    box-sizing: border-box;
} */

#topbar-wrapper {
    /* BỎ background-color: #333; */ /* Xóa hoặc comment dòng này */
    background: url('modulebottom.png') repeat-x center center; /* Thêm dòng này: nền ảnh lặp lại theo chiều ngang, căn giữa */
    background-size: cover; /* Đảm bảo ảnh bao phủ toàn bộ khu vực, có thể bị cắt bớt nếu tỷ lệ không khớp */
    /* Hoặc dùng background-size: 100% 100%; nếu muốn ảnh kéo dãn vừa khít */
    /* Hoặc đơn giản là background: url('nenanh.png'); nếu ảnh nhỏ và muốn lặp lại mặc định */
    /* color: #fff; */
    height: 35px;
    line-height: 35px;
    width: 100%;
    border-bottom: 1px solid #cecece; /* Giữ nguyên viền nếu muốn */
    box-sizing: border-box;
}

#topbar-wrapper .canhgiua {
    width: 964px; /* Giữ nguyên chiều rộng canh giữa của bạn */
    margin: 0 auto; /* Căn giữa thanh topbar */
}

#topbar-left {
    float: left;
    margin-left: 10px; /* Khoảng cách từ lề trái */
   /* color: #fff; /* Đảm bảo màu chữ trắng */ 
}

/* Điều chỉnh lại #topmenu cho vị trí mới */
#topmenu {
    float: right;
    margin: 0;
    padding: 0;
    font-size: 13px;
    font-family: Arial, Helvetica, sans-serif;
    width: auto;
    position: static;
}

#topmenu ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: flex-end;
    height: 35px;
    align-items: center;
}

#topmenu ul li {
    margin-left: 10px;
    color: #333333;
    line-height: normal;
}

#topmenu ul li a:link,
#topmenu ul li a:visited {
 /*   color: #fff; */
    padding: 0 5px;
    text-decoration: none;
    background: none;
    display: inline-block;
}

#topmenu ul li a:hover,
#topmenu ul li a:active {
	background:url(headerbut.gif) repeat-x center;
	padding:7px;
	color:#FFFFFF;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
}

#topmenu ul li .active {
    color: #fc0;
    background: none;
}

/* CSS cho thanh màu đen dưới header */
/* - Không sài nền ảnh 
.topbar-after-header {
    background-color: #333;
    color: #fff;
    height: 35px;
    line-height: 35px;
    width: 100%;
    border-bottom: 2px solid #857574;
    box-sizing: border-box;
	margin-top: -7px;
} */

.topbar-after-header {
    /* BỎ background-color: #333; */ /* Xóa hoặc comment dòng này */
    background: url('modulebottom.png') repeat-x center center; /* Thêm dòng này */
    background-size: cover; /* Giống như trên */
    color: #fff;
    height: 35px;
    line-height: 35px;
    width: 100%;
    border-top: 1px solid #cecece; /* Viền nằm ngang bên trên */	
    border-bottom: 1px solid #cecece; /* Viền nằm ngang bên dưới */
    box-sizing: border-sizing;
    margin-top: -7px; /* Giữ nguyên margin nếu đã điều chỉnh */
}

.topbar-after-header .canhgiua {
    margin-left: auto;
    margin-right: auto;
}

#body-wrapper {
}
#content-wrap {
	float:left;
	width: 720px;
}
#content-wrap .top {
	height: 9px;
	background:url(moduletop.png) no-repeat left bottom;
	margin-top: -4px;
}
#content-wrap .middle {
	background:url(modulebg.png) left repeat-y;
	padding-left: 0; /* THAY ĐỔI: Bỏ padding để nội dung chiếm hết không gian */
}
#content-wrap .bottom {
	height:50px;
	background: url(modulebottom.png) top left;
}

/* KHỐI #mainmenu ĐÃ BỊ XÓA BỎ */

#content {
	float: none; /* THAY ĐỔI: Không cần float nữa */
	width: 100%; /* THAY ĐỔI: Chiếm 100% chiều rộng của parent */
	padding:10px;
	position:relative;
	box-sizing: border-box; /* Thêm để padding không ảnh hưởng chiều rộng */
}
#sidebar {
	float:right;
	width:240px;
}
#sidebar .top {
	height: 34px;
	background:url(sidetop.png) left top no-repeat;
	padding-left:15px;
	padding-top:10px;
	font-weight:bold;
	font-family:Arial, Helvetica, sans-serif;
	margin-top: -3px;
}
#sidebar .middle {
	background:url(sidebg.png) left repeat-y;
	padding-left:20px;
}
.loginpanel {
	background:url(loginbg.png) repeat-y left;
	width:255px;
	padding:10px 0 0 0px;
	margin-left:-20px;
	color:#FFFFFF;
}
#sidebar .bottom {
	height:51px;
	background:url(sidebottom.png) left top no-repeat;
	padding: 0px 10px;
}
#sidebar .bottom ul {
	list-style: none;
	padding:0;
	margin:0;
}
#sidebar .bottom ul li {
	font-size:12px;
	color:#ffffff;
	padding-left:10px;
	float:left;
	background:url(sidebarbottomli.gif) no-repeat left bottom;
	line-height: 47px;
}
#sidebar .bottom ul li a:link, #sidebar .bottom ul li a:visited {
	color:#ffffff;
	background:url(arrow.png) left center no-repeat;
	padding:10px 10px 10px 20px;
	line-height: 47px;
}
#sidebar .bottom ul li a:hover, #sidebar .bottom ul li a:active {
	color:#FC0;
}
#footer-above {
	height:40px;
}
#footer {
    height: auto; /* Thay đổi chiều cao thành auto để nó tự động điều chỉnh theo nội dung */
    background: #333; /* Thay thế ảnh nền bằng màu đen giống topbar-wrapper */
    background: #d4ccc2 url(footerbg.gif) repeat-x bottom; /* <-- Xóa hoặc comment dòng này */
    padding: 20px 0; /* Thêm padding trên và dưới để tạo khoảng trống cho nội dung */
    color: #fff; /* Đặt màu chữ mặc định là trắng cho footer */
}

#footer .canhgiua {
    width: 100%; /* Thay đổi thành 100% để kéo dài toàn màn hình */
    margin: 0 auto; /* Giữ nguyên căn giữa (mặc dù với 100% thì không còn ý nghĩa nhiều cho việc căn giữa nội dung) */
    /* Có thể bỏ margin: 0 auto; nếu không cần nữa, nhưng nó không gây hại */
}

#footer .line1 {
    /* Xóa hoặc comment dòng này nếu không còn cần thiết */
    /* line-height: 26px; */
    text-align: center; /* Căn giữa nội dung "Liên hệ hỗ trợ" */
    margin-bottom: 10px; /* Thêm khoảng cách dưới cho line1 */
}

#footer .line1 a:link,
#footer .line1 a:visited {
    color: #fff; /* Đảm bảo màu chữ trắng cho link "Liên hệ hỗ trợ" */
    text-decoration: none; /* Bỏ gạch chân link */
}

#footer .line1 a:hover,
#footer .line1 a:active {
    color: #fc0; /* Màu khi hover */
}

#footer .line1 font { /* Nếu bạn dùng thẻ <font> trực tiếp */
    color: #fff; /* Đảm bảo màu chữ trắng */
}


#footer .line2 {
    height: auto; /* Thay đổi chiều cao thành auto */
    font-size: 13px;
    font-family: Arial, Helvetica, sans-serif;
    color: #a39b91; /* Đổi màu chữ cho thông tin bản quyền (màu xám nhạt) */
    text-align: center; /* Căn giữa toàn bộ nội dung trong line2 */
    line-height: 1.6; /* Tăng line-height để các dòng chữ không bị dính vào nhau */
}

#footer .line2 ul {
    /* Bạn có thể xóa ul này nếu không muốn hiển thị menu dưới footer nữa */
    list-style: none;
    padding: 0;
    margin: 0 0 10px 0; /* Thêm margin dưới nếu giữ menu */
    display: block; /* Đảm bảo ul là một block để căn giữa dễ hơn */
    width: auto; /* Đặt auto hoặc 100% */
    float: none; /* Loại bỏ float nếu có */
    text-align: center; /* Căn giữa các mục li */
}

#footer .line2 ul li {
    float: none; /* Bỏ float nếu có */
    display: inline-block; /* Để các mục menu nằm ngang */
    margin: 0 5px; /* Khoảng cách giữa các mục menu */
    color: #a39b91; /* Đảm bảo màu chữ cho dấu "|" */
}

#footer .line2 ul li a:link,
#footer .line2 ul li a:visited {
    color: #a39b91; /* Đổi màu chữ cho link menu dưới footer */
    text-decoration: none;
}

#footer .line2 ul li a:hover,
#footer .line2 ul li a:active {
    color: #fc0;
}

#footer .line2 p {
    float: none; /* Bỏ float */
    width: auto; /* Bỏ width cố định */
    text-align: center; /* Căn giữa đoạn văn bản */
    margin: 0; /* Đảm bảo không có margin không mong muốn */
    padding: 0;
    color: #a39b91; /* Đảm bảo màu chữ cho đoạn thông tin bản quyền */
}

#footer .line2 p a:link,
#footer .line2 p a:visited {
    color: #a39b91; /* Màu link trong đoạn bản quyền */
    text-decoration: none;
}

#footer .line2 p a:hover,
#footer .line2 p a:active {
    color: #fc0;
}

.menu-button {
	
	float:left;
	margin:10px;
	font-family:Arial, Helvetica, sans-serif;
}
.menu-button a:link, .menu-button a:visited {
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
	background: #ffffff url(buttonbg.html) left top no-repeat;
	display:block;
	padding-left:50px;
	padding-top:15px;
	color: #11a3dc;	
	font-size:16px;
	font-weight:bold;
	height: 55px;
	width:155px;
	border:1px solid #CCCCCC;
}
.menu-button a:hover, .menu-button a:active {
	background: #bbecff left top no-repeat;
}
.menu-button span {
	font-size:12px;
	font-weight: normal;
	color: #464646;
}
.loginbottomlinks a:link, .loginbottomlinks  a:visited {
	color:#1D1A15;
	}

/* ============================================= */
/* === CSS CHO MENU NGANG VÀ DROPDOWN MỚI === */
/* ============================================= */

/* Căn chỉnh lại thanh menu #topmenu2 */
#topmenu2 {
    /* ... giữ nguyên các thuộc tính khác ... */
    float: none;
    width: 100%;
    position: static;
    /* font-family: Arial, Helvetica, sans-serif; */
    font-size: 13px;
}

/* Áp dụng Flexbox cho tất cả các ul bên trong #topmenu2 */
#topmenu2 ul {
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    height: 35px;
    list-style: none;
    width: 100%; /* Đảm bảo ul chiếm toàn bộ chiều rộng có sẵn */
}

/* Các kiểu mặc định cho tất cả các link trong topmenu2 */
#topmenu2 ul li {
    margin: 0;
    color: #333333;
    position: relative;
    border-right: 1px solid rgba(140, 140, 140, 0.4);    
}

#topmenu2 ul li a {
    color: #333333; /* Màu mặc định của chữ */
    padding: 0 10px;
    text-decoration: none;
    display: block;
    line-height: 35px;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 12.89px;
    white-space: nowrap;
}

/* Màu khi di chuột qua */
#topmenu2 ul li a:hover {
    color: #f00; /* Màu đỏ khi di chuột qua */
}

/* Class mới cho mục menu đang được chọn (active) */
#topmenu2 ul li a.active-menu-item {
    color: #333333; /* Giữ màu chữ đỏ */
    /* background-color: #fcebeb; /* (Tùy chọn) Màu nền nhẹ nhàng cho khung active */
    border: 1px solid #333333; /* Viền 1px màu đỏ */
    padding: 0 8px; /* Giảm padding ngang một chút để bù trừ cho border, hoặc điều chỉnh nếu muốn khung rộng hơn */
    /* Nếu bạn muốn bo tròn góc, thêm: */
    border-radius: 3px; 
    font-size: 13.0px
}

/* Bỏ hoặc chỉnh sửa dòng này nếu bạn không muốn .active mặc định từ trước có màu vàng nữa */
/* #topmenu2 ul li a.active {
    color: #fc0;
} */


/* === KIỂU DÀNH CHO MENU KHI ĐÃ ĐĂNG NHẬP === */
.menu-logged-in {
    justify-content: space-between; /* Giãn đều các mục ra hai phía */
}

/* === KIỂU DÀNH CHO MENU KHÁCH CHƯA ĐĂNG NHẬP === */
.menu-guest {
    /* justify-content: center; /* THAY ĐỔI TẠI ĐÂY: Căn giữa các mục menu */
    /* Nếu bạn muốn khoảng cách đều giữa các item KHI NÓ ĐÃ Ở GIỮA, bạn có thể thử: */
    /* justify-content: space-around; */
    /* hoặc justify-content: space-evenly; */
    /* Tuy nhiên, 'center' thường là lựa chọn tốt nhất để các item tụ lại ở giữa */
}

/* --- CSS cho Dropdown (giữ nguyên) --- */
.dropdown .dropbtn {
    cursor: pointer;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #333;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1000;
    border-top: 2px solid #fc0;
}

.dropdown-content a {
    color: white;
    padding: 10px 15px;
    text-decoration: none;
    display: block;
    text-align: left;
    line-height: normal;
    text-transform: none;
    font-weight: normal;
}

.dropdown-content a:hover {
    background-color: #555;
    color: #fc0;
}

.dropdown:hover .dropdown-content {
    display: block;
}