﻿@charset "utf-8";

@font-face {
	font-family: "Segoe UI Web Light";
	font-style: normal;
	font-weight: 100;
	src: local("Segoe UI Light"), local("Segoe UI"), local("Helvetica Neue");
	unicode-range: U+0000-00FF;
}

@font-face {
	font-family: "Segoe UI Web Regular";
	font-style: normal;
	font-weight: normal;
	src: local("Segoe UI"), local("Helvetica Neue");
	unicode-range: U+0000-00FF;
}

@font-face {
	font-family: "Segoe UI Web Semibold";
	font-style: normal;
	font-weight: bold;
	src: local("Segoe UI Semibold"), local("Segoe UI Bold"), local("Segoe UI"), local("Helvetica Neue");
	unicode-range: U+0000-00FF;
}

@font-face {
	font-family: 'SVN-Segoe-UI';
	src: url('../fonts/SVN-Segoe-UI.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
	unicode-range: U+0000-00FF;
  }
  

body {
	background-color: #fff;
	color: #111111;
	font-size: 14px;
	font-family: "Segoe UI Web Light", "Segoe UI Light", "Segoe UI Web Regular", "Segoe UI", "Helvetica Neue", Arial;
	margin: 0;
	min-width: 980px;
}

/* Typography */
h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: "Segoe UI Web Light", "Segoe UI Light", "Segoe UI Web Regular", "Segoe UI", "Helvetica Neue", Arial;

}

a {
	color: #d84a38;
	cursor: pointer;
	font-weight: inherit;
	text-decoration: none;
}

a:visited {
	color: #d84a38;
}

.red {
	color: #d84a38;
}

a:hover {
	color: #d84a38;
	text-decoration: none;
}

/*Header*/
#header {
	width: auto;
	/* min-height: 106px;
	max-height: 20vh; */
	/* Độ dài tối đa là 20% của chiều cao của viewport */
	background-image: url('http://www.tlbbvn.net/content/imgs/header-footer-background.png');
	position: relative;
	

}



#topbar {
	/* background: #030303; */
	position: relative;
	height: 70px;
	width: 100%;
	float: left;
	/* border-bottom: 1px solid #e5e5e5; */

}

#topbar_logo {
    display: flex;
    justify-content: center; /* Căn giữa */
    align-items: center;
    height: 100px; /* Điều chỉnh nếu cần */
}

#topbar_logo img {
    margin-left: 8%; /* Dịch ảnh sang phải 10px, có thể chỉnh lớn hơn */
}




#topbar_userdisplay {
	position: absolute;
	float: right;
	margin-right: 20px;
	right: 2%;
	top: 2%;
}

.td-infomation {
	color: white;
}

.title-bold-font {
	font-weight: bold;
}

#cssmenu {
	position: absolute;
    bottom: 0;
	left: 50%;
    transform: translateX(-50%); /* Căn giữa theo chiều ngang */
}

/*Menu*/
#cssmenu {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    text-align: center;
}

/* Căn giữa menu */
#cssmenu ul {
    margin: 0 auto;
    padding: 0;
    list-style-type: none;
    width: fit-content; /* Tự động điều chỉnh theo nội dung */
    display: flex;
    justify-content: center; /* Căn giữa các thẻ <li> */
    align-items: center;
    height: 35px;
    text-transform: uppercase;
    font-size: 14px;
    font-family: Helvetica, Arial, Verdana, sans-serif;
}

/* Căn giữa các mục menu */
#cssmenu li {
    margin: 0 10px; /* Khoảng cách giữa các menu item */
}

/* Kiểu dáng link */
#cssmenu li a {
    display: block;
    color: #ffffff;
    text-decoration: none;
    padding: 10px 20px;
    height: 25px;
    line-height: 25px;
}

#cssmenu li a:hover {
    background-color: #c53727;
}

/* Mục đang active */
#cssmenu_active {
    background-color: #dd4b39;
}




#cssmenu .sub-menu ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

#cssmenu .sub-menu ul li {
	margin: 5px 0;
}

/* Đặt hình ảnh mũi tên cho nút "Hướng Dẫn" */
#cssmenu .accordion-toggle::before {
	content: url('path-to-arrow-image.png');
	/* Thay 'path-to-arrow-image.png' bằng đường dẫn đến hình ảnh của bạn */
	padding-right: 5px;
}




/* Hiển thị menu con khi hover vào nút "Hướng Dẫn" */
#cssmenu .accordion-toggle:hover+.sub-menu {
	display: block;
}


/* Tạo box mới khi hover vào "Hướng Dẫn" */
#cssmenu .hover-box {
	position: absolute;
	top: 195%;
	left: 98%;
	width: 200px;
	display: none;
}

/* Hiệu ứng hiển thị box khi hover */
#cssmenu .accordion-toggle:hover+.hover-box {
	display: block;
}

#cssmenu .hover-box:hover {
	display: block;
}


#main-hd {
    background-color: #fff;
    background-image: 
        url('http://www.tlbbvn.net/content/imgs/99tdmp.webp'), /* Ảnh gốc */
        url('http://www.tlbbvn.net/content/imgs/xoay.webp'); /* Ảnh lặp lại */
    background-repeat: no-repeat, repeat-y; /* Ảnh gốc không lặp, ảnh sau lặp dọc */
    background-size: 100% auto, 100% auto; /* 100% chiều rộng, chiều cao tự động */
    background-position: center top, center bottom; /* Ảnh gốc trên, ảnh lặp phía dưới */
    min-height: 100vh; /* Ít nhất chiếm hết màn hình */
}

#main {
	background-color: #fff;
	background-repeat: no-repeat;
	background-position: center top;
	width: auto;
	/* height: 770px; */
	/* min-height: 97vh;
    max-height: 90vh; */
	position: relative;
	background-image: url('http://www.tlbbvn.net/content/imgs/99tdmp.webp');
}


#main_ndc {
	background-color: #fff;
	background-repeat: no-repeat;
	background-position: center top;
	width: auto;
	/* height: 770px; */
	/* min-height: 97vh;
    max-height: 90vh; */
	position: relative;
	background-image: url('http://www.tlbbvn.net/content/imgs/show/back_ground_ndc.webp');
}


#main_page {
	font-family: "Segoe UI";
	text-align: left;
	color: #f5e152;
	/* background-color: #ffffff; */
	position: relative;
	width: 895px;
	height: auto;
	margin-right: auto;
	margin-left: auto;
}


#content_login {
	font-family: "Segoe UI";
	text-align: left;
	color: #111111;
	width: 320px;
	overflow: hidden;
	float: right;
	position: absolute;
	right: -4%;
	top: 5%;

}


#content_login span {
	font-size: 13px;
	text-decoration: none;
}

#content_news_title {
	position: relative;
	height: 43px;
	width: 100%;
	border-bottom: 1px solid #dbdbdb;
}

#content_news_title p {
	font-size: 18px;
	float: left;
	color: #f5e152;
	margin-left: 5px;
	margin-top: 7px;
	position: relative;
}

#content_news {
	font-family: "Segoe UI";
	padding-left: 20px;
	padding-right: 20px;
	padding-top: 20px;
	width: 680px;
	height: 100%;
	margin-left: auto;
	margin-right: auto;
	position: relative;

}

/*Footer*/
#footer {
	width: 100%;
	/* height: 55px; */
	margin-right: auto;
	margin-left: auto;
	/* border-top: 1px solid #e5e5e5; */
	background-image: url('http://www.tlbbvn.net/content/imgs/header-footer-background.png');

	display: flex;
	justify-content: center;
	/* Căn giữa theo chiều dọc */
	align-items: center;
	/* Căn giữa theo chiều ngang */
	/* min-height: 82px; */
	/* Độ dài tối thiểu là 5% của chiều cao của viewport */
}

#footer_container {
	color: #808074;
	width: 100%;
	height: 50px;
	margin-right: auto;
	margin-left: auto;

	flex: 1;
}

#topbar_button {
	text-align: right;
	/* Để topbar_button nằm căn lề bên phải */
	margin-right: 15px;
}

#footer_container p {
	left: 15px;
	float: left;
	color: #808074;
	margin-top: 17px;
	position: relative;
}

#footer_container a {
	color: #363636;
	position: relative;
	margin-left: 10px;
}

#footer_container a:hover {
	color: #000;
	text-decoration: underline;
}

td.content_news_form_title {
	font-size: 18px;
	background-repeat: no-repeat;
	background-position: left center;
	height: 25px;
	border-bottom: 1px solid #dbdbdb;
}

td.center_content {
	vertical-align: top;
	padding: 0;
	position: relative;
}

#content_news_title_logined {
	position: absolute;
	height: 43px;
	width: 100%;
	top: 9%;
	left: 16%;
	/* border-bottom: 1px solid #dbdbdb; */
	font-family: Segoe UI;
}

#content_news_title_logined p {
	font-size: 18px;
	float: left;
	color: #f5e152;
	margin-left: 5px;
	margin-top: 7px;
	position: relative;
}

td.textgray {
	color: #999999;
}

td.navbar {
	background-color: #f1f1f1;
	vertical-align: top;
	width: 260px;
	background-image: url('http://www.tlbbvn.net/content/imgs/nav_bar_image.webp');
	
}

td.adsbox {
	background-color: #FFFFFF;
	vertical-align: top;
	width: 260px;
	height: auto;
}

.boxinfo {
	background-color: #e8f6fd;
	background-repeat: repeat-x;
	color: #000000;
}

.boxinfoinner {
	min-height: 30px;
	padding: 0 0 0 60px;
	display: table-cell;
	vertical-align: middle;
}

.navbar_title {
	width: 255px;
	height: 30px;
	background: #fff;
	text-decoration: none;
	display: block;
	float: left;
	margin-left: 0;
	padding: 8px 0 5px 5px;
	cursor: pointer;
	border-bottom: 1px solid #dbdbdb;
}

.navbar_title p {
	font-family: Segoe UI;
	font-size: 140%;
	float: left;
	color: #FF0000;
	margin-top: 0px;
	margin-left: 15px;
	white-space: nowrap;
}

.navbar_menu {
	width: 245px;
	height: 35px;
	background: none;
	text-decoration: none;
	display: block;
	float: left;
	margin-left: 0;
	padding: 8px 0 5px 5px;
	cursor: pointer;
	border-right: none;
	font-family: Segoe UI;
	font-size: 18px;
	font-weight:bold;
}

.navbar_menu:hover {
	text-decoration: none;
	background: #C8C8C8;
	border-right: solid 10px #C8C8C8;
}

.navbar_menu p {
	font-family: Segoe UI, Tahoma, Verdana, Arial;
	float: left;
	/*font-weight: absolute;*/
	color: #f5e152;
	margin-top: 0px;
	margin-left: 15px;
	white-space: nowrap;
}

.navbar_menu p span {
	display: block;
	font-size: 11px;
	color: #303030;
	font-weight: normal;
	padding: 0px 0 0;
}

.navbar_menu_active {
	width: 245px;
	height: 29px;
	background: #c53727;
	text-decoration: none;
	display: block;
	float: left;
	margin-left: 0;
	padding: 8px 0 5px 5px;
	cursor: pointer;
	border-right: solid 10px #c53727;
}

.navbar_menu_active p {
	font-family: Segoe UI;
	font-size: 18px;
	float: left;
	color: #fff;
	margin-top: 0px;
	margin-left: 15px;
	white-space: nowrap;
	font-weight:bold;
}

.navbar_menu_active p span {
	display: block;
	font-size: 11px;
	color: #303030;
	font-weight: normal;
	padding: 0px 0 0;
}

/* Validation
----------------------------------------------------------*/
.error {
	color: #FF0000
}

/*JS báo lỗi form*/
.redstar {
	color: #FF0000;
	font-size: 16px;
}

.validation-errors {
	color: #FF0000;
}

.validation-success {
	color: #f5e152;
}

/* Tooltip
----------------------------------------------------------*/
.tooltip {
	position: absolute;
	z-index: 1020;
	display: block;
	visibility: visible;
	padding: 5px;
	font-size: 14px;
	opacity: 0;
	filter: alpha(opacity=0)
}

.tooltip.in {
	opacity: .8;
	filter: alpha(opacity=80)
}

.tooltip.top {
	margin-top: -2px
}

.tooltip.right {
	margin-left: 2px
}

.tooltip.bottom {
	margin-top: 2px
}

.tooltip.left {
	margin-left: -2px
}

.tooltip.top .tooltip-arrow {
	bottom: 0;
	left: 50%;
	margin-left: -5px;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-top: 5px solid rgba(39, 33, 35, 0.9)
}

.tooltip.left .tooltip-arrow {
	top: 50%;
	right: 0;
	margin-top: -5px;
	border-top: 5px solid transparent;
	border-bottom: 5px solid transparent;
	border-left: 5px solid rgba(39, 33, 35, 0.9)
}

.tooltip.bottom .tooltip-arrow {
	top: 0;
	left: 50%;
	margin-left: -5px;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-bottom: 5px solid rgba(39, 33, 35, 0.9)
}

.tooltip.right .tooltip-arrow {
	top: 50%;
	left: 0;
	margin-top: -5px;
	border-top: 5px solid transparent;
	border-bottom: 5px solid transparent;
	border-right: 5px solid rgba(39, 33, 35, 0.9)
}

.tooltip-inner {
	max-width: 250px;
	padding: 3px 8px;
	color: #fff;
	text-align: center;
	text-decoration: none;
	background-color: rgba(39, 33, 35, 0.9);
	-webkit-border-radius: 1px;
	-moz-border-radius: px;
	border-radius: 1px
}

.tooltip-arrow {
	position: absolute;
	width: 0;
	height: 0
}

.ads {
	width: 475px;
	height: 490px;
	border: 0
}



.centered ul {
	list-style: none;
	/* Loại bỏ dấu đầu dòng của danh sách */
	padding: 0;
	/* Xóa khoảng cách đệm mặc định */
	margin: 0 auto;
	/* Căn giữa theo chiều ngang */
	width: 43%;
	/* Đặt chiều rộng tùy ý */
}

.centered ul li {
	text-align: left;
	/* Để các mục trong danh sách nằm ở bên trái */
}

.input-container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    gap: 10px;
    flex-wrap: wrap; /* Cho phép xuống dòng khi cần */
}

.input-container input {
    text-align: center; /* Chữ bên trong input căn giữa */
    width: 100%; /* Để input tự căn chỉnh theo container */
    max-width: 300px; /* Độ rộng tối đa */
}


.input-container .error {
    width: 100%; /* Đảm bảo .error chiếm toàn bộ chiều rộng và xuống dòng */
    text-align: center; /* Căn giữa thông báo lỗi */
    color: red; /* Màu đỏ để làm nổi bật lỗi */
    margin-top: 5px; /* Tạo khoảng cách giữa input và error */
}

#username {
	border-radius: 15px;
}

#name1 {
	border-radius: 15px;
}

#password {
	border-radius: 15px;
}

#current_password {
	border-radius: 15px;
}

#tel {
	border-radius: 15px;
}

#sex {
	border-radius: 15px;
}

#address {
	border-radius: 15px;
}

#login-btn {
	border: 2px solid #d84a38;
	border-radius: 26px;
}

#name {
	border-radius: 15px;
}

#re_password {
	border-radius: 15px;
	margin-top: 10px;
}


#password2 {
	border-radius: 15px;
}

#re_password2 {
	border-radius: 15px;
	margin-top: 10px;
}

#email {
	border-radius: 15px;
}

#question {
	border-radius: 15px;
}

#answer {
	border-radius: 15px;
}

#full_name {
	border-radius: 15px;
}

#captcha {
	border-radius: 15px;
}

#register_code {
	border-radius: 15px;
}

.content_news_donate{
	position:absolute;
}



@media (min-height: 600px) {

	/* 800x600 */

	.content_news_donate{
		top:294%;
	}
	.error_text {
		top:20%;
	}
	#header {
		height: 19vh;
	}

	#footer {
		height: 7.5vh;
	}

	/* Tùy chỉnh CSS cho màn hình 19 inch */
	#topbar_button {
		margin-right: 21px;
	}


	#main {
		height: 95vh;
	}
	#main_ndc {
		height: 95vh;
	}


	.main_page_image {
		height: 392px;
		width: 508px;
		position: absolute;
		top: 14%;
		right: 46%;
	}
	.main_page_image_ndc {
		height: 392px;
		width: 519px;
		position: absolute;
		top: 14%;
		right: 46%;
	}

	#content_login {
		right: 7%;
		top: 16%;
	}
	#content_news_title_logined {
		top: 1%;
	}
	.content_news_table{
		position:absolute;
		top:13%;
	}

	.table_info_char{
		top:12%;
		
	}
	td.navbar {
		height: 94.5vh;
	}

	.navbar_position {
		top: -0.25%;
	}
	#topbar_userdisplay{
		top:0.5%;
	}
	.content_luu_y{
		top: 65%;
	}

	
}


@media (min-height: 720px) {

	/* 1280x720 */
	/* Tùy chỉnh CSS cho màn hình 19 inch */
	.error_text {
		top:20%;
	}
	#topbar_button {
		margin-right: 21px;
	}

	#header {
		height: 15vh;
	}

	#footer {
		height: 7.5vh;
	}

	#main {
		height: 77.5vh;
	}
	#main_ndc {
		height: 77.5vh;
	}

	.main_page_image {
		height: 500px;
		width: 681px;
		position: absolute;
		top: 2%;
		right: 41%;
	}
	.main_page_image_ndc {
		height: 500px;
		width: 681px;
		position: absolute;
		top: 6%;
		right: 41%;
	}

	#content_login {
		right: -1%;
		top: 15%;
	}
	#content_news_title_logined {
		top: 1%;
	}
	.content_news_table{
		position:absolute;
		top:13%;
	}

	.table_info_char{
		top:12%;
		
	}

	td.navbar {
		height: 77.4vh;
	}

	.navbar_position {
		top: -0.25%;
	}
	#topbar_userdisplay{
		top:0.5%;
	}
	.content_luu_y{
		top: 65%;
	}

}

@media (min-height: 768px) {
	/* 1024 x 768
	1366x768 */

	/* Tùy chỉnh CSS cho màn hình 19 inch */
	.error_text {
		top:18%;
	}
	#topbar_button {
		margin-right: 21px;
	}


	#header {
		height: 15vh;
	}

	#footer {
		height: 7.5vh;
	}

	#main {
		height: 77.5vh;
	}
	#main_ndc {
		height: 77.5vh;
	}

	.main_page_image {
		height: 509px;
		width: 614px;
		position: absolute;
		top: 5%;
		right: 37%;
	}
	.main_page_image_ndc {
		height: 445px;
        width: 622px;
        position: absolute;
        top: 12%;
        right: 37%;
	}

	#content_login {
		right: -1%;
		top: 17%;
	}
	#content_news_title_logined {
		top: 1%;
	}
	.content_news_table{
		position:absolute;
		top:13%;
	}

	.table_info_char{
		top:11%;
		
	}
	td.navbar {
		height: 77.4vh;
	}

	.navbar_position {
		top: -0.25%;
	}
	#topbar_userdisplay{
		top:0.5%;
	}
}

@media (min-height: 783px) {

	/* 789x 783 */
	/* Tùy chỉnh CSS cho màn hình 19 inch */
	.error_text {
		top:15%;
	}
	#topbar_button {
		margin-right: 17px;
	}


	#header {
		height: 13vh;
	}

	#footer {
		height: 7.5vh;
	}

	#main {
		height: 104.5vh;
	}
	#main_ndc {
		height: 104.5vh;
	}
	.main_page_image {
        height: 564px;
        width: 621px;
        position: absolute;
        top: 17%;
        right: 35%;
    }
	.main_page_image_ndc {
        height: 484px;
        width: 621px;
        position: absolute;
        top: 28%;
        right: 35%;
    }

	#content_login {
		right: -3%;
		top: 32%;
	}
	#content_news_title_logined {
		top: 1%;
	}

	.content_news_table{
		position:absolute;
		top:9%;
	}
	.table_info_char{
		top:9%;
		
	}

	td.navbar {
		height: 104.5vh;
	}

	.navbar_position {
		top: -0.25%;
	}

	#topbar_userdisplay{
		top:0.5%;
	}
	.content_luu_y{
		top: 46%;
	}
}

@media (min-height: 900px) {

	/* 1600x900 */
	/* Tùy chỉnh CSS cho màn hình 19 inch */
	.error_text {
		top:15%;
	}
	#topbar_button {
		margin-right: 21px;
	}


	#header {
		height: 12vh;
	}

	#footer {
		height: 7.5vh;
	}

	#main {
		height: 80.5vh;
	}
	#main_ndc {
		height: 80.5vh;
	}

    .main_page_image {
        height: 609px;
        width: 725px;
        position: absolute;
        top: 8%;
        right: 46%;
    }
	 .main_page_image_ndc {
        height: 599px;
        width: 840px;
        position: absolute;
        top: 14%;
        right: 36%;
    }

	#content_login {
		right: -8%;
		top: 29%;
	}
	#content_news_title_logined {
		top: 1%;
	}

	.content_news_table{
		position:absolute;
		top:9%;
	}

	.table_info_char{
		top:9%;
		
	}

	td.navbar {
		height: 80.7vh;
	}

	.navbar_position {
		top: -0.25%;
	}
	#topbar_userdisplay{
		top:0.5%;
	}
	.content_luu_y{
		top: 51%;
	}
}

@media (min-height: 931px) {

	/* 1600x 931 */
	/* Tùy chỉnh CSS cho màn hình 19 inch */
	.error_text {
		top:15%;
	}
	#topbar_button {
		margin-right: 21px;
	}

	#header {
		height: 11.5vh;
	}

	#footer {
		height: 7.5vh;
	}

	#main {
		height: 82vh;
	}
	#main_ndc {
		height: 82vh;
	}

	.main_page_image {
		height: 600px;
		width: 771px;
		position: absolute;
		top: 10%;
		right: 33%;
	}
	.main_page_image_ndc {
		height: 618px;
        width: 854px;
        position: absolute;
        top: 15%;
        right: 33%;
	}

	#content_login {
		right: -8%;
		top: 32%;
	}
	#content_news_title_logined {
		top: 1%;
	}
	.content_news_table{
		position:absolute;
		top:9%;
	}

	.table_info_char{
		top:9%;
		
	}

	td.navbar {
		height: 81.8vh;
	}

	.navbar_position {
		top: -0.25%;
	}
	#topbar_userdisplay{
		top:0.5%;
	}
}

@media (min-height: 1024px) {

	/* 1280 x1024 */
	/* Tùy chỉnh CSS cho màn hình 20 inch den 22inch */
	.error_text {
		top:15%;
	}
	#header {
		height: 11vh;
	}

	#footer {
		height: 7.5vh;
	}

	#main {
		height: 81.5vh;
	}
	#main_ndc {
		height: 81.5vh;
	}

	.main_page_image {
		height: 600px;
		width: 771px;
		position: absolute;
		top: 16%;
		right: 33%;
	}
	.main_page_image_ndc {
		height: 611px;
        width: 828px;
        position: absolute;
        top: 22%;
        right: 28%;
	}

	#content_login {
		right: -10%;
		top: 35%;
	}

	#topbar_button {
		margin-right: 19px;
	}

	#content_news_title_logined {
		top: 1%;
	}
	.content_news_table{
		position:absolute;
		top:9%;
	}

	.table_info_char{
		top:9%;
		
	}

	td.navbar {
		height: 81.5vh;
	}

	.navbar_position {
		top: -0.25%;
	}

	#topbar_userdisplay{
		top:0.5%;
	}
	.content_luu_y{
		top: 45%;
	}
}

@media (min-height: 1050px) {

	/* 1680 x 1050 */
	/* Tùy chỉnh CSS cho màn hình 20 inch den 22inch */

	.error_text {
		top:15%;
	}
	#header {
		height: 11vh;
	}

	#footer {
		height: 7.5vh;
	}

	#main {
		height: 81.5vh;
	}
	#main_ndc {
		height: 81.5vh;
	}

	.main_page_image {
		height: 783px;
		width: 962px;
		position: absolute;
		top: 1%;
		right: 31%;

	}
	.main_page_image_ndc {
		height: 750px;
        width: 1039px;
        position: absolute;
        top: 12%;
        right: 31%;

	}

	#content_login {
		right: -10%;
		top: 39%;
	}

	#topbar_button {
		margin-right: 19px;
	}
	#content_news_title_logined {
		top: 1%;
	}
	.content_news_table{
		position:absolute;
		top:9%;
	}

	.table_info_char{
		top:9%;
		
	}

	td.navbar {
		height: 81.5vh;
	}

	.navbar_position {
		top: -0.25%;
	}

	#topbar_userdisplay{
		top:0.5%;
	}
}



@media (min-height: 1080px) {

	/* 1920x 1080 */
	/* Tùy chỉnh CSS cho màn hình 20 inch den 22inch */
	.error_text {
		top:15%;
	}
	#header {
		height: 11vh;
	}

	#footer {
		height: 7.5vh;
	}

	#main {
		height: 81.5vh;
	}
	#main_ndc {
		height: 81.5vh;
	}

	.main_page_image {
		height: 783px;
		width: 962px;
		position: absolute;
		top: 4%;
		right: 37%;

	}
	.main_page_image_ndc {
		height: 735px;
        width: 1028px;
        position: absolute;
        top: 16%;
        right: 34%;

	}


	#content_login {
		right: -10%;
		top: 43%;
	}

	#topbar_button {
		margin-right: 19px;
	}
	#content_news_title_logined {
		top: 1%;
	}
	.content_news_table{
		position:absolute;
		top:8%;
	}

	.table_info_char{
		top:9%;
		
	}



	td.navbar {
		height: 81.5vh;
	}

	.navbar_position {
		top: -0.25%;
	}
	#topbar_userdisplay{
		top:0.5%;
	}
}


@media (min-height: 1200px) {

	/* 1920 x 1200 */
	/* Tùy chỉnh CSS cho màn hình 24 inch den 27inch */
	.content_luu_y{
		top: 40%;
	}
	.error_text {
		top:13%;
	}
	#header {
		height: 10vh;
	}

	#footer {
		height: 7.5vh;
	}

	#main {
		height: 82.5vh;
	}
	#main_ndc {
		height: 82.5vh;
	}

	.main_page_image {
		height: 783px;
		width: 962px;
		position: absolute;
		top: 13%;
		right: 35%;

	}
	.main_page_image_ndc {
		height: 753px;
        width: 1078px;
        position: absolute;
        top: 24%;
        right: 30%;

	}

	#content_login {
		right: -10%;
		top: 54%;
	}

	#topbar_button {
		margin-right: 19px;
	}

	#content_news_title_logined {
		top: 1%;
	}
	.content_news_table{
		position:absolute;
		top:8%;
	}

	.table_info_char{
		top:8%;
		
	}
	

	td.navbar {
		height: 82.5vh;
	}

	.navbar_position {
		top: -0.25%;
	}
	#topbar_userdisplay{
		top:0.5%;
	}


}

@media (min-height: 1600px) {

	/* 2500x 1600 */
	/* Tùy chỉnh CSS cho màn hình 30inch */
	.content_luu_y{
		top: 28%;
	}
	.error_text {
		top:10%;
	}
	#header {
		height: 7vh;
	}

	#footer {
		height: 7.5vh;
	}

	#main {
		height: 85.5vh;
	}
	#main_ndc {
		height: 85.5vh;
	}

	.main_page_image {
		height: 983px;
		width: 1162px;
		position: absolute;
		top: 27%;
		right: 31%;

	}
	.main_page_image_ndc {
		height: 997px;
        width: 1447px;
        position: absolute;
        top: 42%;
        right: 23%;

	}

	#content_login {
		right: -21%;
		top: 85%;
	}

	#topbar_button {
		margin-right: 19px;
	}
	

	#content_news_title_logined {
		top: 1%;
	}
	.content_news_table{
		position:absolute;
		top:6%;
	}

	.table_info_char{
		top:6%;
		
	}

	td.navbar {
		height: 85.5vh;
	}

	.navbar_position {
		top: -0.25%;
	}

	#topbar_userdisplay{
		top:0.5%;
	}

}








#white_board {
	height: 25px;
}

.navbar { 

	position:absolute;
	left: -0.1%;
}

@media (min-width: 789px) {
	.error_text {
		position: absolute;
		right: 55.5%;
		color: #ffffff;
	}
	#content_news_title_logined {
		left: 30%;
	}
	.content_news_table{
		left:23%;
	}
	.table_info_char{
		left:19%;
		position:absolute;
	}
	.content_news_donate{
		left:22%;
	}
	.content_luu_y{
		left: 23.5%;
	}
}

@media (min-width: 1280px) {
	

	.error_text {
		position: absolute;
		right: 74.5%;
		color: #ffffff;
	}

	#content_news_title_logined {
		left: 22%;
	}

	.table_info_char{
		left:0.5%;
		position:absolute;
	}

	.content_news_donate{
		left:-1%;
	}
	.content_luu_y{
		left: 0.5%;
	}

}

@media (min-width: 1366px) {
	

	.error_text {
		position: absolute;
		right: 59.5%;
		width: 60%;
		color: #ffffff;
	}
	#content_news_title_logined {
		left: 22%;
	}

	.table_info_char{
		left:-2.5%;
		position:absolute;
	}
	.content_news_donate{
		left:-4%;
	}
	.content_luu_y{
		left: -2.5%;
	}
	/* .main_page_image {
        height: 509px;
        width: 614px;
        position: absolute;
        top: 15%;
        right: 49%;
    } */
}

@media (min-width: 1600px) {
	

	.error_text {
		position: absolute;
		right: 56.5%;
		width: 60%;
		color: #ffffff;
	}
	#content_news_title_logined {
		left: 28%;
	}

	.table_info_char{
		left:1.5%;
		position:absolute;
	}
	.content_news_donate{
		left:0%;
	}
	.content_luu_y{
		left: 1.5%;
	}
}

@media (min-width: 1680px) {

	.error_text {
		position: absolute;
		right: 59.5%;
		width: 60%;
		color: #ffffff;
	}

	#content_news_title_logined {
		left: 28%;
	}
	.table_info_char{
		left:-1%;
		position:absolute;
	}
	.content_news_donate{
		left:-2%;
	}
	.content_luu_y{
		left: -1.5%;
	}
}

@media (min-width: 1920px) {
	

	.error_text {
		position: absolute;
		right: 61.5%;
		width: 60%;
		color: #ffffff;
	}

	#content_news_title_logined {
		left: 30%;
	}
	.table_info_char{
		left:-3%;
		position:absolute;
	}
	.content_news_donate{
		left:-4%;
	}
	.content_luu_y{
		left: -2.5%;
	}
}


@media (min-width: 2500px) {
	.table_info_char {
		position: absolute;
		left: -1.5%;
	}

	.error_text {
		position: absolute;
		right: 59.5%;
		width: 60%;
		color: #ffffff;
	}
	#content_news_title_logined {
		left: 35%;
	}

	.content_news_donate{
		left:-3%;
	}
	.content_luu_y{
		left: -1.5%;
	}
}

.content_luu_y{
	position:absolute;
}

.container-login{
	display: flex; /* Sử dụng flexbox để dễ dàng căn chỉnh */
    align-items: center; /* Căn giữa theo chiều dọc */
	position:relative;
	margin-bottom: -11px;
}
.news-container {
    width: auto;
    font-family: "Segoe UI", sans-serif;
    text-align: center;
    padding: 20px;
}



.news-title {
    font-weight: bold;
    font-size: 24px;
    margin-bottom: 20px;
    text-transform: uppercase;
    color: #f5e152;
}

.news-content {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
}



.news-content-p {
	color: #f5e152;
}

.news-item {
    width: 220px;
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}



.news-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
}

.news-item img {
    width: auto; /* Giữ nguyên kích thước gốc */
    max-width: none; /* Không giới hạn kích thước */
    height: auto; /* Giữ nguyên tỷ lệ ảnh */
    display: block;
}




.news-item .title {
    padding: 12px;
    font-weight: bold;
    font-size: 18px;
    color: #333;
    background: #f5e152;
    text-transform: uppercase;
}


.news-item a {
    display: block; /* Để toàn bộ thẻ a chiếm cả card */
    text-decoration: none; /* Loại bỏ gạch chân */
    color: inherit; /* Giữ màu chữ mặc định */
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

.news-item a:hover {
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
}


/* Đảm bảo phần tử cha không bị tràn */
.news-container-img,
.news-container-img * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


.news-container-img-hd,
.news-container-img-hd * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Container chính */
.news-container-img {
    font-family: "Segoe UI", sans-serif;
    text-align: center;
    padding: 20px;
    width: 100%;
    overflow: hidden; /* Ngăn tràn ngoài màn hình */
}

/* Nội dung chính */
.news-content-img {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    overflow: hidden; /* Ngăn tràn */
}

/* Phần chứa ảnh */
.news-item-img {
    overflow: auto; /* Cho phép cuộn */
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 100vw; /* Giới hạn chiều rộng tối đa theo viewport */
    max-height: 100vh; /* Giới hạn chiều cao tối đa theo viewport */
}

/* Ảnh */
.news-item-img img {
    width: auto; /* Giữ nguyên kích thước gốc */
    max-width: 100%; /* Không vượt quá container */
    max-height: 100vh; /* Không vượt quá chiều cao màn hình */
    display: block;
    object-fit: contain; /* Đảm bảo ảnh không bị méo */
}


.m-btn.big-button {
    font-size: 22px !important; /* Tăng kích thước chữ */
    padding: 18px 40px !important; /* Tăng padding */
    border-radius: 10px !important; /* Bo góc button */
    display: inline-block !important;
    text-align: center !important;
    font-weight: bold !important;
    text-transform: uppercase !important;
    transition: 0.3s ease-in-out !important; /* Hiệu ứng hover */
}

.m-btn.big-button:hover {
    transform: scale(1.1) !important; /* Phóng to nhẹ khi di chuột */
}


.news-container-hd {
    width: 100%;
    font-family: "Segoe UI", sans-serif;
    text-align: center;
    padding: 20px;
    box-sizing: border-box;
}

.news-title-hd {
    font-weight: bold;
    font-size: 24px;
    margin-bottom: 20px;
    text-transform: uppercase;
    color: #f5e152;
}

.news-content-hd {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
}

.news-item-hd {
    flex: 1 1 calc(100% / 6 - 20px); /* Mặc định chia thành 6 cột */
    max-width: calc(100% / 6 - 20px);
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    box-sizing: border-box;
}

.news-item-hd:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
}

.news-item-hd img {
    width: 100%; /* Ảnh tự co giãn theo kích thước */
    height: auto;
    display: block;
}

.news-item-hd .title {
    padding: 12px;
    font-weight: bold;
    font-size: 18px;
    color: #333;
    background: #f5e152;
    text-transform: uppercase;
    text-align: center;
}

.news-item-hd a {
    display: block;
    text-decoration: none;
    color: inherit;
}

/* Responsive: Tablet (≤1024px) - Giảm còn 4 cột */
@media (max-width: 1024px) {
    .news-item-hd {
        flex: 1 1 calc(100% / 4 - 20px);
        max-width: calc(100% / 4 - 20px);
    }
}

/* Responsive: Mobile lớn (≤768px) - Giảm còn 3 cột */
@media (max-width: 768px) {
    .news-item-hd {
        flex: 1 1 calc(100% / 3 - 20px);
        max-width: calc(100% / 3 - 20px);
    }
}

/* Responsive: Mobile nhỏ (≤480px) - Giảm còn 2 cột */
@media (max-width: 480px) {
    .news-item-hd {
        flex: 1 1 calc(100% / 2 - 20px);
        max-width: calc(100% / 2 - 20px);
    }
}

/* Responsive: Điện thoại rất nhỏ (≤320px) - Hiển thị 1 cột */
@media (max-width: 320px) {
    .news-item-hd {
        flex: 1 1 100%;
        max-width: 100%;
    }
}


/* Reset CSS */
.news-container-detail, .news-container-detail * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Container chính */
.news-container-detail {
    font-family: "Segoe UI", sans-serif;
    text-align: center;
    padding: 20px;
    width: 100%;
    max-width: 800px; /* Giới hạn độ rộng bài viết */
    margin: 0 auto; /* Canh giữa trang */
    overflow: hidden; /* Ngăn tràn */
}

/* Tiêu đề bài viết */
.news-title-detail {
    font-size: 28px;
    font-weight: bold;
    color: #f5e152;
    margin-bottom: 20px;
    text-transform: uppercase;
}

/* Nội dung bài viết */
.news-body-detail {
    text-align: left;
    font-size: 18px;
    line-height: 1.6;
    color: #f8f8f8;
    margin-bottom: 20px;
}

/* Tạo vùng nội dung có thể cuộn khi quá dài */
.news-content-wrapper {
    max-height: 500px; /* Giới hạn chiều cao nội dung */
    overflow-y: auto; /* Cho phép cuộn dọc */
    padding-right: 10px; /* Chừa không gian cho thanh cuộn */
}

/* Hình ảnh bài viết */
.news-content-detail-img {
    display: flex;
    justify-content: center;
    margin: 20px 0;
    overflow: auto; /* Cho phép cuộn nếu ảnh quá lớn */
}

.news-content-detail-img img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Responsive: Hiển thị tốt trên màn hình nhỏ */
@media (max-width: 768px) {
    .news-container-detail {
        padding: 15px;
    }
    
    .news-title-detail {
        font-size: 24px;
    }

    .news-body-detail {
        font-size: 16px;
    }

    .news-content-wrapper {
        max-height: 400px;
    }

    .news-content-detail-img img {
        max-width: 100%;
    }
}

